pipe in process name as start command

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

@@ -17,7 +17,9 @@ type PropsType = {
   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;
@@ -104,11 +106,10 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
       );
     }
 
-    if (this.props.procfilePath && this.props.folderPath && !this.props.dockerfilePath) {
+    if (this.props.procfilePath && this.props.folderPath && !this.props.dockerfilePath &&!this.props.procfileProcess) {
       return (
         <>
-        <div>hello</div>
-          {/* <ExpandedWrapperAlt>
+          <ExpandedWrapperAlt>
             <ContentsList
               actionConfig={actionConfig}
               branch={branch}
@@ -116,6 +117,7 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
               procfilePath={this.props.procfilePath}
               setDockerfilePath={(x: string) => this.props.setDockerfilePath(x)}
               setProcfilePath={(x: string) => this.props.setProcfilePath(x)}
+              setProcfileProcess={(x: string) => this.props.setProcfileProcess(x)}
               setFolderPath={(x: string) => this.props.setFolderPath(x)}
             />
           </ExpandedWrapperAlt>
@@ -128,7 +130,7 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
           >
             <i className="material-icons">keyboard_backspace</i>
             Select Branch
-          </BackButton> */}
+          </BackButton>
         </>
       )
     }
@@ -138,6 +140,8 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
         branch={branch}
         setDockerfilePath={this.props.setDockerfilePath}
         setFolderPath={this.props.setFolderPath}
+        setProcfilePath={this.props.setProcfilePath}
+        setProcfileProcess={this.props.setProcfileProcess}
         actionConfig={actionConfig}
         setActionConfig={setActionConfig}
         dockerfilePath={this.props.dockerfilePath}

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

@@ -16,6 +16,8 @@ type PropsType = {
   branch: string;
   dockerfilePath: string;
   procfilePath: string;
+  setProcfilePath: (x: string) => void;
+  setProcfileProcess: (x: string) => void;
   folderPath: string;
   setSelectedRegistry: (x: any) => void;
   selectedRegistry: any;
@@ -107,7 +109,6 @@ export default class ActionDetails extends Component<PropsType, StateType> {
   };
 
   render() {
-    console.log(this.props.dockerfilePath, this.props.folderPath, this.props.procfilePath)
     return (
       <>
         <DarkMatter />
@@ -161,6 +162,8 @@ export default class ActionDetails extends Component<PropsType, StateType> {
             onClick={() => {
               this.props.setDockerfilePath(null);
               this.props.setFolderPath(null);
+              this.props.setProcfilePath(null);
+              this.props.setProcfileProcess(null);
             }}
           >
             <i className="material-icons">keyboard_backspace</i>

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

@@ -16,6 +16,7 @@ type PropsType = {
   branch: string;
   procfilePath?: string;
   setActionConfig: (x: ActionConfigType) => void;
+  setProcfileProcess?: (x: string) => void; 
   setDockerfilePath: (x: string) => void;
   setProcfilePath: (x: string) => void;
   setFolderPath: (x: string) => void;
@@ -190,6 +191,45 @@ export default class ContentsList extends Component<PropsType, StateType> {
   };
 
   renderOverlay = () => {
+    if (this.props.procfilePath) {
+      return (
+        <Overlay>
+          <BgOverlay onClick={() => this.setState({ dockerfiles: [] }, () => {
+            this.props.setFolderPath("");
+            this.props.setProcfilePath("");
+          })} />
+          <CloseButton onClick={() => this.setState({ dockerfiles: [] }, () => {
+            this.props.setProcfilePath("");
+          })}>
+            <CloseButtonImg src={close} />
+          </CloseButton>
+          <Label>
+            Porter has detected a Procfile in this folder. Which process would you
+            like to run?
+          </Label>
+          <DockerfileList>
+            {this.state.dockerfiles.map((dockerfile: string, i: number) => {
+              return (
+                <Row
+                  key={i}
+                  onClick={() => {
+                    console.log('ok')
+                    this.props.setProcfileProcess(
+                      'web'
+                    )
+                  }
+                  }
+                  isLast={this.state.dockerfiles.length - 1 === i}
+                >
+                  <Indicator selected={false}></Indicator>
+                  {dockerfile}
+                </Row>
+              );
+            })}
+          </DockerfileList>
+        </Overlay>
+      );
+    }
     if (this.state.dockerfiles.length > 0) {
       return (
         <Overlay>

dashboard/src/components/values-form/ValuesForm.tsx

@@ -23,6 +23,7 @@ type PropsType = {
   disabled?: boolean;
   namespace?: string;
   clusterId?: number;
+  procfileProcess?: string;
 };
 
 type StateType = any;
@@ -43,6 +44,12 @@ export default class ValuesForm extends Component<PropsType, StateType> {
     return section.contents.map((item: FormElement, i: number) => {
       // If no name is assigned use values.yaml variable as identifier
       let key = item.name || item.variable;
+      
+      // ugly exception to hide start command option when procfile process is set.
+      if ((item.variable === "container.command" || (item.type == "subtitle" && item.name == "command_description")) && this.props.procfileProcess) {
+          return;
+      }
+
       switch (item.type) {
         case "heading":
           return <Heading key={i}>{item.label}</Heading>;

dashboard/src/main/home/launch/expanded-template/LaunchTemplate.tsx

@@ -50,6 +50,7 @@ type StateType = {
   tabContents: any;
   namespaceOptions: { label: string; value: string }[];
   actionConfig: ActionConfigType;
+  procfileProcess: string;
   branch: string;
   repoType: string;
   dockerfilePath: string | null;
@@ -87,6 +88,7 @@ class LaunchTemplate extends Component<PropsType, StateType> {
     branch: "",
     repoType: "",
     dockerfilePath: null as string | null,
+    procfileProcess: null as string | null,
     procfilePath: null as string | null,
     folderPath: null as string | null,
     selectedRegistry: null as any | null,
@@ -427,6 +429,14 @@ class LaunchTemplate extends Component<PropsType, StateType> {
         renderSaveButton={true}
       >
         {(metaState: any, setMetaState: any) => {
+
+          if (!metaState) {
+            return;
+          }
+          
+          // handle when procfileProcess is already specified
+          metaState['container.command'] = this.state.procfileProcess ? this.state.procfileProcess : "";
+
           return this.props.form?.tabs.map((tab: any, i: number) => {
             // If tab is current, render
             if (tab.name === this.state.currentTab) {
@@ -440,6 +450,8 @@ class LaunchTemplate extends Component<PropsType, StateType> {
                   // For env group loader
                   namespace={this.state.selectedNamespace}
                   clusterId={this.state.selectedClusterId}
+                  // For procfile process
+                  procfileProcess={this.state.procfileProcess}
                 />
               );
             }
@@ -675,6 +687,8 @@ class LaunchTemplate extends Component<PropsType, StateType> {
                 );
               })
             }
+            procfileProcess={this.state.procfileProcess}
+            setProcfileProcess={(procfileProcess: string) => this.setState({ procfileProcess })}
             setBranch={(branch: string) => this.setState({ branch })}
             setDockerfilePath={(x: string) =>
               this.setState({ dockerfilePath: x })