Scenes: Updates to variables demo (#63511)

* Scenes: Updates to variables demo to include a collapsable scene to test scenario of part of scene containing a query runnner being inactive while a variable changes value

* Table: Fixes logic for when adhoc filters are shown

* Scene: Variables minor style fix

* rever unrelated change

* Update version

* Update

package.json

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

public/app/features/scenes/dashboard/DashboardScene.tsx

@@ -54,7 +54,12 @@ function DashboardSceneRenderer({ model }: SceneComponentProps<DashboardScene>)
   const toolbarActions = (actions ?? []).map((action) => <action.Component key={action.state.key} model={action} />);
 
   toolbarActions.push(
-    <ToolbarButton icon="apps" onClick={() => locationService.push(`/d/${uid}`)} tooltip="View as Dashboard" />
+    <ToolbarButton
+      icon="apps"
+      onClick={() => locationService.push(`/d/${uid}`)}
+      tooltip="View as Dashboard"
+      key="scene-to-dashboard-switch"
+    />
   );
   const pageToolbar = config.featureToggles.topnav ? (
     <AppChromeUpdate actions={toolbarActions} />

public/app/features/scenes/scenes/variablesDemo.tsx

@@ -9,6 +9,7 @@ import {
   CustomVariable,
   DataSourceVariable,
   TestVariable,
+  NestedScene,
 } from '@grafana/scenes';
 
 import { DashboardScene } from '../dashboard/DashboardScene';
@@ -60,19 +61,40 @@ export function getVariablesDemo(): DashboardScene {
       direction: 'row',
       children: [
         new SceneFlexLayout({
+          direction: 'column',
           children: [
-            new VizPanel({
-              pluginId: 'timeseries',
-              title: 'handler: $handler',
-              $data: getQueryRunnerWithRandomWalkQuery({
-                alias: 'handler: $handler',
-              }),
+            new SceneFlexLayout({
+              children: [
+                new VizPanel({
+                  pluginId: 'timeseries',
+                  title: 'handler: $handler',
+                  $data: getQueryRunnerWithRandomWalkQuery({
+                    alias: 'handler: $handler',
+                  }),
+                }),
+                new SceneCanvasText({
+                  placement: { width: '40%' },
+                  text: 'server: ${server} pod:${pod}',
+                  fontSize: 20,
+                  align: 'center',
+                }),
+              ],
             }),
-            new SceneCanvasText({
-              placement: { width: '40%' },
-              text: 'server: ${server} pod:${pod}',
-              fontSize: 20,
-              align: 'center',
+            new NestedScene({
+              title: 'Collapsable inner scene',
+              canCollapse: true,
+              body: new SceneFlexLayout({
+                direction: 'row',
+                children: [
+                  new VizPanel({
+                    pluginId: 'timeseries',
+                    title: 'handler: $handler',
+                    $data: getQueryRunnerWithRandomWalkQuery({
+                      alias: 'handler: $handler',
+                    }),
+                  }),
+                ],
+              }),
             }),
           ],
         }),

yarn.lock

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