cluster select integrated w/ extra edgecases

dashboard/src/main/Register.tsx

@@ -48,7 +48,6 @@ export default class Register extends Component<PropsType, StateType> {
         email: email,
         password: password
       }, {}, (err: any, res: any) => {
-        console.log('err',err)
         err ? setCurrentError(JSON.stringify(err)) : authenticate();
       });
     } 

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

@@ -37,8 +37,7 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
       if (err) {
         setCurrentError('getAllClusters: ' + JSON.stringify(err));
       } else {
-        console.log(res.data)
-        this.setState({ kubeContexts: res.data })
+        this.setState({ kubeContexts: res.data });
       }
     });
   }
@@ -115,6 +114,7 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
           });
 
           this.updateChecklist();
+          this.context.currentModalData.updateClusters();
         }
       }
     );
@@ -131,8 +131,6 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
         allowedContexts.push(x.name);
       }
     });
-
-    console.log(allowedContexts);
     
     api.updateUser(
       '<token>',
@@ -143,6 +141,8 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
           this.setState({ saveSelectedStatus: 'error' });
         } else {
           this.setState({ saveSelectedStatus: 'successful' });
+          this.updateChecklist();
+          this.context.currentModalData.updateClusters();
         }
       }
     );
@@ -168,7 +168,7 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
 
     return (
       <div>
-        <Subtitle>Select the clusters you want Porter to connect to</Subtitle>
+        <Subtitle>Select the contexts you want Porter to use</Subtitle>
         <ClusterList>
           {this.renderClusterList()}
         </ClusterList>
@@ -185,7 +185,10 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
   render() {
     return (
       <StyledClusterConfigModal>
-        <CloseButton onClick={() => { this.context.setCurrentModal(null) }}>
+        <CloseButton onClick={() => {
+          this.context.setCurrentModal(null);
+          this.context.setCurrentModalData(null);
+        }}>
           <CloseButtonImg src={close} />
         </CloseButton>
 

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

@@ -4,6 +4,7 @@ import drawerBg from '../../../assets/drawer-bg.png';
 
 import api from '../../../shared/api';
 import { Context } from '../../../shared/Context';
+import { KubeContextConfig } from '../../../shared/types';
 
 import Drawer from './Drawer';
 
@@ -16,7 +17,7 @@ type StateType = {
   configExists: boolean,
   showDrawer: boolean,
   initializedDrawer: boolean,
-  kubeContexts: string[],
+  kubeContexts: KubeContextConfig[],
   activeIndex: number,
 };
 
@@ -27,22 +28,30 @@ export default class ClusterSection extends Component<PropsType, StateType> {
     configExists: true,
     showDrawer: false,
     initializedDrawer: false,
-    kubeContexts: [] as string[],
+    kubeContexts: [] as KubeContextConfig[],
     activeIndex: 0,
   };
 
-  componentDidMount() {
+  updateClusters = () => {
     let { setCurrentError, userId } = this.context;
 
-    api.getContexts('<token>', {}, { id: userId }, (err: any, res: any) => {      
+    // TODO: query with selected filter once implemented
+    api.getContexts('<token>', {}, { id: userId }, (err: any, res: any) => {
       if (err) {
-        setCurrentError(JSON.stringify(err));
+        setCurrentError('getContexts: ' + JSON.stringify(err));
       } else {
-        this.setState({ kubeContexts: res });
+
+        // Filter selected (temporary)
+        let kubeContexts = res.data.filter((x: KubeContextConfig) => x.selected);
+        this.setState({ kubeContexts });
       }
     });
   }
 
+  componentDidMount() {
+    this.updateClusters();
+  }
+
   // Need to override showDrawer when the sidebar is closed
   componentDidUpdate(prevProps: PropsType) {
     if (prevProps !== this.props) {
@@ -64,6 +73,7 @@ export default class ClusterSection extends Component<PropsType, StateType> {
     if (this.state.initializedDrawer) {
       return (
         <Drawer
+          updateClusters={this.updateClusters}
           toggleDrawer={this.toggleDrawer}
           showDrawer={this.state.showDrawer}
           kubeContexts={this.state.kubeContexts}
@@ -74,6 +84,11 @@ export default class ClusterSection extends Component<PropsType, StateType> {
     }
   };
 
+  showClusterConfigModal = () => {
+    this.context.setCurrentModal('ClusterConfigModal');
+    this.context.setCurrentModalData({ updateClusters: this.updateClusters });
+  }
+
   renderContents = (): JSX.Element => {
     let { kubeContexts, activeIndex, showDrawer } = this.state;
 
@@ -82,7 +97,7 @@ export default class ClusterSection extends Component<PropsType, StateType> {
         <ClusterSelector showDrawer={showDrawer}>
           <LinkWrapper>
             <ClusterIcon><i className="material-icons">polymer</i></ClusterIcon>
-            <ClusterName>{kubeContexts[activeIndex]}</ClusterName>
+            <ClusterName>{kubeContexts[activeIndex].name}</ClusterName>
           </LinkWrapper>
           <DrawerButton onClick={this.toggleDrawer}>
             <BgAccent src={drawerBg} />
@@ -95,7 +110,7 @@ export default class ClusterSection extends Component<PropsType, StateType> {
     }
 
     return (
-      <InitializeButton onClick={() => this.context.setCurrentModal('ClusterConfigModal')}>
+      <InitializeButton onClick={this.showClusterConfigModal}>
         <Plus>+</Plus> Add a Cluster
       </InitializeButton>
     )

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

@@ -3,13 +3,15 @@ import styled from 'styled-components';
 import close from '../../../assets/close.png';
 
 import { Context } from '../../../shared/Context';
+import { KubeContextConfig } from '../../../shared/types';
 
 type PropsType = {
   toggleDrawer: () => void,
   showDrawer: boolean,
-  kubeContexts: string[],
+  kubeContexts: KubeContextConfig[],
   activeIndex: number,
-  setActiveIndex: (i: number) => void
+  setActiveIndex: (i: number) => void,
+  updateClusters: () => void
 };
 
 type StateType = {
@@ -17,24 +19,29 @@ type StateType = {
 
 export default class Drawer extends Component<PropsType, StateType> {
 
-  renderClusterList = (): JSX.Element[] => {
-    return this.props.kubeContexts.map((kubeContext: string, i: number) => {
-      /*
-      let active = this.context.activeProject &&
-        this.context.activeProject.namespace == val.namespace; 
-      */
+  renderClusterList = (): JSX.Element[] | JSX.Element => {
+    let { kubeContexts, activeIndex, setActiveIndex } = this.props;
+    if (kubeContexts.length > 0) {
+      return kubeContexts.map((kubeContext: KubeContextConfig, i: number) => {
+        /*
+        let active = this.context.activeProject &&
+          this.context.activeProject.namespace == val.namespace; 
+        */
+
+        return (
+          <ClusterOption
+            key={i}
+            active={i === activeIndex}
+            onClick={() => setActiveIndex(i)}
+          >
+            <ClusterIcon><i className="material-icons">polymer</i></ClusterIcon>
+            <ClusterName>{kubeContext.name}</ClusterName>
+          </ClusterOption>
+        );
+      });
+    }
 
-      return (
-        <ClusterOption 
-          key={i}
-          active={i === this.props.activeIndex}
-          onClick={() => this.props.setActiveIndex(i)}
-        >
-          <ClusterIcon><i className="material-icons">polymer</i></ClusterIcon>
-          <ClusterName>{kubeContext}</ClusterName>
-        </ClusterOption>
-      );
-    });
+    return <Placeholder>No clusters selected</Placeholder>
   };
 
   renderCloseOverlay = (): JSX.Element | undefined => {
@@ -56,7 +63,10 @@ export default class Drawer extends Component<PropsType, StateType> {
 
           {this.renderClusterList()}
 
-          <InitializeButton onClick={() => this.context.setCurrentModal('ClusterConfigModal')}>
+          <InitializeButton onClick={() => {
+            this.context.setCurrentModal('ClusterConfigModal');
+            this.context.setCurrentModalData({ updateClusters: this.props.updateClusters });
+          }}>
             <Plus>+</Plus> Manage Clusters
           </InitializeButton>
         </StyledDrawer>
@@ -87,7 +97,7 @@ const InitializeButton = styled.div`
   justify-content: center;
   width: calc(100% - 30px);
   height: 38px;
-  margin: 20px 15px 12px;
+  margin: 45px 15px 12px;
   font-size: 13px;
   font-weight: 500;
   border-radius: 3px;
@@ -107,7 +117,7 @@ const ClusterOption = styled.div`
   padding-right: 30px;
   display: flex;
   align-items: center;
-  height: 50px;
+  height: 42px;
   text-decoration: none;
   color: white;
   font-size: 14px;
@@ -115,9 +125,19 @@ const ClusterOption = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: pointer;
-  background: ${(props: { active: boolean }) => props.active ? '#ffffff22' : ''};
+  background: ${(props: { active?: boolean }) => props.active ? '#ffffff18' : ''};
   :hover {
-    background: #ffffff33;
+    background: #ffffff22;
+  }
+`;
+
+const Placeholder = styled(ClusterOption)`
+  color: #ffffff99;
+  justify-content: center;
+  padding: 0;
+  cursor: default;
+  :hover {
+    background: none;
   }
 `;
 
@@ -166,7 +186,7 @@ const ClusterIcon = styled.div`
 const StyledDrawer = styled.div`
   position: absolute;
   height: 100%;
-  padding-top: 36px;
+  padding-top: 41px;
   width: 230px;
   overflow-y: auto;
   padding-bottom: 40px;

dashboard/src/shared/Context.tsx

@@ -28,9 +28,12 @@ class ContextProvider extends Component {
     setCurrentModal: (currentModal: string): void => {
       this.setState({ currentModal });
     },
+    currentModalData: null as any,
+    setCurrentModalData: (currentModalData: any): void => {
+      this.setState({ currentModalData });
+    },
     currentError: null as string | null,
     setCurrentError: (currentError: string): void => {
-      console.log('setting err', currentError)
       this.setState({ currentError });
     },
     currentCluster: null as string | null,