DashboardSave: fix save dashboard when changes are detected (#23909)

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

@@ -14,15 +14,9 @@ interface SaveDashboardButtonProps {
    */
   getDashboard?: () => DashboardModel;
   onSaveSuccess?: () => void;
-  useNewForms?: boolean;
 }
 
-export const SaveDashboardButton: React.FC<SaveDashboardButtonProps> = ({
-  dashboard,
-  onSaveSuccess,
-  getDashboard,
-  useNewForms,
-}) => {
+export const SaveDashboardButton: React.FC<SaveDashboardButtonProps> = ({ dashboard, onSaveSuccess, getDashboard }) => {
   return (
     <ModalsController>
       {({ showModal, hideModal }) => {

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

@@ -9,6 +9,7 @@ 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 && (

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Button, HorizontalGroup, Modal, VerticalGroup } from '@grafana/ui';
+import { SaveDashboardButton } from './SaveDashboardButton';
+import { DashboardModel } from '../../state';
+import { css } from 'emotion';
+
+interface UnsavedChangesModalProps {
+  dashboard: DashboardModel;
+  onDiscard: () => void;
+  onDismiss: () => void;
+  onSaveSuccess?: () => void;
+}
+
+export const UnsavedChangesModal: React.FC<UnsavedChangesModalProps> = ({
+  dashboard,
+  onSaveSuccess,
+  onDiscard,
+  onDismiss,
+}) => {
+  return (
+    <Modal
+      isOpen={true}
+      title="Unsaved changes"
+      onDismiss={onDismiss}
+      icon="exclamation-triangle"
+      className={css`
+        width: 500px;
+      `}
+    >
+      <VerticalGroup align={'center'} spacing={'md'}>
+        <h4>Do you want to save your changes?</h4>
+        <HorizontalGroup justify="center">
+          <SaveDashboardButton dashboard={dashboard} onSaveSuccess={onSaveSuccess} />
+          <Button
+            variant="destructive"
+            onClick={() => {
+              onDiscard();
+              onDismiss();
+            }}
+          >
+            Discard
+          </Button>
+          <Button variant="secondary" onClick={onDismiss}>
+            Cancel
+          </Button>
+        </HorizontalGroup>
+      </VerticalGroup>
+    </Modal>
+  );
+};