Improve "Jump To" (cmd-k) dialog by notpeter · Pull Request #3129 · oxidecomputer/console

notpeter · 2026-03-16T17:02:59Z

I was initially excited about using cmd-k to navigate the UI with the keyboard but immediately ran into some limitations and so took a stab at improving them.

Fix multi-page search in cmd-k: Projects, Project Instances, Project VPCs, Project IP Pools, Silos
Add missing search to cmd-k: Project Floating IPs, Silo Images, Project Images
Add action from button to cmd-k:
- Project Affinity: "New Group"
- Project Access: "Add user or group"
- Project Disks: "New disk"
- Project Floating IPs: "New Floating IP"
- Project Images: "Upload Image"
- Project Snapshots: "New Snapshot"
- Project VPC: "New VPC"
- Silo Access: "Add user or Group"
- Silo Images: Add "Promote image"

This is my first PR to oxidecomputer/console and was Claude assisted.
I have tested locally and verified these changes seem to work as expected. (see images in #3128)
If this is the wrong approach / redundant, feel free to summarily close.

Search improvements: - Silos: fix multi-page search - Silo Images: add search - Projects: fix multi-page search - Project Instances: fix multi-page search - Project VPCs: fix multi-page search - Project IP Pools: fix multi-page search - Project Floating IPs: add search - Project Images: add search Add buttons to cmd-k: - Project Affinity: "New Group" - Project Access: "Add user or group" - Project Disks: "New disk" - Project Floating IPs: "New Floating IP" - Project Images: "Upload Image" - Project Snapshots: "New Snapshot" - Project VPC: "New VPC" - Silo Access: "Add user or Group" - Silo Images: Add "Promote image"

vercel · 2026-03-16T17:03:06Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
console	Ready	Preview	Mar 17, 2026 5:02pm

david-crespo · 2026-03-16T18:03:36Z

I will review in more detail, but it all looks solid at first glance. We were already tracking some of these issues in #1352, so thanks for fixing them!

david-crespo · 2026-03-16T18:08:50Z

app/pages/project/access/ProjectAccessPage.tsx

+      []
+    )
+  )
+


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)

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.

david-crespo · 2026-03-16T20:09:00Z

app/pages/system/silos/SilosPage.tsx

        })),
      ],
-      [navigate, silos]
+      [navigate, allSilos]


We need to make sure this hook behaves correctly when the silos request comes back (the old one would have been prefetched). I'm pretty sure it does — that's the point of this remove callback. On every re-run of the effect, we remove whatever the last one added before adding the new items.

I would leave this one not-prefetched, as you've done. Since quick actions are hidden until the user opens the menu, it's the perfect thing to defer.

console/app/hooks/use-quick-actions.tsx

Lines 91 to 106 in b43b995

export function useQuickActions(itemsToAdd: QuickActionItem[]) {

const location = useLocation()

// Add routes without declaring them in every `useQuickActions` call

const globalItems = useGlobalActions()

useEffect(() => {

const allItems = [...itemsToAdd, ...globalItems]

invariant(

allItems.length === new Set(allItems.map((i) => i.value)).size,

'Items being added to the list of quick actions must have unique `value` values.'

)

addActions(allItems)

return () => removeActions(allItems)

}, [itemsToAdd, globalItems, location.pathname])

}

david-crespo · 2026-03-17T17:04:04Z

app/pages/ProjectsPage.tsx

      </PageHeader>
      <TableActions>
-        <CreateLink to={pb.projectsNew()}>New Project</CreateLink>
+        <CreateLink to={pb.projectsNew()}>New project</CreateLink>


I did these out of perfectionism, but it doesn't matter in practice because the button text get all caps from CSS anyway.

david-crespo

Great!

david-crespo · 2026-03-17T17:18:20Z

app/pages/project/disks/DisksPage.tsx

+      [navigate, project, allDisks]
+    )
+  )
+


I tested the menu with 1000 disks at http://localhost:4000/projects/other-project/disks and filtering and scrolling were instantaneous. My computer is fast, but I think the menu is also just fast. It's just a big ul.

