handle empty form section

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

@@ -66,8 +66,8 @@ export default class FormWrapper extends Component<PropsType, StateType> {
         tabs.forEach((tab: any, i: number) => {
           if (tab?.name && tab.label) {
             // If a tab is valid, extract state
-            tab.sections.forEach((section: Section, i: number) => {
-              section?.contents.forEach((item: FormElement, i: number) => {
+            tab.sections?.forEach((section: Section, i: number) => {
+              section?.contents?.forEach((item: FormElement, i: number) => {
                 if (item === null || item === undefined) {
                   return;
                 }
@@ -263,7 +263,7 @@ export default class FormWrapper extends Component<PropsType, StateType> {
     }
 
     let requiredMissing = false;
-    this.state.requiredFields.forEach((requiredKey: string, i: number) => {
+    this.state.requiredFields?.forEach((requiredKey: string, i: number) => {
       if (!this.isSet(this.state.metaState[requiredKey]?.value)) {
         requiredMissing = true;
       }
@@ -322,7 +322,7 @@ export default class FormWrapper extends Component<PropsType, StateType> {
   handleSubmit = () => {
     // Extract metaState values
     let submissionValues: any = {};
-    Object.keys(this.state.metaState).forEach((key: string, i: number) => {
+    Object.keys(this.state.metaState)?.forEach((key: string, i: number) => {
       submissionValues[key] = this.state.metaState[key]?.value;
     });
 

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

@@ -47,7 +47,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
   };
 
   renderSection = (section: Section) => {
-    return section.contents.map((item: FormElement, i: number) => {
+    return section.contents?.map((item: FormElement, i: number) => {
       if (!item) {
         return;
       }
@@ -64,7 +64,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
           if (Array.isArray(item.value)) {
             return (
               <ResourceList key={key}>
-                {item.value.map((resource: any, i: number) => {
+                {item.value?.map((resource: any, i: number) => {
                   return (
                     <ExpandableResource
                       key={i}
@@ -295,7 +295,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
 
   renderFormContents = () => {
     if (this.props.metaState) {
-      return this.props.sections.map((section: Section, i: number) => {
+      return this.props.sections?.map((section: Section, i: number) => {
         // Hide collapsible section if deciding field is false
         if (section.show_if) {
           if (

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

@@ -362,8 +362,6 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
     let { currentChart } = this.state;
     let chart = currentChart;
 
-    console.log(this.state.formData)
-
     return (
       <>
         <CloseOverlay onClick={closeChart} />