wip: panel-header: Add "Edit JSON" functionality + make sure everyone using the…

wip: panel-header: Add "Edit JSON" functionality + make sure everyone using the json editor pass in the model property instead of the scope property when triggering the json modal

public/app/core/controllers/json_editor_ctrl.ts

@@ -4,13 +4,13 @@ import coreModule from '../core_module';
 export class JsonEditorCtrl {
   /** @ngInject */
   constructor($scope) {
-    $scope.json = angular.toJson($scope.object, true);
-    $scope.canUpdate = $scope.updateHandler !== void 0 && $scope.contextSrv.isEditor;
-    $scope.canCopy = $scope.enableCopy;
+    $scope.json = angular.toJson($scope.model.object, true);
+    $scope.canUpdate = $scope.model.updateHandler !== void 0 && $scope.contextSrv.isEditor;
+    $scope.canCopy = $scope.model.enableCopy;
 
     $scope.update = () => {
       const newObject = angular.fromJson($scope.json);
-      $scope.updateHandler(newObject, $scope.object);
+      $scope.model.updateHandler(newObject, $scope.model.object);
     };
 
     $scope.getContentForClipboard = () => $scope.json;

public/app/features/dashboard/dashboard_ctrl.ts

@@ -19,7 +19,6 @@ export class DashboardCtrl {
   /** @ngInject */
   constructor(
     private $scope,
-    private $rootScope,
     private keybindingSrv,
     private timeSrv,
     private variableSrv,
@@ -112,12 +111,14 @@ export class DashboardCtrl {
   }
 
   showJsonEditor(evt, options) {
-    const editScope = this.$rootScope.$new();
-    editScope.object = options.object;
-    editScope.updateHandler = options.updateHandler;
+    const model = {
+      object: options.object,
+      updateHandler: options.updateHandler,
+    };
+
     this.$scope.appEvent('show-dash-editor', {
       src: 'public/app/partials/edit_json.html',
-      scope: editScope,
+      model: model,
     });
   }
 

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx

@@ -3,7 +3,7 @@ import { DashboardModel } from 'app/features/dashboard/dashboard_model';
 import { PanelHeaderMenuItem, PanelHeaderMenuItemTypes } from './PanelHeaderMenuItem';
 import { store } from 'app/store/configureStore';
 import { updateLocation } from 'app/core/actions';
-import { removePanel, duplicatePanel, copyPanel } from 'app/features/dashboard/utils/panel';
+import { removePanel, duplicatePanel, copyPanel, editPanelJson } from 'app/features/dashboard/utils/panel';
 import appEvents from 'app/core/app_events';
 
 export interface PanelHeaderMenuProps {
@@ -74,6 +74,12 @@ export class PanelHeaderMenu extends PureComponent<PanelHeaderMenuProps, any> {
     copyPanel(panel);
   };
 
+  onEditPanelJson = () => {
+    const { dashboard } = this.props;
+    const panel = this.getPanel();
+    editPanelJson(dashboard, panel);
+  };
+
   render() {
     return (
       <div className="panel-menu-container dropdown">
@@ -114,7 +120,11 @@ export class PanelHeaderMenu extends PureComponent<PanelHeaderMenuProps, any> {
                 shortcut="p d"
               />
               <PanelHeaderMenuItem type={PanelHeaderMenuItemTypes.Link} text="Copy" handleClick={this.onCopyPanel} />
-              <PanelHeaderMenuItem type={PanelHeaderMenuItemTypes.Link} text="Panel JSON" handleClick={() => {}} />
+              <PanelHeaderMenuItem
+                type={PanelHeaderMenuItemTypes.Link}
+                text="Panel JSON"
+                handleClick={this.onEditPanelJson}
+              />
               <PanelHeaderMenuItem type={PanelHeaderMenuItemTypes.Link} text="Export CSV" handleClick={() => {}} />
               <PanelHeaderMenuItem
                 type={PanelHeaderMenuItemTypes.Link}

public/app/features/dashboard/export/export_modal.ts

@@ -29,13 +29,14 @@ export class DashExportCtrl {
 
   saveJson() {
     const clone = this.dash;
-    const editScope = this.$rootScope.$new();
-    editScope.object = clone;
-    editScope.enableCopy = true;
+    const model = {
+      object: clone,
+      enableCopy: true,
+    };
 
     this.$rootScope.appEvent('show-modal', {
       src: 'public/app/partials/edit_json.html',
-      scope: editScope,
+      model: model,
     });
 
     this.dismiss();

public/app/features/dashboard/utils/panel.ts

@@ -33,8 +33,33 @@ export const copyPanel = (panel: PanelModel) => {
   appEvents.emit('alert-success', ['Panel copied. Open Add Panel to paste']);
 };
 
-export default {
-  removePanel,
-  duplicatePanel,
-  copyPanel,
+const replacePanel = (dashboard: DashboardModel, newPanel: PanelModel, oldPanel: PanelModel) => {
+  const index = dashboard.panels.findIndex(panel => {
+    return panel.id === oldPanel.id;
+  });
+
+  const deletedPanel = dashboard.panels.splice(index, 1);
+  dashboard.events.emit('panel-removed', deletedPanel);
+
+  newPanel = new PanelModel(newPanel);
+  newPanel.id = oldPanel.id;
+
+  dashboard.panels.splice(index, 0, newPanel);
+  dashboard.sortPanelsByGridPos();
+  dashboard.events.emit('panel-added', newPanel);
+};
+
+export const editPanelJson = (dashboard: DashboardModel, panel: PanelModel) => {
+  const model = {
+    object: panel.getSaveModel(),
+    updateHandler: (newPanel: PanelModel, oldPanel: PanelModel) => {
+      replacePanel(dashboard, newPanel, oldPanel);
+    },
+    enableCopy: true,
+  };
+
+  appEvents.emit('show-modal', {
+    src: 'public/app/partials/edit_json.html',
+    model: model,
+  });
 };

public/app/features/panel/panel_ctrl.ts

@@ -2,8 +2,11 @@ import config from 'app/core/config';
 import _ from 'lodash';
 import $ from 'jquery';
 import { profiler } from 'app/core/core';
-import { PanelModel } from 'app/features/dashboard/panel_model';
-import { duplicatePanel, copyPanel } from 'app/features/dashboard/utils/panel';
+import {
+  duplicatePanel,
+  copyPanel as copyPanelUtil,
+  editPanelJson as editPanelJsonUtil,
+} from 'app/features/dashboard/utils/panel';
 import Remarkable from 'remarkable';
 import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
 
@@ -251,36 +254,11 @@ export class PanelCtrl {
   }
 
   editPanelJson() {
-    const editScope = this.$scope.$root.$new();
-    editScope.object = this.panel.getSaveModel();
-    editScope.updateHandler = this.replacePanel.bind(this);
-    editScope.enableCopy = true;
-
-    this.publishAppEvent('show-modal', {
-      src: 'public/app/partials/edit_json.html',
-      scope: editScope,
-    });
+    editPanelJsonUtil(this.dashboard, this.panel);
   }
 
   copyPanel() {
-    copyPanel(this.panel);
-  }
-
-  replacePanel(newPanel, oldPanel) {
-    const dashboard = this.dashboard;
-    const index = _.findIndex(dashboard.panels, panel => {
-      return panel.id === oldPanel.id;
-    });
-
-    const deletedPanel = dashboard.panels.splice(index, 1);
-    this.dashboard.events.emit('panel-removed', deletedPanel);
-
-    newPanel = new PanelModel(newPanel);
-    newPanel.id = oldPanel.id;
-
-    dashboard.panels.splice(index, 0, newPanel);
-    dashboard.sortPanelsByGridPos();
-    dashboard.events.emit('panel-added', newPanel);
+    copyPanelUtil(this.panel);
   }
 
   sharePanel() {