fix: use valid default formik form values MAASENG-2099 (#5096)

src/app/base/components/FormikForm/FormikForm.tsx

@@ -4,8 +4,14 @@ import type { FormikConfig } from "formik";
 import FormikFormContent from "app/base/components/FormikFormContent";
 import type { Props as ContentProps } from "app/base/components/FormikFormContent/FormikFormContent";
 
+// explicitly disallow null and undefined as they cause Formik to throw an error
+type InputFieldValue = string | string[] | undefined | number | boolean | {};
+export type FormikFormValues = {
+  [field: string]: InputFieldValue;
+};
+
 export type Props<V extends object, E = null> = ContentProps<V, E> &
-  FormikConfig<V>;
+  FormikConfig<V> & { initialValues: FormikFormValues };
 
 const FormikForm = <V extends object, E = null>({
   allowAllEmpty,

src/app/base/components/FormikForm/index.ts

@@ -1,2 +1,2 @@
 export { default } from "./FormikForm";
-export type { Props as FormikFormProps } from "./FormikForm";
+export type { Props as FormikFormProps, FormikFormValues } from "./FormikForm";

src/app/machines/views/MachineDetails/MachineConfiguration/PowerForm/PowerForm.tsx

@@ -94,7 +94,7 @@ const PowerForm = ({ systemId }: Props): JSX.Element | null => {
             editable={editing}
             errors={errors}
             initialValues={{
-              powerType: machine.power_type,
+              powerType: machine.power_type ?? "",
               powerParameters: initialPowerParameters,
             }}
             onCancel={() => setEditing(false)}

src/app/settings/views/Images/ThirdPartyDriversForm/ThirdPartyDriversForm.tsx

@@ -32,7 +32,7 @@ const ThirdPartyDriversForm = (): JSX.Element => {
       buttonsAlign="left"
       buttonsBordered={false}
       initialValues={{
-        enable_third_party_drivers: thirdPartyDriversEnabled,
+        enable_third_party_drivers: thirdPartyDriversEnabled ?? false,
       }}
       onSaveAnalytics={{
         action: "Saved",

src/app/settings/views/Images/VMWareForm/VMWareForm.tsx

@@ -39,10 +39,10 @@ const VMWareForm = (): JSX.Element => {
       buttonsAlign="left"
       buttonsBordered={false}
       initialValues={{
-        vcenter_server: vCenterServer,
-        vcenter_username: vCenterUsername,
-        vcenter_password: vCenterPassword,
-        vcenter_datacenter: vCenterDatacenter,
+        vcenter_server: vCenterServer ?? "",
+        vcenter_username: vCenterUsername ?? "",
+        vcenter_password: vCenterPassword ?? "",
+        vcenter_datacenter: vCenterDatacenter ?? "",
       }}
       onSaveAnalytics={{
         action: "Saved",

src/app/settings/views/Network/NtpForm/NtpForm.tsx

@@ -44,8 +44,8 @@ const NtpForm = (): JSX.Element => {
             buttonsAlign="left"
             buttonsBordered={false}
             initialValues={{
-              ntp_external_only: ntpExternalOnly,
-              ntp_servers: ntpServers,
+              ntp_external_only: ntpExternalOnly ?? false,
+              ntp_servers: ntpServers ?? "",
             }}
             onSaveAnalytics={{
               action: "Saved",

src/app/subnets/views/VLANDetails/EditVLAN/EditVLAN.tsx

@@ -67,16 +67,15 @@ const EditVLAN = ({ close, id, ...props }: Props): JSX.Element | null => {
       </span>
     );
   }
-  const initialValues: FormValues = {
+  const initialValues = {
     description: vlan.description,
     fabric: vlan.fabric,
     mtu: vlan.mtu,
     name: vlan.name,
     vid: vlan.vid,
+    space: isId(vlan.space) ? vlan.space : undefined,
   };
-  if (isId(vlan.space)) {
-    initialValues.space = vlan.space;
-  }
+
   return (
     <FormikForm<FormValues>
       aria-label="Edit VLAN"