refactor: create path params types module, rename current path params to "selectors" (#2606)

* shuffle around API selector types and separate path params

* use the new PP type in a few places

Author: david-crespo

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,30 @@
+/*
+ * 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 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

@@ -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

@@ -14,7 +14,6 @@ import {
   useApiMutation,
   useApiQuery,
   useApiQueryClient,
-  type PathParams as PP,
   type SnapshotCreate,
 } from '@oxide/api'
 
@@ -28,10 +27,11 @@ import { addToast } from '~/stores/toast'
 import { toComboboxItems } from '~/ui/lib/Combobox'
 import { ALL_ISH } from '~/util/consts'
 import { pb } from '~/util/path-builder'
+import type * as PP from '~/util/path-params'
 
-const useSnapshotDiskItems = (projectSelector: PP.Project) => {
+const useSnapshotDiskItems = ({ project }: PP.Project) => {
   const { data: disks } = useApiQuery('diskList', {
-    query: { ...projectSelector, limit: ALL_ISH },
+    query: { project, limit: ALL_ISH },
   })
   return disks?.items.filter(diskCan.snapshot)
 }

app/forms/snapshot-create.tsx

@@ -37,6 +37,7 @@ import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { TableActions } from '~/ui/lib/Table'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
+import type * as PP from '~/util/path-params'
 
 import { fancifyStates } from '../instances/instance/tabs/common'
 
@@ -50,12 +51,12 @@ const EmptyState = () => (
   />
 )
 
-const diskList = (project: string) => getListQFn('diskList', { query: { project } })
+const diskList = (query: PP.Project) => getListQFn('diskList', { query })
 
 DisksPage.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project } = getProjectSelector(params)
   await Promise.all([
-    queryClient.prefetchQuery(diskList(project).optionsFn()),
+    queryClient.prefetchQuery(diskList({ project }).optionsFn()),
 
     // fetch instances and preload into RQ cache so fetches by ID in
     // InstanceLinkCell can be mostly instant yet gracefully fall back to
@@ -162,7 +163,7 @@ export function DisksPage() {
 
   const columns = useColsWithActions(staticCols, makeActions)
   const { table } = useQueryTable({
-    query: diskList(project),
+    query: diskList({ project }),
     columns,
     emptyState: <EmptyState />,
   })

app/pages/project/disks/DisksPage.tsx

@@ -36,6 +36,7 @@ import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { TableActions } from '~/ui/lib/Table'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
+import type * as PP from '~/util/path-params'
 
 const EmptyState = () => (
   <EmptyMessage
@@ -49,11 +50,11 @@ const EmptyState = () => (
 
 const colHelper = createColumnHelper<Image>()
 
-const imageList = (project: string) => getListQFn('imageList', { query: { project } })
+const imageList = (query: PP.Project) => getListQFn('imageList', { query })
 
 ImagesPage.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project } = getProjectSelector(params)
-  await queryClient.prefetchQuery(imageList(project).optionsFn())
+  await queryClient.prefetchQuery(imageList({ project }).optionsFn())
   return null
 }
 
@@ -103,7 +104,7 @@ export function ImagesPage() {
   }, [project, makeActions])
 
   const { table } = useQueryTable({
-    query: imageList(project),
+    query: imageList({ project }),
     columns,
     emptyState: <EmptyState />,
   })

app/pages/project/images/ImagesPage.tsx

@@ -43,13 +43,12 @@ import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { TableControls, TableTitle } from '~/ui/lib/Table'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
+import type * as PP from '~/util/path-params'
 
-type RouterParams = { project: string; vpc: string; router: string }
-
-const routerView = ({ project, vpc, router }: RouterParams) =>
+const routerView = ({ project, vpc, router }: PP.VpcRouter) =>
   apiq('vpcRouterView', { path: { router }, query: { vpc, project } })
 
-const routeList = (query: RouterParams) => getListQFn('vpcRouterRouteList', { query })
+const routeList = (query: PP.VpcRouter) => getListQFn('vpcRouterRouteList', { query })
 
 export async function loader({ params }: LoaderFunctionArgs) {
   const routerSelector = getVpcRouterSelector(params)

app/pages/project/vpcs/RouterPage.tsx

@@ -29,11 +29,11 @@ import { useQueryTable } from '~/table/QueryTable'
 import { CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { pb } from '~/util/path-builder'
+import type * as PP from '~/util/path-params'
 
 const colHelper = createColumnHelper<VpcRouter>()
 
-const vpcRouterList = (params: { project: string; vpc: string }) =>
-  getListQFn('vpcRouterList', { query: params })
+const vpcRouterList = (query: PP.Vpc) => getListQFn('vpcRouterList', { query })
 
 export async function loader({ params }: LoaderFunctionArgs) {
   const { project, vpc } = getVpcSelector(params)

app/pages/project/vpcs/VpcPage/tabs/VpcRoutersTab.tsx

@@ -29,11 +29,11 @@ import { useQueryTable } from '~/table/QueryTable'
 import { CreateLink } from '~/ui/lib/CreateButton'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { pb } from '~/util/path-builder'
+import type * as PP from '~/util/path-params'
 
 const colHelper = createColumnHelper<VpcSubnet>()
 
-const subnetList = (params: { project: string; vpc: string }) =>
-  getListQFn('vpcSubnetList', { query: params })
+const subnetList = (params: PP.Vpc) => getListQFn('vpcSubnetList', { query: params })
 
 export async function loader({ params }: LoaderFunctionArgs) {
   const { project, vpc } = getVpcSelector(params)