Change form schema and address feedback

cypress/integration/distroSettings/provider_section.ts

@@ -9,59 +9,44 @@ describe("provider section", () => {
     it("successfully updates static provider fields", () => {
       cy.dataCy("provider-select").contains("Static IP/VM");
 
-      // Correct fields are displayed
-      cy.dataCy("provider-settings").within(() => {
-        cy.get("button").should("have.length", 1);
-        cy.get("textarea").should("have.length", 1);
-        cy.get("input[type=checkbox]").should("have.length", 1);
-        cy.get("input[type=text]").should("have.length", 0);
-      });
+      // Correct section is displayed.
+      cy.dataCy("static-provider-settings").should("exist");
 
+      // Change field values.
       cy.getInputByLabel("User Data").type("my user data");
       cy.getInputByLabel("Merge with existing user data").check({
         force: true,
       });
       cy.contains("button", "Add security group").click();
       cy.getInputByLabel("Security Group ID").type("group-1234");
-
       save();
       cy.validateToast("success");
 
+      // Revert fields to original values.
       cy.getInputByLabel("User Data").clear();
       cy.getInputByLabel("Merge with existing user data").uncheck({
         force: true,
       });
       cy.dataCy("delete-item-button").click();
-
       save();
       cy.validateToast("success");
     });
   });
 
