Scenes: Wrapping flex layout demo scene (#62540)

* Scenes: Adding a demo dashboard with wrapping flex layout

* Updates

* Update version

package.json

@@ -268,7 +268,7 @@
     "@grafana/lezer-logql": "0.1.1",
     "@grafana/monaco-logql": "^0.0.6",
     "@grafana/runtime": "workspace:*",
-    "@grafana/scenes": "latest",
+    "@grafana/scenes": "^0.0.11",
     "@grafana/schema": "workspace:*",
     "@grafana/ui": "workspace:*",
     "@kusto/monaco-kusto": "5.3.6",

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 },

yarn.lock

@@ -5158,9 +5158,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@grafana/scenes@npm:latest":
-  version: 0.0.8
-  resolution: "@grafana/scenes@npm:0.0.8"
+"@grafana/scenes@npm:^0.0.11":
+  version: 0.0.11
+  resolution: "@grafana/scenes@npm:0.0.11"
   dependencies:
     "@grafana/e2e-selectors": canary
     "@grafana/experimental": 1.0.1
@@ -5168,7 +5168,7 @@ __metadata:
     react-use: 17.4.0
     react-virtualized-auto-sizer: 1.0.7
     uuid: ^9.0.0
-  checksum: 4c76ca9850906b98fc9131b48ea6a664f84a0f8ac5f7d87543d73f8ca8214c33483fc4454447e46d67096826f7cb32f3db70461323e65aefc241c4169c88fd98
+  checksum: 8cb56817f784c045ff8e91793e79722ed5ec22927a4528539de6f243eaf511f0f924ee1c883f88707eb0ef69cea39de29752da88f98156f25e1860e794ffcd9b
   languageName: node
   linkType: hard
 
@@ -22032,7 +22032,7 @@ __metadata:
     "@grafana/lezer-logql": 0.1.1
     "@grafana/monaco-logql": ^0.0.6
     "@grafana/runtime": "workspace:*"
-    "@grafana/scenes": latest
+    "@grafana/scenes": ^0.0.11
     "@grafana/schema": "workspace:*"
     "@grafana/toolkit": "workspace:*"
     "@grafana/tsconfig": ^1.2.0-rc1