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

dashboard/src/components/form-components/UploadArea.tsx

@@ -89,6 +89,7 @@ const Message = styled.div`
   display: flex;
   align-items: center;
   vertical-align: middle;
+  font-size: 13px;
 `;
 
 const Required = styled.div`

dashboard/src/main/home/Home.tsx

@@ -251,7 +251,7 @@ class Home extends Component<PropsType, StateType> {
       !this.props.history.location.pathname.includes("new-project") &&
       !this.props.history.location.pathname.includes("project-settings")
     ) {
-      //this.context.setCurrentModal("RedirectToOnboardingModal");
+      this.context.setCurrentModal("RedirectToOnboardingModal");
     }
     if (prevProps.currentProject?.id !== this.props.currentProject?.id) {
       this.checkOnboarding();

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

@@ -61,7 +61,7 @@ export const provisionerOptionsWithExternal = [
   {
     value: "external",
     icon: integrationList["kubernetes"]?.icon,
-    label: "Link to an existing cluster",
+    label: "Link an existing cluster",
   },
 ];
 

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

@@ -45,6 +45,7 @@ const RegistryImageList: React.FC<{
 
   return (
     <>
+      <Helper>Porter was able to successfully connect to your registry:</Helper>
       <ImageList>
 
         {
@@ -60,7 +61,6 @@ const RegistryImageList: React.FC<{
           )
         }
       </ImageList>
-      <Helper>Porter was able to successfully connect to your registry.</Helper>
       <Br />
     </>
   );
@@ -80,7 +80,7 @@ const Placeholder = styled.div`
 
 const Br = styled.div`
   width: 100%;
-  height: 10px;
+  height: 15px;
 `;
 
 const ImageRow = styled.div<{ isLast?: boolean }>`
@@ -102,6 +102,8 @@ const ImageRow = styled.div<{ isLast?: boolean }>`
 const ImageList = styled.div`
   border-radius: 5px;
   border: 1px solid #aaaabb;
+  max-height: 300px;
+  overflow-y: auto;
   background: #ffffff11;
-  margin: 25px 0 20px;
+  margin: 20px 0 20px;
 `;

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

@@ -51,7 +51,7 @@ export const CredentialsForm: React.FC<{
       target={"_blank"}
       href={`/api/projects/${project?.id}/oauth/digitalocean?redirect_uri=${encoded_redirect_uri}`}
     >
-      Connect Digital Ocean
+      Sign in to Digital Ocean
     </ConnectDigitalOceanButton>
   );
 };
