broken multiselect cache

dashboard/src/components/TabRegion.tsx

@@ -38,11 +38,6 @@ export default class TabRegion extends Component<PropsType, StateType> {
   }
 
   renderContents = () => {
-    if (!this.props.currentTab) {
-      return (
-        <Loading />
-      );
-    }
 
     return (
       <Div>

dashboard/src/components/forms/VeleroForm.tsx

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import Heading from '../values-form/Heading';
+import Helper from '../values-form/Helper';
+import InputRow from '../values-form/InputRow';
+import MultiSelect from '../values-form/MultiSelect';
+
+type PropsType = {
+};
+
+type StateType = {
+  name: string,
+  excludeNamespaces: string[],
+  excludeResources: string[],
+  includeNamespaces: string[],
+  includeResources: string[],
+  storageLocation: string,
+  volumeSnapshotLocations: string[],
+};
+
+export default class VeleroForm extends Component<PropsType, StateType> {
+  state = {
+    name: '',
+    excludeNamespaces: [] as string[],
+    excludeResources: [] as string[],
+    includeNamespaces: [] as string[],
+    includeResources: [] as string[],
+    storageLocation: '',
+    volumeSnapshotLocations: [] as string[],
+  }
+
+  render() {
+    return (
+      <>
+        <Heading>Create a Bakup</Heading>
+        <InputRow
+          placeholder='ex: my-backup'
+          type='text'
+          width='300px'
+          value={this.state.name}
+          setValue={(x: string) => this.setState({ name: x })}
+          label='Name'
+        />
+        <MultiSelect />
+      </>
+    );
+  }
+}

dashboard/src/components/values-form/MultiSelect.tsx

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+type PropsType = {
+};
+
+type StateType = {
+  options: { label: string, value: string }[],
+};
+
+export default class MultiSelect extends Component<PropsType, StateType> {
+  state = {
+    options: [] as { label: string, value: string }[],
+  }
+
+  renderOptions = () => {
+    
+  }
+
+  render() {
+    return (
+      <>
+        <StyledMultiSelect>
+        </StyledMultiSelect>
+        boilerplate
+      </>
+    );
+  }
+}
+
+const StyledMultiSelect = styled.div`
+`;

dashboard/src/components/values-form/ValuesForm.tsx

@@ -12,6 +12,28 @@ import SelectRow from './SelectRow';
 import Helper from './Helper';
 import Heading from './Heading';
 import ExpandableResource from '../ExpandableResource';
+import VeleroForm from '../forms/VeleroForm';
+
+ let dummySections = [
+   {
+    "name":"section_one",
+    "show_if":"",
+    "contents":[
+      {
+        "type":"heading",
+        "label":"Polyphia",
+      },
+      {
+        "type":"subtitle",
+        "label":"Tim Hendrix",
+      },
+      {
+        "type":"velero-create-backup",
+        "label":"Tim Hendrix",
+      },
+    ]
+  }
+];
 
 type PropsType = {
   sections?: Section[],
@@ -115,6 +137,11 @@ export default class ValuesForm extends Component<PropsType, StateType> {
               label={item.label}
             />
           );
+        case 'velero-create-backup':
+          return (
+            <VeleroForm
+            />
+          );
         default:
       }
     });
