Scenes: Wrapping flex layout demo scene (#62540)

* Scenes: Adding a demo dashboard with wrapping flex layout

* Updates

* Update version

public/app/features/scenes/scenes/demo.tsx

@@ -1,3 +1,4 @@
+import { getFrameDisplayName } from '@grafana/data';
 import {
   SceneFlexLayout,
   SceneTimeRange,
@@ -94,7 +95,7 @@ export function getScenePanelRepeaterTest(): DashboardScene {
           children: [
             new VizPanel({
               pluginId: 'timeseries',
-              title: 'Title',
+              title: getFrameDisplayName(frame),
               options: {
                 legend: { displayMode: 'hidden' },
               },
@@ -133,3 +134,57 @@ export function getScenePanelRepeaterTest(): DashboardScene {
     ],
   });
 }
+
+export function getRepeaterSceneWithFlexWrap(): DashboardScene {
+  const queryRunner = getQueryRunnerWithRandomWalkQuery({
+    seriesCount: 10,
+    alias: '__server_names',
+    scenarioId: TestDataQueryType.RandomWalk,
+  });
+
+  return new DashboardScene({
+    title: 'Flex layout with wrap test',
+    body: new SceneByFrameRepeater({
+      body: new SceneFlexLayout({
+        direction: 'row',
+        wrap: 'wrap',
+        children: [],
+      }),
+      getLayoutChild: (data, frame, frameIndex) => {
+        return new VizPanel({
+          pluginId: 'timeseries',
+          title: getFrameDisplayName(frame),
+          $data: new SceneDataNode({
+            data: {
+              ...data,
+              series: [frame],
+            },
+          }),
+          placement: { height: 300, minWidth: 400 },
+          options: {
+            legend: { displayMode: 'hidden' },
+          },
+        });
+      },
+    }),
+    $timeRange: new SceneTimeRange(),
+    $data: queryRunner,
+    actions: [
+      new SceneToolbarInput({
+        value: '10',
+        onChange: (newValue) => {
+          queryRunner.setState({
+            queries: [
+              {
+                ...queryRunner.state.queries[0],
+                seriesCount: newValue,
+              },
+            ],
+          });
+          queryRunner.runQueries();
+        },
+      }),
+      new SceneTimePicker({}),
+    ],
+  });
+}

public/app/features/scenes/scenes/index.tsx

@@ -1,6 +1,6 @@
 import { DashboardScene } from '../dashboard/DashboardScene';
 
-import { getFlexLayoutTest, getScenePanelRepeaterTest } from './demo';
+import { getFlexLayoutTest, getRepeaterSceneWithFlexWrap, getScenePanelRepeaterTest } from './demo';
 import { getGridLayoutTest } from './grid';
 import { getGridWithMultipleTimeRanges } from './gridMultiTimeRange';
 import { getMultipleGridLayoutTest } from './gridMultiple';
@@ -20,6 +20,7 @@ export function getScenes(): SceneDef[] {
   return [
     { title: 'Flex layout test', getScene: getFlexLayoutTest },
     { title: 'Panel repeater test', getScene: getScenePanelRepeaterTest },
+    { title: 'Panel repeater test flex wrap', getScene: getRepeaterSceneWithFlexWrap },
     { title: 'Nested Scene demo', getScene: getNestedScene },
     { title: 'Scene with rows', getScene: getSceneWithRows },
     { title: 'Grid layout test', getScene: getGridLayoutTest },