pass form placeholder from backend + fix initialized state and handle variable form element

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

@@ -29,14 +29,17 @@ const tabOptions = [
   { value: "b", label: "Bonus Tab B" },
 ];
 
-// TODO: handle checkbox_a true (pass in initialized state)
 export default class FormDebugger extends Component<PropsType, StateType> {
   state = {
     rawYaml: initYaml,
     showBonusTabs: false,
     showStateDebugger: true,
-    valuesToOverride: null as any,
-    checkbox_a: false,
+    valuesToOverride: {
+      checkbox_a: {
+        value: true,
+      },
+    } as any,
+    checkbox_a: true,
     isReadOnly: false,
   };
 
@@ -74,7 +77,7 @@ export default class FormDebugger extends Component<PropsType, StateType> {
             onChange={(e: string) => this.setState({ rawYaml: e })}
             name="codeEditor"
             editorProps={{ $blockScrolling: true }}
-            height="300px"
+            height="450px"
             width="100%"
             style={{
               borderRadius: "5px",

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

@@ -72,6 +72,15 @@ export default class FormWrapper extends Component<PropsType, StateType> {
                   return;
                 }
 
+                if (
+                  item.type === "variable" &&
+                  item.variable &&
+                  item.settings?.default
+                ) {
+                  metaState[item.variable] = item.settings.default;
+                  return;
+                }
+
                 // If no name is assigned use values.yaml variable as identifier
                 let key = item.name || item.variable;
 
@@ -175,18 +184,22 @@ export default class FormWrapper extends Component<PropsType, StateType> {
   };
 
   componentDidMount() {
-    this.updateTabs(true);
+    console.log(this.props.formData);
+    this.setState(
+      {
+        metaState: {
+          ...this.state.metaState,
+          ...this.props.valuesToOverride,
+        },
+      },
+      () => {
+        this.updateTabs(true);
+        this.props.clearValuesToOverride && this.props.clearValuesToOverride();
+      }
+    );
   }
 
   componentDidUpdate(prevProps: any) {
-    if (
-      !_.isEqual(prevProps.tabOptions, this.props.tabOptions) ||
-      !_.isEqual(prevProps.formData, this.props.formData)
-    ) {
-      let formHasChanged = !_.isEqual(prevProps.formData, this.props.formData);
-      this.updateTabs(formHasChanged);
-    }
-
     // Override metaState values set from outside FormWrapper
     if (
       this.props.valuesToOverride &&
@@ -200,10 +213,27 @@ export default class FormWrapper extends Component<PropsType, StateType> {
           },
         },
         () => {
+          // Seems redundant with below but need to ensure no leaked state updates
+          if (
+            !_.isEqual(prevProps.tabOptions, this.props.tabOptions) ||
+            !_.isEqual(prevProps.formData, this.props.formData)
+          ) {
+            let formHasChanged = !_.isEqual(
+              prevProps.formData,
+              this.props.formData
+            );
+            this.updateTabs(formHasChanged);
+          }
           this.props.clearValuesToOverride &&
             this.props.clearValuesToOverride();
         }
       );
+    } else if (
+      !_.isEqual(prevProps.tabOptions, this.props.tabOptions) ||
+      !_.isEqual(prevProps.formData, this.props.formData)
+    ) {
+      let formHasChanged = !_.isEqual(prevProps.formData, this.props.formData);
+      this.updateTabs(formHasChanged);
     }
   }
 

internal/models/templates.go

@@ -42,14 +42,15 @@ type FormSection struct {
 
 // FormContent is a form's atomic unit
 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"`
-	Settings 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"`
+	Placeholder string       `yaml:"placeholder,omitempty" json:"placeholder,omitempty"`
+	Value       interface{}  `yaml:"value,omitempty" json:"value,omitempty"`
+	Settings    struct {
 		Default     interface{} `yaml:"default,omitempty" json:"default,omitempty"`
 		Unit        interface{} `yaml:"unit,omitempty" json:"unit,omitempty"`
 		Options     interface{} `yaml:"options,omitempty" json:"options,omitempty"`