Add CommandBar and DashboardDrawer to dashboard by kruulik · Pull Request #7660 · ethyca/fides

kruulik · 2026-03-16T15:32:59Z

Stack: #7628 → #7659 → this PR

Description Of Changes

Add the CommandBar header, DashboardDrawer side panel, and PostureBreakdownContent to the new alpha dashboard. The CommandBar displays an animated posture score badge with trend indicator, stat pills (DSRs pending, overdue, systems, violations), and a dark mode toggle. Clicking the posture score (in both CommandBar and PostureCard) opens the DashboardDrawer with a posture breakdown. This PR also restores the clickable score interaction on PostureCard that connects it to the drawer.

Code Changes

clients/admin-ui/src/home/CommandBar.tsx - New component: header bar with posture score badge (animated via useCountUp), diff indicator, stat pills derived from priority actions, and optional dark mode toggle
clients/admin-ui/src/home/DashboardDrawer.tsx - New component: Ant Design Drawer wrapper consuming the useDashboardDrawer global store
clients/admin-ui/src/home/PostureBreakdownContent.tsx - New component: drawer content showing posture dimension scores with band indicators
clients/admin-ui/src/home/PostureBreakdownContent.module.scss - Styles for posture breakdown layout
clients/admin-ui/src/home/PostureCard.tsx - Restore clickable score wrapper and openPostureDrawer callback connecting to DashboardDrawer
clients/admin-ui/src/home/PostureCard.module.scss - Add .clickableScore style
clients/admin-ui/src/home/HomeContainer.tsx - Import and render <CommandBar /> in the alphaDashboard layout header
clients/admin-ui/src/home/HomeDashboard.tsx - Add <DashboardDrawer /> to the dashboard layout
changelog/7660-dashboard-command-bar.yaml - Changelog entry

Steps to Confirm

Enable the alphaDashboard feature flag
Navigate to the Home page — verify the CommandBar appears at the top with a posture score, trend arrow, and stat pills
Click the posture score badge in the CommandBar — verify the DashboardDrawer opens from the right with a posture breakdown
Click the posture score in the PostureCard — verify the same drawer opens
Close the drawer — verify it closes cleanly
If alphaDarkMode is also enabled, verify the theme toggle appears in the CommandBar

Pre-Merge Checklist

… data Add the plumbing for the new Ant Design dashboard behind the alphaDashboard feature flag. Includes RTK Query API slice with all dashboard endpoints, MSW mock handlers with seed data, RadarChart and ChartText fidesui enhancements, and the HomeContainer flag gate. The actual Posture and Priority Actions cards will be added in a follow-up PR on top of this branch. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

vercel · 2026-03-16T15:33:20Z

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

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ignored	Preview	Mar 17, 2026 8:28pm
fides-privacy-center	Ignored		Mar 17, 2026 8:28pm

Move all type definitions from dashboard.slice.ts to a dedicated types.ts file per frontend guidelines. Convert union types (PostureBand, DiffDirection, ActionType, ActionSeverity, ActionStatus) to TypeScript enums. Update mock data and handlers to use enum values. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add the Posture score card with animated count-up, radar chart with dimension click-through, and agent annotation alert. Add the Priority Actions card with per-action routing, urgency grouping, and dimension filter support. Includes shared hooks and fidesui chart enhancements. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…, and RadarChart - Consolidate posture-constants.ts into features/dashboard/constants.ts - Replace router.push() with NextLink for proper a11y and prefetching - Add Spin loading wrapper to PostureCard - Move inline styles to SCSS modules (PostureBreakdownContent, PostureCard tooltip) - Extract RadarTooltipContent to its own exported component with themed bg - Use classNames package instead of manual class joining in RadarChart - Extract magic numbers as named constants in RadarChart - Add named export alongside default in HomeDashboard - Rename "this_week" urgency group to "scheduled" Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Remove openPostureDrawer, PostureBreakdownContent import, and clickable score wrapper from PostureCard — these are re-added in the subsequent dashboard-command-bar-pr branch where DashboardDrawer is rendered. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Moved to dashboard-command-bar-pr where the drawer is introduced. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add the CommandBar header with live posture score, diff indicator, and summary stat pills. Add the DashboardDrawer for posture breakdown details triggered from PostureCard and CommandBar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replace string literals with enum values (DiffDirection, PostureBand, ActionType, ActionSeverity, ActionStatus) and update posture-constants import to use the new features/dashboard/constants path. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…Card Move PostureBreakdownContent from posture-actions PR into this PR since it's only used for the drawer, which is introduced here. Re-add the clickable score wrapper and openPostureDrawer callback to PostureCard. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

This hook was removed from dashboard-posture-actions since the drawer is introduced in this PR. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Add fallback routes for POLICY_VIOLATION, PIA_UPDATE, and DSR_ACTION when IDs are missing - Remove unused ACTION_TYPE_ICON_NAME constant Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

clients/admin-ui/src/home/CommandBar.tsx

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

clients/admin-ui/src/home/useDashboardDrawer.ts

clients/admin-ui/src/home/CommandBar.tsx

gilluminate · 2026-03-16T23:12:28Z

clients/admin-ui/src/home/PostureCard.tsx

+                openPostureDrawer();
+              }
+            }}
+          >


OK solution for accessibility, but still possibly missing an aria-label (not sure what Statistic component provides)

Good catch, Ant's Statistic doesn't provide an aria label - this could be a good addition to our CustomStatistic HOC to improve accessibility.

clients/admin-ui/src/home/CommandBar.tsx

- Refactor drawer to use discriminated union instead of ReactNode to prevent stale data - PostureBreakdownContent now subscribes to RTK Query directly - Use Ant Design token names for Flex gaps (large, small) - Add aria-label to clickable posture score - Extract BAND_COLOR_TOKEN to shared constants Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

