refactor: update ExampleDialog loading handlers

Author: DanielMicrosoft

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

@@ -131,8 +131,22 @@ describe("WSEditorCommandContent", () => {
       loadingMessage: "Deleting commands...",
       fn: vi.fn().mockResolvedValue(undefined),
     };
-    vi.mocked(commandApi).updateCommand.mockResolvedValue(mockCommand);
-    vi.mocked(commandApi).updateCommandExamples.mockResolvedValue(mockCommand);
+    vi.mocked(commandApi).updateCommand = {
+      loadingMessage: "Updating command...",
+      fn: vi.fn().mockResolvedValue(mockCommand),
+    };
+    vi.mocked(commandApi).renameCommand = {
+      loadingMessage: "Renaming command...",
+      fn: vi.fn().mockResolvedValue(mockCommand),
+    };
+    vi.mocked(commandApi).updateCommandExamples = {
+      loadingMessage: "Updating command examples...",
+      fn: vi.fn().mockResolvedValue(mockCommand),
+    };
+    vi.mocked(commandApi).generateSwaggerExamples = {
+      loadingMessage: "Generating examples from OpenAPI...",
+      fn: vi.fn().mockResolvedValue([]),
+    };
     vi.mocked(commandApi).updateCommandOutputs.mockResolvedValue(mockCommand);
   });
 
