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

@@ -204,7 +204,9 @@ type DiskBulkImport = {
 
 const initDb = {
   disks: [...mock.disks],
-  diskBulkImportState: {} as Record<string, DiskBulkImport>,
+  // TODO: this works with structuredClone but won't work with the fallback for
+  // when that's not defined. However, I think it is always defined.
+  diskBulkImportState: new Map<string, DiskBulkImport>(),
   userGroups: [...mock.userGroups],
   /** Join table for `users` and `userGroups` */
   groupMemberships: [...mock.groupMemberships],

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/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>
       ),
     })
   }

libs/ui/lib/__stories__/Colors.stories.tsx

@@ -6,9 +6,6 @@
  * Copyright Oxide Computer Company
  */
 
-// @ts-ignore
-// import twConfig from '../../../../tailwind.config'
-
 interface ColorProps {
   name?: string
   value: string

libs/ui/lib/auth-code/AuthCodeInput.tsx

@@ -101,8 +101,8 @@ export const AuthCodeInput = forwardRef<AuthCodeRef, AuthCodeProps>(
       },
       clear: () => {
         if (inputsRef.current) {
-          for (let i = 0; i < inputsRef.current.length; i++) {
-            inputsRef.current[i].value = ''
+          for (const input of inputsRef.current) {
+            input.value = ''
           }
           inputsRef.current[0].focus()
         }

libs/ui/lib/date-picker/DateField.tsx

@@ -125,7 +125,7 @@ function DateSegment({
         segment.type === 'timeZoneName' ? 'ml-1 text-sans-sm' : 'text-sans-md'
       )}
       // Segment props turns this into a focusable element
-      // @ts-ignore
+      // @ts-expect-error
       disabled={readOnly ? true : false}
     >
       {/* Always reserve space for the placeholder, to prevent layout shift when editing. */}