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

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

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>