Scenes: Update to latest scenes package and remove editing stuff (#65222)

* Update to latest scenes and remove editing stuff

* fixing test

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

@@ -537,7 +537,7 @@ describe('DashboardLoader', () => {
         label: undefined,
         name: 'query1',
         options: [],
-        query: 'prometheus',
+        pluginId: 'prometheus',
         regex: '/^gdev/',
         skipUrlSync: false,
         text: ['gdev-prometheus', 'gdev-slow-prometheus'],

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

@@ -235,7 +235,7 @@ export function createSceneVariableFromVariableModel(variable: VariableModel): S
       text: variable.current.text,
       description: variable.description,
       regex: variable.regex,
-      query: variable.query,
+      pluginId: variable.query,
       allValue: variable.allValue || undefined,
       includeAll: variable.includeAll,
       defaultToAll: Boolean(variable.includeAll),

public/app/features/scenes/editor/SceneComponentEditWrapper.tsx

@@ -1,61 +0,0 @@
-import { css } from '@emotion/css';
-import React, { CSSProperties } from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
-import { SceneEditor, SceneObject } from '@grafana/scenes';
-import { useStyles2 } from '@grafana/ui';
-
-export function SceneComponentEditWrapper({
-  model,
-  editor,
-  children,
-}: {
-  model: SceneObject;
-  editor: SceneEditor;
-  children: React.ReactNode;
-}) {
-  const styles = useStyles2(getStyles);
-  const { hoverObject, selectedObject } = editor.useState();
-
-  const onMouseEnter = () => editor.onMouseEnterObject(model);
-  const onMouseLeave = () => editor.onMouseLeaveObject(model);
-
-  const onClick = (evt: React.MouseEvent) => {
-    evt.stopPropagation();
-    editor.onSelectObject(model);
-  };
-
-  const style: CSSProperties = {};
-  let className = styles.wrapper;
-
-  if (hoverObject?.ref === model) {
-    className += ' ' + styles.hover;
-  }
-  if (selectedObject?.ref === model) {
-    className += ' ' + styles.selected;
-  }
-
-  return (
-    <div style={style} className={className} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick}>
-      {children}
-    </div>
-  );
-}
-
-const getStyles = (theme: GrafanaTheme2) => {
-  return {
-    wrapper: css({
-      display: 'flex',
-      flexGrow: 1,
-      padding: 8,
-      border: `1px dashed ${theme.colors.primary.main}`,
-      cursor: 'pointer',
-    }),
-    hover: css({
-      border: `1px solid ${theme.colors.primary.border}`,
-    }),
-    selected: css({
-      border: `1px solid ${theme.colors.error.border}`,
-    }),
-  };
-};

public/app/features/scenes/editor/SceneEditManager.tsx

@@ -1,80 +0,0 @@
-import { css } from '@emotion/css';
-import React from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
-import {
-  SceneObjectBase,
-  SceneEditorState,
-  SceneEditor,
-  SceneObject,
-  SceneComponentProps,
-  SceneComponent,
-} from '@grafana/scenes';
-import { useStyles2 } from '@grafana/ui';
-
-import { SceneComponentEditWrapper } from './SceneComponentEditWrapper';
-import { SceneObjectEditor } from './SceneObjectEditor';
-import { SceneObjectTree } from './SceneObjectTree';
-
-export class SceneEditManager extends SceneObjectBase<SceneEditorState> implements SceneEditor {
-  public static Component = SceneEditorRenderer;
-
-  public get Component(): SceneComponent<this> {
-    return SceneEditorRenderer;
-  }
-
-  public onMouseEnterObject(model: SceneObject) {
-    this.setState({ hoverObject: { ref: model } });
-  }
-
-  public onMouseLeaveObject(model: SceneObject) {
-    if (model.parent) {
-      this.setState({ hoverObject: { ref: model.parent } });
-    } else {
-      this.setState({ hoverObject: undefined });
-    }
-  }
-
-  public onSelectObject(model: SceneObject) {
-    this.setState({ selectedObject: { ref: model } });
-  }
-
-  public getEditComponentWrapper() {
-    return SceneComponentEditWrapper;
-  }
-}
-
-function SceneEditorRenderer({ model, isEditing }: SceneComponentProps<SceneEditManager>) {
-  const { selectedObject } = model.useState();
-  const styles = useStyles2(getStyles);
-
-  if (!isEditing) {
-    return null;
-  }
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.tree}>
-        <SceneObjectTree node={model.parent!} selectedObject={selectedObject?.ref} />
-      </div>
-      {selectedObject && <SceneObjectEditor model={selectedObject.ref} />}
-    </div>
-  );
-}
-
-const getStyles = (theme: GrafanaTheme2) => {
-  return {
-    container: css({
-      display: 'flex',
-      flexGrow: 0,
-      border: `1px solid ${theme.colors.border.weak}`,
-      background: theme.colors.background.primary,
-      width: theme.spacing(40),
-      cursor: 'pointer',
-      flexDirection: 'column',
-    }),
-    tree: css({
-      padding: theme.spacing(0.25, 1),
-    }),
-  };
-};

