refactor: monitor field toggles [ENG-2582]

[speaker-ender]

Ticket ENG-2582

Description Of Changes

Refactors the filters and moves ignored and approved filters into a page settings dropdown.
This also enables filtering of the tree by ignored and approved resources.

Code Changes

• Adds page setting props to the ActionCenterLayout component to allow for a dropdown menu
• Adds separate settings to hide and show ignored and active resources in the action center
• Updates the menu and dropdown styles for selectable items

Steps to Confirm

1. Visit the Action Center screen
2. Navigate to a Datastore Monitor screen
3. Approve and ignore some resources in the results and in the tree
4. Refresh the page
5. Confirm that ignored and approved resources do not appear in the results or the tree
6. Confirm that toggling the page settings for show ignored and show approved resets the tree and appropriately filters the tree.

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	Actions	Updated (UTC)
fides-plus-nightly	Ready	Preview, Comment	Feb 25, 2026 6:45pm

1 Skipped Deployment

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

[greptile-apps]

Greptile Summary

This PR refactors the Action Center monitor field filtering by moving ignored and approved filters from the search form into a dedicated page settings dropdown. The implementation adds a settings icon with a badge counter in the header that allows users to toggle visibility of ignored and approved resources in both the results list and the tree view.

Key changes:

• Page settings dropdown added to ActionCenterLayout with badge indicator
• Tree and list filtering now supports showing/hiding ignored and approved resources based on page settings
• Search form dropdown no longer includes ignored/approved status options (moved to page settings)
• Tree automatically resets when page settings change to reflect filtered results
• Extracted intoDiffStatus helper to shared utils for better code reuse

Issues found:

• Logic error in onDeselect and onSelect handlers that prevents the page settings from updating correctly when toggling options

Confidence Score: 3/5

• This PR has a logic bug that will prevent the feature from working correctly
• The implementation is well-structured with proper separation of concerns, but contains critical logic errors in the event handlers that will cause the page settings toggles to not function. The bug is isolated to one file and has a straightforward fix.
• Pay close attention to clients/admin-ui/src/pages/data-discovery/action-center/datastore/[monitorId]/index.tsx - the event handlers need to be corrected before merging

Important Files Changed

Filename	Overview
clients/admin-ui/src/features/data-discovery-and-detection/action-center/ActionCenterLayout.tsx	adds optional page settings dropdown with badge to header, clean implementation
clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/MonitorTree.tsx	implements filtering logic for ignored/approved items in tree with proper reset on settings change
clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx	passes page settings to components and updates query logic to include ignored/approved filtering
clients/admin-ui/src/pages/data-discovery/action-center/datastore/[monitorId]/index.tsx	implements page settings dropdown with state management; has logic errors in onDeselect and onSelect handlers

_{Last reviewed commit: a3273b3}

[greptile-apps]

_{14 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (1)

clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/MonitorTree.tsx
duplicate useEffect hooks at lines 611-643 and 645-675 with nearly identical logic

The first useEffect (611-643) loads initial tree data when the component mounts or dependencies change, checking if treeData.length > 0 to prevent reloads.

The second useEffect (645-675) clears the tree state (setTreeData([]), setExpandedKeys([]), setNodePaginationState({})) then reloads when showIgnored or showApproved change.

This causes unnecessary double renders on initial mount since both hooks will run. The first hook should be removed, keeping only the second one that properly resets state when filters change.

    useEffect(() => {
      const getInitTreeData = async () => {
        fetchTreeDataWithDetails({
          nodeKey: "root",
          queryParams: {
            monitor_config_id: monitorId,
            diff_status: [
              ...DEFAULT_FILTER_STATUSES.flatMap(intoDiffStatus),
              ...(showIgnored ? intoDiffStatus("Ignored") : []),
              ...(showApproved ? intoDiffStatus("Approved") : []),
            ],
            size: TREE_PAGE_SIZE,
          },
          fastUpdateFn: (data) => {
            setTreeData(mapResponseToTreeData(data));
          },
        });
      };

      setTreeData([]);
      setExpandedKeys([]);
      setNodePaginationState({});
      getInitTreeData();

      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [showIgnored, showApproved]);

[speaker-ender]

@greptile

[greptile-apps]

_{14 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[lucanovera]

Nice work! The new filter button/dropdown looks nice with the new icon and the checkbox for state. I left a few comments on small code improvements, but I'll leave the approve too.

One callout I want to make is that we should try to fix the UX tree closing when you apply filters. I know that these filters are not supposed to be used very often, but if someone needs to use it and it closes each time it would be a really bad UX. I hope we can make a fast follow up to fix it.

[speaker-ender]

One callout I want to make is that we should try to fix the UX tree closing when you apply filters. I know that these filters are not supposed to be used very often, but if someone needs to use it and it closes each time it would be a really bad UX. I hope we can make a fast follow up to fix it.

Agreed and there is a follow up for that for the upcoming sprint.