Merge branch '0.5.0-forms-refactor' of https://github.com/porter-dev/porter into 0.5.0-forms-refactor

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

@@ -41,8 +41,6 @@ const { Provider } = PorterFormContext;
 export const PorterFormContextProvider: React.FC<Props> = (props) => {
   const context = useContext(Context);
 
-  console.log(props.rawFormData);
-
   const handleAction = (
     state: PorterFormState,
     action: PorterFormAction
@@ -111,9 +109,28 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
     return state;
   };
 
+  // get variables initiated by variable field
+  const getInitialVariables = (data: PorterFormData) => {
+    const ret: Record<string, any> = {};
+    data.tabs.map((tab) =>
+      tab.sections.map((section) =>
+        section.contents.map((field) => {
+          if (field.type == "variable") {
+            ret[field.variable] = field.settings?.default;
+          }
+        })
+      )
+    );
+    return ret;
+  };
+
   const [state, dispatch] = useReducer(handleAction, {
     components: {},
-    variables: props.initialVariables || {},
+    variables: {
+      ...props.initialVariables,
+      ...getInitialVariables(props.rawFormData),
+      ...props.overrideVariables,
+    },
   });
 
   const evalShowIf = (
@@ -166,60 +183,64 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
           sections: tab.sections.map((section) => {
             return {
               ...section,
-              contents: section.contents.map((field: any) => {
-                if (field.type == "number-input") {
-                  return {
-                    ...field,
-                    type: "input",
-                    settings: {
-                      ...field.settings,
-                      type: "number",
-                    },
-                  };
-                }
-                if (field.type == "string-input") {
-                  return {
-                    ...field,
-                    type: "input",
-                    settings: {
-                      ...field.settings,
-                      type: "string",
-                    },
-                  };
-                }
-                if (field.type == "string-input-password") {
-                  return {
-                    ...field,
-                    type: "input",
-                    settings: {
-                      ...field.settings,
-                      type: "password",
-                    },
-                  };
-                }
-                if (field.type == "provider-select") {
-                  return {
-                    ...field,
-                    type: "select",
-                    settings: {
-                      ...field.settings,
-                      type: "provider",
-                    },
-                  };
-                }
-                if (field.type == "env-key-value-array") {
-                  return {
-                    ...field,
-                    type: "key-value-array",
-                    secretOption: true,
-                    envLoader: true,
-                    settings: {
-                      type: "env",
-                    },
-                  };
-                }
-                return field;
-              }),
+              contents: section.contents
+                .map((field: any) => {
+                  if (field.type == "number-input") {
+                    return {
+                      ...field,
+                      type: "input",
+                      settings: {
+                        ...field.settings,
+                        type: "number",
+                      },
+                    };
+                  }
+                  if (field.type == "string-input") {
+                    return {
+                      ...field,
+                      type: "input",
+                      settings: {
+                        ...field.settings,
+                        type: "string",
+                      },
+                    };
+                  }
+                  if (field.type == "string-input-password") {
+                    return {
+                      ...field,
+                      type: "input",
+                      settings: {
+                        ...field.settings,
+                        type: "password",
+                      },
+                    };
+                  }
+                  if (field.type == "provider-select") {
+                    return {
+                      ...field,
+                      type: "select",
+                      settings: {
+                        ...field.settings,
+                        type: "provider",
+                      },
+                    };
+                  }
+                  if (field.type == "env-key-value-array") {
+                    return {
+                      ...field,
+                      type: "key-value-array",
+                      secretOption: true,
+                      envLoader: true,
+                      fileUpload: true,
+                      settings: {
+                        type: "env",
+                      },
+                    };
+                  }
+                  if (field.type == "variable") return null;
+                  return field;
+                })
+                .filter((x) => x != null),
             };
           }),
         };

dashboard/src/components/form-refactor/field-components/Input.tsx

@@ -79,15 +79,12 @@ export const getFinalVariablesForStringInput: GetFinalVariablesFunction = (
   vars,
   props: InputField
 ) => {
-  if (vars[props.variable])
-    return {
-      [props.variable]:
-        props.settings?.unit && !props.settings?.omitUnitFromValue
-          ? vars[props.variable] + props.settings.unit
-          : vars[props.variable],
-    };
+  const val = vars[props.variable] || props.settings?.default;
   return {
-    [props.variable]: props.settings?.default,
+    [props.variable]:
+      props.settings?.unit && !props.settings?.omitUnitFromValue
+        ? val + props.settings.unit
+        : val,
   };
 };
 

dashboard/src/components/form-refactor/types.ts

@@ -96,9 +96,16 @@ export interface SelectField extends GenericInputField {
   dropdownMaxHeight?: string;
 }
 
+export interface VariableField extends GenericInputField {
+  type: "variable",
+  settings?: {
+    default: any
+  }
+}
+
 export type FormField = HeadingField|SubtitleField|InputField|CheckboxField
   |KeyValueArrayField|ArrayInputField|SelectField|ServiceIPListField|ResourceListField
-  |VeleroBackupField;
+  |VeleroBackupField|VariableField;
 
 export interface ShowIfAnd {
   and: ShowIf[];

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

@@ -158,7 +158,7 @@ export default class FormDebugger extends Component<PropsType, StateType> {
 
         <Heading>🎨 Rendered Form</Heading>
         <Br />
-        {(formData as any).name && (
+        {formData && (formData as any).name && (
           <PorterFormContextProvider
             rawFormData={formData as PorterFormData}
             overrideVariables={{