Replace filter modal with a filter bar

[lucanovera]

Ticket ENG-1900

Description Of Changes

Replace the filter modal with a new filter bar in the new request manager screen. Rearrange elements in the header to have filter bar on top and actions in a second line below. Add a refresh button for results. Adds results count in header.

Notes:

• The second line looks a bit empty, specially on the left side. We'll be adding the checkbox to select all results in a followup tickets that will be placed there.
• There is no responsiveness handling in the filter bar yet, this will be added in a future ticket when we add more filters and becomes necessary.

Code Changes

• Modified BulkActionsDropdown.tsx to show the results count in addition to selected items. This avoids needing to scrolling to the pagination to see the result count.
• Added new variant to out Debounced search input. The new variant is used in the filter bar.
• Updates usePrivacyRequestsFilters.ts to combine the split filters into just one filter state
• Adds filter bar component
• Renames modalFilters prop to just filters
• Rearranged Dashboard elements to show filter bar and then actions in a separate row
• Added a refresh button actions
• Fixes date filter

Steps to Confirm

1. Login to admin-ui (Recommended to use the preview link with nightly build credentials)
2. Go to /settings/about and enable the "Privacy request v2" feature flag
3. Go to the Privacy Request > Request Manager (new) option
4. Check search bar works and url update is throttled
5. Check the date filter works
6. Check the status and request type filters work
7. Check the refresh button works, you can try approving a request and refreshing to see the status update. Or you can submit a new request from nightly build privacy center and refresh to see it appear.
8. Check the results count is shown next to the Actions button
9. Check when you select items, the count is shown next to the results count

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
  • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
  • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • All UX related changes have been reviewed by a designer
  • No UX review needed
• Followup issues:
  • Followup issues created
  • No followup issues
• Database migrations:
  • Ensure that your downrev is up to date with the latest revision on main
  • Ensure that your downgrade() migration is correct and works
    • If a downgrade migration is not possible for this change, please call this out in the PR description!
  • No migrations
• Documentation:
  • Documentation complete, PR opened in fidesdocs
  • Documentation issue created in fidesdocs
  • If there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
  • No documentation updates required

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
fides-plus-nightly	Ready	Preview	Comment	Nov 12, 2025 5:30pm

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
fides-privacy-center	Ignored			Nov 12, 2025 5:30pm

[lucanovera]

@greptileai review again

[lucanovera]

@greptileai review again

[greptile-apps]

Greptile Overview

Greptile Summary

This PR converts the privacy request filtering UI from a modal-based approach to an inline filter bar, improving UX by making filters more accessible and visible.

Key Changes:

• Replaced modal filter interface with inline PrivacyRequestFiltersBar component displayed at the top of the dashboard
• Consolidated separate search and modal filter states into a single unified filter state in usePrivacyRequestsFilters
• Added refresh button to manually reload privacy requests
• Enhanced BulkActionsDropdown to display total results count alongside selected items
• Extended search input components with new "compact" variant for the filter bar
• Rearranged dashboard layout with filters in first row and actions (bulk actions, refresh, export) in second row

Critical Issue:

• The getDateRange() function in PrivacyRequestFiltersBar.tsx has incomplete logic that breaks single date selection - it only handles the case when both dates are selected, but doesn't handle when only one date is set

Notes:

• The old PrivacyRequestFiltersModal.tsx file remains in the codebase but is no longer imported or used - consider removing it in a cleanup commit
• The implementation is clean and follows existing patterns, with good separation of concerns between filter state management and UI components

Confidence Score: 3/5

• This PR has a critical date filter bug that needs to be fixed before merging
• Score reflects one critical logical bug in date range handling that will break user functionality when selecting a single date, but otherwise the refactoring is well-structured and clean
• Pay close attention to PrivacyRequestFiltersBar.tsx - the date range logic must be fixed to handle single date selections

Important Files Changed

File Analysis

Filename	Score	Overview
clients/admin-ui/src/features/privacy-requests/dashboard/PrivacyRequestFiltersBar.tsx	2/5	New filter bar component with critical date range logic bug that breaks single date selection
clients/admin-ui/src/features/privacy-requests/dashboard/PrivacyRequestsDashboard.tsx	5/5	Clean refactor replacing modal with filter bar, added refresh button and results count display
clients/admin-ui/src/features/privacy-requests/dashboard/hooks/usePrivacyRequestsFilters.ts	5/5	Simplified filter state management by consolidating modal and search filters into one state group

[greptile-apps]

_{9 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[lucanovera]

@speaker-ender fyi this is ready for review now

[speaker-ender]

Minor nits/questions but looks good!

[speaker-ender]

I like how the return type is explicit about valid values.
Why not apply this to the filters/component props as well?