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

mergin

dashboard/src/components/Boilerplate.tsx

@@ -2,17 +2,12 @@ import React, { useState } from "react";
 
 import styled from "styled-components";
 
-type Props = {
-};
+type Props = {};
 
 export const Boilerplate: React.FC<Props> = (props) => {
   const [someState, setSomeState] = useState("");
 
-  return (
-    <StyledBoilerplate>
-    </StyledBoilerplate>
-  );
+  return <StyledBoilerplate></StyledBoilerplate>;
 };
 
-const StyledBoilerplate = styled.div`
-`;
+const StyledBoilerplate = styled.div``;

dashboard/src/components/Selector.tsx

@@ -173,13 +173,11 @@ export default class Selector extends Component<PropsType, StateType> {
           <Flex>
             {this.renderIcon()}
             <TextWrap>
-              {
-                activeValue ? (
-                  activeValue === "" ? "All" : this.getLabel(activeValue)
-                ) : (
-                  this.props.placeholder
-                )
-              }
+              {activeValue
+                ? activeValue === ""
+                  ? "All"
+                  : this.getLabel(activeValue)
+                : this.props.placeholder}
             </TextWrap>
           </Flex>
           <i className="material-icons">arrow_drop_down</i>

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

@@ -12,6 +12,7 @@ type PropsType = {
   width?: string;
   dropdownMaxHeight?: string;
   scrollBuffer?: boolean;
+  doc?: string;
 };
 
 type StateType = {};
@@ -20,7 +21,14 @@ export default class SelectRow extends Component<PropsType, StateType> {
   render() {
     return (
       <StyledSelectRow>
-        <Label>{this.props.label}</Label>
+        <Wrapper>
+          <Label>{this.props.label}</Label>
+          {this.props.doc ? (
+            <a href={this.props.doc} target="_blank">
+              <i className="material-icons">help_outline</i>
+            </a>
+          ) : null}
+        </Wrapper>
         <SelectWrapper>
           <Selector
             scrollBuffer={this.props.scrollBuffer}
@@ -40,6 +48,23 @@ export default class SelectRow extends Component<PropsType, StateType> {
 
 const SelectWrapper = styled.div``;
 
+const Wrapper = styled.div`
+  display: flex;
+  align-items; center;
+
+  > a {
+    > i {
+      font-size: 18px;
+      margin-left: 8px;
+      margin-top: 2px;
+      color: #8590ff;
+      :hover {
+        color: #aaaabb;
+      }
+    }
+  }
+`;
+
 const Label = styled.div`
   color: #ffffff;
   margin-bottom: 10px;

dashboard/src/main/home/modals/Modal.tsx

@@ -40,13 +40,11 @@ export default class Modal extends Component<PropsType, StateType> {
     return (
       <Overlay>
         <StyledModal ref={this.wrapperRef} width={width} height={height}>
-          {
-            this.props.onRequestClose && (
-              <CloseButton onClick={this.props.onRequestClose}>
-                <i className="material-icons">close</i>
-              </CloseButton>
-            )
-          }
+          {this.props.onRequestClose && (
+            <CloseButton onClick={this.props.onRequestClose}>
+              <i className="material-icons">close</i>
+            </CloseButton>
+          )}
           {this.props.title && <ModalTitle>{this.props.title}</ModalTitle>}
           {this.props.children}
         </StyledModal>

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

@@ -37,29 +37,28 @@ const RegistryImageList: React.FC<{
 
   const getIcon = () => {
     if (registryType) {
-      return integrationList[registryType] && integrationList[registryType].icon;
+      return (
+        integrationList[registryType] && integrationList[registryType].icon
+      );
     } else {
       return integrationList["docker"].icon;
     }
-  }
+  };
 
   return (
     <>
       <Helper>Porter was able to successfully connect to your registry:</Helper>
       <ImageList>
-
-        {
-          imageList.length > 0 ? (
-            imageList.map((data, i) => (
-              <ImageRow isLast={i === imageList.length - 1}>
-                <img src={getIcon()} />
-                {data.uri}
-              </ImageRow>
-            ))
-          ) : (
-            <Placeholder>No container images found.</Placeholder>
-          )
-        }
+        {imageList.length > 0 ? (
+          imageList.map((data, i) => (
+            <ImageRow isLast={i === imageList.length - 1}>
+              <img src={getIcon()} />
+              {data.uri}
+            </ImageRow>
+          ))
+        ) : (
+          <Placeholder>No container images found.</Placeholder>
+        )}
       </ImageList>
       <Br />
     </>
@@ -86,7 +85,7 @@ const Br = styled.div`
 const ImageRow = styled.div<{ isLast?: boolean }>`
   width: 100%;
   height: 40px;
-  border-bottom: ${props => props.isLast ? "" : "1px solid #aaaabb"};
+  border-bottom: ${(props) => (props.isLast ? "" : "1px solid #aaaabb")};
   display: flex;
   align-items: center;
   font-size: 13px;
@@ -106,4 +105,4 @@ const ImageList = styled.div`
   overflow-y: auto;
   background: #ffffff11;
   margin: 20px 0 20px;
-`;
+`;

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

@@ -51,7 +51,15 @@ const ConnectRegistry: React.FC<{
         </BackButton>
       )}
       <TitleSection>Getting Started</TitleSection>
-      <Subtitle>Step 2 of 3 - Connect an existing registry (Optional)</Subtitle>
+      <Subtitle>
+        Step 2 of 3 - Connect an existing registry (Optional)
+        <a
+          href="https://docs.porter.run/docs/linking-up-application-source#connecting-an-existing-image-registry"
+          target="_blank"
+        >
+          <i className="material-icons">help_outline</i>
+        </a>
+      </Subtitle>
       <Helper>
         {provider
           ? "Link to an existing Docker registry. Don't worry if you don't know what this is."
@@ -137,6 +145,20 @@ const Subtitle = styled.div`
   font-size: 16px;
   font-weight: 500;
   margin-top: 16px;
+
+  display: flex;
+  align-items; center;
+  > a {
+    > i {
+      font-size: 18px;
+      margin-left: 10px;
+      margin-top: 1px;
+      color: #8590ff;
+      :hover {
+        color: #aaaabb;
+      }
+    }
+  }
 `;
 
 const NextStep = styled(SaveButton)`

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

@@ -46,14 +46,20 @@ const FormTitle = {
   aws: {
     label: "Amazon Elastic Container Registry (ECR)",
     icon: integrationList["ecr"].icon,
+    doc:
+      "https://docs.porter.run/docs/linking-an-existing-docker-container-registry#amazon-elastic-container-registry-ecr",
   },
   gcp: {
     label: "Google Container Registry (GCR)",
     icon: integrationList["gcr"].icon,
+    doc:
+      "https://docs.porter.run/docs/linking-an-existing-docker-container-registry#google-container-registry-gcr",
   },
   do: {
     label: "DigitalOcean Container Registry (DOCR)",
     icon: integrationList["do"].icon,
+    doc:
+      "https://docs.porter.run/docs/linking-an-existing-docker-container-registry#digitalocean-container-registry",
   },
 };
 
@@ -109,15 +115,21 @@ const FormFlowWrapper: React.FC<Props> = ({
 
   return (
     <FormWrapper>
-      <FormHeader>
-        {currentStep !== "test_connection" && (
-          <CloseButton onClick={() => goBack()}>
-            <i className="material-icons">keyboard_backspace</i>
-          </CloseButton>
-        )}
-        {FormTitle[provider] && <img src={FormTitle[provider].icon} />}
-        {FormTitle[provider] && FormTitle[provider].label}
-      </FormHeader>
+      <Header>
+        <FormHeader>
+          {currentStep !== "test_connection" && (
+            <CloseButton onClick={() => goBack()}>
+              <i className="material-icons">keyboard_backspace</i>
+            </CloseButton>
+          )}
+          {FormTitle[provider] && <img src={FormTitle[provider].icon} />}
+          {FormTitle[provider] && FormTitle[provider].label}
+        </FormHeader>
+        <GuideButton href={FormTitle[provider].doc} target="_blank">
+          <i className="material-icons-outlined">help</i>
+          Guide
+        </GuideButton>
+      </Header>
       <Breadcrumb
         currentStep={currentStep}
         steps={[
@@ -133,6 +145,41 @@ const FormFlowWrapper: React.FC<Props> = ({
 
 export default FormFlowWrapper;
 
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const GuideButton = styled.a`
+  display: flex;
+  align-items: center;
+  margin-top: -17px;
+  margin-left: 20px;
+  color: #aaaabb;
+  font-size: 13px;
+  border: 1px solid #aaaabb;
+  padding: 5px 10px;
+  padding-left: 8px;
+  border-radius: 5px;
+  cursor: pointer;
+  :hover {
+    background: #ffffff11;
+    color: #ffffff;
+    border: 1px solid #ffffff;
+
+    > i {
+      color: #ffffff;
+    }
+  }
+
+  > i {
+    color: #aaaabb;
+    font-size: 16px;
+    margin-right: 7px;
+  }
+`;
+
 const CloseButton = styled.div`
   width: 30px;
   height: 30px;
@@ -163,6 +210,7 @@ const FormHeader = styled.div`
   font-size: 13px;
   margin-top: -2px;
   font-weight: 500;
+  width: 100%;
 
   > img {
     height: 22px;

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

@@ -222,8 +222,7 @@ export const CredentialsForm: React.FC<{
           {lastConnectedAccount.aws_arn || "arn: n/a"}
         </Flex>
         <Right>
-          Connected at{" "}
-          {readableDate(lastConnectedAccount.created_at)}
+          Connected at {readableDate(lastConnectedAccount.created_at)}
         </Right>
       </PreviewRow>
       <Helper>

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

@@ -96,7 +96,9 @@ export const CredentialsForm: React.FC<{
               <i className="material-icons">account_circle</i>
               {content}
             </Flex>
-            <Right>Connected at {readableDate(connectedAccount.created_at)}</Right>
+            <Right>
+              Connected at {readableDate(connectedAccount.created_at)}
+            </Right>
           </PreviewRow>
         </>
       )}

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

@@ -184,8 +184,7 @@ export const CredentialsForm: React.FC<{
           {lastConnectedAccount?.gcp_sa_email}
         </Flex>
         <Right>
-          Connected at{" "}
-          {readableDate(lastConnectedAccount.created_at)}
+          Connected at {readableDate(lastConnectedAccount.created_at)}
         </Right>
       </PreviewRow>
       <Helper>

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

@@ -70,7 +70,15 @@ const ConnectSource: React.FC<{
   return (
     <div>
       <TitleSection>Getting Started</TitleSection>
-      <Subtitle>Step 1 of 3 - Connect to GitHub</Subtitle>
+      <Subtitle>
+        Step 1 of 3 - Connect to GitHub
+        <a
+          href="https://docs.porter.run/docs/linking-up-application-source"
+          target="_blank"
+        >
+          <i className="material-icons">help_outline</i>
+        </a>
+      </Subtitle>
       <Helper>
         To deploy applications from your repo, you need to connect a Github
         account.
@@ -225,6 +233,19 @@ const Subtitle = styled.div`
   font-size: 16px;
   font-weight: 500;
   margin-top: 16px;
+  display: flex;
+  align-items; center;
+  > a {
+    > i {
+      font-size: 18px;
+      margin-left: 10px;
+      margin-top: 1px;
+      color: #8590ff;
+      :hover {
+        color: #aaaabb;
+      }
+    }
+  }
 `;
 
 const ConnectToGithubButton = styled.a`

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

@@ -41,18 +41,22 @@ const FormTitle = {
   aws: {
     label: "Amazon Web Services (AWS)",
     icon: integrationList["aws"].icon,
+    doc: "https://docs.porter.run/docs/getting-started-on-aws",
   },
   gcp: {
     label: "Google Cloud Platform (GCP)",
     icon: integrationList["gcp"].icon,
+    doc: "https://docs.porter.run/docs/provisioning-on-google-cloud",
   },
   do: {
     label: "DigitalOcean (DO)",
     icon: integrationList["do"].icon,
+    doc: "https://docs.porter.run/docs/provisioning-on-digital-ocean",
   },
   external: {
     label: "Connect an existing cluster",
     icon: integrationList["kubernetes"],
+    doc: "",
   },
 };
 
@@ -104,13 +108,19 @@ const FormFlowWrapper: React.FC<Props> = ({
 
   return (
     <FormWrapper>
-      <FormHeader>
-        <CloseButton onClick={() => goBack()}>
-          <i className="material-icons">keyboard_backspace</i>
-        </CloseButton>
-        {FormTitle[provider] && <img src={FormTitle[provider].icon} />}
-        {FormTitle[provider] && FormTitle[provider].label}
-      </FormHeader>
+      <Header>
+        <FormHeader>
+          <CloseButton onClick={() => goBack()}>
+            <i className="material-icons">keyboard_backspace</i>
+          </CloseButton>
+          {FormTitle[provider] && <img src={FormTitle[provider].icon} />}
+          {FormTitle[provider] && FormTitle[provider].label}
+        </FormHeader>
+        <GuideButton href={FormTitle[provider].doc} target="_blank">
+          <i className="material-icons-outlined">help</i>
+          Guide
+        </GuideButton>
+      </Header>
       <Breadcrumb
         currentStep={currentStep}
         steps={[
@@ -125,6 +135,41 @@ const FormFlowWrapper: React.FC<Props> = ({
 
 export default FormFlowWrapper;
 
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const GuideButton = styled.a`
+  display: flex;
+  align-items: center;
+  margin-top: -17px;
+  margin-left: 20px;
+  color: #aaaabb;
+  font-size: 13px;
+  border: 1px solid #aaaabb;
+  padding: 5px 10px;
+  padding-left: 8px;
+  border-radius: 5px;
+  cursor: pointer;
+  :hover {
+    background: #ffffff11;
+    color: #ffffff;
+    border: 1px solid #ffffff;
+
+    > i {
+      color: #ffffff;
+    }
+  }
+
+  > i {
+    color: #aaaabb;
+    font-size: 16px;
+    margin-right: 7px;
+  }
+`;
+
 const CloseButton = styled.div`
   width: 30px;
   height: 30px;

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

@@ -240,8 +240,7 @@ export const CredentialsForm: React.FC<{
           {lastConnectedAccount.aws_arn || "arn: n/a"}
         </Flex>
         <Right>
-          Connected at{" "}
-          {readableDate(lastConnectedAccount.created_at)}
+          Connected at {readableDate(lastConnectedAccount.created_at)}
         </Right>
       </PreviewRow>
       <Helper>
@@ -418,6 +417,7 @@ export const SettingsForm: React.FC<{
           setMachineType(x);
         }}
         label="⚙️ AWS Machine Type"
+        doc="https://docs.porter.run/docs/provisioning-infrastructure#which-instance-type-should-i-select"
       />
       <Br />
       <SaveButton

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

@@ -20,7 +20,11 @@ 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, goBack }) => {
+const ConnectExternalCluster: React.FC<Props> = ({
+  nextStep,
+  project,
+  goBack,
+}) => {
   const [currentPage, setCurrentPage] = useState(0);
   const [currentTab, setCurrentTab] = useState("mac");
   const [enableContinue, setEnableContinue] = useState(false);
@@ -104,7 +108,7 @@ const ConnectExternalCluster: React.FC<Props> = ({ nextStep, project, goBack })
               porter connect kubeconfig
             </Code>
           </Placeholder>
-        )
+        );
       case 2:
         return (
           <Placeholder>
@@ -170,7 +174,9 @@ const ConnectExternalCluster: React.FC<Props> = ({ nextStep, project, goBack })
         text="Continue"
         disabled={!enableContinue}
         onClick={() => nextStep()}
-        status={!enableContinue ? "No connected cluster detected" : "successful"}
+        status={
+          !enableContinue ? "No connected cluster detected" : "successful"
+        }
         makeFlush={true}
         clearPosition={true}
         statusPosition="right"
@@ -182,8 +188,7 @@ const ConnectExternalCluster: React.FC<Props> = ({ nextStep, project, goBack })
 
 export default ConnectExternalCluster;
 
-const Wrapper = styled.div`
-`;
+const Wrapper = styled.div``;
 
 const CloseButton = styled.div`
   width: 30px;

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

@@ -118,7 +118,9 @@ export const CredentialsForm: React.FC<{
               <i className="material-icons">account_circle</i>
               {content}
             </Flex>
-            <Right>Connected at {readableDate(connectedAccount.created_at)}</Right>
+            <Right>
+              Connected at {readableDate(connectedAccount.created_at)}
+            </Right>
           </PreviewRow>
         </>
       )}

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

@@ -230,8 +230,7 @@ export const CredentialsForm: React.FC<{
           {lastConnectedAccount?.gcp_sa_email || "n/a"}
         </Flex>
         <Right>
-          Connected at{" "}
-          {readableDate(lastConnectedAccount.created_at)}
+          Connected at {readableDate(lastConnectedAccount.created_at)}
         </Right>
       </PreviewRow>
       <Helper>