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

api/types/infra.go

@@ -1,5 +1,7 @@
 package types
 
+import "time"
+
 // InfraStatus is the status that an infrastructure can take
 type InfraStatus string
 
@@ -29,6 +31,9 @@ const (
 type Infra struct {
 	ID uint `json:"id"`
 
+	CreatedAt time.Time `json:"created_at"`
+	UpdatedAt time.Time `json:"updated_at"`
+
 	// The project that this integration belongs to
 	ProjectID uint `json:"project_id"`
 

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

@@ -8,11 +8,19 @@ export type ProviderSelectorProps = {
   selectProvider: (
     provider: SupportedProviders | (SupportedProviders | "external")
   ) => void;
-  enableExternal?: boolean;
-  enableSkip?: boolean;
+  options: {
+    value: string;
+    icon: string;
+    label: string;
+  }[];
 };
 
-const baseOptions = [
+export const registryOptions = [
+  {
+    value: "skip",
+    label: "Skip / I don't know what this is",
+    icon: "",
+  },
   {
     value: "aws",
     icon: integrationList["aws"]?.icon,
@@ -30,69 +38,50 @@ const baseOptions = [
   },
 ];
 
-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",
-};
+export const provisionerOptions = [
+  {
+    value: "aws",
+    icon: integrationList["aws"]?.icon,
+    label: "Amazon Web Services (AWS)",
+  },
+  {
+    value: "gcp",
+    icon: integrationList["gcp"]?.icon,
+    label: "Google Cloud Platform (GCP)",
+  },
+  {
+    value: "do",
+    icon: integrationList["do"]?.icon,
+    label: "DigitalOcean (DO)",
+  },
+];
 
-const dummyOption = {
-  value: "dummy",
-  icon: "",
-  label: "Select a cloud provider",
-};
+export const provisionerOptionsWithExternal = [
+  ...provisionerOptions,
+  {
+    value: "external",
+    icon: integrationList["kubernetes"]?.icon,
+    label: "Link to an existing cluster",
+  },
+];
 
 const ProviderSelector: React.FC<ProviderSelectorProps> = ({
   selectProvider,
-  enableExternal,
-  enableSkip,
+  options,
 }) => {
   const [provider, setProvider] = useState(() => {
-    if (enableSkip) {
+    if (options.find((o) => o.value === "skip")) {
       return "skip";
     }
-
     return null;
   });
 
-  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 (enableExternal) {
-      if (!options.find((o) => o.value === "external")) {
-        options.push(externalOption);
-      }
-    }
-
-    return [...options];
-  }, [enableSkip, enableExternal]);
-
   return (
     <>
       <Br />
       <Selector
         activeValue={provider}
-        options={availableOptions}
+        options={options}
         placeholder="Select a cloud provider"
         setActiveValue={(provider) => {
           setProvider(provider);

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

@@ -93,6 +93,12 @@ const flow: FlowType = {
           url: "/onboarding/registry/test_connection",
           on: {
             continue: "provision_resources",
+            /**
+             * Enable this go_back as soon as connect registry
+             * has a proper way of listing the registries and
+             * manage them inside the step
+             */
+            // go_back: "connect_registry",
           },
         },
       },
@@ -102,7 +108,12 @@ const flow: FlowType = {
       on: {
         skip: "provision_resources.connect_own_cluster",
         continue: "provision_resources.credentials",
-        go_back: "connect_registry",
+        /**
+         * Enable this go_back as soon as connect registry
+         * has a proper way of listing the registries and
+         * manage them inside the step
+         */
+        // go_back: "connect_registry",
       },
       execute: {
         on: {

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

@@ -5,7 +5,9 @@ import React from "react";
 import { useParams } from "react-router";
 
 import styled from "styled-components";
-import ProviderSelector from "../../components/ProviderSelector";
+import ProviderSelector, {
+  registryOptions,
+} from "../../components/ProviderSelector";
 import { SupportedProviders } from "../../types";
 import backArrow from "assets/back_arrow.png";
 
@@ -56,7 +58,7 @@ const ConnectRegistry: React.FC<{
           : "Link to an existing Docker registry or continue."}
       </Helper>
 
-      {provider ? (
+      {step ? (
         <FormFlowWrapper
           provider={provider}
           onSaveCredentials={onSaveCredentials}
@@ -64,16 +66,17 @@ const ConnectRegistry: React.FC<{
           onSuccess={onSuccess}
           project={project}
           currentStep={step}
+          goBack={goBack}
         />
       ) : (
         <>
           <ProviderSelector
-            enableSkip
             selectProvider={(provider) => {
               if (provider !== "external") {
                 onSelectProvider(provider);
               }
             }}
+            options={registryOptions}
           />
           <NextStep
             text="Continue"

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

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

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

@@ -64,6 +64,7 @@ type Props = {
   onSuccess: () => void;
   project: { id: number; name: string };
   currentStep: "credentials" | "settings" | "test_connection";
+  goBack: () => void;
 };
 
 const FormFlowWrapper: React.FC<Props> = ({
@@ -73,6 +74,7 @@ const FormFlowWrapper: React.FC<Props> = ({
   provider,
   project,
   currentStep,
+  goBack,
 }) => {
   const nextFormStep = (
     data?: Partial<Exclude<ConnectedRegistryConfig, SkipRegistryConnection>>
@@ -106,13 +108,13 @@ const FormFlowWrapper: React.FC<Props> = ({
   return (
     <FormWrapper>
       <FormHeader>
-        <CloseButton onClick={() => alert("go back")}>
+        <CloseButton onClick={() => goBack()}>
           <i className="material-icons">keyboard_backspace</i>
         </CloseButton>
         {FormTitle[provider] && <img src={FormTitle[provider].icon} />}
         {FormTitle[provider].label}
       </FormHeader>
-      <Breadcrumb 
+      <Breadcrumb
         currentStep={currentStep}
         steps={[
           { value: "credentials", label: "Credentials" },

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

@@ -4,7 +4,10 @@ import TitleSection from "components/TitleSection";
 import React from "react";
 import { useParams } from "react-router";
 import styled from "styled-components";
-import ProviderSelector from "../../components/ProviderSelector";
+import ProviderSelector, {
+  provisionerOptions,
+  provisionerOptionsWithExternal,
+} from "../../components/ProviderSelector";
 
 import FormFlowWrapper from "./forms/FormFlow";
 import ConnectExternalCluster from "./forms/_ConnectExternalCluster";
@@ -61,7 +64,7 @@ const ProvisionResources: React.FC<Props> = ({
         return (
           <>
             <SharedStatus
-              project_id={project.id}
+              project_id={project?.id}
               filter={[]}
               nextFormStep={console.log}
             />
@@ -80,8 +83,11 @@ const ProvisionResources: React.FC<Props> = ({
               selectProvider={(provider) => {
                 onSelectProvider(provider);
               }}
-              enableSkip={false}
-              enableExternal={!shouldProvisionRegistry}
+              options={
+                shouldProvisionRegistry
+                  ? provisionerOptions
+                  : provisionerOptionsWithExternal
+              }
             />
           </>
         );

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

@@ -281,7 +281,7 @@ export const Status: React.FC<{
   return (
     <SharedStatus
       nextFormStep={nextFormStep}
-      project={project}
+      project_id={project?.id}
       filter={["eks", "ecr"]}
     />
   );

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

@@ -235,7 +235,7 @@ export const Status: React.FC<{
   return (
     <SharedStatus
       nextFormStep={nextFormStep}
-      project={project}
+      project_id={project?.id}
       filter={["doks", "docr"]}
     />
   );

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

@@ -257,7 +257,7 @@ export const Status: React.FC<{
   return (
     <SharedStatus
       nextFormStep={nextFormStep}
-      project={project}
+      project_id={project?.id}
       filter={["gke", "gcr"]}
     />
   );

docker/dev.Dockerfile

@@ -10,8 +10,7 @@ RUN go mod download
 
 COPY . ./
 
-RUN go build -ldflags '-w -s' -a -o ./bin/migrate ./cmd/migrate \
-    && chmod +x /porter/docker/bin/*
+RUN chmod +x /porter/docker/bin/*
 
 # for live reloading of go container
 RUN go get github.com/cosmtrek/air

internal/models/infra.go

@@ -54,6 +54,8 @@ type Infra struct {
 func (i *Infra) ToInfraType() *types.Infra {
 	return &types.Infra{
 		ID:               i.ID,
+		CreatedAt:        i.CreatedAt,
+		UpdatedAt:        i.UpdatedAt,
 		ProjectID:        i.ProjectID,
 		Kind:             i.Kind,
 		Status:           i.Status,