Use RHF validation mode onTouched instead of all (#1770)

extract common useForm that hard-codes a validation mode

app/forms/disk-attach.tsx

@@ -5,13 +5,11 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useForm } from 'react-hook-form'
-
 import type { ApiError } from '@oxide/api'
 import { useApiQuery } from '@oxide/api'
 
 import { ListboxField, SideModalForm } from 'app/components/form'
-import { useProjectSelector } from 'app/hooks'
+import { useForm, useProjectSelector } from 'app/hooks'
 
 const defaultValues = { name: '' }
 
@@ -44,7 +42,7 @@ export function AttachDiskSideModalForm({
  (d) => d.state.state === 'detached'
  ) || []
 
- const form = useForm({ mode: 'all', defaultValues })
+ const form = useForm({ defaultValues })
 
  return (
  <SideModalForm

app/forms/disk-create.tsx

@@ -7,7 +7,6 @@
  */
 import { format } from 'date-fns'
 import type { Control } from 'react-hook-form'
-import { useForm } from 'react-hook-form'
 import { useController } from 'react-hook-form'
 import type { NavigateFunction } from 'react-router-dom'
 import { useNavigate } from 'react-router-dom'
@@ -27,7 +26,7 @@ import {
  SideModalForm,
  toListboxItem,
 } from 'app/components/form'
-import { useProjectSelector, useToast } from 'app/hooks'
+import { useForm, useProjectSelector, useToast } from 'app/hooks'
 
 const blankDiskSource: DiskSource = {
  type: 'blank',
@@ -75,7 +74,7 @@ export function CreateDiskSideModalForm({
  },
  })
 
- const form = useForm({ mode: 'all', defaultValues })
+ const form = useForm({ defaultValues })
 
  return (
  <SideModalForm

app/forms/firewall-rules-create.tsx

@@ -6,7 +6,6 @@
  * Copyright Oxide Computer Company
  */
 import type { Control } from 'react-hook-form'
-import { useForm } from 'react-hook-form'
 import { useController } from 'react-hook-form'
 
 import {
@@ -33,7 +32,7 @@ import {
  SideModalForm,
  TextField,
 } from 'app/components/form'
-import { useVpcSelector } from 'app/hooks'
+import { useForm, useVpcSelector } from 'app/hooks'
 
 export type FirewallRuleValues = {
  enabled: boolean
@@ -461,7 +460,7 @@ export function CreateFirewallRuleForm({
  },
  })
 
- const form = useForm({ mode: 'all', defaultValues })
+ const form = useForm({ defaultValues })
 
  return (
  <SideModalForm

app/forms/firewall-rules-edit.tsx

@@ -5,13 +5,11 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useForm } from 'react-hook-form'
-
 import type { VpcFirewallRule } from '@oxide/api'
 import { firewallRuleGetToPut, useApiMutation, useApiQueryClient } from '@oxide/api'
 
 import { SideModalForm } from 'app/components/form'
-import { useVpcSelector } from 'app/hooks'
+import { useForm, useVpcSelector } from 'app/hooks'
 
 import { CommonFields, valuesToRuleUpdate } from './firewall-rules-create'
 import type { FirewallRuleValues } from './firewall-rules-create'
@@ -53,7 +51,7 @@ export function EditFirewallRuleForm({
  targets: originalRule.targets,
  }
 
- const form = useForm({ mode: 'all', defaultValues })
+ const form = useForm({ defaultValues })
 
  // TODO: uhhhh how can this happen
  if (Object.keys(originalRule).length === 0) return null

app/forms/idp/create.tsx

@@ -5,14 +5,13 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
 
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 
 import { DescriptionField, NameField, SideModalForm, TextField } from 'app/components/form'
 import { FileField } from 'app/components/form/fields'
-import { useSiloSelector, useToast } from 'app/hooks'
+import { useForm, useSiloSelector, useToast } from 'app/hooks'
 import { readBlobAsBase64 } from 'app/util/file'
 import { pb } from 'app/util/path-builder'
 
@@ -56,7 +55,7 @@ export function CreateIdpSideModalForm() {
  },
  })
 
- const form = useForm({ mode: 'all', defaultValues })
+ const form = useForm({ defaultValues })
 
  return (
  <SideModalForm

app/forms/idp/edit.tsx

@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useForm } from 'react-hook-form'
 import type { LoaderFunctionArgs } from 'react-router-dom'
 import { useNavigate } from 'react-router-dom'
 
@@ -14,7 +13,7 @@ import { Access16Icon, PropertiesTable, ResourceLabel, Truncate } from '@oxide/u
 import { formatDateTime } from '@oxide/util'
 
 import { DescriptionField, NameField, SideModalForm, TextField } from 'app/components/form'
-import { getIdpSelector, useIdpSelector } from 'app/hooks'
+import { getIdpSelector, useForm, useIdpSelector } from 'app/hooks'
 import { pb } from 'app/util/path-builder'
 
 EditIdpSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
@@ -36,7 +35,7 @@ export function EditIdpSideModalForm() {
  const navigate = useNavigate()
  const onDismiss = () => navigate(pb.silo({ silo }))
 
- const form = useForm({ mode: 'all', defaultValues: idp })
+ const form = useForm({ defaultValues: idp })
 
  return (
  <SideModalForm

app/forms/image-edit.tsx

@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useForm } from 'react-hook-form'
 import type { LoaderFunctionArgs } from 'react-router-dom'
 import { useNavigate } from 'react-router-dom'
 
@@ -17,6 +16,7 @@ import { DescriptionField, NameField, SideModalForm, TextField } from 'app/compo
 import {
  getProjectImageSelector,
  getSiloImageSelector,
+ useForm,
  useProjectImageSelector,
  useSiloImageSelector,
 } from 'app/hooks'
@@ -62,7 +62,7 @@ export function EditImageSideModalForm({
  type: 'Project' | 'Silo'
 }) {
  const navigate = useNavigate()
- const form = useForm({ mode: 'all', defaultValues: image })
+ const form = useForm({ defaultValues: image })
 
  return (
  <SideModalForm

app/forms/image-from-snapshot.tsx

@@ -6,7 +6,6 @@
  * Copyright Oxide Computer Company
  */
 import fileSize from 'filesize'
-import { useForm } from 'react-hook-form'
 import type { LoaderFunctionArgs } from 'react-router-dom'
 import { useNavigate } from 'react-router-dom'
 
@@ -20,7 +19,7 @@ import {
 import { PropertiesTable } from '@oxide/ui'
 
 import { DescriptionField, NameField, SideModalForm, TextField } from 'app/components/form'
-import { getProjectSnapshotSelector, useProjectSnapshotSelector } from 'app/hooks'
+import { getProjectSnapshotSelector, useForm, useProjectSnapshotSelector } from 'app/hooks'
 import { addToast } from 'app/stores/toast'
 import { pb } from 'app/util/path-builder'
 
@@ -60,7 +59,6 @@ export function CreateImageFromSnapshotSideModalForm() {
  })
 
  const form = useForm({
- mode: 'all',
  defaultValues: {
  ...defaultValues,
  name: data.name,

app/forms/image-upload.tsx

@@ -10,7 +10,6 @@ import filesize from 'filesize'
 import pMap from 'p-map'
 import pRetry from 'p-retry'
 import { useRef, useState } from 'react'
-import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
 
 import type { ApiError, BlockSize, Disk, Snapshot } from '@oxide/api'
@@ -34,7 +33,7 @@ import {
  TextField,
 } from 'app/components/form'
 import { FileField } from 'app/components/form/fields'
-import { useProjectSelector } from 'app/hooks'
+import { useForm, useProjectSelector } from 'app/hooks'
 import { readBlobAsBase64 } from 'app/util/file'
 import { pb } from 'app/util/path-builder'
 
@@ -462,7 +461,7 @@ export function CreateImageSideModalForm() {
  setAllDone(true)
  }
 
- const form = useForm({ mode: 'all', defaultValues })
+ const form = useForm({ defaultValues })
  const file = form.watch('imageFile')
 
  return (

app/forms/instance-create.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useForm, useWatch } from 'react-hook-form'
+import { useWatch } from 'react-hook-form'
 import type { LoaderFunctionArgs } from 'react-router-dom'
 import { useNavigate } from 'react-router-dom'
 import type { SetRequired } from 'type-fest'
@@ -50,7 +50,7 @@ import {
  RadioFieldDyn,
  TextField,
 } from 'app/components/form'
-import { getProjectSelector, useProjectSelector, useToast } from 'app/hooks'
+import { getProjectSelector, useForm, useProjectSelector, useToast } from 'app/hooks'
 import { pb } from 'app/util/path-builder'
 
 export type InstanceCreateInput = Assign<
@@ -132,7 +132,7 @@ export function CreateInstanceForm() {
  bootDiskSize: Math.ceil(defaultImage?.size / GiB) * 2 || 10,
  }
 
- const form = useForm({ mode: 'all', defaultValues })
+ const form = useForm({ defaultValues })
  const { control, setValue } = form
 
  const imageInput = useWatch({ control: control, name: 'image' })

app/forms/network-interface-create.tsx

@@ -6,7 +6,6 @@
  * Copyright Oxide Computer Company
  */
 import { useMemo } from 'react'
-import { useForm } from 'react-hook-form'
 
 import type { ApiError, InstanceNetworkInterfaceCreate } from '@oxide/api'
 import { useApiQuery } from '@oxide/api'
@@ -20,7 +19,7 @@ import {
  SubnetListbox,
  TextField,
 } from 'app/components/form'
-import { useProjectSelector } from 'app/hooks'
+import { useForm, useProjectSelector } from 'app/hooks'
 
 const defaultValues: InstanceNetworkInterfaceCreate = {
  name: '',
@@ -52,7 +51,7 @@ export default function CreateNetworkInterfaceForm({
  const { data: vpcsData } = useApiQuery('vpcList', { query: projectSelector })
  const vpcs = useMemo(() => vpcsData?.items || [], [vpcsData])
 
- const form = useForm({ mode: 'all', defaultValues })
+ const form = useForm({ defaultValues })
 
  return (
  <SideModalForm

app/forms/network-interface-edit.tsx

@@ -5,14 +5,12 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useForm } from 'react-hook-form'
-
 import type { InstanceNetworkInterface } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import { pick } from '@oxide/util'
 
 import { DescriptionField, NameField, SideModalForm } from 'app/components/form'
-import { useInstanceSelector } from 'app/hooks'
+import { useForm, useInstanceSelector } from 'app/hooks'
 
 type EditNetworkInterfaceFormProps = {
  editing: InstanceNetworkInterface
@@ -35,7 +33,7 @@ export default function EditNetworkInterfaceForm({
 
  const defaultValues = pick(editing, 'name', 'description') // satisfies NetworkInterfaceUpdate
 
- const form = useForm({ mode: 'all', defaultValues })
+ const form = useForm({ defaultValues })
 
  return (
  <SideModalForm

app/forms/project-access.tsx

@@ -5,8 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useForm } from 'react-hook-form'
-
 import {
  updateRole,
  useActorsNotInPolicy,
@@ -15,7 +13,7 @@ import {
 } from '@oxide/api'
 
 import { ListboxField, SideModalForm } from 'app/components/form'
-import { useProjectSelector } from 'app/hooks'
+import { useForm, useProjectSelector } from 'app/hooks'
 
 import type { AddRoleModalProps, EditRoleModalProps } from './access-util'
 import { actorToItem, defaultValues, roleItems } from './access-util'
@@ -33,7 +31,7 @@ export function ProjectAccessAddUserSideModal({ onDismiss, policy }: AddRoleModa
  },
  })
 
- const form = useForm({ mode: 'all', defaultValues })
+ const form = useForm({ defaultValues })
 
  return (
  <SideModalForm
@@ -93,7 +91,7 @@ export function ProjectAccessEditUserSideModal({
  },
  })
 
- const form = useForm({ mode: 'all', defaultValues })
+ const form = useForm({ defaultValues })
 
  return (
  <SideModalForm

app/forms/project-create.tsx

@@ -5,13 +5,13 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
 
 import type { ProjectCreate } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 
 import { DescriptionField, NameField, SideModalForm } from 'app/components/form'
+import { useForm } from 'app/hooks'
 import { addToast } from 'app/stores/toast'
 import { pb } from 'app/util/path-builder'
 
@@ -39,7 +39,7 @@ export function CreateProjectSideModalForm() {
 
  // TODO: RHF docs warn about the performance impact of validating on every
  // change
- const form = useForm({ mode: 'all', defaultValues })
+ const form = useForm({ defaultValues })
 
  return (
  <SideModalForm

app/forms/project-edit.tsx

@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useForm } from 'react-hook-form'
 import type { LoaderFunctionArgs } from 'react-router-dom'
 import { useNavigate } from 'react-router-dom'
 
@@ -17,6 +16,7 @@ import {
 } from '@oxide/api'
 
 import { DescriptionField, NameField, SideModalForm } from 'app/components/form'
+import { useForm } from 'app/hooks'
 import { pb } from 'app/util/path-builder'
 
 import { getProjectSelector, useProjectSelector, useToast } from '../hooks'
@@ -50,7 +50,7 @@ export function EditProjectSideModalForm() {
  },
  })
 
- const form = useForm({ mode: 'all', defaultValues: project })
+ const form = useForm({ defaultValues: project })
 
  return (
  <SideModalForm