unintegrated values.yaml editor

dashboard/src/components/TabSelector.tsx

@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+export interface selectOption {
+  value: string,
+  label: string
+}
+
+type PropsType = {
+  options: selectOption[],
+  setCurrentTab: (value: string) => void,
+  tabWidth?: string  
+};
+
+type StateType = {
+  currentTab: string
+};
+
+export default class TabSelector extends Component<PropsType, StateType> {
+  state = {
+    currentTab: 'overview', 
+  }
+
+  renderLine = (tab: string): JSX.Element | undefined => {
+    if (this.state.currentTab === tab) {
+      return <Highlight />
+    }
+  };
+
+  handleTabClick = (value: string) => {
+    this.setState({ currentTab: value });
+    this.props.setCurrentTab(value);
+  }
+
+  renderTabList = () => {
+    return (
+      this.props.options.map((option: selectOption, i: number) => {
+        return (
+          <Tab
+            onClick={() => this.handleTabClick(option.value)}
+            tabWidth={this.props.tabWidth}
+          >
+            {option.label}
+            {this.renderLine(option.value)}
+          </Tab>
+        );
+      })
+    );
+  }
+
+  render() {
+    return (
+      <StyledTabSelector>
+        {this.renderTabList()}
+      </StyledTabSelector>
+    );
+  }
+}
+
+const Highlight = styled.div`
+  width: 80%;
+  height: 1px;
+  margin-top: 5px;
+  background: #949EFFcc;
+
+  opacity: 0;
+  animation: lineEnter 0.5s 0s;
+  animation-fill-mode: forwards;
+  @keyframes lineEnter {
+    from { width: 0%; opacity: 0; }
+    to   { width: 80%; opacity: 1; }
+  }
+`; 
+
+const Tab = styled.div`
+  height: 30px;
+  width: ${(props: { tabWidth: string }) => props.tabWidth ? props.tabWidth : ''};
+  padding: 0 10px;
+  margin-right: 12px;
+  display: flex;
+  font-family: 'Work Sans', sans-serif;
+  font-size: 13px;
+  user-select: none;
+  color: #949effcc;
+  flex-direction: column;
+  padding-top: 7px;
+  align-items: center;
+  cursor: pointer;
+  white-space: nowrap;
+  border-radius: 5px;
+  
+  :hover {
+    background: #949EFF22;
+  }
+`;
+
+const StyledTabSelector = styled.div`
+  display: flex;
+  align-items: center;
+`;

dashboard/src/components/YamlEditor.tsx

