Fixed onboarding and changed provider to be a select

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,54 +9,96 @@ 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,
-    label: "Amazon Elastic Container Registry (ECR)" 
+    label: "Amazon Elastic Container Registry (ECR)",
   },
-  { 
+  {
     value: "gcp",
     icon: integrationList["gcp"].icon,
-    label: "Google Cloud Registry (GCR)" 
+    label: "Google Cloud Registry (GCR)",
   },
-  { 
+  {
     value: "do",
     icon: integrationList["do"].icon,
-    label: "DigitalOcean Container Registry (DOCR)" 
+    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}
-        setActiveValue={provider => {
+        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

@@ -35,19 +35,8 @@ export type FlowType = {
 };
 
 const flow: FlowType = {
-  initial: "new_project",
+  initial: "connect_source",
   steps: {
-    new_project: {
-      url: "/onboarding/new-project",
-      on: {
-        continue: "connect_source",
-      },
-      execute: {
-        on: {
-          continue: "saveProjectData",
-        },
-      },
-    },
     connect_source: {
       url: "/onboarding/source",
       on: {
@@ -178,6 +167,7 @@ type StepHandlerType = {
     clearState: () => void;
     restoreState: (prevState: Partial<StepHandlerType>) => void;
     getStep: (nextStepName: string) => Step;
+    goTo: (step: string) => void;
   };
 };
 
@@ -218,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/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/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",