Skip to content

feat(CustomizableDashboard): widget catalog + DashboardCustomizePanel - #390

Open
ebellamy-bh wants to merge 3 commits into
feat/customizable-dashboardfrom
feat/dashboard-customize-panel
Open

feat(CustomizableDashboard): widget catalog + DashboardCustomizePanel#390
ebellamy-bh wants to merge 3 commits into
feat/customizable-dashboardfrom
feat/dashboard-customize-panel

Conversation

@ebellamy-bh

Copy link
Copy Markdown

Stacked on #389 (feat/customizable-dashboard) — review that first; this diff shows only the panel layer. Retarget to main after #389 merges.

Adds the add/remove layer to CustomizableDashboard: a WidgetDefinition catalog and a slide-in DashboardCustomizePanel where users show/hide widgets and reset the layout — the customization UX waggleline's dashboard "Customize" button has been waiting on (its TODO), generalized from waggleline's board-column config offcanvas.

What it does

  • WidgetDefinition catalog type (id, title, description, lucide icon, category)
  • DashboardCustomizePanelSheet + Switch composition: widgets grouped by category, show/hide toggles, "N of M widgets shown" count, optional Reset layout action. Exported standalone for hosts that render their own trigger or persist visibility elsewhere.
  • CustomizableDashboard integration — passing widgets adds a toolbar Customize button that opens the panel; hiding filters at render time so a widget keeps its column slot and unhiding restores its previous position
  • Visibility persistence follows the same rules as order/layout: {storageKey}-dashboard-hidden in localStorage, or controlled hiddenIds/onHiddenChange (+ defaultHiddenIds)
  • Reset clears saved order, layout, and hidden state back to the props defaults, firing all three change callbacks for controlled hosts

Screenshots

Panel open with Vitals toggled off — note the widget removed live from the grid behind, the muted hidden row, and the count:

Light Dark
Customize panel light Customize panel dark

Provenance

UX generalized from waggleline's BoardColumnConfigModal (add/remove/reorder offcanvas for kanban columns), minus the column-specific color/emoji editing. Downstream: waggleline's dashboard Customize TODO and echart-sim's per-page widget catalogs (adoption PRs planned after release).

Testing

  • 8 unit tests (grouping, toggle intent, controlled + persisted visibility, position restore after unhide, reset semantics)
  • Stories: standalone panel + full add/remove flow on the dashboard (WithWidgetCatalog)
  • typecheck / lint / format / rtl:scan clean; full suite 596/596

Adds a WidgetDefinition catalog and a slide-in customize panel
(Sheet + Switch) with category grouping, show/hide toggles, and layout
reset — UX generalized from waggleline's board-column config. When
'widgets' is set the dashboard toolbar gains a Customize button;
visibility persists via storageKey or hiddenIds/onHiddenChange.
…ize-panel

# Conflicts:
#	src/components/CustomizableDashboard/MAINTAINERS.md
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Aug 23, 2026

Copy link
Copy Markdown

Deploying ui with  Cloudflare Pages  Cloudflare Pages

Latest commit: bb9fcd8
Status: ✅  Deploy successful!
Preview URL: https://25061e8e.ui-6d0.pages.dev
Branch Preview URL: https://feat-dashboard-customize-pan.ui-6d0.pages.dev

View logs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant