devops mode toggle + tabselector v2

dashboard/src/components/TabSelector.tsx

@@ -10,20 +10,13 @@ type PropsType = {
   currentTab: string,
   options: selectOption[],
   setCurrentTab: (value: string) => void,
-  tabWidth?: string  
+  addendum?: any
 };
 
 type StateType = {
 };
 
 export default class TabSelector extends Component<PropsType, StateType> {
-
-  renderLine = (tab: string): JSX.Element | undefined => {
-    if (this.props.currentTab === tab) {
-      return <Highlight />
-    }
-  };
-
   handleTabClick = (value: string) => {
     this.props.setCurrentTab(value);
   }
@@ -35,10 +28,10 @@ export default class TabSelector extends Component<PropsType, StateType> {
           <Tab
             key={i}
             onClick={() => this.handleTabClick(option.value)}
-            tabWidth={this.props.tabWidth}
+            lastItem={i === this.props.options.length - 1}
+            highlight={option.value === this.props.currentTab}
           >
             {option.label}
-            {this.renderLine(option.value)}
           </Tab>
         );
       })
@@ -49,6 +42,7 @@ export default class TabSelector extends Component<PropsType, StateType> {
     return (
       <StyledTabSelector>
         {this.renderTabList()}
+        {this.props.addendum}
       </StyledTabSelector>
     );
   }
@@ -58,7 +52,7 @@ const Highlight = styled.div`
   width: 80%;
   height: 1px;
   margin-top: 5px;
-  background: #949EFFcc;
+  background: #949EFFcc00;
 
   opacity: 0;
   animation: lineEnter 0.5s 0s;
@@ -71,27 +65,31 @@ const Highlight = styled.div`
 
 const Tab = styled.div`
   height: 30px;
-  width: ${(props: { tabWidth: string }) => props.tabWidth ? props.tabWidth : ''};
-  padding: 0 10px;
-  margin-right: 12px;
+  margin-right: ${(props: { lastItem: boolean, highlight: boolean }) => props.lastItem ? '' : '30px'};
   display: flex;
   font-family: 'Work Sans', sans-serif;
   font-size: 13px;
   user-select: none;
-  color: #949effcc;
+  color: ${(props: { lastItem: boolean, highlight: boolean }) => props.highlight ? '#949effcc' : '#aaaabb55'};
   flex-direction: column;
   padding-top: 7px;
+  padding-bottom: 2px;
+  margin-bottom: -2px;
   align-items: center;
   cursor: pointer;
   white-space: nowrap;
-  border-radius: 5px;
-  
+  border-bottom: 1px solid ${(props: { lastItem: boolean, highlight: boolean }) => props.highlight ? '#949effcc' : 'none'};
   :hover {
-    background: #949EFF22;
+    color: ${(props: { lastItem: boolean, highlight: boolean }) => props.highlight ? '' : '#aaaabb'};
   }
 `;
 
 const StyledTabSelector = styled.div`
   display: flex;
+  width: calc(100% - 4px);
   align-items: center;
+  border-bottom: 1px solid #aaaabb55;
+  padding-bottom: 1px;
+  margin-left: 2px;
+  position: relative;
 `;

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

@@ -23,22 +23,31 @@ type StateType = {
   showRevisions: boolean,
   currentTab: string,
   components: ResourceType[],
-  revisionPreview: ChartType | null
+  revisionPreview: ChartType | null,
+  devOpsMode: boolean
 };
 
 const tabOptions = [
   { label: 'Chart Overview', value: 'graph' },
   { label: 'Search Chart', value: 'list' },
-  { label: 'Values Editor', value: 'values' }
-]
+  { label: 'Values Editor', value: 'values' },
+  { label: 'Logs', value: 'logs' },
+];
+
+const basicOptions = [
+  { label: 'Environment', value: 'environment' },
+  { label: 'Update Values', value: 'values-abstracted' },
+  { label: 'Logs', value: 'logs' },
+];
 
 // TODO: consolidate revisionPreview and currentChart (currentChart can just be the initial state)
 export default class ExpandedChart extends Component<PropsType, StateType> {
   state = {
     showRevisions: false,
-    currentTab: 'graph',
+    currentTab: 'environment',
     components: [] as ResourceType[],
-    revisionPreview: null as (ChartType | null)
+    revisionPreview: null as (ChartType | null),
+    devOpsMode: false
   }
 
   updateResources = () => {
@@ -85,6 +94,14 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     });
   }
 
+  toggleDevOpsMode = () => {
+    if (this.state.devOpsMode) {
+      this.setState({ devOpsMode: false, currentTab: 'environment' });
+    } else {
+      this.setState({ devOpsMode: true, currentTab: 'graph' });
+    }
+  }
+
   renderIcon = () => {
     let { currentChart } = this.props;
 
@@ -128,13 +145,17 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
           components={this.state.components}
         />
       );