kruulik and others added 4 commits March 16, 2026 11:38

Merge branch 'main' into dashboard-infrastructure

b290afd

kruulik force-pushed the dashboard-posture-actions branch from dc2710e to 58dcedd Compare March 16, 2026 16:38

kruulik force-pushed the dashboard-command-bar-pr branch from 3f26eb2 to d2fb076 Compare March 16, 2026 16:40

vercel bot deployed to Preview – fides-plus-nightly March 16, 2026 16:45 View deployment

kruulik and others added 2 commits March 16, 2026 13:30

some cleanup

7706540

kruulik force-pushed the dashboard-command-bar-pr branch from d2fb076 to e6b5ff9 Compare March 16, 2026 17:35

vercel bot deployed to Preview – fides-plus-nightly March 16, 2026 17:40 View deployment

kruulik and others added 6 commits March 16, 2026 13:45

Remove useDashboardDrawer from this branch

3a23600

Moved to dashboard-command-bar-pr where the drawer is introduced. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add changelog entry for dashboard command bar PR

226d709

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add useDashboardDrawer to command-bar PR

69deb9c

This hook was removed from dashboard-posture-actions since the drawer is introduced in this PR. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

kruulik force-pushed the dashboard-command-bar-pr branch from e6b5ff9 to 69deb9c Compare March 16, 2026 17:45

kruulik and others added 2 commits March 16, 2026 13:48

deslop: remove AI-generated comments and style inconsistencies

660664c

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

deslop: remove AI-generated comments and style inconsistencies

228c403

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

vercel bot deployed to Preview – fides-plus-nightly March 16, 2026 17:53 View deployment

Merge branch 'dashboard-posture-actions' into dashboard-command-bar-pr

8893d34

vercel bot deployed to Preview – fides-plus-nightly March 16, 2026 18:05 View deployment

kruulik and others added 5 commits March 16, 2026 14:45

adjust for data

4d0b5d0

cleanup

ee87b9c

Merge branch 'dashboard-infrastructure' into dashboard-posture-actions

dc5dfca

reapply change

d0732ef

Address PR review feedback: add route fallbacks, remove dead code

0e3fc43

- Add fallback routes for POLICY_VIOLATION, PIA_UPDATE, and DSR_ACTION when IDs are missing - Remove unused ACTION_TYPE_ICON_NAME constant Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

greptile-apps bot reviewed Mar 16, 2026

View reviewed changes

clients/admin-ui/src/home/CommandBar.tsx Outdated Show resolved Hide resolved

clients/admin-ui/src/home/CommandBar.tsx Outdated Show resolved Hide resolved

kruulik and others added 5 commits March 16, 2026 15:33

Fix prettier formatting in dashboard mock handlers

3b6c76f

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Merge branch 'main' into dashboard-infrastructure

0a492e5

Merge branch 'dashboard-infrastructure' into dashboard-posture-actions

2d9047e

comments

a4f2a7b

Merge branch 'main' into dashboard-infrastructure

33f6d04

vercel bot deployed to Preview – fides-plus-nightly March 16, 2026 19:53 View deployment

kruulik added 2 commits March 16, 2026 15:58

remove headerlayout

f96f213

Merge branch 'dashboard-posture-actions' into dashboard-command-bar-pr

b90d2d3

vercel bot deployed to Preview – fides-plus-nightly March 16, 2026 20:03 View deployment

kruulik added 2 commits March 16, 2026 16:07

Merge branch 'dashboard-infrastructure' into dashboard-posture-actions

71f5e5b

Merge branch 'dashboard-posture-actions' into dashboard-command-bar-pr

43a2c48

gilluminate reviewed Mar 16, 2026

View reviewed changes

clients/admin-ui/src/home/useDashboardDrawer.ts Show resolved Hide resolved

gilluminate reviewed Mar 16, 2026

View reviewed changes

clients/admin-ui/src/home/CommandBar.tsx Outdated Show resolved Hide resolved

gilluminate reviewed Mar 16, 2026

View reviewed changes

clients/admin-ui/src/home/CommandBar.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview – fides-plus-nightly March 17, 2026 00:12 View deployment

resolve comments

7b6449b

vercel bot deployed to Preview – fides-plus-nightly March 17, 2026 00:51 View deployment

Replace layout comp

263a40b

vercel bot deployed to Preview – fides-plus-nightly March 17, 2026 04:02 View deployment

gilluminate approved these changes Mar 17, 2026

View reviewed changes

Base automatically changed from dashboard-posture-actions to main March 17, 2026 20:23

Merge branch 'main' into dashboard-command-bar-pr

3892b43

kruulik enabled auto-merge March 17, 2026 20:28

kruulik added this pull request to the merge queue Mar 17, 2026

Merged via the queue into main with commit d5252f7 Mar 17, 2026
46 checks passed

kruulik deleted the dashboard-command-bar-pr branch March 17, 2026 20:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add CommandBar and DashboardDrawer to dashboard#7660

Add CommandBar and DashboardDrawer to dashboard#7660
kruulik merged 35 commits intomainfrom
dashboard-command-bar-pr

kruulik commented Mar 16, 2026 •

edited by atlassian bot

Loading

Uh oh!

vercel bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gilluminate Mar 16, 2026

Uh oh!

kruulik Mar 17, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

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

Uh oh!

Description Of Changes

Code Changes

Steps to Confirm

Pre-Merge Checklist

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gilluminate Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kruulik commented Mar 16, 2026 •

edited by atlassian bot

Loading

vercel bot commented Mar 16, 2026 •

edited

Loading

kruulik Mar 17, 2026 •

edited

Loading