@@ -122,7 +149,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
 
   renderFormContents = () => {
     if (this.props.metaState) {
-      return this.props.sections.map((section: Section, i: number) => {
+      return dummySections.map((section: Section, i: number) => {
         // Hide collapsible section if deciding field is false
         if (section.show_if) {
           if (!this.props.metaState[section.show_if]) {

dashboard/src/components/values-form/ValuesWrapper.tsx

@@ -84,11 +84,11 @@ export default class ValuesWrapper extends Component<PropsType, StateType> {
     return valueIndicators.includes(false) || valueIndicators.includes('')
   }
 
-  render() {
-    let renderFunc: any = this.props.children;
-    return (
-      <StyledValuesWrapper isInModal={this.props.isInModal}>
-        {renderFunc(this.state, (x: any) => this.setState(x))}
+  renderButton = () => {
+    let { formTabs, currentTab } = this.props;
+    let tab = formTabs.find((t: any) => t.name === currentTab || t.value === currentTab);
+    if (tab && tab.context && tab.context.type === 'helm/values') {
+      return (
         <SaveButton
           disabled={this.isDisabled() || this.props.disabled}
           text='Deploy'
@@ -96,6 +96,16 @@ export default class ValuesWrapper extends Component<PropsType, StateType> {
           status={this.isDisabled() ? 'Missing required fields' : this.props.saveValuesStatus}
           makeFlush={true}
         />
+      );
+    }
+  }
+
+  render() {
+    let renderFunc: any = this.props.children;
+    return (
+      <StyledValuesWrapper>
+        {renderFunc(this.state, (x: any) => this.setState(x))}
+        {this.renderButton()}
       </StyledValuesWrapper>
     );
   }
@@ -103,6 +113,6 @@ export default class ValuesWrapper extends Component<PropsType, StateType> {
 
 const StyledValuesWrapper = styled.div`
   width: 100%;
-  height: ${(props: { isInModal: boolean }) => props.isInModal ? '100%' : 'calc(100% + 65px)'};
-  padding-bottom: ${(props: { isInModal: boolean }) => props.isInModal ? '' : '65px'};
+  padding: 0;
+  height: calc(100% - 65px);
 `;

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

@@ -29,6 +29,7 @@ type PropsType = {
 
 type StateType = {
   loading: boolean,
+  error: string | null,
   showRevisions: boolean,
   components: ResourceType[],
   podSelectors: string[]
@@ -44,6 +45,7 @@ type StateType = {
 export default class ExpandedChart extends Component<PropsType, StateType> {
   state = {
     loading: true,
+    error: null as string | null,
     showRevisions: false,
     components: [] as ResourceType[],
     podSelectors: [] as string[],
@@ -60,7 +62,8 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
   getChartData = (chart: ChartType) => {
     let { currentProject } = this.context;
     let { currentCluster, setCurrentChart } = this.props;
-    this.setState({ loading: true })
+    this.setState({ loading: true });
+    console.log('tried my best')
     api.getChart('<token>', {
       namespace: this.props.namespace,
       cluster_id: currentCluster.id,
@@ -71,8 +74,10 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       id: currentProject.id
     }, (err: any, res: any) => {
       if (err) {
-        console.log(err);
+        console.log('big oof')
+        this.setState({ error: 'Could not load chart data.'})
       } else {
+        console.log('did succeed!')
         setCurrentChart(res.data);
         this.setState({ loading: false });
 
@@ -228,13 +233,12 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
                     // If tab is current, render
                     if (tab.value === currentTab) {
                       return (
-                        <ValuesFormWrapper key={i}>
-                          <ValuesForm
-                            metaState={metaState}
-                            setMetaState={setMetaState}
-                            sections={tab.sections} 
-                          />
-                        </ValuesFormWrapper>
+                        <ValuesForm
+                          key={i}
+                          metaState={metaState}
+                          setMetaState={setMetaState}
+                          sections={tab.sections} 
+                        />
                       );
                     }
                   });
@@ -253,7 +257,12 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     // Generate form tabs if form.yaml exists
     if (formData) {
       formData.tabs.map((tab: any, i: number) => {
-        tabOptions.push({ value: '@' + tab.name, label: tab.label, sections: tab.sections });
+        tabOptions.push({ 
+          value: '@' + tab.name,
+          label: tab.label,
+          sections: tab.sections,
+          context: tab.context,
+        });
       });
     }
 
@@ -383,12 +392,6 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
 
 ExpandedChart.contextType = Context;
 
-const ValuesFormWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  padding-bottom: 60px;
-`;
-
 const Unimplemented = styled.div`
   width: 100%;
   height: 100%;

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

@@ -92,6 +92,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
         {
           (metaState: any, setMetaState: any) => {
             return this.props.form.tabs.map((tab: any, i: number) => {
+              console.log(tab)
 
               // If tab is current, render
               if (tab.name === this.state.currentTab) {
@@ -116,7 +117,9 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
     // Retrieve tab options
     let tabOptions = [] as ChoiceType[];
     this.props.form.tabs.map((tab: any, i: number) => {
-      tabOptions.push({ value: tab.name, label: tab.label });
+      if (tab.context.type === 'helm/values') {
+        tabOptions.push({ value: tab.name, label: tab.label });
+      }
     });
     this.setState({ tabOptions });
 

dashboard/src/shared/baseApi.tsx

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import qs from 'qs';
 
-axios.defaults.timeout = 10000;
+// axios.defaults.timeout = 10000;
 
 // Partial function that accepts a generic params type and returns an api method
 export const baseApi = <T extends {}, S = {}>(requestType: string, endpoint: ((pathParams: S) => string) | string) => {