Preview entrypoint in simplified view (#3217)

* checkpoint preview env form

* feat: change step name

* add project level ff to sidebar

dashboard/src/main/home/cluster-dashboard/preview-environments/ConnectNewRepo.tsx

@@ -20,6 +20,8 @@ import AnimateHeight from "react-animate-height";
 import Text from "components/porter/Text";
 import Spacer from "components/porter/Spacer";
 import ConnectNewRepoActionConfEditor from "./ConnectNewRepoActionConfEditor";
+import VerticalSteps from "components/porter/VerticalSteps";
+import Back from "components/porter/Back";
 
 const ConnectNewRepo: React.FC = () => {
   const { currentProject, currentCluster, setCurrentError } = useContext(
@@ -34,6 +36,7 @@ const ConnectNewRepo: React.FC = () => {
   const [status, setStatus] = useState(null);
   const { pushFiltered } = useRouting();
   const [showSettings, setShowSettings] = useState<boolean>(false);
+  const [currentStep, setCurrentStep] = useState<number>(0);
 
   // NOTE: git_repo_id is a misnomer as this actually refers to the github app's installation id.
   const [actionConfig, setActionConfig] = useState<ActionConfigType>({
@@ -77,7 +80,7 @@ const ConnectNewRepo: React.FC = () => {
         });
         setFilteredRepos(newFilteredRepos || []);
       })
-      .catch(() => { });
+      .catch(() => {});
   }, []);
 
   useEffect(() => {
@@ -175,6 +178,94 @@ const ConnectNewRepo: React.FC = () => {
       });
   };
 
+  if (currentProject?.simplified_view_enabled) {
+    return (
+      <CenterWrapper>
+        <Div>
+          <Back to="/preview-environments" />
+          <DashboardHeader
+            image={PullRequestIcon}
+            title="Preview environments"
+            capitalize={false}
+            description="Create full-stack preview environments for your pull requests."
+          />
+          <VerticalSteps
+            currentStep={currentStep}
+            steps={[
+              <>
+                <Text size={16}>Choose a repository</Text>
+                <ConnectNewRepoActionConfEditor
+                  actionConfig={actionConfig}
+                  setActionConfig={(actionConfig: ActionConfigType) => {
+                    setActionConfig(
+                      (currentActionConfig: ActionConfigType) => ({
+                        ...currentActionConfig,
+                        ...actionConfig,
+                      })
+                    );
+
+                    if (!!actionConfig.git_repo) {
+                      setCurrentStep((prev) => {
+                        if (prev > 0) {
+                          return prev;
+                        }
+
+                        return prev + 1;
+                      });
+                    }
+                  }}
+                />
+                <HelperContainer>
+                  Note: you will need to add a{" "}
+                  <CodeBlock>porter.yaml</CodeBlock> file to create a preview
+                  environment.
+                  <DocsHelper
+                    disableMargin
+                    tooltipText="A Porter YAML file is a declarative set of resources that Porter uses to build and update your preview environment deployments."
+                    link="https://docs.porter.run/preview-environments/porter-yaml-reference"
+                  />
+                </HelperContainer>
+              </>,
+
+              <>
+                <Text size={16}>Automatic pull request deployments</Text>
+                <Helper style={{ marginTop: "10px", marginBottom: "10px" }}>
+                  If you enable this option, the new pull requests will be
+                  automatically deployed.
+                </Helper>
+                <CheckboxWrapper>
+                  <CheckboxRow
+                    label="Enable automatic deploys"
+                    checked={enableAutomaticDeployments}
+                    toggle={() => {
+                      setEnableAutomaticDeployments(
+                        !enableAutomaticDeployments
+                      );
+                    }}
+                    wrapperStyles={{
+                      disableMargin: true,
+                    }}
+                  />
+                </CheckboxWrapper>
+              </>,
+            ]}
+          />
+          <ActionContainer>
+            <SaveButton
+              text="Add repository"
+              disabled={actionConfig.git_repo_id ? false : true}
+              onClick={addRepo}
+              makeFlush={true}
+              clearPosition={true}
+              status={status}
+              statusPosition={"left"}
+            />
+          </ActionContainer>
+        </Div>
+      </CenterWrapper>
+    );
+  }
+
   return (
     <>
       <DashboardHeader
@@ -353,8 +444,16 @@ const ConnectNewRepo: React.FC = () => {
 
 export default ConnectNewRepo;
 
+const CenterWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
 const Div = styled.div`
-  margin-bottom: -7px;
+  width: 100%;
+  max-width: 900px;
 `;
 
 const FlexWrap = styled.div`
@@ -509,7 +608,7 @@ const StyledAdvancedBuildSettings = styled.div`
     cursor: pointer;
     border-radius: 20px;
     transform: ${(props: { showSettings: boolean; isCurrent: boolean }) =>
-    props.showSettings ? "" : "rotate(-90deg)"};
+      props.showSettings ? "" : "rotate(-90deg)"};
   }
 `;
 const AdvancedBuildTitle = styled.div`

dashboard/src/main/home/cluster-dashboard/preview-environments/ConnectNewRepoActionConfEditor.tsx

@@ -7,70 +7,70 @@ import Input from "components/porter/Input";
 import RepoList from "components/repo-selector/RepoList";
 
 type Props = {
-    actionConfig: ActionConfigType | null;
-    setActionConfig: (x: ActionConfigType) => void;
-    setBranch?: (x: string) => void;
-    setDockerfilePath?: (x: string) => void;
-    setFolderPath?: (x: string) => void;
-    setBuildView?: (x: string) => void;
-    setPorterYamlPath?: (x: string) => void;
+  actionConfig: ActionConfigType | null;
+  setActionConfig: (x: ActionConfigType) => void;
+  setBranch?: (x: string) => void;
+  setDockerfilePath?: (x: string) => void;
+  setFolderPath?: (x: string) => void;
+  setBuildView?: (x: string) => void;
+  setPorterYamlPath?: (x: string) => void;
 };
 
 const defaultActionConfig: ActionConfigType = {
-    git_repo: null,
-    image_repo_uri: null,
-    git_branch: null,
-    git_repo_id: 0,
-    kind: "github",
+  git_repo: null,
+  image_repo_uri: null,
+  git_branch: null,
+  git_repo_id: 0,
+  kind: "github",
 };
 
 const ConnectNewRepoActionConfEditor: React.FC<Props> = ({
-    actionConfig,
-    setBranch,
-    setActionConfig,
-    setFolderPath,
-    setDockerfilePath,
-    setBuildView,
-    setPorterYamlPath,
+  actionConfig,
+  setBranch,
+  setActionConfig,
+  setFolderPath,
+  setDockerfilePath,
+  setBuildView,
+  setPorterYamlPath,
 }) => {
-    if (!actionConfig.git_repo) {
-        return (
-            <ExpandedWrapperAlt>
-                <RepoList
-                    actionConfig={actionConfig}
-                    setActionConfig={(x: ActionConfigType) => setActionConfig(x)}
-                    readOnly={false}
-                />
-            </ExpandedWrapperAlt>
-        );
-    } else {
-        return (
-            <>
-                <Input
-                    disabled={true}
-                    label="GitHub repository:"
-                    width="100%"
-                    value={actionConfig?.git_repo}
-                    setValue={() => { }}
-                    placeholder=""
-                />
-                <BackButton
-                    width="135px"
-                    onClick={() => {
-                        setActionConfig({ ...defaultActionConfig });
-                        setBranch ? setBranch("") : null;
-                        setFolderPath ? setFolderPath("") : null;
-                        setDockerfilePath ? setDockerfilePath("") : null;
-                        setBuildView ? setBuildView("buildpacks") : null;
-                        setPorterYamlPath("");
-                    }}
-                >
-                    <i className="material-icons">keyboard_backspace</i>
-                    Select repo
-                </BackButton>
-            </>
-        );
-    }
+  if (!actionConfig.git_repo) {
+    return (
+      <ExpandedWrapperAlt>
+        <RepoList
+          actionConfig={actionConfig}
+          setActionConfig={(x: ActionConfigType) => setActionConfig(x)}
+          readOnly={false}
+        />
+      </ExpandedWrapperAlt>
+    );
+  } else {
+    return (
+      <>
+        <Input
+          disabled={true}
+          label="GitHub repository:"
+          width="100%"
+          value={actionConfig?.git_repo}
+          setValue={() => {}}
+          placeholder=""
+        />
+        <BackButton
+          width="135px"
+          onClick={() => {
+            setActionConfig({ ...defaultActionConfig });
+            setBranch ? setBranch("") : null;
+            setFolderPath ? setFolderPath("") : null;
+            setDockerfilePath ? setDockerfilePath("") : null;
+            setBuildView ? setBuildView("buildpacks") : null;
+            setPorterYamlPath && setPorterYamlPath("");
+          }}
+        >
+          <i className="material-icons">keyboard_backspace</i>
+          Select repo
+        </BackButton>
+      </>
+    );
+  }
 };
 
 export default ConnectNewRepoActionConfEditor;

dashboard/src/main/home/sidebar/Clusters.tsx

@@ -40,7 +40,7 @@ class Clusters extends Component<PropsType, StateType> {
 
   updateClusters = () => {
     if (!this.context.currentProject) {
-      return
+      return;
     }
     let {
       user,
@@ -143,10 +143,34 @@ class Clusters extends Component<PropsType, StateType> {
     });
   };
 
-  renderContents = (): JSX.Element[] | JSX.Element => {
+  renderContents = (): React.ReactNode => {
     let { clusters } = this.state;
     let { currentCluster, setCurrentCluster, currentProject } = this.context;
 
+    if (currentProject?.simplified_view_enabled ) {
+      const cluster = clusters[0];
+      return currentProject?.preview_envs_enabled && currentCluster?.preview_envs_enabled ? (
+        <NavButton
+          path="/preview-environments"
+          targetClusterName={cluster?.name}
+          active={
+            currentCluster?.id === cluster?.id &&
+            window.location.pathname.startsWith("/preview-environments")
+          }
+        >
+          <InlineSVGWrapper
+            id="Flat"
+            fill="#FFFFFF"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 256 256"
+          >
+            <path d="M103.99951,68a36,36,0,1,0-44,35.0929v49.8142a36,36,0,1,0,16,0V103.0929A36.05516,36.05516,0,0,0,103.99951,68Zm-56,0a20,20,0,1,1,20,20A20.0226,20.0226,0,0,1,47.99951,68Zm40,120a20,20,0,1,1-20-20A20.0226,20.0226,0,0,1,87.99951,188ZM196.002,152.907l-.00146-33.02563a55.63508,55.63508,0,0,0-16.40137-39.59619L155.31348,56h20.686a8,8,0,0,0,0-16h-40c-.02978,0-.05859.00415-.08838.00446-.2334.00256-.46631.01245-.69824.03527-.12891.01258-.25391.03632-.38086.05494-.13135.01928-.26318.03424-.39355.06-.14014.02778-.27686.06611-.41455.10114-.11475.02924-.23047.05426-.34424.08862-.13428.04059-.26367.0907-.395.13806-.11524.04151-.231.07929-.34473.12629-.12109.05011-.23681.10876-.35449.16455-.11914.05621-.23926.10907-.356.17144-.11133.0597-.21728.12757-.32519.1922-.11621.06928-.23389.13483-.34668.21051-.11719.07831-.227.16553-.33985.24976-.09668.07227-.1958.1394-.28955.21655-.18652.1529-.36426.31531-.53564.48413-.01612.01593-.03418.02918-.05029.04529-.02051.02051-.0376.04321-.05762.06391-.16358.16711-.32178.33941-.47022.52032-.083.10059-.15527.20648-.23193.31006-.07861.10571-.16064.20862-.23438.3183-.08056.12072-.15087.24591-.2246.36993-.05958.1-.12208.19757-.17725.30036-.06787.12591-.125.25531-.18506.384-.05078.1084-.10547.21466-.15137.32568-.05127.12463-.09326.25189-.13867.37848-.04248.11987-.08887.238-.126.36047-.03857.12775-.06738.25757-.09912.38678-.03125.124-.06591.24622-.0913.37244-.02979.15088-.04786.30328-.06934.45544-.01465.10645-.03516.21094-.0459.31867q-.03955.39752-.04.79706V88a8,8,0,0,0,16,0V67.31378l24.28516,24.28485a39.73874,39.73874,0,0,1,11.71582,28.28321l.00146,33.02533a36.00007,36.00007,0,1,0,16-.00019ZM188.00244,208a20,20,0,1,1,20-20A20.0226,20.0226,0,0,1,188.00244,208Z" />
+          </InlineSVGWrapper>
+          Preview envs
+        </NavButton>
+      ) : null;
+    }
+
     if (
       clusters.length > 0 &&
       currentCluster &&
@@ -256,7 +280,9 @@ class Clusters extends Component<PropsType, StateType> {
   };
 
   render() {
-    return <Wrapper display={this.props.display}>{this.renderContents()}</Wrapper>;
+    return (
+      <Wrapper display={this.props.display}>{this.renderContents()}</Wrapper>
+    );
   }
 }
 
@@ -265,7 +291,7 @@ Clusters.contextType = Context;
 export default withRouter(Clusters);
 
 const Wrapper = styled.div<{ display: string }>`
-  display: ${props => props.display || ""};
+  display: ${(props) => props.display || ""};
 `;
 
 const InlineSVGWrapper = styled.svg`
@@ -324,7 +350,7 @@ const NavButton = styled(SidebarLink)`
   margin: 5px 15px;
   padding: 0 30px 2px 8px;
   font-size: 13px;
-  color: ${props => props.theme.text.primary};
+  color: ${(props) => props.theme.text.primary};
   cursor: ${(props: { disabled?: boolean }) =>
     props.disabled ? "not-allowed" : "pointer"};
 
@@ -340,4 +366,4 @@ const NavButton = styled(SidebarLink)`
     border-radius: 3px;
     margin-right: 10px;
   }
-`;
+`;

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -228,7 +228,6 @@ class Sidebar extends Component<PropsType, StateType> {
 
           {/* Hacky workaround for setting currentCluster with legacy method */}
           <Clusters
-            display="none"
             setWelcome={this.props.setWelcome}
             currentView={currentView}
             isSelected={false}