@@ -8,6 +8,7 @@ import 'ace-builds/src-noconflict/theme-terminal';
 type PropsType = {
   value: string,
   onChange: (e: any) => void,
+  height?: string
 }
 
 type StateType = {
@@ -48,8 +49,8 @@ class YamlEditor extends Component<PropsType, StateType> {
             onChange={this.props.onChange}
             name='codeEditor'
             editorProps={{ $blockScrolling: true }}
+            height={this.props.height}
             width='100%'
-            height='295px'
             style={{ borderRadius: '5px' }}
           />
         </Editor>
@@ -61,9 +62,6 @@ class YamlEditor extends Component<PropsType, StateType> {
 export default YamlEditor;
 
 const Editor = styled.form`
-  margin-top: 0px;
-  margin-bottom: 12px;
-  width: calc(100% - 0px);
   border-radius: 5px;
   border: 1px solid #ffffff22;
 `;

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

@@ -5,7 +5,9 @@ import close from '../../../../assets/close.png';
 import { ChartType } from '../../../../shared/types';
 import { Context } from '../../../../shared/Context';
 
+import TabSelector from '../../../../components/TabSelector';
 import RevisionSection from './RevisionSection';
+import ValuesYaml from './ValuesYaml';
 
 type PropsType = {
   currentChart: ChartType,
@@ -14,12 +16,19 @@ type PropsType = {
 };
 
 type StateType = {
-  showRevisions: boolean
+  showRevisions: boolean,
+  currentTab: string
 };
 
+const tabOptions = [
+  { label: 'Chart Overview', value: 'overview' },
+  { label: 'Values Editor', value: 'values' }
+]
+
 export default class ExpandedChart extends Component<PropsType, StateType> {
   state = {
-    showRevisions: false
+    showRevisions: false,
+    currentTab: 'overview'
   }
 
   renderIcon = () => {
@@ -39,6 +48,18 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     return `${time} on ${date}`;
   }
 
+  renderTabContents = () => {
+    if (this.state.currentTab === 'overview') {
+      return (
+        <Wrapper>
+          <Placeholder>(Under construction)</Placeholder>
+        </Wrapper>
+      );
+    }
+
+    return <ValuesYaml />
+  }
+
   render() {
     let { currentChart, setCurrentChart, refreshChart } = this.props;
     let chart = currentChart;
@@ -82,9 +103,14 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
           refreshChart={refreshChart}
         />
 
-        <ChartSection>
-          <Placeholder>(Under construction)</Placeholder>
-        </ChartSection>
+        <TabSelector
+          options={tabOptions}
+          setCurrentTab={(value: string) => this.setState({ currentTab: value })}
+          tabWidth='120px'
+        />
+        <ContentSection>
+          {this.renderTabContents()}
+        </ContentSection>
       </StyledExpandedChart>
     );
   }
@@ -92,18 +118,26 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
 
 ExpandedChart.contextType = Context;
 
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  background: #ffffff11;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 const Placeholder = styled.div`
   color: #ffffff66;
   padding-bottom: 30px;
 `;
 
-const ChartSection = styled.div`
+const ContentSection = styled.div`
   display: flex;
   margin-top: 20px;
   border-radius: 5px;
   flex: 1;
   width: 100%;
-  background: #ffffff11;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -339,7 +339,7 @@ const StyledRevisionSection = styled.div`
   width: 100%;
   max-height: ${(props: { showRevisions: boolean }) => props.showRevisions ? '255px' : '40px'};
   background: #ffffff11;
-  margin-top: 25px;
+  margin: 25px 0px;
   overflow: hidden;
   border-radius: 5px;
   animation: ${(props: { showRevisions: boolean }) => props.showRevisions ? 'expandRevisions 0.3s' : ''};

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

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import YamlEditor from '../../../../components/YamlEditor';
+
+type PropsType = {
+};
+
+type StateType = {
+  valuesYaml: string,
+};
+
+export default class ValuesYaml extends Component<PropsType, StateType> {
+  state = {
+    valuesYaml: '# placeholder for values.yaml'
+  }
+
+  render() {
+    return (
+      <StyledValuesYaml>
+        <YamlEditor
+          value={this.state.valuesYaml}
+          onChange={(e: any) => this.setState({ valuesYaml: e })}
+        />
+      </StyledValuesYaml>
+    );
+  }
+}
+
+const StyledValuesYaml = styled.div`
+  width: 100%;
+`;

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

@@ -8,6 +8,7 @@ import { KubeContextConfig } from '../../../shared/types';
 
 import YamlEditor from '../../../components/YamlEditor';
 import SaveButton from '../../../components/SaveButton';
+import TabSelector from '../../../components/TabSelector';
 
 type PropsType = {
 };
@@ -20,6 +21,11 @@ type StateType = {
   saveSelectedStatus: string | null
 };
 
+const tabOptions = [
+  { label: 'Raw Kubeconfig', value: 'kubeconfig' },
+  { label: 'Select Clusters', value: 'select' }
+]
+
 export default class ClusterConfigModal extends Component<PropsType, StateType> {
   state = {
     currentTab: 'kubeconfig',
@@ -60,12 +66,6 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
     this.updateChecklist();
   }
 
-  renderLine = (tab: string): JSX.Element | undefined => {
-    if (this.state.currentTab === tab) {
-      return <Highlight />
-    }
-  };
-
   toggleCluster = (i: number): void => {
     let newKubeContexts = this.state.kubeContexts;
     newKubeContexts[i].selected = !newKubeContexts[i].selected;
@@ -160,6 +160,7 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
           <YamlEditor 
             value={this.state.rawKubeconfig}
             onChange={(e: any) => this.setState({ rawKubeconfig: e })}
+            height='295px'
           />
           <UploadButton>
             <i className="material-icons">cloud_upload</i> Upload Kubeconfig
@@ -204,16 +205,11 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
           Manage Clusters
         </Header>
         <ModalTitle>Connect from Kubeconfig</ModalTitle>
-        <TabSelector>
-          <Tab onClick={() => this.setState({ currentTab: 'kubeconfig' })}>
-            Raw Kubeconfig
-            {this.renderLine('kubeconfig')}
-          </Tab>
-          <Tab onClick={() => this.setState({ currentTab: 'select' })}>
-            Select Clusters
-            {this.renderLine('select')}
-          </Tab>
-        </TabSelector>
+        <TabSelector
+          options={tabOptions}
+          setCurrentTab={(value: string) => this.setState({ currentTab: value })}
+          tabWidth='120px'
+        />
         {this.renderTabContents()}
       </StyledClusterConfigModal>
     );
@@ -326,54 +322,8 @@ const Subtitle = styled.div`
   text-overflow: ellipsis;
 `;
 
-const Highlight = styled.div`
-  width: 80%;
-  height: 1px;
-  margin-top: 5px;
-  background: #949EFFcc;
-
-  opacity: 0;
-  animation: lineEnter 0.5s 0s;
-  animation-fill-mode: forwards;
-  @keyframes lineEnter {
-    from { width: 0%; opacity: 0; }
-    to   { width: 80%; opacity: 1; }
-  }
-`; 
-
-const Tab = styled.div`
-  width: 180px;
-  height: 30px;
-  padding: 0 10px;
-  margin-right: 15px;
-  display: flex;
-  font-family: 'Work Sans', sans-serif;
-  font-size: 13px;
-  user-select: none;
-  color: #949effcc;
-  flex-direction: column;
-  padding-top: 7px;
-  align-items: center;
-  cursor: pointer;
-  white-space: nowrap;
-  
-  :hover {
-    background: #949EFF22;
-    border-radius: 5px;
-  }
-`;
-
-const TabSelector = styled.div`
-  display: flex;
-  width: 260px;
-  max-width: 100%;
-  margin-left: 0px;
-  justify-content: space-between;
-  margin-top: 23px;
-`;
-
 const ModalTitle = styled.div`
-  margin-top: 21px;
+  margin: 21px 2px 23px;
   display: flex;
   flex: 1;
   font-family: 'Assistant';