Scenes: Cleanups and simplify (#61579)

* Remove use of Scene / Embedded scene

* Use DashboardScene

* Update scenes package

* Updated scenes

* Updated DashboardScene

* Updates

* Updates

public/app/features/scenes/SceneEmbeddedPage.tsx

@@ -10,15 +10,16 @@ import { getSceneByTitle } from './scenes';
 export interface Props extends GrafanaRouteComponentProps<{ name: string }> {}
 
 export const SceneEmbeddedPage = (props: Props) => {
-  const scene = getSceneByTitle(props.match.params.name, false);
+  const scene = getSceneByTitle(props.match.params.name);
 
   if (!scene) {
     return <h2>Scene not found</h2>;
   }
 
   const pageNav: NavModelItem = {
-    text: scene.state.title,
+    text: 'Embedded Scene',
   };
+
   return (
     <Page navId="scenes" pageNav={pageNav}>
       <Page.Contents>

public/app/features/scenes/SceneListPage.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useAsync } from 'react-use';
 
 import { Stack } from '@grafana/experimental';
-import { Card, LinkButton } from '@grafana/ui';
+import { Card } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 
 // Types
@@ -26,16 +26,8 @@ export const SceneListPage = ({}: Props) => {
           <h5>Test scenes</h5>
           <Stack direction="column" gap={0}>
             {scenes.map((scene) => (
-              <Card key={scene.title}>
+              <Card key={scene.title} href={`/scenes/${scene.title}`}>
                 <Card.Heading>{scene.title}</Card.Heading>
-                <Card.Actions>
-                  <LinkButton size="sm" href={`/scenes/${scene.title}`}>
-                    Open as standalone scene
-                  </LinkButton>
-                  <LinkButton size="sm" variant="secondary" href={`/scenes/embedded/${scene.title}`}>
-                    Open as embedded scene
-                  </LinkButton>
-                </Card.Actions>
               </Card>
             ))}
           </Stack>

public/app/features/scenes/ScenePage.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 
@@ -8,12 +8,24 @@ import { getSceneByTitle } from './scenes';
 export interface Props extends GrafanaRouteComponentProps<{ name: string }> {}
 
 export const ScenePage = (props: Props) => {
-  const scene = getSceneByTitle(props.match.params.name, true);
+  const scene = getSceneByTitle(props.match.params.name);
+  const [isInitialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    if (scene && !isInitialized) {
+      scene.initUrlSync();
+      setInitialized(true);
+    }
+  }, [isInitialized, scene]);
 
   if (!scene) {
     return <h2>Scene not found</h2>;
   }
 
+  if (!isInitialized) {
+    return null;
+  }
+
   return <scene.Component model={scene} />;
 };
 

public/app/features/scenes/components/Scene.test.tsx

@@ -1,16 +0,0 @@
-import { SceneFlexLayout } from '@grafana/scenes';
-
-import { Scene } from './Scene';
-
-describe('Scene', () => {
-  it('Simple scene', () => {
-    const scene = new Scene({
-      title: 'Hello',
-      body: new SceneFlexLayout({
-        children: [],
-      }),
-    });
-
-    expect(scene.state.title).toBe('Hello');
-  });
-});

public/app/features/scenes/components/Scene.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-
-import { PageLayoutType } from '@grafana/data';
-import { config } from '@grafana/runtime';
-import { SceneObjectBase, SceneComponentProps, SceneState, UrlSyncManager } from '@grafana/scenes';
-import { PageToolbar, ToolbarButton } from '@grafana/ui';
-import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
-import { Page } from 'app/core/components/Page/Page';
-
-export class Scene extends SceneObjectBase<SceneState> {
-  public static Component = SceneRenderer;
-  private urlSyncManager?: UrlSyncManager;
-
-  public activate() {
-    super.activate();
-    this.urlSyncManager = new UrlSyncManager(this);
-    this.urlSyncManager.initSync();
-  }
-
-  public deactivate() {
-    super.deactivate();
-    this.urlSyncManager!.cleanUp();
-  }
-}
-
-function SceneRenderer({ model }: SceneComponentProps<Scene>) {
-  const { title, body, actions = [], isEditing, $editor, subMenu } = model.useState();
-
-  const toolbarActions = (actions ?? []).map((action) => <action.Component key={action.state.key} model={action} />);
-
-  if ($editor) {
-    toolbarActions.push(
-      <ToolbarButton
-        key="scene-settings"
-        icon="cog"
-        variant={isEditing ? 'primary' : 'default'}
-        onClick={() => model.setState({ isEditing: !model.state.isEditing })}
-      />
-    );
-  }
-
-  const pageToolbar = config.featureToggles.topnav ? (
-    <AppChromeUpdate actions={toolbarActions} />
-  ) : (
-    <PageToolbar title={title}>{toolbarActions}</PageToolbar>
-  );
-
-  return (
-    <Page navId="scenes" pageNav={{ text: title }} layout={PageLayoutType.Canvas} toolbar={pageToolbar}>
-      <div style={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: '8px' }}>
-        {subMenu && <subMenu.Component model={subMenu} />}
-        <div style={{ flexGrow: 1, display: 'flex', gap: '8px', overflow: 'auto' }}>
-          <body.Component model={body} isEditing={isEditing} />
-          {$editor && <$editor.Component model={$editor} isEditing={isEditing} />}
-        </div>
-      </div>
-    </Page>
-  );
-}

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

@@ -1,25 +1,25 @@
+import { css } from '@emotion/css';
 import React from 'react';
 
-import { PageLayoutType } from '@grafana/data';
+import { GrafanaTheme2, PageLayoutType } from '@grafana/data';
 import { config, locationService } from '@grafana/runtime';
 import {
   UrlSyncManager,
   SceneObjectBase,
   SceneComponentProps,
-  SceneLayout,
   SceneObject,
   SceneObjectStatePlain,
 } from '@grafana/scenes';
-import { PageToolbar, ToolbarButton } from '@grafana/ui';
+import { PageToolbar, ToolbarButton, useStyles2 } from '@grafana/ui';
 import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
 import { Page } from 'app/core/components/Page/Page';
 
 interface DashboardSceneState extends SceneObjectStatePlain {
   title: string;
-  uid: string;
-  body: SceneLayout;
+  uid?: string;
+  body: SceneObject;
   actions?: SceneObject[];
-  subMenu?: SceneObject;
+  controls?: SceneObject[];
 }
 
 export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
@@ -48,7 +48,8 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
 }
 
 function DashboardSceneRenderer({ model }: SceneComponentProps<DashboardScene>) {
-  const { title, body, actions = [], uid, subMenu } = model.useState();
+  const { title, body, actions = [], uid, controls } = model.useState();
+  const styles = useStyles2(getStyles);
 
   const toolbarActions = (actions ?? []).map((action) => <action.Component key={action.state.key} model={action} />);
 
@@ -63,10 +64,31 @@ function DashboardSceneRenderer({ model }: SceneComponentProps<DashboardScene>)
 
   return (
     <Page navId="scenes" pageNav={{ text: title }} layout={PageLayoutType.Canvas} toolbar={pageToolbar}>
-      {subMenu && <subMenu.Component model={subMenu} />}
-      <div style={{ flexGrow: 1, display: 'flex', gap: '8px', overflow: 'auto' }}>
+      {controls && (
+        <div className={styles.controls}>
+          {controls.map((control) => (
+            <control.Component key={control.state.key} model={control} />
+          ))}
+        </div>
+      )}
+      <div className={styles.body}>
         <body.Component model={body} />
       </div>
     </Page>
   );
 }
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    body: css({
+      flexGrow: 1,
+      display: 'flex',
+      gap: '8px',
+    }),
+    controls: css({
+      display: 'flex',
+      gap: theme.spacing(1),
+      alignItems: 'center',
+    }),
+  };
+}