#3129 inspired me to add a couple more features to the quick actions menu, which in turn inspired a big refactor to avoid problems with possible duplicate entries. I also added a bunch of e2e tests that we probably should have had before. ### New features - `ctrl+n`/`ctrl+p` keyboard navigation (in addition to arrow keys) - "Go up" actions derived from breadcrumbs, so you can quickly navigate to parent pages - Links are real links, which means you can middle click them if you insist https://github.com/user-attachments/assets/d40d4d80-88b4-41e6-a41b-e7274520fa11 ### Refactor The old store held a flat list of `QuickActionItem`. https://github.com/oxidecomputer/console/blob/751a80e64b32bacbfc22379e70c24383685cb853/app/ui/lib/ActionMenu.tsx#L22-L28 `value` there is the text label displayed in the UI and (problematically) is also meant to uniquely identify the item. When calling pages (e.g., the project layout and the instance list page) called `useQuickActions` with a list of items, `useQuickActions` called `addActions`, which deduped the list of items based on `value`. The problem is that items with the same `value` in different groups could collide — removing by value would remove items you didn't meant to remove. We had an `invariant` call making sure the values were unique, but this is actually pretty bad in hindsight because it's probably possible for a user to name something to create a duplicate. (In practice we probably avoided this because all user-settable names are lower-case and all our nav items have upper case letters.) In any case, the new breadcrumbs feature added a new source of items that could potentially be a duplicate with something else in the list. That is what prompted me to get rid of the deduping mechanism altogether. The new store is a `Map<string, QuickActionItem[]>` keyed by an ID for each calling page, so registration is just `map.set(id, items)` and cleanup is `map.delete(id)`. Deduping is unnecessary because each source component owns its own slot. In theory each source is responsible for deduping its items, but the way the item lists are constructed, this is never really a problem. And if a duplicate sneaks in, it doesn't actually matter. Finally, since I was already messing everything up, I changed `QuickActionItem` to take both link and callback items, like we do for menu items. They're almost all links — only a few modal-opening actions are not.

oxidecomputer/console@ac30d2d...d697520 * [d697520c](oxidecomputer/console@d697520c) oxidecomputer/console#3135 * [c7362f2a](oxidecomputer/console@c7362f2a) oxidecomputer/console#3132 * [bde9b1d2](oxidecomputer/console@bde9b1d2) oxidecomputer/console#3131 * [f57bb8ae](oxidecomputer/console@f57bb8ae) oxidecomputer/console#3134 * [8cabc2de](oxidecomputer/console@8cabc2de) oxidecomputer/console#3133 * [751a80e6](oxidecomputer/console@751a80e6) oxidecomputer/console#3129

fmt

41e14fe

vercel bot deployed to Preview March 16, 2026 17:06 View deployment

notpeter self-assigned this Mar 16, 2026

notpeter requested a review from david-crespo March 16, 2026 17:18

david-crespo reviewed Mar 16, 2026

View reviewed changes

populate IP pools from system pools endpoint, not silo

c2a8469

vercel bot deployed to Preview March 17, 2026 16:45 View deployment

Silo detail -> Go to silo, plus some pointless casing consistency

c6e7581

vercel bot deployed to Preview March 17, 2026 17:02 View deployment

david-crespo reviewed Mar 17, 2026

View reviewed changes

david-crespo approved these changes Mar 17, 2026

View reviewed changes

david-crespo enabled auto-merge (squash) March 17, 2026 17:07

david-crespo disabled auto-merge March 17, 2026 17:08

fix test, add disk and affinity group items to quick actions

d92355a

david-crespo reviewed Mar 17, 2026

View reviewed changes

david-crespo enabled auto-merge (squash) March 17, 2026 17:18

david-crespo merged commit 751a80e into main Mar 17, 2026
6 checks passed

david-crespo deleted the better_cmd_k branch March 17, 2026 17:22

vercel bot deployed to Preview March 17, 2026 17:34 View deployment

david-crespo mentioned this pull request Mar 17, 2026

Quick actions refactor + new features #3131

Merged

david-crespo mentioned this pull request Mar 18, 2026

Bump web console (quick actions polish) oxidecomputer/omicron#10087

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

Improve "Jump To" (cmd-k) dialog#3129
david-crespo merged 5 commits intomainfrom
better_cmd_k

notpeter commented Mar 16, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

david-crespo commented Mar 16, 2026 •

edited

Loading

Uh oh!

david-crespo Mar 16, 2026

Uh oh!

david-crespo Mar 16, 2026

Uh oh!

david-crespo Mar 16, 2026

Uh oh!

david-crespo Mar 17, 2026

Uh oh!

david-crespo left a comment

Uh oh!

david-crespo Mar 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	export function useQuickActions(itemsToAdd: QuickActionItem[]) {
	const location = useLocation()

	// Add routes without declaring them in every `useQuickActions` call
	const globalItems = useGlobalActions()

	useEffect(() => {
	const allItems = [...itemsToAdd, ...globalItems]
	invariant(
	allItems.length === new Set(allItems.map((i) => i.value)).size,
	'Items being added to the list of quick actions must have unique `value` values.'
	)
	addActions(allItems)
	return () => removeActions(allItems)
	}, [itemsToAdd, globalItems, location.pathname])
	}

Conversation

notpeter commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

david-crespo commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

david-crespo Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

david-crespo Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

david-crespo Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

david-crespo Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

david-crespo left a comment

Choose a reason for hiding this comment

Uh oh!

david-crespo Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

notpeter commented Mar 16, 2026 •

edited

Loading

vercel bot commented Mar 16, 2026 •

edited

Loading

david-crespo commented Mar 16, 2026 •

edited

Loading