NestedFolders: stay in the modal whilst actions complete (#69730)

* stay in the modal whilst actions complete

* don't return anything here to fix types

* ensure we're always resetting button state

public/app/features/alerting/unified/components/rules/CloneRuleButton.tsx

@@ -56,7 +56,11 @@ export const CloneRuleButton = React.forwardRef<HTMLAnchorElement, CloneRuleButt
             </div>
           }
           confirmText="Copy"
-          onConfirm={() => provRuleCloneUrl && locationService.push(provRuleCloneUrl)}
+          onConfirm={() => {
+            if (provRuleCloneUrl) {
+              locationService.push(provRuleCloneUrl);
+            }
+          }}
           onDismiss={() => setProvRuleCloneUrl(undefined)}
         />
       </>

public/app/features/browse-dashboards/components/BrowseActions/DeleteModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { Space } from '@grafana/experimental';
 import { ConfirmModal } from '@grafana/ui';
@@ -10,15 +10,22 @@ import { DescendantCount } from './DescendantCount';
 
 export interface Props {
   isOpen: boolean;
-  onConfirm: () => void;
+  onConfirm: () => Promise<void>;
   onDismiss: () => void;
   selectedItems: DashboardTreeSelection;
 }
 
 export const DeleteModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Props) => {
-  const onDelete = () => {
-    onConfirm();
-    onDismiss();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const onDelete = async () => {
+    setIsDeleting(true);
+    try {
+      await onConfirm();
+      setIsDeleting(false);
+      onDismiss();
+    } catch {
+      setIsDeleting(false);
+    }
   };
 
   return (
@@ -31,7 +38,7 @@ export const DeleteModal = ({ onConfirm, onDismiss, selectedItems, ...props }: P
         </>
       }
       confirmationText="Delete"
-      confirmText="Delete"
+      confirmText={isDeleting ? 'Deleting...' : 'Delete'}
       onDismiss={onDismiss}
       onConfirm={onDelete}
       title="Delete"

public/app/features/browse-dashboards/components/BrowseActions/MoveModal.tsx

@@ -11,20 +11,27 @@ import { DescendantCount } from './DescendantCount';
 
 export interface Props {
   isOpen: boolean;
-  onConfirm: (targetFolderUid: string) => void;
+  onConfirm: (targetFolderUid: string) => Promise<void>;
   onDismiss: () => void;
   selectedItems: DashboardTreeSelection;
 }
 
 export const MoveModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Props) => {
   const [moveTarget, setMoveTarget] = useState<string>();
+  const [isMoving, setIsMoving] = useState(false);
   const selectedFolders = Object.keys(selectedItems.folder).filter((uid) => selectedItems.folder[uid]);
 
-  const onMove = () => {
+  const onMove = async () => {
     if (moveTarget !== undefined) {
-      onConfirm(moveTarget);
+      setIsMoving(true);
+      try {
+        await onConfirm(moveTarget);
+        setIsMoving(false);
+        onDismiss();
+      } catch {
+        setIsMoving(false);
+      }
     }
-    onDismiss();
   };
 
   return (
@@ -45,8 +52,8 @@ export const MoveModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Pro
         <Button onClick={onDismiss} variant="secondary" fill="outline">
           Cancel
         </Button>
-        <Button disabled={moveTarget === undefined} onClick={onMove} variant="primary">
-          Move
+        <Button disabled={moveTarget === undefined || isMoving} onClick={onMove} variant="primary">
+          {isMoving ? 'Moving...' : 'Move'}
         </Button>
       </Modal.ButtonRow>
     </Modal>