[Refactor]: add api clients and refactor components

src/web/src/services/cliApi.ts

@@ -0,0 +1,49 @@
+import axios from "axios";
+
+export const cliApi = {
+  getCliProfiles: async (): Promise<string[]> => {
+    const res = await axios.get(`/CLI/Az/Profiles`);
+    return res.data;
+  },
+
+  getCliModules: async (repoName: string): Promise<any[]> => {
+    const res = await axios.get(`/CLI/Az/${repoName}/Modules`);
+    return res.data;
+  },
+
+  createCliModule: async (repoName: string, moduleName: string): Promise<any> => {
+    const res = await axios.post(`/CLI/Az/${repoName}/Modules`, { name: moduleName });
+    return res.data;
+  },
+
+  getCliModule: async (repoName: string, moduleName: string): Promise<any> => {
+    const res = await axios.get(`/CLI/Az/${repoName}/Modules/${moduleName}`);
+    return res.data;
+  },
+
+  getSpecsCommand: async (names: string[]): Promise<any> => {
+    const res = await axios.get(
+      `/AAZ/Specs/CommandTree/Nodes/aaz/${names.slice(0, -1).join("/")}/Leaves/${names[names.length - 1]}`,
+    );
+    return res.data;
+  },
+
+  retrieveCommands: async (namesList: string[][]): Promise<any[]> => {
+    const namesListData = namesList.map((names) => ["aaz", ...names]);
+    const res = await axios.post(`/AAZ/Specs/CommandTree/Nodes/Leaves`, namesListData);
+    return res.data;
+  },
+
+  getSimpleCommandTree: async (): Promise<any> => {
+    const res = await axios.get(`/AAZ/Specs/CommandTree/Simple`);
+    return res.data;
+  },
+
+  updateCliModule: async (repoName: string, moduleName: string, data: any): Promise<void> => {
+    await axios.put(`/CLI/Az/${repoName}/Modules/${moduleName}`, data);
+  },
+
+  patchCliModule: async (repoName: string, moduleName: string, data: any): Promise<void> => {
+    await axios.patch(`/CLI/Az/${repoName}/Modules/${moduleName}`, data);
+  },
+} as const;

src/web/src/services/commandApi.ts

@@ -0,0 +1,104 @@
+import axios from "axios";
+
+export const commandApi = {
+  getCommand: async (leafUrl: string): Promise<any> => {
+    const res = await axios.get(leafUrl);
+    return res.data;
+  },
+
+  getCommandsForResource: async (resourceUrl: string): Promise<any[]> => {
+    const res = await axios.get(`${resourceUrl}/Commands`);
+    return res.data;
+  },
+
+  deleteResource: async (resourceUrl: string): Promise<void> => {
+    await axios.delete(resourceUrl);
+  },
+
+  updateCommand: 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;
+  },
+
+  updateCommandExamples: 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,
+    }));
+  },
+
+  addSubcommands: async (resourceUrl: string, data: any): Promise<void> => {
+    await axios.post(resourceUrl, data);
+  },
+
+  updateCommandOutputs: 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> => {
+    await axios.patch(argumentUrl, data);
+  },
+
+  updateArgumentById: async (argId: string, data: any): Promise<void> => {
+    await axios.patch(argId, data);
+  },
+
+  flattenArgument: async (flattenUrl: string, data?: any): Promise<void> => {
+    if (data) {
+      await axios.post(flattenUrl, data);
+    } else {
+      await axios.post(flattenUrl);
+    }
+  },
+
+  unwrapClassArgument: async (flattenUrl: string): Promise<void> => {
+    await axios.post(flattenUrl);
+  },
+
+  deleteCommandGroup: async (nodeUrl: string): Promise<void> => {
+    await axios.delete(nodeUrl);
+  },
+
+  updateCommandGroup: async (
+    nodeUrl: string,
+    data: { help: { short: string; lines: string[] }; stage: string },
+  ): Promise<any> => {
+    const res = await axios.patch(nodeUrl, data);
+    return res.data;
+  },
+
+  renameCommandGroup: async (nodeUrl: string, name: string): Promise<any> => {
+    const res = await axios.post(`${nodeUrl}/Rename`, { name });
+    return res.data;
+  },
+
+  findSimilarArguments: async (commandUrl: string, argVar: string): Promise<any> => {
+    const similarUrl = `${commandUrl}/Arguments/${argVar}/FindSimilar`;
+    const res = await axios.post(similarUrl);
+    return res.data;
+  },
+
+  createSubresource: async (
+    subresourceUrl: string,
+    data: {
+      commandGroupName: string;
+      refArgsOptions: { [argVar: string]: string[] };
+      arg: string;
+    },
+  ): Promise<any> => {
+    const response = await axios.post(subresourceUrl, data);
+    return response.data;
+  },
+} as const;

