Schema v2: Add basic editor for testing (#96852)

* Schema v2: Add basic editor for testing

* Disable eslint in dev files

* Remove settings tab

public/app/features/dashboard-scene/scene/DashboardScene.tsx

@@ -57,6 +57,7 @@ import {
   getPanelIdForVizPanel,
   isPanelClone,
 } from '../utils/utils';
+import { SchemaV2EditorDrawer } from '../v2schema/SchemaV2EditorDrawer';
 
 import { AddLibraryPanelDrawer } from './AddLibraryPanelDrawer';
 import { DashboardControls } from './DashboardControls';
@@ -393,6 +394,14 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
     });
   }
 
+  public openV2SchemaEditor() {
+    this.setState({
+      overlay: new SchemaV2EditorDrawer({
+        dashboardRef: this.getRef(),
+      }),
+    });
+  }
+
   public getPageNav(location: H.Location, navIndex: NavIndex) {
     const { meta, viewPanelScene, editPanel } = this.state;
 

public/app/features/dashboard-scene/scene/NavToolbarActions.tsx

@@ -577,6 +577,24 @@ export function ToolbarActions({ dashboard }: Props) {
     },
   });
 
+  // Will open a schema v2 editor drawer. Only available with dashboardSchemaV2 feature toggle on.
+  toolbarActions.push({
+    group: 'main-buttons',
+    condition: uid && config.featureToggles.dashboardSchemaV2,
+    render: () => {
+      return (
+        <ToolbarButton
+          tooltip={'Edit dashboard v2 schema'}
+          icon={<Icon name="brackets-curly" size="lg" type="default" />}
+          key="schema-v2-button"
+          onClick={() => {
+            dashboard.openV2SchemaEditor();
+          }}
+        />
+      );
+    },
+  });
+
   const actionElements: React.ReactNode[] = [];
   let lastGroup = '';
 

public/app/features/dashboard-scene/v2schema/SchemaV2EditorDrawer.tsx

@@ -0,0 +1,97 @@
+/* eslint-disable */
+import { css } from '@emotion/css';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { SceneComponentProps, SceneObjectBase, SceneObjectState, SceneObjectRef } from '@grafana/scenes';
+import { Box, Button, CodeEditor, Drawer, useStyles2 } from '@grafana/ui';
+
+import { DashboardScene } from '../scene/DashboardScene';
+import { transformSceneToSaveModelSchemaV2 } from '../serialization/transformSceneToSaveModelSchemaV2';
+
+interface SchemaV2EditorDrawerState extends SceneObjectState {
+  dashboardRef: SceneObjectRef<DashboardScene>;
+  jsonText: string;
+}
+
+export class SchemaV2EditorDrawer extends SceneObjectBase<SchemaV2EditorDrawerState> {
+  constructor(state: Omit<SchemaV2EditorDrawerState, 'jsonText'>) {
+    super({
+      ...state,
+      jsonText: '',
+    });
+
+    this.addActivationHandler(() => this.setState({ jsonText: this.getJsonText() }));
+  }
+
+  private getJsonText(): string {
+    const dashboard = this.state.dashboardRef.resolve();
+    return JSON.stringify(transformSceneToSaveModelSchemaV2(dashboard), null, 2);
+  }
+
+  public onClose = () => {
+    this.state.dashboardRef.resolve().setState({ overlay: undefined });
+  };
+
+  private onSave = () => {
+    // TODO: uncomment when transformation is available
+    // const manager = getDashboardScenePageStateManager();
+    // const dashboard = transformSceneToSaveModelSchemaV2({
+    //   dashboard: JSON.parse(this.state.jsonText),
+    //   meta: this.state.dashboardRef.resolve().state.meta,
+    // });
+    // manager.setState({
+    //   dashboard,
+    // });
+  };
+
+  static Component = ({ model }: SceneComponentProps<SchemaV2EditorDrawer>) => {
+    const { jsonText } = model.useState();
+    const styles = useStyles2(getStyles);
+
+    const renderBody = () => {
+      return (
+        <div className={styles.wrapper}>
+          <CodeEditor
+            width="100%"
+            value={jsonText}
+            language="json"
+            showLineNumbers={true}
+            showMiniMap={true}
+            containerStyles={styles.codeEditor}
+            onBlur={(value) => model.setState({ jsonText: value })}
+          />
+          <Box paddingTop={2}>
+            {
+              <Button onClick={model.onSave} disabled>
+                Update dashboard
+              </Button>
+            }
+          </Box>
+        </div>
+      );
+    };
+
+    return (
+      <Drawer
+        title={'[DEV] Schema V2 editor'}
+        subtitle={'Allows editing dashboard using v2 schema. Changes are not persited in db.'}
+        onClose={model.onClose}
+      >
+        {renderBody()}
+      </Drawer>
+    );
+  };
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  wrapper: css({
+    display: 'flex',
+    height: '100%',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+  }),
+  codeEditor: css({
+    flexGrow: 1,
+  }),
+});
+/* eslint-enable */