Merge branch '0.7.0-form-fix-default-val' of https://github.com/porter-dev/porter into 0.7.0-form-fix-default-val

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

@@ -45,7 +45,7 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
     state: PorterFormState,
     action: PorterFormAction
   ): PorterFormState => {
-    switch (action.type) {
+    switch (action?.type) {
       case "init-field":
         if (!(action.id in state.components)) {
           return {
@@ -125,7 +125,7 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
     data?.tabs?.map((tab) =>
       tab.sections?.map((section) =>
         section.contents?.map((field) => {
-          if (field.type == "variable") {
+          if (field?.type == "variable") {
             ret[field.variable] = field.settings?.default;
           }
         })
@@ -140,11 +140,11 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
       tab.sections?.map((section, j) =>
         section.contents?.map((field, k) => {
           if (
-            field.type == "heading" ||
-            field.type == "subtitle" ||
-            field.type == "resource-list" ||
-            field.type == "service-ip-list" ||
-            field.type == "velero-create-backup"
+            field?.type == "heading" ||
+            field?.type == "subtitle" ||
+            field?.type == "resource-list" ||
+            field?.type == "service-ip-list" ||
+            field?.type == "velero-create-backup"
           )
             return;
           if (
@@ -223,7 +223,7 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
               ...section,
               contents: section.contents
                 ?.map((field: any) => {
-                  if (field.type == "number-input") {
+                  if (field?.type == "number-input") {
                     return {
                       ...field,
                       type: "input",
@@ -233,7 +233,7 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
                       },
                     };
                   }
-                  if (field.type == "string-input") {
+                  if (field?.type == "string-input") {
                     return {
                       ...field,
                       type: "input",
@@ -243,7 +243,7 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
                       },
                     };
                   }
-                  if (field.type == "string-input-password") {
+                  if (field?.type == "string-input-password") {
                     return {
                       ...field,
                       type: "input",
@@ -253,7 +253,7 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
                       },
                     };
                   }
-                  if (field.type == "provider-select") {
+                  if (field?.type == "provider-select") {
                     return {
                       ...field,
                       type: "select",
@@ -263,7 +263,7 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
                       },
                     };
                   }
-                  if (field.type == "env-key-value-array") {
+                  if (field?.type == "env-key-value-array") {
                     return {
                       ...field,
                       type: "key-value-array",
@@ -275,7 +275,7 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
                       },
                     };
                   }
-                  if (field.type == "variable") return null;
+                  if (field?.type == "variable") return null;
                   return field;
                 })
                 .filter((x) => x != null),
@@ -335,11 +335,11 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
       tab.sections?.map((section) =>
         section.contents?.map((field) => {
           if (
-            field.type == "heading" ||
-            field.type == "subtitle" ||
-            field.type == "resource-list" ||
-            field.type == "service-ip-list" ||
-            field.type == "velero-create-backup"
+            field?.type == "heading" ||
+            field?.type == "subtitle" ||
+            field?.type == "resource-list" ||
+            field?.type == "service-ip-list" ||
+            field?.type == "velero-create-backup"
           )
             return;
           // fields that have defaults can't be required since we can always
@@ -398,9 +398,9 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
     data?.tabs?.map((tab) =>
       tab.sections?.map((section) =>
         section.contents?.map((field) => {
-          if (finalFunctions[field.type])
+          if (finalFunctions[field?.type])
             varList.push(
-              finalFunctions[field.type](
+              finalFunctions[field?.type](
                 state.variables,
                 field,
                 state.components[field.id]?.state,

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

@@ -38,7 +38,7 @@ const PorterFormWrapper: React.FunctionComponent<PropsType> = ({
   isLaunch,
 }) => {
   const hashCode = (s: string) => {
-    return s.split("").reduce(function (a, b) {
+    return s?.split("").reduce(function (a, b) {
       a = (a << 5) - a + b.charCodeAt(0);
       return a & a;
     }, 0);

dashboard/src/components/porter-form/field-components/ArrayInput.tsx

@@ -12,7 +12,7 @@ const ArrayInput: React.FC<ArrayInputField> = (props) => {
     props.id,
     {
       initVars: {
-        [props.variable]: props.value ? props.value[0] : [],
+        [props.variable]: props.value && props.value[0] ? props.value[0] : [],
       },
     }
   );
@@ -42,7 +42,7 @@ const ArrayInput: React.FC<ArrayInputField> = (props) => {
   const renderInputList = (values: string[]) => {
     return (
       <>
-        {values.map((value: string, i: number) => {
+        {values?.map((value: string, i: number) => {
           return (
             <InputWrapper>
               <Input
@@ -53,7 +53,7 @@ const ArrayInput: React.FC<ArrayInputField> = (props) => {
                   e.persist();
                   setVars((prev) => {
                     return {
-                      [props.variable]: prev[props.variable].map(
+                      [props.variable]: prev[props.variable]?.map(
                         (t: string, j: number) => {
                           return i == j ? e.target.value : t;
                         }
@@ -103,7 +103,7 @@ export const getFinalVariablesForArrayInput: GetFinalVariablesFunction = (
   return vars[props.variable]
     ? {}
     : {
-        [props.variable]: [],
+        [props.variable]: props.value ? props.value[0] : [],
       };
 };
 

dashboard/src/components/porter-form/field-components/Checkbox.tsx

@@ -59,10 +59,23 @@ export const getFinalVariablesForCheckbox: GetFinalVariablesFunction = (
   vars,
   props: CheckboxField
 ) => {
+  // Read from revision values if unrendered (and therefore not in form state)
+  if (vars[props.variable] === null || vars[props.variable] === undefined) {
+    if (props.value[0] === false) {
+      return { [props.variable]: false };
+    } else if (props.value[0] === true) {
+      return { [props.variable]: true };
+    }
+  }
+
+  // Read from form state if set by user
   if (vars[props.variable] === false) {
     return { [props.variable]: false };
   } else if (vars[props.variable] === true) {
     return { [props.variable]: true };
   }
-  return { [props.variable]: !!props.settings?.default };
+
+  return {
+    [props.variable]: props.value ? props.value[0] : !!props.settings?.default,
+  };
 };

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

@@ -36,7 +36,7 @@ const Input: React.FC<InputField> = ({
   } = useFormField<StringInputFieldState>(id, {
     initValidation: {
       validated: value
-        ? value[0] !== undefined && value[0] !== ""
+        ? value[0] !== undefined && value[0] !== "" && value[0] != null
         : settings?.default != undefined,
     },
     initVars: {
@@ -50,6 +50,8 @@ const Input: React.FC<InputField> = ({
     return <></>;
   }
 
+  console.log(value);
+
   const curValue =
     settings?.type == "number"
       ? !isNaN(parseFloat(variables[variable]))

dashboard/src/components/porter-form/field-components/KeyValueArray.tsx

@@ -348,10 +348,16 @@ export const getFinalVariablesForKeyValueArray: GetFinalVariablesFunction = (
   props: KeyValueArrayField,
   state: KeyValueArrayFieldState
 ) => {
-  if (!state)
+  if (!state) {
     return {
-      [props.variable]: {},
+      [props.variable]:
+        props.value && props.value[0]
+          ? (Object.entries(props.value[0])?.map(([k, v]) => {
+              return { key: k, value: v };
+            }) as any[])
+          : [],
     };
+  }
 
   let obj = {} as any;
   const rg = /(?:^|[^\\])(\\n)/g;

dashboard/src/components/porter-form/field-components/Select.tsx

@@ -73,14 +73,16 @@ export const getFinalVariablesForSelect: GetFinalVariablesFunction = (
   return vars[props.variable]
     ? {}
     : {
-        [props.variable]: props.settings.default
+        [props.variable]: props.value
+          ? props.value[0]
+          : props.settings.default
           ? props.settings.default
           : props.settings.type == "provider"
           ? ({
               gke: "gcp",
               eks: "aws",
               doks: "do",
-            } as Record<string, string>)[context.currentCluster?.service] ||
+            } as Record<string, string>)[context.currentCluster.service] ||
             "aws"
           : props.settings.options[0].value,
       };