@@ -136,6 +136,7 @@ export const TestRegistryConnection: React.FC<{
   return (
     <>
       <RegistryImageList
+        registryType="docker"
         project={snap.project}
         registry_id={snap.connected_registry.settings.registry_connection_id}
       />

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

@@ -213,6 +213,7 @@ export const TestRegistryConnection: React.FC<{
   return (
     <>
       <RegistryImageList
+        registryType="gcr"
         project={snap.project}
         registry_id={snap.connected_registry.settings.registry_connection_id}
       />

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

@@ -50,47 +50,43 @@ const ProvisionResources: React.FC<Props> = ({
       case "credentials":
       case "settings":
         return (
-          <>
-            <FormFlowWrapper
-              provider={provider}
-              currentStep={step}
-              onSaveCredentials={onSaveCredentials}
-              onSaveSettings={onSaveSettings}
-              project={project}
-              goBack={goBack}
-            />
-          </>
+          <FormFlowWrapper
+            provider={provider}
+            currentStep={step}
+            onSaveCredentials={onSaveCredentials}
+            onSaveSettings={onSaveSettings}
+            project={project}
+            goBack={goBack}
+          />
         );
       case "status":
         return (
-          <>
-            <SharedStatus
-              project_id={project?.id}
-              filter={[]}
-              nextFormStep={console.log}
-            />
-          </>
+          <SharedStatus
+            project_id={project?.id}
+            filter={[]}
+            nextFormStep={console.log}
+          />
         );
       case "connect_own_cluster":
         return (
-          <>
-            <ConnectExternalCluster nextStep={onSuccess} project={project} />
-          </>
+          <ConnectExternalCluster 
+            nextStep={onSuccess} 
+            project={project} 
+            goBack={goBack}
+          />
         );
       default:
         return (
-          <>
-            <ProviderSelector
-              selectProvider={(provider) => {
-                onSelectProvider(provider);
-              }}
-              options={
-                shouldProvisionRegistry
-                  ? provisionerOptions
-                  : provisionerOptionsWithExternal
-              }
-            />
-          </>
+          <ProviderSelector
+            selectProvider={(provider) => {
+              onSelectProvider(provider);
+            }}
+            options={
+              shouldProvisionRegistry
+                ? provisionerOptions
+                : provisionerOptionsWithExternal
+            }
+          />
         );
     }
   };

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

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

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

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import TabSelector from "components/TabSelector";
 import api from "shared/api";
 import SaveButton from "components/SaveButton";
+import { integrationList } from "shared/common";
 
 type Props = {
   nextStep: () => void;
@@ -10,6 +11,7 @@ type Props = {
     id: number;
     name: string;
   };
+  goBack: () => void;
 };
 
 const tabOptions = [{ label: "MacOS", value: "mac" }];
@@ -18,7 +20,7 @@ const tabOptions = [{ label: "MacOS", value: "mac" }];
  * @todo Poll the available clusters until there's at least one connected
  * to the project
  */
-const ConnectExternalCluster: React.FC<Props> = ({ nextStep, project }) => {
+const ConnectExternalCluster: React.FC<Props> = ({ nextStep, project, goBack }) => {
   const [currentPage, setCurrentPage] = useState(0);
   const [currentTab, setCurrentTab] = useState("mac");
   const [enableContinue, setEnableContinue] = useState(false);
@@ -124,6 +126,13 @@ const ConnectExternalCluster: React.FC<Props> = ({ nextStep, project }) => {
 
   return (
     <StyledClusterInstructionsModal>
+      <FormHeader>
+        <CloseButton onClick={() => goBack()}>
+          <i className="material-icons">keyboard_backspace</i>
+        </CloseButton>
+        <img src={integrationList["kubernetes"].icon} />
+        Link an existing cluster
+      </FormHeader>
       <TabSelector
         options={tabOptions}
         currentTab={currentTab}
@@ -166,6 +175,43 @@ const ConnectExternalCluster: React.FC<Props> = ({ nextStep, project }) => {
 
 export default ConnectExternalCluster;
 
+const CloseButton = styled.div`
+  width: 30px;
+  height: 30px;
+  margin-left: -5px;
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  border-radius: 50%;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+  :hover {
+    background-color: #ffffff11;
+  }
+
+  > i {
+    font-size: 20px;
+    color: #aaaabb;
+  }
+`;
+
+const FormHeader = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  font-size: 13px;
+  margin-top: -2px;
+  font-weight: 500;
+
+  > img {
+    height: 18px;
+    margin-right: 12px;
+  }
+`;
+
 const NextStep = styled(SaveButton)`
   margin-top: 24px;
 `;
@@ -259,32 +305,11 @@ const ModalTitle = styled.div`
   text-overflow: ellipsis;
 `;
 
-const CloseButton = styled.div`
-  position: absolute;
-  display: block;
-  width: 40px;
-  height: 40px;
-  padding: 13px 0 12px 0;
-  z-index: 1;
-  text-align: center;
-  border-radius: 50%;
-  right: 15px;
-  top: 12px;
-  cursor: pointer;
-  :hover {
-    background-color: #ffffff11;
-  }
-`;
-
-const CloseButtonImg = styled.img`
-  width: 14px;
-  margin: 0 auto;
-`;
-
 const StyledClusterInstructionsModal = styled.div`
   width: 100%;
-  height: 100%;
+  padding: 20px 20px 23px;
+  border-radius: 5px;
   overflow: hidden;
-  border-radius: 6px;
-  background: #202227;
+  background: #ffffff0a;
+  border: 1px solid #ffffff55;
 `;

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

@@ -66,7 +66,7 @@ export const CredentialsForm: React.FC<{
         target={"_blank"}
         href={`/api/projects/${project?.id}/oauth/digitalocean`}
       >
-        Connect Digital Ocean
+        Sign In to Digital Ocean
       </ConnectDigitalOceanButton>
     </>
   );
@@ -265,6 +265,7 @@ const ConnectDigitalOceanButton = styled.a`
   flex-direction: row;
   align-items: center;
   font-size: 13px;
+  margin-top: 22px;
   cursor: pointer;
   font-family: "Work Sans", sans-serif;
   color: white;