Add form navigation guard to prevent accidental form content loss

.eslintrc.cjs

@@ -113,6 +113,7 @@ module.exports = {
           'warn',
           { assertFunctionNames: ['expectVisible', 'expectRowVisible'] },
         ],
+        'playwright/no-force-option': 'off',
       },
     },
   ],

app/components/form/FormNavGuard.tsx

@@ -0,0 +1,56 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { useEffect } from 'react'
+import { type FieldValues, type UseFormReturn } from 'react-hook-form'
+import { useBlocker } from 'react-router-dom'
+
+import { Modal } from '~/ui/lib/Modal'
+
+export function FormNavGuard<TFieldValues extends FieldValues>({
+  form,
+}: {
+  form: UseFormReturn<TFieldValues>
+}) {
+  const { isDirty, isSubmitting, isSubmitSuccessful } = form.formState
+  // Confirms with the user if they want to navigate away if the form is
+  // dirty. Does not intercept everything e.g. refreshes or closing the tab
+  // but serves to reduce the possibility of a user accidentally losing their
+  // progress.
+  const blocker = useBlocker(isDirty && !isSubmitSuccessful)
+
+  // Gating on !isSubmitSuccessful above makes the blocker stop blocking nav
+  // after a successful submit. However, this can take a little time (there is a
+  // render in between when isSubmitSuccessful is true but the blocker is still
+  // ready to block), so we also have this useEffect that lets blocked requests
+  // through if submit is succesful but the blocker hasn't gotten a chance to
+  // stop blocking yet.
+  useEffect(() => {
+    if (blocker.state === 'blocked' && isSubmitSuccessful) {
+      blocker.proceed()
+    }
+  }, [blocker, isSubmitSuccessful])
+
+  return isSubmitting || isSubmitSuccessful ? null : (
+    <Modal
+      isOpen={blocker.state === 'blocked'}
+      onDismiss={() => blocker.reset?.()}
+      title="Confirm navigation"
+    >
+      <Modal.Section>
+        Are you sure you want to leave this form? Your progress will be lost.
+      </Modal.Section>
+      <Modal.Footer
+        onDismiss={() => blocker.reset?.()}
+        onAction={() => blocker.proceed?.()}
+        cancelText="Keep editing"
+        actionText="Leave form"
+        actionType="danger"
+      />
+    </Modal>
+  )
+}

app/components/form/FullPageForm.tsx

@@ -5,13 +5,12 @@
  *
  * Copyright Oxide Computer Company
  */
-import { cloneElement, useEffect, type ReactNode } from 'react'
+import { cloneElement, type ReactNode } from 'react'
 import type { FieldValues, UseFormReturn } from 'react-hook-form'
-import { useBlocker, type Blocker } from 'react-router-dom'
 
 import type { ApiError } from '@oxide/api'
 
-import { Modal } from '~/ui/lib/Modal'
+import { FormNavGuard } from '~/components/form/FormNavGuard'
 import { flattenChildren, pluckFirstOfType } from '~/util/children'
 import { classed } from '~/util/classed'
 
