Updated Build Settings

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

@@ -0,0 +1,153 @@
+import React from "react";
+import styled from "styled-components";
+
+import { ActionConfigType } from "shared/types";
+
+import RepoList from "./RepoList";
+import BranchList from "./BranchList";
+import ContentsList from "./ContentsList";
+import ActionDetails from "./ActionDetails";
+import InputRow from "../form-components/InputRow";
+
+type Props = {
+  actionConfig: ActionConfigType | null;
+  branch: string;
+  setActionConfig: (x: ActionConfigType) => void;
+  setBranch: (x: string) => void;
+  reset: any;
+  dockerfilePath: string;
+  procfilePath: string;
+  procfileProcess: string;
+  setDockerfilePath: (x: string) => void;
+  setProcfileProcess: (x: string) => void;
+  setProcfilePath: (x: string) => void;
+  folderPath: string;
+  setFolderPath: (x: string) => void;
+  setSelectedRegistry: (x: any) => void;
+  selectedRegistry: any;
+  setBuildConfig: (x: any) => void;
+};
+
+const defaultActionConfig: ActionConfigType = {
+  git_repo: "",
+  image_repo_uri: "",
+  git_branch: "",
+  git_repo_id: 0,
+  kind: "github",
+};
+
+const ActionConfEditorStack: React.FC<Props> = (props) => {
+  const { actionConfig, setBranch, setActionConfig, branch } = props;
+
+  if (!actionConfig.git_repo) {
+    return (
+      <ExpandedWrapperAlt>
+        <RepoList
+          actionConfig={actionConfig}
+          setActionConfig={(x: ActionConfigType) => setActionConfig(x)}
+          readOnly={false}
+        />
+      </ExpandedWrapperAlt>
+    );
+  } else if (!branch) {
+    return (
+      <>
+        <ExpandedWrapperAlt>
+          <BranchList
+            actionConfig={actionConfig}
+            setBranch={(branch: string) => setBranch(branch)}
+          />
+        </ExpandedWrapperAlt>
+        <Br />
+      </>
+    );
+  }
+  return (
+    <>
+      <InputRow
+        disabled={true}
+        label="Branch"
+        type="text"
+        width="100%"
+        value={props?.branch}
+      />
+      <BackButton
+        width="145px"
+        onClick={() => {
+          setBranch("");
+          props.setDockerfilePath("");
+        }}
+      >
+        <i className="material-icons">keyboard_backspace</i>
+        Select branch
+      </BackButton>
+    </>
+  );
+};
+
+export default ActionConfEditorStack;
+
+const Br = styled.div`
+  width: 100%;
+  height: 8px;
+`;
+
+const Flex = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const HeaderButton = styled.div`
+  margin-bottom: 5px;
+  padding: 5px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  margin-right: 10px;
+`;
+
+const RepoHeader = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ExpandedWrapper = styled.div`
+  margin-top: 10px;
+  width: 100%;
+  border-radius: 3px;
+  border: 1px solid #ffffff44;
+  max-height: 275px;
+`;
+
+const ExpandedWrapperAlt = styled(ExpandedWrapper)`
+  border: 0;
+`;
+
+const BackButton = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 22px;
+  cursor: pointer;
+  font-size: 13px;
+  height: 35px;
+  padding: 5px 13px;
+  margin-bottom: -7px;
+  padding-right: 15px;
+  border: 1px solid #ffffff55;
+  border-radius: 100px;
+  width: ${(props: { width: string }) => props.width};
+  color: white;
+  background: #ffffff11;
+
+  :hover {
+    background: #ffffff22;
+  }
+
+  > i {
+    color: white;
+    font-size: 16px;
+    margin-right: 6px;
+  }
+`;

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

@@ -0,0 +1,143 @@
+import React from "react";
+import styled from "styled-components";
+
+import { ActionConfigType } from "shared/types";
+
+import RepoList from "./RepoList";
+import BranchList from "./BranchList";
+import ContentsList from "./ContentsList";
+import ActionDetails from "./ActionDetails";
+import InputRow from "../form-components/InputRow";
+
+type Props = {
+  actionConfig: ActionConfigType | null;
+  branch: string;
+  setActionConfig: (x: ActionConfigType) => void;
+  setBranch: (x: string) => void;
+  reset: any;
+  dockerfilePath: string;
+  procfilePath: string;
+  procfileProcess: string;
+  setDockerfilePath: (x: string) => void;
+  setProcfileProcess: (x: string) => void;
+  setProcfilePath: (x: string) => void;
+  folderPath: string;
+  setFolderPath: (x: string) => void;
+  setSelectedRegistry: (x: any) => void;
+  selectedRegistry: any;
+  setBuildConfig: (x: any) => void;
+};
+
+const defaultActionConfig: ActionConfigType = {
+  git_repo: "",
+  image_repo_uri: "",
+  git_branch: "",
+  git_repo_id: 0,
+  kind: "github",
+};
+
+const ActionConfEditorStack: React.FC<Props> = (props) => {
+  const { actionConfig, setBranch, setActionConfig, branch } = props;
+
+  if (!actionConfig.git_repo) {
+    return (
+      <ExpandedWrapperAlt>
+        <RepoList
+          actionConfig={actionConfig}
+          setActionConfig={(x: ActionConfigType) => setActionConfig(x)}
+          readOnly={false}
+        />
+      </ExpandedWrapperAlt>
+    );
+  } else {
+    return (
+      <>
+        <InputRow
+          disabled={true}
+          label="Git repository"
+          type="text"
+          width="100%"
+          value={actionConfig?.git_repo}
+        />
+        <BackButton
+          width="135px"
+          onClick={() => {
+            setActionConfig({ ...defaultActionConfig });
+            setBranch("");
+            props.setDockerfilePath("");
+          }}
+        >
+          <i className="material-icons">keyboard_backspace</i>
+          Select repo
+        </BackButton>
+      </>
+    );
+  }
+};
+
+export default ActionConfEditorStack;
+
+const Br = styled.div`
+  width: 100%;
+  height: 8px;
+`;
+
+const Flex = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const HeaderButton = styled.div`
+  margin-bottom: 5px;
+  padding: 5px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  margin-right: 10px;
+`;
+
+const RepoHeader = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ExpandedWrapper = styled.div`
+  margin-top: 10px;
+  width: 100%;
+  border-radius: 3px;
+  border: 1px solid #ffffff44;
+  max-height: 275px;
+`;
+
+const ExpandedWrapperAlt = styled(ExpandedWrapper)`
+  border: 0;
+`;
+
+const BackButton = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 22px;
+  cursor: pointer;
+  font-size: 13px;
+  height: 35px;
+  padding: 5px 13px;
+  margin-bottom: -7px;
+  padding-right: 15px;
+  border: 1px solid #ffffff55;
+  border-radius: 100px;
+  width: ${(props: { width: string }) => props.width};
+  color: white;
+  background: #ffffff11;
+
+  :hover {
+    background: #ffffff22;
+  }
+
+  > i {
+    color: white;
+    font-size: 16px;
+    margin-right: 6px;
+  }
+`;

