embed onboarding flow docs

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,16 @@ 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 +50,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/onboarding/components/ProviderSelector.tsx

@@ -24,17 +24,17 @@ export const registryOptions = [
   {
     value: "aws",
     icon: integrationList["ecr"]?.icon,
-    label: "Amazon Elastic Container Registry (ECR)",
+    label: "Amazon Elastic Container Registry (ECR)"
   },
   {
     value: "gcp",
     icon: integrationList["gcr"]?.icon,
-    label: "Google Cloud Registry (GCR)",
+    label: "Google Cloud Registry (GCR)"
   },
   {
     value: "do",
     icon: integrationList["do"]?.icon,
-    label: "DigitalOcean Container Registry (DOCR)",
+    label: "DigitalOcean Container Registry (DOCR)"
   },
 ];
 
@@ -42,17 +42,17 @@ export const provisionerOptions = [
   {
     value: "aws",
     icon: integrationList["aws"]?.icon,
-    label: "Amazon Web Services (AWS)",
+    label: "Amazon Web Services (AWS)"
   },
   {
     value: "gcp",
     icon: integrationList["gcp"]?.icon,
-    label: "Google Cloud Platform (GCP)",
+    label: "Google Cloud Platform (GCP)"
   },
   {
     value: "do",
     icon: integrationList["do"]?.icon,
-    label: "DigitalOcean (DO)",
+    label: "DigitalOcean (DO)"
   },
 ];
 

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

@@ -51,7 +51,12 @@ 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 +142,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,17 @@ 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 +112,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 +142,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 +207,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/ConnectSource.tsx

@@ -70,7 +70,12 @@ 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 +230,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

@@ -424,6 +424,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