separate dashboard provisioner tab

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

@@ -64,9 +64,12 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
             />
           </ExpandedWrapperAlt>
           <Br />
-          <BackButton width="135px" onClick={() => {
-            setActionConfig({ ...defaultActionConfig })
-          }}>
+          <BackButton
+            width="135px"
+            onClick={() => {
+              setActionConfig({ ...defaultActionConfig });
+            }}
+          >
             <i className="material-icons">keyboard_backspace</i>
             Select Repo
           </BackButton>
@@ -88,7 +91,7 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
           <BackButton
             width="145px"
             onClick={() => {
-              setBranch("")
+              setBranch("");
             }}
           >
             <i className="material-icons">keyboard_backspace</i>

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

@@ -38,15 +38,15 @@ export default class ValuesWrapper extends Component<PropsType, StateType> {
           section.contents.forEach((item: FormElement, i: number) => {
             // If no name is assigned use values.yaml variable as identifier
             let key = item.name || item.variable;
-            
+
             let def =
               item.settings && item.settings.unit
                 ? `${item.settings.default}${item.settings.unit}`
                 : item.settings.default;
             def = (item.value && item.value[0]) || def;
 
-            if (item.type === 'checkbox') {
-              def = item.value[0]
+            if (item.type === "checkbox") {
+              def = item.value[0];
             }
 
             // Handle add to list of required fields

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/ControllerTab.tsx

@@ -141,7 +141,10 @@ export default class ControllerTab extends Component<PropsType, StateType> {
 
       status?.containerStatuses?.forEach((s: any) => {
         if (s.state?.waiting) {
-          collatedStatus = s.state?.waiting.reason === "CrashLoopBackOff" ? "failed" : "waiting";
+          collatedStatus =
+            s.state?.waiting.reason === "CrashLoopBackOff"
+              ? "failed"
+              : "waiting";
         } else if (s.state?.terminated) {
           collatedStatus = "failed";
         }
@@ -195,18 +198,16 @@ export default class ControllerTab extends Component<PropsType, StateType> {
     let [available, total] = this.getAvailability(controller.kind, controller);
     let status = available == total ? "running" : "waiting";
 
-    controller?.status?.conditions?.forEach(
-      (condition: any) => {
-        if (
-          condition.type == "Progressing" &&
-          condition.status == "False" &&
-          condition.reason == "ProgressDeadlineExceeded"
-        ) {
-          status = 'failed';
-        }
+    controller?.status?.conditions?.forEach((condition: any) => {
+      if (
+        condition.type == "Progressing" &&
+        condition.status == "False" &&
+        condition.reason == "ProgressDeadlineExceeded"
+      ) {
+        status = "failed";
       }
-    );
-    
+    });
+
     if (controller.kind.toLowerCase() === "job" && this.state.raw.length == 0) {
       status = "completed";
     }

dashboard/src/main/home/dashboard/ClusterPlaceholder.tsx

@@ -44,21 +44,16 @@ export default class ClusterPlaceholder extends Component<
       );
     } else if (!this.props.currentCluster) {
       return (
-        <>
-          <Banner>
-            <i className="material-icons">error_outline</i>
-            This project currently has no clusters connected.
-          </Banner>
-          <StyledStatusPlaceholder>
-            <Highlight
-              onClick={() => {
-                this.context.setCurrentModal("ClusterInstructionsModal", {});
-              }}
-            >
-              + Connect a Cluster
-            </Highlight>
-          </StyledStatusPlaceholder>
-        </>
+        <StyledStatusPlaceholder>
+          You need to connect a cluster to use Porter.
+          <Highlight
+            onClick={() => {
+              this.context.setCurrentModal("ClusterInstructionsModal", {});
+            }}
+          >
+            + Connect an existing cluster
+          </Highlight>
+        </StyledStatusPlaceholder>
       );
     } else {
       return <ClusterList currentCluster={this.props.currentCluster} />;
@@ -78,7 +73,7 @@ const LoadingWrapper = styled.div`
 const Highlight = styled.div`
   color: #8590ff;
   cursor: pointer;
-  margin-left: 10px;
+  margin-left: 5px;
   margin-right: 10px;
 `;
 
@@ -100,15 +95,13 @@ const Banner = styled.div`
 
 const StyledStatusPlaceholder = styled.div`
   width: 100%;
-  height: calc(100vh - 450px);
-  margin-top: 30px;
+  height: calc(100vh - 470px);
+  margin-top: 10px;
   display: flex;
-  align-items: center;
   color: #aaaabb;
   border-radius: 5px;
   text-align: center;
   font-size: 13px;
-  padding-bottom: 25px;
   background: #ffffff09;
   display: flex;
   align-items: center;

dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -21,11 +21,12 @@ type PropsType = RouteComponentProps & {
 
 const tabOptions = [
   { label: "Project Overview", value: "overview" },
+  { label: "Create a Cluster", value: "create-cluster" },
   { label: "Provisioner Status", value: "provisioner" },
 ];
 
 // TODO: rethink this list, should be coupled with tabOptions
-const tabOptionStrings = ["overview", "provisioner"];
+const tabOptionStrings = ["overview", "create-cluster", "provisioner"];
 
 type StateType = {
   infras: InfraType[];
@@ -74,27 +75,24 @@ class Dashboard extends Component<PropsType, StateType> {
   renderTabContents = () => {
     if (this.currentTab() === "provisioner") {
       return <Provisioner setRefreshClusters={this.props.setRefreshClusters} />;
-    } else {
+    } else if (this.currentTab() === "create-cluster") {
       return (
         <>
-          {!this.context.currentCluster ? (
-            <>
-              <Banner>
-                <i className="material-icons">error_outline</i>
-                This project currently has no clusters connected.
-              </Banner>
-              <ProvisionerSettings infras={this.state.infras} />
-            </>
-          ) : (
-            <ClusterPlaceholderContainer />
-          )}
+          <Banner>
+            <i className="material-icons">info</i>
+            Create a cluster to link to this project.
+          </Banner>
+          <ProvisionerSettings infras={this.state.infras} />
         </>
       );
+    } else {
+      return <ClusterPlaceholderContainer />;
     }
   };
 
-  setCurrentTab = (x: string) =>
+  setCurrentTab = (x: string) => {
     this.props.history.push(setSearchParam(this.props.location, "tab", x));
+  };
 
   render() {
     let { currentProject } = this.context;

dashboard/src/main/home/launch/Launch.tsx

@@ -61,9 +61,11 @@ export default class Templates extends Component<PropsType, StateType> {
       )
       .then((res) => {
         this.setState({ applicationTemplates: res.data, error: false }, () => {
-          let preferredOrder = ['web', 'worker', 'job']
+          let preferredOrder = ["web", "worker", "job"];
           this.state.applicationTemplates.sort((a, b) => {
-            return preferredOrder.indexOf(a.name) - preferredOrder.indexOf(b.name)
+            return (
+              preferredOrder.indexOf(a.name) - preferredOrder.indexOf(b.name)
+            );
           });
           this.setState({
             loading: false,

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

@@ -159,8 +159,8 @@ export default withRouter(Provisioner);
 
 const StyledProvisioner = styled.div`
   width: 100%;
-  height: 350px;
-  background: #ffffff11;
+  height: calc(100vh - 470px);
+  background: #ffffff09;
   color: #aaaabb;
   border-radius: 5px;
   display: flex;

dashboard/src/main/home/sidebar/Drawer.tsx

@@ -71,7 +71,7 @@ class Drawer extends Component<PropsType, StateType> {
               this.context.setCurrentModal("ClusterInstructionsModal", {});
             }}
           >
-            <Plus>+</Plus> Add a Cluster
+            <Plus>+</Plus> Connect a Cluster
           </InitializeButton>
         </StyledDrawer>
       </div>