refactor: update Outputdialog with new loading pattern

Author: DanielMicrosoft

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

@@ -147,7 +147,10 @@ describe("WSEditorCommandContent", () => {
       loadingMessage: "Generating examples from OpenAPI...",
       fn: vi.fn().mockResolvedValue([]),
     };
-    vi.mocked(commandApi).updateCommandOutputs.mockResolvedValue(mockCommand);
+    vi.mocked(commandApi).updateCommandOutputs = {
+      loadingMessage: "Updating command outputs...",
+      fn: vi.fn().mockResolvedValue(mockCommand),
+    };
   });
 
   describe("Core Rendering", () => {

src/web/src/services/commandApi.ts

@@ -57,9 +57,12 @@ export const commandApi = {
     await axios.post(resourceUrl, data);
   },
 
-  updateCommandOutputs: async (leafUrl: string, outputs: any[]): Promise<any> => {
-    const res = await axios.patch(leafUrl, { outputs });
-    return res.data;
+  updateCommandOutputs: {
+    loadingMessage: "Updating command outputs...",
+    fn: async (leafUrl: string, outputs: any[]): Promise<any> => {
+      const res = await axios.patch(leafUrl, { outputs });
+      return res.data;
+    },
   },
 
   updateCommandArgument: async (argumentUrl: string, data: any): Promise<void> => {

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

@@ -9,14 +9,15 @@ import {
   DialogTitle,
   FormControlLabel,
   FormLabel,
-  LinearProgress,
   Switch,
   Typography,
   TypographyProps,
   FormLabelProps,
 } from "@mui/material";
 import { styled } from "@mui/material";
 import { commandApi, errorHandlerApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
+import { AsyncOperationBanner } from "../../../../components";
 import { DecodeResponseCommand } from "../../utils/decodeResponseCommand";
 
 interface ObjectOutput {
@@ -81,7 +82,7 @@ interface OutputDialogProps {
 }
 
 const OutputDialog: React.FC<OutputDialogProps> = (props) => {
-  const [updating, setUpdating] = useState<boolean>(false);
+  const updateOutputsOperation = useAsyncOperation(commandApi.updateCommandOutputs);
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
   const outputs = props.command.outputs ?? [];
   const output = outputs[props.idx!];
@@ -95,7 +96,6 @@ const OutputDialog: React.FC<OutputDialogProps> = (props) => {
 
   const handleUpdateOutput = async () => {
     setInvalidText(undefined);
-    setUpdating(true);
 
     if (isObjectOutput(output) || isArrayOutput(output)) {
       let commandNames = props.command.names;
@@ -104,22 +104,17 @@ const OutputDialog: React.FC<OutputDialogProps> = (props) => {
         commandNames.slice(0, -1).join("/") +
         "/Leaves/" +
         commandNames[commandNames.length - 1];
-      console.log("Original clientFlatten: ");
-      console.log(output.clientFlatten);
+
       output.clientFlatten = !output.clientFlatten;
-      console.log("New clientFlatten: ");
-      console.log(output.clientFlatten);
 
       try {
-        const responseData = await commandApi.updateCommandOutputs(leafUrl, outputs);
+        const responseData = await updateOutputsOperation.execute(leafUrl, outputs);
         const cmd = DecodeResponseCommand(responseData);
-        setUpdating(false);
         props.onClose(cmd);
       } catch (err: any) {
         console.error(err);
         const message = errorHandlerApi.getErrorMessage(err);
         setInvalidText(`ResponseError: ${message}`);
-        setUpdating(false);
       }
     } else {
       console.error(`Invalid output type for flatten switch: ${output.type}`);
@@ -177,13 +172,11 @@ const OutputDialog: React.FC<OutputDialogProps> = (props) => {
         )}
       </DialogContent>
       <DialogActions>
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
-        {!updating && <Button onClick={handleClose}>Cancel</Button>}
-        <Button onClick={handleUpdateOutput}>Update</Button>
+        <AsyncOperationBanner operation={updateOutputsOperation} />
+        {!updateOutputsOperation.loading && <Button onClick={handleClose}>Cancel</Button>}
+        <Button onClick={handleUpdateOutput} disabled={updateOutputsOperation.loading}>
+          Update
+        </Button>
       </DialogActions>
     </Dialog>
   );