do final variables correctly

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

@@ -11,6 +11,9 @@ import { ShowIf, ShowIfAnd, ShowIfNot, ShowIfOr } from "../../shared/types";
 import { getFinalVariablesForStringInput } from "./field-components/Input";
 import { getFinalVariablesForKeyValueArray } from "./field-components/KeyValueArray";
 import { Context } from "../../shared/Context";
+import { getFinalVariablesForArrayInput } from "./field-components/ArrayInput";
+import { getFinalVariablesForCheckbox } from "./field-components/Checkbox";
+import { getFinalVariablesForSelect } from "./field-components/Select";
 
 interface Props {
   rawFormData: PorterFormData;
@@ -18,6 +21,7 @@ interface Props {
   initialVariables?: PorterFormVariableList;
   overrideVariables?: PorterFormVariableList;
   isReadOnly?: boolean;
+  doDebug?: boolean;
 }
 
 interface ContextProps {
@@ -35,7 +39,7 @@ export const PorterFormContext = createContext<ContextProps | undefined>(
 const { Provider } = PorterFormContext;
 
 export const PorterFormContextProvider: React.FC<Props> = (props) => {
-  const { currentCluster } = useContext(Context);
+  const context = useContext(Context);
 
   const handleAction = (
     state: PorterFormState,
@@ -321,19 +325,23 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
       Object.assign({}, state.variables),
     ];
     const finalFunctions: Record<string, GetFinalVariablesFunction> = {
-      "string-input": getFinalVariablesForStringInput,
+      input: getFinalVariablesForStringInput,
+      "array-input": getFinalVariablesForArrayInput,
+      checkbox: getFinalVariablesForCheckbox,
       "key-value-array": getFinalVariablesForKeyValueArray,
+      select: getFinalVariablesForSelect,
     };
 
     formData.tabs.map((tab) =>
       tab.sections.map((section) =>
         section.contents.map((field) => {
-          if (finalFunctions[field.type] && state.components[field.id])
+          if (finalFunctions[field.type])
             varList.push(
               finalFunctions[field.type](
                 state.variables,
                 field,
-                state.components[field.id].state
+                state.components[field.id]?.state,
+                context
               )
             );
         })
@@ -343,11 +351,13 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
     props.onSubmit(Object.assign.apply({}, varList));
   };
 
-  console.group("Validation Info:");
-  console.log(requiredIds);
-  console.log(varMapping);
-  console.log(isValidated);
-  console.groupEnd();
+  if (props.doDebug) {
+    console.group("Validation Info:");
+    console.log(requiredIds);
+    console.log(varMapping);
+    console.log(isValidated);
+    console.groupEnd();
+  }
 
   return (
     <Provider

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

@@ -1,6 +1,10 @@
 import React from "react";
 import styled from "styled-components";
-import { ArrayInputField, ArrayInputFieldState } from "../types";
+import {
+  ArrayInputField,
+  ArrayInputFieldState,
+  GetFinalVariablesFunction,
+} from "../types";
 import useFormField from "../hooks/useFormField";
 
 const ArrayInput: React.FC<ArrayInputField> = (props) => {
@@ -92,6 +96,17 @@ const ArrayInput: React.FC<ArrayInputField> = (props) => {
 
 export default ArrayInput;
 
+export const getFinalVariablesForArrayInput: GetFinalVariablesFunction = (
+  vars,
+  props: ArrayInputField
+) => {
+  return vars[props.variable]
+    ? {}
+    : {
+        [props.variable]: [],
+      };
+};
+
 const AddRowButton = styled.div`
   display: flex;
   align-items: center;

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

@@ -1,5 +1,10 @@
 import React from "react";
-import { CheckboxField, CheckboxFieldState } from "../types";
+import {
+  ArrayInputField,
+  CheckboxField,
+  CheckboxFieldState,
+  GetFinalVariablesFunction,
+} from "../types";
 import CheckboxRow from "../../values-form/CheckboxRow";
 import useFormField from "../hooks/useFormField";
 
@@ -48,3 +53,14 @@ const Checkbox: React.FC<Props> = ({
 };
 
 export default Checkbox;
+
+export const getFinalVariablesForCheckbox: GetFinalVariablesFunction = (
+  vars,
+  props: CheckboxField
+) => {
+  return vars[props.variable]
+    ? {}
+    : {
+        [props.variable]: !!props.settings?.default,
+      };
+};

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

@@ -286,7 +286,6 @@ const KeyValueArray: React.FC<Props> = (props) => {
             <AddRowButton
               onClick={() => {
                 setState((prev) => {
-                  console.log(prev);
                   return {
                     values: [...prev.values, { key: "", value: "" }],
                   };
@@ -336,6 +335,11 @@ export const getFinalVariablesForKeyValueArray: GetFinalVariablesFunction = (
   props: KeyValueArrayField,
   state: KeyValueArrayFieldState
 ) => {
+  if (!state)
+    return {
+      [props.variable]: {},
+    };
+
   let obj = {} as any;
   const rg = /(?:^|[^\\])(\\n)/g;
   const fixNewlines = (s: string) => {

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

@@ -1,5 +1,10 @@
 import React, { useContext } from "react";
-import { SelectField, SelectFieldState } from "../types";
+import {
+  CheckboxField,
+  GetFinalVariablesFunction,
+  SelectField,
+  SelectFieldState,
+} from "../types";
 import Selector from "../../Selector";
 import styled from "styled-components";
 import useFormField from "../hooks/useFormField";
@@ -7,7 +12,6 @@ import { Context } from "../../../shared/Context";
 
 const Select: React.FC<SelectField> = (props) => {
   const { currentCluster } = useContext(Context);
-  console.log(currentCluster.service);
   const { variables, setVars } = useFormField<SelectFieldState>(props.id, {
     initVars: {
       [props.variable]: props.settings.default
@@ -58,6 +62,28 @@ const Select: React.FC<SelectField> = (props) => {
 
 export default Select;
 
+export const getFinalVariablesForSelect: GetFinalVariablesFunction = (
+  vars,
+  props: SelectField,
+  state,
+  context
+) => {
+  return vars[props.variable]
+    ? {}
+    : {
+        [props.variable]: props.settings.default
+          ? props.settings.default
+          : props.settings.type == "provider"
+          ? ({
+              gke: "gcp",
+              eks: "aws",
+              doks: "do",
+            } as Record<string, string>)[context.currentCluster?.service] ||
+            "aws"
+          : props.settings.options[0].value,
+      };
+};
+
 const SelectWrapper = styled.div``;
 
 const Label = styled.div`

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

@@ -5,6 +5,8 @@
 
 // YAML Field interfaces
 
+import { ContextProps } from "../../shared/types";
+
 export interface GenericField {
   id: string;
 }
@@ -198,4 +200,5 @@ export interface PorterFormMutateVariablesAction {
 
 export type PorterFormAction = PorterFormInitFieldAction|PorterFormUpdateFieldAction|PorterFormMutateVariablesAction|PorterFormUpdateValidationAction;
 
-export type GetFinalVariablesFunction = (vars: PorterFormVariableList, props: FormField, state: PorterFormFieldFieldState) => PorterFormVariableList;
+export type GetFinalVariablesFunction = (vars: PorterFormVariableList, props: FormField,
+                                         state: PorterFormFieldFieldState, context: Partial<ContextProps>) => PorterFormVariableList;