Merge branch 'main' into truncate_copyable_ip_address

Author: charliepark

.github/workflows/lintBuildTest.yml

@@ -20,7 +20,7 @@ jobs:
         id: cache-node-modules
         with:
           path: node_modules
-          key: modules-${{ hashFiles('package-lock.json') }}
+          key: modules-${{ hashFiles('package-lock.json', 'patches/**') }}
       - name: npm install
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
         run: npm install
@@ -39,7 +39,7 @@ jobs:
         id: cache-node-modules
         with:
           path: node_modules
-          key: modules-${{ hashFiles('package-lock.json') }}
+          key: modules-${{ hashFiles('package-lock.json', 'patches/**') }}
       - name: Typecheck
         run: npx tsc
       - name: Lint
@@ -67,7 +67,7 @@ jobs:
         uses: actions/cache@v4
         with:
           path: node_modules
-          key: modules-${{ hashFiles('package-lock.json') }}
+          key: modules-${{ hashFiles('package-lock.json', 'patches/**') }}
       - name: Set env.PLAYWRIGHT_VERSION
         run: |
           PLAYWRIGHT_VERSION=$(npm ls --json @playwright/test | jq --raw-output '.dependencies["@playwright/test"].version')

app/api/client.ts

@@ -5,7 +5,11 @@
  *
  * Copyright Oxide Computer Company
  */
-import { QueryClient, useQuery, type UseQueryOptions } from '@tanstack/react-query'
+import {
+  QueryClient as QueryClientOrig,
+  useQuery,
+  type UseQueryOptions,
+} from '@tanstack/react-query'
 
 import { Api } from './__generated__/Api'
 import { type ApiError } from './errors'
@@ -49,6 +53,24 @@ export const useApiMutation = getUseApiMutation(api.methods)
 export const usePrefetchedQuery = <TData>(options: UseQueryOptions<TData, ApiError>) =>
   ensurePrefetched(useQuery(options), options.queryKey)
 
