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

Revert all app changes since v6 (e5a1f80)

Author: david-crespo

.eslintrc.json

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

app/components/NoLicense2.tsx

@@ -0,0 +1,11 @@
+/*
+ * 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
+ */
+
+export function NoLicenseHere() {
+  return null
+}

app/components/ThemeIcons.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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
+ */
+
+// TODO: Figure out a better place to put this?
+
+export const LightTheme = () => (
+  <svg
+    width="237"
+    height="137"
+    viewBox="0 0 237 137"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="237" height="137" rx="1" fill="#DBDBDC" />
+    <rect x="60" y="16" width="59" height="6" rx="1" fill="#141A1C" />
+    <rect opacity="0.6" x="60" y="37" width="161" height="12" rx="1" fill="#48D597" />
+    <rect x="108" y="77" width="113" height="12" rx="1" fill="#AEB0B2" />
+    <rect x="108" y="61" width="113" height="12" rx="1" fill="#AEB0B2" />
+    <rect x="108" y="93" width="113" height="12" rx="1" fill="#AEB0B2" />
+    <rect x="60" y="61" width="32" height="32" rx="1" fill="#AEB0B2" />
+    <line x1="45.5" y1="2.18557e-08" x2="45.5" y2="137" stroke="#AEB0B2" />
+  </svg>
+)
+
+export const DarkTheme = () => (
+  <svg
+    width="237"
+    height="137"
+    viewBox="0 0 237 137"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="237" height="137" rx="1" fill="#080F11" />
+    <line x1="45.5" y1="-2.18557e-08" x2="45.5" y2="138" stroke="#1C2325" />
+    <rect x="60" y="16" width="59" height="6" rx="1" fill="#2E8160" />
+    <rect x="60" y="37" width="161" height="12" rx="1" fill="#102422" />
+    <rect x="108" y="77" width="113" height="12" rx="1" fill="#1C2325" />
+    <rect x="108" y="61" width="113" height="12" rx="1" fill="#1C2325" />
+    <rect x="108" y="93" width="113" height="12" rx="1" fill="#1C2325" />
+  </svg>
+)

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

app/forms/image-from-snapshot.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/forms/image-upload.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/instance-create.tsx

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

app/forms/ip-pool-range-add.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 { validateIp } from '@oxide/util'
+import { IPV4_REGEX, IPV6_REGEX } from '@oxide/util'
 
 import { SideModalForm, TextField } from 'app/components/form'
 import { useForm, useIpPoolSelector } from 'app/hooks'
@@ -21,6 +21,12 @@ 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/pages/project/access/ProjectAccessPage.tsx

@@ -96,9 +96,8 @@ 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/pages/project/instances/instance/InstancePage.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'