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

.dockerignore

@@ -1 +1,4 @@
-/dashboard/node_modules
+/dashboard/node_modules
+.env
+docker/.env
+*.db

dashboard/.dockerignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+.env

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

@@ -1,7 +1,9 @@
 import Helper from "components/form-components/Helper";
 import InputRow from "components/form-components/InputRow";
 import SaveButton from "components/SaveButton";
+import RegistryImageList from "main/home/onboarding/components/RegistryImageList";
 import { OFState } from "main/home/onboarding/state";
+import { StateHandler } from "main/home/onboarding/state/StateHandler";
 import { DORegistryConfig } from "main/home/onboarding/types";
 import React, { useEffect, useState } from "react";
 import { useLocation } from "react-router";
@@ -86,7 +88,9 @@ export const SettingsForm: React.FC<{
 
   return (
     <>
-      <Helper>Provide a name for Porter to use when displaying your registry.</Helper>
+      <Helper>
+        Provide a name for Porter to use when displaying your registry.
+      </Helper>
       <InputRow
         type="text"
         value={registryName}
@@ -128,8 +132,13 @@ export const TestRegistryConnection: React.FC<{
   nextFormStep: () => void;
   project: any;
 }> = ({ nextFormStep }) => {
+  const snap = useSnapshot(StateHandler);
   return (
     <>
+      <RegistryImageList
+        project={snap.project}
+        registry_id={snap.connected_registry.settings.registry_connection_id}
+      />
       <SaveButton
         text="Continue"
         disabled={false}

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

@@ -2,7 +2,9 @@ import Helper from "components/form-components/Helper";
 import InputRow from "components/form-components/InputRow";
 import UploadArea from "components/form-components/UploadArea";
 import SaveButton from "components/SaveButton";
+import RegistryImageList from "main/home/onboarding/components/RegistryImageList";
 import { OFState } from "main/home/onboarding/state";
+import { StateHandler } from "main/home/onboarding/state/StateHandler";
 import { GCPRegistryConfig } from "main/home/onboarding/types";
 import React, { useState } from "react";
 import api from "shared/api";
@@ -163,7 +165,9 @@ export const SettingsForm: React.FC<{
   };
   return (
     <>
-      <Helper>Provide a name for Porter to use when displaying your registry.</Helper>
+      <Helper>
+        Provide a name for Porter to use when displaying your registry.
+      </Helper>
       <InputRow
         type="text"
         value={registryName}
@@ -205,8 +209,13 @@ export const TestRegistryConnection: React.FC<{
   nextFormStep: () => void;
   project: any;
 }> = ({ nextFormStep, project }) => {
+  const snap = useSnapshot(StateHandler);
   return (
     <>
+      <RegistryImageList
+        project={snap.project}
+        registry_id={snap.connected_registry.settings.registry_connection_id}
+      />
       <SaveButton
         text="Continue"
         disabled={false}

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

@@ -21,7 +21,11 @@ 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 && !snap.StepHandler.isSubFlow}
+      enable_go_back={
+        snap.StepHandler.canGoBack &&
+        (!snap.StepHandler.isSubFlow ||
+          snap.StepHandler.currentStepName.includes("connect_own_cluster"))
+      }
       goBack={() => OFState.actions.nextStep("go_back")}
     />
   );

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

@@ -52,7 +52,7 @@ export const SharedStatus: React.FC<{
         res.data.forEach((infra : any) => {
           // if filter list is empty, add infra automatically
           if (filter.length == 0) {
-            matchedInfras.set(infra.kind, infra)
+            matchedInfras.set(infra.kind + "-" + infra.id, infra)
           } else if (filter.includes(infra.kind) && matchedInfras.get(infra.Kind)?.id || 0 < infra.id) {
             matchedInfras.set(infra.kind, infra)
           }

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

@@ -1,6 +1,8 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import TabSelector from "components/TabSelector";
+import api from "shared/api";
+import SaveButton from "components/SaveButton";
 
 type Props = {
   nextStep: () => void;
@@ -19,6 +21,36 @@ const tabOptions = [{ label: "MacOS", value: "mac" }];
 const ConnectExternalCluster: React.FC<Props> = ({ nextStep, project }) => {
   const [currentPage, setCurrentPage] = useState(0);
   const [currentTab, setCurrentTab] = useState("mac");
+  const [enableContinue, setEnableContinue] = useState(false);
+
+  const getClusters = async (
+    status: { isSubscribed: boolean },
+    retryCount = 0
+  ) => {
+    try {
+      api.getClusters("<token>", {}, { id: project.id }).then((res) => {
+        if (Array.isArray(res.data) && res.data.length > 0) {
+          if (status.isSubscribed) {
+            setEnableContinue(true);
+          }
+        } else {
+          if (status.isSubscribed) {
+            setTimeout(() => {
+              getClusters(status, retryCount + 1);
+            }, 1000);
+          }
+        }
+      });
+    } catch (error) {}
+  };
+
+  useEffect(() => {
+    let status = { isSubscribed: true };
+    getClusters(status);
+    return () => {
+      status.isSubscribed = false;
+    };
+  }, []);
 
   const renderPage = () => {
     switch (currentPage) {
@@ -118,12 +150,26 @@ const ConnectExternalCluster: React.FC<Props> = ({ nextStep, project }) => {
           arrow_forward
         </i>
       </PageSection>
+      <NextStep
+        text="Continue"
+        disabled={!enableContinue}
+        onClick={() => nextStep()}
+        status={""}
+        makeFlush={true}
+        clearPosition={true}
+        statusPosition="right"
+        saveText=""
+      />
     </StyledClusterInstructionsModal>
   );
 };
 
 export default ConnectExternalCluster;
 
+const NextStep = styled(SaveButton)`
+  margin-top: 24px;
+`;
+
 const PageCount = styled.div`
   margin-right: 9px;
   user-select: none;