global provisioner tab placeholder

dashboard/src/main/home/dashboard/ClusterList.tsx

@@ -61,12 +61,12 @@ class Templates extends Component<PropsType, StateType> {
   
   render() {
     return (
-      <>
+      <StyledClusterList>
         <Helper>Clusters connected to this project:</Helper>
         <TemplateList>
           {this.renderClusters()}
         </TemplateList>
-      </>
+      </StyledClusterList>
     );
   }
 }
@@ -75,6 +75,11 @@ Templates.contextType = Context;
 
 export default withRouter(Templates)
 
+const StyledClusterList = styled.div`
+  margin-top: -17px;
+  padding-left: 2px;
+`;
+
 const DashboardIcon = styled.div`
   position: relative;
   height: 45px;

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

@@ -10,6 +10,8 @@ import api from 'shared/api';
 import ProvisionerSettings from '../provisioner/ProvisionerSettings';
 import ClusterPlaceholderContainer from './ClusterPlaceholderContainer';
 import { Redirect, RouteComponentProps, withRouter } from 'react-router';
+import TabRegion from 'components/TabRegion';
+import Provisioner from '../provisioner/Provisioner';
 
 type PropsType = RouteComponentProps & {
   projectId: number | null,
@@ -17,11 +19,18 @@ type PropsType = RouteComponentProps & {
 
 type StateType = {
   infras: InfraType[],
+  currentTab: string,
 };
 
+const tabOptions = [
+  { label: 'Project Overview', value: 'overview' },
+  { label: 'Provisioner Status', value: 'provisioner' },
+];
+
 class Dashboard extends Component<PropsType, StateType> {
   state = {
     infras: [] as InfraType[],
+    currentTab: 'main',
   }
 
   refreshInfras = () => {
@@ -52,6 +61,35 @@ class Dashboard extends Component<PropsType, StateType> {
     this.props.history.push("project-settings");
   }
 
+  renderTabContents = () => {
+    if (this.state.currentTab === 'provisioner') {
+      return (
+        <Provisioner
+        />
+      );
+    } else {
+      return (
+        <>
+          {!this.context.currentCluster 
+            ? (
+              <>
+                <Banner>
+                  <i className="material-icons">error_outline</i>
+                  This project currently has no clusters conncted.
+                  </Banner>
+                <ProvisionerSettings 
+                  infras={this.state.infras}
+                />
+              </>
+            ) : (
+              <ClusterPlaceholderContainer/>
+            )
+          }
+        </>
+      );
+    }
+  }
+
   render() {
     let { currentProject, currentCluster } = this.context;
     let { infras } = this.state;
@@ -91,23 +129,13 @@ class Dashboard extends Component<PropsType, StateType> {
               </Description>
             </InfoSection>
 
-            <LineBreak />
-
-            {!currentCluster 
-              ? (
-                <>
-                  <Banner>
-                    <i className="material-icons">error_outline</i>
-                    This project currently has no clusters conncted.
-                    </Banner>
-                  <ProvisionerSettings 
-                    infras={infras}
-                  />
-                </>
-              ) : (
-                <ClusterPlaceholderContainer/>
-              )
-            }
+            <TabRegion
+              currentTab={this.state.currentTab}
+              setCurrentTab={(x: string) => this.setState({ currentTab: x })}
+              options={tabOptions}
+            >
+              {this.renderTabContents()}
+            </TabRegion>
           </DashboardWrapper>
         )}
       </>
@@ -126,7 +154,7 @@ const DashboardWrapper = styled.div`
 const Banner = styled.div`
   height: 40px;
   width: 100%;
-  margin: 10px 0 30px;
+  margin: 5px 0 30px;
   font-size: 13px;
   display: flex;
   border-radius: 5px;
@@ -169,7 +197,7 @@ const InfoSection = styled.div`
   margin-top: 20px;
   font-family: 'Work Sans', sans-serif;
   margin-left: 0px;
-  margin-bottom: 35px;
+  margin-bottom: 30px;
 `;
 
 const LineBreak = styled.div`

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

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+type PropsType = {
+};
+
+type StateType = {
+};
+
+export default class Provisioner extends Component<PropsType, StateType> {
+  state = {
+  }
+
+  render() {
+    return (
+      <StyledProvisioner>
+        [TODO: implement provisioner]
+      </StyledProvisioner>
+    );
+  }
+}
+
+const StyledProvisioner = styled.div`
+  width: 100%;
+  height: 350px;
+  background: #ffffff11;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  margin-top: 10px;
+`;