[Feature]: update FE to use function-based react

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

@@ -1,10 +1,10 @@
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import { vi } from "vitest";
 import { MemoryRouter } from "react-router-dom";
-import { WSEditor } from "../../views/workspace/WSEditor";
+import { WSEditor } from "../../views/workspace/components/WSEditor";
 import { workspaceApi, specsApi, errorHandlerApi } from "../../services";
 
-vi.mock("../../views/workspace/WSEditorToolBar", () => ({
+vi.mock("../../views/workspace/components/WSEditor/WSEditorToolBar", () => ({
   default: ({ workspaceName, onHomePage, onGenerate, onDelete, onModify }: any) => (
     <div data-testid="ws-editor-toolbar">
       <span data-testid="workspace-name">{workspaceName}</span>
@@ -24,7 +24,7 @@ vi.mock("../../views/workspace/WSEditorToolBar", () => ({
   ),
 }));
 
-vi.mock("../../views/workspace/WSEditorCommandTree", () => ({
+vi.mock("../../views/workspace/components/WSEditor/WSEditorCommandTree", () => ({
   default: ({ onSelected, onToggle, onAdd, onReload, selected, expanded, onEditClientConfig }: any) => (
     <div data-testid="ws-editor-command-tree">
       <button onClick={() => onSelected("command:test-command")} data-testid="select-command">
@@ -55,7 +55,7 @@ vi.mock("../../views/workspace/WSEditorCommandTree", () => ({
   CommandTreeNode: {},
 }));
 
-vi.mock("../../views/workspace/WSEditorCommandGroupContent", () => ({
+vi.mock("../../views/workspace/components/WSEditorCommandGroupContent", () => ({
   default: ({ commandGroup, onUpdateCommandGroup }: any) => (
     <div data-testid="ws-editor-command-group-content">
       <span data-testid="command-group-id">{commandGroup.id}</span>
@@ -70,7 +70,7 @@ vi.mock("../../views/workspace/WSEditorCommandGroupContent", () => ({
   ResponseCommandGroups: {},
 }));
 
-vi.mock("../../views/workspace/WSEditorCommandContent", () => ({
+vi.mock("../../views/workspace/components/WSEditorCommandContent", () => ({
   default: ({ previewCommand, onUpdateCommand }: any) => (
     <div data-testid="ws-editor-command-content">
       <span data-testid="command-id">{previewCommand.id}</span>
@@ -85,7 +85,7 @@ vi.mock("../../views/workspace/WSEditorCommandContent", () => ({
   ResponseCommand: {},
 }));
 
-vi.mock("../../views/workspace/WSEditorSwaggerPicker", () => ({
+vi.mock("../../views/workspace/components/WSEditorSwaggerPicker", () => ({
   default: ({ plane, workspaceName, onClose }: any) => (
     <div data-testid="ws-editor-swagger-picker">
       <span data-testid="picker-plane">{plane}</span>
@@ -100,7 +100,7 @@ vi.mock("../../views/workspace/WSEditorSwaggerPicker", () => ({
   ),
 }));
 
-vi.mock("../../views/workspace/WSEditorClientConfig", () => ({
+vi.mock("../../views/workspace/components/WSEditor/WSEditorClientConfig", () => ({
   default: ({ workspaceUrl, open, onClose }: any) =>
     open ? (
       <div data-testid="ws-editor-client-config-dialog">

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

@@ -1,8 +1,8 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
+import { describe, it, expect, beforeEach, vi } from "vitest";
 import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render } from "../test-utils";
-import WSEditorClientConfigDialog from "../../views/workspace/WSEditorClientConfig";
+import WSEditorClientConfigDialog from "../../views/workspace/components/WSEditor/WSEditorClientConfig";
 import { workspaceApi, specsApi, errorHandlerApi } from "../../services";
 
 vi.mock("../../services", () => ({

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

@@ -1,8 +1,8 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { fireEvent, screen } from "@testing-library/react";
-import WSEditorCommandArgumentsContent from "../../views/workspace/WSEditorCommandArgumentsContent";
-import type { CMDArg, ClsArgDefinitionMap } from "../../views/workspace/WSEditorCommandArgumentsContent";
+import WSEditorCommandArgumentsContent from "../../views/workspace/components/WSEditorCommandArgumentsContent/WSEditorCommandArgumentsContent";
 import { render } from "../test-utils";
+import { ClsArgDefinitionMap, CMDArg } from "../../views/workspace/components/WSEditorCommandArgumentsContent";
 
 vi.mock("../../services/commandApi");
 vi.mock("../../services/errorHandlerApi");

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

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { fireEvent, screen, waitFor, within } from "@testing-library/react";
-import WSEditorCommandContent from "../../views/workspace/WSEditorCommandContent";
-import type { Command, Example, Resource } from "../../views/workspace/WSEditorCommandContent";
+import WSEditorCommandContent from "../../views/workspace/components/WSEditorCommandContent";
+import type { Command, Example, Resource } from "../../views/workspace/interfaces";
 import { render } from "../test-utils";
 import { commandApi } from "../../services/commandApi";
 

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

@@ -1,7 +1,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/WSEditorCommandGroupContent";
+import WSEditorCommandGroupContent from "../../views/workspace/components/WSEditorCommandGroupContent/WSEditorCommandGroupContent";
 import * as commandApi from "../../services/commandApi";
 
 interface CommandGroup {

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

@@ -1,7 +1,10 @@
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { vi } from "vitest";
-import WSEditorCommandTree, { CommandTreeNode, CommandTreeLeaf } from "../../views/workspace/WSEditorCommandTree";
+import WSEditorCommandTree, {
+  CommandTreeNode,
+  CommandTreeLeaf,
+} from "../../views/workspace/components/WSEditor/WSEditorCommandTree";
 
 describe("WSEditorCommandTree", () => {
   const mockLeaf: CommandTreeLeaf = {

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

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { fireEvent, screen, waitFor } from "@testing-library/react";
-import WSEditorSwaggerPicker, { SwaggerItemSelector } from "../../views/workspace/WSEditorSwaggerPicker";
+import WSEditorSwaggerPicker from "../../views/workspace/components/WSEditorSwaggerPicker";
+import SwaggerItemSelector from "../../views/workspace/common/SwaggerItemSelector";
 import { render } from "../test-utils";
 import { workspaceApi, specsApi } from "../../services";
 
@@ -210,6 +211,71 @@ describe("WSEditorSwaggerPicker", () => {
         expect(vi.mocked(workspaceApi).getWorkspaceResourcesByName).toHaveBeenCalledWith("test-workspace");
       });
     });
+
+    it("calls getResourceProvidersWithType with type=OpenAPI parameter", async () => {
+      render(<WSEditorSwaggerPicker {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(vi.mocked(specsApi).getResourceProvidersWithType).toHaveBeenCalledWith(
+          "/Swagger/Specs/ResourceManagement/microsoft.storage",
+          "Swagger",
+        );
+      });
+    });
+
+    it("passes sourceOverride parameter when loading resource providers", async () => {
+      vi.mocked(workspaceApi).getSwaggerDefault.mockResolvedValue({
+        ...mockSwaggerDefault,
+        source: "TypeSpec",
+      });
+
+      render(<WSEditorSwaggerPicker {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(vi.mocked(specsApi).getResourceProvidersWithType).toHaveBeenCalledWith(
+          "/Swagger/Specs/ResourceManagement/microsoft.storage",
+          "TypeSpec",
+        );
+      });
+    });
+
+    it("reloads resources when existingResources change", async () => {
+      const { rerender } = render(<WSEditorSwaggerPicker {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(vi.mocked(specsApi).getResourceProvidersWithType).toHaveBeenCalledTimes(1);
+      });
+
+      const newMockWorkspaceResources = [
+        ...mockWorkspaceResources,
+        {
+          id: "/subscriptions/{subscriptionId}/resourceGroups/{resourceGroupName}/providers/Microsoft.Storage/storageAccounts/{accountName}/blobServices/default",
+        },
+      ];
+      vi.mocked(workspaceApi).getWorkspaceResourcesByName.mockResolvedValue(newMockWorkspaceResources);
+
+      rerender(<WSEditorSwaggerPicker {...defaultProps} />);
+
+      expect(vi.mocked(specsApi).getResourceProvidersWithType).toHaveBeenCalledWith(
+        "/Swagger/Specs/ResourceManagement/microsoft.storage",
+        "Swagger",
+      );
+    });
+
+    it("correctly filters existing resources when displaying available options", async () => {
+      const availableResources = [mockResources[0], mockResources[1]];
+      vi.mocked(specsApi).getProviderResources.mockResolvedValue(availableResources);
+
+      render(<WSEditorSwaggerPicker {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(vi.mocked(workspaceApi).getWorkspaceResourcesByName).toHaveBeenCalledWith("test-workspace");
+      });
+
+      await waitFor(() => {
+        expect(vi.mocked(specsApi).getProviderResources).toHaveBeenCalled();
+      });
+    });
   });
 
   describe("Resource Selection", () => {
@@ -490,6 +556,125 @@ describe("WSEditorSwaggerPicker", () => {
     });
   });
 
+  describe("API Type Parameter Handling", () => {
+    it("includes type=OpenAPI parameter for Swagger sources", async () => {
+      vi.mocked(workspaceApi).getSwaggerDefault.mockResolvedValue({
+        ...mockSwaggerDefault,
+        source: "Swagger",
+      });
+
+      render(<WSEditorSwaggerPicker {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(vi.mocked(specsApi).getResourceProvidersWithType).toHaveBeenCalledWith(
+          "/Swagger/Specs/ResourceManagement/microsoft.storage",
+          "Swagger",
+        );
+      });
+    });
+
+    it("includes type=TypeSpec parameter for TypeSpec sources", async () => {
+      vi.mocked(workspaceApi).getSwaggerDefault.mockResolvedValue({
+        ...mockSwaggerDefault,
+        source: "TypeSpec",
+      });
+
+      render(<WSEditorSwaggerPicker {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(vi.mocked(specsApi).getResourceProvidersWithType).toHaveBeenCalledWith(
+          "/Swagger/Specs/ResourceManagement/microsoft.storage",
+          "TypeSpec",
+        );
+      });
+    });
+
+    it("uses default source when no source override is available", async () => {
+      vi.mocked(workspaceApi).getSwaggerDefault.mockResolvedValue({
+        ...mockSwaggerDefault,
+        source: undefined,
+      });
+
+      render(<WSEditorSwaggerPicker {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(vi.mocked(specsApi).getResourceProvidersWithType).toHaveBeenCalledWith(
+          "/Swagger/Specs/ResourceManagement/microsoft.storage",
+          undefined,
+        );
+      });
+    });
+  });
+
+  describe("Existing Resources State Management", () => {
+    it("reloads resources when existing workspace resources change", async () => {
+      render(<WSEditorSwaggerPicker {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(vi.mocked(specsApi).getResourceProvidersWithType).toHaveBeenCalledTimes(1);
+      });
+
+      expect(vi.mocked(specsApi).getResourceProvidersWithType).toHaveBeenCalledWith(
+        "/Swagger/Specs/ResourceManagement/microsoft.storage",
+        "Swagger",
+      );
+    });
+
+    it("prevents duplicate resources from appearing in selector", async () => {
+      const duplicateResource = {
+        id: "/subscriptions/{subscriptionId}/resourceGroups/{resourceGroupName}/providers/Microsoft.Storage/storageAccounts/{accountName}",
+      };
+
+      vi.mocked(workspaceApi).getWorkspaceResourcesByName.mockResolvedValue([duplicateResource]);
+      vi.mocked(specsApi).getProviderResources.mockResolvedValue([
+        {
+          ...mockResources[0],
+          id: duplicateResource.id,
+        },
+        mockResources[1],
+      ]);
+
+      render(<WSEditorSwaggerPicker {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(vi.mocked(workspaceApi).getWorkspaceResourcesByName).toHaveBeenCalledWith("test-workspace");
+      });
+
+      await waitFor(() => {
+        expect(vi.mocked(specsApi).getProviderResources).toHaveBeenCalled();
+      });
+    });
+
+    it("handles empty workspace resources correctly", async () => {
+      vi.mocked(workspaceApi).getWorkspaceResourcesByName.mockResolvedValue([]);
+
+      render(<WSEditorSwaggerPicker {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(vi.mocked(workspaceApi).getWorkspaceResourcesByName).toHaveBeenCalledWith("test-workspace");
+      });
+
+      await waitFor(() => {
+        expect(vi.mocked(specsApi).getResourceProvidersWithType).toHaveBeenCalledWith(
+          "/Swagger/Specs/ResourceManagement/microsoft.storage",
+          "Swagger",
+        );
+      });
+    });
+
+    it("validates existingResources dependency in useCallback", async () => {
+      render(<WSEditorSwaggerPicker {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(vi.mocked(workspaceApi).getWorkspaceResourcesByName).toHaveBeenCalledWith("test-workspace");
+      });
+
+      await waitFor(() => {
+        expect(vi.mocked(specsApi).getResourceProvidersWithType).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+
   describe("Close Functionality", () => {
     it("calls onClose when close button is clicked", async () => {
       const onCloseMock = vi.fn();

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

@@ -1,8 +1,8 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
+import { describe, it, expect, beforeEach, vi } from "vitest";
 import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render } from "../test-utils";
-import WorkspaceSelector from "../../views/workspace/WorkspaceSelector";
+import WorkspaceSelector from "../../views/workspace/components/WorkspaceInstruction/WorkspaceSelector";
 import { workspaceApi } from "../../services";
 
 vi.mock("../../services", () => ({
@@ -298,4 +298,38 @@ describe("Workspace Management", () => {
       expect(result).toEqual(expectedResult);
     });
   });
+
+  describe("WorkspaceCreateDialog Component", () => {
+    it("should pre-select the first plane after planes are loaded in the create dialog", async () => {
+      const user = userEvent.setup();
+      const mockPlanes = [
+        { name: "MgmtClient", displayName: "Control plane", moduleOptions: ["mod1", "mod2"] },
+        { name: "DataPlaneClient", displayName: "Data plane", moduleOptions: ["mod3"] },
+      ];
+      const { specsApi } = await import("../../services");
+      (specsApi.getPlanes as any).mockResolvedValue(mockPlanes);
+
+      render(<WorkspaceSelector name="Select Workspace" />);
+
+      await waitFor(() => {
+        expect(workspaceApi.getWorkspaces).toHaveBeenCalled();
+      });
+
+      const autocomplete = screen.getByLabelText("Select Workspace");
+      await user.click(autocomplete);
+      await user.type(autocomplete, "new-test-workspace");
+
+      const createOption = await screen.findByText('Create "new-test-workspace"');
+      await user.click(createOption);
+
+      await screen.findByText("Create a new workspace");
+
+      await waitFor(() => {
+        expect(specsApi.getPlanes).toHaveBeenCalled();
+      });
+
+      const planeDropdown = await screen.findByLabelText(/Plane/i);
+      expect(planeDropdown).toHaveValue("Control plane");
+    });
+  });
 });