enter on login/register + proper initialization placeholder

dashboard/src/main/Login.tsx

@@ -25,6 +25,18 @@ export default class Login extends Component<PropsType, StateType> {
     credentialError: false
   }
 
+  handleKeyDown = (e: any) => {
+    e.key === 'Enter' ? this.handleLogin() : null;
+  }
+
+  componentDidMount() {
+    document.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("keydown", this.handleKeyDown);
+  }
+
   handleLogin = (): void => {
     let { email, password } = this.state;
     let { authenticate } = this.props;

dashboard/src/main/Register.tsx

@@ -27,6 +27,18 @@ export default class Register extends Component<PropsType, StateType> {
     confirmPasswordError: false
   }
 
+  handleKeyDown = (e: any) => {
+    e.key === 'Enter' ? this.handleRegister() : null;
+  }
+
+  componentDidMount() {
+    document.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("keydown", this.handleKeyDown);
+  }
+
   handleRegister = (): void => {
     let { email, password, confirmPassword } = this.state;
     let { authenticate } = this.props;

dashboard/src/main/home/Home.tsx

@@ -14,18 +14,20 @@ type PropsType = {
 };
 
 type StateType = {
-  forceSidebar: boolean
+  forceSidebar: boolean,
+  showWelcome: boolean
 };
 
 export default class Home extends Component<PropsType, StateType> {
   state = {
-    forceSidebar: true
+    forceSidebar: true,
+    showWelcome: false
   }
 
   renderDashboard = () => {
     let { currentCluster, setCurrentModal, setCurrentModalData } = this.context;
 
-    if (currentCluster === '') {
+    if (currentCluster === '' || this.state.showWelcome) {
       return (
         <DashboardWrapper>
           <Placeholder>
@@ -67,7 +69,11 @@ export default class Home extends Component<PropsType, StateType> {
           <ClusterConfigModal />
         </ReactModal>
 
-        <Sidebar logOut={this.props.logOut} forceSidebar={this.state.forceSidebar} />
+        <Sidebar
+          logOut={this.props.logOut}
+          forceSidebar={this.state.forceSidebar}
+          setWelcome={(x: boolean) => this.setState({ showWelcome: x })}
+        />
         <StyledDashboard>
           {this.renderDashboard()}
         </StyledDashboard>

dashboard/src/main/home/dashboard/expanded-chart/ResourceItem.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
+import yaml from 'js-yaml';
 
 import { kindToIcon } from '../../../../shared/rosettaStone';
 
@@ -22,7 +23,7 @@ type StateType = {
 export default class ResourceItem extends Component<PropsType, StateType> {
   state = {
     expanded: false,
-    RawYAML: JSON.stringify(this.props.resource.RawYAML)
+    RawYAML: yaml.dump(this.props.resource.RawYAML)
   }
 
   renderIcon = (kind: string) => {

dashboard/src/main/home/modals/ClusterConfigModal.tsx

@@ -41,7 +41,7 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
     // Parse kubeconfig to retrieve all possible clusters
     api.getContexts('<token>', {}, { id: userId }, (err: any, res: any) => {
       if (err) {
-        setCurrentError(JSON.stringify(err));
+        // setCurrentError(JSON.stringify(err));
       } else {
         this.setState({ kubeContexts: res.data });
       }
@@ -57,7 +57,7 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
 
     api.getUser('<token>', {}, { id: userId }, (err: any, res: any) => {
       if (err) {
-        setCurrentError(JSON.stringify(err));
+        // setCurrentError(JSON.stringify(err));
       } else if (res.data.rawKubeConfig !== '') {
         this.setState({ rawKubeconfig: res.data.rawKubeConfig });
       }

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

@@ -10,7 +10,8 @@ import Drawer from './Drawer';
 
 type PropsType = {
   forceCloseDrawer: boolean,
-  releaseDrawer: () => void
+  releaseDrawer: () => void,
+  setWelcome: (x: boolean) => void
 };
 
 type StateType = {
@@ -34,9 +35,12 @@ 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('Could not read clusters: ' + JSON.stringify(err));
-      } else {
 
+        // Assume intializing if no contexts
+        this.props.setWelcome(true);
+      } else {
+        this.props.setWelcome(false);
+        
         // TODO: handle uninitialized kubeconfig
         if (res.data) {
 

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

@@ -9,7 +9,8 @@ import ClusterSection from './ClusterSection';
 
 type PropsType = {
   logOut: () => void,
-  forceSidebar: boolean
+  forceSidebar: boolean,
+  setWelcome: (x: boolean) => void
 };
 
 type StateType = {
@@ -123,6 +124,7 @@ export default class Sidebar extends Component<PropsType, StateType> {
           <ClusterSection 
             forceCloseDrawer={this.state.forceCloseDrawer} 
             releaseDrawer={() => this.setState({ forceCloseDrawer: false })}
+            setWelcome={this.props.setWelcome}
           />
 
           <BottomSection>