wait for taboptions to be set before rendering job formwrapper

dashboard/src/components/TabRegion.tsx

@@ -40,6 +40,7 @@ export default class TabRegion extends Component<PropsType, StateType> {
   }
 
   render() {
+    console.log(this.props.currentTab)
     return (
       <StyledTabRegion suppressAnimation={this.props.suppressAnimation}>
         {

dashboard/src/components/form-refactor/PorterFormWrapper.tsx

@@ -42,13 +42,19 @@ const PorterFormWrapper: React.FunctionComponent<PropsType> = ({
     }, 0);
   };
 
-  const [currentTab, setCurrentTab] = useState(
-    leftTabOptions?.length > 0
-      ? leftTabOptions[0].value
-      : formData.tabs?.length > 0
-      ? formData.tabs[0].name
-      : ""
-  );
+  const getInitialTab = (): string => {
+    if (leftTabOptions?.length > 0) {
+      return leftTabOptions[0].value;
+    } else if (formData.tabs?.length > 0) {
+      return formData.tabs[0].name;
+    } else if (rightTabOptions?.length > 0) {
+      return rightTabOptions[0].value;
+    } else {
+      return "";
+    }
+  }
+
+  const [currentTab, setCurrentTab] = useState(getInitialTab());
 
   return (
     <React.Fragment key={hashCode(JSON.stringify(formData))}>

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

@@ -597,22 +597,30 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
           </HeaderWrapper>
 
           <BodyWrapper>
-            <PorterFormWrapper
-              formData={this.state.formData}
-              valuesToOverride={this.state.valuesToOverride}
-              renderTabContents={this.renderTabContents}
-              isReadOnly={
-                this.state.imageIsPlaceholder ||
-                !this.props.isAuthorized("job", "", ["get", "update"])
-              }
-              onSubmit={(formValues) =>
-                this.handleSaveValues(formValues, false)
-              }
-              leftTabOptions={this.state.leftTabOptions}
-              rightTabOptions={this.state.rightTabOptions}
-              saveValuesStatus={this.state.saveValuesStatus}
-              saveButtonText="Save Config"
-            />
+            {
+              (
+                this.state.leftTabOptions?.length > 0 ||
+                this.state.formData.tabs?.length > 0 ||
+                this.state.rightTabOptions?.length > 0
+              ) && (
+                <PorterFormWrapper
+                  formData={this.state.formData}
+                  valuesToOverride={this.state.valuesToOverride}
+                  renderTabContents={this.renderTabContents}
+                  isReadOnly={
+                    this.state.imageIsPlaceholder ||
+                    !this.props.isAuthorized("job", "", ["get", "update"])
+                  }
+                  onSubmit={(formValues) =>
+                    this.handleSaveValues(formValues, false)
+                  }
+                  leftTabOptions={this.state.leftTabOptions}
+                  rightTabOptions={this.state.rightTabOptions}
+                  saveValuesStatus={this.state.saveValuesStatus}
+                  saveButtonText="Save Config"
+                />
+              )
+            }
           </BodyWrapper>
         </StyledExpandedChart>
       </>