Dashboard PostureCard and PriorityActionsCard by kruulik · Pull Request #7659 · ethyca/fides

kruulik · 2026-03-16T15:15:06Z

Ticket ENG-2775

Description Of Changes

Add the core dashboard card components on top of the infrastructure from #7628. This PR introduces:

PostureCard — privacy posture score with animated count-up, radar chart visualization, dimension click-through filtering, and agent annotation alert
PriorityActionsCard — tabbed list (Act Now / This Week / When Ready) with per-action routing via ACTION_CTA config, urgency grouping by severity, and dimension filter support
RadarChart/ChartText enhancements in fidesui for tooltip content and dimension click handling
Shared hooks: useCountUp, useDashboardDrawer, useDimensionFilter

CommandBar and DashboardDrawer follow in a separate PR on top of this branch.

All behind the alphaDashboard feature flag (dev-only).

Code Changes

clients/admin-ui/src/home/PostureCard.tsx — Posture score card with RadarChart, animated score, dimension click-to-filter
clients/admin-ui/src/home/PostureCard.module.scss — PostureCard styles
clients/admin-ui/src/home/PostureBreakdownContent.tsx — Drawer content for posture dimension breakdown
clients/admin-ui/src/home/PriorityActionsCard.tsx — Tabbed priority actions with per-action-type routing and icons
clients/admin-ui/src/home/PriorityActionsCard.module.scss — PriorityActionsCard styles
clients/admin-ui/src/home/HomeDashboard.tsx — Wire up PostureCard + PriorityActionsCard in grid layout
clients/admin-ui/src/home/posture-constants.ts — Band config, dimension labels, shared constants
clients/admin-ui/src/home/useCountUp.ts — Animated number count-up hook
clients/admin-ui/src/home/useDashboardDrawer.ts — Global drawer state via useSyncExternalStore
clients/admin-ui/src/home/useDimensionFilter.ts — URL-param-based dimension filter state
clients/fidesui/src/components/charts/RadarChart.tsx — Add onDimensionClick and tooltipContent props
clients/fidesui/src/components/charts/ChartText.tsx — Refinements for radar chart labels

Steps to Confirm

Enable alphaDashboard flag in dev
Navigate to Home — should see PostureCard (left, 8-col) with radar chart and PriorityActionsCard (right, 16-col) with tabbed actions
Click a radar chart dimension — PriorityActionsCard filters to related action types
Click a dimension filter tag's close button — filter clears
Switch between Act Now / This Week / When Ready tabs — actions re-group by urgency
Click an action's CTA button — navigates to the correct route for that action type

Pre-Merge Checklist

Issue requirements met
All CI pipelines succeeded
CHANGELOG.md updated
- Updates unreleased work already in Changelog, no new entry necessary
UX feedback:
- All UX related changes have been reviewed by a designer
Followup issues:
- Followup PR for CommandBar and DashboardDrawer (dashboard-command-bar-pr)
Database migrations:
- No migrations
Documentation:
- No documentation updates required

… 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:15:14Z

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 6:52pm
fides-privacy-center	Ignored		Mar 17, 2026 6:52pm

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

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>

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

greptile-apps · 2026-03-16T18:09:54Z

Greptile Summary

This PR adds PostureCard and PriorityActionsCard components to the new alpha dashboard, along with supporting infrastructure: an animated count-up hook, a cross-component dimension filter via useSyncExternalStore, and radar chart interactivity enhancements in fidesui (click-through, tooltips, configurable outer radius).

Several ACTION_CTA route functions access action_data properties (system_id, request_id) without fallbacks, which will produce invalid navigation paths (e.g., /systems/configure/undefined) if the data is missing — unlike STEWARD_ASSIGNMENT which already handles this correctly
The fixed Row height in HomeDashboard (h-[420px]) will clip content on mobile breakpoints where both columns stack vertically at xs={24}
ACTION_TYPE_ICON_NAME in constants.ts is defined but never used — PriorityActionsCard has its own inline ACTION_TYPE_ICON mapping with JSX elements
The PR is at 752 lines changed across 15 files, which is at the boundary of the 500-line / 15-file guideline — acceptable given it's all behind the alphaDashboard feature flag

Confidence Score: 3/5

