Library Panels: Change unsaved change detection logic (#31477)

* Library Panels: Change unsaved change detection logic
Change logic from diffing panel models to setting dirty flag

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -194,8 +194,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
   };
 
   onPanelConfigChanged = (configKey: keyof PanelModel, value: any) => {
-    // @ts-ignore
+    this.props.panel.setProperty(configKey, value);
-    this.props.panel[configKey] = value;
     this.props.panel.render();
     this.forceUpdate();
   };

public/app/features/dashboard/components/PanelEditor/PanelEditorQueries.tsx

@@ -52,13 +52,7 @@ export class PanelEditorQueries extends PureComponent<Props, State> {
     const newDataSourceName = options.dataSource.default ? null : options.dataSource.name!;
     const dataSourceChanged = newDataSourceName !== panel.datasource;
 
-    panel.datasource = newDataSourceName;
+    panel.updateQueries(options);
-    panel.targets = options.queries;
-    panel.timeFrom = options.timeRange?.from;
-    panel.timeShift = options.timeRange?.shift;
-    panel.hideTimeOverride = options.timeRange?.hide;
-    panel.interval = options.minInterval;
-    panel.maxDataPoints = options.maxDataPoints;
 
     if (dataSourceChanged) {
       // trigger queries when changing data source

public/app/features/dashboard/components/PanelEditor/state/actions.ts

@@ -13,8 +13,6 @@ import { updateLocation } from 'app/core/actions';
 import { cleanUpEditPanel, panelModelAndPluginReady } from '../../../state/reducers';
 import store from 'app/core/store';
 import pick from 'lodash/pick';
-import omit from 'lodash/omit';
-import isEqual from 'lodash/isEqual';
 
 export function initPanelEditor(sourcePanel: PanelModel, dashboard: DashboardModel): ThunkResult<void> {
   return (dispatch) => {
@@ -43,9 +41,9 @@ export function updateSourcePanel(sourcePanel: PanelModel): ThunkResult<void> {
 }
 
 export function exitPanelEditor(): ThunkResult<void> {
-  return (dispatch, getStore) => {
+  return async (dispatch, getStore) => {
     const dashboard = getStore().dashboard.getModel();
-    const { getPanel, getSourcePanel, shouldDiscardChanges } = getStore().panelEditor;
+    const { getPanel, shouldDiscardChanges } = getStore().panelEditor;
     const onConfirm = () =>
       dispatch(
         updateLocation({
@@ -54,11 +52,14 @@ export function exitPanelEditor(): ThunkResult<void> {
         })
       );
 
-    const modifiedPanel = getPanel();
+    const panel = getPanel();
-    const modifiedSaveModel = modifiedPanel.getSaveModel();
+
-    const initialSaveModel = getSourcePanel().getSaveModel();
+    if (shouldDiscardChanges || !panel.libraryPanel) {
-    const panelChanged = !isEqual(omit(initialSaveModel, 'id'), omit(modifiedSaveModel, 'id'));
+      onConfirm();
-    if (shouldDiscardChanges || !modifiedPanel.libraryPanel || !panelChanged) {
+      return;
+    }
+
+    if (!panel.hasChanged) {
       onConfirm();
       return;
     }
@@ -66,7 +67,7 @@ export function exitPanelEditor(): ThunkResult<void> {
     appEvents.emit(CoreEvents.showModalReact, {
       component: SaveLibraryPanelModal,
       props: {
-        panel: modifiedPanel,
+        panel,
         folderId: dashboard!.meta.folderId,
         isOpen: true,
         onConfirm,

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

@@ -36,6 +36,7 @@ import {
   isStandardFieldProp,
   restoreCustomOverrideRules,
 } from './getPanelOptionsWithDefaults';
+import { QueryGroupOptions } from 'app/types';
 import { PanelModelLibraryPanel } from '../../library-panels/types';
 
 export interface GridPos {
@@ -57,6 +58,7 @@ const notPersistedProperties: { [str: string]: boolean } = {
   queryRunner: true,
   replaceVariables: true,
   editSourceId: true,
+  hasChanged: true,
 };
 
 // For angular panels we need to clean up properties when changing type
@@ -157,6 +159,7 @@ export class PanelModel implements DataConfigSource {
   isViewing: boolean;
   isEditing: boolean;
   isInView: boolean;
+  hasChanged: boolean;
 
   hasRefreshed: boolean;
   events: EventBus;
@@ -228,12 +231,14 @@ export class PanelModel implements DataConfigSource {
 
   updateOptions(options: object) {
     this.options = options;
+    this.hasChanged = true;
     this.events.publish(new PanelOptionsChangedEvent());
     this.render();
   }
 
   updateFieldConfig(config: FieldConfigSource) {
     this.fieldConfig = config;
+    this.hasChanged = true;
     this.events.publish(new PanelOptionsChangedEvent());
 
     this.resendLastResult();
@@ -392,6 +397,7 @@ export class PanelModel implements DataConfigSource {
     // switch
     this.type = pluginId;
     this.plugin = newPlugin;
+    this.hasChanged = true;
 
     // For some reason I need to rebind replace variables here, otherwise the viz repeater does not work
     this.replaceVariables = this.replaceVariables.bind(this);
@@ -402,20 +408,30 @@ export class PanelModel implements DataConfigSource {
     }
   }
 
-  updateQueries(queries: DataQuery[]) {
+  updateQueries(options: QueryGroupOptions) {
+    this.datasource = options.dataSource.default ? null : options.dataSource.name!;
+    this.timeFrom = options.timeRange?.from;
+    this.timeShift = options.timeRange?.shift;
+    this.hideTimeOverride = options.timeRange?.hide;
+    this.interval = options.minInterval;
+    this.maxDataPoints = options.maxDataPoints;
+    this.targets = options.queries;
+    this.hasChanged = true;
+
     this.events.publish(new PanelQueriesChangedEvent());
-    this.targets = queries;
   }
 
   addQuery(query?: Partial<DataQuery>) {
     query = query || { refId: 'A' };
     query.refId = getNextRefIdChar(this.targets);
     this.targets.push(query as DataQuery);
+    this.hasChanged = true;
   }
 
   changeQuery(query: DataQuery, index: number) {
     // ensure refId is maintained
     query.refId = this.targets[index].refId;
+    this.hasChanged = true;
 
     // update query in array
     this.targets = this.targets.map((item, itemIndex) => {
@@ -486,9 +502,15 @@ export class PanelModel implements DataConfigSource {
   setTransformations(transformations: DataTransformerConfig[]) {
     this.transformations = transformations;
     this.resendLastResult();
+    this.hasChanged = true;
     this.events.publish(new PanelTransformationsChangedEvent());
   }
 
+  setProperty(key: keyof this, value: any) {
+    this[key] = value;
+    this.hasChanged = true;
+  }
+
   replaceVariables(value: string, extraVars: ScopedVars | undefined, format?: string | Function) {
     let vars = this.scopedVars;
 

public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx

@@ -28,8 +28,10 @@ export const PanelLibraryOptionsGroup: React.FC<Props> = ({ panel, dashboard })
       libraryPanel: toPanelModelLibraryPanel(panelInfo),
     });
 
-    // dummy change for re-render
+    // Though the panel model has changed, since we're switching to an existing
-    // onPanelConfigChange('isEditing', true);
+    // library panel, we reset the "hasChanged" state.
+    panel.hasChanged = false;
+
     panel.refresh();
     panel.events.publish(PanelQueriesChangedEvent);
   };

public/app/features/library-panels/state/api.ts

@@ -6,6 +6,11 @@ export async function getLibraryPanels(): Promise<LibraryPanelDTO[]> {
   return result;
 }
 
+export async function getLibraryPanel(uid: string): Promise<LibraryPanelDTO> {
+  const { result } = await getBackendSrv().get(`/api/library-panels/${uid}`);
+  return result;
+}
+
 export async function addLibraryPanel(
   panelSaveModel: PanelModelWithLibraryPanel,
   folderId: number

public/app/features/library-panels/utils.ts

@@ -40,6 +40,7 @@ function toPanelSaveModel(panel: PanelModel): any {
 function updatePanelModelWithUpdate(panel: PanelModel, updated: LibraryPanelDTO): void {
   panel.restoreModel({
     ...updated.model,
+    hasChanged: false, // reset dirty flag, since changes have been saved
     libraryPanel: toPanelModelLibraryPanel(updated),
   });
   panel.refresh();