replace existing inline docs with new URIs

dashboard/src/components/DocsHelper.tsx

@@ -0,0 +1,116 @@
+import React, { Component, useState } from "react";
+import styled, { createGlobalStyle } from "styled-components";
+import Button from "@material-ui/core/Button";
+import Tooltip from "@material-ui/core/Tooltip";
+import { ClickAwayListener, TooltipProps } from "@material-ui/core";
+
+type Props = {
+  tooltipText: string;
+  link: string;
+};
+
+const DocsHelper: React.FC<Props> = ({ tooltipText, link }) => {
+  const [open, setOpen] = React.useState(false);
+
+  const handleTooltipClose = () => {
+    setOpen(false);
+  };
+
+  const handleTooltipOpen = () => {
+    setOpen(true);
+  };
+
+  const handleTooltipToggle = () => {
+    setOpen(!open);
+  };
+
+  return (
+    <DocsHelperContainer>
+      <ClickAwayListener
+        onClickAway={() => {
+          handleTooltipClose();
+        }}
+      >
+        <div>
+          <Tooltip
+            PopperProps={{
+              disablePortal: true,
+              placement: "top-end",
+            }}
+            onClose={handleTooltipClose}
+            open={open}
+            interactive
+            disableFocusListener
+            disableHoverListener
+            disableTouchListener
+            title={
+              <StyledContent onClick={handleTooltipOpen}>
+                {tooltipText}
+                <A target="_blank" href={link}>
+                  Documentation {">"}
+                </A>
+              </StyledContent>
+            }
+          >
+            <HelperButton onClick={handleTooltipToggle}>
+              <i className="material-icons">help_outline</i>
+            </HelperButton>
+          </Tooltip>
+        </div>
+      </ClickAwayListener>
+      <TooltipStyle />
+    </DocsHelperContainer>
+  );
+};
+
+export default DocsHelper;
+
+const StyledContent = styled.div`
+  font-family: "Work Sans", sans-serif;
+  font-size: 12px;
+  font-weight: normal;
+  padding: 5px 6px;
+  line-height: 150%;
+  user-select: text;
+`;
+
+const HelperButton = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+  justify-content: center;
+
+  > i {
+    color: #aaaabb;
+    width: 24px;
+    height: 24px;
+    font-size: 20px;
+    border-radius: 20px;
+  }
+`;
+
+const TooltipStyle = createGlobalStyle`
+  .MuiTooltip-tooltip {
+    background-color: #2E3135 !important;
+    font-size: 12px !important;
+    max-width: 300px !important;    
+    border: 1px solid #aaaabb; 
+  }
+`;
+
+const A = styled.a`
+  display: inline-block;
+  height: 20px;
+  color: #8590ff;
+  text-decoration: underline;
+  cursor: pointer;
+  width: 100%;
+  text-align: right;
+  padding-right: 12px;
+  user-select: none;
+`;
+
+const DocsHelperContainer = styled.div`
+  margin-left: auto;
+`;

dashboard/src/components/repo-selector/ContentsList.tsx

@@ -431,7 +431,7 @@ export default class ContentsList extends Component<PropsType, StateType> {
             <p>
               <b>{this.state.autoBuildpack.name}</b> buildpack was{" "}
               <a
-                href="https://docs.porter.run/docs/auto-deploy-requirements#auto-build-with-cloud-native-buildpacks"
+                href="https://porter-docs-demo-22fd462fef4dcd45.onporter.run/deploying-applications/deploying-from-github/selecting-application-and-build-method#customizing-buildpacks"
                 target="_blank"
               >
                 detected automatically
@@ -446,7 +446,7 @@ export default class ContentsList extends Component<PropsType, StateType> {
           <FlexWrapper>
             <UseButton onClick={this.handleContinue}>Continue</UseButton>
             <StatusWrapper
-              href="https://docs.porter.run/docs/auto-deploy-requirements#auto-build-with-cloud-native-buildpacks"
+              href="https://porter-docs-demo-22fd462fef4dcd45.onporter.run/deploying-applications/deploying-from-github/selecting-application-and-build-method#customizing-buildpacks"
               target="_blank"
             >
               <i className="material-icons">help_outline</i>

dashboard/src/main/home/launch/Launch.tsx

@@ -329,7 +329,10 @@ class Templates extends Component<PropsType, StateType> {
         <TemplatesWrapper>
           <TitleSection>
             Launch
-            <a href="https://docs.porter.run/docs/addons" target="_blank">
+            <a
+              href="https://porter-docs-demo-22fd462fef4dcd45.onporter.run/deploying-applications/overview"
+              target="_blank"
+            >
               <i className="material-icons">help_outline</i>
             </a>
           </TitleSection>

dashboard/src/main/home/launch/launch-flow/SourcePage.tsx

@@ -278,7 +278,7 @@ class SourcePage extends Component<PropsType, StateType> {
         <Helper>
           Learn more about
           <Highlight
-            href="https://docs.porter.run/docs/applications"
+            href="https://porter-docs-demo-22fd462fef4dcd45.onporter.run/deploying-applications/overview"
             target="_blank"
           >
             deploying services to Porter

dashboard/src/main/home/launch/launch-flow/WorkflowPage.tsx

@@ -90,7 +90,7 @@ const WorkflowPage: React.FC<PropsType> = (props) => {
           recommend you <b>deploy from docker instead</b>, and checkout this
           guide:{" "}
           <a
-            href="https://docs.porter.run/docs/auto-deploy-requirements#cicd-with-github-actions"
+            href="https://porter-docs-demo-22fd462fef4dcd45.onporter.run/deploying-applications/deploying-from-github/customizing-github-workflow"
             target="_blank"
           >
             CI/CD with GitHub Actions

dashboard/src/main/home/navbar/Help.tsx

@@ -29,7 +29,12 @@ export default class Help extends Component<PropsType, StateType> {
           <Dropdown dropdownWidth="155px" dropdownMaxHeight="300px">
             <Option
               onClick={() => {
-                window.open("https://docs.porter.run", "_blank").focus();
+                window
+                  .open(
+                    "https://porter-docs-demo-22fd462fef4dcd45.onporter.run",
+                    "_blank"
+                  )
+                  .focus();
               }}
             >
               <i className="material-icons-outlined">book</i>

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

@@ -17,6 +17,7 @@ import api from "shared/api";
 import Loading from "components/Loading";
 import Registry from "./components/Registry";
 import { connectRegistryTracks } from "shared/anayltics";
+import DocsHelper from "components/DocsHelper";
 
 const ConnectRegistry: React.FC<{}> = ({}) => {
   const snap = useSnapshot(OFState);
@@ -124,12 +125,12 @@ const ConnectRegistry: React.FC<{}> = ({}) => {
       <TitleSection>Getting Started</TitleSection>
       <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>
+        <DocsHelper
+          tooltipText="If you already have an existing image registry, you can connect your existing registry during project creation. If you don't have an image registry or don't know what that means, skip this step. Porter will handle the rest."
+          link={
+            "https://porter-docs-demo-22fd462fef4dcd45.onporter.run/getting-started/linking-application-source#connecting-an-existing-image-registry"
+          }
+        />
       </Subtitle>
       <Helper>
         {currentProvider

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

@@ -54,19 +54,19 @@ const FormTitle = {
     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",
+      "https://porter-docs-demo-22fd462fef4dcd45.onporter.run/deploying-applications/deploying-from-docker-registry/linking-existing-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",
+      "https://porter-docs-demo-22fd462fef4dcd45.onporter.run/deploying-applications/deploying-from-docker-registry/linking-existing-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",
+      "https://porter-docs-demo-22fd462fef4dcd45.onporter.run/deploying-applications/deploying-from-docker-registry/linking-existing-registry#digital-ocean-container-registry",
   },
 };
 

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

@@ -9,6 +9,7 @@ import styled from "styled-components";
 import { OFState } from "../state";
 import github from "assets/github.png";
 import { connectSourceTracks } from "shared/anayltics";
+import DocsHelper from "components/DocsHelper";
 
 interface GithubAppAccessData {
   username?: string;
@@ -78,12 +79,12 @@ const ConnectSource: React.FC<{
       <TitleSection>Getting Started</TitleSection>
       <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>
+        <DocsHelper
+          tooltipText="Porter uses a GitHub App to authorize and gain access to your GitHub repositories. In order to be able to deploy applications through GitHub repositories, you must first authorize the Porter GitHub App to have access to them."
+          link={
+            "https://porter-docs-demo-22fd462fef4dcd45.onporter.run/getting-started/linking-application-source#connecting-to-github"
+          }
+        />
       </Subtitle>
       <Helper>
         To deploy applications from your repo, you need to connect a Github

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

@@ -16,6 +16,7 @@ import { StatusPage } from "./forms/StatusPage";
 import { useSnapshot } from "valtio";
 import { OFState } from "../../state";
 import { provisionResourcesTracks } from "shared/anayltics";
+import DocsHelper from "components/DocsHelper";
 
 type Props = {};
 
@@ -158,7 +159,15 @@ const ProvisionResources: React.FC<Props> = () => {
         </BackButton>
       )}
       <TitleSection>Getting Started</TitleSection>
-      <Subtitle>Step 3 of 3 - Provision resources</Subtitle>
+      <Subtitle>
+        Step 3 of 3 - Provision resources
+        <DocsHelper
+          tooltipText="Porter provisions and manages the underlying infrastructure in your own cloud. It is not necessary to know about the provisioned resources to use Porter."
+          link={
+            "https://porter-docs-demo-22fd462fef4dcd45.onporter.run/getting-started/provisioning-infrastructure#faq"
+          }
+        />
+      </Subtitle>
       <Helper>
         Porter automatically creates a cluster and registry in your cloud to run
         applications.
@@ -180,6 +189,7 @@ const Subtitle = styled.div`
   font-size: 16px;
   font-weight: 500;
   margin-top: 16px;
