initialize formwrapper state based on override values properly

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

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import AceEditor from "react-ace";
 import FormWrapper from "components/values-form/FormWrapper";
 import CheckboxRow from "components/values-form/CheckboxRow";
+import InputRow from "components/values-form/InputRow";
 import yaml from "js-yaml";
 
 import "shared/ace-porter-theme";
@@ -21,6 +22,7 @@ type StateType = {
   showStateDebugger: boolean;
   valuesToOverride: any;
   checkbox_a: boolean;
+  input_a: string;
   isReadOnly: boolean;
 };
 
@@ -40,6 +42,7 @@ export default class FormDebugger extends Component<PropsType, StateType> {
       },
     } as any,
     checkbox_a: true,
+    input_a: "",
     isReadOnly: false,
   };
 
@@ -123,6 +126,7 @@ export default class FormDebugger extends Component<PropsType, StateType> {
 
               // Override the form value for checkbox_a
               valuesToOverride: {
+                ...this.state.valuesToOverride,
                 checkbox_a: {
                   value: !this.state.checkbox_a,
                 },
@@ -130,6 +134,25 @@ export default class FormDebugger extends Component<PropsType, StateType> {
             })
           }
         />
+        <InputRow
+          type="string"
+          value={this.state.input_a}
+          setValue={(x: string) =>
+            this.setState({
+              input_a: x,
+
+              // Override the form value for input_a
+              valuesToOverride: {
+                ...this.state.valuesToOverride,
+                input_a: {
+                  value: x,
+                },
+              },
+            })
+          }
+          label={"input_a"}
+          placeholder="ex: override text"
+        />
 
         <Heading>🎨 Rendered Form</Heading>
         <Br />

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

@@ -56,7 +56,7 @@ export default class FormWrapper extends Component<PropsType, StateType> {
     tabOptions: [] as { value: string; label: string }[],
   };
 
-  updateTabs = (resetState?: boolean) => {
+  updateTabs = (resetState?: boolean, callback?: any) => {
     if (resetState) {
       let tabOptions = [] as { value: string; label: string }[];
       let tabs = this.props.formData?.tabs;
@@ -85,7 +85,9 @@ export default class FormWrapper extends Component<PropsType, StateType> {
                 let key = item.name || item.variable;
 
                 let def =
-                  item.settings && item.settings.unit && !item.settings.omitUnitFromValue
+                  item.settings &&
+                  item.settings.unit &&
+                  !item.settings.omitUnitFromValue
                     ? `${item.settings.default}${item.settings.unit}`
                     : item.settings?.default;
                 def = (item.value && item.value[0]) || def;
@@ -152,17 +154,20 @@ export default class FormWrapper extends Component<PropsType, StateType> {
         tabOptions = tabOptions.concat(this.props.tabOptions);
       }
       if (tabOptions.length > 0) {
-        this.setState({
-          tabOptions: tabOptions,
-          currentTab:
-            this.state.currentTab === ""
-              ? tabOptions[0].value
-              : this.state.currentTab,
-          metaState,
-          requiredFields: requiredFields,
-        });
+        this.setState(
+          {
+            tabOptions: tabOptions,
+            currentTab:
+              this.state.currentTab === ""
+                ? tabOptions[0].value
+                : this.state.currentTab,
+            metaState,
+            requiredFields: requiredFields,
+          },
+          callback
+        );
       } else {
-        this.setState({ tabOptions });
+        this.setState({ tabOptions }, callback);
       }
     } else {
       // TODO: refactor by consolidating w/ above
@@ -179,24 +184,25 @@ export default class FormWrapper extends Component<PropsType, StateType> {
       if (this.props.tabOptions?.length > 0) {
         tabOptions = tabOptions.concat(this.props.tabOptions);
       }
-      this.setState({ tabOptions });
+      this.setState({ tabOptions }, callback);
     }
   };
 
   componentDidMount() {
-    console.log(this.props.formData);
-    this.setState(
-      {
-        metaState: {
-          ...this.state.metaState,
-          ...this.props.valuesToOverride,
+    this.updateTabs(true, () => {
+      this.setState(
+        {
+          metaState: {
+            ...this.state.metaState,
+            ...this.props.valuesToOverride,
+          },
         },
-      },
-      () => {
-        this.updateTabs(true);
-        this.props.clearValuesToOverride && this.props.clearValuesToOverride();
-      }
-    );
+        () => {
+          this.props.clearValuesToOverride &&
+            this.props.clearValuesToOverride();
+        }
+      );
+    });
   }
 
   componentDidUpdate(prevProps: any) {