Corrected onboarding state saving

dashboard/src/main/home/onboarding/components/ProviderSelector.tsx

@@ -157,7 +157,7 @@ const Block = styled.div<{ disabled?: boolean }>`
   font-weight: 500;
   padding: 3px 0px 5px;
   flex-direction: column;
-  align-item: center;
+  align-items: center;
   justify-content: space-between;
   height: 170px;
   cursor: ${(props) => (props.disabled ? "" : "pointer")};

dashboard/src/main/home/onboarding/state/index.ts

@@ -1,6 +1,6 @@
 import api from "shared/api";
 import { proxy } from "valtio";
-import { Onboarding } from "../types";
+import { CompressedOnboardingState, Onboarding } from "../types";
 import { StateHandler } from "./StateHandler";
 import { Action, StepHandler } from "./StepHandler";
 
@@ -41,124 +41,116 @@ export const OFState = proxy({
           {
             ...state,
           },
-          { project_id: state.project_id }
+          { project_id: OFState.StateHandler?.project?.id }
         )
         .then((res) => console.log(res))
         .catch((err) => console.log(err));
     },
     restoreState: (state: Onboarding) => {
-      const prevState = decompressState(state);
-
-      if (prevState.StepHandler.currentStepName === "clean_up") {
-        return;
-      }
-
-      if (prevState?.StateHandler) {
-        StateHandler.actions.restoreState(prevState.StateHandler);
-      }
-      if (prevState?.StepHandler) {
-        StepHandler.actions.restoreState(prevState.StepHandler);
-      }
+      return;
+      // const prevState = decompressState(state);
+
+      // if (prevState.StepHandler.currentStepName === "clean_up") {
+      //   return;
+      // }
+
+      // if (prevState?.StateHandler) {
+      //   StateHandler.actions.restoreState(prevState.StateHandler);
+      // }
+      // if (prevState?.StepHandler) {
+      //   StepHandler.actions.restoreState(prevState.StepHandler);
+      // }
     },
   },
 });
 
 const compressState = (state: typeof OFState) => {
   const currentStep = state.StepHandler?.currentStepName;
-  const project = state.StateHandler?.project;
   const source = state.StateHandler?.connected_source;
   const registry = state.StateHandler?.connected_registry;
   const provision = state.StateHandler?.provision_resources;
 
-  let onboarding_state: Onboarding = {
+  let onboarding_state: CompressedOnboardingState = {
     current_step: currentStep,
 
-    project_id: project?.id,
-    project_name: project?.name,
-
     connected_source: source,
     skip_registry_connection: registry?.skip,
 
     registry_connection_provider: registry?.provider,
-    registry_connection_credentials_id: registry?.credentials?.id,
-    registry_connection_settings_url:
-      registry?.settings?.gcr_url || registry?.settings?.registry_url,
-    registry_connection_settings_name: registry?.settings?.registry_name,
+    registry_connection_credential_id: registry?.credentials?.id,
+    registry_connection_id: registry?.settings?.registry_connection_id,
 
     skip_resource_provision: provision?.skip,
-    resource_provision_provider: provision?.provider,
-    resource_provision_credentials_id: provision?.credentials?.id,
-    resource_provision_credentials_arn: provision?.credentials?.arn,
-    resource_provision_credentials_region: provision?.credentials?.region,
-
-    resource_provision_settings_cluster_name: provision?.settings?.cluster_name,
-    resource_provision_settings_region: provision?.settings?.region,
-    resource_provision_settings_tier: provision?.settings?.tier,
-    resource_provision_settings_machine_type:
-      provision?.settings?.aws_machine_type,
+    registry_infra_id: undefined,
+    registry_infra_credential_id: provision?.credentials?.id,
+    registry_infra_provider: provision?.provider,
+
+    cluster_infra_id: undefined,
+    cluster_infra_credential_id: provision?.credentials?.id,
+    cluster_infra_provider: provision?.provider,
   };
 
   return onboarding_state;
 };
 
-const decompressState = (prev_state: Onboarding) => {
-  const state: Onboarding = prev_state;
-
-  const step = state.current_step;
-  const project = {
-    id: state.project_id,
-    name: state.project_name,
-  };
-
-  let registry: any = {
-    skip: state.skip_registry_connection,
-    provider: state.registry_connection_provider,
-    credentials: {
-      id: state.registry_connection_credentials_id,
-    },
-    settings: {
-      registry_name: state.registry_connection_settings_name,
-    },
-  };
-
-  if (registry.provider === "gcp") {
-    registry.settings.gcr_url = state.registry_connection_settings_url;
-  } else if (registry.provider === "do") {
-    registry.settings.registry_url = state.registry_connection_settings_url;
-  }
-
-  let provision: any = {
-    skip: state.skip_resource_provision,
-    provider: state.resource_provision_provider,
-    credentials: {
-      id: state.resource_provision_credentials_id,
-    },
-    settings: {
-      cluster_name: state.resource_provision_settings_cluster_name,
-    },
-  };
-
-  if (provision.provider === "gcp") {
-    provision.credentials.region = state.resource_provision_credentials_region;
-  } else if (provision.provider === "aws") {
-    provision.credentials.region = state.resource_provision_credentials_region;
-    provision.credentials.arn = state.resource_provision_credentials_arn;
-    provision.settings.aws_machine_type =
-      state.resource_provision_settings_machine_type;
-  } else if (provision.provider === "do") {
-    provision.settings.tier = state.resource_provision_settings_tier;
-    provision.settings.region = state.resource_provision_settings_region;
-  }
-
-  return {
-    StepHandler: {
-      currentStepName: step,
-    },
-    StateHandler: {
-      project,
-      connected_source: state.connected_source,
-      connected_registry: registry,
-      provision_resources: provision,
-    },
-  };
-};
+// const decompressState = (prev_state: Onboarding) => {
+//   const state: Onboarding = prev_state;
+
+//   const step = state.current_step;
+//   const project = {
+//     id: state.project_id,
+//     name: state.project_name,
+//   };
+
+//   let registry: any = {
+//     skip: state.skip_registry_connection,
+//     provider: state.registry_connection_provider,
+//     credentials: {
+//       id: state.registry_connection_credential_id,
+//     },
+//     settings: {
+//       registry_name: state.registry_connection_settings_name,
+//     },
+//   };
+
+//   if (registry.provider === "gcp") {
+//     registry.settings.gcr_url = state.registry_connection_settings_url;
+//   } else if (registry.provider === "do") {
+//     registry.settings.registry_url = state.registry_connection_settings_url;
+//   }
+
+//   let provision: any = {
+//     skip: state.skip_resource_provision,
+//     provider: state.resource_provision_provider,
+//     credentials: {
+//       id: state.resource_provision_credentials_id,
+//     },
+//     settings: {
+//       cluster_name: state.resource_provision_settings_cluster_name,
+//     },
+//   };
+
+//   if (provision.provider === "gcp") {
+//     provision.credentials.region = state.resource_provision_credentials_region;
+//   } else if (provision.provider === "aws") {
+//     provision.credentials.region = state.resource_provision_credentials_region;
+//     provision.credentials.arn = state.resource_provision_credentials_arn;
+//     provision.settings.aws_machine_type =
+//       state.resource_provision_settings_machine_type;
+//   } else if (provision.provider === "do") {
+//     provision.settings.tier = state.resource_provision_settings_tier;
+//     provision.settings.region = state.resource_provision_settings_region;
+//   }
+
+//   return {
+//     StepHandler: {
+//       currentStepName: step,
+//     },
+//     StateHandler: {
+//       project,
+//       connected_source: state.connected_source,
+//       connected_registry: registry,
+//       provision_resources: provision,
+//     },
+//   };
+// };

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/_AWSRegistryForm.tsx

@@ -165,18 +165,21 @@ export const SettingsForm: React.FC<{
       return;
     }
     try {
-      await api.connectECRRegistry(
-        "<token>",
-        {
-          name: registryName,
-          aws_integration_id:
-            snap.StateHandler.connected_registry.credentials.id,
-        },
-        { id: project.id }
-      );
+      const data = await api
+        .connectECRRegistry(
+          "<token>",
+          {
+            name: registryName,
+            aws_integration_id:
+              snap.StateHandler.connected_registry.credentials.id,
+          },
+          { id: project.id }
+        )
+        .then((res) => res?.data);
 
       nextFormStep({
         settings: {
+          registry_connection_id: data?.id,
           registry_name: registryName,
         },
       });

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/_DORegistryForm.tsx

@@ -66,17 +66,21 @@ export const SettingsForm: React.FC<{
   const snap = useSnapshot(OFState);
 
   const submit = async () => {
-    await api.connectDORegistry(
-      "<token>",
-      {
-        name: registryName,
-        do_integration_id: snap.StateHandler.connected_registry.credentials.id,
-        url: registryUrl,
-      },
-      { project_id: project.id }
-    );
+    const data = await api
+      .connectDORegistry(
+        "<token>",
+        {
+          name: registryName,
+          do_integration_id:
+            snap.StateHandler.connected_registry.credentials.id,
+          url: registryUrl,
+        },
+        { project_id: project.id }
+      )
+      .then((res) => res?.data);
     nextFormStep({
       settings: {
+        registry_connection_id: data?.id,
         registry_url: registryUrl,
       },
     });

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/_GCPRegistryForm.tsx

@@ -134,21 +134,24 @@ export const SettingsForm: React.FC<{
     setButtonStatus("loading");
 
     try {
-      await api.connectGCRRegistry(
-        "<token>",
-        {
-          name: registryName,
-          gcp_integration_id:
-            snap.StateHandler.connected_registry.credentials.id,
-          url: registryUrl,
-        },
-        {
-          id: project.id,
-        }
-      );
+      const data = await api
+        .connectGCRRegistry(
+          "<token>",
+          {
+            name: registryName,
+            gcp_integration_id:
+              snap.StateHandler.connected_registry.credentials.id,
+            url: registryUrl,
+          },
+          {
+            id: project.id,
+          }
+        )
+        .then((res) => res?.data);
 
       nextFormStep({
         settings: {
+          registry_connection_id: data.id,
           gcr_url: registryUrl,
           registry_name: registryName,
         },

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_AWSProvsionerForm.tsx

@@ -178,14 +178,16 @@ export const SettingsForm: React.FC<{
     console.log("Started provision ECR");
 
     try {
-      await api.provisionECR(
-        "<token>",
-        {
-          aws_integration_id: awsIntegrationId,
-          ecr_name: `${project.name}-registry`,
-        },
-        { id: project.id }
-      );
+      return await api
+        .provisionECR(
+          "<token>",
+          {
+            aws_integration_id: awsIntegrationId,
+            ecr_name: `${project.name}-registry`,
+          },
+          { id: project.id }
+        )
+        .then((res) => res?.data);
     } catch (error) {
       catchError(error);
     }
@@ -193,15 +195,17 @@ export const SettingsForm: React.FC<{
 
   const provisionEKS = async (awsIntegrationId: number) => {
     try {
-      await api.provisionEKS(
-        "<token>",
-        {
-          aws_integration_id: awsIntegrationId,
-          eks_name: clusterName,
-          machine_type: machineType,
-        },
-        { id: project.id }
-      );
+      return await api
+        .provisionEKS(
+          "<token>",
+          {
+            aws_integration_id: awsIntegrationId,
+            eks_name: clusterName,
+            machine_type: machineType,
+          },
+          { id: project.id }
+        )
+        .then((res) => res?.data);
     } catch (error) {
       catchError(error);
     }
@@ -214,14 +218,17 @@ export const SettingsForm: React.FC<{
       return;
     }
     const integrationId = snap.StateHandler.provision_resources.credentials.id;
-
+    let registryProvisionResponse = null;
+    let clusterProvisionResponse = null;
     if (snap.StateHandler.connected_registry.skip) {
-      await provisionECR(integrationId);
+      registryProvisionResponse = await provisionECR(integrationId);
     }
-    await provisionEKS(integrationId);
+    clusterProvisionResponse = await provisionEKS(integrationId);
 
     nextFormStep({
       settings: {
+        registry_infra_id: registryProvisionResponse?.id,
+        cluster_infra_id: clusterProvisionResponse?.id,
         cluster_name: clusterName,
         aws_machine_type: machineType,
       },
@@ -267,9 +274,11 @@ export const Status: React.FC<{
   nextFormStep: () => void;
   project: any;
 }> = ({ nextFormStep, project }) => {
-  return <SharedStatus
-    nextFormStep={nextFormStep}
-    project={project}
-    filter={["eks", "ecr"]}
-  />
-};
+  return (
+    <SharedStatus
+      nextFormStep={nextFormStep}
+      project={project}
+      filter={["eks", "ecr"]}
+    />
+  );
+};

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_DOProvisionerForm.tsx

@@ -1,7 +1,10 @@
 import Helper from "components/form-components/Helper";
 import InputRow from "components/form-components/InputRow";
 import SelectRow from "components/form-components/SelectRow";
-import ProvisionerStatus, { TFModule, TFResource } from "components/ProvisionerStatus";
+import ProvisionerStatus, {
+  TFModule,
+  TFResource,
+} from "components/ProvisionerStatus";
 import SaveButton from "components/SaveButton";
 import { OFState } from "main/home/onboarding/state";
 import { DOProvisionerConfig } from "main/home/onboarding/types";
@@ -98,19 +101,29 @@ export const SettingsForm: React.FC<{
     };
   };
 
+  const catchError = (error: any) => {
+    console.error(error);
+  };
+
   const provisionDOCR = async (integrationId: number, tier: string) => {
     console.log("Provisioning DOCR...");
-    await api.createDOCR(
-      "<token>",
-      {
-        do_integration_id: integrationId,
-        docr_name: project.name,
-        docr_subscription_tier: tier,
-      },
-      {
-        project_id: project.id,
-      }
-    );
+    try {
+      return await api
+        .createDOCR(
+          "<token>",
+          {
+            do_integration_id: integrationId,
+            docr_name: project.name,
+            docr_subscription_tier: tier,
+          },
+          {
+            project_id: project.id,
+          }
+        )
+        .then((res) => res?.data);
+    } catch (error) {
+      catchError(error);
+    }
   };
 
   const provisionDOKS = async (
@@ -119,17 +132,23 @@ export const SettingsForm: React.FC<{
     clusterName: string
   ) => {
     console.log("Provisioning DOKS...");
-    await api.createDOKS(
-      "<token>",
-      {
-        do_integration_id: integrationId,
-        doks_name: clusterName,
-        do_region: region,
-      },
-      {
-        project_id: project.id,
-      }
-    );
+    try {
+      return await api
+        .createDOKS(
+          "<token>",
+          {
+            do_integration_id: integrationId,
+            doks_name: clusterName,
+            do_region: region,
+          },
+          {
+            project_id: project.id,
+          }
+        )
+        .then((res) => res?.data);
+    } catch (error) {
+      catchError(error);
+    }
   };
 
   const submit = async () => {
@@ -140,17 +159,25 @@ export const SettingsForm: React.FC<{
       return;
     }
     const integrationId = snap.StateHandler.provision_resources.credentials.id;
+    let registryProvisionResponse = null;
+    let clusterProvisionResponse = null;
 
     if (snap.StateHandler.connected_registry.skip) {
-      await provisionDOCR(integrationId, tier);
+      registryProvisionResponse = await provisionDOCR(integrationId, tier);
     }
-    await provisionDOKS(integrationId, region, clusterName);
+    clusterProvisionResponse = await provisionDOKS(
+      integrationId,
+      region,
+      clusterName
+    );
 
     nextFormStep({
       settings: {
         region,
         tier,
         cluster_name: clusterName,
+        registry_infra_id: registryProvisionResponse?.id,
+        cluster_infra_id: clusterProvisionResponse?.id,
       },
     });
   };
@@ -204,11 +231,13 @@ export const Status: React.FC<{
   nextFormStep: () => void;
   project: any;
 }> = ({ nextFormStep, project }) => {
-  return <SharedStatus
-    nextFormStep={nextFormStep}
-    project={project}
-    filter={["doks", "docr"]}
-  />
+  return (
+    <SharedStatus
+      nextFormStep={nextFormStep}
+      project={project}
+      filter={["doks", "docr"]}
+    />
+  );
 };
 
 const CodeBlock = styled.span`

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_GCPProvisionerForm.tsx