-  describe.only("docker", () => {
+  describe("docker", () => {
     beforeEach(() => {
       cy.visit("/distro/ubuntu1604-container-test/settings/provider");
     });
 
     it("successfully updates docker provider fields", () => {
       cy.dataCy("provider-select").contains("Docker");
 
-      // Correct fields are displayed
-      cy.dataCy("provider-settings").within(() => {
-        cy.getInputByLabel("Docker Image URL").should("exist");
-        cy.getInputByLabel("Image Build Method").should("exist");
-        cy.getInputByLabel("Username for Registries").should("exist");
-        cy.getInputByLabel("Password for Registries").should("exist");
-        cy.getInputByLabel("Container Pool ID").should("exist");
-        cy.getInputByLabel("Pool Mapping Information").should("exist");
-        cy.getInputByLabel("User Data").should("exist");
-        cy.getInputByLabel("Merge with existing user data").should("exist");
-        cy.contains("button", "Add security group").should("exist");
-      });
+      // Correct section is displayed.
+      cy.dataCy("docker-provider-settings").should("exist");
 
       // Change field values.
       cy.selectLGOption("Image Build Method", "Pull");
-      cy.selectLGOption("Container Pool ID", /^test-pool$/);
+      cy.selectLGOption("Container Pool ID", "test-pool-2");
       cy.getInputByLabel("Username for Registries").type("username");
       cy.getInputByLabel("Password for Registries").type("password");
       cy.getInputByLabel("User Data").type("my user data");
@@ -73,14 +58,13 @@ describe("provider section", () => {
 
       // Revert fields to original values.
       cy.selectLGOption("Image Build Method", "Import");
-      cy.selectLGOption("Container Pool ID", "ubuntu-test-pool");
+      cy.selectLGOption("Container Pool ID", "test-pool-1");
       cy.getInputByLabel("Username for Registries").clear();
       cy.getInputByLabel("Password for Registries").clear();
       cy.getInputByLabel("User Data").clear();
       cy.getInputByLabel("Merge with existing user data").uncheck({
         force: true,
       });
-
       save();
       cy.validateToast("success");
     });

src/components/Header/Navbar.tsx

@@ -13,7 +13,7 @@ import { getCommitsRoute, getUserPatchesRoute, routes } from "constants/routes";
 import { size } from "constants/tokens";
 import { useAuthStateContext } from "context/auth";
 import { UserQuery, SpruceConfigQuery } from "gql/generated/types";
-import { GET_USER, GET_SPRUCE_CONFIG } from "gql/queries";
+import { GET_USER, SPRUCE_CONFIG } from "gql/queries";
 import { useLegacyUIURL } from "hooks";
 import { AuxiliaryDropdown } from "./AuxiliaryDropdown";
 import { UserDropdown } from "./UserDropdown";
@@ -43,7 +43,7 @@ export const Navbar: React.FC = () => {
 
   const currProject = projectFromUrl ?? Cookies.get(CURRENT_PROJECT);
 
-  const { data: configData } = useQuery<SpruceConfigQuery>(GET_SPRUCE_CONFIG, {
+  const { data: configData } = useQuery<SpruceConfigQuery>(SPRUCE_CONFIG, {
     skip: currProject !== undefined,
   });
 

src/constants/fieldMaps.ts

@@ -167,13 +167,6 @@ export const timeZones = [
   },
 ];
 
-export const awsRegions = [
-  {
-    str: "US-East-1",
-    value: "us-east-1",
-  },
-];
-
 const listOfDateFormatStrings = [
   "MM-dd-yyyy",
   "dd-MM-yyyy",

src/gql/mocks/getSpruceConfig.ts

@@ -2,15 +2,15 @@ import {
   SpruceConfigQuery,
   SpruceConfigQueryVariables,
 } from "gql/generated/types";
-import { GET_SPRUCE_CONFIG } from "gql/queries";
+import { SPRUCE_CONFIG } from "gql/queries";
 import { ApolloMock } from "types/gql";
 
 export const getSpruceConfigMock: ApolloMock<
   SpruceConfigQuery,
   SpruceConfigQueryVariables
 > = {
   request: {
-    query: GET_SPRUCE_CONFIG,
+    query: SPRUCE_CONFIG,
     variables: {},
   },
   result: {

src/gql/queries/index.ts

@@ -70,7 +70,7 @@ import PROJECT_HEALTH_VIEW from "./project-health-view.graphql";
 import GET_PROJECT_PATCHES from "./project-patches.graphql";
 import GET_SPAWN_EXPIRATION_INFO from "./spawn-expiration.graphql";
 import GET_SPAWN_TASK from "./spawn-task.graphql";
-import GET_SPRUCE_CONFIG from "./spruce-config.graphql";
+import SPRUCE_CONFIG from "./spruce-config.graphql";
 import GET_SUBNET_AVAILABILITY_ZONES from "./subnet-availability-zones.graphql";
 import TASK_QUEUE_DISTROS from "./task-queue-distros.graphql";
 import USER_DISTRO_SETTINGS_PERMISSIONS from "./user-distro-settings-permissions.graphql";
@@ -131,7 +131,7 @@ export {
   GET_REPO_SETTINGS,
   GET_SPAWN_EXPIRATION_INFO,
   GET_SPAWN_TASK,
-  GET_SPRUCE_CONFIG,
+  SPRUCE_CONFIG,
   GET_SUBNET_AVAILABILITY_ZONES,
   GET_SYSTEM_LOGS,
   GET_TASK_ALL_EXECUTIONS,

src/hooks/useSpruceConfig.ts

@@ -3,11 +3,11 @@ import {
   SpruceConfigQuery,
   SpruceConfigQueryVariables,
 } from "gql/generated/types";
-import { GET_SPRUCE_CONFIG } from "gql/queries";
+import { SPRUCE_CONFIG } from "gql/queries";
 
 export const useSpruceConfig = () => {
   const { data } = useQuery<SpruceConfigQuery, SpruceConfigQueryVariables>(
-    GET_SPRUCE_CONFIG
+    SPRUCE_CONFIG
   );
 
   const { spruceConfig } = data || {};

src/pages/commits/index.tsx

@@ -29,7 +29,7 @@ import {
   MainlineCommitsQueryVariables,
   ProjectHealthView,
 } from "gql/generated/types";
-import { GET_MAINLINE_COMMITS, GET_SPRUCE_CONFIG } from "gql/queries";
+import { GET_MAINLINE_COMMITS, SPRUCE_CONFIG } from "gql/queries";
 import {
   usePageTitle,
   usePolling,
@@ -77,7 +77,7 @@ const Commits = () => {
   const { data: spruceData } = useQuery<
     SpruceConfigQuery,
     SpruceConfigQueryVariables
-  >(GET_SPRUCE_CONFIG, {
+  >(SPRUCE_CONFIG, {
     skip: !!projectIdentifier || !!recentlySelectedProject,
   });
 

src/pages/distroSettings/tabs/ProviderTab/ProviderTab.tsx

@@ -5,25 +5,28 @@ import { useDistroSettingsContext } from "pages/distroSettings/Context";
 import { omitTypename } from "utils/string";
 import { BaseTab } from "../BaseTab";
 import { getFormSchema } from "./getFormSchema";
-import { TabProps } from "./types";
+import { TabProps, ProviderFormState } from "./types";
 
 export const ProviderTab: React.FC<TabProps> = ({ distroData }) => {
   const initialFormState = distroData;
 
   const { getTab } = useDistroSettingsContext();
-  const { formData } = getTab(DistroSettingsTabRoutes.Provider);
+  // @ts-expect-error - see TabState for details.
+  const { formData }: { formData: ProviderFormState } = getTab(
+    DistroSettingsTabRoutes.Provider
+  );
 
   const { containerPools } = useSpruceConfig();
-  const { pools = [] } = containerPools || {};
+  const { pools } = containerPools || {};
 
-  const selectedPoolId = formData?.providerSettings?.containerPoolId;
-  const selectedPool = pools.find((p) => p.id === selectedPoolId) ?? null;
+  const selectedPoolId = formData?.dockerProviderSettings?.containerPoolId;
+  const selectedPool = pools?.find((p) => p.id === selectedPoolId) ?? null;
   const poolMappingInfo = selectedPool
     ? JSON.stringify(omitTypename(selectedPool), null, 4)
     : "";
 
   const formSchema = useMemo(
-    () => getFormSchema({ pools, poolMappingInfo }),
+    () => getFormSchema({ pools: pools || [], poolMappingInfo }),
     [pools, poolMappingInfo]
   );
 

src/pages/distroSettings/tabs/ProviderTab/getFormSchema.ts

@@ -61,14 +61,10 @@ export const getFormSchema = ({
                   },
                 },
               },
-              providerSettings: {
+              staticProviderSettings: {
                 type: "object" as "object",
                 title: "",
-                properties: {
-                  userData: staticProviderSettings.userData,
-                  mergeUserData: staticProviderSettings.mergeUserData,
-                  securityGroups: staticProviderSettings.securityGroups,
-                },
+                properties: staticProviderSettings,
               },
             },
           },
@@ -81,7 +77,7 @@ export const getFormSchema = ({
                   },
                 },
               },
-              providerSettings: {
+              dockerProviderSettings: {
                 type: "object" as "object",
                 title: "",
                 properties: {
@@ -119,8 +115,20 @@ export const getFormSchema = ({
         "ui:data-cy": "provider-select",
       },
     },
-    providerSettings: {
-      "ui:data-cy": "provider-settings",
+    staticProviderSettings: {
+      "ui:data-cy": "static-provider-settings",
+      "ui:ObjectFieldTemplate": CardFieldTemplate,
+      userData: {
+        "ui:widget": "textarea",
+        "ui:elementWrapperCSS": textAreaCSS,
+      },
+      securityGroups: {
+        "ui:addButtonText": "Add security group",
+        "ui:orderable": false,
+      },
+    },
+    dockerProviderSettings: {
+      "ui:data-cy": "docker-provider-settings",
       "ui:ObjectFieldTemplate": CardFieldTemplate,
       userData: {
         "ui:widget": "textarea",

src/pages/distroSettings/tabs/ProviderTab/transformerUtils.ts

@@ -1,3 +1,5 @@
+import { BuildType } from "./types";
+
 type FieldGetter = (providerSettings: Record<string, any>) => {
   form: Record<string, any>;
   gql: Record<string, any>;
@@ -41,7 +43,7 @@ const getImageUrl = ((providerSettings) => ({
 
 const getBuildType = ((providerSettings) => ({
   form: {
-    buildType: providerSettings.build_type ?? "",
+    buildType: (providerSettings.build_type ?? "") as BuildType,
   },
   gql: {
     build_type: providerSettings.buildType,
@@ -77,13 +79,11 @@ export const staticProviderSettings = ((providerSettings = {}) => {
       ...mergeUserData.form,
       ...securityGroups.form,
     },
-    gql: [
-      {
-        ...userData.gql,
-        ...mergeUserData.gql,
-        ...securityGroups.gql,
-      },
-    ],
+    gql: {
+      ...userData.gql,
+      ...mergeUserData.gql,
+      ...securityGroups.gql,
+    },
   };
 }) satisfies FieldGetter;
 
@@ -106,16 +106,14 @@ export const dockerProviderSettings = ((providerSettings = {}) => {
       ...mergeUserData.form,
       ...securityGroups.form,
     },
-    gql: [
-      {
-        ...imageUrl.gql,
-        ...buildType.gql,
-        ...registryUser.gql,
-        ...registryPassword.gql,
-        ...userData.gql,
-        ...mergeUserData.gql,
-        ...securityGroups.gql,
-      },
-    ],
+    gql: {
+      ...imageUrl.gql,
+      ...buildType.gql,
+      ...registryUser.gql,
+      ...registryPassword.gql,
+      ...userData.gql,
+      ...mergeUserData.gql,
+      ...securityGroups.gql,
+    },
   };
 }) satisfies FieldGetter;