+  display: flex;
 `;
 
 const NextStep = styled(SaveButton)`

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

@@ -51,17 +51,20 @@ const FormTitle = {
   aws: {
     label: "Amazon Web Services (AWS)",
     icon: integrationList["aws"].icon,
-    doc: "https://docs.porter.run/docs/getting-started-on-aws",
+    doc:
+      "https://porter-docs-demo-22fd462fef4dcd45.onporter.run/getting-started/provisioning-on-aws",
   },
   gcp: {
     label: "Google Cloud Platform (GCP)",
     icon: integrationList["gcp"].icon,
-    doc: "https://docs.porter.run/docs/provisioning-on-google-cloud",
+    doc:
+      "https://porter-docs-demo-22fd462fef4dcd45.onporter.run/getting-started/provisioning-on-gcp",
   },
   do: {
     label: "DigitalOcean (DO)",
     icon: integrationList["do"].icon,
-    doc: "https://docs.porter.run/docs/provisioning-on-digital-ocean",
+    doc:
+      "https://porter-docs-demo-22fd462fef4dcd45.onporter.run/getting-started/provisioning-on-do",
   },
   external: {
     label: "Connect an existing cluster",

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

@@ -416,7 +416,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"
+        doc="https://porter-docs-demo-22fd462fef4dcd45.onporter.run/getting-started/provisioning-infrastructure#which-instance-type-should-i-select"
       />
       <Br />
       <SaveButton