Removed logic from connect registry wrapper and implement on specific components

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

@@ -1,8 +1,7 @@
 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";
 
@@ -16,7 +15,7 @@ export const Routes = () => {
           />
         </Route>
         <Route path={["/onboarding/registry/:step?"]}>
-          <ConnectRegistryWrapper />
+          <ConnectRegistry />
         </Route>
         <Route path={[`/onboarding/provision/:step?`]}>
           <ProvisionResourcesWrapper />

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>
           )}