toggle sidebar with graph view expand and collapse

dashboard/src/main/home/Home.tsx

@@ -14,9 +14,13 @@ type PropsType = {
 };
 
 type StateType = {
+  forceSidebar: boolean
 };
 
 export default class Home extends Component<PropsType, StateType> {
+  state = {
+    forceSidebar: true
+  }
 
   renderDashboard = () => {
     let { currentCluster, setCurrentModal, setCurrentModalData } = this.context;
@@ -41,7 +45,14 @@ export default class Home extends Component<PropsType, StateType> {
       return <Loading />
     }
 
-    return <DashboardWrapper><Dashboard currentCluster={currentCluster} /></DashboardWrapper>
+    return (
+      <DashboardWrapper>
+        <Dashboard
+          currentCluster={currentCluster}
+          setSidebar={(x: boolean) => this.setState({ forceSidebar: x })}
+        />
+      </DashboardWrapper>
+    );
   }
 
   render() {
@@ -56,7 +67,7 @@ export default class Home extends Component<PropsType, StateType> {
           <ClusterConfigModal />
         </ReactModal>
 
-        <Sidebar logOut={this.props.logOut} />
+        <Sidebar logOut={this.props.logOut} forceSidebar={this.state.forceSidebar} />
         <StyledDashboard>
           {this.renderDashboard()}
         </StyledDashboard>

dashboard/src/main/home/Toolbar.tsx

@@ -4,7 +4,6 @@ import ReactModal from 'react-modal';
 
 import { Context } from '../../shared/Context';
 
-import Sidebar from './sidebar/Sidebar';
 import ClusterConfigModal from './modals/ClusterConfigModal';
 
 type PropsType = {
@@ -27,7 +26,6 @@ export default class Home extends Component<PropsType, StateType> {
           <ClusterConfigModal />
         </ReactModal>
 
-        <Sidebar logOut={this.props.logOut} />
         <DummyDashboard>
           🏗️🏗️🏗️🏗️🏗️
         </DummyDashboard>

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

@@ -11,7 +11,8 @@ import NamespaceSelector from './NamespaceSelector';
 import ExpandedChart from './expanded-chart/ExpandedChart';
 
 type PropsType = {
-  currentCluster: string
+  currentCluster: string,
+  setSidebar: (x: boolean) => void
 };
 
 type StateType = {
@@ -51,7 +52,7 @@ export default class Dashboard extends Component<PropsType, StateType> {
   }
 
   renderContents = () => {
-    let { currentCluster } = this.props;
+    let { currentCluster, setSidebar } = this.props;
 
     if (this.state.currentChart) {
       return (
@@ -59,6 +60,7 @@ export default class Dashboard extends Component<PropsType, StateType> {
           currentChart={this.state.currentChart}
           refreshChart={this.refreshChart}
           setCurrentChart={(x: ChartType | null) => this.setState({ currentChart: x })}
+          setSidebar={setSidebar}
         />
       );
     }

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

@@ -15,7 +15,8 @@ import ListSection from './ListSection';
 type PropsType = {
   currentChart: ChartType,
   setCurrentChart: (x: ChartType | null) => void,
-  refreshChart: () => void
+  refreshChart: () => void,
+  setSidebar: (x: boolean) => void
 };
 
 type StateType = {
@@ -71,13 +72,14 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
   }
 
   renderTabContents = () => {
-    let { currentChart, refreshChart } = this.props;
+    let { currentChart, refreshChart, setSidebar} = this.props;
 
     if (this.state.currentTab === 'graph') {
       return (
         <GraphSection
           currentChart={currentChart}
           components={this.state.components}
+          setSidebar={setSidebar}
         />
       );
     } else if (this.state.currentTab === 'list') {

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

@@ -10,7 +10,8 @@ import Loading from '../../../../components/Loading';
 
 type PropsType = {
   currentChart: ChartType,
-  components: ResourceType[]
+  components: ResourceType[],
+  setSidebar: (x: boolean) => void
 };
 
 type StateType = {
@@ -35,13 +36,19 @@ export default class GraphSection extends Component<PropsType, StateType> {
     return <Loading offset='-30px' />;
   }
 
+  handleClick = () => {
+    this.setState({ isExpanded: !this.state.isExpanded }, () => {
+      this.props.setSidebar(!this.state.isExpanded);
+    });
+  }
+
   render() {
     return (
       <StyledGraphSection isExpanded={this.state.isExpanded}>
         {this.renderContents()}
         <ButtonSection>
           <ExpandButton
-            onClick={() => this.setState({ isExpanded: !this.state.isExpanded })}
+            onClick={this.handleClick}
           >
             <i className="material-icons">
               {this.state.isExpanded ? 'close_fullscreen' : 'open_in_full'}

dashboard/src/main/home/dashboard/expanded-chart/graph/Edge.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { edgeColors } from '../../../../../shared/rosettaStone';
 import { EdgeType } from '../../../../../shared/types';
 
-const thickness = 8;
+const thickness = 12;
 
 type PropsType = {
   x1: number,
@@ -67,7 +67,7 @@ const ArrowHead = styled.div`
 `;
 
 const VisibleLine = styled.section`
-  height: 1px;
+  height: 2px;
   width: 100%;
   background: ${(props: { color: string }) => props.color ? props.color : '#ffffff66'};
 `;

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

@@ -8,7 +8,8 @@ import { Context } from '../../../shared/Context';
 import ClusterSection from './ClusterSection';
 
 type PropsType = {
-  logOut: () => void
+  logOut: () => void,
+  forceSidebar: boolean
 };
 
 type StateType = {
@@ -40,6 +41,13 @@ export default class Sidebar extends Component<PropsType, StateType> {
     document.removeEventListener('keyup', this.handleKeyUp);
   }
 
+  // Need to override showDrawer when the sidebar is closed
+  componentDidUpdate(prevProps: PropsType) {
+    if (prevProps.forceSidebar !== this.props.forceSidebar) {
+      this.setState({ showSidebar: this.props.forceSidebar });
+    }
+  }  
+
   handleKeyDown = (e: KeyboardEvent): void => {
     if (e.key === 'Meta' || e.key === 'Control') {
       this.setState({ pressingCtrl: true });