All flow working

dashboard/src/main/home/onboarding/Routes.tsx

@@ -7,6 +7,7 @@ import ConnectRegistryWrapper from "./steps/ConnectRegistry/ConnectRegistryWrapp
 import ConnectSource from "./steps/ConnectSource";
 import { NewProjectFC } from "./steps/NewProject";
 import ProvisionResources from "./steps/ProvisionResources/ProvisionResources";
+import ProvisionResourcesWrapper from "./steps/ProvisionResources/ProvisionResourcesWrapper";
 
 const handleContinue = (data?: any) => {
   OFState.actions.nextStep("continue", data);
@@ -35,13 +36,7 @@ export const Routes = () => {
           <ConnectRegistryWrapper />
         </Route>
         <Route path={[`/onboarding/provision/:step?`]}>
-          <ProvisionResources
-            onSelectProvider={handleContinue}
-            onSaveSettings={handleContinue}
-            onSaveCredentials={handleContinue}
-            onSkip={handleSkip}
-            project={snap.StateHandler.project}
-          />
+          <ProvisionResourcesWrapper />
         </Route>
       </Switch>
     </>

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

@@ -106,14 +106,14 @@ export const StateHandler = proxy({
     },
     saveResourceProvisioningCredentials: (credentials: any) => {
       StateHandler.provision_resources = {
-        ...StateHandler.connected_registry,
-        credentials,
+        ...StateHandler.provision_resources,
+        ...credentials,
       };
     },
     saveResourceProvisioningSettings: (settings: any) => {
       StateHandler.provision_resources = {
-        ...StateHandler.connected_registry,
-        settings,
+        ...StateHandler.provision_resources,
+        ...settings,
       };
     },
   },

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

@@ -138,7 +138,7 @@ const flow: FlowType = {
         },
         credentials: {
           url: "/onboarding/provision/credentials",
-          on: { continue: "settings" },
+          on: { continue: "provision_resources.settings" },
           parent: "provision_resources",
           execute: {
             on: {

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

@@ -2,8 +2,6 @@ import { proxy, subscribe } from "valtio";
 import { devtools, subscribeKey } from "valtio/utils";
 import { StateHandler } from "./StateHandler";
 import { Action, StepHandler } from "./StepHandler";
-import { State as ConnectRegistryState } from "../steps/ConnectRegistry/ConnectRegistryState";
-import { State as ProvisionResourcesState } from "../steps/ProvisionResources/ProvisionResourcesState";
 
 export const OFState = proxy({
   StateHandler,
@@ -12,7 +10,6 @@ export const OFState = proxy({
   actions: {
     initializeState: (projectId: number) => {
       OFState.actions.restoreState(projectId);
-      OFState.subscriptions = OFState.actions.subscribeToSubstates();
     },
     nextStep: (action?: Action, data?: any) => {
       const functionToExecute = StepHandler?.currentStep?.execute?.on[action];
@@ -29,8 +26,6 @@ export const OFState = proxy({
     clearState: () => {
       StateHandler.actions.clearState();
       StepHandler.actions.clearState();
-      ConnectRegistryState.actions.clearState();
-      ProvisionResourcesState.actions.clearState();
     },
     saveState: () => {
       const state = JSON.stringify(OFState);
@@ -58,35 +53,6 @@ export const OFState = proxy({
       if (prevState?.StepHandler) {
         StepHandler.actions.restoreState(prevState.StepHandler);
       }
-      if (prevState?.substates.connected_registry) {
-        ConnectRegistryState.actions.restoreState(
-          prevState?.substates.connected_registry
-        );
-      }
-      if (prevState?.substates.provision_resources) {
-        ProvisionResourcesState.actions.restoreState(
-          prevState?.substates?.provision_resources
-        );
-      }
-    },
-    // This is in charge of keeping track so the submodules doesn't have any external dependencies
-    subscribeToSubstates: () => {
-      return Object.keys(OFState.substates).map(
-        (key: "connected_registry" | "provision_resources") => {
-          return subscribe(OFState.substates[key], () => {
-            OFState.actions.saveState();
-          });
-        }
-      );
-    },
-    unsubscribeFromSubstates: () => {
-      OFState.subscriptions.forEach((unsubscribe) =>
-        typeof unsubscribe === "function" ? unsubscribe() : ""
-      );
     },
   },
-  substates: {
-    connected_registry: ConnectRegistryState,
-    provision_resources: ProvisionResourcesState,
-  },
 });

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

@@ -6,6 +6,7 @@ import { useParams } from "react-router";
 
 import styled from "styled-components";
 import ProviderSelector from "../../components/ProviderSelector";
+import { ConnectedRegistryConfig } from "../../state/StateHandler";
 import { SupportedProviders } from "../../types";
 
 import FormFlowWrapper from "./forms/FormFlow";

dashboard/src/main/home/onboarding/steps/ConnectRegistry/ConnectRegistryState.ts

@@ -1,45 +0,0 @@
-import { proxy } from "valtio";
-import { ConnectedRegistryConfig } from "../../state/StateHandler";
-import { SkipRegistryConnection, SupportedProviders } from "../../types";
-
-type AllowedSteps = "credentials" | "settings" | "test_connection" | null;
-
-interface ConnectRegistryState {
-  selectedProvider: SupportedProviders | null;
-  currentStep: AllowedSteps;
-  config: Partial<
-    Exclude<ConnectedRegistryConfig, SkipRegistryConnection>
-  > | null;
-  actions: typeof actions;
-}
-
-const actions = {
-  selectProvider(provider: SupportedProviders) {
-    State.selectedProvider = provider;
-  },
-
-  clearState() {
-    State.selectedProvider = null;
-    State.currentStep = "credentials";
-  },
-  restoreState(prevState: any) {
-    if (prevState.selectedProvider) {
-      State.selectedProvider = prevState.selectedProvider;
-    }
-    if (prevState.currentStep) {
-      State.currentStep = prevState.currentStep;
-    }
-    if (prevState.config) {
-      State.config = prevState.config;
-    }
-  },
-};
-
-const initialState: ConnectRegistryState = {
-  selectedProvider: null,
-  currentStep: "credentials",
-  config: null,
-  actions,
-};
-
-export const State = proxy(initialState);

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

@@ -8,7 +8,6 @@ import React, { useState } from "react";
 import api from "shared/api";
 import styled from "styled-components";
 import { useSnapshot } from "valtio";
-import { State } from "../ConnectRegistryState";
 
 export const CredentialsForm: React.FC<{
   nextFormStep: (data: Partial<GCPRegistryConfig>) => void;

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

@@ -1,15 +1,11 @@
 import Helper from "components/form-components/Helper";
 import SaveButton from "components/SaveButton";
 import TitleSection from "components/TitleSection";
-import React, { useEffect, useState } from "react";
-import { useLocation } from "react-router";
-import { useRouting } from "shared/routing";
+import React from "react";
+import { useParams } from "react-router";
 import styled from "styled-components";
-import { useSnapshot } from "valtio";
 import ProviderSelector from "../../components/ProviderSelector";
-import { OFState } from "../../state";
 
-import { State } from "./ProvisionResourcesState";
 import FormFlowWrapper from "./forms/FormFlow";
 import ConnectExternalCluster from "./forms/_ConnectExternalCluster";
 import { SupportedProviders } from "../../types";
@@ -37,21 +33,7 @@ const ProvisionResources: React.FC<Props> = ({
   onSaveSettings,
   onSuccess,
 }) => {
-  // const globalFormSnap = useSnapshot(OFState);
-  // const { getQueryParam } = useRouting();
-  // const location = useLocation();
-
-  // useEffect(() => {
-  //   const provider = getQueryParam("provider");
-  //   if (provider === "aws" || provider === "gcp" || provider === "do") {
-  //     State.selectedProvider = provider;
-  //   }
-  // }, [location]);
-
-  // useEffect(() => {
-  //   const connectedRegistry = globalFormSnap.StateHandler.connected_registry;
-  //   State.shouldProvisionRegistry = !!connectedRegistry?.skip;
-  // }, [globalFormSnap.StateHandler.connected_registry]);
+  const { step } = useParams<{ step: any }>();
 
   return (
     <>
@@ -63,7 +45,13 @@ const ProvisionResources: React.FC<Props> = ({
       </Helper>
       {provider ? (
         provider !== "external" ? (
-          <FormFlowWrapper nextStep={() => nextStep(false)} />
+          <FormFlowWrapper
+            provider={provider}
+            currentStep={step}
+            onSaveCredentials={onSaveCredentials}
+            onSaveSettings={onSaveSettings}
+            project={project}
+          />
         ) : (
           <ConnectExternalCluster nextStep={onSuccess} project={project} />
         )

dashboard/src/main/home/onboarding/steps/ProvisionResources/ProvisionResourcesState.ts

@@ -1,51 +0,0 @@
-import { proxy } from "valtio";
-import { ProvisionerConfig } from "../../state/StateHandler";
-import { SkipProvisionConfig, SupportedProviders } from "../../types";
-
-type AllowedSteps = "credentials" | "settings" | null;
-
-interface ConnectRegistryState {
-  selectedProvider: SupportedProviders | "external" | null;
-  shouldProvisionRegistry: boolean;
-  currentStep: AllowedSteps;
-
-  config: Partial<Exclude<ProvisionerConfig, SkipProvisionConfig>> | null;
-  actions: {
-    selectProvider: (provider: SupportedProviders) => void;
-    clearState: () => void;
-    restoreState: (prevState: any) => void;
-  };
-}
-
-const initialState: ConnectRegistryState = {
-  selectedProvider: null,
-  shouldProvisionRegistry: false,
-  currentStep: "credentials",
-  config: null,
-  actions: {
-    selectProvider(provider: SupportedProviders) {
-      State.selectedProvider = provider;
-    },
-
-    clearState() {
-      State.selectedProvider = null;
-      State.currentStep = "credentials";
-    },
-    restoreState(prevState: any) {
-      if (!prevState) {
-        return;
-      }
-      if (prevState.selectedProvider) {
-        State.selectedProvider = prevState.selectedProvider;
-      }
-      if (prevState.currentStep) {
-        State.currentStep = prevState.currentStep;
-      }
-      if (prevState.config) {
-        State.config = prevState.config;
-      }
-    },
-  },
-};
-
-export const State = proxy(initialState);

dashboard/src/main/home/onboarding/steps/ProvisionResources/ProvisionResourcesWrapper.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { useSnapshot } from "valtio";
+import { OFState } from "../../state";
+import ProvisionResources from "./ProvisionResources";
+
+const ProvisionResourcesWrapper = () => {
+  const snap = useSnapshot(OFState);
+  return (
+    <ProvisionResources
+      shouldProvisionRegistry={snap.StateHandler.connected_registry?.skip}
+      provider={snap.StateHandler.provision_resources?.provider}
+      project={snap.StateHandler.project}
+      onSelectProvider={(provider) =>
+        OFState.actions.nextStep("continue", provider)
+      }
+      onSaveCredentials={(data) => OFState.actions.nextStep("continue", data)}
+      onSaveSettings={(data) => OFState.actions.nextStep("continue", data)}
+      onSuccess={() => OFState.actions.nextStep("continue")}
+      onSkip={() => OFState.actions.nextStep("skip")}
+    />
+  );
+};
+
+export default ProvisionResourcesWrapper;

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

@@ -1,10 +1,11 @@
 import { ProvisionerConfig } from "main/home/onboarding/state/StateHandler";
-import { SkipProvisionConfig } from "main/home/onboarding/types";
+import {
+  SkipProvisionConfig,
+  SupportedProviders,
+} from "main/home/onboarding/types";
 import React, { useContext, useMemo } from "react";
 import { Context } from "shared/Context";
 import styled from "styled-components";
-import { useSnapshot } from "valtio";
-import { State } from "../ProvisionResourcesState";
 import {
   CredentialsForm as AWSCredentialsForm,
   SettingsForm as AWSSettingsForm,
@@ -48,51 +49,56 @@ const FormTitle = {
 };
 
 type Props = {
-  nextStep: () => void;
+  onSaveCredentials: (credentials: any) => void;
+  onSaveSettings: (settings: any) => void;
+  provider: SupportedProviders | "external";
+  currentStep: "credentials" | "settings";
+  project: { id: number; name: string };
 };
 
-const FormFlowWrapper: React.FC<Props> = ({ nextStep }) => {
-  const snap = useSnapshot(State);
-  const { currentProject } = useContext(Context);
-
+const FormFlowWrapper: React.FC<Props> = ({
+  onSaveCredentials,
+  onSaveSettings,
+  provider,
+  currentStep,
+  project,
+}) => {
   const nextFormStep = (
     data?: Partial<Exclude<ProvisionerConfig, SkipProvisionConfig>>
   ) => {
-    if (snap.currentStep === "credentials") {
-      State.config.credentials = data.credentials;
-      State.currentStep = "settings";
-    } else if (snap.currentStep === "settings") {
-      State.config.settings = data.settings;
-      nextStep();
+    if (currentStep === "credentials") {
+      onSaveCredentials(data);
+    } else if (currentStep === "settings") {
+      onSaveSettings(data);
     }
   };
 
   const CurrentForm = useMemo(() => {
-    if (snap.selectedProvider !== "external") {
-      const providerSteps = Forms[snap.selectedProvider];
+    if (provider !== "external") {
+      const providerSteps = Forms[provider];
       if (!providerSteps) {
         return null;
       }
 
-      const currentForm = providerSteps[snap.currentStep];
+      const currentForm = providerSteps[currentStep];
       if (!currentForm) {
         return null;
       }
 
       return React.createElement(currentForm as any, {
         nextFormStep,
-        project: currentProject,
+        project: project,
       });
     }
-  }, [snap.currentStep, snap.selectedProvider]);
+  }, [currentStep, provider]);
 
   return (
     <>
-      {snap.selectedProvider !== "external" && FormTitle[snap.selectedProvider]}
+      {provider !== "external" && FormTitle[provider]}
       <Breadcrumb>
-        <Text bold={snap.currentStep === "credentials"}>Credentials</Text>
+        <Text bold={currentStep === "credentials"}>Credentials</Text>
         {" > "}
-        <Text bold={snap.currentStep === "settings"}>Settings</Text>
+        <Text bold={currentStep === "settings"}>Settings</Text>
       </Breadcrumb>
       {CurrentForm}
     </>

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

@@ -1,6 +1,7 @@
 import InputRow from "components/form-components/InputRow";
 import SelectRow from "components/form-components/SelectRow";
 import SaveButton from "components/SaveButton";
+import { OFState } from "main/home/onboarding/state";
 import {
   AWSProvisionerConfig,
   AWSRegistryConfig,
@@ -9,7 +10,6 @@ import React, { useState } from "react";
 import api from "shared/api";
 import { Context } from "shared/Context";
 import { useSnapshot } from "valtio";
-import { State } from "../ProvisionResourcesState";
 
 const regionOptions = [
   { value: "us-east-1", label: "US East (N. Virginia) us-east-1" },
@@ -69,21 +69,21 @@ export const CredentialsForm: React.FC<{
       return;
     }
 
-    const res = await api.createAWSIntegration(
-      "token",
-      {
-        aws_region: awsRegion,
-        aws_access_key_id: accessId,
-        aws_secret_access_key: secretKey,
-      },
-      {
-        id: project.id,
-      }
-    );
+    // const res = await api.createAWSIntegration(
+    //   "token",
+    //   {
+    //     aws_region: awsRegion,
+    //     aws_access_key_id: accessId,
+    //     aws_secret_access_key: secretKey,
+    //   },
+    //   {
+    //     id: project.id,
+    //   }
+    // );
 
     nextFormStep({
       credentials: {
-        id: res.data.id,
+        id: "res.data.id",
       },
     });
   };
@@ -148,7 +148,7 @@ export const SettingsForm: React.FC<{
   nextFormStep: (data: Partial<AWSProvisionerConfig>) => void;
   project: any;
 }> = ({ nextFormStep, project }) => {
-  const snap = useSnapshot(State);
+  const snap = useSnapshot(OFState);
   const [clusterName, setClusterName] = useState("");
   const [machineType, setMachineType] = useState("t2.medium");
   const [buttonStatus, setButtonStatus] = useState("");
@@ -209,12 +209,13 @@ export const SettingsForm: React.FC<{
       setButtonStatus(validation.error);
       return;
     }
-    const integrationId = `${snap.config.credentials.id}`;
+    const integrationId = `${snap.StateHandler.provision_resources.credentials.id}`;
 
-    if (snap.shouldProvisionRegistry) {
-      await provisionECR(integrationId);
+    if (snap.StateHandler.connected_registry.skip) {
+      // await provisionECR(integrationId);
+      console.log("PROVISIONING REGISTRY");
     }
-    await provisionEKS(integrationId);
+    // await provisionEKS(integrationId);
 
     nextFormStep({
       settings: {

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

@@ -2,12 +2,12 @@ import Helper from "components/form-components/Helper";
 import InputRow from "components/form-components/InputRow";
 import SelectRow from "components/form-components/SelectRow";
 import SaveButton from "components/SaveButton";
+import { OFState } from "main/home/onboarding/state";
 import { DOProvisionerConfig } from "main/home/onboarding/types";
 import React, { useEffect, useState } from "react";
 import api from "shared/api";
 import styled from "styled-components";
 import { useSnapshot } from "valtio";
-import { State } from "../ProvisionResourcesState";
 
 const tierOptions = [
   { value: "basic", label: "Basic" },
@@ -70,7 +70,7 @@ export const SettingsForm: React.FC<{
   nextFormStep: (data: Partial<DOProvisionerConfig>) => void;
   project: any;
 }> = ({ nextFormStep, project }) => {
-  const snap = useSnapshot(State);
+  const snap = useSnapshot(OFState);
   const [buttonStatus, setButtonStatus] = useState("");
   const [tier, setTier] = useState("basic");
   const [region, setRegion] = useState("nyc1");
@@ -136,12 +136,13 @@ export const SettingsForm: React.FC<{
       setButtonStatus(validation.error);
       return;
     }
-    const integrationId = snap.config.credentials.id;
+    const integrationId = snap.StateHandler.provision_resources.credentials.id;
 
-    if (snap.shouldProvisionRegistry) {
-      await provisionDOCR(integrationId, tier);
+    if (snap.StateHandler.connected_registry.skip) {
+      // await provisionDOCR(integrationId, tier);
+      console.log("PROVISIONING REGISTRY");
     }
-    await provisionDOKS(integrationId, region, clusterName);
+    // await provisionDOKS(integrationId, region, clusterName);
 
     nextFormStep({
       settings: {

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

@@ -3,6 +3,7 @@ import InputRow from "components/form-components/InputRow";
 import SelectRow from "components/form-components/SelectRow";
 import UploadArea from "components/form-components/UploadArea";
 import SaveButton from "components/SaveButton";
+import { OFState } from "main/home/onboarding/state";
 import {
   GCPProvisionerConfig,
   GCPRegistryConfig,
@@ -11,7 +12,6 @@ import React, { useState } from "react";
 import api from "shared/api";
 import styled from "styled-components";
 import { useSnapshot } from "valtio";
-import { State } from "../ProvisionResourcesState";
 
 const regionOptions = [
   { value: "asia-east1", label: "asia-east1" },
@@ -71,21 +71,21 @@ export const CredentialsForm: React.FC<{
       return;
     }
     setButtonStatus("loading");
-    const gcpIntegration = await api
-      .createGCPIntegration(
-        "<token>",
-        {
-          gcp_region: "",
-          gcp_key_data: serviceAccountKey,
-          gcp_project_id: projectId,
-        },
-        { project_id: project.id }
-      )
-      .then((res) => res.data);
+    // const gcpIntegration = await api
+    //   .createGCPIntegration(
+    //     "<token>",
+    //     {
+    //       gcp_region: "",
+    //       gcp_key_data: serviceAccountKey,
+    //       gcp_project_id: projectId,
+    //     },
+    //     { project_id: project.id }
+    //   )
+    //   .then((res) => res.data);
 
     nextFormStep({
       credentials: {
-        id: gcpIntegration.id,
+        id: "gcpIntegration.id",
       },
     });
   };
@@ -142,7 +142,7 @@ export const SettingsForm: React.FC<{
 }> = ({ nextFormStep, project }) => {
   const [clusterName, setClusterName] = useState("");
   const [buttonStatus, setButtonStatus] = useState("");
-  const snap = useSnapshot(State);
+  const snap = useSnapshot(OFState);
 
   const validate = () => {
     if (!clusterName) {
@@ -166,14 +166,15 @@ export const SettingsForm: React.FC<{
       setButtonStatus(validation.error);
       return;
     }
-    const integrationId = snap.config.credentials.id;
 
     setButtonStatus("loading");
+    const integrationId = snap.StateHandler.provision_resources.credentials.id;
 
-    if (snap.shouldProvisionRegistry) {
-      await provisionGCR(integrationId);
+    if (snap.StateHandler.connected_registry.skip) {
+      // await provisionGCR(integrationId);
+      console.log("PROVISIONING REGISTRY");
     }
-    await provisionGKE(integrationId);
+    // await provisionGKE(integrationId);
     nextFormStep({
       settings: {
         cluster_name: clusterName,