@@ -55,26 +54,7 @@ export function FullPageForm<TFieldValues extends FieldValues>({
   onSubmit,
   submitError,
 }: FullPageFormProps<TFieldValues>) {
-  const { isSubmitting, isDirty, isSubmitSuccessful } = form.formState
-
-  // Confirms with the user if they want to navigate away if the form is
-  // dirty. Does not intercept everything e.g. refreshes or closing the tab
-  // but serves to reduce the possibility of a user accidentally losing their
-  // progress.
-  const blocker = useBlocker(isDirty && !isSubmitSuccessful)
-
-  // Gating on !isSubmitSuccessful above makes the blocker stop blocking nav
-  // after a successful submit. However, this can take a little time (there is a
-  // render in between when isSubmitSuccessful is true but the blocker is still
-  // ready to block), so we also have this useEffect that lets blocked requests
-  // through if submit is succesful but the blocker hasn't gotten a chance to
-  // stop blocking yet.
-  useEffect(() => {
-    if (blocker.state === 'blocked' && isSubmitSuccessful) {
-      blocker.proceed()
-    }
-  }, [blocker, isSubmitSuccessful])
-
+  const { isSubmitting } = form.formState
   const childArray = flattenChildren(children)
   const actions = pluckFirstOfType(childArray, Form.Actions)
 
@@ -98,13 +78,9 @@ export function FullPageForm<TFieldValues extends FieldValues>({
         autoComplete="off"
       >
         {childArray}
+        <FormNavGuard form={form} />
       </form>
 
-      {/* rendering of the modal must be gated on isSubmitSuccessful because
-          there is a brief moment where isSubmitSuccessful is true but the proceed() 
-          hasn't fired yet, which means we get a brief flash of this modal */}
-      {!isSubmitSuccessful && <ConfirmNavigation blocker={blocker} />}
-
       {actions && (
         <PageActions>
           <PageActionsContainer>
@@ -120,23 +96,3 @@ export function FullPageForm<TFieldValues extends FieldValues>({
     </>
   )
 }
-
-const ConfirmNavigation = ({ blocker }: { blocker: Blocker }) => (
-  <Modal
-    isOpen={blocker.state === 'blocked'}
-    onDismiss={() => blocker.reset?.()}
-    title="Confirm navigation"
-  >
-    <Modal.Section>
-      Are you sure you want to leave this page? <br /> You will lose all progress on this
-      form.
-    </Modal.Section>
-    <Modal.Footer
-      onDismiss={() => blocker.reset?.()}
-      onAction={() => blocker.proceed?.()}
-      cancelText="Continue editing"
-      actionText="Leave this page"
-      actionType="danger"
-    />
-  </Modal>
-)

app/components/form/SideModalForm.tsx

@@ -11,6 +11,7 @@ import { NavigationType, useNavigationType } from 'react-router-dom'
 
 import type { ApiError } from '@oxide/api'
 
+import { FormNavGuard } from '~/components/form/FormNavGuard'
 import { Button } from '~/ui/lib/Button'
 import { SideModal } from '~/ui/lib/SideModal'
 
@@ -47,7 +48,7 @@ type SideModalFormProps<TFieldValues extends FieldValues> = {
   /** Only needed if you need to override the default title (Create/Edit ${resourceName}) */
   title?: string
   subtitle?: ReactNode
-  onSubmit?: (values: TFieldValues) => void
+  onSubmit?: (values: TFieldValues) => Promise<void>
 } & (CreateFormProps | EditFormProps)
 
 /**
@@ -103,18 +104,22 @@ export function SideModalForm<TFieldValues extends FieldValues>({
           id={id}
           className="ox-form is-side-modal"
           autoComplete="off"
-          onSubmit={(e) => {
+          onSubmit={async (e) => {
             if (!onSubmit) return
             // This modal being in a portal doesn't prevent the submit event
             // from bubbling up out of the portal. Normally that's not a
             // problem, but sometimes (e.g., instance create) we render the
             // SideModalForm from inside another form, in which case submitting
             // the inner form submits the outer form unless we stop propagation
             e.stopPropagation()
-            form.handleSubmit(onSubmit)(e)
+            // Important to await here so isSubmitSuccessful doesn't become true
+            // until the submit is actually successful. Note you must use await
+            // mutateAsync() inside onSubmit in order to make this wait
+            await form.handleSubmit(onSubmit)(e)
           }}
         >
           {children}
+          <FormNavGuard form={form} />
         </form>
       </SideModal.Body>
       <SideModal.Footer error={!!submitError}>

app/components/form/fields/DisksTableField.tsx

@@ -116,6 +116,7 @@ export function DisksTableField({
           onSubmit={(values) => {
             onChange([...items, { type: 'attach', ...values }])
             setShowDiskAttach(false)
+            return Promise.resolve()
           }}
           diskNamesToExclude={items.filter((i) => i.type === 'attach').map((i) => i.name)}
         />

app/components/form/fields/NetworkInterfaceField.tsx

@@ -116,6 +116,7 @@ export function NetworkInterfaceField({
                     params: [...value.params, networkInterface],
                   })
                   setShowForm(false)
+                  return Promise.resolve()
                 }}
                 onDismiss={() => setShowForm(false)}
               />

app/forms/disk-attach.tsx

@@ -15,7 +15,7 @@ const defaultValues = { name: '' }
 
 type AttachDiskProps = {
   /** If defined, this overrides the usual mutation */
-  onSubmit: (diskAttach: { name: string }) => void
+  onSubmit: (diskAttach: { name: string }) => Promise<void>
   onDismiss: () => void
   diskNamesToExclude?: string[]
   loading?: boolean

app/forms/disk-create.tsx

@@ -120,9 +120,11 @@ export function CreateDiskSideModalForm({
       formType="create"
       resourceName="disk"
       onDismiss={() => onDismiss(navigate)}
-      onSubmit={({ size, ...rest }) => {
+      onSubmit={async ({ size, ...rest }) => {
         const body = { size: size * GiB, ...rest }
-        onSubmit ? onSubmit(body) : createDisk.mutate({ query: { project }, body })
+        onSubmit
+          ? onSubmit(body)
+          : await createDisk.mutateAsync({ query: { project }, body })
       }}
       loading={createDisk.isPending}
       submitError={createDisk.error}

app/forms/firewall-rules-create.tsx

@@ -617,13 +617,13 @@ export function CreateFirewallRuleForm() {
       resourceName="rule"
       title="Add firewall rule"
       onDismiss={onDismiss}
-      onSubmit={(values) => {
+      onSubmit={async (values) => {
         // TODO: this silently overwrites existing rules with the current name.
         // we should probably at least warn and confirm, if not reject as invalid
         const otherRules = existingRules
           .filter((r) => r.name !== values.name)
           .map(firewallRuleGetToPut)
-        updateRules.mutate({
+        await updateRules.mutateAsync({
           query: vpcSelector,
           body: {
             rules: [...otherRules, valuesToRuleUpdate(values)],

app/forms/firewall-rules-edit.tsx

@@ -96,14 +96,14 @@ export function EditFirewallRuleForm() {
       formType="edit"
       resourceName="rule"
       onDismiss={onDismiss}
-      onSubmit={(values) => {
+      onSubmit={async (values) => {
         // note different filter logic from create: filter out the rule with the
         // *original* name because we need to overwrite that rule
         const otherRules = data.rules
           .filter((r) => r.name !== originalRule.name)
           .map(firewallRuleGetToPut)
 
-        updateRules.mutate({
+        await updateRules.mutateAsync({
           query: vpcSelector,
           body: {
             rules: [...otherRules, valuesToRuleUpdate(values)],

app/forms/floating-ip-create.tsx

@@ -83,7 +83,9 @@ export function CreateFloatingIpSideModalForm() {
       formType="create"
       resourceName="floating IP"
       onDismiss={() => navigate(pb.floatingIps(projectSelector))}
-      onSubmit={(body) => createFloatingIp.mutate({ query: projectSelector, body })}
+      onSubmit={async (body) => {
+        await createFloatingIp.mutateAsync({ query: projectSelector, body })
+      }}
       loading={createFloatingIp.isPending}
       submitError={createFloatingIp.error}
     >

app/forms/floating-ip-edit.tsx

@@ -59,8 +59,8 @@ export function EditFloatingIpSideModalForm() {
       formType="edit"
       resourceName="floating IP"
       onDismiss={onDismiss}
-      onSubmit={({ name, description }) => {
-        editFloatingIp.mutate({
+      onSubmit={async ({ name, description }) => {
+        await editFloatingIp.mutateAsync({
           path: { floatingIp: floatingIpSelector.floatingIp },
           query: { project: floatingIpSelector.project },
           body: { name, description },

app/forms/image-from-snapshot.tsx

@@ -75,12 +75,12 @@ export function CreateImageFromSnapshotSideModalForm() {
       title="Create image from snapshot"
       submitLabel="Create image"
       onDismiss={onDismiss}
-      onSubmit={(body) =>
-        createImage.mutate({
+      onSubmit={async (body) => {
+        await createImage.mutateAsync({
           query: { project },
           body: { ...body, source: { type: 'snapshot', id: data.id } },
         })
-      }
+      }}
       submitError={createImage.error}
     >
       <PropertiesTable>

app/forms/ip-pool-create.tsx

@@ -43,8 +43,8 @@ export function CreateIpPoolSideModalForm() {
       formType="create"
       resourceName="IP pool"
       onDismiss={onDismiss}
-      onSubmit={({ name, description }) => {
-        createPool.mutate({ body: { name, description } })
+      onSubmit={async ({ name, description }) => {
+        await createPool.mutateAsync({ body: { name, description } })
       }}
       loading={createPool.isPending}
       submitError={createPool.error}

app/forms/ip-pool-edit.tsx

@@ -53,8 +53,8 @@ export function EditIpPoolSideModalForm() {
       formType="edit"
       resourceName="IP pool"
       onDismiss={onDismiss}
-      onSubmit={({ name, description }) => {
-        editPool.mutate({ path: poolSelector, body: { name, description } })
+      onSubmit={async ({ name, description }) => {
+        await editPool.mutateAsync({ path: poolSelector, body: { name, description } })
       }}
       loading={editPool.isPending}
       submitError={editPool.error}

app/forms/ip-pool-range-add.tsx

@@ -87,7 +87,9 @@ export function IpPoolAddRangeSideModalForm() {
       resourceName="IP range"
       title="Add IP range"
       onDismiss={onDismiss}
-      onSubmit={(body) => addRange.mutate({ path: { pool }, body })}
+      onSubmit={async (body) => {
+        await addRange.mutateAsync({ path: { pool }, body })
+      }}
       loading={addRange.isPending}
       submitError={addRange.error}
     >

app/forms/network-interface-create.tsx

@@ -28,7 +28,7 @@ const defaultValues: InstanceNetworkInterfaceCreate = {
 
 type CreateNetworkInterfaceFormProps = {
   onDismiss: () => void
-  onSubmit: (values: InstanceNetworkInterfaceCreate) => void
+  onSubmit: (values: InstanceNetworkInterfaceCreate) => Promise<void>
   loading?: boolean
   submitError?: ApiError | null
 }

app/forms/network-interface-edit.tsx

@@ -51,9 +51,9 @@ export function EditNetworkInterfaceForm({
       formType="edit"
       resourceName="network interface"
       onDismiss={onDismiss}
-      onSubmit={(body) => {
+      onSubmit={async (body) => {
         const interfaceName = defaultValues.name
-        editNetworkInterface.mutate({
+        await editNetworkInterface.mutateAsync({
           path: { interface: interfaceName },
           query: instanceSelector,
           body,

app/forms/project-access.tsx

@@ -45,15 +45,15 @@ export function ProjectAccessAddUserSideModal({ onDismiss, policy }: AddRoleModa
       resourceName="role"
       form={form}
       formType="create"
-      onSubmit={({ identityId, roleName }) => {
+      onSubmit={async ({ identityId, roleName }) => {
         // can't happen because roleName is validated not to be '', but TS
         // wants to be sure
         if (roleName === '') return
 
         // actor is guaranteed to be in the list because it came from there
         const identityType = actors.find((a) => a.id === identityId)!.identityType
 
-        updatePolicy.mutate({
+        await updatePolicy.mutateAsync({
           path: { project },
           body: updateRole({ identityId, identityType, roleName }, policy),
         })
@@ -108,8 +108,8 @@ export function ProjectAccessEditUserSideModal({
       formType="edit"
       resourceName="role"
       title={`Change project role for ${name}`}
-      onSubmit={({ roleName }) => {
-        updatePolicy.mutate({
+      onSubmit={async ({ roleName }) => {
+        await updatePolicy.mutateAsync({
           path: { project },
           body: updateRole({ identityId, identityType, roleName }, policy),
         })

app/forms/project-create.tsx

@@ -46,8 +46,8 @@ export function CreateProjectSideModalForm() {
       formType="create"
       resourceName="project"
       onDismiss={onDismiss}
-      onSubmit={({ name, description }) => {
-        createProject.mutate({ body: { name, description } })
+      onSubmit={async ({ name, description }) => {
+        await createProject.mutateAsync({ body: { name, description } })
       }}
       loading={createProject.isPending}
       submitError={createProject.error}