Moved workflowpage inside the settings page

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

@@ -344,20 +344,18 @@ const LaunchFlow: React.FC<PropsType> = (props) => {
       setTemplateName(newTemplateName);
     }
 
-    if (currentPage === "workflow" && currentTab === "porter") {
-      const fullActionConfig = getFullActionConfig();
-      return (
-        <WorkflowPage
-          name={templateName}
-          namespace={"default"}
-          fullActionConfig={fullActionConfig}
-          shouldCreateWorkflow={shouldCreateWorkflow}
-          setShouldCreateWorkflow={setShouldCreateWorkflow}
-          setPage={setCurrentPage}
-        />
-      );
-    }
-
+    // if (currentPage === "workflow" && currentTab === "porter") {
+    //   return (
+    //     <WorkflowPage
+    //       name={templateName}
+    //       namespace={"default"}
+    //       fullActionConfig={fullActionConfig}
+    //       setPage={setCurrentPage}
+    //     />
+    //   );
+    // }
+
+    const fullActionConfig = getFullActionConfig();
     // Display main (non-source) settings page
     return (
       <SettingsPage
@@ -374,6 +372,7 @@ const LaunchFlow: React.FC<PropsType> = (props) => {
         form={form}
         valuesToOverride={valuesToOverride}
         clearValuesToOverride={() => setValuesToOverride(null)}
+        fullActionConfig={fullActionConfig}
       />
     );
   };

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

@@ -4,7 +4,7 @@ import api from "shared/api";
 
 import { Context } from "shared/Context";
 
-import { ChoiceType, ClusterType } from "shared/types";
+import { ChoiceType, ClusterType, FullActionConfigType } from "shared/types";
 
 import { isAlphanumeric } from "shared/common";
 
@@ -15,6 +15,7 @@ import PorterFormWrapper from "components/porter-form/PorterFormWrapper";
 import Selector from "components/Selector";
 import Loading from "components/Loading";
 import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
+import WorkflowPage from "./WorkflowPage";
 
 type PropsType = WithAuthProps & {
   onSubmit: (x?: any) => void;
@@ -24,7 +25,7 @@ type PropsType = WithAuthProps & {
   form: any;
   valuesToOverride: any;
   clearValuesToOverride: () => void;
-
+  fullActionConfig: FullActionConfigType;
   templateName: string;
   setTemplateName: (x: string) => void;
   selectedNamespace: string;
@@ -156,6 +157,7 @@ class SettingsPage extends Component<PropsType, StateType> {
               console.log(val);
               onSubmit(val);
             }}
+            hideBottomSpacer={!!this.props.fullActionConfig?.git_repo}
           />
         </FadeWrapper>
       );
@@ -250,6 +252,7 @@ class SettingsPage extends Component<PropsType, StateType> {
         <StyledSettingsPage>
           {this.renderHeaderSection()}
           {this.props.isCloning && this.getNameInput()}
+
           <Heading>Destination</Heading>
           <Helper>
             Specify the cluster and namespace you would like to deploy your
@@ -294,6 +297,22 @@ class SettingsPage extends Component<PropsType, StateType> {
             />
           </ClusterSection>
           {this.renderSettingsRegion()}
+          {this.props.fullActionConfig?.git_repo && (
+            <WorkflowPage
+              fullActionConfig={{
+                git_repo: "jnfrati/cryptoshops",
+                branch: "master",
+                registry_id: 9,
+                dockerfile_path: null,
+                folder_path: "./",
+                image_repo_uri: "index.docker.io/jnfrati/porter",
+                git_repo_id: 19210609,
+                should_create_workflow: true,
+              }}
+              name={this.props.templateName}
+              namespace={this.props.selectedNamespace}
+            />
+          )}
         </StyledSettingsPage>
       </PaddingWrapper>
     );

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

@@ -230,17 +230,12 @@ class SourcePage extends Component<PropsType, StateType> {
   };
 
   handleContinue = () => {
-    const { sourceType, setPage } = this.props;
-
-    if (sourceType === "repo") {
-      setPage("workflow");
-    } else {
-      setPage("settings");
-    }
+    const { setPage } = this.props;
+    setPage("settings");
   };
 
   render() {
-    let { templateName, setTemplateName, setPage } = this.props;
+    let { templateName, setTemplateName } = this.props;
 
     return (
       <StyledSourcePage>

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

@@ -9,14 +9,15 @@ import Loading from "../../../../components/Loading";
 import Helper from "../../../../components/form-components/Helper";
 import CheckboxRow from "../../../../components/form-components/CheckboxRow";
 import SaveButton from "../../../../components/SaveButton";
+import yaml from "js-yaml";
 
 type PropsType = {
   name: string;
   namespace: string;
   fullActionConfig: FullActionConfigType;
-  shouldCreateWorkflow: boolean;
-  setShouldCreateWorkflow: (x: (prevState: boolean) => boolean) => void;
-  setPage: (x: string) => void;
+  shouldCreateWorkflow?: boolean;
+  setShouldCreateWorkflow?: (x: (prevState: boolean) => boolean) => void;
+  setPage?: (x: string) => void;
 };
 
 const WorkflowPage: React.FC<PropsType> = (props) => {
@@ -25,6 +26,7 @@ const WorkflowPage: React.FC<PropsType> = (props) => {
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
   const [workflowYAML, setWorkflowYAML] = useState("");
+  const [isExpanded, setIsExpanded] = useState(false);
 
   useEffect(() => {
     const { currentCluster, currentProject } = context;
@@ -61,34 +63,25 @@ const WorkflowPage: React.FC<PropsType> = (props) => {
     return <YamlEditor value={workflowYAML} readOnly={true} />;
   };
 
-  const getButtonHelper = () => {
-    if (props.shouldCreateWorkflow) {
-      return "Both secrets and workflow will be created";
-    } else {
-      return "Only secrets will be created";
-    }
-  };
-
   return (
     <StyledWorkflowPage>
-      <BackButton width="155px" onClick={() => props.setPage("source")}>
-        <i className="material-icons">first_page</i>
-        Source Settings
-      </BackButton>
       <Heading>GitHub Actions</Heading>
       <Helper>
         To auto-deploy each time you push changes, Porter will write GitHub
         Secrets and this GitHub Actions workflow to your repository.
       </Helper>
       {renderWorkflow()}
-      <CheckboxRow
-        toggle={() => props.setShouldCreateWorkflow((x: boolean) => !x)}
-        checked={props.shouldCreateWorkflow}
-        label="Create workflow file"
-      />
       <Helper>
-        You may copy the YAML to an existing workflow and uncheck this box to
-        prevent Porter from creating a new workflow file.
+        <GitHubActionLink show={!props.shouldCreateWorkflow}>
+          If you want to create a custom workflow file for your deployments, we
+          recommend you deploy from docker instead, and checkout this guide:{" "}
+          <a
+            href="https://docs.porter.run/docs/auto-deploy-requirements#cicd-with-github-actions"
+            target="_blank"
+          >
+            CI/CD with GitHub Actions
+          </a>
+        </GitHubActionLink>
         <GitHubActionLink show={!props.shouldCreateWorkflow}>
           The GitHub Action can be found at{" "}
           <a
@@ -100,13 +93,6 @@ const WorkflowPage: React.FC<PropsType> = (props) => {
         </GitHubActionLink>
       </Helper>
       <Buffer />
-      <SaveButton
-        text="Continue"
-        makeFlush={true}
-        disabled={hasError}
-        onClick={() => props.setPage("settings")}
-        helper={getButtonHelper()}
-      />
     </StyledWorkflowPage>
   );
 };