@@ -175,13 +175,18 @@ export const SettingsForm: React.FC<{
     setButtonStatus("loading");
     const integrationId = snap.StateHandler.provision_resources.credentials.id;
 
+    let registryProvisionResponse = null;
+    let clusterProvisionResponse = null;
     if (snap.StateHandler.connected_registry.skip) {
-      await provisionGCR(integrationId);
+      registryProvisionResponse = await provisionGCR(integrationId);
     }
-    await provisionGKE(integrationId);
+    clusterProvisionResponse = await provisionGKE(integrationId);
+
     nextFormStep({
       settings: {
         cluster_name: clusterName,
+        registry_infra_id: registryProvisionResponse?.id,
+        cluster_infra_id: clusterProvisionResponse?.id,
       },
     });
   };
@@ -197,6 +202,7 @@ export const SettingsForm: React.FC<{
         },
         { project_id: project.id }
       )
+      .then((res) => res?.data)
       .catch(catchError);
   };
 
@@ -212,6 +218,7 @@ export const SettingsForm: React.FC<{
         },
         { project_id: project.id }
       )
+      .then((res) => res?.data)
       .catch(catchError);
   };
 
@@ -245,11 +252,13 @@ export const Status: React.FC<{
   nextFormStep: () => void;
   project: any;
 }> = ({ nextFormStep, project }) => {
-  return <SharedStatus
-    nextFormStep={nextFormStep}
-    project={project}
-    filter={["gke", "gcr"]}
-  />
+  return (
+    <SharedStatus
+      nextFormStep={nextFormStep}
+      project={project}
+      filter={["gke", "gcr"]}
+    />
+  );
 };
 
 const CodeBlock = styled.span`

dashboard/src/main/home/onboarding/types.ts

@@ -16,6 +16,7 @@ export type AWSRegistryConfig = {
     id: string;
   };
   settings: {
+    registry_connection_id: number;
     registry_name: string;
   };
 };
@@ -27,6 +28,7 @@ export type GCPRegistryConfig = {
     id: string;
   };
   settings: {
+    registry_connection_id: number;
     registry_name: string;
     gcr_url: string;
   };
@@ -39,6 +41,7 @@ export type DORegistryConfig = {
     id: string;
   };
   settings: {
+    registry_connection_id: number;
     registry_url: string;
   };
 };
@@ -54,6 +57,8 @@ export type AWSProvisionerConfig = {
   settings: {
     cluster_name: string;
     aws_machine_type: string;
+    registry_infra_id: number;
+    cluster_infra_id: number;
   };
 };
 
@@ -66,6 +71,8 @@ export type GCPProvisionerConfig = {
   };
   settings: {
     cluster_name: string;
+    registry_infra_id: number;
+    cluster_infra_id: number;
   };
 };
 
@@ -79,6 +86,8 @@ export type DOProvisionerConfig = {
     region: string;
     cluster_name: string;
     tier: string;
+    registry_infra_id: number;
+    cluster_infra_id: number;
   };
 };
 
@@ -91,17 +100,63 @@ export type SkipRegistryConnection = SkipProvisionConfig;
 export interface Onboarding {
   current_step: string;
 
-  project_id: number;
-  project_name: string;
+  project_id?: number;
+  project_name?: string;
 
   connected_source: "docker" | "github";
 
   skip_registry_connection: boolean;
 
+  registry_connection_id: number;
   registry_connection_provider: string;
-  registry_connection_credentials_id: number;
-  registry_connection_settings_url: string;
-  registry_connection_settings_name: string;
+  registry_connection_credential_id: number;
+
+  skip_resource_provision: boolean;
+
+  resource_provision_provider: string;
+  resource_provision_credentials_id: number;
+  resource_provision_credentials_arn: string;
+  resource_provision_credentials_region: string;
+
+  resource_provision_settings_cluster_name: string;
+  resource_provision_settings_region: string;
+  resource_provision_settings_tier: string;
+  resource_provision_settings_machine_type: string;
+}
+
+export interface CompressedOnboardingState {
+  current_step: string;
+  connected_source: "github" | "docker";
+
+  skip_registry_connection: boolean;
+  skip_resource_provision: boolean;
+
+  registry_connection_id: number;
+  registry_connection_credential_id: number;
+  registry_connection_provider: string;
+
+  registry_infra_id: number;
+  registry_infra_credential_id: number;
+  registry_infra_provider: string;
+
+  cluster_infra_id: number;
+  cluster_infra_credential_id: number;
+  cluster_infra_provider: number;
+}
+
+export interface OnboardingState {
+  current_step: string;
+
+  project_id?: number;
+  project_name?: string;
+
+  connected_source: "docker" | "github";
+
+  skip_registry_connection: boolean;
+
+  registry_connection_id: number;
+  registry_connection_provider: string;
+  registry_connection_credential_id: number;
 
   skip_resource_provision: boolean;