prettier

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

@@ -106,7 +106,12 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
       );
     }
 
-    if (this.props.procfilePath && this.props.folderPath && !this.props.dockerfilePath &&!this.props.procfileProcess) {
+    if (
+      this.props.procfilePath &&
+      this.props.folderPath &&
+      !this.props.dockerfilePath &&
+      !this.props.procfileProcess
+    ) {
       return (
         <>
           <ExpandedWrapperAlt>
@@ -117,7 +122,9 @@ 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)}
+              setProcfileProcess={(x: string) =>
+                this.props.setProcfileProcess(x)
+              }
               setFolderPath={(x: string) => this.props.setFolderPath(x)}
             />
           </ExpandedWrapperAlt>
@@ -132,7 +139,7 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
             Select Branch
           </BackButton>
         </>
-      )
+      );
     }
 
     return (

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

@@ -169,9 +169,7 @@ export default class ActionDetails extends Component<PropsType, StateType> {
             <i className="material-icons">keyboard_backspace</i>
             Select Folder
           </BackButton>
-          {
-          
-          (!this.props.procfilePath && !this.props.dockerfilePath) ? (
+          {!this.props.procfilePath && !this.props.dockerfilePath ? (
             <StatusWrapper>
               <i className="material-icons">error_outline</i>
               Procfile not detected.
@@ -185,8 +183,7 @@ export default class ActionDetails extends Component<PropsType, StateType> {
               <i className="material-icons">error_outline</i>A connected
               container registry is required
             </StatusWrapper>
-          )          
-          }
+          )}
         </Flex>
       </>
     );

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

@@ -16,7 +16,7 @@ type PropsType = {
   branch: string;
   procfilePath?: string;
   setActionConfig: (x: ActionConfigType) => void;
-  setProcfileProcess?: (x: string) => void; 
+  setProcfileProcess?: (x: string) => void;
   setDockerfilePath: (x: string) => void;
   setProcfilePath: (x: string) => void;
   setFolderPath: (x: string) => void;
@@ -104,7 +104,7 @@ export default class ContentsList extends Component<PropsType, StateType> {
         }
       )
       .then((res) => {
-        this.setState({ processes: res.data})
+        this.setState({ processes: res.data });
       })
       .catch((err) => {
         console.log(err);
@@ -198,7 +198,7 @@ export default class ContentsList extends Component<PropsType, StateType> {
         dockerfiles.push(fileName);
       }
       if (fileName.includes("Procfile")) {
-        this.props.setProcfilePath(item.Path)
+        this.props.setProcfilePath(item.Path);
       }
     });
     if (dockerfiles.length > 0) {
@@ -217,35 +217,42 @@ export default class ContentsList extends Component<PropsType, StateType> {
       let processes = Object.keys(this.state.processes);
       return (
         <Overlay>
-          <BgOverlay onClick={() => this.setState({ dockerfiles: [] }, () => {
-            this.props.setFolderPath("");
-            this.props.setProcfilePath("");
-          })} />
-          <CloseButton onClick={() => this.setState({ dockerfiles: [] }, () => {
-            this.props.setProcfilePath("");
-          })}>
+          <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?
+            Porter has detected a Procfile in this folder. Which process would
+            you like to run?
           </Label>
           <DockerfileList>
-            {
-              processes.map((process: string, i: number) => {
-                return (
-                  <Row
-                    key={i}
-                    onClick={() => { this.props.setProcfileProcess(process) }
-                    }
-                    isLast={processes.length - 1 === i}
-                  >
-                    <Indicator selected={false}></Indicator>
-                    {process}
-                  </Row>
-                );
-              })            
-            }
+            {processes.map((process: string, i: number) => {
+              return (
+                <Row
+                  key={i}
+                  onClick={() => {
+                    this.props.setProcfileProcess(process);
+                  }}
+                  isLast={processes.length - 1 === i}
+                >
+                  <Indicator selected={false}></Indicator>
+                  {process}
+                </Row>
+              );
+            })}
           </DockerfileList>
         </Overlay>
       );
@@ -281,10 +288,9 @@ export default class ContentsList extends Component<PropsType, StateType> {
           </DockerfileList>
           <ConfirmButton
             onClick={() => {
-              this.props.setFolderPath(this.state.currentDir || "./")
-              this.props.setProcfilePath("./Procfile")
-            }
-            }
+              this.props.setFolderPath(this.state.currentDir || "./");
+              this.props.setProcfilePath("./Procfile");
+            }}
           >
             No, I don't want to use a Dockerfile
           </ConfirmButton>

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

@@ -44,10 +44,14 @@ 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;
+      if (
+        (item.variable === "container.command" ||
+          (item.type == "subtitle" && item.name == "command_description")) &&
+        this.props.procfileProcess
+      ) {
+        return;
       }
 
       switch (item.type) {

dashboard/src/main/home/Home.tsx

@@ -143,7 +143,11 @@ class Home extends Component<PropsType, StateType> {
     return callback();
   };
 
-  provisionDOKS = async (integrationId: number, region: string, clusterName: string) => {
+  provisionDOKS = async (
+    integrationId: number,
+    region: string,
+    clusterName: string
+  ) => {
     console.log("Provisioning DOKS...");
     await api.createDOKS(
       "<token>",
@@ -178,7 +182,7 @@ class Home extends Component<PropsType, StateType> {
           let urlParams = new URLSearchParams(queryString);
           let tier = urlParams.get("tier");
           let region = urlParams.get("region");
-          let clusterName = urlParams.get("cluster_name")
+          let clusterName = urlParams.get("cluster_name");
           let infras = urlParams.getAll("infras");
           if (infras.length === 2) {
             this.provisionDOCR(tgtIntegration.id, tier, () => {

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

@@ -385,10 +385,11 @@ class LaunchTemplate extends Component<PropsType, StateType> {
 
     if (
       sourceType === "repo" &&
-      (!dockerfilePath && folderPath) &&
+      !dockerfilePath &&
+      folderPath &&
       !procfilePath
     ) {
-      return "Procfile not detected."
+      return "Procfile not detected.";
     }
 
     if (!this.submitIsDisabled()) {
@@ -397,7 +398,7 @@ class LaunchTemplate extends Component<PropsType, StateType> {
 
     // handle exception when deploy process is on loading
     if (this.state.saveValuesStatus === "loading") {
-      return "loading"
+      return "loading";
     }
 
     if (
@@ -412,7 +413,6 @@ class LaunchTemplate extends Component<PropsType, StateType> {
       return "Template name contains illegal characters";
     }
     return "No application source specified";
-
   };
 
   renderTabContents = () => {
@@ -429,13 +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 : "";
+          metaState["container.command"] = this.state.procfileProcess
+            ? this.state.procfileProcess
+            : "";
 
           return this.props.form?.tabs.map((tab: any, i: number) => {
             // If tab is current, render
@@ -611,7 +612,15 @@ class LaunchTemplate extends Component<PropsType, StateType> {
     } else if (this.state.sourceType === "registry") {
       return (
         <StyledSourceBox>
-          <CloseButton onClick={() => this.setState({ sourceType: "", selectedImageUrl: "", selectedTag: "" })}>
+          <CloseButton
+            onClick={() =>
+              this.setState({
+                sourceType: "",
+                selectedImageUrl: "",
+                selectedTag: "",
+              })
+            }
+          >
             <CloseButtonImg src={close} />
           </CloseButton>
           <Subtitle>
@@ -688,13 +697,15 @@ class LaunchTemplate extends Component<PropsType, StateType> {
               })
             }
             procfileProcess={this.state.procfileProcess}
-            setProcfileProcess={(procfileProcess: string) => this.setState({ procfileProcess })}
+            setProcfileProcess={(procfileProcess: string) =>
+              this.setState({ procfileProcess })
+            }
             setBranch={(branch: string) => this.setState({ branch })}
             setDockerfilePath={(x: string) =>
               this.setState({ dockerfilePath: x })
             }
             setProcfilePath={(x: string) => {
-              this.setState({ procfilePath: x })
+              this.setState({ procfilePath: x });
             }}
             procfilePath={this.state.procfilePath}
             dockerfilePath={this.state.dockerfilePath}

dashboard/src/main/home/provisioner/AWSFormSection.tsx

@@ -89,7 +89,7 @@ class AWSFormSection extends Component<PropsType, StateType> {
   componentDidMount = () => {
     let { infras } = this.props;
     let { selectedInfras } = this.state;
-    this.setClusterNameIfNotSet()
+    this.setClusterNameIfNotSet();
 
     if (infras) {
       // From the dashboard, only uncheck and disable if "creating" or "created"
@@ -106,39 +106,60 @@ class AWSFormSection extends Component<PropsType, StateType> {
     }
   };
 
-  componentDidUpdate = (prevProps : PropsType, prevState : StateType) => {
+  componentDidUpdate = (prevProps: PropsType, prevState: StateType) => {
     if (prevProps.projectName != this.props.projectName) {
-      this.setClusterNameIfNotSet()
+      this.setClusterNameIfNotSet();
     }
-  }
+  };
 
   setClusterNameIfNotSet = () => {
-    let projectName = this.props.projectName || this.context.currentProject?.name
+    let projectName =
+      this.props.projectName || this.context.currentProject?.name;
 
-    if (!this.state.clusterNameSet && !this.state.clusterName.includes(`${projectName}-cluster`)) {
+    if (
+      !this.state.clusterNameSet &&
+      !this.state.clusterName.includes(`${projectName}-cluster`)
+    ) {
       this.setState({
-        clusterName: `${projectName}-cluster-${Math.random().toString(36).substring(2, 8)}`
-      })
+        clusterName: `${projectName}-cluster-${Math.random()
+          .toString(36)
+          .substring(2, 8)}`,
+      });
     }
-  }
+  };
 
   checkFormDisabled = () => {
     if (!this.state.provisionConfirmed) {
       return true;
     }
 
-    let { awsRegion, awsAccessId, awsSecretKey, selectedInfras, clusterName } = this.state;
+    let {
+      awsRegion,
+      awsAccessId,
+      awsSecretKey,
+      selectedInfras,
+      clusterName,
+    } = this.state;
     let { projectName } = this.props;
     if (projectName || projectName === "") {
       return (
         !isAlphanumeric(projectName) ||
-        !(awsAccessId !== "" && awsSecretKey !== "" && awsRegion !== "" && clusterName !== "") ||
+        !(
+          awsAccessId !== "" &&
+          awsSecretKey !== "" &&
+          awsRegion !== "" &&
+          clusterName !== ""
+        ) ||
         selectedInfras.length === 0
       );
     } else {
       return (
-        !(awsAccessId !== "" && awsSecretKey !== "" && awsRegion !== "" && clusterName !== "") ||
-        selectedInfras.length === 0
+        !(
+          awsAccessId !== "" &&
+          awsSecretKey !== "" &&
+          awsRegion !== "" &&
+          clusterName !== ""
+        ) || selectedInfras.length === 0
       );
     }
   };
@@ -209,7 +230,13 @@ class AWSFormSection extends Component<PropsType, StateType> {
   };
 
   provisionEKS = () => {
-    let { awsAccessId, awsSecretKey, awsRegion, awsMachineType, clusterName } = this.state;
+    let {
+      awsAccessId,
+      awsSecretKey,
+      awsRegion,
+      awsMachineType,
+      clusterName,
+    } = this.state;
     let { currentProject } = this.context;
 
     api
@@ -296,18 +323,25 @@ class AWSFormSection extends Component<PropsType, StateType> {
   renderClusterNameSection = () => {
     let { selectedInfras, clusterName } = this.state;
 
-    if (selectedInfras.length == 2 ||  (selectedInfras.length == 1 && selectedInfras[0].value === "eks")) {
-      return <InputRow
-        type="text"
-        value={clusterName}
-        setValue={(x: string) => this.setState({ clusterName: x, clusterNameSet: true })}
-        label="Cluster Name"
-        placeholder="ex: porter-cluster"
-        width="100%"
-        isRequired={true}
-      />
+    if (
+      selectedInfras.length == 2 ||
+      (selectedInfras.length == 1 && selectedInfras[0].value === "eks")
+    ) {
+      return (
+        <InputRow
+          type="text"
+          value={clusterName}
+          setValue={(x: string) =>
+            this.setState({ clusterName: x, clusterNameSet: true })
+          }
+          label="Cluster Name"
+          placeholder="ex: porter-cluster"
+          width="100%"
+          isRequired={true}
+        />
+      );
     }
-  }
+  };
 
   render() {
     let { setSelectedProvisioner } = this.props;

dashboard/src/main/home/provisioner/DOFormSection.tsx

@@ -68,7 +68,7 @@ export default class DOFormSection extends Component<PropsType, StateType> {
   componentDidMount = () => {
     let { infras } = this.props;
     let { selectedInfras } = this.state;
-    this.setClusterNameIfNotSet()
+    this.setClusterNameIfNotSet();
 
     if (infras) {
       // From the dashboard, only uncheck and disable if "creating" or "created"
@@ -85,21 +85,27 @@ export default class DOFormSection extends Component<PropsType, StateType> {
     }
   };
 
-  componentDidUpdate = (prevProps : PropsType, prevState : StateType) => {
+  componentDidUpdate = (prevProps: PropsType, prevState: StateType) => {
     if (prevProps.projectName != this.props.projectName) {
-      this.setClusterNameIfNotSet()
+      this.setClusterNameIfNotSet();
     }
-  }
+  };
 
   setClusterNameIfNotSet = () => {
-    let projectName = this.props.projectName || this.context.currentProject?.name
+    let projectName =
+      this.props.projectName || this.context.currentProject?.name;
 
-    if (!this.state.clusterNameSet && !this.state.clusterName.includes(`${projectName}-cluster`)) {
+    if (
+      !this.state.clusterNameSet &&
+      !this.state.clusterName.includes(`${projectName}-cluster`)
+    ) {
       this.setState({
-        clusterName: `${projectName}-cluster-${Math.random().toString(36).substring(2, 8)}`
-      })
+        clusterName: `${projectName}-cluster-${Math.random()
+          .toString(36)
+          .substring(2, 8)}`,
+      });
     }
-  }
+  };
 
   checkFormDisabled = () => {
     if (!this.state.provisionConfirmed) {
@@ -109,7 +115,11 @@ export default class DOFormSection extends Component<PropsType, StateType> {
     let { selectedInfras, clusterName } = this.state;
     let { projectName } = this.props;
     if (projectName || projectName === "") {
-      return !isAlphanumeric(projectName) || selectedInfras.length === 0 || !clusterName;
+      return (
+        !isAlphanumeric(projectName) ||
+        selectedInfras.length === 0 ||
+        !clusterName
+      );
     } else {
       return selectedInfras.length === 0 || !clusterName;
     }
@@ -149,7 +159,12 @@ export default class DOFormSection extends Component<PropsType, StateType> {
   };
 
   doRedirect = (projectId: number) => {
-    let { subscriptionTier, doRegion, selectedInfras, clusterName } = this.state;
+    let {
+      subscriptionTier,
+      doRegion,
+      selectedInfras,
+      clusterName,
+    } = this.state;
     let redirectUrl = `/api/oauth/projects/${projectId}/digitalocean?project_id=${projectId}&provision=do`;
     redirectUrl += `&tier=${subscriptionTier}&region=${doRegion}&cluster_name=${clusterName}`;
     selectedInfras.forEach((option: { value: string; label: string }) => {
@@ -178,7 +193,11 @@ export default class DOFormSection extends Component<PropsType, StateType> {
         return "Project name contains illegal characters";
       }
     }
-    if (!this.state.provisionConfirmed || this.props.projectName === "" || !this.state.clusterName) {
+    if (
+      !this.state.provisionConfirmed ||
+      this.props.projectName === "" ||
+      !this.state.clusterName
+    ) {
       return "Required fields missing";
     }
   };
@@ -186,18 +205,25 @@ export default class DOFormSection extends Component<PropsType, StateType> {
   renderClusterNameSection = () => {
     let { selectedInfras, clusterName } = this.state;
 
-    if (selectedInfras.length == 2 ||  (selectedInfras.length == 1 && selectedInfras[0].value === "doks")) {
-      return <InputRow
-        type="text"
-        value={clusterName}
-        setValue={(x: string) => this.setState({ clusterName: x, clusterNameSet: true })}
-        label="Cluster Name"
-        placeholder="ex: porter-cluster"
-        width="100%"
-        isRequired={true}
-      />
+    if (
+      selectedInfras.length == 2 ||
+      (selectedInfras.length == 1 && selectedInfras[0].value === "doks")
+    ) {
+      return (
+        <InputRow
+          type="text"
+          value={clusterName}
+          setValue={(x: string) =>
+            this.setState({ clusterName: x, clusterNameSet: true })
+          }
+          label="Cluster Name"
+          placeholder="ex: porter-cluster"
+          width="100%"
+          isRequired={true}
+        />
+      );
     }
-  }
+  };
 
   render() {
     let { setSelectedProvisioner } = this.props;

dashboard/src/main/home/provisioner/GCPFormSection.tsx

@@ -81,7 +81,7 @@ class GCPFormSection extends Component<PropsType, StateType> {
   componentDidMount = () => {
     let { infras } = this.props;
     let { selectedInfras } = this.state;
-    this.setClusterNameIfNotSet()
+    this.setClusterNameIfNotSet();
 
     if (infras) {
       // From the dashboard, only uncheck and disable if "creating" or "created"
@@ -98,39 +98,60 @@ class GCPFormSection extends Component<PropsType, StateType> {
     }
   };
 
-  componentDidUpdate = (prevProps : PropsType, prevState : StateType) => {
+  componentDidUpdate = (prevProps: PropsType, prevState: StateType) => {
     if (prevProps.projectName != this.props.projectName) {
-      this.setClusterNameIfNotSet()
+      this.setClusterNameIfNotSet();
     }
-  }
+  };
 
   setClusterNameIfNotSet = () => {
-    let projectName = this.props.projectName || this.context.currentProject?.name
+    let projectName =
+      this.props.projectName || this.context.currentProject?.name;
 
-    if (!this.state.clusterNameSet && !this.state.clusterName.includes(`${projectName}-cluster`)) {
+    if (
+      !this.state.clusterNameSet &&
+      !this.state.clusterName.includes(`${projectName}-cluster`)
+    ) {
       this.setState({
-        clusterName: `${projectName}-cluster-${Math.random().toString(36).substring(2, 8)}`
-      })
+        clusterName: `${projectName}-cluster-${Math.random()
+          .toString(36)
+          .substring(2, 8)}`,
+      });
     }
-  }
+  };
 
   checkFormDisabled = () => {
     if (!this.state.provisionConfirmed) {
       return true;
     }
 
-    let { gcpRegion, gcpProjectId, gcpKeyData, selectedInfras, clusterName } = this.state;
+    let {
+      gcpRegion,
+      gcpProjectId,
+      gcpKeyData,
+      selectedInfras,
+      clusterName,
+    } = this.state;
     let { projectName } = this.props;
     if (projectName || projectName === "") {
       return (
         !isAlphanumeric(projectName) ||
-        !(gcpProjectId !== "" && gcpKeyData !== "" && gcpRegion !== "" && clusterName !== "") ||
+        !(
+          gcpProjectId !== "" &&
+          gcpKeyData !== "" &&
+          gcpRegion !== "" &&
+          clusterName !== ""
+        ) ||
         selectedInfras.length === 0
       );
     } else {
       return (
-        !(gcpProjectId !== "" && gcpKeyData !== "" && gcpRegion !== "" && clusterName !== "") ||
-        selectedInfras.length === 0
+        !(
+          gcpProjectId !== "" &&
+          gcpKeyData !== "" &&
+          gcpRegion !== "" &&
+          clusterName !== ""
+        ) || selectedInfras.length === 0
       );
     }
   };
@@ -274,18 +295,25 @@ class GCPFormSection extends Component<PropsType, StateType> {
   renderClusterNameSection = () => {
     let { selectedInfras, clusterName } = this.state;
 
-    if (selectedInfras.length == 2 ||  (selectedInfras.length == 1 && selectedInfras[0].value === "gke")) {
-      return <InputRow
-        type="text"
-        value={clusterName}
-        setValue={(x: string) => this.setState({ clusterName: x, clusterNameSet: true })}
-        label="Cluster Name"
-        placeholder="ex: porter-cluster"
-        width="100%"
-        isRequired={true}
-      />
+    if (
+      selectedInfras.length == 2 ||
+      (selectedInfras.length == 1 && selectedInfras[0].value === "gke")
+    ) {
+      return (
+        <InputRow
+          type="text"
+          value={clusterName}
+          setValue={(x: string) =>
+            this.setState({ clusterName: x, clusterNameSet: true })
+          }
+          label="Cluster Name"
+          placeholder="ex: porter-cluster"
+          width="100%"
+          isRequired={true}
+        />
+      );
     }
-  }
+  };
 
   render() {
     let { setSelectedProvisioner } = this.props;