typescript-eslint v6 + prettier 3.0

.eslintrc.json

@@ -6,9 +6,10 @@
   },
   "extends": [
     "eslint:recommended",
+    "plugin:@typescript-eslint/strict",
+    "plugin:@typescript-eslint/stylistic",
     "plugin:jsx-a11y/recommended",
     "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
     "prettier",
     "plugin:react-hook-form/recommended"
   ],
@@ -28,6 +29,8 @@
     "node": true
   },
   "rules": {
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
     "@typescript-eslint/consistent-type-imports": ["error", { "prefer": "type-imports" }],
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-empty-interface": "off",

.prettierrc.js

@@ -6,33 +6,13 @@
  * Copyright Oxide Computer Company
  */
 
-const twPlugin = require('prettier-plugin-tailwindcss')
-const importsPlugin = require('@trivago/prettier-plugin-sort-imports')
-
-// The Tailwind plugin and the imports plugin can't both be used at the same
-// time because they both rely on the same underlying mechanism, which can only
-// take one plugin. So we manually combine them into a single plugin and use
-// that. Approach recommended here:
-// https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/31#issuecomment-1195411734
-
-/** @type {import("prettier").Parser}  */
-const combinedParser = {
-  ...importsPlugin.parsers.typescript,
-  parse: twPlugin.parsers.typescript.parse,
-}
-
-/** @type {import("prettier").Plugin}  */
-const combinedPlugin = {
-  parsers: {
-    typescript: combinedParser,
-  },
-}
-
 module.exports = {
-  plugins: [combinedPlugin],
+  // note: it seems like tailwind has to be last for it to work
+  plugins: ['@trivago/prettier-plugin-sort-imports', 'prettier-plugin-tailwindcss'],
   printWidth: 92,
   singleQuote: true,
   semi: false,
+  trailingComma: 'es5', // default changed to all in prettier 3, wanted to minimize diff
   importOrder: ['<THIRD_PARTY_MODULES>', '^@oxide/(.*)$', '^app/(.*)$', '^[./]'],
   importOrderGroupNamespaceSpecifiers: true,
   importOrderSeparation: true,

app/components/AccessNameCell.tsx

@@ -14,7 +14,7 @@ import { Badge } from '@oxide/ui'
  * Display the user or group name. If the row is for a group, add a GROUP badge.
  */
 export const AccessNameCell = <
-  RowData extends { name: string; identityType: IdentityType }
+  RowData extends { name: string; identityType: IdentityType },
 >(
   info: CellContext<RowData, string>
 ) => {

app/components/RoundedSector.tsx

@@ -202,26 +202,26 @@ function getPath(angle: number, thickness: number, size: number, cornerRadius: n
       ${+(Math.abs(newOuterAngle) > 180)},0,
       ${outerLineEndCornerXY1.x},${outerLineEndCornerXY1.y}
       C ${outerLineEndCornerXY1.x} ${outerLineEndCornerXY1.y} ${
-    outerLineEndCornerBezier.x
-  } ${outerLineEndCornerBezier.y}  ${outerLineEndCornerXY2.x} ${outerLineEndCornerXY2.y}
+        outerLineEndCornerBezier.x
+      } ${outerLineEndCornerBezier.y}  ${outerLineEndCornerXY2.x} ${outerLineEndCornerXY2.y}
       L ${innerLineStartCornerXY1.x} ${innerLineStartCornerXY1.y}
       C ${innerLineStartCornerXY1.x} ${innerLineStartCornerXY1.y} ${
-    innerLineStartCornerBezier.x
-  } ${innerLineStartCornerBezier.y}  ${innerLineStartCornerXY2.x} ${
-    innerLineStartCornerXY2.y
-  }
+        innerLineStartCornerBezier.x
+      } ${innerLineStartCornerBezier.y}  ${innerLineStartCornerXY2.x} ${
+        innerLineStartCornerXY2.y
+      }
     A ${innerRadius},${innerRadius},0,
     ${+(Math.abs(newInnerAngle) > 180)},1,
     ${innerLineEndCornerXY1.x},${innerLineEndCornerXY1.y}
     C ${innerLineEndCornerXY1.x} ${innerLineEndCornerXY1.y} ${innerLineEndCornerBezier.x} ${
-    innerLineEndCornerBezier.y
-  }  ${innerLineEndCornerXY2.x} ${innerLineEndCornerXY2.y}
+      innerLineEndCornerBezier.y
+    }  ${innerLineEndCornerXY2.x} ${innerLineEndCornerXY2.y}
     L ${outerLinerStartCornerXY1.x} ${outerLinerStartCornerXY1.y}
     C ${outerLinerStartCornerXY1.x} ${outerLinerStartCornerXY1.y} ${
-    outerLineStartCornerBezier.x
-  } ${outerLineStartCornerBezier.y}  ${outerLineStartCornerXY2.x} ${
-    outerLineStartCornerXY2.y
-  }
+      outerLineStartCornerBezier.x
+    } ${outerLineStartCornerBezier.y}  ${outerLineStartCornerXY2.x} ${
+      outerLineStartCornerXY2.y
+    }
     `
 }
 

app/components/form/fields/CheckboxField.tsx

@@ -13,15 +13,15 @@ import { Checkbox } from '@oxide/ui'
 
 type CheckboxFieldProps<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 > = Omit<CheckboxProps, 'name'> & {
   name: TName
   control: Control<TFieldValues>
 }
 
 export const CheckboxField = <
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 >({
   control,
   name,

app/components/form/fields/DescriptionField.tsx

@@ -15,7 +15,7 @@ const MAX_LEN = 512
 
 export function DescriptionField<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 >(props: Omit<TextFieldProps<TFieldValues, TName>, 'validate'>) {
   return <TextField as="textarea" validate={validateDescription} {...props} />
 }

app/components/form/fields/DiskSizeField.tsx

@@ -14,14 +14,14 @@ import type { TextFieldProps } from './TextField'
 
 interface DiskSizeProps<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 > extends TextFieldProps<TFieldValues, TName> {
   minSize?: number
 }
 
 export function DiskSizeField<
   TFieldValues extends FieldValues,
-  TName extends FieldPathByValue<TFieldValues, number>
+  TName extends FieldPathByValue<TFieldValues, number>,
 >({ required = true, name, minSize = 1, ...props }: DiskSizeProps<TFieldValues, TName>) {
   return (
     <NumberField

app/components/form/fields/FileField.tsx

@@ -14,7 +14,7 @@ import { ErrorMessage } from './ErrorMessage'
 
 export function FileField<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 >({
   id,
   name,

app/components/form/fields/ListboxField.tsx

@@ -17,7 +17,7 @@ import { ErrorMessage } from './ErrorMessage'
 
 export type ListboxFieldProps<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 > = {
   name: TName
   placeholder?: string
@@ -35,7 +35,7 @@ export type ListboxFieldProps<
 
 export function ListboxField<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 >({
   items,
   name,

app/components/form/fields/NameField.tsx

@@ -14,7 +14,7 @@ import { TextField } from './TextField'
 
 export function NameField<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 >({
   required = true,
   name,

app/components/form/fields/NumberField.tsx

@@ -19,7 +19,7 @@ import type { TextFieldProps } from './TextField'
 export function NumberField<
   TFieldValues extends FieldValues,
   // can only be used on fields with number values
-  TName extends FieldPathByValue<TFieldValues, number>
+  TName extends FieldPathByValue<TFieldValues, number>,
 >({
   name,
   label = capitalize(name),
@@ -60,7 +60,7 @@ export function NumberField<
  */
 export const NumberFieldInner = <
   TFieldValues extends FieldValues,
-  TName extends FieldPathByValue<TFieldValues, number>
+  TName extends FieldPathByValue<TFieldValues, number>,
 >({
   name,
   label = capitalize(name),

app/components/form/fields/RadioField.tsx

@@ -17,7 +17,7 @@ import { capitalize } from '@oxide/util'
 
 export type RadioFieldProps<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 > = Omit<RadioGroupProps, 'name' | 'children'> & {
   name: TName
   /** Will default to name if not provided */
@@ -55,7 +55,7 @@ export type RadioFieldProps<
 
 export function RadioField<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 >({
   name,
   label = capitalize(name),
@@ -111,7 +111,7 @@ export function RadioField<
 
 export type RadioFieldDynProps<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 > = Omit<RadioFieldProps<TFieldValues, TName>, 'parseValue' | 'items'> & {
   children: React.ReactElement | React.ReactElement[]
 }
@@ -124,7 +124,7 @@ export type RadioFieldDynProps<
  */
 export function RadioFieldDyn<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 >({
   name,
   label = capitalize(name),

app/components/form/fields/SubnetListbox.tsx

@@ -17,7 +17,7 @@ import { ListboxField } from './ListboxField'
 
 type SubnetListboxProps<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 > = Omit<ListboxFieldProps<TFieldValues, TName>, 'items'> & {
   vpcNameField: FieldPath<TFieldValues>
 }
@@ -31,7 +31,7 @@ type SubnetListboxProps<
  */
 export function SubnetListbox<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 >({ vpcNameField, control, ...fieldProps }: SubnetListboxProps<TFieldValues, TName>) {
   const projectSelector = useProjectSelector()
 

app/components/form/fields/TextField.tsx

@@ -28,7 +28,7 @@ import { ErrorMessage } from './ErrorMessage'
 
 export interface TextFieldProps<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 > extends UITextFieldProps {
   name: TName
   /** HTML type attribute, defaults to text */
@@ -59,7 +59,7 @@ export interface TextFieldProps<
 
 export function TextField<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 >({
   name,
   label = capitalize(name),
@@ -108,7 +108,7 @@ function numberToInputValue(value: number) {
  */
 export const TextFieldInner = <
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 >({
   name,
   type = 'text',

app/pages/project/access/ProjectAccessPage.tsx

@@ -94,9 +94,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)
 

index.html

@@ -6,7 +6,7 @@
   ~ Copyright Oxide Computer Company
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

libs/api-mocks/msw/db.ts

@@ -14,7 +14,7 @@ import type { ApiTypes as Api, PathParams as PP } from '@oxide/api'
 import { user1 } from '@oxide/api-mocks'
 
 import type { Json } from '../json-type'
-import { clone, json } from './util'
+import { json } from './util'
 
 const notFoundBody = { error_code: 'ObjectNotFound' } as const
 export type NotFound = typeof notFoundBody
@@ -204,7 +204,7 @@ type DiskBulkImport = {
 
 const initDb = {
   disks: [...mock.disks],
-  diskBulkImportState: {} as Record<string, DiskBulkImport>,
+  diskBulkImportState: new Map<string, DiskBulkImport>(),
   userGroups: [...mock.userGroups],
   /** Join table for `users` and `userGroups` */
   groupMemberships: [...mock.groupMemberships],
@@ -229,8 +229,8 @@ const initDb = {
   vpcSubnets: [mock.vpcSubnet],
 }
 
-export let db = clone(initDb)
+export let db = structuredClone(initDb)
 
 export function resetDb() {
-  db = clone(initDb)
+  db = structuredClone(initDb)
 }

libs/api-mocks/msw/handlers.ts

@@ -165,7 +165,7 @@ export const handlers = makeHandlers({
 
     // throw 400
 
-    db.diskBulkImportState[disk.id] = { blocks: {} }
+    db.diskBulkImportState.set(disk.id, { blocks: {} })
     disk.state = { state: 'importing_from_bulk_writes' }
     return 204
   },
@@ -178,13 +178,13 @@ export const handlers = makeHandlers({
       throw 'Can only stop import for disk in state importing_from_bulk_write'
     }
 
-    delete db.diskBulkImportState[disk.id]
+    db.diskBulkImportState.delete(disk.id)
     disk.state = { state: 'import_ready' }
     return 204
   },
   diskBulkWriteImport: ({ path, query, body }) => {
     const disk = lookup.disk({ ...path, ...query })
-    const diskImport = db.diskBulkImportState[disk.id]
+    const diskImport = db.diskBulkImportState.get(disk.id)
     if (!diskImport) throw notFoundErr
     // if (Math.random() < 0.01) throw 400
     diskImport.blocks[body.offset] = true

libs/api-mocks/msw/util.ts

@@ -69,11 +69,6 @@ export const paginated = <P extends PaginateOptions, I extends { id: string }>(
 export const repeat = <T extends { id: string; name: string }>(obj: T, n: number): T[] =>
   new Array(n).fill(0).map((_, i) => ({ ...obj, id: obj.id + i, name: obj.name + i }))
 
-export const clone = <T extends object>(obj: T): T =>
-  typeof structuredClone !== 'undefined'
-    ? structuredClone(obj)
-    : JSON.parse(JSON.stringify(obj))
-
 export function getStartAndEndTime(params: { startTime?: Date; endTime?: Date }) {
   // if no start time or end time, give the last 24 hours. in this case the
   // API will give all data available for the metric (paginated of course),

libs/api/hooks.ts

@@ -122,7 +122,7 @@ export const getUseApiQueries =
             ...options,
             // Add params to the result for reassembly after the queries are returned
             select: (data) => ({ ...data, params }),
-          } satisfies UseQueryOptions<Result<A[M]> & { params: Params<A[M]> }, ApiError>)
+          }) satisfies UseQueryOptions<Result<A[M]> & { params: Params<A[M]> }, ApiError>
       ),
     })
   }