Merge pull request #517 from porter-dev/beta.3.separate-provisioner-tab

Beta.3.separate provisioner tab

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

@@ -29,9 +29,11 @@ export default class KeyValueArray extends Component<PropsType, StateType> {
 
   componentDidMount() {
     let arr = [] as any[];
-    Object.keys(this.props.values).forEach((key: string, i: number) => {
-      arr.push({ key, value: this.props.values[key] });
-    });
+    if (this.props.values) {
+      Object.keys(this.props.values).forEach((key: string, i: number) => {
+        arr.push({ key, value: this.props.values[key] });
+      });
+    }
     this.setState({ values: arr });
   }
 

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/cluster-dashboard/DashboardHeader.tsx

@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 import styled from "styled-components";
 
+import { Context } from "shared/Context";
+
 type PropsType = {
   image: any;
   title: string;
@@ -33,6 +35,8 @@ export default class DashboardHeader extends Component<PropsType, StateType> {
   }
 }
 
+DashboardHeader.contextType = Context;
+
 const Img = styled.img`
   width: 30px;
 `;
@@ -54,6 +58,7 @@ const Description = styled.div`
   margin-top: 13px;
   margin-left: 2px;
   font-size: 13px;
+  line-height: 1.5em;
 `;
 
 const InfoLabel = styled.div`
@@ -83,10 +88,18 @@ const Title = styled.div`
   font-family: "Work Sans", sans-serif;
   margin-left: 18px;
   color: #ffffff;
+  text-transform: capitalize;
+  white-space: nowrap;
+`;
+
+const ClusterLabel = styled.div`
+  color: #ffffff22;
+  font-size: 14px;
+  text-transform: none;
+  font-weight: 400;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  text-transform: capitalize;
 `;
 
 const TitleSection = styled.div`

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

@@ -384,7 +384,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 (
@@ -399,7 +399,6 @@ class LaunchTemplate extends Component<PropsType, StateType> {
       return "Template name contains illegal characters";
     }
     return "No application source specified";
-
   };
 
   renderTabContents = () => {

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;