@@ -473,7 +487,7 @@ describe("WSEditorCommandContent", () => {
 
     it("handles example dialog close with changes", async () => {
       const updatedCommand = { ...mockCommand, version: "2.0" };
-      vi.mocked(commandApi).updateCommandExamples.mockResolvedValue(updatedCommand);
+      (vi.mocked(commandApi).updateCommandExamples.fn as any).mockResolvedValue(updatedCommand);
 
       render(<WSEditorCommandContent {...defaultProps} />);
 

src/web/src/services/commandApi.ts

@@ -18,27 +18,39 @@ export const commandApi = {
     },
   },
 
-  updateCommand: async (leafUrl: string, data: any): Promise<any> => {
-    const res = await axios.patch(leafUrl, data);
-    return res.data;
+  updateCommand: {
+    loadingMessage: "Updating command...",
+    fn: async (leafUrl: string, data: any): Promise<any> => {
+      const res = await axios.patch(leafUrl, data);
+      return res.data;
+    },
   },
 
-  renameCommand: async (leafUrl: string, newName: string): Promise<any> => {
-    const res = await axios.post(`${leafUrl}/Rename`, { name: newName });
-    return res.data;
+  renameCommand: {
+    loadingMessage: "Renaming command...",
+    fn: async (leafUrl: string, newName: string): Promise<any> => {
+      const res = await axios.post(`${leafUrl}/Rename`, { name: newName });
+      return res.data;
+    },
   },
 
-  updateCommandExamples: async (leafUrl: string, examples: any[]): Promise<any> => {
-    const res = await axios.patch(leafUrl, { examples });
-    return res.data;
+  updateCommandExamples: {
+    loadingMessage: "Updating command examples...",
+    fn: async (leafUrl: string, examples: any[]): Promise<any> => {
+      const res = await axios.patch(leafUrl, { examples });
+      return res.data;
+    },
   },
 
-  generateSwaggerExamples: async (leafUrl: string): Promise<any[]> => {
-    const res = await axios.post(`${leafUrl}/GenerateExamples`, { source: "swagger" });
-    return res.data.map((v: any) => ({
-      name: v.name,
-      commands: v.commands,
-    }));
+  generateSwaggerExamples: {
+    loadingMessage: "Generating examples from OpenAPI...",
+    fn: async (leafUrl: string): Promise<any[]> => {
+      const res = await axios.post(`${leafUrl}/GenerateExamples`, { source: "swagger" });
+      return res.data.map((v: any) => ({
+        name: v.name,
+        commands: v.commands,
+      }));
+    },
   },
 
   addSubcommands: async (resourceUrl: string, data: any): Promise<void> => {

src/web/src/views/workspace/components/WSEditorCommandContent/CommandDialog.tsx

@@ -1,20 +1,20 @@
 import {
   Alert,
-  Box,
   Button,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
   FormControlLabel,
   InputLabel,
-  LinearProgress,
   Radio,
   RadioGroup,
   TextField,
 } from "@mui/material";
 import React, { useState, useCallback } from "react";
 import { commandApi, errorHandlerApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
+import { AsyncOperationBanner } from "../../../../components";
 import { DecodeResponseCommand } from "../../utils/decodeResponseCommand";
 import type { Command } from "../../interfaces";
 
@@ -26,13 +26,15 @@ export interface CommandDialogProps {
 }
 
 const CommandDialog: React.FC<CommandDialogProps> = ({ workspaceUrl, open, command, onClose }) => {
+  const updateOperation = useAsyncOperation(commandApi.updateCommand);
+  const renameOperation = useAsyncOperation(commandApi.renameCommand);
+
   const [name, setName] = useState(command.names.join(" "));
   const [shortHelp, setShortHelp] = useState(command.help?.short ?? "");
   const [longHelp, setLongHelp] = useState(command.help?.lines?.join("\n") ?? "");
   const [stage, setStage] = useState(command.stage);
   const [confirmation, setConfirmation] = useState(command.confirmation ?? "");
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
-  const [updating, setUpdating] = useState(false);
 
   const handleModify = useCallback(async () => {
     let trimmedName = name.trim();
@@ -67,16 +69,14 @@ const CommandDialog: React.FC<CommandDialogProps> = ({ workspaceUrl, open, comma
       lines = trimmedLongHelp.split("\n").filter((l) => l.length > 0);
     }
 
-    setUpdating(true);
-
     const leafUrl =
       `${workspaceUrl}/CommandTree/Nodes/aaz/` +
       command.names.slice(0, -1).join("/") +
       "/Leaves/" +
       command.names[command.names.length - 1];
 
     try {
-      const commandData = await commandApi.updateCommand(leafUrl, {
+      const commandData = await updateOperation.execute(leafUrl, {
         help: {
           short: trimmedShortHelp,
           lines: lines,
@@ -88,18 +88,15 @@ const CommandDialog: React.FC<CommandDialogProps> = ({ workspaceUrl, open, comma
       const commandName = names.join(" ");
       if (commandName === command.names.join(" ")) {
         const cmd = DecodeResponseCommand(commandData);
-        setUpdating(false);
         onClose(cmd);
       } else {
-        const renamedData = await commandApi.renameCommand(leafUrl, commandName);
+        const renamedData = await renameOperation.execute(leafUrl, commandName);
         const cmd = DecodeResponseCommand(renamedData);
-        setUpdating(false);
         onClose(cmd);
       }
     } catch (err: any) {
       console.error(err);
       setInvalidText(errorHandlerApi.getErrorMessage(err));
-      setUpdating(false);
     }
   }, [name, shortHelp, longHelp, confirmation, stage, workspaceUrl, command, onClose]);
 
@@ -108,14 +105,19 @@ const CommandDialog: React.FC<CommandDialogProps> = ({ workspaceUrl, open, comma
     onClose();
   }, [onClose]);
 
+  const isLoading = updateOperation.loading || renameOperation.loading;
+  const error = updateOperation.error || renameOperation.error;
+
   return (
     <Dialog disableEscapeKeyDown open={open} sx={{ "& .MuiDialog-paper": { width: "80%" } }}>
       <DialogTitle>Command</DialogTitle>
       <DialogContent dividers={true}>
-        {invalidText && (
+        <AsyncOperationBanner operation={updateOperation} />
+        <AsyncOperationBanner operation={renameOperation} />
+        {(invalidText || error) && (
           <Alert variant="filled" severity="error">
             {" "}
-            {invalidText}{" "}
+            {invalidText || errorHandlerApi.getErrorMessage(error!)}{" "}
           </Alert>
         )}
         <InputLabel required shrink sx={{ font: "inherit" }}>
@@ -191,17 +193,12 @@ const CommandDialog: React.FC<CommandDialogProps> = ({ workspaceUrl, open, comma
         />
       </DialogContent>
       <DialogActions>
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
-        {!updating && (
-          <React.Fragment>
-            <Button onClick={handleClose}>Cancel</Button>
-            <Button onClick={handleModify}>Save</Button>
-          </React.Fragment>
-        )}
+        <Button onClick={handleClose} disabled={isLoading}>
+          Cancel
+        </Button>
+        <Button onClick={handleModify} disabled={isLoading}>
+          Save
+        </Button>
       </DialogActions>
     </Dialog>
   );

src/web/src/views/workspace/components/WSEditorCommandContent/ExampleDialog.tsx

@@ -11,7 +11,6 @@ import {
   Input,
   InputAdornment,
   InputLabel,
-  LinearProgress,
   TextField,
   Typography,
   TypographyProps,
@@ -22,6 +21,8 @@ import DoDisturbOnRoundedIcon from "@mui/icons-material/DoDisturbOnRounded";
 import AddCircleRoundedIcon from "@mui/icons-material/AddCircleRounded";
 import CloseIcon from "@mui/icons-material/Close";
 import { commandApi, errorHandlerApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
+import { AsyncOperationBanner } from "../../../../components";
 import { COMMAND_PREFIX } from "../../../../constants";
 import { ExampleItemSelector } from "./ExampleItemSelector";
 import { DecodeResponseCommand } from "../../utils/decodeResponseCommand";
@@ -43,11 +44,13 @@ const ExampleCommandTypography = styled(Typography)<TypographyProps>(({ theme })
 }));
 
 const ExampleDialog: React.FC<ExampleDialogProps> = ({ workspaceUrl, open, command, idx, onClose }) => {
+  const updateExamplesOperation = useAsyncOperation(commandApi.updateCommandExamples);
+  const generateExamplesOperation = useAsyncOperation(commandApi.generateSwaggerExamples);
+
   const [name, setName] = useState<string>("");
   const [exampleCommands, setExampleCommands] = useState<string[]>([""]);
   const [isAdd, setIsAdd] = useState<boolean>(true);
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
-  const [updating, setUpdating] = useState<boolean>(false);
   const [source, setSource] = useState<string | undefined>(undefined);
   const [exampleOptions, setExampleOptions] = useState<Example[]>([]);
 
@@ -58,7 +61,6 @@ const ExampleDialog: React.FC<ExampleDialogProps> = ({ workspaceUrl, open, comma
       setExampleCommands([""]);
       setIsAdd(true);
       setInvalidText(undefined);
-      setUpdating(false);
       setSource(undefined);
       setExampleOptions([]);
     } else {
@@ -67,7 +69,6 @@ const ExampleDialog: React.FC<ExampleDialogProps> = ({ workspaceUrl, open, comma
       setExampleCommands(example.commands);
       setIsAdd(false);
       setInvalidText(undefined);
-      setUpdating(false);
       setSource(undefined);
       setExampleOptions([]);
     }
@@ -81,21 +82,17 @@ const ExampleDialog: React.FC<ExampleDialogProps> = ({ workspaceUrl, open, comma
         "/Leaves/" +
         command.names[command.names.length - 1];
 
-      setUpdating(true);
-
       try {
-        const responseData = await commandApi.updateCommandExamples(leafUrl, examples);
+        const responseData = await updateExamplesOperation.execute(leafUrl, examples);
         const cmd = DecodeResponseCommand(responseData);
-        setUpdating(false);
         onClose(cmd);
       } catch (err: any) {
         console.error(err);
         const message = errorHandlerApi.getErrorMessage(err);
         setInvalidText(`ResponseError: ${message}`);
-        setUpdating(false);
       }
     },
-    [workspaceUrl, command.names, onClose],
+    [workspaceUrl, command.names, onClose, updateExamplesOperation],
   );
 
   const handleDelete = useCallback(() => {
@@ -205,19 +202,18 @@ const ExampleDialog: React.FC<ExampleDialogProps> = ({ workspaceUrl, open, comma
         command.names[command.names.length - 1];
 
       setSource("swagger");
-      setUpdating(true);
-      const examples = await commandApi.generateSwaggerExamples(leafUrl);
-      setExampleOptions(examples);
-      setUpdating(false);
-      if (examples.length > 0) {
-        onExampleSelectorUpdate(examples[0].name);
+      const examples = await generateExamplesOperation.execute(leafUrl);
+      if (examples) {
+        setExampleOptions(examples);
+        if (examples.length > 0) {
+          onExampleSelectorUpdate(examples[0].name);
+        }
       }
     } catch (err: any) {
       console.error(err.response);
-      setUpdating(false);
       setInvalidText(errorHandlerApi.getErrorMessage(err));
     }
-  }, [workspaceUrl, command.names]);
+  }, [workspaceUrl, command.names, generateExamplesOperation]);
 
   const onExampleSelectorUpdate = useCallback(
     (exampleDisplayName: string | null) => {
@@ -359,12 +355,9 @@ const ExampleDialog: React.FC<ExampleDialogProps> = ({ workspaceUrl, open, comma
       </DialogContent>
       {(!isAdd || source != undefined) && (
         <DialogActions>
-          {updating && (
-            <Box sx={{ width: "100%" }}>
-              <LinearProgress color="secondary" />
-            </Box>
-          )}
-          {!updating && (
+          <AsyncOperationBanner operation={updateExamplesOperation} />
+          <AsyncOperationBanner operation={generateExamplesOperation} />
+          {!updateExamplesOperation.loading && !generateExamplesOperation.loading && (
             <React.Fragment>
               {!isAdd && (
                 <React.Fragment>