DashboardSave: Correctly overwrite dashboard when saving (#22650)

public/app/features/dashboard/components/SaveDashboard/SaveDashboardAsModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { css } from 'emotion';
 import { Modal } from '@grafana/ui';
 import { SaveDashboardAsForm } from './forms/SaveDashboardAsForm';
@@ -10,10 +10,17 @@ export const SaveDashboardAsModal: React.FC<SaveDashboardModalProps & {
   isNew?: boolean;
 }> = ({ dashboard, onDismiss, isNew }) => {
   const { state, onDashboardSave } = useDashboardSave(dashboard);
-
+  const [dashboardSaveModelClone, setDashboardSaveModelClone] = useState();
   return (
     <>
-      {state.error && <SaveDashboardErrorProxy error={state.error} dashboard={dashboard} onDismiss={onDismiss} />}
+      {state.error && (
+        <SaveDashboardErrorProxy
+          error={state.error}
+          dashboard={dashboard}
+          dashboardSaveModel={dashboardSaveModelClone}
+          onDismiss={onDismiss}
+        />
+      )}
       {!state.error && (
         <Modal
           isOpen={true}
@@ -28,7 +35,10 @@ export const SaveDashboardAsModal: React.FC<SaveDashboardModalProps & {
             dashboard={dashboard}
             onCancel={onDismiss}
             onSuccess={onDismiss}
-            onSubmit={onDashboardSave}
+            onSubmit={(clone, options, dashboard) => {
+              setDashboardSaveModelClone(clone);
+              return onDashboardSave(clone, options, dashboard);
+            }}
             isNew={isNew}
           />
         </Modal>

public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx

@@ -8,12 +8,20 @@ import { SaveDashboardModalProps } from './types';
 import { SaveDashboardAsButton } from './SaveDashboardButton';
 
 interface SaveDashboardErrorProxyProps {
+  /** original dashboard */
   dashboard: DashboardModel;
+  /** dashboard save model with applied modifications, i.e. title */
+  dashboardSaveModel: any;
   error: any;
   onDismiss: () => void;
 }
 
-export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = ({ dashboard, error, onDismiss }) => {
+export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = ({
+  dashboard,
+  dashboardSaveModel,
+  error,
+  onDismiss,
+}) => {
   const { onDashboardSave } = useDashboardSave(dashboard);
 
   useEffect(() => {
@@ -35,7 +43,7 @@ export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = (
           }
           confirmText="Save & Overwrite"
           onConfirm={async () => {
-            await onDashboardSave(dashboard.getSaveModelClone(), { overwrite: true }, dashboard);
+            await onDashboardSave(dashboardSaveModel, { overwrite: true }, dashboard);
             onDismiss();
           }}
           onDismiss={onDismiss}
@@ -53,7 +61,7 @@ export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = (
           }
           confirmText="Save & Overwrite"
           onConfirm={async () => {
-            await onDashboardSave(dashboard.getSaveModelClone(), { overwrite: true }, dashboard);
+            await onDashboardSave(dashboardSaveModel, { overwrite: true }, dashboard);
             onDismiss();
           }}
           onDismiss={onDismiss}

public/app/features/dashboard/components/SaveDashboard/SaveDashboardModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Modal } from '@grafana/ui';
 import { css } from 'emotion';
 import { SaveDashboardForm } from './forms/SaveDashboardForm';
@@ -8,9 +8,17 @@ import { SaveDashboardModalProps } from './types';
 
 export const SaveDashboardModal: React.FC<SaveDashboardModalProps> = ({ dashboard, onDismiss, onSaveSuccess }) => {
   const { state, onDashboardSave } = useDashboardSave(dashboard);
+  const [dashboardSaveModelClone, setDashboardSaveModelClone] = useState();
   return (
     <>
-      {state.error && <SaveDashboardErrorProxy error={state.error} dashboard={dashboard} onDismiss={onDismiss} />}
+      {state.error && (
+        <SaveDashboardErrorProxy
+          error={state.error}
+          dashboard={dashboard}
+          dashboardSaveModel={dashboardSaveModelClone}
+          onDismiss={onDismiss}
+        />
+      )}
       {!state.error && (
         <Modal
           isOpen={true}
@@ -30,7 +38,10 @@ export const SaveDashboardModal: React.FC<SaveDashboardModalProps> = ({ dashboar
                 onSaveSuccess();
               }
             }}
-            onSubmit={onDashboardSave}
+            onSubmit={(clone, options, dashboard) => {
+              setDashboardSaveModelClone(clone);
+              return onDashboardSave(clone, options, dashboard);
+            }}
           />
         </Modal>
       )}

public/app/features/dashboard/components/SaveDashboard/useDashboardSave.tsx

@@ -39,6 +39,8 @@ export const useDashboardSave = (dashboard: DashboardModel) => {
         dispatch(
           updateLocation({
             path: newUrl,
+            replace: true,
+            query: {},
           })
         );
       }