dashboard placeholder

dashboard/src/main/home/Home.tsx

@@ -7,7 +7,6 @@ import { Context } from '../../shared/Context';
 import Sidebar from './sidebar/Sidebar';
 import Dashboard from './dashboard/Dashboard';
 import ClusterConfigModal from './modals/ClusterConfigModal';
-import Loading from '../../components/Loading';
 
 type PropsType = {
   logOut: () => void
@@ -23,7 +22,14 @@ export default class Home extends Component<PropsType, StateType> {
       return <Dashboard />
     }
 
-    return <Loading />
+    return (
+        <Placeholder>
+          <Bold>Porter 101</Bold><br />
+          1. Go to <A onClick={() => {this.context.setCurrentModal('ClusterConfigModal')}}>+ Add a Cluster</A> to connect to your Kubernetes cluster(s).<br /><br />
+          2. Check out the <A onClick={() => {this.context.setCurrentModal('CreateService')}}>Integrations</A> tab to link your repo, image registry, Slack workspace, and more.<br /><br />
+          4. Sync local changes to Porter for easy <A target='_blank' href='https://docs.getporter.dev/docs/cli-documentation#porter-sync'>remote development</A>.
+        </Placeholder>
+    );
   }
 
   render() {
@@ -39,7 +45,11 @@ export default class Home extends Component<PropsType, StateType> {
         </ReactModal>
 
         <Sidebar logOut={this.props.logOut} />
-        {this.renderDashboard()}
+        <StyledDashboard>
+          <DashboardWrapper>
+            {this.renderDashboard()}
+          </DashboardWrapper>
+        </StyledDashboard>
       </StyledHome>
     );
   }
@@ -66,21 +76,44 @@ const MediumModalStyles = {
   },
 };
 
-const DummyDashboard = styled.div`
+const StyledDashboard = styled.div`
   height: 100%;
   width: 100vw;
-  font-family: 'Work Sans', sans-serif;
+  padding-top: 80px;
   overflow-y: auto;
   display: flex;
-  letter-spacing: 10px;
   flex: 1;
   justify-content: center;
-  padding-bottom: 30px;
-  align-items: center;
-  background: ${props => props.theme.bg};
+  background: #24272a;
   position: relative;
 `;
 
+const DashboardWrapper = styled.div`
+  width: 80%;
+  min-width: 300px;
+  padding-bottom: 120px;
+`;
+
+const A = styled.a`
+  color: #ffffff;
+  text-decoration: underline;
+  cursor: pointer;
+`;
+
+const Placeholder = styled.div`
+  font-family: "Work Sans", sans-serif;
+  color: #6f6f6f;
+  font-size: 16px;
+  margin-left: 25px;
+  margin-top: 7vh;
+  user-select: none;
+`;
+
+const Bold = styled.div`
+  font-weight: bold;
+  font-size: 20px;
+`;
+
 const StyledHome = styled.div`
   width: 100vw;
   height: 100vh;

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

@@ -41,8 +41,7 @@ class Dashboard extends Component {
     let { currentCluster } = this.context;
 
     return ( 
-      <StyledDashboard>
-        <DashboardWrapper>
+      <div>
         <TitleSection>
           <ProjectIcon>
             <ProjectImage src={gradient} />
@@ -62,8 +61,7 @@ class Dashboard extends Component {
         </InfoSection>
 
         <LineBreak />
-        </DashboardWrapper>
-      </StyledDashboard>
+      </div>
     );
   }
 }
@@ -248,22 +246,4 @@ const TitleSection = styled.div`
     }
     margin-bottom: -3px;
   }
-`;
-
-const StyledDashboard = styled.div`
-  height: 100%;
-  width: 100vw;
-  padding-top: 80px;
-  overflow-y: auto;
-  display: flex;
-  flex: 1;
-  justify-content: center;
-  background: #24272a;
-  position: relative;
-`;
-
-const DashboardWrapper = styled.div`
-  width: 80%;
-  min-width: 300px;
-  padding-bottom: 120px;
-`;
+`;

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

@@ -14,7 +14,6 @@ type PropsType = {
 };
 
 type StateType = {
-  configExists: boolean,
   showDrawer: boolean,
   initializedDrawer: boolean,
   kubeContexts: KubeContextConfig[]
@@ -24,7 +23,6 @@ export default class ClusterSection extends Component<PropsType, StateType> {
 
   // Need to track initialized for animation mounting
   state = {
-    configExists: true,
     showDrawer: false,
     initializedDrawer: false,
     kubeContexts: [] as KubeContextConfig[]
@@ -36,17 +34,22 @@ export default class ClusterSection extends Component<PropsType, StateType> {
     // TODO: query with selected filter once implemented
     api.getContexts('<token>', {}, { id: userId }, (err: any, res: any) => {
       if (err) {
-        setCurrentError('getContexts: ' + JSON.stringify(err));
+        setCurrentError('Could not read clusters: ' + JSON.stringify(err));
       } else {
         console.log(res);
-        // Filter selected (temporary)
-        let kubeContexts = res.data.filter((x: KubeContextConfig) => x.selected);
-        if (kubeContexts.length > 0) {
-          this.setState({ kubeContexts });
-          setCurrentCluster(kubeContexts[0].name);
-        } else {
-          this.setState({ kubeContexts: [] });
-          setCurrentCluster(null);
+
+        // TODO: handle uninitialized kubeconfig
+        if (res.data) {
+
+          // Filter selected (temporary)
+          let kubeContexts = res.data.filter((x: KubeContextConfig) => x.selected);
+          if (kubeContexts.length > 0) {
+            this.setState({ kubeContexts });
+            setCurrentCluster(kubeContexts[0].name);
+          } else {
+            this.setState({ kubeContexts: [] });
+            setCurrentCluster(null);
+          }
         }
       }
     });

dashboard/src/shared/Context.tsx

@@ -51,7 +51,7 @@ class ContextProvider extends Component {
   };
 
   componentDidMount() {
-    this.setState({ userId: 2 });
+    this.setState({ userId: 1 });
   }
 
   render() {