dashboard/src/main/home/app-dashboard/new-app-flow/NewAppFlow.tsx

@@ -22,15 +22,24 @@ import { generateSlug } from "random-word-slugs";
 import { RouteComponentProps, withRouter } from "react-router";
 import Error from "components/porter/Error";
 import SourceSelector, { SourceType } from "./SourceSelector";
-import SourceSettings from "./SourceSettings"
+import SourceSettings from "./SourceSettings";
 import Services from "./Services";
-import EnvGroupArray, { KeyValueType } from "main/home/cluster-dashboard/env-groups/EnvGroupArray";
+import EnvGroupArray, {
+  KeyValueType,
+} from "main/home/cluster-dashboard/env-groups/EnvGroupArray";
 import Select from "components/porter/Select";
 import GithubActionModal from "./GithubActionModal";
+import { ActionConfigType, FullActionConfigType } from "shared/types";
 
-type Props = RouteComponentProps & {
-};
+type Props = RouteComponentProps & {};
 
+const defaultActionConfig: ActionConfigType = {
+  git_repo: "",
+  image_repo_uri: "",
+  git_branch: "",
+  git_repo_id: 0,
+  kind: "github",
+};
 
 interface FormState {
   applicationName: string;
@@ -55,128 +64,177 @@ const Validators: {
   envVariables: (value: KeyValueType[]) => true,
 };
 
+const NewAppFlow: React.FC<Props> = ({ ...props }) => {
+  const [templateName, setTemplateName] = useState("");
 
-
-const NewAppFlow: React.FC<Props> = ({
-  ...props
-}) => {
+  const [imageUrl, setImageUrl] = useState("");
+  const [imageTag, setImageTag] = useState("");
   const { currentCluster, currentProject } = useContext(Context);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [currentStep, setCurrentStep] = useState<number>(0);
   const [formState, setFormState] = useState<FormState>(INITIAL_STATE);
+  const [actionConfig, setActionConfig] = useState<ActionConfigType>({
+    ...defaultActionConfig,
+  });
+  const [procfileProcess, setProcfileProcess] = useState("");
+  const [branch, setBranch] = useState("");
+  const [repoType, setRepoType] = useState("");
+  const [dockerfilePath, setDockerfilePath] = useState(null);
+  const [procfilePath, setProcfilePath] = useState(null);
+  const [folderPath, setFolderPath] = useState(null);
+  const [selectedRegistry, setSelectedRegistry] = useState(null);
+  const [shouldCreateWorkflow, setShouldCreateWorkflow] = useState(true);
+  const [buildConfig, setBuildConfig] = useState();
+  const getFullActionConfig = (): FullActionConfigType => {
+    let imageRepoURI = `${selectedRegistry?.url}/${templateName}`;
+    return {
+      kind: "github",
+      git_repo: actionConfig.git_repo,
+      git_branch: branch,
+      registry_id: selectedRegistry?.id,
+      dockerfile_path: dockerfilePath,
+      folder_path: folderPath,
+      image_repo_uri: imageRepoURI,
+      git_repo_id: actionConfig.git_repo_id,
+      should_create_workflow: shouldCreateWorkflow,
+    };
+  };
   const [showGHAModal, setShowGHAModal] = useState<boolean>(false);
 
   return (
     <CenterWrapper>
       <Div>
-      <StyledConfigureTemplate>
-        <Back to="/apps" />
-        <DashboardHeader
-          prefix={
-            <Icon
-              src={web}
-            />
-          }
-          title="Deploy a new application"
-          capitalize={false}
-          disableLineBreak
-        />
-        <DarkMatter />
-        <VerticalSteps
-          currentStep={currentStep}
-          steps={[
-            <>
-              <Text size={16}>Application name</Text>
-              <Spacer y={0.5} />
-              <Text color="helper">
-                Lowercase letters, numbers, and "-" only.
-              </Text>
-              <Spacer y={0.5} />
-              <Input
-                placeholder="ex: academic-sophon"
-                value={formState.applicationName}
-                width="300px"
-                setValue={(e) => {
-                  setFormState({ ...formState, applicationName: e })
-                  if (Validators.applicationName(e)) {
-                    setCurrentStep(Math.max(currentStep, 1));
-                  }
-                }}
-              />
-            </>,
-            <>
-              <Text size={16}>Deployment method</Text>
-              <Spacer y={0.5} />
-              <Text color="helper">
-                Deploy from a Git repository or a Docker registry.
-                <a
-                  href="https://docs.porter.run/deploying-applications/overview"
-                  target="_blank"
-                >
-                  &nbsp;Learn more.
-                </a>
-              </Text>
-              <Spacer y={0.5} />
-              <SourceSelector
-                selectedSourceType={formState.selectedSourceType}
-                setSourceType={(type) => {
-                  setFormState({ ...formState, selectedSourceType: type })
-                  if (Validators.selectedSourceType(type)) {
-                    setCurrentStep(Math.max(currentStep, 2));
-                  }
-                }}
-              />
-              <SourceSettings source={formState.selectedSourceType} />
-            </>,
-            <>
-              <Text size={16}>Services</Text>
-              <Spacer y={1} />
-              <Services
-                setServices={
-                  (services: any[]) => {
-                    setFormState({ ...formState, serviceList: services })
+        <StyledConfigureTemplate>
+          <Back to="/apps" />
+          <DashboardHeader
+            prefix={<Icon src={web} />}
+            title="Deploy a new application"
+            capitalize={false}
+            disableLineBreak
+          />
+          <DarkMatter />
+          <VerticalSteps
+            currentStep={currentStep}
+            steps={[
+              <>
+                <Text size={16}>Application name</Text>
+                <Spacer y={0.5} />
+                <Text color="helper">
+                  Lowercase letters, numbers, and "-" only.
+                </Text>
+                <Spacer y={0.5}></Spacer> 
+                <Input
+                  placeholder="ex: academic-sophon"
+                  value={formState.applicationName}
+                  width="300px"
+                  setValue={(e) => {
+                    setFormState({ ...formState, applicationName: e });
+                    if (Validators.applicationName(e)) {
+                      setCurrentStep(Math.max(currentStep, 1));
+                    }
+                  }}
+                />
+              </>,
+              <>
+                <Text size={16}>Deployment method</Text>
+                <Spacer y={0.5} />
+                <Text color="helper">
+                  Deploy from a Git repository or a Docker registry.
+                  <a
+                    href="https://docs.porter.run/deploying-applications/overview"
+                    target="_blank"
+                  >
+                    &nbsp;Learn more.
+                  </a>
+                </Text>
+                <Spacer y={0.5} />
+                <SourceSelector
+                  selectedSourceType={formState.selectedSourceType}
+                  setSourceType={(type) => {
+                    setFormState({ ...formState, selectedSourceType: type });
+                    if (Validators.selectedSourceType(type)) {
+                      setCurrentStep(Math.max(currentStep, 2));
+                    }
+                  }}
+                />
+                <SourceSettings
+                  source={formState.selectedSourceType}
+                  templateName={templateName}
+                  setTemplateName={setTemplateName}
+                  imageUrl={imageUrl}
+                  setImageUrl={setImageUrl}
+                  imageTag={imageTag}
+                  setImageTag={setImageTag}
+                  actionConfig={actionConfig}
+                  setActionConfig={setActionConfig}
+                  branch={branch}
+                  setBranch={setBranch}
+                  procfileProcess={procfileProcess}
+                  setProcfileProcess={setProcfileProcess}
+                  repoType={repoType}
+                  setRepoType={setRepoType}
+                  dockerfilePath={dockerfilePath}
+                  setDockerfilePath={setDockerfilePath}
+                  folderPath={folderPath}
+                  setFolderPath={setFolderPath}
+                  procfilePath={procfilePath}
+                  setProcfilePath={setProcfilePath}
+                  selectedRegistry={selectedRegistry}
+                  setSelectedRegistry={setSelectedRegistry}
+                  setBuildConfig={setBuildConfig}
+                />
+              </>,
+              <>
+                <Text size={16}>Services</Text>
+                <Spacer y={1} />
+                <Services
+                  setServices={(services: any[]) => {
+                    setFormState({ ...formState, serviceList: services });
                     if (Validators.serviceList(services)) {
                       setCurrentStep(Math.max(currentStep, 4));
                     }
                   }}
-                services={formState.serviceList}
-              />
-            </>,
-            <>
-              <Text size={16}>Environment variables</Text>
-              <Spacer y={0.5} />
-              <Text color="helper">
-                Specify environment variables shared among all services.
-              </Text>
-              <EnvGroupArray
-                values={formState.envVariables}
-                setValues={(x: any) => setFormState({ ...formState, envVariables: x })}
-                fileUpload={true}
-              />
-            </>,
-            <>
-              <Text size={16}>Release command (optional)</Text>
-              <Spacer y={0.5} />
-              <Text color="helper">
-                If specified, this command will be run before every deployment.
-              </Text>
-              <Spacer y={0.5} />
-              <Input
-                placeholder="yarn ./scripts/run-migrations.js"
-                value={""}
-                width="300px"
-                setValue={(e) => { }}
-              />
-            </>
-          ]}
-        />
-        <Spacer y={1} />
-        <Button onClick={() => setShowGHAModal(true)}>
-          DEPLYOY
-        </Button>
-      </StyledConfigureTemplate>
+                  services={formState.serviceList}
+                />
+              </>,
+              <>
+                <Text size={16}>Environment variables</Text>
+                <Spacer y={0.5} />
+                <Text color="helper">
+                  Specify environment variables shared among all services.
+                </Text>
+                <EnvGroupArray
+                  values={formState.envVariables}
+                  setValues={(x: any) =>
+                    setFormState({ ...formState, envVariables: x })
+                  }
+                  fileUpload={true}
+                />
+              </>,
+              <>
+                <Text size={16}>Release command (optional)</Text>
+                <Spacer y={0.5} />
+                <Text color="helper">
+                  If specified, this command will be run before every
+                  deployment.
+                </Text>
+                <Spacer y={0.5} />
+                <Input
+                  placeholder="yarn ./scripts/run-migrations.js"
+                  value={""}
+                  width="300px"
+                  setValue={(e) => {}}
+                />
+              </>,
+            ]}
+          />
+          <Spacer y={1} />
+          <Button onClick={() => setShowGHAModal(true)}>DEPLYOY</Button>
+        </StyledConfigureTemplate>
       </Div>
-      {showGHAModal && <GithubActionModal closeModal={() => setShowGHAModal(false)} />}
+      {showGHAModal && (
+        <GithubActionModal closeModal={() => setShowGHAModal(false)} />
+      )}
     </CenterWrapper>
   );
 };
@@ -221,6 +279,3 @@ const Icon = styled.img`
 const StyledConfigureTemplate = styled.div`
   height: 100%;
 `;
-
-
-

dashboard/src/main/home/app-dashboard/new-app-flow/SourceSettings.tsx

@@ -1,118 +1,267 @@
 import AnimateHeight from "react-animate-height";
-import React from "react";
+import React, { Component } from "react";
 import Text from "components/porter/Text";
 import Spacer from "components/porter/Spacer";
 import Input from "components/porter/Input";
 import AdvancedBuildSettings from "./AdvancedBuildSettings";
 import styled from "styled-components";
 import { SourceType } from "./SourceSelector";
+import ActionConfEditorStack from "components/repo-selector/ActionConfEditorStack";
+import { ActionConfigType } from "shared/types";
+import { RouteComponentProps } from "react-router";
+import { Context } from "shared/Context";
+import ActionConfBranchSelector from "components/repo-selector/ActionConfBranchSelector";
 
-interface SourceSettingsProps {
-    source: SourceType | undefined;
-}
+type PropsType = RouteComponentProps & {
+  source: SourceType | undefined;
+  templateName: string;
+  setTemplateName: (x: string) => void;
+  setValuesToOverride: (x: any) => void;
+  setPage: (x: string) => void;
+  sourceType: string;
+  setSourceType: (x: string) => void;
 
-const SourceSettings: React.FC<SourceSettingsProps> = ({
-    source
-}) => {
-    const renderGithubSettings = () => {
-        return (
-            <>
-                <Text size={16}>Build settings</Text>
-                <Spacer y={0.5} />
-                <Text color="helper">
-                    Select your Github repository.
-                </Text>
-                <Spacer y={0.5} />
-                <Input
-                    placeholder="ex: academic-sophon"
-                    value=""
-                    width="100%"
-                    setValue={(e) => { }}
-                />
-                <Spacer y={0.5} />
-                <Text color="helper">
-                    Select your branch.
-                </Text>
-                <Spacer y={0.5} />
-                <Input
-                    placeholder="ex: academic-sophon"
-                    value=""
-                    width="100%"
-                    setValue={(e) => { }}
-                />
-                <Spacer y={0.5} />
-                <Text color="helper">
-                    Specify your application root path.
-                </Text>
-                <Spacer y={0.5} />
-                <Input
-                    placeholder="ex: ./"
-                    value=""
-                    width="100%"
-                    setValue={(e) => { }}
-                />
-                <Spacer y={0.5} />
-                <Text color="helper">
-                    Specify your porter.yaml path. <a>&nbsp;What is this?</a>
-                </Text>
-                <Spacer y={0.5} />
-                <Input
-                    placeholder="ex: ./porter.yaml"
-                    value=""
-                    width="100%"
-                    setValue={(e) => { }}
-                />
-                <Spacer y={1} />
-                <DetectedBuildMessage>
-                    <i className="material-icons">check</i>
-                    Detected Dockerfile at ./Dockerfile
-                </DetectedBuildMessage>
-                <Spacer y={1} />
-                <AdvancedBuildSettings />
-            </>
-        )
-    }
+  imageUrl: string;
+  setImageUrl: (x: string) => void;
+  imageTag: string;
+  setImageTag: (x: string) => void;
 
-    const renderDockerSettings = () => {
-        return (
-            <>
-                <Text size={16}>Registry settings</Text>
-                <Spacer y={0.5} />
-                <Text color="helper">
-                    Select your Github repository.
-                </Text>
-                <Spacer height="20px" />
-                <Input
+  hasSource?: string;
+
+  actionConfig: ActionConfigType;
+  setActionConfig: (
+    x: ActionConfigType | ((prevState: ActionConfigType) => ActionConfigType)
+  ) => void;
+  procfileProcess: string;
+  setProcfileProcess: (x: string) => void;
+  branch: string;
+  setBranch: (x: string) => void;
+  repoType: string;
+  setRepoType: (x: string) => void;
+  dockerfilePath: string | null;
+  setDockerfilePath: (x: string) => void;
+  procfilePath: string | null;
+  setProcfilePath: (x: string) => void;
+  folderPath: string | null;
+  setFolderPath: (x: string) => void;
+  selectedRegistry: any;
+  setSelectedRegistry: (x: string) => void;
+  setBuildConfig: (x: any) => void;
+};
+const defaultActionConfig: ActionConfigType = {
+  git_repo: "",
+  image_repo_uri: "",
+  git_branch: "",
+  git_repo_id: 0,
+  kind: "github",
+};
+type StateType = {};
+class SourceSettings extends Component<PropsType, StateType> {
+  renderGithubSettings = () => {
+    return (
+      <>
+        <Text size={16}>Build settings</Text>
+        <Spacer y={0.5} />
+        <Text color="helper">Select your Github repository.</Text>
+        <Spacer y={0.5} />
+        {/* <Input
                     placeholder="ex: academic-sophon"
                     value=""
                     width="100%"
                     setValue={(e) => { }}
-                />
-                <Spacer y={0.5} />
-                <Text color="helper">
-                    Select your branch.
-                </Text>
-            </>
-        )
-    }
+                /> */}
+        {
+          <>
+            {" "}
+            {/* <CloseButton
+        onClick={() => {
+          setSourceType("");
+          setDockerfilePath("");
+          setFolderPath("");
+          setProcfilePath("");
+          setProcfileProcess("");
+        }}
+      >
+        <i className="material-icons">close</i>
+      </CloseButton> */}
+            <Subtitle>
+              Provide a repo folder to use as source.
+              {/* <Highlight
+                onClick={() => this.context.setCurrentModal("AccountSettingsModal", {})}
+              >
+                Manage Git repos
+              </Highlight> */}
+              <Required>*</Required>
+              <ActionConfEditorStack
+                actionConfig={this.props.actionConfig}
+                branch={this.props.branch}
+                setActionConfig={(actionConfig: ActionConfigType) => {
+                  this.props.setActionConfig(
+                    (currentActionConfig: ActionConfigType) => ({
+                      ...currentActionConfig,
+                      ...actionConfig,
+                    })
+                  );
+                  this.props.setImageUrl(actionConfig.image_repo_uri);
+                  /*
+            setParentState({ actionConfig }, () =>
+              setParentState({ imageUrl: actionConfig.image_repo_uri })
+            )
+            */
+                }}
+                procfileProcess={this.props.procfileProcess}
+                setProcfileProcess={(procfileProcess: string) => {
+                  this.props.setProcfileProcess(procfileProcess);
+                  this.props.setValuesToOverride((v: any) => ({
+                    ...v,
+                    "container.command": procfileProcess || "",
+                    showStartCommand: !procfileProcess,
+                  }));
+                }}
+                setBranch={this.props.setBranch}
+                setDockerfilePath={this.props.setDockerfilePath}
+                setProcfilePath={this.props.setProcfilePath}
+                procfilePath={this.props.procfilePath}
+                dockerfilePath={this.props.dockerfilePath}
+                folderPath={this.props.folderPath}
+                setFolderPath={this.props.setFolderPath}
+                reset={() => {
+                  this.props.setActionConfig({ ...defaultActionConfig });
+                  this.props.setBranch("");
+                  this.props.setDockerfilePath(null);
+                  this.props.setFolderPath(null);
+                }}
+                setSelectedRegistry={this.props.setSelectedRegistry}
+                selectedRegistry={this.props.selectedRegistry}
+                setBuildConfig={this.props.setBuildConfig}
+              />
+            </Subtitle>
+            <DarkMatter antiHeight="-4px" />
+            <br />
+          </>
+        }
+        <Spacer y={0.5} />
+        {this.props.actionConfig.git_repo ? (
+          <>
+            <Text color="helper">Select your branch.</Text>
+            <ActionConfBranchSelector
+              actionConfig={this.props.actionConfig}
+              branch={this.props.branch}
+              setActionConfig={(actionConfig: ActionConfigType) => {
+                this.props.setActionConfig(
+                  (currentActionConfig: ActionConfigType) => ({
+                    ...currentActionConfig,
+                    ...actionConfig,
+                  })
+                );
+                this.props.setImageUrl(actionConfig.image_repo_uri);
+                /*
+      setParentState({ actionConfig }, () =>
+        setParentState({ imageUrl: actionConfig.image_repo_uri })
+      )
+      */
+              }}
+              procfileProcess={this.props.procfileProcess}
+              setProcfileProcess={(procfileProcess: string) => {
+                this.props.setProcfileProcess(procfileProcess);
+                this.props.setValuesToOverride((v: any) => ({
+                  ...v,
+                  "container.command": procfileProcess || "",
+                  showStartCommand: !procfileProcess,
+                }));
+              }}
+              setBranch={this.props.setBranch}
+              setDockerfilePath={this.props.setDockerfilePath}
+              setProcfilePath={this.props.setProcfilePath}
+              procfilePath={this.props.procfilePath}
+              dockerfilePath={this.props.dockerfilePath}
+              folderPath={this.props.folderPath}
+              setFolderPath={this.props.setFolderPath}
+              reset={() => {
+                this.props.setActionConfig({ ...defaultActionConfig });
+                this.props.setBranch("");
+                this.props.setDockerfilePath(null);
+                this.props.setFolderPath(null);
+              }}
+              setSelectedRegistry={this.props.setSelectedRegistry}
+              selectedRegistry={this.props.selectedRegistry}
+              setBuildConfig={this.props.setBuildConfig}
+            />
+          </>
+        ) : (
+          <></>
+        )}
+        <Spacer y={0.5} />
+        <Spacer y={0.5} />
+        <Text color="helper">Specify your application root path.</Text>
+        <Spacer y={0.5} />
+        <Input
+          placeholder="ex: ./"
+          value=""
+          width="100%"
+          setValue={(e) => {}}
+        />
+        <Spacer y={0.5} />
+        <Text color="helper">
+          Specify your porter.yaml path. <a>&nbsp;What is this?</a>
+        </Text>
+        <Spacer y={0.5} />
+        <Input
+          placeholder="ex: ./porter.yaml"
+          value=""
+          width="100%"
+          setValue={(e) => {}}
+        />
+        <Spacer y={1} />
+        <DetectedBuildMessage>
+          <i className="material-icons">check</i>
+          Detected Dockerfile at ./Dockerfile
+        </DetectedBuildMessage>
+        <Spacer y={1} />
+        <AdvancedBuildSettings />
+      </>
+    );
+  };
+
+  renderDockerSettings = () => {
+    return (
+      <>
+        <Text size={16}>Registry settings</Text>
+        <Spacer y={0.5} />
+        <Text color="helper">Select your Github repository.</Text>
+        <Spacer height="20px" />
+        <Input
+          placeholder="ex: academic-sophon"
+          value=""
+          width="100%"
+          setValue={(e) => {}}
+        />
+        <Spacer y={0.5} />
+        <Text color="helper">Select your branch.</Text>
+      </>
+    );
+  };
 
+  render() {
     return (
-        <SourceSettingsContainer source={source}>
-            <AnimateHeight
-                height={source ? 'auto' : 0}
-            >
-                <div >
-                    {source === "github" ? renderGithubSettings() : renderDockerSettings()}
-                </div>
-            </AnimateHeight >
-        </SourceSettingsContainer>
-    )
+      <SourceSettingsContainer source={this.props.source}>
+        <AnimateHeight height={this.props.source ? "auto" : 0}>
+          <div>
+            {this.props.source === "github"
+              ? this.renderGithubSettings()
+              : this.renderDockerSettings()}
+          </div>
+        </AnimateHeight>
+      </SourceSettingsContainer>
+    );
+  }
 }
 
 export default SourceSettings;
 
 const SourceSettingsContainer = styled.div`
-    margin-top: ${(props: { source: SourceType | undefined }) => props.source && "20px"};
+  margin-top: ${(props: { source: SourceType | undefined }) =>
+    props.source && "20px"};
 `;
 const DetectedBuildMessage = styled.div`
   color: #0f872b;
@@ -127,4 +276,190 @@ const DetectedBuildMessage = styled.div`
     border-radius: 20px;
     transform: none;
   }
-`;
+`;
+
+const Heading = styled.div<{ isAtTop?: boolean }>`
+  color: white;
+  font-weight: 500;
+  font-size: 16px;
+  margin-bottom: 5px;
+  margin-top: ${(props) => (props.isAtTop ? "10px" : "30px")};
+  display: flex;
+  align-items: center;
+`;
+
+const StyledSourcePage = styled.div`
+  position: relative;
+  margin-top: -5px;
+`;
+
+const Buffer = styled.div`
+  width: 100%;
+  height: 15px;
+`;
+
+const Br = styled.div`
+  width: 100%;
+  height: 5px;
+`;
+
+const DarkMatter = styled.div<{ antiHeight?: string }>`
+  width: 100%;
+  margin-top: ${(props) => props.antiHeight || "-15px"};
+`;
+
+const Subtitle = styled.div`
+  padding: 11px 0px 16px;
+  font-family: "Work Sans", sans-serif;
+  font-size: 13px;
+  color: #aaaabb;
+  line-height: 1.6em;
+`;
+
+const CloseButton = styled.div`
+  position: absolute;
+  display: block;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  border-radius: 50%;
+  right: 12px;
+  top: 10px;
+  cursor: pointer;
+  :hover {
+    background-color: #ffffff11;
+  }
+
+  > i {
+    font-size: 20px;
+    color: #aaaabb;
+  }
+`;
+
+const CloseButtonImg = styled.img`
+  width: 14px;
+  margin: 0 auto;
+`;
+
+const BlockIcon = styled.img<{ bw?: boolean }>`
+  height: 38px;
+  padding: 2px;
+  margin-top: 30px;
+  margin-bottom: 15px;
+  filter: ${(props) => (props.bw ? "grayscale(1)" : "")};
+`;
+
+const BlockDescription = styled.div`
+  margin-bottom: 12px;
+  color: #ffffff66;
+  text-align: center;
+  font-weight: default;
+  font-size: 13px;
+  padding: 0px 25px;
+  height: 2.4em;
+  font-size: 12px;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+`;
+
+const BlockTitle = styled.div`
+  margin-bottom: 12px;
+  width: 80%;
+  text-align: center;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const Block = styled.div<{ disabled?: boolean }>`
+  align-items: center;
+  user-select: none;
+  display: flex;
+  font-size: 13px;
+  overflow: hidden;
+  font-weight: 500;
+  padding: 3px 0px 12px;
+  flex-direction: column;
+  align-item: center;
+  justify-content: space-between;
+  height: 170px;
+  cursor: ${(props) => (props.disabled ? "" : "pointer")};
+  color: #ffffff;
+  position: relative;
+
+  border-radius: 5px;
+  background: ${(props) => props.theme.clickable.bg};
+  border: 1px solid #494b4f;
+  :hover {
+  }
+  :hover {
+    border: ${(props) => (props.disabled ? "" : "1px solid #7a7b80")};
+  }
+
+  animation: fadeIn 0.3s 0s;
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+
+const BlockList = styled.div`
+  overflow: visible;
+  margin-top: 6px;
+  margin-bottom: 27px;
+  display: grid;
+  grid-column-gap: 25px;
+  grid-row-gap: 25px;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+`;
+
+const Required = styled.div`
+  margin-left: 8px;
+  color: #fc4976;
+  display: inline-block;
+`;
+
+const InputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: -15px;
+  margin-bottom: -6px;
+`;
+
+const Warning = styled.span`
+  color: ${(props: { highlight: boolean; makeFlush?: boolean }) =>
+    props.highlight ? "#f5cb42" : ""};
+  margin-left: ${(props: { highlight: boolean; makeFlush?: boolean }) =>
+    props.makeFlush ? "" : "5px"};
+`;
+
+const Highlight = styled.a`
+  color: #8590ff;
+  text-decoration: none;
+  margin-left: 5px;
+  cursor: pointer;
+  display: inline;
+`;
+
+const StyledSourceBox = styled.div`
+  width: 100%;
+  color: #ffffff;
+  padding: 14px 35px 20px;
+  position: relative;
+  font-size: 13px;
+  margin-top: 6px;
+  margin-bottom: 25px;
+  border-radius: 5px;
+  background: ${(props) => props.theme.fg};
+  border: 1px solid #494b4f;
+`;