reintegrated expanded chart tabs w/ tab region (basic functionality)

dashboard/src/components/TabRegion.tsx

@@ -2,11 +2,13 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 
 import TabSelector from './TabSelector';
+import Loading from './Loading';
 
 type PropsType = {
   options: { label: string, value: string }[],
   tabContents: any,
-  defaultTab?: string
+  defaultTab?: string,
+  addendum?: any,
 };
 
 type StateType = {
@@ -14,6 +16,7 @@ type StateType = {
 };
 
 // Manages a tab selector and renders the associated view
+// TODO: consider rearchitecturing to support standard re-render
 export default class TabRegion extends Component<PropsType, StateType> {
   state = {
     currentTab: this.props.defaultTab
@@ -30,7 +33,7 @@ export default class TabRegion extends Component<PropsType, StateType> {
   }
 
   componentDidUpdate(prevProps: PropsType) {
-    if (prevProps.options !== this.props.options) {
+    if (prevProps.options !== this.props.options && !this.state.currentTab) {
       this.setDefaultTab();
     }
   }
@@ -42,21 +45,48 @@ export default class TabRegion extends Component<PropsType, StateType> {
     }
   }
 
-  render() {
+  renderContents = () => {
+    if (!this.state.currentTab) {
+      return (
+        <Loading />
+      );
+    }
+
     return (
-      <StyledTabRegion>
+      <Div>
         <TabSelector
           options={this.props.options}
           currentTab={this.state.currentTab}
           setCurrentTab={(x: string) => this.setState({ currentTab: x })}
+          addendum={this.props.addendum}
         />
         <Gap />
-        {this.renderTabContents()}
+        <TabContents>
+          {this.renderTabContents()}
+        </TabContents>
+      </Div>
+    );
+  }
+
+  render() {
+    return (
+      <StyledTabRegion>
+        {this.renderContents()}
       </StyledTabRegion>
     );
   }
 }
 
+const Div = styled.div`
+  width: 100%;
+  height: 100%;
+  animation: fadeIn 0.25s 0s;
+`;
+
+const TabContents = styled.div`
+  height: calc(100% - 60px);
+`;
+
 const Gap = styled.div`
   width: 100%;
   background: none;
@@ -66,6 +96,6 @@ const Gap = styled.div`
 const StyledTabRegion = styled.div`
   width: 100%;
   height: 100%;
-  padding-bottom: 70px;
   position: relative;
+  overflow-y: auto;
 `;

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

@@ -54,4 +54,5 @@ const StyledGraphSection = styled.div`
   width: 100%;
   height: 100%;
   background: #ffffff11;
+  font-size: 13px;
 `;

dashboard/src/main/home/cluster-dashboard/expanded-chart/ListSection.tsx

@@ -70,4 +70,6 @@ const StyledListSection = styled.div`
   background: #ffffff11;
   display: flex;
   position: relative;
+  border-radius: 5px;
+  font-size: 13px;
 `;

dashboard/src/main/home/cluster-dashboard/expanded-chart/SettingsSection.tsx

@@ -40,6 +40,7 @@ export default class SettingsSection extends Component<PropsType, StateType> {
           text='Save Settings'
           onClick={() => console.log(this.state)}
           status={null}
+          makeFlush={true}
         />
       </Wrapper>
     );

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

@@ -81,6 +81,7 @@ export default class ValuesYaml extends Component<PropsType, StateType> {
           text='Update Values'
           onClick={this.handleSaveValues}
           status={this.state.saveValuesStatus}
+          makeFlush={true}
         />
       </StyledValuesYaml>
     );

dashboard/src/main/home/cluster-dashboard/expanded-chart/log/LogSection.tsx

@@ -103,6 +103,7 @@ const StyledLogSection = styled.span`
   width: 100%;
   height: 100%;
   position: relative;
+  font-size: 13px;
   padding: 0px;
   user-select: text;
 `;

dashboard/src/main/home/cluster-dashboard/expanded-chart/log/Logs.tsx

@@ -62,4 +62,5 @@ const LogStream = styled.div`
   padding: 25px;
   user-select: text;
   overflow: auto;
+  border-radius: 5px;
 `;

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

@@ -35,17 +35,24 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
   };
 
   componentDidMount() {
+
+    // Generate settings tabs from the provided form
     let tabOptions = [] as ChoiceType[];
     let tabContents = [] as any;
     this.props.currentTemplate.Form.Tabs.map((tab: any, i: number) => {
       tabOptions.push({ value: tab.Name, label: tab.Label });
-      tabContents.push({ value: tab.Name, component: <ValuesForm sections={tab.Sections} /> });
+      tabContents.push({
+        value: tab.Name, component: (
+          <ValuesFormWrapper>
+            <ValuesForm sections={tab.Sections} />
+          </ValuesFormWrapper>
+        ),
+      });
     });
     this.setState({ tabOptions, tabContents });
 
-    let { currentProject } = this.context;
-
     // TODO: query with selected filter once implemented
+    let { currentProject } = this.context;
     api.getClusters('<token>', {}, { id: currentProject.id }, (err: any, res: any) => {
       if (err) {
         // console.log(err)
@@ -123,6 +130,12 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
 
 LaunchTemplate.contextType = Context;
 
+const ValuesFormWrapper = styled.div`
+  width: 100%;
+  height: calc(100% + 65px);
+  padding-bottom: 65px;
+`;
+
 const Br = styled.div`
   width: 100%;
   height: 7px;