Regen API client with proper nullable fields (#2821)

david-crespo · web-flow · commit b8e9f385fec3 · 2025-05-06T18:29:36.000-05:00
* manually copy over nullable change from oxide.ts for testing

* fix 165 type errors

* bump generator and regen client properly

* put a null auto_restart_policy in the mock data
diff --git a/app/api/__generated__/Api.ts b/app/api/__generated__/Api.ts
diff --git a/app/api/__generated__/validate.ts b/app/api/__generated__/validate.ts
diff --git a/app/api/hooks.ts b/app/api/hooks.ts
@@ -31,7 +31,7 @@ import { navToLogin } from './nav-to-login'
 type Params<F> = F extends (p: infer P) => any ? P : never
 type Result<F> = F extends (p: any) => Promise<ApiResult<infer R>> ? R : never
 
-export type ResultsPage<TItem> = { items: TItem[]; nextPage?: string }
+export type ResultsPage<TItem> = { items: TItem[]; nextPage?: string | null }
 
 type ApiClient = Record<string, (...args: any) => Promise<ApiResult<any>>>
 /* eslint-enable @typescript-eslint/no-explicit-any */
diff --git a/app/components/InstanceAutoRestartPopover.tsx b/app/components/InstanceAutoRestartPopover.tsx
@@ -9,7 +9,7 @@ import { CloseButton, Popover, PopoverButton, PopoverPanel } from '@headlessui/r
 import { formatDistanceToNow } from 'date-fns'
 import { type ReactNode } from 'react'
 import { Link } from 'react-router'
-import { match } from 'ts-pattern'
+import { match, P } from 'ts-pattern'
 
 import {
   AutoRestart12Icon,
@@ -69,7 +69,7 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance })
                 </Badge>
               ))
               .with('best_effort', () => <Badge>best effort</Badge>)
-              .with(undefined, () => <Badge color="neutral">Default</Badge>)
+              .with(P.nullish, () => <Badge color="neutral">Default</Badge>)
               .exhaustive()}
             <div className="transition-transform group-hover:translate-x-1">
               <NextArrow12Icon />
diff --git a/app/components/form/fields/useItemsList.ts b/app/components/form/fields/useItemsList.ts
@@ -24,7 +24,7 @@ export function customRouterFormToData(value: string): string | undefined {
 }
 
 /** Convert value from response body to form value */
