fix merge conflict

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

@@ -1,4 +1,5 @@
-import React, { useContext, useEffect } from "react";
+import Loading from "components/Loading";
+import React, { useContext, useEffect, useState } from "react";
 import api from "shared/api";
 import { Context } from "shared/Context";
 import styled from "styled-components";
@@ -10,6 +11,7 @@ import { Onboarding as OnboardingSaveType } from "./types";
 
 const Onboarding = () => {
   const context = useContext(Context);
+  const [isLoading, setIsLoading] = useState(true);
   useSteps();
 
   useEffect(() => {
@@ -96,22 +98,21 @@ const Onboarding = () => {
   };
 
   useEffect(() => {
-    if (context?.currentProject?.id) {
+    if (context.currentProject) {
       getData(context.currentProject).then((data) => {
         if (data) {
           OFState.actions.initializeState(data);
         }
+        setIsLoading(false);
       });
     }
     return () => {
       OFState.actions.clearState();
     };
-  }, [context.currentProject?.id]);
+  }, [context.currentProject]);
 
   return (
-    <StyledOnboarding>
-      <Routes />
-    </StyledOnboarding>
+    <StyledOnboarding>{isLoading ? <Loading /> : <Routes />}</StyledOnboarding>
   );
 };
 

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { integrationList } from "shared/common";
 import styled from "styled-components";
 import { SupportedProviders } from "../types";
@@ -9,15 +9,10 @@ export type ProviderSelectorProps = {
     provider: SupportedProviders | (SupportedProviders | "external")
   ) => void;
   enableExternal?: boolean;
+  enableSkip?: boolean;
 };
 