public/app/features/scenes/editor/SceneObjectEditor.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-import { SceneObject } from '@grafana/scenes';
-import { OptionsPaneCategory } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategory';
-
-export interface Props {
-  model: SceneObject;
-}
-
-export function SceneObjectEditor({ model }: Props) {
-  return (
-    <OptionsPaneCategory id="props" title="Properties" forceOpen={1}>
-      <model.Editor model={model} key={model.state.key} />
-    </OptionsPaneCategory>
-  );
-}

public/app/features/scenes/editor/SceneObjectTree.tsx

@@ -1,79 +0,0 @@
-import { css, cx } from '@emotion/css';
-import React from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
-import { sceneGraph, SceneObject, isSceneObject, SceneLayoutChild } from '@grafana/scenes';
-import { Icon, useStyles2 } from '@grafana/ui';
-
-export interface Props {
-  node: SceneObject;
-  selectedObject?: SceneObject;
-}
-
-export function SceneObjectTree({ node, selectedObject }: Props) {
-  const styles = useStyles2(getStyles);
-  const state = node.useState();
-  let children: SceneLayoutChild[] = [];
-
-  for (const propKey of Object.keys(state)) {
-    const propValue = (state as any)[propKey];
-    if (isSceneObject(propValue)) {
-      children.push(propValue);
-    }
-  }
-
-  if ('children' in state) {
-    for (const child of state.children) {
-      children.push(child);
-    }
-  }
-
-  const name = node.constructor.name;
-  const isSelected = selectedObject === node;
-  const onSelectNode = () => sceneGraph.getSceneEditor(node).onSelectObject(node);
-
-  return (
-    <div className={styles.node}>
-      <div className={styles.header} onClick={onSelectNode}>
-        <div className={styles.icon}>{children.length > 0 && <Icon name="angle-down" size="sm" />}</div>
-        <div className={cx(styles.name, isSelected && styles.selected)}>{name}</div>
-      </div>
-      {children.length > 0 && (
-        <div className={styles.children}>
-          {children.map((child) => (
-            <SceneObjectTree node={child} selectedObject={selectedObject} key={child.state.key} />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-const getStyles = (theme: GrafanaTheme2) => {
-  return {
-    node: css({
-      display: 'flex',
-      flexGrow: 0,
-      cursor: 'pointer',
-      flexDirection: 'column',
-      padding: '2px 4px',
-    }),
-    header: css({
-      display: 'flex',
-      fontWeight: 500,
-    }),
-    name: css({}),
-    selected: css({
-      color: theme.colors.error.text,
-    }),
-    icon: css({
-      width: theme.spacing(3),
-      color: theme.colors.text.secondary,
-    }),
-    children: css({
-      display: 'flex',
-      flexDirection: 'column',
-      paddingLeft: 8,
-    }),
-  };
-};

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

@@ -13,7 +13,6 @@ import { TestDataQueryType } from 'app/plugins/datasource/testdata/dataquery.gen
 
 import { panelBuilders } from '../builders/panelBuilders';
 import { DashboardScene } from '../dashboard/DashboardScene';
-import { SceneEditManager } from '../editor/SceneEditManager';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
@@ -60,7 +59,6 @@ export function getFlexLayoutTest(): DashboardScene {
         }),
       ],
     }),
-    $editor: new SceneEditManager({}),
     $timeRange: new SceneTimeRange(),
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],
@@ -112,7 +110,6 @@ export function getScenePanelRepeaterTest(): DashboardScene {
         });
       },
     }),
