Revert "Revert all app changes since v6 except two small fixes (#1958)"

This reverts commit 1f8ebf2.

Author: david-crespo

.eslintrc.json

@@ -66,7 +66,7 @@
       "rules": {
         "playwright/expect-expect": [
           "warn",
-          { "additionalAssertFunctionNames": ["expectVisible", "expectRowVisible"] }
+          { "assertFunctionNames": ["expectVisible", "expectRowVisible"] }
         ]
       }
     }

app/components/NoLicense2.tsx

@@ -7,7 +7,7 @@
  */
 import { cloneElement, useEffect, type ReactElement, type ReactNode } from 'react'
 import type { FieldValues, UseFormReturn } from 'react-hook-form'
-import { useBlocker, type unstable_Blocker as Blocker } from 'react-router-dom'
+import { useBlocker, type Blocker } from 'react-router-dom'
 
 import type { ApiError } from '@oxide/api'
 import { Modal, PageHeader, PageTitle } from '@oxide/ui'
@@ -25,7 +25,11 @@ interface FullPageFormProps<TFieldValues extends FieldValues> {
   error?: Error
   form: UseFormReturn<TFieldValues>
   loading?: boolean
-  onSubmit: (values: TFieldValues) => void
+  /**
+   * Use await mutateAsync(), otherwise you'll break the logic below that relies
+   * on knowing when the submit is done.
+   */
+  onSubmit: (values: TFieldValues) => Promise<void>
   /** Error from the API call */
   submitError: ApiError | null
   /**
@@ -53,22 +57,25 @@ export function FullPageForm<TFieldValues extends FieldValues>({
   onSubmit,
   submitError,
 }: FullPageFormProps<TFieldValues>) {
-  const { isSubmitting, isDirty } = form.formState
+  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)
+  // 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)
 
-  // Reset blocker if form is no longer dirty
+  // 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' && !isDirty) {
-      blocker.reset()
+    if (blocker.state === 'blocked' && isSubmitSuccessful) {
+      blocker.proceed()
     }
-  }, [blocker, isDirty])
+  }, [blocker, isSubmitSuccessful])
 
   const childArray = flattenChildren(children)
   const actions = pluckFirstOfType(childArray, Form.Actions)
@@ -81,24 +88,27 @@ export function FullPageForm<TFieldValues extends FieldValues>({
       <form
         className="ox-form pb-20"
         id={id}
-        onSubmit={(e) => {
+        onSubmit={async (e) => {
           // 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()
-          // This resets `isDirty` whilst keeping the values meaning
-          // we are not prevented from navigating away by the blocker
-          form.reset({} as TFieldValues, { keepValues: true })
-          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)
         }}
         autoComplete="off"
       >
         {childArray}
       </form>
 
-      {blocker ? <ConfirmNavigation blocker={blocker} /> : null}
+      {/* 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>

app/components/ThemeIcons.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import fileSize from 'filesize'
+import { filesize } from 'filesize'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
@@ -83,7 +83,7 @@ export function CreateImageFromSnapshotSideModalForm() {
         <PropertiesTable.Row label="Snapshot">{data.name}</PropertiesTable.Row>
         <PropertiesTable.Row label="Project">{project}</PropertiesTable.Row>
         <PropertiesTable.Row label="Size">
-          {fileSize(data.size, { base: 2 })}
+          {filesize(data.size, { base: 2 })}
         </PropertiesTable.Row>
       </PropertiesTable>
 

app/components/form/FullPageForm.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
-import filesize from 'filesize'
+import { filesize } from 'filesize'
 import pMap from 'p-map'
 import pRetry from 'p-retry'
 import { useRef, useState } from 'react'

app/forms/image-from-snapshot.tsx

@@ -188,7 +188,7 @@ export function CreateInstanceForm() {
           ? await readBlobAsBase64(values.userData)
           : undefined
 
-        createInstance.mutate({
+        await createInstance.mutateAsync({
           query: projectSelector,
           body: {
             name: values.name,

app/forms/image-upload.tsx

@@ -9,7 +9,7 @@ import { useNavigate } from 'react-router-dom'
 
 import { useApiMutation, useApiQueryClient, type IpRange } from '@oxide/api'
 import { Message } from '@oxide/ui'
-import { IPV4_REGEX, IPV6_REGEX } from '@oxide/util'
+import { validateIp } from '@oxide/util'
 
 import { SideModalForm, TextField } from 'app/components/form'
 import { useForm, useIpPoolSelector } from 'app/hooks'
@@ -21,12 +21,6 @@ const defaultValues: IpRange = {
   last: '',
 }
 
-function validateIp(s: string) {
-  const isv4 = IPV4_REGEX.test(s)
-  const isv6 = !isv4 && IPV6_REGEX.test(s)
-  return { isv4, isv6, valid: isv4 || isv6 }
-}
-
 const invalidAddressError = { type: 'pattern', message: 'Not a valid IP address' }
 
 const diffVersionError = {

app/forms/instance-create.tsx

@@ -96,8 +96,9 @@ export function ProjectAccessPage() {
     return groupBy(siloRows.concat(projectRows), (u) => u.id)
       .map(([userId, userAssignments]) => {
         const siloRole = userAssignments.find((a) => a.roleSource === 'silo')?.roleName
-        const projectRole = userAssignments.find((a) => a.roleSource === 'project')
-          ?.roleName
+        const projectRole = userAssignments.find(
+          (a) => a.roleSource === 'project'
+        )?.roleName
 
         const roles = [siloRole, projectRole].filter(isTruthy)
 

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

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { format } from 'date-fns'
-import filesize from 'filesize'
+import { filesize } from 'filesize'
 import { useMemo } from 'react'
 import { Link, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'