-const providers: SupportedProviders[] = ["aws", "gcp", "do"];
-
-const providerOptions = [
-  {
-    value: "skip",
-    label: "Skip / I don't know what this is",
-  },
+const baseOptions = [
   {
     value: "aws",
     icon: integrationList["aws"].icon,
@@ -33,30 +28,77 @@ const providerOptions = [
     icon: integrationList["do"].icon,
     label: "DigitalOcean Container Registry (DOCR)",
   },
-  {
-    value: "external",
-    icon: integrationList["kubernetes"].icon,
-    label: "Link to an existing cluster",
-  },
 ];
 
+const skipOption = {
+  value: "skip",
+  label: "Skip / I don't know what this is",
+  icon: "",
+};
+
+const externalOption = {
+  value: "external",
+  icon: integrationList["kubernetes"].icon,
+  label: "Link to an existing cluster",
+};
+
+const dummyOption = {
+  value: "dummy",
+  icon: "",
+  label: "Select a provider",
+};
+
 const ProviderSelector: React.FC<ProviderSelectorProps> = ({
   selectProvider,
   enableExternal,
+  enableSkip,
 }) => {
-  const [provider, setProvider] = useState("skip");
+  const [provider, setProvider] = useState(() => {
+    if (enableSkip) {
+      return "skip";
+    }
+
+    return "dummy";
+  });
+
+  const availableOptions = useMemo(() => {
+    let options = [...baseOptions];
+    if (enableSkip) {
+      // Check if dummy option was deleted or not
+      const dummyOptionIndex = options.findIndex((o) => o.value === "dummy");
+      if (dummyOptionIndex >= 0) {
+        options.splice(dummyOptionIndex, 1);
+      }
+      options.unshift(skipOption);
+    } else {
+      // Check if skip option was deleted or not
+      const skipOptionIndex = options.findIndex((o) => o.value === "skip");
+      if (skipOptionIndex >= 0) {
+        options.splice(skipOptionIndex, 1);
+      }
+      if (!options.find((o) => o.value === "dummy")) {
+        options.unshift(dummyOption);
+      }
+    }
+
+    if (enableExternal) {
+      if (!options.find((o) => o.value === "external")) {
+        options.push(externalOption);
+      }
+    }
+
+    return [...options];
+  }, [enableSkip, enableExternal]);
 
   return (
     <>
       <Br />
       <Selector
         activeValue={provider}
-        options={providerOptions}
+        options={availableOptions}
         setActiveValue={(provider) => {
           setProvider(provider);
-          if (provider !== "skip" && provider !== "external") {
-            selectProvider(provider as SupportedProviders);
-          }
+          selectProvider(provider as SupportedProviders);
         }}
         width="100%"
         height="45px"

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

@@ -37,19 +37,6 @@ export type FlowType = {
 const flow: FlowType = {
   initial: "connect_source",
   steps: {
-    /*
-    new_project: {
-      url: "/onboarding/new-project",
-      on: {
-        continue: "connect_source",
-      },
-      execute: {
-        on: {
-          continue: "saveProjectData",
-        },
-      },
-    },
-    */
     connect_source: {
       url: "/onboarding/source",
       on: {
@@ -180,6 +167,7 @@ type StepHandlerType = {
     clearState: () => void;
     restoreState: (prevState: Partial<StepHandlerType>) => void;
     getStep: (nextStepName: string) => Step;
+    goTo: (step: string) => void;
   };
 };
 
@@ -220,6 +208,18 @@ export const StepHandler: StepHandlerType = proxy({
       }
       return nextStep;
     },
+    goTo: (step: string) => {
+      const newStep = StepHandler.actions.getStep(step);
+      if (!newStep) {
+        throw new Error(
+          "No next step name found, fix the action triggering nextStep"
+        );
+      }
+      StepHandler.currentStepName = step;
+      StepHandler.currentStep = newStep;
+      StepHandler.canGoBack = !!newStep?.on?.go_back;
+      return;
+    },
     clearState: () => {
       StepHandler.currentStepName = flow.initial;
       StepHandler.currentStep = flow.steps[flow.initial];

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

@@ -24,6 +24,10 @@ export const OFState = proxy({
       StepHandler.actions.nextStep(action);
       OFState.actions.saveState();
     },
+    goTo: (step: string) => {
+      StepHandler.actions.goTo(step);
+      OFState.actions.saveState();
+    },
     clearState: () => {
       StateHandler.actions.clearState();
       StepHandler.actions.clearState();

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

@@ -55,13 +55,7 @@ const ConnectRegistry: React.FC<{
           ? "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>
-      <ProviderSelector
-        selectProvider={(provider) => {
-          if (provider !== "external") {
-            onSelectProvider(provider);
-          }
-        }}
-      />
+
       {provider ? (
         <FormFlowWrapper
           provider={provider}
@@ -72,16 +66,26 @@ const ConnectRegistry: React.FC<{
           currentStep={step}
         />
       ) : (
-        <NextStep
-          text="Continue"
-          disabled={false}
-          onClick={() => onSkip()}
-          status={""}
-          makeFlush={true}
-          clearPosition={true}
-          statusPosition="right"
-          saveText=""
-        />
+        <>
+          <ProviderSelector
+            enableSkip
+            selectProvider={(provider) => {
+              if (provider !== "external") {
+                onSelectProvider(provider);
+              }
+            }}
+          />
+          <NextStep
+            text="Continue"
+            disabled={false}
+            onClick={() => onSkip()}
+            status={""}
+            makeFlush={true}
+            clearPosition={true}
+            statusPosition="right"
+            saveText=""
+          />
+        </>
       )}
     </Div>
   );

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

@@ -23,19 +23,22 @@ export const CredentialsForm: React.FC<{
 }> = ({ nextFormStep, project }) => {
   const location = useLocation();
   useEffect(() => {
-    api.getOAuthIds("<token>", {}, { project_id: project?.id }).then((res) => {
-      let tgtIntegration = res.data.find((integration: any) => {
-        return integration.client === "do";
-      });
-
-      if (tgtIntegration) {
-        nextFormStep({
-          credentials: {
-            id: tgtIntegration.id,
-          },
+    api
+      .getOAuthIds("<token>", {}, { project_id: project?.id })
+      .then((res) => {
+        let tgtIntegration = res.data.find((integration: any) => {
+          return integration.client === "do";
         });
-      }
-    });
+
+        if (tgtIntegration) {
+          nextFormStep({
+            credentials: {
+              id: tgtIntegration.id,
+            },
+          });
+        }
+      })
+      .catch(console.log);
   }, []);
 
   const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;

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

@@ -5,7 +5,6 @@ import React from "react";
 import { useParams } from "react-router";
 import styled from "styled-components";
 import ProviderSelector from "../../components/ProviderSelector";
-import ProvisionerStatus from "components/ProvisionerStatus";
 
 import FormFlowWrapper from "./forms/FormFlow";
 import ConnectExternalCluster from "./forms/_ConnectExternalCluster";
@@ -64,9 +63,6 @@ const ProvisionResources: React.FC<Props> = ({
         applications.
       </Helper>
 
-      {/* <ProvisionerStatus /> */}
-
-      
       {provider ? (
         provider !== "external" ? (
           <FormFlowWrapper
@@ -85,11 +81,11 @@ const ProvisionResources: React.FC<Props> = ({
             selectProvider={(provider) => {
               onSelectProvider(provider);
             }}
+            enableSkip={false}
             enableExternal={!shouldProvisionRegistry}
           />
         </>
       )}
-     
     </div>
   );
 };

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

@@ -1,7 +1,6 @@
 export type SupportedProviders = "aws" | "gcp" | "do";
 
 export enum Steps {
-  NEW_PROJECT = "new_project",
   CONNECT_SOURCE = "connect_source",
   CONNECT_REGISTRY = "connect_registry",
   PROVISION_RESOURCES = "provision_resources",