Modified step handler to include data for finished onboardings

dashboard/src/main/home/ModalHandler.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import useAuth from "shared/auth/useAuth";
 import { Context } from "shared/Context";
 import Modal from "./modals/Modal";
@@ -15,9 +15,24 @@ const ModalHandler: React.FC<{
   setRefreshClusters: (x: boolean) => void;
 }> = ({ setRefreshClusters }) => {
   const [isAuth] = useAuth();
-  const { currentModal, setCurrentModal } = useContext(Context);
+  const { currentModal, setCurrentModal, currentProject } = useContext(Context);
+
+  useEffect(() => {
+    const projectOnboarding = localStorage.getItem(
+      `onboarding-${currentProject?.id}`
+    );
+    const parsedProjectOnboarding = JSON.parse(projectOnboarding);
+    if (parsedProjectOnboarding?.StepHandler?.finishedOnboarding === false) {
+      setCurrentModal("RedirectToOnboarding");
+    }
+  }, [currentProject?.id]);
+
   return (
     <>
+      {currentModal === "RedirectToOnboarding" && (
+        <a href="/onboarding/new-project"></a>
+      )}
+
       {currentModal === "ClusterInstructionsModal" && (
         <Modal
           onRequestClose={() => setCurrentModal(null, null)}

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

@@ -22,10 +22,16 @@ const Onboarding = () => {
 
   useEffect(() => {
     console.log(location);
-    if (snap.StepHandler.currentStep.url !== location.pathname) {
+    if (snap.StepHandler.finishedOnboarding) {
+      pushFiltered("/dashboard", []);
+    } else if (snap.StepHandler.currentStep.url !== location.pathname) {
       pushFiltered(snap.StepHandler.currentStep.url, []);
     }
-  }, [location.pathname, snap.StepHandler.currentStep.url]);
+  }, [
+    location.pathname,
+    snap.StepHandler.currentStep.url,
+    snap.StepHandler.finishedOnboarding,
+  ]);
 
   return (
     <StyledOnboarding>

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

@@ -40,7 +40,6 @@ const flow: FlowType = {
     provision_resources: {
       previous: "connect_registry",
       url: "/onboarding/provision",
-      final: true,
       state_key: "provision_resources",
     },
   },
@@ -50,8 +49,9 @@ type StepHandlerType = {
   flow: FlowType;
   currentStepName: StepKey;
   currentStep: Step;
+  finishedOnboarding: boolean;
   actions: {
-    nextStep: () => { redirectUrl: string };
+    nextStep: () => void;
     clearState: () => void;
     restoreState: (prevState: StepHandlerType) => void;
   };
@@ -61,21 +61,19 @@ export const StepHandler: StepHandlerType = proxy({
   flow,
   currentStepName: flow.initial,
   currentStep: flow.steps[flow.initial],
+  finishedOnboarding: false,
   actions: {
     nextStep: () => {
       const cs = StepHandler.currentStep;
       if (cs.final) {
-        return {
-          redirectUrl: "/dashboard?tab=provisioner",
-        };
+        StepHandler.finishedOnboarding = true;
+        return;
       }
       const nextStepName = cs.next;
       const nextStep = flow.steps[nextStepName];
       StepHandler.currentStep = nextStep;
       StepHandler.currentStepName = nextStepName;
-      return {
-        redirectUrl: nextStep.url,
-      };
+      return;
     },
     clearState: () => {
       StepHandler.currentStepName = flow.initial;

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

@@ -24,10 +24,15 @@ export const OFState = proxy({
     },
     saveState: () => {
       const state = JSON.stringify(OFState);
-      localStorage.setItem(`${OFState.StateHandler.project.id}`, state);
+      localStorage.setItem(
+        `onboarding-${OFState.StateHandler.project.id}`,
+        state
+      );
     },
     restoreState: (projectId: number) => {
-      const notParsedPrevState = localStorage.getItem(`${projectId}`);
+      const notParsedPrevState = localStorage.getItem(
+        `onboarding-${projectId}`
+      );
       if (!notParsedPrevState) {
         return;
       }