Dashboard: New panel in a dashboard is not deleted after "Discard"-ing changes in Panel Edit (#66476)

* add isNew notPersistedProperty to PanelModel

* if panel is newly created and user "Discard"s it, the panel is removed entirely

* add Todo's for when we remove the emptyDashboardPage FF

* add isNew to new panel after file dropping on dashboard page

* handle the "Apply" case

* CSV file dropping is not relevant to a new panel bc it doesnt open edit page

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

@@ -77,6 +77,7 @@ export const AddPanelWidgetUnconnected = ({ panel, dashboard }: Props) => {
       title: 'Panel Title',
       datasource: panel.datasource,
       gridPos: { x: gridPos.x, y: gridPos.y, w: gridPos.w, h: gridPos.h },
+      isNew: true,
     };
 
     dashboard.addPanel(newPanel);

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

@@ -1,6 +1,7 @@
 import { pick } from 'lodash';
 
 import store from 'app/core/store';
+import { removePanel } from 'app/features/dashboard/utils/panel';
 import { cleanUpPanelState } from 'app/features/panel/state/actions';
 import { panelModelAndPluginReady } from 'app/features/panel/state/reducers';
 import { ThunkResult } from 'app/types';
@@ -113,9 +114,9 @@ export function exitPanelEditor(): ThunkResult<void> {
       dashboard.exitPanelEditor();
     }
 
+    const sourcePanel = getSourcePanel();
     if (hasPanelChangedInPanelEdit(panel) && !shouldDiscardChanges) {
       const modifiedSaveModel = panel.getSaveModel();
-      const sourcePanel = getSourcePanel();
       const panelTypeChanged = sourcePanel.type !== panel.type;
 
       dispatch(updateDuplicateLibraryPanels(panel, dashboard));
@@ -144,6 +145,15 @@ export function exitPanelEditor(): ThunkResult<void> {
       }, 20);
     }
 
+    // A new panel is only new until the first time we exit the panel editor
+    if (sourcePanel.isNew) {
+      if (!shouldDiscardChanges) {
+        delete sourcePanel.isNew;
+      } else {
+        dashboard && removePanel(dashboard, sourcePanel, true);
+      }
+    }
+
     dispatch(cleanUpPanelState(panel.key));
     dispatch(closeEditor());
   };

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -351,6 +351,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
     return updateStatePageNavFromProps(props, updatedState);
   }
 
+  // Todo: Remove this when we remove the emptyDashboardPage toggle
   onAddPanel = () => {
     const { dashboard } = this.props;
 

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -185,6 +185,7 @@ export class DashboardGrid extends PureComponent<Props, State> {
       return <DashboardRow key={panel.key} panel={panel} dashboard={this.props.dashboard} />;
     }
 
+    // Todo: Remove this when we remove the emptyDashboardPage toggle
     if (panel.type === 'add-panel') {
       return <AddPanelWidget key={panel.key} panel={panel} dashboard={this.props.dashboard} />;
     }

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

@@ -293,6 +293,7 @@ export class DashboardModel implements TimeModel {
   }
 
   private getPanelSaveModels() {
+    // Todo: Remove panel.type === 'add-panel' when we remove the emptyDashboardPage toggle
     return this.panels
       .filter(
         (panel) =>

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

@@ -66,6 +66,7 @@ const notPersistedProperties: { [str: string]: boolean } = {
   getDisplayTitle: true,
   dataSupport: true,
   key: true,
+  isNew: true,
 };
 
 // For angular panels we need to clean up properties when changing type
@@ -189,6 +190,7 @@ export class PanelModel implements DataConfigSource, IPanelModel {
   hasRefreshed?: boolean;
   cacheTimeout?: string | null;
   queryCachingTTL?: number | null;
+  isNew?: boolean;
 
   cachedPluginOptions: Record<string, PanelOptionsCache> = {};
   legend?: { show: boolean; sort?: string; sortDesc?: boolean };

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

@@ -12,6 +12,7 @@ export function onCreateNewPanel(dashboard: DashboardModel): number | undefined
     type: 'timeseries',
     title: 'Panel Title',
     gridPos: calculateNewPanelGridPos(dashboard),
+    isNew: true,
   };
 
   dashboard.addPanel(newPanel);