-export function customRouterDataToForm(value: string | undefined): string {
+export function customRouterDataToForm(value: string | undefined | null): string {
   return value || NO_ROUTER
 }
 
diff --git a/app/components/oxql-metrics/util.spec.ts b/app/components/oxql-metrics/util.spec.ts
@@ -150,9 +150,6 @@ const utilizationQueryResult1: OxqlQueryResult = {
               {
                 values: {
                   type: 'double',
-                  // there is a bug in the client generator that makes this not allow nulls,
-                  // but we can in fact get them from the API for these values
-                  // @ts-expect-error
                   values: [4991154550.953981, 5002306111.529594, 5005747970.58788, null],
                 },
                 metricType: 'gauge',
diff --git a/app/forms/network-interface-create.tsx b/app/forms/network-interface-create.tsx
@@ -7,7 +7,7 @@
  */
 import { useMemo } from 'react'
 import { useForm } from 'react-hook-form'
-import type { SetRequired } from 'type-fest'
+import type { SetNonNullable, SetRequired } from 'type-fest'
 
 import { useApiQuery, type ApiError, type InstanceNetworkInterfaceCreate } from '@oxide/api'
 
@@ -20,7 +20,7 @@ import { SideModalForm } from '~/components/form/SideModalForm'
 import { useProjectSelector } from '~/hooks/use-params'
 import { FormDivider } from '~/ui/lib/Divider'
 
-const defaultValues: SetRequired<InstanceNetworkInterfaceCreate, 'ip'> = {
+const defaultValues: SetRequired<SetNonNullable<InstanceNetworkInterfaceCreate>, 'ip'> = {
   name: '',
   description: '',
   ip: '',
diff --git a/app/forms/subnet-create.tsx b/app/forms/subnet-create.tsx
@@ -7,6 +7,7 @@
  */
 import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router'
+import type { SetNonNullable } from 'type-fest'
 
 import { useApiMutation, useApiQueryClient, type VpcSubnetCreate } from '@oxide/api'
 
@@ -27,7 +28,7 @@ import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
 import { pb } from '~/util/path-builder'
 
-const defaultValues: Required<VpcSubnetCreate> = {
+const defaultValues: SetNonNullable<Required<VpcSubnetCreate>> = {
   name: '',
   description: '',
   ipv4Block: '',
diff --git a/app/forms/subnet-edit.tsx b/app/forms/subnet-edit.tsx
@@ -7,6 +7,7 @@
  */
 import { useForm } from 'react-hook-form'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router'
+import type { SetNonNullable } from 'type-fest'
 
 import {
   apiq,
@@ -61,7 +62,7 @@ export default function EditSubnetForm() {
     },
   })
 
-  const defaultValues: Required<VpcSubnetUpdate> = {
+  const defaultValues: SetNonNullable<Required<VpcSubnetUpdate>> = {
     name: subnet.name,
     description: subnet.description,
     customRouter: customRouterDataToForm(subnet.customRouterId),
diff --git a/app/forms/vpc-router-route-common.tsx b/app/forms/vpc-router-route-common.tsx
@@ -7,6 +7,7 @@
  */
 
 import type { UseFormReturn } from 'react-hook-form'
+import type { SetNonNullable } from 'type-fest'
 
 import {
   usePrefetchedApiQuery,
@@ -26,7 +27,9 @@ import { Message } from '~/ui/lib/Message'
 import { ALL_ISH } from '~/util/consts'
 import { validateIp, validateIpNet } from '~/util/ip'
 
-export type RouteFormValues = RouterRouteCreate | Required<RouterRouteUpdate>
+export type RouteFormValues =
+  | RouterRouteCreate
+  | SetNonNullable<Required<RouterRouteUpdate>>
 
 export const routeFormMessage = {
   vpcSubnetNotModifiable:
diff --git a/app/pages/system/silos/SiloQuotasTab.tsx b/app/pages/system/silos/SiloQuotasTab.tsx
@@ -8,6 +8,7 @@
 
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
+import type { SetNonNullable } from 'type-fest'
 
 import {
   apiQueryClient,
@@ -96,7 +97,7 @@ function EditQuotasForm({ onDismiss }: { onDismiss: () => void }) {
   const quotas = utilization.allocated
 
   // required because we need to rule out undefined because NumberField hates that
-  const defaultValues: Required<SiloQuotasUpdate> = {
+  const defaultValues: SetNonNullable<Required<SiloQuotasUpdate>> = {
     cpus: quotas.cpus,
     memory: bytesToGiB(quotas.memory),
     storage: bytesToGiB(quotas.storage),
diff --git a/app/table/cells/InstanceLinkCell.tsx b/app/table/cells/InstanceLinkCell.tsx
@@ -14,7 +14,7 @@ import { pb } from '~/util/path-builder'
 import { EmptyCell, SkeletonCell } from './EmptyCell'
 import { LinkCell } from './LinkCell'
 
-export const InstanceLinkCell = ({ instanceId }: { instanceId?: string }) => {
+export const InstanceLinkCell = ({ instanceId }: { instanceId?: string | null }) => {
   const { project } = useProjectSelector()
   const { data: instance } = useApiQuery(
     'instanceView',
diff --git a/app/table/cells/RouterLinkCell.tsx b/app/table/cells/RouterLinkCell.tsx
@@ -14,7 +14,7 @@ import { pb } from '~/util/path-builder'
 import { EmptyCell, SkeletonCell } from './EmptyCell'
 import { LinkCell } from './LinkCell'
 
-export const RouterLinkCell = ({ routerId }: { routerId?: string }) => {
+export const RouterLinkCell = ({ routerId }: { routerId?: string | null }) => {
   const { project, vpc } = useVpcSelector()
   const { data: router, isError } = useApiQuery(
     'vpcRouterView',
diff --git a/app/ui/lib/Pagination.tsx b/app/ui/lib/Pagination.tsx
@@ -32,7 +32,7 @@ export interface PaginationProps {
   pageSize: number
   hasNext: boolean
   hasPrev: boolean
-  nextPage: string | undefined
+  nextPage: string | undefined | null
   onNext: (nextPage: string) => void
   onPrev: () => void
   className?: string
diff --git a/mock-api/instance.ts b/mock-api/instance.ts
@@ -44,6 +44,7 @@ const failedInstance: Json<Instance> = {
   hostname: 'oxide.com',
   project_id: project.id,
   run_state: 'failed',
+  auto_restart_policy: null,
   auto_restart_cooldown_expiration: addMinutes(new Date(), 5).toISOString(), // 5 minutes from now
   time_last_auto_restarted: addMinutes(new Date(), -55).toISOString(), // 55 minutes ago
 }
diff --git a/mock-api/msw/db.ts b/mock-api/msw/db.ts
@@ -54,8 +54,8 @@ function ensureNoParentSelectors(
   }
 }
 
-export const getIpFromPool = (poolName: string | undefined) => {
-  const pool = lookup.ipPool({ pool: poolName })
+export const getIpFromPool = (poolName: string | undefined | null) => {
+  const pool = lookup.ipPool({ pool: poolName || undefined })
   const ipPoolRange = db.ipPoolRanges.find((range) => range.ip_pool_id === pool.id)
   if (!ipPoolRange) throw notFoundErr(`IP range for pool '${poolName}'`)
 
diff --git a/mock-api/msw/handlers.ts b/mock-api/msw/handlers.ts
@@ -270,9 +270,14 @@ export const handlers = makeHandlers({
       id: uuid(),
       project_id: project.id,
       // TODO: use ip-num to actually get the next available IP in the pool
-      ip: [...Array(4)].map(() => Math.floor(Math.random() * 256)).join('.'),
+      ip:
+        body.ip ||
+        Array.from({ length: 4 })
+          .map(() => Math.floor(Math.random() * 256))
+          .join('.'),
       ip_pool_id: pool.id,
-      ...body,
+      description: body.description,
+      name: body.name,
       ...getTimestamps(),
     }
     db.floatingIps.push(newFloatingIp)
@@ -661,6 +666,7 @@ export const handlers = makeHandlers({
     // https://github.com/oxidecomputer/omicron/blob/0c6ab099e/nexus/db-queries/src/db/datastore/instance.rs#L228-L239
     instance.auto_restart_enabled = match(instance.auto_restart_policy)
       .with(undefined, () => true)
+      .with(null, () => true)
       .with('best_effort', () => true)
       .with('never', () => false)
       .exhaustive()
@@ -1518,9 +1524,9 @@ export const handlers = makeHandlers({
     requireFleetCollab(cookies)
     const quotas = lookup.siloQuotas(path)
 
-    if (body.cpus !== undefined) quotas.cpus = body.cpus
-    if (body.memory !== undefined) quotas.memory = body.memory
-    if (body.storage !== undefined) quotas.storage = body.storage
+    if (body.cpus != null) quotas.cpus = body.cpus
+    if (body.memory != null) quotas.memory = body.memory
+    if (body.storage != null) quotas.storage = body.storage
 
     return quotas
   },
diff --git a/mock-api/msw/util.ts b/mock-api/msw/util.ts
@@ -37,8 +37,8 @@ import { genI64Data } from '../metrics'
 import { db } from './db'
 
 interface PaginateOptions {
-  limit?: number
-  pageToken?: string
+  limit?: number | null
+  pageToken?: string | null
 }
 export interface ResultsPage<I extends { id: string }> {
   items: I[]
@@ -49,7 +49,9 @@ export const paginated = <P extends PaginateOptions, I extends { id: string }>(
   params: P,
   items: I[]
 ) => {
-  const { limit = 100, pageToken } = params || {}
+  const limit = params.limit || 100
+  const pageToken = params.pageToken
+
   let startIndex = pageToken ? items.findIndex((i) => i.id === pageToken) : 0
   startIndex = startIndex < 0 ? 0 : startIndex
 
@@ -410,10 +412,10 @@ export const ipInAnyRange = (ip: string, ranges: IpRange[]) =>
 
 export function updateDesc(
   resource: { description: string },
-  update: { description?: string }
+  update: { description?: string | null }
 ) {
   // Can't be `if (update.description)` because you could never set it to ''
-  if (update.description !== undefined) {
+  if (update.description != null) {
     resource.description = update.description
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -79,7 +79,7 @@
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
     "@mswjs/http-middleware": "^0.10.3",
-    "@oxide/openapi-gen-ts": "~0.6.2",
+    "@oxide/openapi-gen-ts": "~0.7.0",
     "@playwright/test": "^1.52.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ export function customRouterFormToData(value: string): string \| undefined {`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`/** Convert value from response body to form value */`
`27`		`-export function customRouterDataToForm(value: string \| undefined): string {`
	`27`	`+export function customRouterDataToForm(value: string \| undefined \| null): string {`
`28`	`28`	`return value \|\| NO_ROUTER`
`29`	`29`	`}`
`30`	`30`