Cleaned up Provision resources step

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

@@ -3,7 +3,7 @@ import { Route, Switch } from "react-router";
 import { OFState } from "./state";
 import ConnectRegistry from "./steps/ConnectRegistry/ConnectRegistry";
 import ConnectSource from "./steps/ConnectSource";
-import ProvisionResourcesWrapper from "./steps/ProvisionResources/ProvisionResourcesWrapper";
+import ProvisionResources from "./steps/ProvisionResources/ProvisionResources";
 
 export const Routes = () => {
   return (
@@ -18,7 +18,7 @@ export const Routes = () => {
           <ConnectRegistry />
         </Route>
         <Route path={[`/onboarding/provision/:step?`]}>
-          <ProvisionResourcesWrapper />
+          <ProvisionResources />
         </Route>
       </Switch>
     </>

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

@@ -11,44 +11,43 @@ import ProviderSelector, {
 
 import FormFlowWrapper from "./forms/FormFlow";
 import ConnectExternalCluster from "./forms/_ConnectExternalCluster";
-import { SupportedProviders } from "../../types";
 import backArrow from "assets/back_arrow.png";
 import { SharedStatus } from "./forms/SharedStatus";
+import { useSnapshot } from "valtio";
+import { OFState } from "../../state";
 
-type Props = {
-  provider: SupportedProviders | "external";
-  enable_go_back: boolean;
-  project: {
-    id: number;
-    name: string;
-  };
-  shouldProvisionRegistry: boolean;
-  onSelectProvider: (provider: SupportedProviders | "external") => void;
-  onSaveCredentials: (credentials: any) => void;
-  onSaveSettings: (settings: any) => void;
-  onSuccess: () => void;
-  onSkip: () => void;
-  goBack: (data?: any) => void;
-};
+type Props = {};
 
-const ProvisionResources: React.FC<Props> = ({
-  provider,
-  project,
-  shouldProvisionRegistry,
-  onSelectProvider,
-  onSaveCredentials,
-  onSaveSettings,
-  onSuccess,
-
-  enable_go_back,
-  goBack,
-}) => {
+const ProvisionResources: React.FC<Props> = () => {
+  const snap = useSnapshot(OFState);
   const { step } = useParams<{ step: any }>();
   const [infraStatus, setInfraStatus] = useState<{
     hasError: boolean;
     description?: string;
   }>(null);
 
+  const shouldProvisionRegistry = !!snap.StateHandler.connected_registry?.skip;
+  const provider = snap.StateHandler.provision_resources?.provider;
+  const project = snap.StateHandler.project;
+  const enableGoBack =
+    snap.StepHandler.canGoBack && !snap.StepHandler.isSubFlow;
+
+  const handleContinue = (data?: any) => {
+    OFState.actions.nextStep("continue", data);
+  };
+
+  const handleGoBack = (data?: any) => {
+    OFState.actions.nextStep("go_back", data);
+  };
+
+  const handleSelectProvider = (provider: string) => {
+    if (provider !== "external") {
+      OFState.actions.nextStep("continue", provider);
+      return;
+    }
+    OFState.actions.nextStep("skip");
+  };
+
   const renderSaveButton = () => {
     if (infraStatus && !infraStatus.hasError) {
       return (
@@ -57,7 +56,7 @@ const ProvisionResources: React.FC<Props> = ({
           <SaveButton
             text="Continue"
             disabled={false}
-            onClick={onSuccess}
+            onClick={() => handleContinue()}
             makeFlush={true}
             clearPosition={true}
             statusPosition="right"
@@ -73,7 +72,7 @@ const ProvisionResources: React.FC<Props> = ({
             text="Resolve Errors"
             status="Encountered errors while provisioning."
             disabled={false}
-            onClick={() => goBack(infraStatus.description)}
+            onClick={() => handleGoBack(infraStatus.description)}
             makeFlush={true}
             clearPosition={true}
             statusPosition="right"
@@ -101,16 +100,7 @@ const ProvisionResources: React.FC<Props> = ({
     switch (step) {
       case "credentials":
       case "settings":
-        return (
-          <FormFlowWrapper
-            provider={provider}
-            currentStep={step}
-            onSaveCredentials={onSaveCredentials}
-            onSaveSettings={onSaveSettings}
-            project={project}
-            goBack={goBack}
-          />
-        );
+        return <FormFlowWrapper currentStep={step} />;
       case "status":
         return (
           <>
@@ -127,17 +117,15 @@ const ProvisionResources: React.FC<Props> = ({
       case "connect_own_cluster":
         return (
           <ConnectExternalCluster
-            nextStep={onSuccess}
+            nextStep={handleContinue}
             project={project}
-            goBack={goBack}
+            goBack={handleGoBack}
           />
         );
       default:
         return (
           <ProviderSelector
-            selectProvider={(provider) => {
-              onSelectProvider(provider);
-            }}
+            selectProvider={handleSelectProvider}
             options={
               shouldProvisionRegistry
                 ? provisionerOptions
@@ -150,10 +138,10 @@ const ProvisionResources: React.FC<Props> = ({
 
   return (
     <div>
-      {enable_go_back && (
+      {enableGoBack && (
         <BackButton
           onClick={() => {
-            goBack();
+            handleGoBack();
           }}
         >
           <BackButtonImg src={backArrow} />

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

@@ -1,30 +0,0 @@
-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: string) => {
-        if (provider !== "external") {
-          OFState.actions.nextStep("continue", provider);
-          return;
-        }
-        OFState.actions.nextStep("skip");
-      }}
-      onSaveCredentials={(data) => OFState.actions.nextStep("continue", data)}
-      onSaveSettings={(data) => OFState.actions.nextStep("continue", data)}
-      onSuccess={() => OFState.actions.nextStep("continue")}
-      onSkip={() => OFState.actions.nextStep("skip")}
-      enable_go_back={snap.StepHandler.canGoBack && !snap.StepHandler.isSubFlow}
-      goBack={(data: any) => OFState.actions.nextStep("go_back", data)}
-    />
-  );
-};
-
-export default ProvisionResourcesWrapper;

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

@@ -1,4 +1,7 @@
-import { ProvisionerConfig } from "main/home/onboarding/state/StateHandler";
+import {
+  ProvisionerConfig,
+  StateHandler,
+} from "main/home/onboarding/state/StateHandler";
 import {
   SkipProvisionConfig,
   SupportedProviders,
@@ -21,6 +24,8 @@ import {
   CredentialsForm as GCPCredentialsForm,
   SettingsForm as GCPSettingsForm,
 } from "./_GCPProvisionerForm";
+import { OFState } from "main/home/onboarding/state";
+import { useSnapshot } from "valtio";
 
 const Forms = {
   aws: {
@@ -61,29 +66,33 @@ const FormTitle = {
 };
 
 type Props = {
-  onSaveCredentials: (credentials: any) => void;
-  onSaveSettings: (settings: any) => void;
-  provider: SupportedProviders | "external";
   currentStep: "credentials" | "settings";
-  project: { id: number; name: string };
-  goBack: () => void;
 };
 
-const FormFlowWrapper: React.FC<Props> = ({
-  onSaveCredentials,
-  onSaveSettings,
-  provider,
-  currentStep,
-  project,
-  goBack,
-}) => {
+const FormFlowWrapper: React.FC<Props> = ({ currentStep }) => {
+  const snap = useSnapshot(StateHandler);
+
+  const provider = snap.provision_resources?.provider as
+    | SupportedProviders
+    | "external";
+
+  const project = snap.project;
+
+  const handleContinue = (data: any) => {
+    OFState.actions.nextStep("continue", data);
+  };
+
+  const handleGoBack = () => {
+    OFState.actions.nextStep("go_back");
+  };
+
   const nextFormStep = (
     data?: Partial<Exclude<ProvisionerConfig, SkipProvisionConfig>>
   ) => {
     if (currentStep === "credentials") {
-      onSaveCredentials(data);
+      handleContinue(data);
     } else if (currentStep === "settings") {
-      onSaveSettings(data);
+      handleContinue(data);
     }
   };
 
@@ -110,7 +119,7 @@ const FormFlowWrapper: React.FC<Props> = ({
     <FormWrapper>
       <Header>
         <FormHeader>
-          <CloseButton onClick={() => goBack()}>
+          <CloseButton onClick={() => handleGoBack()}>
             <i className="material-icons">keyboard_backspace</i>
           </CloseButton>
           {FormTitle[provider] && <img src={FormTitle[provider].icon} />}