[Feature]: Loading states for async operations in GUI

src/web/src/__tests__/api/workspaceApi.test.tsx

@@ -77,13 +77,18 @@ describe("Workspace API", () => {
 
   describe("deleteWorkspace", () => {
     it("should delete workspace by name", async () => {
-      await expect(workspaceApi.deleteWorkspace("test-workspace-1")).resolves.toBeUndefined();
+      const operation = workspaceApi.deleteWorkspace;
+      expect(operation.loadingMessage).toBe("Deleting workspace...");
+      await expect(operation.fn("test-workspace-1")).resolves.toBeUndefined();
     });
   });
 
   describe("renameWorkspace", () => {
     it("should rename workspace and return new name", async () => {
-      const result = await workspaceApi.renameWorkspace("/AAZ/Editor/Workspaces/test-workspace-1", "renamed-workspace");
+      const operation = workspaceApi.renameWorkspace;
+      expect(operation.loadingMessage).toBe("Renaming workspace...");
+
+      const result = await operation.fn("/AAZ/Editor/Workspaces/test-workspace-1", "renamed-workspace");
 
       expect(result).toEqual({
         name: "renamed-workspace",

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

@@ -12,7 +12,14 @@ vi.mock("../../services", () => ({
   },
   specsApi: {
     getPlanes: vi.fn(),
-    getSwaggerModules: vi.fn(),
+    getModulesForPlane: {
+      loadingMessage: "Loading modules for plane...",
+      fn: vi.fn(),
+    },
+    getResourcesForWorkspace: {
+      loadingMessage: "Loading resources...",
+      fn: vi.fn(),
+    },
     getResourceProviders: vi.fn(),
     getProviderResources: vi.fn(),
   },
@@ -54,7 +61,7 @@ describe("WSEditorClientConfigDialog", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     (specsApi.getPlanes as any).mockResolvedValue(mockPlanes);
-    (specsApi.getSwaggerModules as any).mockResolvedValue(["storage", "compute"]);
+    (specsApi.getResourcesForWorkspace.fn as any).mockResolvedValue(["storage", "compute"]);
     (specsApi.getResourceProviders as any).mockResolvedValue(mockResourceProviders);
     (specsApi.getProviderResources as any).mockResolvedValue(mockProviderResources);
     (errorHandlerApi.getErrorMessage as any).mockReturnValue("Mock error message");

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

@@ -127,10 +127,30 @@ describe("WSEditorCommandContent", () => {
     vi.clearAllMocks();
     vi.mocked(commandApi).getCommand.mockResolvedValue(mockCommand);
     vi.mocked(commandApi).getCommandsForResource.mockResolvedValue([mockCommand]);
-    vi.mocked(commandApi).deleteResource.mockResolvedValue(undefined);
-    vi.mocked(commandApi).updateCommand.mockResolvedValue(mockCommand);
-    vi.mocked(commandApi).updateCommandExamples.mockResolvedValue(mockCommand);
-    vi.mocked(commandApi).updateCommandOutputs.mockResolvedValue(mockCommand);
+    vi.mocked(commandApi).deleteResource = {
+      loadingMessage: "Deleting commands...",
+      fn: vi.fn().mockResolvedValue(undefined),
+    };
+    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 = {
+      loadingMessage: "Updating command outputs...",
+      fn: vi.fn().mockResolvedValue(mockCommand),
+    };
   });
 
   describe("Core Rendering", () => {
@@ -470,7 +490,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} />);
 
@@ -500,7 +520,10 @@ describe("WSEditorCommandContent", () => {
     });
 
     it("handles delete dialog confirmation", async () => {
-      vi.mocked(commandApi).deleteResource.mockResolvedValue(undefined);
+      vi.mocked(commandApi).deleteResource = {
+        loadingMessage: "Deleting commands...",
+        fn: vi.fn().mockResolvedValue(undefined),
+      };
 
       render(<WSEditorCommandContent {...defaultProps} />);
 

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,28 @@ 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: {
+      loadingMessage: "Updating command group...",
+      fn: vi.fn(),
+    },
+    renameCommandGroup: {
+      loadingMessage: "Renaming command group...",
+      fn: vi.fn(),
+    },
+  },
+  errorHandlerApi: {
+    getErrorMessage: vi.fn(),
+  },
+}));
 
 const mockCommandApi = commandApi as any;
+
 describe("WSEditorCommandGroupContent", () => {
   const mockWorkspaceUrl = "https://test-workspace.com/workspace/ws1";
 
@@ -37,6 +55,21 @@ describe("WSEditorCommandGroupContent", () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    mockCommandApi.deleteCommandGroup.fn.mockResolvedValue(undefined);
+    mockCommandApi.updateCommandGroup.fn.mockResolvedValue({
+      id: "updated-group-id",
+      names: ["updated-group"],
+      stage: "Stable",
+      help: { short: "Updated help text" },
+      canDelete: true,
+    });
+    mockCommandApi.renameCommandGroup.fn.mockResolvedValue({
+      id: "renamed-group-id",
+      names: ["renamed-group"],
+      stage: "Stable",
+      help: { short: "Test help" },
+      canDelete: true,
+    });
   });
 
   describe("Core Rendering", () => {
@@ -160,8 +193,7 @@ describe("WSEditorCommandGroupContent", () => {
       });
     });
 
-    it.skip("saves changes and updates command group", async () => {
-      // @NOTE: will change approach once mocking setup changes
+    it("saves changes and updates command group", async () => {
       const user = userEvent.setup();
 
       render(
@@ -183,7 +215,7 @@ describe("WSEditorCommandGroupContent", () => {
       await user.click(saveButton);
 
       await waitFor(() =>
-        expect(mockCommandApi.updateCommandGroup).toHaveBeenCalledWith(
+        expect(mockCommandApi.updateCommandGroup.fn).toHaveBeenCalledWith(
           expect.stringContaining(mockWorkspaceUrl),
           expect.objectContaining({
             help: expect.objectContaining({ short: "Updated help text" }),
@@ -270,7 +302,7 @@ describe("WSEditorCommandGroupContent", () => {
       await user.click(confirmDeleteButton);
 
       await waitFor(() => {
-        expect(mockCommandApi.deleteCommandGroup).toHaveBeenCalled();
+        expect(mockCommandApi.deleteCommandGroup.fn).toHaveBeenCalled();
         expect(mockOnUpdateCommandGroup).toHaveBeenCalledWith(null);
       });
     });
@@ -282,7 +314,7 @@ describe("WSEditorCommandGroupContent", () => {
       const user = userEvent.setup();
       const mockError = new Error("Update failed");
 
-      mockCommandApi.updateCommandGroup.mockRejectedValue(mockError);
+      mockCommandApi.updateCommandGroup.fn.mockRejectedValue(mockError);
 
       render(
         <WSEditorCommandGroupContent
@@ -297,14 +329,14 @@ describe("WSEditorCommandGroupContent", () => {
       await user.click(editButton);
 
       await waitFor(() => {
-        expect(screen.getByText("Edit Command Group")).toBeInTheDocument();
+        expect(screen.getByText("Command Group")).toBeInTheDocument();
       });
 
       const saveButton = screen.getByRole("button", { name: /save/i });
       await user.click(saveButton);
 
       await waitFor(() => {
-        expect(mockCommandApi.updateCommandGroup).toHaveBeenCalled();
+        expect(mockCommandApi.updateCommandGroup.fn).toHaveBeenCalled();
       });
     });
 
@@ -313,7 +345,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 +367,7 @@ describe("WSEditorCommandGroupContent", () => {
       await user.click(confirmDeleteButton);
 
       await waitFor(() => {
-        expect(mockCommandApi.deleteCommandGroup).toHaveBeenCalled();
+        expect(mockCommandApi.deleteCommandGroup.fn).toHaveBeenCalled();
       });
     });
 

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

@@ -84,7 +84,10 @@ describe("WSEditorSwaggerPicker", () => {
     vi.mocked(workspaceApi).addSwaggerResources.mockResolvedValue(undefined);
     vi.mocked(workspaceApi).addTypespecResources.mockResolvedValue(undefined);
 
-    vi.mocked(specsApi).getSwaggerModules.mockResolvedValue(mockModules);
+    vi.mocked(specsApi).getResourcesForWorkspace = {
+      loadingMessage: "Loading resources...",
+      fn: vi.fn().mockResolvedValue(mockModules),
+    };
     vi.mocked(specsApi).getResourceProvidersWithType.mockResolvedValue(mockResourceProviders);
     vi.mocked(specsApi).getProviderResources.mockResolvedValue(mockResources);
     vi.mocked(specsApi).filterResourcesByPlane.mockResolvedValue({ resources: mockResources });
@@ -126,7 +129,7 @@ describe("WSEditorSwaggerPicker", () => {
       render(<WSEditorSwaggerPicker {...defaultProps} />);
 
       await waitFor(() => {
-        expect(vi.mocked(specsApi).getSwaggerModules).toHaveBeenCalledWith("ResourceManagement");
+        expect(vi.mocked(specsApi).getResourcesForWorkspace.fn).toHaveBeenCalledWith("ResourceManagement");
       });
     });
 
@@ -686,79 +689,6 @@ describe("WSEditorSwaggerPicker", () => {
       expect(onCloseMock).toHaveBeenCalledWith(false);
     });
   });
-
-  describe("Error Handling", () => {
-    it.skip("displays error when swagger modules fail to load", async () => {
-      // @NOTE: will address once loading issues have been addressed
-      vi.mocked(specsApi).getSwaggerModules.mockRejectedValue(new Error("Failed to load modules"));
-
-      render(<WSEditorSwaggerPicker {...defaultProps} />);
-
-      await waitFor(() => {
-        expect(screen.getByText(/ResponseError/)).toBeInTheDocument();
-      });
-    });
-
-    it.skip("displays error when resource providers fail to load", async () => {
-      // @NOTE: will address once loading issues have been addressed
-      vi.mocked(specsApi).getResourceProvidersWithType.mockRejectedValue(new Error("Failed to load providers"));
-
-      render(<WSEditorSwaggerPicker {...defaultProps} />);
-
-      await waitFor(() => {
-        expect(screen.getByText(/ResponseError/)).toBeInTheDocument();
-      });
-    });
-
-    it.skip("displays error when resources fail to load", async () => {
-      // @NOTE: will address once loading issues have been addressed
-      vi.mocked(specsApi).getProviderResources.mockRejectedValue(new Error("Failed to load resources"));
-
-      render(<WSEditorSwaggerPicker {...defaultProps} />);
-
-      await waitFor(() => {
-        expect(screen.getByText(/ResponseError/)).toBeInTheDocument();
-      });
-    });
-
-    it.skip("displays error when submission fails", async () => {
-      // @NOTE: will address once loading issues have been addressed
-      vi.mocked(workspaceApi).addSwaggerResources.mockRejectedValue(new Error("Submission failed"));
-
-      render(<WSEditorSwaggerPicker {...defaultProps} />);
-
-      await waitFor(() => {
-        const resourceCheckbox = screen.getAllByRole("checkbox")[1];
-        fireEvent.click(resourceCheckbox);
-      });
-
-      const submitButton = screen.getByRole("button", { name: /submit/i });
-      fireEvent.click(submitButton);
-
-      await waitFor(() => {
-        expect(screen.getByText(/ResponseError/)).toBeInTheDocument();
-      });
-    });
-
-    it.skip("allows dismissing error messages", async () => {
-      // @NOTE: will address once loading issues have been addressed
-      vi.mocked(specsApi).getSwaggerModules.mockRejectedValue(new Error("Failed to load modules"));
-
-      render(<WSEditorSwaggerPicker {...defaultProps} />);
-
-      await waitFor(() => {
-        const errorAlert = screen.getByText(/ResponseError/);
-        expect(errorAlert).toBeInTheDocument();
-      });
-
-      const closeErrorButton = screen.getByLabelText(/close/i);
-      fireEvent.click(closeErrorButton);
-
-      await waitFor(() => {
-        expect(screen.queryByText(/ResponseError/)).not.toBeInTheDocument();
-      });
-    });
-  });
 });
 
 describe("SwaggerItemSelector", () => {

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

@@ -281,20 +281,29 @@ describe("Workspace Management", () => {
     });
 
     it("should delete workspace successfully", async () => {
-      (workspaceApi.deleteWorkspace as any).mockResolvedValue(undefined);
+      const mockOperation = {
+        loadingMessage: "Deleting workspace...",
+        fn: vi.fn().mockResolvedValue(undefined),
+      };
+      (workspaceApi.deleteWorkspace as any) = mockOperation;
 
-      await workspaceApi.deleteWorkspace("test-workspace-1");
+      await workspaceApi.deleteWorkspace.fn("test-workspace-1");
 
-      expect(workspaceApi.deleteWorkspace).toHaveBeenCalledWith("test-workspace-1");
+      expect(workspaceApi.deleteWorkspace.fn).toHaveBeenCalledWith("test-workspace-1");
+      expect(workspaceApi.deleteWorkspace.loadingMessage).toBe("Deleting workspace...");
     });
 
     it("should rename workspace successfully", async () => {
       const expectedResult = { name: "renamed-workspace" };
-      (workspaceApi.renameWorkspace as any).mockResolvedValue(expectedResult);
+      const mockFn = vi.fn().mockResolvedValue(expectedResult);
+      (workspaceApi.renameWorkspace as any) = {
+        loadingMessage: "Renaming workspace...",
+        fn: mockFn,
+      };
 
-      const result = await workspaceApi.renameWorkspace("/workspace/test-workspace-1", "renamed-workspace");
+      const result = await workspaceApi.renameWorkspace.fn("/workspace/test-workspace-1", "renamed-workspace");
 
-      expect(workspaceApi.renameWorkspace).toHaveBeenCalledWith("/workspace/test-workspace-1", "renamed-workspace");
+      expect(mockFn).toHaveBeenCalledWith("/workspace/test-workspace-1", "renamed-workspace");
       expect(result).toEqual(expectedResult);
     });
   });

src/web/src/__tests__/integration/WSEditorClientConfig.integration.test.tsx

@@ -94,7 +94,7 @@ describe("WSEditorClientConfigDialog - Integration", () => {
   });
 
   describe("Complete User Workflows", () => {
-    it("should handle user inputs for relevant fields", async () => {
+    it("should handle user inputs for relevant fields", { timeout: 10000 }, async () => {
       const user = userEvent.setup();
       render(<WSEditorClientConfigDialog workspaceUrl={mockWorkspaceUrl} open={true} onClose={mockOnClose} />);