ENG-2716: Add rules tab to policy detail page

[gilluminate]

Ticket ENG-2716

Description Of Changes

Add the Rules tab implementation to the read-only DSR policy detail page. Expands the placeholder rules tab into a functional Collapse-based view that displays each rule's details including name, key, action type, masking strategy (for erasure rules), and storage destination (for access rules). Also adds a new masking strategies API endpoint, a reusable InfoPopover component, and improves accessibility on InfoTooltip.

Code Changes

• clients/admin-ui/src/features/common/InfoPopover.tsx - New reusable popover component with info icon, supporting hover and focus triggers
• clients/admin-ui/src/features/common/InfoTooltip.tsx - Added focus trigger and tabIndex={0} for keyboard accessibility
• clients/admin-ui/src/features/policies/rules/RulePanel.tsx - New read-only form panel displaying rule details (name, key, action type, masking strategy, storage destination)
• clients/admin-ui/src/features/policies/rules/RulesTab.tsx - Expanded from placeholder to Collapse-based rule list with empty state
• clients/admin-ui/src/features/policies/utils/formatMaskingStrategyName.ts - Utility to convert snake_case strategy names to human-readable labels (e.g. "aes_encrypt" → "AES Encrypt")
• clients/admin-ui/src/features/policies/utils/formatMaskingStrategyName.test.ts - Unit tests for the formatting utility
• clients/admin-ui/src/features/policy/policy.slice.ts - Added getMaskingStrategies RTK Query endpoint for /masking/strategy
• clients/admin-ui/src/pages/privacy-requests/policies/[key].tsx - Wires policy.rules into RulesTab, shows rule count in tab label
• clients/fidesui/src/ant-theme/global.scss - Added styles for form item explain/extra text (smaller font, neutral color)
• clients/fidesui/src/index.ts - Exported PopoverProps type

Steps to Confirm

1. Navigate to Privacy Requests > Policies and click on a policy
2. Verify the "Rules" tab shows the count of rules (e.g. "Rules (2)")
3. For a policy with rules, verify each rule is shown in an expandable collapse panel with its name and action type tag
4. For a single-rule policy, the panel should be expanded by default
5. For an erasure rule, verify the masking strategy dropdown and info popover appear
6. For an access rule, verify the storage destination field appears
7. For a policy with no rules, verify the empty state message is shown
8. Verify the InfoPopover and InfoTooltip are keyboard-accessible (Tab to focus, shows on focus)

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:
  • No followup issues
• Database migrations:
  • No migrations
• Documentation:
  • No documentation updates required

Made with Cursor

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ready	Preview, Comment	Feb 23, 2026 6:28pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		Feb 23, 2026 6:28pm

[greptile-apps]

Greptile Summary

Adds a functional rules tab to the DSR policy detail page, expanding from a placeholder to display policy rules in collapsible panels. The implementation includes read-only form views for each rule showing name, key, action type, and conditional fields (masking strategy for erasure rules, storage destination for access rules).

Key Changes

• New RulePanel component displays individual rule details in a disabled form
• RulesTab component now renders rules in Ant Design Collapse panels with empty state handling
• Added InfoPopover reusable component for displaying additional information with keyboard accessibility
• Enhanced InfoTooltip with focus trigger for better accessibility
• New formatMaskingStrategyName utility converts snake_case to human-readable format
• Added /masking/strategy API endpoint via RTK Query to fetch available masking strategies
• Policy detail page shows rule count in tab label and passes rules data to RulesTab
• Comprehensive Cypress test coverage for the new functionality

Implementation Quality

• Proper use of React hooks (useMemo) for performance optimization
• Conditional API fetching (masking strategies only loaded for erasure rules)
• Good test coverage including accessibility checks
• Follows existing patterns for read-only forms and collapsible panels

Confidence Score: 4/5

• Safe to merge with one minor style suggestion
• Clean implementation following established patterns with good test coverage. One style preference violation (using div instead of Flex component) that doesn't affect functionality.
• No files require special attention - the style suggestion in RulePanel.tsx is optional

Important Files Changed

Filename	Overview
clients/admin-ui/src/features/common/InfoPopover.tsx	New reusable popover component with accessibility features (hover/focus triggers, keyboard navigation)
clients/admin-ui/src/features/policies/rules/RulePanel.tsx	New read-only form displaying rule details with conditional fields based on action type; uses div elements within dl which could use Flex
clients/admin-ui/src/features/policies/rules/RulesTab.tsx	Expanded from placeholder to functional component with collapsible rule panels and empty state handling
clients/admin-ui/src/features/policy/policy.slice.ts	Adds getMaskingStrategies query endpoint to fetch available masking strategies
clients/admin-ui/src/pages/privacy-requests/policies/[key].tsx	Wires rules data to RulesTab and displays rule count in tab label with proper memoization dependencies

_{Last reviewed commit: a2b7206}

[greptile-apps]

_{13 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[speaker-ender]

@gilluminate

• Is there a link to the mock up described in the ticket?
• Might be a Jack question, but why plain text for the count instead of using a badge?
  Minor nits/comments but otherwise functions as intended and can approve if the design is correct.

[gilluminate]

@speaker-ender I applied your 2 suggestions. Thanks! Jack wants to leave the parentheses as is for now.