Skip to content

Improve "Jump To" (cmd-k) dialog #3129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
notpeter wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Improve "Jump To" (cmd-k) dialog #3129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
89f10cf
Improved "Jump To" keyboard navigability
notpeter Mar 16, 2026
41e14fe
fmt
notpeter Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions app/pages/ProjectsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
*
* Copyright Oxide Computer Company
*/
import { useQuery } from '@tanstack/react-query'
import { createColumnHelper } from '@tanstack/react-table'
import { useCallback, useMemo } from 'react'
import { Outlet, useNavigate } from 'react-router'
Expand All @@ -24,6 +25,7 @@ import { CreateLink } from '~/ui/lib/CreateButton'
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
import { TableActions } from '~/ui/lib/Table'
import { ALL_ISH } from '~/util/consts'
import { docLinks } from '~/util/links'
import { pb } from '~/util/path-builder'

Expand Down Expand Up @@ -94,25 +96,27 @@ export default function ProjectsPage() {
)

const columns = useColsWithActions(staticCols, makeActions)
const {
table,
query: { data: projects },
} = useQueryTable({ query: projectList, columns, emptyState: <EmptyState /> })
const { table } = useQueryTable({
query: projectList,
columns,
emptyState: <EmptyState />,
})

const { data: allProjects } = useQuery(q(api.projectList, { query: { limit: ALL_ISH } }))
useQuickActions(
useMemo(
() => [
{
value: 'New project',
onSelect: () => navigate(pb.projectsNew()),
},
...(projects?.items || []).map((p) => ({
...(allProjects?.items || []).map((p) => ({
value: p.name,
onSelect: () => navigate(pb.project({ project: p.name })),
navGroup: 'Go to project',
})),
],
[navigate, projects]
[navigate, allProjects]
)
)

Expand Down
13 changes: 13 additions & 0 deletions app/pages/SiloAccessPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
SiloAccessEditUserSideModal,
} from '~/forms/silo-access'
import { useCurrentUser } from '~/hooks/use-current-user'
import { useQuickActions } from '~/hooks/use-quick-actions'
import { confirmDelete } from '~/stores/confirm-delete'
import { addToast } from '~/stores/toast'
import { getActionsCol } from '~/table/columns/action-col'
Expand Down Expand Up @@ -164,6 +165,18 @@ export default function SiloAccessPage() {
getCoreRowModel: getCoreRowModel(),
})

useQuickActions(
useMemo(
() => [
{
value: 'Add user or group',
onSelect: () => setAddModalOpen(true),
},
],
[]
)
)

return (
<>
<PageHeader>
Expand Down
24 changes: 23 additions & 1 deletion app/pages/SiloImagesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { useQuery } from '@tanstack/react-query'
import { createColumnHelper } from '@tanstack/react-table'
import { useCallback, useMemo, useState } from 'react'
import { useForm } from 'react-hook-form'
import { Outlet } from 'react-router'
import { Outlet, useNavigate } from 'react-router'

import { api, getListQFn, q, queryClient, useApiMutation, type Image } from '@oxide/api'
import { Images16Icon, Images24Icon } from '@oxide/design-system/icons/react'
Expand All @@ -20,6 +20,7 @@ import { toImageComboboxItem } from '~/components/form/fields/ImageSelectField'
import { ListboxField } from '~/components/form/fields/ListboxField'
import { ModalForm } from '~/components/form/ModalForm'
import { HL } from '~/components/HL'
import { useQuickActions } from '~/hooks/use-quick-actions'
import { confirmDelete } from '~/stores/confirm-delete'
import { addToast } from '~/stores/toast'
import { makeLinkCell } from '~/table/cells/LinkCell'
Expand All @@ -32,6 +33,7 @@ import { EmptyMessage } from '~/ui/lib/EmptyMessage'
import { Message } from '~/ui/lib/Message'
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
import { TableActions } from '~/ui/lib/Table'
import { ALL_ISH } from '~/util/consts'
import { docLinks } from '~/util/links'
import { pb } from '~/util/path-builder'

Expand Down Expand Up @@ -93,6 +95,26 @@ export default function SiloImagesPage() {

const columns = useColsWithActions(staticCols, makeActions)
const { table } = useQueryTable({ query: imageList, columns, emptyState: <EmptyState /> })

const navigate = useNavigate()
const { data: allImages } = useQuery(q(api.imageList, { query: { limit: ALL_ISH } }))
useQuickActions(
useMemo(
() => [
{
value: 'Promote image',
onSelect: () => setShowModal(true),
},
...(allImages?.items || []).map((i) => ({
value: i.name,
onSelect: () => navigate(pb.siloImageEdit({ image: i.name })),
navGroup: 'Go to silo image',
})),
],
[navigate, allImages]
)
)

return (
<>
<PageHeader>
Expand Down
13 changes: 13 additions & 0 deletions app/pages/project/access/ProjectAccessPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {
ProjectAccessEditUserSideModal,
} from '~/forms/project-access'
import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
import { useQuickActions } from '~/hooks/use-quick-actions'
import { confirmDelete } from '~/stores/confirm-delete'
import { addToast } from '~/stores/toast'
import { getActionsCol } from '~/table/columns/action-col'
Expand Down Expand Up @@ -205,6 +206,18 @@ export default function ProjectAccessPage() {
getCoreRowModel: getCoreRowModel(),
})

useQuickActions(
useMemo(
() => [
{
value: 'Add user or group',
onSelect: () => setAddModalOpen(true),
},
],
[]
)
)

Copy link
Collaborator

@david-crespo david-crespo Mar 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This made me wonder what happens when you use cmd+k when the form is already open. a) this entry still appears (not ideal but tolerable IMO — kind of complicated to avoid), b) visually the interaction with the form is messy (also not ideal but also tolerable I think)

Image

Copy link
Collaborator

@david-crespo david-crespo Mar 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh and it's janky if you click the background because that only affects the form, so you close the form but not the ctrl-k popup. Out of scope for this PR, just noting it.

return (
<>
<PageHeader>
Expand Down
18 changes: 16 additions & 2 deletions app/pages/project/affinity/AffinityPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
*/

import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
import { useCallback } from 'react'
import { Outlet, type LoaderFunctionArgs } from 'react-router'
import { useCallback, useMemo } from 'react'
import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router'

import {
api,
Expand All @@ -25,6 +25,7 @@ import { AffinityDocsPopover, AffinityPolicyHeader } from '~/components/Affinity
import { HL } from '~/components/HL'
import { antiAffinityGroupList, antiAffinityGroupMemberList } from '~/forms/affinity-util'
import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
import { useQuickActions } from '~/hooks/use-quick-actions'
import { confirmDelete } from '~/stores/confirm-delete'
import { addToast } from '~/stores/toast'
import { EmptyCell, SkeletonCell } from '~/table/cells/EmptyCell'
Expand Down Expand Up @@ -138,6 +139,19 @@ export default function AffinityPage() {
getCoreRowModel: getCoreRowModel(),
})

const navigate = useNavigate()
useQuickActions(
useMemo(
() => [
{
value: 'New group',
onSelect: () => navigate(pb.affinityNew({ project })),
},
],
[navigate, project]
)
)

return (
<>
<PageHeader>
Expand Down
16 changes: 15 additions & 1 deletion app/pages/project/disks/DisksPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/
import { createColumnHelper } from '@tanstack/react-table'
import { useCallback, useMemo } from 'react'
import { Outlet, type LoaderFunctionArgs } from 'react-router'
import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router'

import {
api,
Expand All @@ -26,6 +26,7 @@ import { HL } from '~/components/HL'
import { DiskStateBadge, DiskTypeBadge, ReadOnlyBadge } from '~/components/StateBadge'
import { makeCrumb } from '~/hooks/use-crumbs'
import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
import { useQuickActions } from '~/hooks/use-quick-actions'
import { confirmDelete } from '~/stores/confirm-delete'
import { addToast } from '~/stores/toast'
import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
Expand Down Expand Up @@ -186,6 +187,19 @@ export default function DisksPage() {
emptyState: <EmptyState />,
})

const navigate = useNavigate()
useQuickActions(
useMemo(
() => [
{
value: 'New disk',
onSelect: () => navigate(pb.disksNew({ project })),
},
],
[navigate, project]
)
)

return (
<>
<PageHeader>
Expand Down
24 changes: 23 additions & 1 deletion app/pages/project/floating-ips/FloatingIpsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
*
* Copyright Oxide Computer Company
*/
import { useQuery } from '@tanstack/react-query'
import { createColumnHelper } from '@tanstack/react-table'
import { useCallback, useState } from 'react'
import { useCallback, useMemo, useState } from 'react'
import { useForm } from 'react-hook-form'
import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router'

Expand All @@ -28,6 +29,7 @@ import { ModalForm } from '~/components/form/ModalForm'
import { HL } from '~/components/HL'
import { makeCrumb } from '~/hooks/use-crumbs'
import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
import { useQuickActions } from '~/hooks/use-quick-actions'
import { confirmAction } from '~/stores/confirm-action'
import { confirmDelete } from '~/stores/confirm-delete'
import { addToast } from '~/stores/toast'
Expand Down Expand Up @@ -211,6 +213,26 @@ export default function FloatingIpsPage() {
emptyState: <EmptyState />,
})

const { data: allFips } = useQuery(
q(api.floatingIpList, { query: { project, limit: ALL_ISH } })
)
useQuickActions(
useMemo(
() => [
{
value: 'New floating IP',
onSelect: () => navigate(pb.floatingIpsNew({ project })),
},
...(allFips?.items || []).map((f) => ({
value: f.name,
onSelect: () => navigate(pb.floatingIpEdit({ project, floatingIp: f.name })),
navGroup: 'Go to floating IP',
})),
],
[project, navigate, allFips]
)
)

return (
<>
<PageHeader>
Expand Down
28 changes: 26 additions & 2 deletions app/pages/project/images/ImagesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,19 @@
*
* Copyright Oxide Computer Company
*/
import { useQuery } from '@tanstack/react-query'
import { createColumnHelper } from '@tanstack/react-table'
import { useCallback, useMemo, useState } from 'react'
import { Outlet, type LoaderFunctionArgs } from 'react-router'
import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router'

import { api, getListQFn, queryClient, useApiMutation, type Image } from '@oxide/api'
import { api, getListQFn, q, queryClient, useApiMutation, type Image } from '@oxide/api'
import { Images16Icon, Images24Icon } from '@oxide/design-system/icons/react'

import { DocsPopover } from '~/components/DocsPopover'
import { HL } from '~/components/HL'
import { makeCrumb } from '~/hooks/use-crumbs'
import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
import { useQuickActions } from '~/hooks/use-quick-actions'
import { confirmDelete } from '~/stores/confirm-delete'
import { addToast } from '~/stores/toast'
import { makeLinkCell } from '~/table/cells/LinkCell'
Expand All @@ -28,6 +30,7 @@ import { Message } from '~/ui/lib/Message'
import { Modal } from '~/ui/lib/Modal'
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
import { TableActions } from '~/ui/lib/Table'
import { ALL_ISH } from '~/util/consts'
import { docLinks } from '~/util/links'
import { pb } from '~/util/path-builder'
import type * as PP from '~/util/path-params'
Expand Down Expand Up @@ -106,6 +109,27 @@ export default function ImagesPage() {
emptyState: <EmptyState />,
})

const navigate = useNavigate()
const { data: allImages } = useQuery(
q(api.imageList, { query: { project, limit: ALL_ISH } })
)
useQuickActions(
useMemo(
() => [
{
value: 'Upload image',
onSelect: () => navigate(pb.projectImagesNew({ project })),
},
...(allImages?.items || []).map((i) => ({
value: i.name,
onSelect: () => navigate(pb.projectImageEdit({ project, image: i.name })),
navGroup: 'Go to project image',
})),
],
[project, navigate, allImages]
)
)

return (
<>
<PageHeader>
Expand Down
12 changes: 9 additions & 3 deletions app/pages/project/instances/InstancesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* Copyright Oxide Computer Company
*/
import { type UseQueryOptions } from '@tanstack/react-query'
import { useQuery } from '@tanstack/react-query'
import { createColumnHelper } from '@tanstack/react-table'
import { filesize } from 'filesize'
import { useMemo, useRef, useState } from 'react'
Expand All @@ -14,6 +15,7 @@ import { useNavigate, type LoaderFunctionArgs } from 'react-router'
import {
api,
getListQFn,
q,
queryClient,
type ApiError,
type Instance,
Expand All @@ -37,6 +39,7 @@ import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
import { TableActions } from '~/ui/lib/Table'
import { Tooltip } from '~/ui/lib/Tooltip'
import { setDiff } from '~/util/array'
import { ALL_ISH } from '~/util/consts'
import { toLocaleTimeString } from '~/util/date'
import { pb } from '~/util/path-builder'
import { pluralize } from '~/util/str'
Expand Down Expand Up @@ -191,8 +194,11 @@ export default function InstancesPage() {
emptyState: <EmptyState />,
})

const { data: instances, dataUpdatedAt } = query
const { dataUpdatedAt } = query

const { data: allInstances } = useQuery(
q(api.instanceList, { query: { project, limit: ALL_ISH } })
)
const navigate = useNavigate()
useQuickActions(
useMemo(
Expand All @@ -201,13 +207,13 @@ export default function InstancesPage() {
value: 'New instance',
onSelect: () => navigate(pb.instancesNew({ project })),
},
...(instances?.items || []).map((i) => ({
...(allInstances?.items || []).map((i) => ({
value: i.name,
onSelect: () => navigate(pb.instance({ project, instance: i.name })),
navGroup: 'Go to instance',
})),
],
[project, instances, navigate]
[project, allInstances, navigate]
)
)

Expand Down
Loading
Loading