Behind a dev-only feature flag, but the missing route fallbacks will cause broken navigation for certain action types.
The core component architecture is clean and well-structured. However, 3 of 7 ACTION_CTA route functions lack fallbacks for missing action_data properties, which will produce invalid URLs at runtime. The mobile layout issue with fixed Row height is also a concern. These are real bugs, but the feature-flag scope limits blast radius.
Pay close attention to clients/admin-ui/src/features/dashboard/constants.ts (missing route fallbacks) and clients/admin-ui/src/home/HomeDashboard.tsx (mobile layout).

Important Files Changed

Filename	Overview
clients/admin-ui/src/features/dashboard/constants.ts	New dashboard constants with route configs, urgency grouping, and icon mappings. Missing fallbacks for `system_id`/`request_id` in `ACTION_CTA` routes could cause navigation to invalid URLs. Unused `ACTION_TYPE_ICON_NAME` constant.
clients/admin-ui/src/home/HomeDashboard.tsx	Grid layout with PostureCard and PriorityActionsCard. Fixed row height may clip content on mobile breakpoints where columns stack vertically.
clients/admin-ui/src/home/PostureCard.tsx	Posture card component with radar chart, animated score, and dimension click-to-filter. Well-structured with proper memoization.
clients/admin-ui/src/home/PriorityActionsCard.tsx	Tabbed priority actions card with urgency grouping, dimension filtering, and per-action CTA routing. Clean component structure.
clients/admin-ui/src/home/useCountUp.ts	Clean animation hook using requestAnimationFrame with proper cleanup. Ease-out animation for count-up effect.
clients/admin-ui/src/home/useDimensionFilter.ts	Lightweight external store for cross-component dimension filter state using `useSyncExternalStore`. Clean implementation.
clients/fidesui/src/components/charts/RadarChart.tsx	Extended RadarChart with click-through interaction, tooltip support, and configurable outer radius. Hit areas added for tick and dot elements. Well-structured enhancement.

_{Last reviewed commit: 228c403}

clients/admin-ui/src/features/dashboard/constants.ts

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

clients/admin-ui/src/features/dashboard/constants.ts

- 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>

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

gilluminate

LGTM!

kruulik added a commit that referenced this pull request Mar 16, 2026

Add changelog entry for PR #7659

53a6fc8

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

kruulik force-pushed the dashboard-posture-actions branch from 53a6fc8 to dc2710e Compare March 16, 2026 15:26

kruulik changed the title ~~Dashboard PostureCard, PriorityActionsCard, and CommandBar~~ Dashboard PostureCard and PriorityActionsCard Mar 16, 2026

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

kruulik mentioned this pull request Mar 16, 2026

Add CommandBar and DashboardDrawer to dashboard #7660

Merged

12 tasks

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

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

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

some cleanup

7706540

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

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>

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

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:58 View deployment

kruulik marked this pull request as ready for review March 16, 2026 18:01

kruulik requested a review from a team as a code owner March 16, 2026 18:01

kruulik requested review from jpople and removed request for a team March 16, 2026 18:01

greptile-apps bot reviewed Mar 16, 2026

View reviewed changes

kruulik added 4 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>

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

kruulik and others added 3 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

vercel bot had a problem deploying to Preview – fides-plus-nightly March 16, 2026 19:36 Failure

kruulik added 2 commits March 16, 2026 15:50

Merge branch 'main' into dashboard-infrastructure

33f6d04

remove headerlayout

f96f213

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

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

71f5e5b

kruulik requested review from lucanovera and removed request for jpople March 17, 2026 14:25

Base automatically changed from dashboard-infrastructure to main March 17, 2026 17:42

Merge branch 'main' into dashboard-posture-actions

d0f8c1a

gilluminate approved these changes Mar 17, 2026

View reviewed changes

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

Merged via the queue into main with commit 98b093a Mar 17, 2026
46 of 49 checks passed

kruulik deleted the dashboard-posture-actions branch March 17, 2026 20:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dashboard PostureCard and PriorityActionsCard#7659

Dashboard PostureCard and PriorityActionsCard#7659
kruulik merged 21 commits intomainfrom
dashboard-posture-actions

kruulik commented Mar 16, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

greptile-apps bot commented Mar 16, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gilluminate left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

kruulik commented Mar 16, 2026 • edited 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!

greptile-apps bot commented Mar 16, 2026

Greptile Summary

Confidence Score: 3/5

Important Files Changed

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gilluminate left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kruulik commented Mar 16, 2026 •

edited

Loading

vercel bot commented Mar 16, 2026 •

edited

Loading