feat(ui): bring command palette to feature parity with flanksource-ui#3302
Conversation
The command palette's config search hit /db/config_detail with an ilike pattern, which treated the entire query as a single literal substring. Grammar syntax like `type=pod prometheus` or `tag.cluster=beta-cluster` never matched anything. Switch searchConfigs to POST /resources/search so the query runs through the PEG grammar in duty/query/grammar. External users/groups still go through PostgREST — they have no grammar surface.
|
Warning Review limit reached
Next review available in: 12 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (6)
✨ Finishing Touches🧪 Generate unit tests (beta)
✨ Simplify code
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
The previous command palette was a one-off PostgREST query that only searched configs, users, and groups with literal ilike patterns. The flanksource-ui palette is a grammar-aware, multi-resource search with type toggles, directives, history, and result grouping. This brings `ui/` to parity. - Switch `api/search.ts` to a single `searchResources` call against `/resources/search` for all six resource kinds (configs, canaries, checks, config_changes, playbooks, connections), and define the `SearchedResource` / `SearchSelector` / `SelectedResources` types the response uses. - Add `api/agents.ts` (`LocalAgentId`, `isLocalAgent`, `getAgentByIDs`) and `getConfigChangeConfigMappings` on `api/configs.ts` so the palette can resolve agent names and group changes under their parent config. - Rewrite `CommandPalette.tsx`: per-type checkboxes, `#config,change` directives, suggested queries, localStorage-backed search history and type preferences, config-change grouping, tag rendering on config results, agent badges, debounced search, loading/error/empty states, keyboard navigation (↑↓ ↵ esc ⌘K), and the recents list now covers every resource kind. - Drop the old external-user/external-group code path — those tables have no grammar surface anywhere in the repo, so the old PostgREST search never did anything useful and only added noise. - Extend `lib/recents.ts` `RecentKind` to cover all six resource kinds and update `RecentlyUsedPanel.tsx` to render them. Behavior is now grammar-aware: `type=pod prometheus`, `tag.cluster=beta-cluster`, `labels.app=cert-manager`, etc. all run through the same PEG parser as flanksource-ui.
adityathebe
changed the title
The previous layout was constrained to `max-w-2xl` (Modal's `lg` size) and the checkbox row lived inside the scrolling body, so it scrolled away with the results. The flank source-ui palette is wider (`max-w-3xl`) and pins the search input + type toggles at the top while the results list scrolls underneath. - Switch Modal to `size="full"` with `className="max-w-3xl"` so the dialog spans the full width of the parent up to 48rem. - Move the type checkboxes into the `headerSlot` (alongside the search input) and use the Modal's `footer` prop for the keyboard hints, so both stay pinned while the body scrolls. - Drop the `bg-muted/30` background on the checkbox group and the `p-2` inner padding on the result / suggestion / recent lists (the Modal's body already provides `px-density-4 py-density-3`).
The previous fix moved the checkboxes into the Modal header but the results body was still scrolling off the top of the dialog instead of scrolling internally. The reason is the clicky-ui `Modal` body has `flex-1 overflow-auto` with no `min-h-0`, so the default `min-h: auto` on flex items keeps it as tall as its content, the dialog grows past its `max-h-[82vh]`, and the overflow never reaches the body. Add `[&>*]:min-h-0` to the dialog className so every direct child (header, body, footer) is allowed to shrink. The body now respects its `flex-1` allocation and its `overflow-auto` triggers; the header (input + type toggles) and footer (keyboard hints) stay pinned.
1 participant
Follow-up fix on top of the parity commit. Three issues with the search palette layout:
Width — was
max-w-2xl(size="lg", ~672px) which read as half-width. Switched tosize="full"+className="max-w-3xl"so the dialog spans the full available width up to 48rem.Sticky header — the type checkboxes used to live in the scrolling body. Now they live in the Modal's
headerSlot(next to the search input) and the keyboard hints live in the Modal'sfooter, so both stay pinned.Body not actually scrolling — even with the header/footer moved out of the body, the results didn't scroll inside the dialog: they pushed the dialog past its
max-h-[82vh]and the whole thing scrolled as a unit. The cause is the clicky-uiModalbody usesflex-1 overflow-autowithoutmin-h-0, so the defaultmin-h: autoon flex items keeps the body as tall as its content and the overflow never reaches the body. Fixed by adding[&>*]:min-h-0to the dialog className, which lets every direct child (header, body, footer) actually shrink to itsflex-1allocation. The body'soverflow-autonow triggers as expected; the header (input + type toggles) and footer (keyboard hints) stay pinned while results scroll underneath.Also dropped the
bg-muted/30background on the checkbox group and the redundant innerp-2on the result / suggestion / recent lists (the Modal's body already providespx-density-4 py-density-3).PR includes the prior commit that brought the palette to feature parity (grammar passthrough, 6 resource kinds, history, directives, suggested queries, config-change grouping, agent badges).