public/app/features/scenes/dashboard/DashboardsLoader.test.ts

@@ -135,7 +135,7 @@ describe('DashboardLoader', () => {
       expect(scene.state.uid).toBe('test-uid');
       expect(scene.state?.$timeRange?.state.value.raw).toEqual(dash.time);
       expect(scene.state?.$variables?.state.variables).toHaveLength(1);
-      expect(scene.state.subMenu).toBeDefined();
+      expect(scene.state.controls).toBeDefined();
     });
   });
 
@@ -162,9 +162,10 @@ describe('DashboardLoader', () => {
       const oldModel = new DashboardModel(dashboard);
 
       const scene = createDashboardSceneFromDashboardModel(oldModel);
+      const body = scene.state.body as SceneGridLayout;
 
-      expect(scene.state.body.state.children).toHaveLength(1);
-      const rowScene = scene.state.body.state.children[0] as SceneGridRow;
+      expect(body.state.children).toHaveLength(1);
+      const rowScene = body.state.children[0] as SceneGridRow;
       expect(rowScene).toBeInstanceOf(SceneGridRow);
       expect(rowScene.state.title).toEqual(row.title);
       expect(rowScene.state.placement?.y).toEqual(row.gridPos!.y);
@@ -226,16 +227,17 @@ describe('DashboardLoader', () => {
       const oldModel = new DashboardModel(dashboard);
 
       const scene = createDashboardSceneFromDashboardModel(oldModel);
+      const body = scene.state.body as SceneGridLayout;
 
-      expect(scene.state.body.state.children).toHaveLength(3);
-      expect(scene.state.body).toBeInstanceOf(SceneGridLayout);
+      expect(body.state.children).toHaveLength(3);
+      expect(body).toBeInstanceOf(SceneGridLayout);
       // Panel out of row
-      expect(scene.state.body.state.children[0]).toBeInstanceOf(VizPanel);
-      const panelOutOfRowVizPanel = scene.state.body.state.children[0] as VizPanel;
+      expect(body.state.children[0]).toBeInstanceOf(VizPanel);
+      const panelOutOfRowVizPanel = body.state.children[0] as VizPanel;
       expect(panelOutOfRowVizPanel.state.title).toBe(panelOutOfRow.title);
       // Row with panel
-      expect(scene.state.body.state.children[1]).toBeInstanceOf(SceneGridRow);
-      const rowWithPanelsScene = scene.state.body.state.children[1] as SceneGridRow;
+      expect(body.state.children[1]).toBeInstanceOf(SceneGridRow);
+      const rowWithPanelsScene = body.state.children[1] as SceneGridRow;
       expect(rowWithPanelsScene.state.title).toBe(rowWithPanel.title);
       expect(rowWithPanelsScene.state.children).toHaveLength(1);
       // Panel within row
@@ -243,8 +245,8 @@ describe('DashboardLoader', () => {
       const panelInRowVizPanel = rowWithPanelsScene.state.children[0] as VizPanel;
       expect(panelInRowVizPanel.state.title).toBe(panelInRow.title);
       // Empty row
-      expect(scene.state.body.state.children[2]).toBeInstanceOf(SceneGridRow);
-      const emptyRowScene = scene.state.body.state.children[2] as SceneGridRow;
+      expect(body.state.children[2]).toBeInstanceOf(SceneGridRow);
+      const emptyRowScene = body.state.children[2] as SceneGridRow;
       expect(emptyRowScene.state.title).toBe(emptyRow.title);
       expect(emptyRowScene.state.children).toHaveLength(0);
     });

public/app/features/scenes/dashboard/DashboardsLoader.ts

@@ -13,7 +13,6 @@ import {
   SceneTimeRange,
   SceneObject,
   SceneQueryRunner,
-  SceneSubMenu,
   SceneVariableSet,
   VariableValueSelectors,
   SceneVariable,
@@ -150,7 +149,6 @@ export function createSceneObjectsForPanels(oldPanels: PanelModel[]): SceneObjec
 }
 
 export function createDashboardSceneFromDashboardModel(oldModel: DashboardModel) {
-  let subMenu: SceneSubMenu | undefined = undefined;
   let variables: SceneVariableSet | undefined = undefined;
 
   if (oldModel.templating.list.length) {
@@ -166,9 +164,7 @@ export function createDashboardSceneFromDashboardModel(oldModel: DashboardModel)
       // TODO: Remove filter
       // Added temporarily to allow skipping non-compatible variables
       .filter((v): v is SceneVariable => Boolean(v));
-    subMenu = new SceneSubMenu({
-      children: [new VariableValueSelectors({})],
-    });
+
     variables = new SceneVariableSet({
       variables: variableObjects,
     });
@@ -183,7 +179,9 @@ export function createDashboardSceneFromDashboardModel(oldModel: DashboardModel)
     $timeRange: new SceneTimeRange(oldModel.time),
     actions: [new SceneTimePicker({})],
     $variables: variables,
-    subMenu,
+    ...(variables && {
+      controls: [new VariableValueSelectors({})],
+    }),
   });
 }
 

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

@@ -6,18 +6,17 @@ import {
   VizPanel,
   SceneCanvasText,
   SceneToolbarInput,
-  EmbeddedScene,
   SceneDataNode,
 } from '@grafana/scenes';
 
 import { panelBuilders } from '../builders/panelBuilders';
-import { Scene } from '../components/Scene';
+import { DashboardScene } from '../dashboard/DashboardScene';
 import { SceneEditManager } from '../editor/SceneEditManager';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
-export function getFlexLayoutTest(standalone: boolean): Scene | EmbeddedScene {
-  const state = {
+export function getFlexLayoutTest(): DashboardScene {
+  return new DashboardScene({
     title: 'Flex layout test',
     body: new SceneFlexLayout({
       direction: 'row',
@@ -63,19 +62,17 @@ export function getFlexLayoutTest(standalone: boolean): Scene | EmbeddedScene {
     $timeRange: new SceneTimeRange(),
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],
-  };
-
-  return standalone ? new Scene(state) : new EmbeddedScene(state);
+  });
 }
 
-export function getScenePanelRepeaterTest(standalone: boolean): Scene | EmbeddedScene {
+export function getScenePanelRepeaterTest(): DashboardScene {
   const queryRunner = getQueryRunnerWithRandomWalkQuery({
     seriesCount: 2,
     alias: '__server_names',
     scenarioId: 'random_walk',
   });
 
-  const state = {
+  return new DashboardScene({
     title: 'Panel repeater test',
     body: new SceneByFrameRepeater({
       body: new SceneFlexLayout({
@@ -133,7 +130,5 @@ export function getScenePanelRepeaterTest(standalone: boolean): Scene | Embedded
       }),
       new SceneTimePicker({}),
     ],
-  };
-
-  return standalone ? new Scene(state) : new EmbeddedScene(state);
+  });
 }

public/app/features/scenes/scenes/grid.tsx

@@ -1,19 +1,12 @@
-import {
-  VizPanel,
-  SceneTimePicker,
-  SceneFlexLayout,
-  SceneGridLayout,
-  SceneTimeRange,
-  EmbeddedScene,
-} from '@grafana/scenes';
+import { VizPanel, SceneTimePicker, SceneFlexLayout, SceneGridLayout, SceneTimeRange } from '@grafana/scenes';
 
-import { Scene } from '../components/Scene';
+import { DashboardScene } from '../dashboard/DashboardScene';
 import { SceneEditManager } from '../editor/SceneEditManager';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
-export function getGridLayoutTest(standalone: boolean): Scene | EmbeddedScene {
-  const state = {
+export function getGridLayoutTest(): DashboardScene {
+  return new DashboardScene({
     title: 'Grid layout test',
     body: new SceneGridLayout({
       children: [
@@ -58,7 +51,5 @@ export function getGridLayoutTest(standalone: boolean): Scene | EmbeddedScene {
     $timeRange: new SceneTimeRange(),
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],
-  };
-
-  return standalone ? new Scene(state) : new EmbeddedScene(state);
+  });
 }

public/app/features/scenes/scenes/gridMultiTimeRange.tsx

@@ -1,25 +1,18 @@
-import {
-  VizPanel,
-  SceneGridRow,
-  SceneTimePicker,
-  SceneGridLayout,
-  SceneTimeRange,
-  EmbeddedScene,
-} from '@grafana/scenes';
+import { VizPanel, SceneGridRow, SceneTimePicker, SceneGridLayout, SceneTimeRange } from '@grafana/scenes';
 
-import { Scene } from '../components/Scene';
+import { DashboardScene } from '../dashboard/DashboardScene';
 import { SceneEditManager } from '../editor/SceneEditManager';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
-export function getGridWithMultipleTimeRanges(standalone: boolean): Scene | EmbeddedScene {
+export function getGridWithMultipleTimeRanges(): DashboardScene {
   const globalTimeRange = new SceneTimeRange();
   const row1TimeRange = new SceneTimeRange({
     from: 'now-1y',
     to: 'now',
   });
 
-  const state = {
+  return new DashboardScene({
     title: 'Grid with rows and different queries and time ranges',
     body: new SceneGridLayout({
       children: [
@@ -66,7 +59,5 @@ export function getGridWithMultipleTimeRanges(standalone: boolean): Scene | Embe
     $timeRange: globalTimeRange,
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],
-  };
-
-  return standalone ? new Scene(state) : new EmbeddedScene(state);
+  });
 }

public/app/features/scenes/scenes/gridMultiple.tsx

@@ -1,19 +1,12 @@
-import {
-  VizPanel,
-  SceneTimePicker,
-  SceneFlexLayout,
-  SceneGridLayout,
-  SceneTimeRange,
-  EmbeddedScene,
-} from '@grafana/scenes';
+import { VizPanel, SceneTimePicker, SceneFlexLayout, SceneGridLayout, SceneTimeRange } from '@grafana/scenes';
 
-import { Scene } from '../components/Scene';
+import { DashboardScene } from '../dashboard/DashboardScene';
 import { SceneEditManager } from '../editor/SceneEditManager';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
-export function getMultipleGridLayoutTest(standalone: boolean): Scene | EmbeddedScene {
-  const state = {
+export function getMultipleGridLayoutTest(): DashboardScene {
+  return new DashboardScene({
     title: 'Multiple grid layouts test',
     body: new SceneFlexLayout({
       children: [
@@ -98,7 +91,5 @@ export function getMultipleGridLayoutTest(standalone: boolean): Scene | Embedded
     $timeRange: new SceneTimeRange(),
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],
-  };
-
-  return standalone ? new Scene(state) : new EmbeddedScene(state);
+  });
 }

public/app/features/scenes/scenes/gridWithMultipleData.tsx

@@ -1,19 +1,12 @@
-import {
-  VizPanel,
-  SceneGridRow,
-  SceneTimePicker,
-  SceneGridLayout,
-  SceneTimeRange,
-  EmbeddedScene,
-} from '@grafana/scenes';
+import { VizPanel, SceneGridRow, SceneTimePicker, SceneGridLayout, SceneTimeRange } from '@grafana/scenes';
 
-import { Scene } from '../components/Scene';
+import { DashboardScene } from '../dashboard/DashboardScene';
 import { SceneEditManager } from '../editor/SceneEditManager';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
-export function getGridWithMultipleData(standalone: boolean): Scene | EmbeddedScene {
-  const state = {
+export function getGridWithMultipleData(): DashboardScene {
+  return new DashboardScene({
     title: 'Grid with rows and different queries',
     body: new SceneGridLayout({
       children: [
@@ -93,7 +86,5 @@ export function getGridWithMultipleData(standalone: boolean): Scene | EmbeddedSc
     $timeRange: new SceneTimeRange(),
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],
-  };
-
-  return standalone ? new Scene(state) : new EmbeddedScene(state);
+  });
 }

public/app/features/scenes/scenes/gridWithRow.tsx

@@ -1,19 +1,12 @@
-import {
-  VizPanel,
-  SceneGridLayout,
-  SceneGridRow,
-  SceneTimePicker,
-  SceneTimeRange,
-  EmbeddedScene,
-} from '@grafana/scenes';
+import { VizPanel, SceneGridLayout, SceneGridRow, SceneTimePicker, SceneTimeRange } from '@grafana/scenes';
 
-import { Scene } from '../components/Scene';
+import { DashboardScene } from '../dashboard/DashboardScene';
 import { SceneEditManager } from '../editor/SceneEditManager';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
-export function getGridWithRowLayoutTest(standalone: boolean): Scene | EmbeddedScene {
-  const state = {
+export function getGridWithRowLayoutTest(): DashboardScene {
+  return new DashboardScene({
     title: 'Grid with row layout test',
     body: new SceneGridLayout({
       children: [
@@ -76,7 +69,5 @@ export function getGridWithRowLayoutTest(standalone: boolean): Scene | EmbeddedS
     $timeRange: new SceneTimeRange(),
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],
-  };
-
-  return standalone ? new Scene(state) : new EmbeddedScene(state);
+  });
 }

public/app/features/scenes/scenes/gridWithRows.tsx

@@ -7,12 +7,11 @@ import {
   SceneTimeRange,
 } from '@grafana/scenes';
 
-import { Scene } from '../components/Scene';
-import { SceneEditManager } from '../editor/SceneEditManager';
+import { DashboardScene } from '../dashboard/DashboardScene';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
-export function getGridWithRowsTest(): Scene {
+export function getGridWithRowsTest(): DashboardScene {
   const panel = new VizPanel({
     pluginId: 'timeseries',
     title: 'Fill height',
@@ -77,12 +76,12 @@ export function getGridWithRowsTest(): Scene {
       }),
     ],
   });
-  const scene = new Scene({
+
+  const scene = new DashboardScene({
     title: 'Grid rows test',
     body: new SceneGridLayout({
       children: [cell1, cell2, row1, row2],
     }),
-    $editor: new SceneEditManager({}),
     $timeRange: new SceneTimeRange(),
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],

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

@@ -1,6 +1,4 @@
-import { EmbeddedScene, SceneObjectBase, SceneState } from '@grafana/scenes';
-
-import { Scene } from '../components/Scene';
+import { DashboardScene } from '../dashboard/DashboardScene';
 
 import { getFlexLayoutTest, getScenePanelRepeaterTest } from './demo';
 import { getGridLayoutTest } from './grid';
@@ -16,7 +14,7 @@ import { getVariablesDemo, getVariablesDemoWithAll } from './variablesDemo';
 
 interface SceneDef {
   title: string;
-  getScene: (standalone: boolean) => Scene | EmbeddedScene;
+  getScene: () => DashboardScene;
 }
 export function getScenes(): SceneDef[] {
   return [
@@ -36,20 +34,18 @@ export function getScenes(): SceneDef[] {
   ];
 }
 
-const cache: Record<string, { standalone: boolean; scene: SceneObjectBase<SceneState> }> = {};
+const cache: Record<string, DashboardScene> = {};
 
-export function getSceneByTitle(title: string, standalone = true) {
+export function getSceneByTitle(title: string) {
   if (cache[title]) {
-    if (cache[title].standalone === standalone) {
-      return cache[title].scene;
-    }
+    return cache[title];
   }
 
   const scene = getScenes().find((x) => x.title === title);
 
   if (scene) {
-    cache[title] = { scene: scene.getScene(standalone), standalone };
+    cache[title] = scene.getScene();
   }
 
-  return cache[title].scene;
+  return cache[title];
 }

public/app/features/scenes/scenes/nested.tsx

@@ -1,18 +1,11 @@
-import {
-  VizPanel,
-  NestedScene,
-  SceneTimePicker,
-  SceneFlexLayout,
-  SceneTimeRange,
-  EmbeddedScene,
-} from '@grafana/scenes';
+import { VizPanel, NestedScene, SceneTimePicker, SceneFlexLayout, SceneTimeRange } from '@grafana/scenes';
 
-import { Scene } from '../components/Scene';
+import { DashboardScene } from '../dashboard/DashboardScene';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
-export function getNestedScene(standalone: boolean): Scene | EmbeddedScene {
-  const state = {
+export function getNestedScene(): DashboardScene {
+  return new DashboardScene({
     title: 'Nested Scene demo',
     body: new SceneFlexLayout({
       direction: 'column',
@@ -28,9 +21,7 @@ export function getNestedScene(standalone: boolean): Scene | EmbeddedScene {
     $timeRange: new SceneTimeRange(),
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],
-  };
-
-  return standalone ? new Scene(state) : new EmbeddedScene(state);
+  });
 }
 
 export function getInnerScene(title: string) {

public/app/features/scenes/scenes/queryVariableDemo.tsx

@@ -1,7 +1,6 @@
 import { VariableRefresh } from '@grafana/data';
 import {
   SceneCanvasText,
-  SceneSubMenu,
   SceneTimePicker,
   SceneFlexLayout,
   SceneTimeRange,
@@ -10,13 +9,12 @@ import {
   CustomVariable,
   DataSourceVariable,
   QueryVariable,
-  EmbeddedScene,
 } from '@grafana/scenes';
 
-import { Scene } from '../components/Scene';
+import { DashboardScene } from '../dashboard/DashboardScene';
 
-export function getQueryVariableDemo(standalone: boolean): Scene | EmbeddedScene {
-  const state = {
+export function getQueryVariableDemo(): DashboardScene {
+  return new DashboardScene({
     title: 'Query variable',
     $variables: new SceneVariableSet({
       variables: [
@@ -65,10 +63,6 @@ export function getQueryVariableDemo(standalone: boolean): Scene | EmbeddedScene
     }),
     $timeRange: new SceneTimeRange(),
     actions: [new SceneTimePicker({})],
-    subMenu: new SceneSubMenu({
-      children: [new VariableValueSelectors({})],
-    }),
-  };
-
-  return standalone ? new Scene(state) : new EmbeddedScene(state);
+    controls: [new VariableValueSelectors({})],
+  });
 }

public/app/features/scenes/scenes/sceneWithRows.tsx

@@ -1,19 +1,12 @@
-import {
-  VizPanel,
-  NestedScene,
-  SceneTimePicker,
-  SceneFlexLayout,
-  SceneTimeRange,
-  EmbeddedScene,
-} from '@grafana/scenes';
+import { VizPanel, NestedScene, SceneTimePicker, SceneFlexLayout, SceneTimeRange } from '@grafana/scenes';
 
-import { Scene } from '../components/Scene';
+import { DashboardScene } from '../dashboard/DashboardScene';
 import { SceneEditManager } from '../editor/SceneEditManager';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
-export function getSceneWithRows(standalone: boolean): Scene | EmbeddedScene {
-  const state = {
+export function getSceneWithRows(): DashboardScene {
+  return new DashboardScene({
     title: 'Scene with rows',
     body: new SceneFlexLayout({
       direction: 'column',
@@ -60,7 +53,5 @@ export function getSceneWithRows(standalone: boolean): Scene | EmbeddedScene {
     $timeRange: new SceneTimeRange(),
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],
-  };
-
-  return standalone ? new Scene(state) : new EmbeddedScene(state);
+  });
 }

public/app/features/scenes/scenes/transformations.tsx

@@ -1,19 +1,11 @@
-import {
-  SceneTimePicker,
-  SceneFlexLayout,
-  VizPanel,
-  SceneDataTransformer,
-  SceneTimeRange,
-  EmbeddedScene,
-} from '@grafana/scenes';
+import { SceneTimePicker, SceneFlexLayout, VizPanel, SceneDataTransformer, SceneTimeRange } from '@grafana/scenes';
 
-import { Scene } from '../components/Scene';
-import { SceneEditManager } from '../editor/SceneEditManager';
+import { DashboardScene } from '../dashboard/DashboardScene';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
-export function getTransformationsDemo(standalone: boolean): Scene | EmbeddedScene {
-  const state = {
+export function getTransformationsDemo(): DashboardScene {
+  return new DashboardScene({
     title: 'Transformations demo',
     body: new SceneFlexLayout({
       direction: 'row',
@@ -63,11 +55,8 @@ export function getTransformationsDemo(standalone: boolean): Scene | EmbeddedSce
         }),
       ],
     }),
-    $editor: new SceneEditManager({}),
     $timeRange: new SceneTimeRange(),
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],
-  };
-
-  return standalone ? new Scene(state) : new EmbeddedScene(state);
+  });
 }

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

@@ -1,7 +1,6 @@
 import {
   VizPanel,
   SceneCanvasText,
-  SceneSubMenu,
   SceneTimePicker,
   SceneFlexLayout,
   SceneTimeRange,
@@ -10,15 +9,14 @@ import {
   CustomVariable,
   DataSourceVariable,
   TestVariable,
-  EmbeddedScene,
 } from '@grafana/scenes';
 
-import { Scene } from '../components/Scene';
+import { DashboardScene } from '../dashboard/DashboardScene';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
-export function getVariablesDemo(standalone: boolean): Scene | EmbeddedScene {
-  const state = {
+export function getVariablesDemo(): DashboardScene {
+  return new DashboardScene({
     title: 'Variables',
     $variables: new SceneVariableSet({
       variables: [
@@ -82,16 +80,12 @@ export function getVariablesDemo(standalone: boolean): Scene | EmbeddedScene {
     }),
     $timeRange: new SceneTimeRange(),
     actions: [new SceneTimePicker({})],
-    subMenu: new SceneSubMenu({
-      children: [new VariableValueSelectors({})],
-    }),
-  };
-
-  return standalone ? new Scene(state) : new EmbeddedScene(state);
+    controls: [new VariableValueSelectors({})],
+  });
 }
 
-export function getVariablesDemoWithAll(): Scene {
-  const scene = new Scene({
+export function getVariablesDemoWithAll(): DashboardScene {
+  return new DashboardScene({
     title: 'Variables with All values',
     $variables: new SceneVariableSet({
       variables: [
@@ -153,10 +147,6 @@ export function getVariablesDemoWithAll(): Scene {
     }),
     $timeRange: new SceneTimeRange(),
     actions: [new SceneTimePicker({})],
-    subMenu: new SceneSubMenu({
-      children: [new VariableValueSelectors({})],
-    }),
+    controls: [new VariableValueSelectors({})],
   });
-
-  return scene;
 }

yarn.lock

@@ -5121,8 +5121,8 @@ __metadata:
   linkType: soft
 
 "@grafana/scenes@npm:latest":
-  version: 0.0.5
-  resolution: "@grafana/scenes@npm:0.0.5"
+  version: 0.0.8
+  resolution: "@grafana/scenes@npm:0.0.8"
   dependencies:
     "@grafana/e2e-selectors": canary
     "@grafana/experimental": 1.0.1
@@ -5130,7 +5130,7 @@ __metadata:
     react-use: 17.4.0
     react-virtualized-auto-sizer: 1.0.7
     uuid: ^9.0.0
-  checksum: 7388aaccb0788801f94734126d1abab71df3f81131eec41c967b0c462223a13fcfbc5a65ce7a45bf6761032d8efd1330cb85ac8e86136cba9e4dd244f41b1054
+  checksum: 4c76ca9850906b98fc9131b48ea6a664f84a0f8ac5f7d87543d73f8ca8214c33483fc4454447e46d67096826f7cb32f3db70461323e65aefc241c4169c88fd98
   languageName: node
   linkType: hard