Library Panels: Add "Discard" button to panel save modal (#31647)

* Library Panels: Add "Discard" button to panel save modal

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

@@ -171,6 +171,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
           // the user exits the panel editor they aren't prompted to save again
           this.props.updateSourcePanel(this.props.panel);
         },
+        onDiscard: this.onDiscard,
       },
     });
   };

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

@@ -8,6 +8,7 @@ import {
   PanelEditorUIState,
   setPanelEditorUIState,
   updateEditorInitState,
+  setDiscardChanges,
 } from './reducers';
 import { updateLocation } from 'app/core/actions';
 import { cleanUpEditPanel, panelModelAndPluginReady } from '../../../state/reducers';
@@ -52,6 +53,11 @@ export function exitPanelEditor(): ThunkResult<void> {
         })
       );
 
+    const onDiscard = () => {
+      dispatch(setDiscardChanges(true));
+      onConfirm();
+    };
+
     const panel = getPanel();
 
     if (shouldDiscardChanges || !panel.libraryPanel) {
@@ -71,6 +77,7 @@ export function exitPanelEditor(): ThunkResult<void> {
         folderId: dashboard!.meta.folderId,
         isOpen: true,
         onConfirm,
+        onDiscard,
       },
     });
   };

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Button, HorizontalGroup, Icon, Input, Modal, stylesFactory, useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import { css } from 'emotion';
@@ -14,9 +14,17 @@ interface Props {
   isOpen: boolean;
   onConfirm: () => void;
   onDismiss: () => void;
+  onDiscard: () => void;
 }
 
-export const SaveLibraryPanelModal: React.FC<Props> = ({ panel, folderId, isOpen, onDismiss, onConfirm }: Props) => {
+export const SaveLibraryPanelModal: React.FC<Props> = ({
+  panel,
+  folderId,
+  isOpen,
+  onDismiss,
+  onConfirm,
+  onDiscard,
+}) => {
   const [searchString, setSearchString] = useState('');
   const connectedDashboardsState = useAsync(async () => {
     const connectedDashboards = await getLibraryPanelConnectedDashboards(panel.libraryPanel.uid);
@@ -50,6 +58,10 @@ export const SaveLibraryPanelModal: React.FC<Props> = ({ panel, folderId, isOpen
 
   const { saveLibraryPanel } = usePanelSave();
   const styles = useStyles(getModalStyles);
+  const discardAndClose = useCallback(() => {
+    onDiscard();
+    onDismiss();
+  }, []);
 
   return (
     <Modal title="Update all panel instances" icon="save" onDismiss={onDismiss} isOpen={isOpen}>
@@ -101,6 +113,9 @@ export const SaveLibraryPanelModal: React.FC<Props> = ({ panel, folderId, isOpen
           <Button variant="secondary" onClick={onDismiss}>
             Cancel
           </Button>
+          <Button variant="destructive" onClick={discardAndClose}>
+            Discard
+          </Button>
         </HorizontalGroup>
       </div>
     </Modal>