refactor: update deleteCommandgroup to use new loading pattern

Author: DanielMicrosoft

src/web/src/__tests__/components/WSEditorCommandGroupContent.test.tsx

@@ -2,7 +2,7 @@ import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { vi } from "vitest";
 import WSEditorCommandGroupContent from "../../views/workspace/components/WSEditorCommandGroupContent/WSEditorCommandGroupContent";
-import * as commandApi from "../../services/commandApi";
+import { commandApi } from "../../services";
 
 interface CommandGroup {
   id: string;
@@ -15,10 +15,22 @@ interface CommandGroup {
   canDelete: boolean;
 }
 
-vi.mock("../../services/commandApi");
-vi.mock("../../services/errorHandlerApi");
+vi.mock("../../services", () => ({
+  commandApi: {
+    deleteCommandGroup: {
+      loadingMessage: "Deleting command group...",
+      fn: vi.fn(),
+    },
+    updateCommandGroup: vi.fn(),
+    renameCommandGroup: vi.fn(),
+  },
+  errorHandlerApi: {
+    getErrorMessage: vi.fn(),
+  },
+}));
 
 const mockCommandApi = commandApi as any;
+
 describe("WSEditorCommandGroupContent", () => {
   const mockWorkspaceUrl = "https://test-workspace.com/workspace/ws1";
 
@@ -37,6 +49,7 @@ describe("WSEditorCommandGroupContent", () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    mockCommandApi.deleteCommandGroup.fn.mockResolvedValue(undefined);
   });
 
   describe("Core Rendering", () => {
@@ -270,7 +283,7 @@ describe("WSEditorCommandGroupContent", () => {
       await user.click(confirmDeleteButton);
 
       await waitFor(() => {
-        expect(mockCommandApi.deleteCommandGroup).toHaveBeenCalled();
+        expect(mockCommandApi.deleteCommandGroup.fn).toHaveBeenCalled();
         expect(mockOnUpdateCommandGroup).toHaveBeenCalledWith(null);
       });
     });
@@ -313,7 +326,7 @@ describe("WSEditorCommandGroupContent", () => {
       const user = userEvent.setup();
       const mockError = new Error("Delete failed");
 
-      mockCommandApi.deleteCommandGroup.mockRejectedValue(mockError);
+      mockCommandApi.deleteCommandGroup.fn.mockRejectedValue(mockError);
 
       render(
         <WSEditorCommandGroupContent
@@ -335,7 +348,7 @@ describe("WSEditorCommandGroupContent", () => {
       await user.click(confirmDeleteButton);
 
       await waitFor(() => {
-        expect(mockCommandApi.deleteCommandGroup).toHaveBeenCalled();
+        expect(mockCommandApi.deleteCommandGroup.fn).toHaveBeenCalled();
       });
     });
 

src/web/src/services/commandApi.ts

@@ -91,8 +91,11 @@ export const commandApi = {
     await axios.post(flattenUrl);
   },
 
-  deleteCommandGroup: async (nodeUrl: string): Promise<void> => {
-    await axios.delete(nodeUrl);
+  deleteCommandGroup: {
+    loadingMessage: "Deleting command group...",
+    fn: async (nodeUrl: string): Promise<void> => {
+      await axios.delete(nodeUrl);
+    },
   },
 
   updateCommandGroup: async (

src/web/src/views/workspace/components/WSEditorCommandGroupContent/CommandGroupDeleteDialog.tsx

@@ -1,14 +1,7 @@
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  LinearProgress,
-  Typography,
-} from "@mui/material";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material";
 import { commandApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
+import { AsyncOperationBanner } from "../../../../components";
 import * as React from "react";
 import { COMMAND_PREFIX } from "../../../../constants";
 import type { CommandGroup } from "../../interfaces";
@@ -26,39 +19,32 @@ const CommandGroupDeleteDialog: React.FC<CommandGroupDeleteDialogProps> = ({
   commandGroup,
   onClose,
 }) => {
-  const [updating, setUpdating] = React.useState<boolean>(false);
+  const deleteCommandGroupOperation = useAsyncOperation(commandApi.deleteCommandGroup);
 
   const handleClose = React.useCallback(() => {
     onClose(false);
   }, [onClose]);
 
   const handleDelete = React.useCallback(async () => {
     const nodeUrl = `${workspaceUrl}/CommandTree/Nodes/aaz/${commandGroup.names.join("/")}`;
-    setUpdating(true);
 
     try {
-      await commandApi.deleteCommandGroup(nodeUrl);
-      setUpdating(false);
+      await deleteCommandGroupOperation.execute(nodeUrl);
       onClose(true);
     } catch (err: any) {
-      setUpdating(false);
       console.error(err);
     }
-  }, [workspaceUrl, commandGroup.names, onClose]);
+  }, [workspaceUrl, commandGroup.names, onClose, deleteCommandGroupOperation]);
 
   return (
     <Dialog disableEscapeKeyDown open={open}>
       <DialogTitle>Delete Command Group</DialogTitle>
       <DialogContent dividers={true}>
+        <AsyncOperationBanner operation={deleteCommandGroupOperation} />
         <Typography variant="body2">{`${COMMAND_PREFIX}${commandGroup.names.join(" ")}`}</Typography>
       </DialogContent>
       <DialogActions>
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
-        {!updating && (
+        {!deleteCommandGroupOperation.loading && (
           <React.Fragment>
             <Button onClick={handleClose}>Cancel</Button>
             <Button onClick={handleDelete}>Delete</Button>