+    } else if (this.state.currentTab === 'values') {
+      return (
+        <ValuesYaml
+          currentChart={chart}
+          refreshChart={refreshChart}
+        />
+      );
     }
 
     return (
-      <ValuesYaml
-        currentChart={chart}
-        refreshChart={refreshChart}
-      />
+      <Unimplemented>(Unimplemented)</Unimplemented>
     );
   }
 
@@ -185,12 +206,19 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
               setRevisionPreview={this.setRevisionPreview}
             />
 
-            <TabSelector
-              options={tabOptions}
-              currentTab={this.state.currentTab}
-              setCurrentTab={(value: string) => this.setState({ currentTab: value })}
-              tabWidth='120px'
-            />
+            <TabSelectorWrapper>
+              <TabSelector
+                options={this.state.devOpsMode ? tabOptions : basicOptions}
+                currentTab={this.state.currentTab}
+                setCurrentTab={(value: string) => this.setState({ currentTab: value })}
+                addendum={
+                  <TabButton onClick={this.toggleDevOpsMode} devOpsMode={this.state.devOpsMode}>
+                    <i className="material-icons">offline_bolt</i> DevOps Mode
+                  </TabButton>
+                }
+              />
+            </TabSelectorWrapper>
+
           </HeaderWrapper>
           <ContentSection>
             {this.renderTabContents()}
@@ -203,6 +231,44 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
 
 ExpandedChart.contextType = Context;
 
+const Unimplemented = styled.div`
+  width: 100%;
+  height: 100%;
+  background: #ffffff11;
+  padding-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const TabButton = styled.div`
+  position: absolute;
+  right: 0px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  color: ${(props: { devOpsMode: boolean }) => props.devOpsMode ? '#aaaabb' : '#aaaabb55'};
+  margin-left: 35px;
+  border-radius: 20px;
+  cursor: pointer;
+  :hover {
+    color: ${(props: { devOpsMode: boolean }) => props.devOpsMode ? '' : '#aaaabb99'};
+  }
+
+  > i {
+    font-size: 17px;
+    margin-right: 9px;
+  }
+`;
+
+const TabSelectorWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 7px;
+`;
+
 const CloseOverlay = styled.div`
   position: absolute;
   top: 0;

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

@@ -307,7 +307,7 @@ const RollbackButton = styled.div`
 `;
 
 const Tr = styled.tr`
-  line-height: 1.8em;
+  line-height: 2.2em;
   cursor: ${(props: { disableHover?: boolean, selected?: boolean }) => props.disableHover ? '' : 'pointer'};
   background: ${(props: { disableHover?: boolean, selected?: boolean  }) => props.selected ? '#ffffff11' : ''};
   :hover {
@@ -373,7 +373,7 @@ const StyledRevisionSection = styled.div`
   width: 100%;
   max-height: ${(props: { showRevisions: boolean }) => props.showRevisions ? '255px' : '40px'};
   background: #ffffff11;
-  margin: 25px 0px;
+  margin: 25px 0px 18px;
   overflow: hidden;
   border-radius: 5px;
   animation: ${(props: { showRevisions: boolean }) => props.showRevisions ? 'expandRevisions 0.3s' : ''};

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

@@ -160,7 +160,7 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
           <YamlEditor 
             value={this.state.rawKubeconfig}
             onChange={(e: any) => this.setState({ rawKubeconfig: e })}
-            height='295px'
+            height='327px'
             border={true}
           />
           <UploadButton>
@@ -201,16 +201,11 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
           <CloseButtonImg src={close} />
         </CloseButton>
 
-        <Header>
-          <Plus>+</Plus>
-          Manage Clusters
-        </Header>
-        <ModalTitle>Connect from Kubeconfig</ModalTitle>
+        <ModalTitle>Manage Clusters</ModalTitle>
         <TabSelector
           currentTab={this.state.currentTab}
           options={tabOptions}
           setCurrentTab={(value: string) => this.setState({ currentTab: value })}
-          tabWidth='120px'
         />
         {this.renderTabContents()}
       </StyledClusterConfigModal>
@@ -307,14 +302,14 @@ const Placeholder = styled.div`
 
 const ClusterList = styled.div`
   width: 100%;
-  height: 295px;
+  height: 327px;
   border-radius: 5px;
   background: #ffffff06;
   border: 1px solid #ffffff22;
 `;
 
 const Subtitle = styled.div`
-  padding: 15px 0px;
+  padding: 17px 2px 25px;
   font-family: 'Work Sans', sans-serif;
   font-size: 13px;
   color: #aaaabb;
@@ -325,7 +320,7 @@ const Subtitle = styled.div`
 `;
 
 const ModalTitle = styled.div`
-  margin: 21px 2px 23px;
+  margin: 0px 2px 13px;
   display: flex;
   flex: 1;
   font-family: 'Assistant';