Merge branch 'nico/new-onboarding-flow' of https://github.com/porter-dev/porter into nico/new-onboarding-flow

merge remote

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

@@ -116,5 +116,11 @@ export const StateHandler = proxy({
         ...settings,
       };
     },
+    clearRegistryProvider: () => {
+      StateHandler.connected_registry.provider = "";
+    },
+    clearResourceProvisioningProvider: () => {
+      StateHandler.provision_resources.provider = "";
+    },
   },
 });

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

@@ -7,30 +7,26 @@ import { StepKey, Steps } from "../types";
 import { StateKeys } from "./StateHandler";
 
 type Step = {
-  previous?: StepKey;
   url: string;
   final?: true;
   substeps?: {
-    [key in string]: SubStep;
+    [key in string]: Step;
   };
   on?: ActionHandler;
   execute?: {
     on: {
       skip?: string;
       continue?: string;
+      go_back?: string;
     };
   };
 };
 
-type SubStep = Omit<Step, "previous"> & {
-  parent: StepKey;
-  previous?: string;
-};
-
-export type Action = "skip" | "continue";
+export type Action = "skip" | "continue" | "go_back";
 type ActionHandler = {
   skip?: string;
   continue: string;
+  go_back?: string;
 };
 
 export type FlowType = {
@@ -55,7 +51,6 @@ const flow: FlowType = {
       },
     },
     connect_source: {
-      previous: "new_project",
       url: "/onboarding/source",
       on: {
         continue: "connect_registry",
@@ -67,11 +62,11 @@ const flow: FlowType = {
       },
     },
     connect_registry: {
-      previous: "connect_source",
       url: "/onboarding/registry",
       on: {
         skip: "provision_resources",
         continue: "connect_registry.credentials",
+        go_back: "connect_source",
       },
       execute: {
         on: {
@@ -84,21 +79,23 @@ const flow: FlowType = {
           url: "/onboarding/registry/credentials",
           on: {
             continue: "connect_registry.settings",
+            go_back: "connect_registry",
           },
-          parent: "connect_registry",
+
           execute: {
             on: {
               continue: "saveRegistryCredentials",
+              go_back: "clearRegistryProvider",
             },
           },
         },
         settings: {
-          previous: "credentials",
           url: "/onboarding/registry/settings",
           on: {
             continue: "connect_registry.test_connection",
+            go_back: "connect_registry.credentials",
           },
-          parent: "connect_registry",
+
           execute: {
             on: {
               continue: "saveRegistrySettings",
@@ -106,21 +103,19 @@ const flow: FlowType = {
           },
         },
         test_connection: {
-          previous: "settings",
           url: "/onboarding/registry/test_connection",
           on: {
             continue: "provision_resources",
           },
-          parent: "connect_registry",
         },
       },
     },
     provision_resources: {
-      previous: "connect_registry",
       url: "/onboarding/provision",
       on: {
         skip: "provision_resources.connect_own_cluster",
         continue: "provision_resources.credentials",
+        go_back: "connect_registry",
       },
       execute: {
         on: {
@@ -133,26 +128,33 @@ const flow: FlowType = {
           url: "/onboarding/provision/connect_own_cluster",
           on: {
             continue: "clean_up",
+            go_back: "provision_resources",
+          },
+          execute: {
+            on: {
+              go_back: "clearResourceProvisioningProvider",
+            },
           },
-          parent: "provision_resources",
         },
         credentials: {
           url: "/onboarding/provision/credentials",
-          on: { continue: "provision_resources.settings" },
-          parent: "provision_resources",
+          on: {
+            continue: "provision_resources.settings",
+            go_back: "provision_resources",
+          },
           execute: {
             on: {
               continue: "saveResourceProvisioningCredentials",
+              go_back: "clearResourceProvisioningProvider",
             },
           },
         },
         settings: {
-          previous: "credentials",
           url: "/onboarding/provision/settings",
           on: {
             continue: "clean_up",
+            go_back: "provision_resources.credentials",
           },
-          parent: "provision_resources",
           execute: {
             on: {
               continue: "saveResourceProvisioningSettings",
@@ -171,12 +173,13 @@ const flow: FlowType = {
 type StepHandlerType = {
   flow: FlowType;
   currentStepName: string;
-  currentStep: Step | SubStep;
+  currentStep: Step;
+  canGoBack?: boolean;
   actions: {
     nextStep: (action?: Action) => void;
     clearState: () => void;
     restoreState: (prevState: Partial<StepHandlerType>) => void;
-    getStep: (nextStepName: string) => Step | SubStep;
+    getStep: (nextStepName: string) => Step;
   };
 };
 
@@ -199,9 +202,10 @@ export const StepHandler: StepHandlerType = proxy({
           "No next step name found, fix the action triggering nextStep"
         );
       }
-
+      const newStep = StepHandler.actions.getStep(nextStepName);
       StepHandler.currentStepName = nextStepName;
-      StepHandler.currentStep = StepHandler.actions.getStep(nextStepName);
+      StepHandler.currentStep = newStep;
+      StepHandler.canGoBack = !!newStep?.on?.go_back;
       return;
     },
     getStep: (nextStepName: string) => {
@@ -209,7 +213,7 @@ export const StepHandler: StepHandlerType = proxy({
 
       const step = flow.steps[stepName as Steps];
 
-      let nextStep: Step | SubStep = step;
+      let nextStep: Step = step;
 
       if (substep) {
         nextStep = step.substeps[substep];

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

@@ -6,13 +6,14 @@ import { useParams } from "react-router";
 
 import styled from "styled-components";
 import ProviderSelector from "../../components/ProviderSelector";
-import { ConnectedRegistryConfig } from "../../state/StateHandler";
 import { SupportedProviders } from "../../types";
+import backArrow from "assets/back_arrow.png";
 
 import FormFlowWrapper from "./forms/FormFlow";
 
 const ConnectRegistry: React.FC<{
   provider: SupportedProviders;
+  enable_go_back: boolean;
   project: {
     id: number;
     name: string;
@@ -22,6 +23,7 @@ const ConnectRegistry: React.FC<{
   onSaveSettings: (settings: any) => void;
   onSuccess: () => void;
   onSkip: () => void;
+  goBack: () => void;
 }> = ({
   onSelectProvider,
   onSaveCredentials,
@@ -30,13 +32,24 @@ const ConnectRegistry: React.FC<{
   onSkip,
   project,
   provider,
+  enable_go_back,
+  goBack,
 }) => {
   const { step } = useParams<any>();
 
   return (
     <>
+      {enable_go_back && (
+        <BackButton
+          onClick={() => {
+            goBack();
+          }}
+        >
+          <BackButtonImg src={backArrow} />
+        </BackButton>
+      )}
       <TitleSection>Getting Started</TitleSection>
-      <Subtitle>Step 2 of 3</Subtitle>
+      <Subtitle>Step 2 of 3 - Connect an Existing Registry (Optional)</Subtitle>
       <Helper>
         {provider
           ? "Link to an existing Docker registry. Don't worry if you don't know what this is"
@@ -86,3 +99,28 @@ const Subtitle = styled(TitleSection)`
 const NextStep = styled(SaveButton)`
   margin-top: 24px;
 `;
+
+const BackButton = styled.div`
+  margin-bottom: 24px;
+  display: flex;
+  width: 36px;
+  cursor: pointer;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #ffffff55;
+  border-radius: 100px;
+  background: #ffffff11;
+
+  :hover {
+    background: #ffffff22;
+    > img {
+      opacity: 1;
+    }
+  }
+`;
+
+const BackButtonImg = styled.img`
+  width: 16px;
+  opacity: 0.75;
+`;

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

@@ -16,6 +16,8 @@ const ConnectRegistryWrapper = () => {
       onSaveSettings={(data) => OFState.actions.nextStep("continue", data)}
       onSuccess={() => OFState.actions.nextStep("continue")}
       onSkip={() => OFState.actions.nextStep("skip")}
+      enable_go_back={snap.StepHandler.canGoBack}
+      goBack={() => OFState.actions.nextStep("go_back")}
     />
   );
 };

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

@@ -9,9 +9,11 @@ import ProviderSelector from "../../components/ProviderSelector";
 import FormFlowWrapper from "./forms/FormFlow";
 import ConnectExternalCluster from "./forms/_ConnectExternalCluster";
 import { SupportedProviders } from "../../types";
+import backArrow from "assets/back_arrow.png";
 
 type Props = {
   provider: SupportedProviders | "external";
+  enable_go_back: boolean;
   project: {
     id: number;
     name: string;
@@ -22,6 +24,7 @@ type Props = {
   onSaveSettings: (settings: any) => void;
   onSuccess: () => void;
   onSkip: () => void;
+  goBack: () => void;
 };
 
 const ProvisionResources: React.FC<Props> = ({
@@ -32,13 +35,25 @@ const ProvisionResources: React.FC<Props> = ({
   onSaveCredentials,
   onSaveSettings,
   onSuccess,
+
+  enable_go_back,
+  goBack,
 }) => {
   const { step } = useParams<{ step: any }>();
 
   return (
     <>
+      {enable_go_back && (
+        <BackButton
+          onClick={() => {
+            goBack();
+          }}
+        >
+          <BackButtonImg src={backArrow} />
+        </BackButton>
+      )}
       <TitleSection>Getting Started</TitleSection>
-      <Subtitle>Step 3 of 3</Subtitle>
+      <Subtitle>Step 3 of 3 - Provision resources</Subtitle>
       <Helper>
         Porter automatically creates a cluster and registry in your cloud to run
         applications.
@@ -79,3 +94,28 @@ const Subtitle = styled(TitleSection)`
 const NextStep = styled(SaveButton)`
   margin-top: 24px;
 `;
+
+const BackButton = styled.div`
+  margin-bottom: 24px;
+  display: flex;
+  width: 36px;
+  cursor: pointer;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #ffffff55;
+  border-radius: 100px;
+  background: #ffffff11;
+
+  :hover {
+    background: #ffffff22;
+    > img {
+      opacity: 1;
+    }
+  }
+`;
+
+const BackButtonImg = styled.img`
+  width: 16px;
+  opacity: 0.75;
+`;

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

@@ -17,6 +17,8 @@ const ProvisionResourcesWrapper = () => {
       onSaveSettings={(data) => OFState.actions.nextStep("continue", data)}
       onSuccess={() => OFState.actions.nextStep("continue")}
       onSkip={() => OFState.actions.nextStep("skip")}
+      enable_go_back={snap.StepHandler.canGoBack}
+      goBack={() => OFState.actions.nextStep("go_back")}
     />
   );
 };