src/web/src/services/errorHandlerApi.ts

@@ -0,0 +1,29 @@
+export const errorHandlerApi = {
+  getErrorMessage: (err: any): string => {
+    console.log("err: ", err);
+
+    if (err.response?.data?.message) {
+      const data = err.response.data;
+      const details = data.details ? `: ${JSON.stringify(data.details)}` : "";
+      return `ResponseError: ${data.message}${details}`;
+    }
+
+    if (err instanceof Error && err.message) {
+      return err.message;
+    }
+
+    if (err && typeof err === "object" && err.message) {
+      return err.message;
+    }
+
+    if (typeof err === "string") {
+      return err;
+    }
+
+    return "An unexpected error occurred";
+  },
+
+  isHttpError: (err: any, statusCode: number): boolean => {
+    return err.response?.status === statusCode;
+  },
+} as const;

src/web/src/services/index.ts

@@ -0,0 +1,5 @@
+export { workspaceApi, type Workspace, type CreateWorkspaceData, type ClientConfig } from "./workspaceApi";
+export { specsApi, specsHelper, type Plane, type Resource } from "./specsApi";
+export { commandApi } from "./commandApi";
+export { errorHandlerApi } from "./errorHandlerApi";
+export { cliApi } from "./cliApi";

src/web/src/services/specsApi.ts

@@ -0,0 +1,86 @@
+import axios from "axios";
+
+export interface Plane {
+  name: string;
+  displayName: string;
+  moduleOptions?: string[];
+}
+
+export interface Resource {
+  id: string;
+  version: string;
+}
+
+export const specsApi = {
+  getPlanes: async (): Promise<Plane[]> => {
+    const res = await axios.get(`/AAZ/Specs/Planes`);
+    return res.data.map((v: any) => ({
+      name: v.name,
+      displayName: v.displayName,
+      moduleOptions: undefined,
+    }));
+  },
+
+  getPlaneNames: async (): Promise<string[]> => {
+    const res = await axios.get(`/AAZ/Specs/Planes`);
+    return res.data.map((v: any) => v.name);
+  },
+
+  getModulesForPlane: async (planeName: string): Promise<string[]> => {
+    const res = await axios.get(`/Swagger/Specs/${planeName}`);
+    return res.data.map((v: any) => v.url);
+  },
+
+  getResourceProviders: async (moduleUrl: string): Promise<string[]> => {
+    const res = await axios.get(`${moduleUrl}/ResourceProviders`);
+    return res.data.map((v: any) => v.url);
+  },
+
+  getResources: async (resourceProviderUrl: string): Promise<Resource[]> => {
+    const res = await axios.get(`${resourceProviderUrl}/Resources`);
+    return res.data;
+  },
+
+  getSwaggerModules: async (plane: string): Promise<string[]> => {
+    const res = await axios.get(`/Swagger/Specs/${plane}`);
+    return res.data.map((v: any) => v.url);
+  },
+
+  getResourceProvidersWithType: async (moduleUrl: string, type?: string): Promise<string[]> => {
+    let url = `${moduleUrl}/ResourceProviders`;
+    if (type) {
+      url += `?type=${type}`;
+    }
+    const res = await axios.get(url);
+    return res.data.map((v: any) => v.url);
+  },
+
+  getProviderResources: async (resourceProviderUrl: string): Promise<any> => {
+    const res = await axios.get(`${resourceProviderUrl}/Resources`);
+    return res.data;
+  },
+
+  filterResourcesByPlane: async (plane: string, resourceIds: string[]): Promise<any> => {
+    const filterBody = { resources: resourceIds };
+    const res = await axios.post(`/AAZ/Specs/Resources/${plane}/Filter`, filterBody);
+    return res.data;
+  },
+} as const;
+
+export const specsHelper = {
+  removeCommonPrefix: (options: string[], prefix: string): string[] => {
+    return options.map((option) => option.replace(prefix, ""));
+  },
+
+  isClientConfigurablePlane: async (planeName: string): Promise<boolean> => {
+    const planeNames = await specsApi.getPlaneNames();
+    return !planeNames.includes(planeName);
+  },
+
+  buildResourceProviderUrl: (plane: string, modNames: string[], rpName: string, source: string): string => {
+    const basePath = `/Swagger/Specs/${plane}/${modNames.join("/")}`;
+    const resourceProviderPath = `/ResourceProviders/${rpName}`;
+    const suffix = source.toLowerCase() === "typespec" ? "/TypeSpec" : "";
+    return `${basePath}${resourceProviderPath}${suffix}`;
+  },
+} as const;