Merge pull request #1382 from porter-dev/nico/cleanup-onboarding

[Improvement] Clean up onboarding steps

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

@@ -1,10 +1,9 @@
 import React from "react";
 import { Route, Switch } from "react-router";
-import { Redirect } from "react-router-dom";
 import { OFState } from "./state";
-import ConnectRegistryWrapper from "./steps/ConnectRegistry/ConnectRegistryWrapper";
+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 (
@@ -16,10 +15,10 @@ export const Routes = () => {
           />
         </Route>
         <Route path={["/onboarding/registry/:step?"]}>
-          <ConnectRegistryWrapper />
+          <ConnectRegistry />
         </Route>
         <Route path={[`/onboarding/provision/:step?`]}>
-          <ProvisionResourcesWrapper />
+          <ProvisionResources />
         </Route>
       </Switch>
     </>

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

@@ -8,43 +8,39 @@ import styled from "styled-components";
 import ProviderSelector, {
   registryOptions,
 } from "../../components/ProviderSelector";
-import { SupportedProviders } from "../../types";
 import backArrow from "assets/back_arrow.png";
 
 import FormFlowWrapper from "./forms/FormFlow";
+import { OFState } from "../../state";
+import { useSnapshot } from "valtio";
 
-const ConnectRegistry: React.FC<{
-  provider: SupportedProviders;
-  enable_go_back: boolean;
-  project: {
-    id: number;
-    name: string;
-  };
-  onSelectProvider: (provider: SupportedProviders | "skip") => void;
-  onSaveCredentials: (credentials: any) => void;
-  onSaveSettings: (settings: any) => void;
-  onSuccess: () => void;
-  onSkip: () => void;
-  goBack: () => void;
-}> = ({
-  onSelectProvider,
-  onSaveCredentials,
-  onSaveSettings,
-  onSuccess,
-  onSkip,
-  project,
-  provider,
-  enable_go_back,
-  goBack,
-}) => {
+const ConnectRegistry: React.FC<{}> = ({}) => {
+  const snap = useSnapshot(OFState);
   const { step } = useParams<any>();
 
+  const currentProvider = snap.StateHandler.connected_registry?.provider;
+
+  const enableGoBack =
+    snap.StepHandler.canGoBack && !snap.StepHandler.isSubFlow;
+
+  const handleGoBack = () => {
+    OFState.actions.nextStep("go_back");
+  };
+
+  const handleSkip = () => {
+    OFState.actions.nextStep("skip");
+  };
+
+  const handleSelectProvider = (provider: string) => {
+    provider !== "skip" && OFState.actions.nextStep("continue", provider);
+  };
+
   return (
     <Div>
-      {enable_go_back && (
+      {enableGoBack && (
         <BackButton
           onClick={() => {
-            goBack();
+            handleGoBack();
           }}
         >
           <BackButtonImg src={backArrow} />
@@ -61,28 +57,19 @@ const ConnectRegistry: React.FC<{
         </a>
       </Subtitle>
       <Helper>
-        {provider
+        {currentProvider
           ? "Link to an existing Docker registry. Don't worry if you don't know what this is."
           : "Link to an existing Docker registry or continue."}
       </Helper>
 
       {step ? (
-        <FormFlowWrapper
-          provider={provider}
-          onSaveCredentials={onSaveCredentials}
-          onSaveSettings={onSaveSettings}
-          onSuccess={onSuccess}
-          project={project}
-          currentStep={step}
-          goBack={goBack}
-          enable_go_back={enable_go_back}
-        />
+        <FormFlowWrapper currentStep={step} />
       ) : (
         <>
           <ProviderSelector
             selectProvider={(provider) => {
               if (provider !== "external") {
-                onSelectProvider(provider);
+                handleSelectProvider(provider);
               }
             }}
             options={registryOptions}
@@ -90,7 +77,7 @@ const ConnectRegistry: React.FC<{
           <NextStep
             text="Continue"
             disabled={false}
-            onClick={() => onSkip()}
+            onClick={() => handleSkip()}
             status={""}
             makeFlush={true}
             clearPosition={true}
@@ -109,45 +96,13 @@ const Div = styled.div`
   width: 100%;
 `;
 
-const FadeWrapper = styled.div<{ delay?: string }>`
-  opacity: 0;
-  animation: fadeIn 0.5s ${(props) => props.delay || "0.2s"};
-  animation-fill-mode: forwards;
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`;
-
-const SlideWrapper = styled.div<{ delay?: string }>`
-  opacity: 0;
-  animation: slideIn 0.7s ${(props) => props.delay || "1.3s"};
-  animation-fill-mode: forwards;
-
-  @keyframes slideIn {
-    from {
-      opacity: 0;
-      transform: translateX(30px);
-    }
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-`;
-
 const Subtitle = styled.div`
   font-size: 16px;
   font-weight: 500;
   margin-top: 16px;
 
   display: flex;
-  align-items; center;
+  align-items: center;
   > a {
     > i {
       font-size: 18px;

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

@@ -1,25 +0,0 @@
-import React from "react";
-import { useSnapshot } from "valtio";
-import { OFState } from "../../state";
-import ConnectRegistry from "./ConnectRegistry";
-
-const ConnectRegistryWrapper = () => {
-  const snap = useSnapshot(OFState);
-  return (
-    <ConnectRegistry
-      provider={snap.StateHandler.connected_registry?.provider}
-      project={snap.StateHandler.project}
-      onSelectProvider={(provider) => {
-        provider !== "skip" && 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")}
-      enable_go_back={snap.StepHandler.canGoBack && !snap.StepHandler.isSubFlow}
-      goBack={() => OFState.actions.nextStep("go_back")}
-    />
-  );
-};
-
-export default ConnectRegistryWrapper;

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

@@ -1,4 +1,7 @@
-import { ConnectedRegistryConfig } from "main/home/onboarding/state/StateHandler";
+import {
+  ConnectedRegistryConfig,
+  StateHandler,
+} from "main/home/onboarding/state/StateHandler";
 import Breadcrumb from "components/Breadcrumb";
 import {
   SkipRegistryConnection,
@@ -23,6 +26,8 @@ import {
   SettingsForm as GCPSettingsForm,
   TestRegistryConnection as GCPTestRegistryConnection,
 } from "./_GCPRegistryForm";
+import { OFState } from "main/home/onboarding/state";
+import { useSnapshot } from "valtio";
 
 const Forms = {
   aws: {
@@ -64,35 +69,32 @@ const FormTitle = {
 };
 
 type Props = {
-  provider: SupportedProviders;
-  onSaveCredentials: (credentials: any) => void;
-  onSaveSettings: (settings: any) => void;
-  onSuccess: () => void;
-  project: { id: number; name: string };
   currentStep: "credentials" | "settings" | "test_connection";
-  goBack: () => void;
-  enable_go_back: boolean;
 };
 
-const FormFlowWrapper: React.FC<Props> = ({
-  onSaveCredentials,
-  onSaveSettings,
-  onSuccess,
-  provider,
-  project,
-  currentStep,
-  goBack,
-  enable_go_back,
-}) => {
+const FormFlowWrapper: React.FC<Props> = ({ currentStep }) => {
+  const snap = useSnapshot(StateHandler);
+
+  const provider = snap.connected_registry.provider as SupportedProviders;
+  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<ConnectedRegistryConfig, SkipRegistryConnection>>
   ) => {
     if (currentStep === "credentials") {
-      onSaveCredentials(data.credentials);
+      handleContinue(data.credentials);
     } else if (currentStep === "settings") {
-      onSaveSettings(data.settings);
+      handleContinue(data.settings);
     } else if (currentStep === "test_connection") {
-      onSuccess();
+      handleContinue();
     }
   };
 
@@ -118,7 +120,7 @@ const FormFlowWrapper: React.FC<Props> = ({
       <Header>
         <FormHeader>
           {currentStep !== "test_connection" && (
-            <CloseButton onClick={() => goBack()}>
+            <CloseButton onClick={() => handleGoBack()}>
               <i className="material-icons">keyboard_backspace</i>
             </CloseButton>
           )}

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

@@ -11,45 +11,48 @@ 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 (typeof infraStatus?.hasError !== "boolean") {
+      return;
+    }
+
     if (infraStatus && !infraStatus.hasError) {
       return (
         <>
@@ -57,7 +60,7 @@ const ProvisionResources: React.FC<Props> = ({
           <SaveButton
             text="Continue"
             disabled={false}
-            onClick={onSuccess}
+            onClick={() => handleContinue()}
             makeFlush={true}
             clearPosition={true}
             statusPosition="right"
@@ -73,7 +76,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 +104,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 +121,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 +142,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} />}