+/**
+ * Extends React Query's `QueryClient` with a couple of API-specific methods.
+ * Existing methods are never modified.
+ */
+class QueryClient extends QueryClientOrig {
+  /**
+   * Invalidate all cached queries for a given endpoint.
+   *
+   * Note that we only take a single argument, `method`, rather than allowing
+   * the full query key `[query, params]` to be specified. This is to avoid
+   * accidentally overspecifying and therefore failing to match the desired query.
+   * The params argument can be added in if we ever have a use case for it.
+   */
+  invalidateEndpoint(method: keyof typeof api.methods) {
+    this.invalidateQueries({ queryKey: [method] })
+  }
+}
+
 // Needs to be defined here instead of in app so we can use it to define
 // `apiQueryClient`, which provides API-typed versions of QueryClient methods
 export const queryClient = new QueryClient({

app/api/hooks.ts

@@ -108,7 +108,7 @@ export const getApiQueryOptions =
     queryOptions({
       queryKey: [method, params],
       // no catch, let unexpected errors bubble up
-      queryFn: ({ signal }) => api[method](params, { signal }).then(handleResult(method)),
+      queryFn: () => api[method](params).then(handleResult(method)),
       // In the case of 404s, let the error bubble up to the error boundary so
       // we can say Not Found. If you need to allow a 404 and want it to show
       // up as `error` state instead, pass `useErrorBoundary: false` as an

app/api/index.ts

@@ -19,8 +19,6 @@ export * from './__generated__/Api'
 
 export type { ApiTypes }
 
-export * as PathParams from './path-params'
-
 export { ensurePrefetched, PAGE_SIZE, type PaginatedQuery, type ResultsPage } from './hooks'
 export type { ApiError } from './errors'
 export { navToLogin } from './nav-to-login'

app/api/path-params.ts

@@ -0,0 +1,35 @@
+/*
+ * 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 type { Merge } from 'type-fest'
+
+export type Project = Readonly<{ project?: string }>
+export type Instance = Readonly<Merge<Project, { instance?: string }>>
+export type Disk = Readonly<Merge<Project, { disk?: string }>>
+export type Image = Readonly<Merge<Project, { image?: string }>>
+export type SiloImage = Readonly<{ image?: string }>
+export type NetworkInterface = Readonly<Merge<Instance, { interface?: string }>>
+export type Snapshot = Readonly<Merge<Project, { snapshot?: string }>>
+export type Vpc = Readonly<Merge<Project, { vpc?: string }>>
+export type VpcRouter = Readonly<Merge<Vpc, { router?: string }>>
+export type InternetGateway = Readonly<Merge<Vpc, { gateway?: string }>>
+export type InternetGatewayIpAddress = Readonly<
+  Merge<InternetGateway, { address?: string }>
+>
+export type InternetGatewayIpPool = Merge<InternetGateway, { pool?: string }>
+export type VpcRouterRoute = Readonly<Merge<VpcRouter, { route?: string }>>
+export type VpcSubnet = Readonly<Merge<Vpc, { subnet?: string }>>
+export type FirewallRule = Readonly<Merge<Vpc, { rule?: string }>>
+export type Silo = Readonly<{ silo?: string }>
+export type IdentityProvider = Readonly<Merge<Silo, { provider: string }>>
+export type SystemUpdate = Readonly<{ version: string }>
+export type SshKey = Readonly<{ sshKey: string }>
+export type Sled = Readonly<{ sledId?: string }>
+export type IpPool = Readonly<{ pool?: string }>
+export type FloatingIp = Readonly<Merge<Project, { floatingIp?: string }>>
+
+export type Id = Readonly<{ id: string }>

app/api/selectors.ts

@@ -17,6 +17,8 @@ export const trigger404 = { type: 'error', statusCode: 404 }
 type Props = { error: Error | ApiError }
 
 function ErrorFallback({ error }: Props) {
+  console.error(error)
+
   if ('statusCode' in error && error.statusCode === 404) {
     return <NotFound />
   }
@@ -38,6 +40,5 @@ export const ErrorBoundary = (props: { children: React.ReactNode }) => (
 export function RouterDataErrorBoundary() {
   // TODO: validate this unknown at runtime _before_ passing to ErrorFallback
   const error = useRouteError() as Props['error']
-  console.error(error)
   return <ErrorFallback error={error} />
 }

app/components/ErrorBoundary.tsx

@@ -11,10 +11,9 @@ import { useApiQuery } from '@oxide/api'
 import { EmptyCell, SkeletonCell } from '~/table/cells/EmptyCell'
 import { CopyableIp } from '~/ui/lib/CopyableIp'
 import { intersperse } from '~/util/array'
+import type * as PP from '~/util/path-params'
 
-type InstanceSelector = { project: string; instance: string }
-
-export function ExternalIps({ project, instance }: InstanceSelector) {
+export function ExternalIps({ project, instance }: PP.Instance) {
   const { data, isPending } = useApiQuery('instanceExternalIpList', {
     path: { instance },
     query: { project },

app/components/ExternalIps.tsx

@@ -323,9 +323,9 @@ export const CommonFields = ({ control, nameTaken, error }: CommonFieldsProps) =
               target="_blank"
               rel="noreferrer"
             >
-              guest networking guide
+              Networking
             </a>{' '}
-            and{' '}
+            guide and the{' '}
             <a
               href="https://docs.oxide.computer/api/vpc_firewall_rules_update"
               // don't need color and hover color because message text is already color-info anyway

app/forms/firewall-rules-common.tsx

@@ -8,32 +8,27 @@
 import { useForm } from 'react-hook-form'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
-import {
-  apiQueryClient,
-  useApiMutation,
-  useApiQueryClient,
-  usePrefetchedApiQuery,
-} from '@oxide/api'
+import { apiq, queryClient, useApiMutation, usePrefetchedApiQuery } from '@oxide/api'
 
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
 import { getFloatingIpSelector, useFloatingIpSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
+import type * as PP from '~/util/path-params'
 import { pb } from 'app/util/path-builder'
 
+const floatingIpView = ({ project, floatingIp }: PP.FloatingIp) =>
+  apiq('floatingIpView', { path: { floatingIp }, query: { project } })
+
 EditFloatingIpSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
-  const { floatingIp, project } = getFloatingIpSelector(params)
-  await apiQueryClient.prefetchQuery('floatingIpView', {
-    path: { floatingIp },
-    query: { project },
-  })
+  const selector = getFloatingIpSelector(params)
+  await queryClient.prefetchQuery(floatingIpView(selector))
   return null
 }
 
 export function EditFloatingIpSideModalForm() {
-  const queryClient = useApiQueryClient()
   const navigate = useNavigate()
 
   const floatingIpSelector = useFloatingIpSelector()
@@ -47,7 +42,7 @@ export function EditFloatingIpSideModalForm() {
 
   const editFloatingIp = useApiMutation('floatingIpUpdate', {
     onSuccess(_floatingIp) {
-      queryClient.invalidateQueries('floatingIpList')
+      queryClient.invalidateEndpoint('floatingIpList')
       addToast(<>Floating IP <HL>{_floatingIp.name}</HL> updated</>) // prettier-ignore
       onDismiss()
     },