tabs consolidated

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

@@ -22,6 +22,9 @@ type PropsType = {
 type StateType = any;
 
 export default class ValuesForm extends Component<PropsType, StateType> {
+  componentDidMount() {
+    console.log('hola senorita')
+  }
   getInputValue = (item: FormElement) => {
     let key = item.name || item.variable;
     let value = this.props.metaState[key];
@@ -70,7 +73,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
           return (
             <InputRow
               key={i}
-              isRequired={item.required || true}
+              isRequired={item.required}
               type='text'
               value={this.getInputValue(item)}
               setValue={(x: string) => {
@@ -87,7 +90,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
           return (
             <InputRow
               key={i}
-              isRequired={item.required || true}
+              isRequired={item.required}
               type='number'
               value={this.getInputValue(item)}
               setValue={(x: number) => {

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

@@ -10,6 +10,7 @@ type PropsType = {
   onSubmit: (formValues: any) => void,
   disabled?: boolean,
   saveValuesStatus?: string | null,
+  isInModal?: boolean,
 };
 
 type StateType = any;
@@ -21,38 +22,43 @@ export default class ValuesWrapper extends Component<PropsType, StateType> {
   requiredFields: string[] = [];
 
   updateFormState() {
+    console.log('here')
+    console.log(this.props.formTabs)
     let metaState: any = {};
     this.props.formTabs.forEach((tab: any, i: number) => {
-      tab.sections.forEach((section: Section, i: number) => {
-        console.log(section);
-        section.contents.forEach((item: FormElement, i: number) => {
-
-          // If no name is assigned use values.yaml variable as identifier
-          let key = item.name || item.variable;
-          let def = (item.value && item.value[0]) || (item.settings && item.settings.default);
-
-          // Handle add to list of required fields
-          if (item.required || true) {
-            key && this.requiredFields.push(key);
-          }
-
-          switch (item.type) {
-            case 'checkbox':
-              metaState[key] = def ? def : false;
-              break;
-            case 'string-input':
-              metaState[key] = def ? def : '';
-              break;
-            case 'number-input':
-              metaState[key] = def.toString() ? def : '';
-              break;
-            case 'select':
-              metaState[key] = def ? def : item.settings.options[0].value;
-              break;
-            default:
-          }
+
+      // TODO: reconcile tab.name and tab.value
+      if (tab.name || (tab.value && tab.value.includes('@'))) {
+        tab.sections.forEach((section: Section, i: number) => {
+          section.contents.forEach((item: FormElement, i: number) => {
+
+            // If no name is assigned use values.yaml variable as identifier
+            let key = item.name || item.variable;
+            let def = (item.value && item.value[0]) || (item.settings && item.settings.default);
+
+            // Handle add to list of required fields
+            if (item.required) {
+              key && this.requiredFields.push(key);
+            }
+
+            switch (item.type) {
+              case 'checkbox':
+                metaState[key] = def ? def : false;
+                break;
+              case 'string-input':
+                metaState[key] = def ? def : '';
+                break;
+              case 'number-input':
+                metaState[key] = def.toString() ? def : '';
+                break;
+              case 'select':
+                metaState[key] = def ? def : item.settings.options[0].value;
+                break;
+              default:
+            }
+          });
         });
-      });
+      }
     });
     this.setState(metaState);
   }
@@ -80,7 +86,7 @@ export default class ValuesWrapper extends Component<PropsType, StateType> {
   render() {
     let renderFunc: any = this.props.children;
     return (
-      <StyledValuesWrapper>
+      <StyledValuesWrapper isInModal={this.props.isInModal}>
         {renderFunc(this.state, (x: any) => this.setState(x))}
         <SaveButton
           disabled={this.isDisabled() || this.props.disabled}
@@ -96,6 +102,6 @@ export default class ValuesWrapper extends Component<PropsType, StateType> {
 
 const StyledValuesWrapper = styled.div`
   width: 100%;
-  height: calc(100% + 65px);
-  padding-bottom: 65px;
+  height: ${(props: { isInModal: boolean }) => props.isInModal ? '100%' : 'calc(100% + 65px)'};
+  padding-bottom: ${(props: { isInModal: boolean }) => props.isInModal ? '' : '65px'};
 `;

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

@@ -14,6 +14,7 @@ import ValuesYaml from './ValuesYaml';
 import GraphSection from './GraphSection';
 import ListSection from './ListSection';
 import StatusSection from './status/StatusSection';
+import ValuesWrapper from '../../../../components/values-form/ValuesWrapper';
 import ValuesForm from '../../../../components/values-form/ValuesForm';
 import SettingsSection from './SettingsSection';
 import { NavLink } from 'react-router-dom';
@@ -212,21 +213,36 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
           />
         );
       default:
-        if (currentTab && currentTab.includes('@')) {
-          return tabOptions.map((tab: any, i: number) => {
-
-            // If tab is current, render
-            if (tab.value === currentTab) {
-              
-              return (
-                <ValuesFormWrapper key={i}>
-                  <ValuesForm 
-                    sections={tab.sections}
-                  />
-                </ValuesFormWrapper>
-              );
-            }
-          });
+        if (tabOptions && currentTab && currentTab.includes('@')) {
+          return (
+            <ValuesWrapper
+              formTabs={tabOptions}
+              onSubmit={this.onSubmit}
+              saveValuesStatus={this.state.saveValuesStatus}
+              isInModal={true}
+            >
+              {
+                (metaState: any, setMetaState: any) => {
+                  return tabOptions.map((tab: any, i: number) => {
+
+                    // If tab is current, render
+                    if (tab.value === currentTab) {
+                      return (
+                        <ValuesFormWrapper>
+                          <ValuesForm
+                            metaState={metaState}
+                            setMetaState={setMetaState}
+                            key={i}
+                            sections={tab.sections} 
+                          />
+                        </ValuesFormWrapper>
+                      );
+                    }
+                  });
+                }
+              }
+            </ValuesWrapper>
+          );
         }
     }
   }

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

@@ -90,8 +90,8 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
         disabled={!this.state.selectedImageUrl}
       >
         {
-          (metaState: any, setMetaState: any) => 
-            this.props.form.tabs.map((tab: any, i: number) => {
+          (metaState: any, setMetaState: any) => {
+            return this.props.form.tabs.map((tab: any, i: number) => {
 
               // If tab is current, render
               if (tab.name === this.state.currentTab) {
@@ -104,7 +104,8 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
                   />
                 );
               }
-            })
+            });
+          }
         }
       </ValuesWrapper>
     );

internal/models/templates.go

@@ -45,6 +45,7 @@ type FormContent struct {
 	Context  *FormContext `yaml:"context" json:"context"`
 	Type     string       `yaml:"type" json:"type"`
 	Label    string       `yaml:"label" json:"label"`
+	Required bool         `json:"required"`
 	Name     string       `yaml:"name,omitempty" json:"name,omitempty"`
 	Variable string       `yaml:"variable,omitempty" json:"variable,omitempty"`
 	Value    interface{}  `yaml:"value,omitempty" json:"value,omitempty"`