Dashboards-Scenes: ability to edit and save JSON model (#80757)

* View JSON Model tab

* Use correct translation field

* saving functionality

* Remove TODO

* Update button tittle

public/app/features/dashboard-scene/settings/JsonModelEditView.tsx

@@ -2,21 +2,33 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2, PageLayoutType } from '@grafana/data';
-import { SceneComponentProps, SceneObjectBase } from '@grafana/scenes';
+import { SceneComponentProps, SceneObjectBase, sceneUtils } from '@grafana/scenes';
 import { Button, CodeEditor, useStyles2 } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { Trans } from 'app/core/internationalization';
 import { getPrettyJSON } from 'app/features/inspector/utils/utils';
+import { DashboardDTO } from 'app/types';
 
 import { DashboardScene } from '../scene/DashboardScene';
+import { transformSaveModelToScene } from '../serialization/transformSaveModelToScene';
 import { transformSceneToSaveModel } from '../serialization/transformSceneToSaveModel';
 import { getDashboardSceneFor } from '../utils/utils';
 
 import { DashboardEditView, DashboardEditViewState, useDashboardEditPageNav } from './utils';
 
-export interface JsonModelEditViewState extends DashboardEditViewState {}
+export interface JsonModelEditViewState extends DashboardEditViewState {
+  jsonText: string;
+}
 
 export class JsonModelEditView extends SceneObjectBase<JsonModelEditViewState> implements DashboardEditView {
+  constructor(state: Omit<JsonModelEditViewState, 'jsonText'>) {
+    super({
+      ...state,
+      jsonText: '',
+    });
+
+    this.addActivationHandler(() => this.setState({ jsonText: this.getJsonText() }));
+  }
   public getUrlKey(): string {
     return 'json-model';
   }
@@ -31,11 +43,27 @@ export class JsonModelEditView extends SceneObjectBase<JsonModelEditViewState> i
     return getPrettyJSON(jsonData);
   }
 
+  public onCodeEditorBlur = (value: string) => {
+    this.setState({ jsonText: value });
+  };
+
+  public onApplyChange = () => {
+    const jsonModel = JSON.parse(this.state.jsonText);
+    const dashboard = this.getDashboard();
+    const rsp: DashboardDTO = {
+      dashboard: jsonModel,
+      meta: dashboard.state.meta,
+    };
+    const newDashboardScene = transformSaveModelToScene(rsp);
+    const newState = sceneUtils.cloneSceneObjectState(newDashboardScene.state);
+    dashboard.setState(newState);
+  };
+
   static Component = ({ model }: SceneComponentProps<JsonModelEditView>) => {
-    const jsonText = model.getJsonText();
     const dashboard = model.getDashboard();
     const { navModel, pageNav } = useDashboardEditPageNav(dashboard, model.getUrlKey());
     const canSave = dashboard.useState().meta.canSave;
+    const { jsonText } = model.useState();
 
     const styles = useStyles2(getStyles);
 
@@ -53,12 +81,12 @@ export class JsonModelEditView extends SceneObjectBase<JsonModelEditViewState> i
             showLineNumbers={true}
             showMiniMap={true}
             containerStyles={styles.codeEditor}
+            onBlur={model.onCodeEditorBlur}
           />
           {canSave && (
             <div>
-              {/**TODO: add saving functionality */}
-              <Button type="submit">
-                <Trans i18nKey="dashboard-settings.json-editor.save-button">Save changes</Trans>
+              <Button type="submit" onClick={model.onApplyChange}>
+                <Trans i18nKey="dashboard-settings.json-editor.apply-button">Apply changes</Trans>
               </Button>
             </div>
           )}

public/locales/de-DE/grafana.json

@@ -361,6 +361,7 @@
       "title-label": "Titel"
     },
     "json-editor": {
+      "apply-button": "",
       "save-button": "Änderungen speichern",
       "subtitle": "Das JSON-Modell unten ist die Datenstruktur, die das Dashboard definiert. Dazu gehören Dashboard-Einstellungen, Fenster-Einstellungen, Layout, Abfragen und so weiter.",
       "title": "JSON-Modell"

public/locales/en-US/grafana.json

@@ -361,6 +361,7 @@
       "title-label": "Title"
     },
     "json-editor": {
+      "apply-button": "Apply changes",
       "save-button": "Save changes",
       "subtitle": "The JSON model below is the data structure that defines the dashboard. This includes dashboard settings, panel settings, layout, queries, and so on.",
       "title": "JSON Model"

public/locales/es-ES/grafana.json

@@ -366,6 +366,7 @@
       "title-label": "Título"
     },
     "json-editor": {
+      "apply-button": "",
       "save-button": "Guardar cambios",
       "subtitle": "El siguiente modelo JSON es la estructura de datos que define el tablero. Incluye ajustes del tablero, ajustes del panel, diseño, consultas, etc.",
       "title": "Modelo JSON"

public/locales/fr-FR/grafana.json

@@ -366,6 +366,7 @@
       "title-label": "Titre"
     },
     "json-editor": {
+      "apply-button": "",
       "save-button": "Enregistrer les modifications",
       "subtitle": "Le modèle JSON ci-dessous est la structure de données qui définit le tableau de bord. Il inclut les paramètres du tableau de bord, les paramètres du panneau, la mise en page, les requêtes, etc.",
       "title": "Modèle JSON"

public/locales/pseudo-LOCALE/grafana.json

@@ -361,6 +361,7 @@
       "title-label": "Ŧįŧľę"
     },
     "json-editor": {
+      "apply-button": "Åppľy čĥäʼnģęş",
       "save-button": "Ŝävę čĥäʼnģęş",
       "subtitle": "Ŧĥę ĴŜØŃ mőđęľ þęľőŵ įş ŧĥę đäŧä şŧřūčŧūřę ŧĥäŧ đęƒįʼnęş ŧĥę đäşĥþőäřđ. Ŧĥįş įʼnčľūđęş đäşĥþőäřđ şęŧŧįʼnģş, päʼnęľ şęŧŧįʼnģş, ľäyőūŧ, qūęřįęş, äʼnđ şő őʼn.",
       "title": "ĴŜØŃ Mőđęľ"

public/locales/zh-Hans/grafana.json

@@ -356,6 +356,7 @@
       "title-label": "标题"
     },
     "json-editor": {
+      "apply-button": "",
       "save-button": "保存更改",
       "subtitle": "下面的 JSON 模型是定义仪表板的数据结构。这包括仪表板设置、面板设置、布局和查询等等。",
       "title": "JSON 模型"