fixed cluster drawer return to project dashboard issue

dashboard/src/main/home/Home.tsx

@@ -41,7 +41,10 @@ export default class Home extends Component<PropsType, StateType> {
 
       // Set view to dashboard on project change
       if (this.state.prevProjectId !== this.context.currentProject.id) {
-        this.setState({ currentView: 'dashboard' });
+        this.setState({
+          prevProjectId: this.context.currentProject.id,
+          currentView: 'dashboard'
+        });
       }
     }
   }
@@ -49,8 +52,7 @@ export default class Home extends Component<PropsType, StateType> {
   // TODO: move into ClusterDashboard
   renderDashboard = () => {
     let { currentCluster, setCurrentModal } = this.context;
-
-    if (currentCluster === {} || this.state.showWelcome || currentCluster && !currentCluster.name) {
+    if (this.state.showWelcome || currentCluster && !currentCluster.name) {
       return (
         <DashboardWrapper>
           <Placeholder>

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

@@ -55,7 +55,7 @@ export default class ClusterSection extends Component<PropsType, StateType> {
             setCurrentCluster(clusters[0]);
           } else {
             this.setState({ clusters: [] });
-            setCurrentCluster({});
+            setCurrentCluster(null);
           }
         }
       }
@@ -97,6 +97,7 @@ export default class ClusterSection extends Component<PropsType, StateType> {
           toggleDrawer={this.toggleDrawer}
           showDrawer={this.state.showDrawer}
           clusters={this.state.clusters}
+          setCurrentView={this.props.setCurrentView}
         />
       );
     }

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

@@ -8,7 +8,8 @@ import { Cluster } from '../../../shared/types';
 type PropsType = {
   toggleDrawer: () => void,
   showDrawer: boolean,
-  clusters: Cluster[]
+  clusters: Cluster[],
+  setCurrentView: (x: string) => void
 };
 
 type StateType = {
@@ -17,10 +18,10 @@ type StateType = {
 export default class Drawer extends Component<PropsType, StateType> {
 
   renderClusterList = (): JSX.Element[] | JSX.Element => {
-    let { clusters } = this.props;
+    let { clusters, setCurrentView } = this.props;
     let { currentCluster, setCurrentCluster } = this.context;
 
-    if (clusters.length > 0) {
+    if (clusters.length > 0 && currentCluster) {
       return clusters.map((cluster: Cluster, i: number) => {
         /*
         let active = this.context.activeProject &&
@@ -31,7 +32,7 @@ export default class Drawer extends Component<PropsType, StateType> {
           <ClusterOption
             key={i}
             active={cluster.name === currentCluster.name}
-            onClick={() => setCurrentCluster(cluster)}
+            onClick={() => { setCurrentCluster(cluster); setCurrentView('cluster-dashboard') }}
           >
             <ClusterIcon><i className="material-icons">device_hub</i></ClusterIcon>
             <ClusterName>{cluster.name}</ClusterName>

dashboard/src/main/home/templates/expanded-template/TemplateInfo.tsx

@@ -49,6 +49,7 @@ export default class TemplateInfo extends Component<PropsType, StateType> {
   }
 
   render() {
+    let { currentCluster } = this.context;
     let { Name, Icon } = this.props.currentTemplate.Form;
     let { currentTemplate } = this.props;
     let name = Name ? Name : currentTemplate.Name;
@@ -62,7 +63,10 @@ export default class TemplateInfo extends Component<PropsType, StateType> {
             {Icon ? this.renderIcon(Icon) : this.renderIcon(currentTemplate.Icon)}
             <Title>{name}</Title>
           </Flex>
-          <Button onClick={() => this.props.launchTemplate()}>
+          <Button
+            isDisabled={!currentCluster}
+            onClick={!currentCluster ? null : this.props.launchTemplate}
+          >
             <img src={launch} />
             Launch Template
           </Button>
@@ -130,16 +134,16 @@ const Flex = styled.div`
 
 const Button = styled.div`
   height: 100%;
-  background: #616FEEcc;
+  background: ${(props: { isDisabled: boolean }) => (!props.isDisabled ? '#616feecc' : '#aaaabb')};
   :hover {
-    background: #505edddd;
+    background: ${(props: { isDisabled: boolean }) => (!props.isDisabled ? '#505edddd' : '#aaaabb')};
   }
   color: white;
   font-weight: 500;
   font-size: 13px;
   padding: 10px 15px;
   border-radius: 3px;
-  cursor: pointer;
+  cursor: ${(props: { isDisabled: boolean }) => (!props.isDisabled ? 'pointer' : 'default')};;
   box-shadow: 0 5px 8px 0px #00000010;
   display: flex;
   flex-direction: row;