-    $editor: new SceneEditManager({}),
     $timeRange: new SceneTimeRange(),
     $data: queryRunner,
     actions: [

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

@@ -1,7 +1,6 @@
 import { VizPanel, SceneTimePicker, SceneFlexLayout, SceneGridLayout, SceneTimeRange } from '@grafana/scenes';
 
 import { DashboardScene } from '../dashboard/DashboardScene';
-import { SceneEditManager } from '../editor/SceneEditManager';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
@@ -47,7 +46,6 @@ export function getGridLayoutTest(): DashboardScene {
         }),
       ],
     }),
-    $editor: new SceneEditManager({}),
     $timeRange: new SceneTimeRange(),
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],

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

@@ -2,7 +2,6 @@ import { VizPanel, SceneGridRow, SceneTimePicker, SceneGridLayout, SceneTimeRang
 import { TestDataQueryType } from 'app/plugins/datasource/testdata/dataquery.gen';
 
 import { DashboardScene } from '../dashboard/DashboardScene';
-import { SceneEditManager } from '../editor/SceneEditManager';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
@@ -56,7 +55,6 @@ export function getGridWithMultipleTimeRanges(): DashboardScene {
         }),
       ],
     }),
-    $editor: new SceneEditManager({}),
     $timeRange: globalTimeRange,
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],

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

@@ -1,7 +1,6 @@
 import { VizPanel, SceneTimePicker, SceneFlexLayout, SceneGridLayout, SceneTimeRange } from '@grafana/scenes';
 
 import { DashboardScene } from '../dashboard/DashboardScene';
-import { SceneEditManager } from '../editor/SceneEditManager';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
@@ -86,8 +85,6 @@ export function getMultipleGridLayoutTest(): DashboardScene {
         }),
       ],
     }),
-
-    $editor: new SceneEditManager({}),
     $timeRange: new SceneTimeRange(),
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],

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

@@ -2,7 +2,6 @@ import { VizPanel, SceneGridRow, SceneTimePicker, SceneGridLayout, SceneTimeRang
 import { TestDataQueryType } from 'app/plugins/datasource/testdata/dataquery.gen';
 
 import { DashboardScene } from '../dashboard/DashboardScene';
-import { SceneEditManager } from '../editor/SceneEditManager';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
@@ -83,7 +82,6 @@ export function getGridWithMultipleData(): DashboardScene {
         }),
       ],
     }),
-    $editor: new SceneEditManager({}),
     $timeRange: new SceneTimeRange(),
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],

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

@@ -1,7 +1,6 @@
 import { VizPanel, SceneGridLayout, SceneGridRow, SceneTimePicker, SceneTimeRange } from '@grafana/scenes';
 
 import { DashboardScene } from '../dashboard/DashboardScene';
-import { SceneEditManager } from '../editor/SceneEditManager';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
@@ -65,7 +64,6 @@ export function getGridWithRowLayoutTest(): DashboardScene {
         }),
       ],
     }),
-    $editor: new SceneEditManager({}),
     $timeRange: new SceneTimeRange(),
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],

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

@@ -24,7 +24,7 @@ export function getQueryVariableDemo(): DashboardScene {
         }),
         new DataSourceVariable({
           name: 'datasource',
-          query: 'prometheus',
+          pluginId: 'prometheus',
         }),
         new QueryVariable({
           name: 'instance (using datasource variable)',

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

@@ -1,7 +1,6 @@
 import { VizPanel, NestedScene, SceneTimePicker, SceneFlexLayout, SceneTimeRange } from '@grafana/scenes';
 
 import { DashboardScene } from '../dashboard/DashboardScene';
-import { SceneEditManager } from '../editor/SceneEditManager';
 
 import { getQueryRunnerWithRandomWalkQuery } from './queries';
 
@@ -49,7 +48,6 @@ export function getSceneWithRows(): DashboardScene {
         }),
       ],
     }),
-    $editor: new SceneEditManager({}),
     $timeRange: new SceneTimeRange(),
     $data: getQueryRunnerWithRandomWalkQuery(),
     actions: [new SceneTimePicker({})],

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

@@ -54,7 +54,7 @@ export function getVariablesDemo(): DashboardScene {
         }),
         new DataSourceVariable({
           name: 'ds',
-          query: 'testdata',
+          pluginId: 'testdata',
         }),
         new TextBoxVariable({
           name: 'textbox',