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

Revert all app changes since v6 (e5a1f80)

.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'
 

app/pages/system/inventory/sled/SledPage.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { filesize } from 'filesize'
+import fileSize from 'filesize'
 import type { LoaderFunctionArgs } from 'react-router-dom'
 
 import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
@@ -27,7 +27,7 @@ export function SledPage() {
   const { sledId } = useSledParams()
   const { data: sled } = usePrefetchedApiQuery('sledView', { path: { sledId } })
 
-  const ram = filesize(sled.usablePhysicalRam, { output: 'object', base: 2 })
+  const ram = fileSize(sled.usablePhysicalRam, { output: 'object', base: 2 })
 
   return (
     <>

app/util/date.ts

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { formatDistanceToNowStrict, type FormatDistanceToNowStrictOptions } from 'date-fns'
+import { formatDistanceToNowStrict } from 'date-fns'
 
 // locale setup and formatDistance function copied from here and modified
 // https://github.com/date-fns/date-fns/blob/56a3856/src/locale/en-US/_lib/formatDistance/index.js
@@ -29,16 +29,21 @@ const formatDistanceLocale = {
   almostXYears: '~ {{count}}y',
 }
 
-export const timeAgoAbbr = (d: Date, options?: FormatDistanceToNowStrictOptions) =>
-  formatDistanceToNowStrict(d, {
-    ...options,
-    locale: {
-      formatDistance: (token, count, options) => {
-        const result = formatDistanceLocale[token]?.replace('{{count}}', count.toString())
-        if (result && options?.addSuffix) {
-          return result + ' ago'
-        }
-        return result
-      },
-    },
-  })
+interface Options {
+  addSuffix: boolean
+}
+
+function formatDistance(
+  token: keyof typeof formatDistanceLocale,
+  count: string,
+  options: Options
+) {
+  const result = formatDistanceLocale[token]?.replace('{{count}}', count)
+  if (result && options.addSuffix) {
+    return result + ' ago'
+  }
+  return result
+}
+
+export const timeAgoAbbr = (d: Date, options: Options = { addSuffix: false }) =>
+  formatDistanceToNowStrict(d, { ...options, locale: { formatDistance } })

libs/api-mocks/msw/handlers.ts

@@ -289,7 +289,7 @@ export const handlers = makeHandlers({
     const instances = db.instances.filter((i) => i.project_id === project.id)
     return paginated(query, instances)
   },
-  async instanceCreate({ body, query }) {
+  instanceCreate({ body, query }) {
     const project = lookup.project(query)
 
     if (body.name === 'no-default-pool') {

libs/api/hooks.ts

@@ -29,12 +29,11 @@ import { navToLogin } from './nav-to-login'
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export type Params<F> = F extends (p: infer P) => any ? P : never
 export type Result<F> = F extends (p: any) => Promise<ApiResult<infer R>> ? R : never
-export type ResultItem<F> =
-  Result<F> extends { items: (infer R)[] }
-    ? R extends Record<string, unknown>
-      ? R
-      : never
+export type ResultItem<F> = Result<F> extends { items: (infer R)[] }
+  ? R extends Record<string, unknown>
+    ? R
     : never
+  : never
 
 type ApiClient = Record<string, (...args: any) => Promise<ApiResult<any>>>
 /* eslint-enable @typescript-eslint/no-explicit-any */

libs/table/cells/InstanceResourceCell.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { filesize } from 'filesize'
+import fileSize from 'filesize'
 
 import type { Instance } from '@oxide/api'
 
@@ -14,7 +14,7 @@ import type { Cell } from './Cell'
 export const InstanceResourceCell = ({
   value,
 }: Cell<Pick<Instance, 'ncpus' | 'memory'>>) => {
-  const memory = filesize(value.memory, { output: 'object', base: 2 })
+  const memory = fileSize(value.memory, { output: 'object', base: 2 })
   return (
     <div className="space-y-0.5">
       <div>

libs/table/cells/SizeCell.tsx

@@ -5,13 +5,13 @@
  *
  * Copyright Oxide Computer Company
  */
-import { filesize } from 'filesize'
+import fileSize from 'filesize'
 
 import type { Cell } from './Cell'
 
 /** Human-readable format for size in bytes */
 export const SizeCell = ({ value: bytes }: Cell<number>) => {
-  const size = filesize(bytes, { base: 2, output: 'object' })
+  const size = fileSize(bytes, { base: 2, output: 'object' })
   return (
     <span className="text-secondary">
       {size.value} <span className="text-quaternary">{size.unit}</span>

libs/ui/index.ts

@@ -14,6 +14,7 @@ export { useInterval, useTimeout }
 
 export * from './lib/action-menu/ActionMenu'
 export * from './lib/auth-code/AuthCodeInput'
+export * from './lib/avatar/Avatar'
 export * from './lib/badge/Badge'
 export * from './lib/button/Button'
 export * from './lib/checkbox/Checkbox'

libs/ui/lib/avatar-stack/AvatarStack.stories.tsx

@@ -0,0 +1,22 @@
+/*
+ * 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 { AvatarStack } from './AvatarStack'
+
+const AVATAR_DATA = [
+  { name: 'Haley Clark', round: true },
+  { name: 'Cameron Howe', round: true },
+  { name: 'Gordon Clark', round: true },
+]
+
+export const Default = () => <AvatarStack data={AVATAR_DATA} />
+
+export const Selected = () => (
+  <div className="is-selected -m-4 p-4 bg-accent-secondary">
+    <AvatarStack data={AVATAR_DATA} />
+  </div>
+)