NewPanelEditor: Introduce redux state and reducer (#22070)

* New panel editor redux

* minor change

* Updated

* progress

* updated

* Fixed panel data mutable issue

* more actions

* Discard works

* Updated

* Updated

public/app/features/dashboard/state/DashboardModel.ts

@@ -45,6 +45,7 @@ export class DashboardModel {
   links: any;
   gnetId: any;
   panels: PanelModel[];
+  panelInEdit?: PanelModel;
 
   // ------------------
   // not persisted
@@ -62,6 +63,7 @@ export class DashboardModel {
     templating: true, // needs special handling
     originalTime: true,
     originalTemplating: true,
+    panelInEdit: true,
   };
 
   constructor(data: any, meta?: DashboardMeta) {
@@ -221,6 +223,11 @@ export class DashboardModel {
   startRefresh() {
     this.events.emit(PanelEvents.refresh);
 
+    if (this.panelInEdit) {
+      this.panelInEdit.refresh();
+      return;
+    }
+
     for (const panel of this.panels) {
       if (!this.otherPanelInFullscreen(panel)) {
         panel.refresh();
@@ -239,15 +246,28 @@ export class DashboardModel {
   panelInitialized(panel: PanelModel) {
     panel.initialized();
 
-    // In new panel edit there is no need to trigger refresh as editor retrieves last results from the query runner
-    // as an initial value
-    if (!this.otherPanelInFullscreen(panel) && !panel.isNewEdit) {
+    // refresh new panels unless we are in fullscreen / edit mode
+    if (!this.otherPanelInFullscreen(panel)) {
+      panel.refresh();
+    }
+
+    // refresh if panel is in edit mode and there is no last result
+    if (this.panelInEdit === panel && !this.panelInEdit.getQueryRunner().getLastResult()) {
       panel.refresh();
     }
   }
 
   otherPanelInFullscreen(panel: PanelModel) {
-    return this.meta.fullscreen && !panel.fullscreen;
+    return (this.meta.fullscreen && !panel.fullscreen) || this.panelInEdit;
+  }
+
+  initPanelEditor(sourcePanel: PanelModel): PanelModel {
+    this.panelInEdit = sourcePanel.getEditClone();
+    return this.panelInEdit;
+  }
+
+  exitPanelEditor() {
+    this.panelInEdit = undefined;
   }
 
   private ensureListExist(data: any) {

public/app/features/dashboard/state/PanelModel.ts

@@ -38,7 +38,6 @@ const notPersistedProperties: { [str: string]: boolean } = {
   fullscreen: true,
   isEditing: true,
   isInView: true,
-  isNewEdit: true,
   hasRefreshed: true,
   cachedPluginOptions: true,
   plugin: true,
@@ -132,7 +131,6 @@ export class PanelModel {
   fullscreen: boolean;
   isEditing: boolean;
   isInView: boolean;
-  isNewEdit: boolean;
   hasRefreshed: boolean;
   events: Emitter;
   cacheTimeout?: any;
@@ -357,15 +355,14 @@ export class PanelModel {
 
   getEditClone() {
     const clone = new PanelModel(this.getSaveModel());
-    clone.queryRunner = new PanelQueryRunner();
+    const sourceQueryRunner = this.getQueryRunner();
 
-    // This will send the last result to the new runner
-    this.getQueryRunner()
+    // pipe last result to new clone query runner
+    sourceQueryRunner
       .getData()
       .pipe(take(1))
-      .subscribe(val => clone.queryRunner.pipeDataToSubject(val));
+      .subscribe(val => clone.getQueryRunner().pipeDataToSubject(val));
 
-    clone.isNewEdit = true;
     return clone;
   }
 

public/app/features/dashboard/state/reducers.ts

@@ -8,6 +8,7 @@ import {
 } from 'app/types';
 import { processAclItems } from 'app/core/utils/acl';
 import { panelEditorReducer } from '../panel_editor/state/reducers';
+import { panelEditorReducerNew } from '../components/PanelEditor/state/reducers';
 import { DashboardModel } from './DashboardModel';
 import { PanelModel } from './PanelModel';
 
@@ -106,4 +107,5 @@ export const dashboardReducer = dashbardSlice.reducer;
 export default {
   dashboard: dashboardReducer,
   panelEditor: panelEditorReducer,
+  panelEditorNew: panelEditorReducerNew,
 };