refactor: monitor fields filters [ENG-2450] by speaker-ender · Pull Request #7411 · ethyca/fides

speaker-ender · 2026-02-18T15:08:20Z

Ticket ENG-2450

Description Of Changes

Refactoring the search filters on the monitor fields screen to be dropdowns instead of using the tree filter component

Code Changes

Improved the useSearchForm hook to have better types
Added a new search filter component for the monitor fields screen

Steps to Confirm

Visit the Action Center screen
Confirm that all of the filters function as expected and update the url
Click on an available Datastore monitor type
Confirm that the filters are now matching the new select/filter bar style
Verify that there are no regressions in the filtering functionality (updating results, updating url, refreshing available filters)

Pre-Merge Checklist

vercel · 2026-02-18T15:08:25Z

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

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ready	Preview, Comment	Feb 20, 2026 3:15pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		Feb 20, 2026 3:15pm

speaker-ender · 2026-02-18T15:31:32Z

...src/features/data-discovery-and-detection/action-center/forms/MonitorFieldSearchForm.util.ts

+export type MonitorFieldSearchForm =
+  v.InferOutput<typeof MonitorFieldSearchFormQuerySchema> extends Values<
+    typeof MonitorFieldSearchFormQueryState
+  >
+    ? v.InferOutput<typeof MonitorFieldSearchFormQuerySchema>
+    : never;


Temporary method of handling schema type checking between nuqs and valibot.
Future type handling should also bind valibot to ant forms for better interop.

consider adding this explanation as a comment in the code

speaker-ender · 2026-02-18T15:35:25Z

clients/admin-ui/src/features/data-discovery-and-detection/action-center/hooks/useSearchForm.ts

+    form.submit();
+
+  const onFinish: FormProps<FormType>["onFinish"] = (values) => {
+    const { success, output } = safeParse(schema, values);


Better than what we had previously.
Ideally the parse success/fail handling should match ant.
This can be done by either injecting/overriding ant's validator (preferred) or by syncing ant's settings with valibot.

greptile-apps · 2026-02-18T17:26:19Z

Greptile Summary

This PR refactors the monitor fields screen filters from a tree-based Filter component to dropdown Select components, introducing valibot for schema validation alongside the existing nuqs URL state management. The useSearchForm hook is updated to support valibot schemas and a form submission flow (onFieldsChange → form.submit() → onFinish with validation). The old MonitorFieldFilters (406 lines) and useMonitorFieldsFilters hook are replaced by the new MonitorFieldsSearchForm component and MonitorFieldSearchForm.util.ts.

Adds valibot as a new dependency and bumps nuqs from ^2.4.3 to ^2.8.8
Adds "Datastore Filters" RTK Query cache tag with proper invalidation across multiple mutation endpoints
Removes trailing ellipsis from status labels (e.g., "Classifying..." → "Classifying") for cleaner dropdown display
The useFilters.ts file is no longer imported anywhere but was not deleted — it should be cleaned up
The data-testid="monitor-type-filter" on the status dropdown appears to be a copy-paste error from MonitorListSearchForm
requestData from useSearchForm is destructured but unused in page.tsx, while filter values are read imperatively via form.getFieldValue() — consider using the reactive requestData instead

Confidence Score: 3/5

Generally safe refactor with minor issues that should be addressed before merge.
The core refactoring logic is sound — replacing the tree filter with dropdowns and adding valibot validation. However, there are a few issues: a misleading data-testid that could break or confuse tests, redundant filtering logic, an orphaned useFilters.ts file, and the use of imperative form reads instead of reactive state for query parameters. None of these are showstoppers, but they represent code quality concerns worth addressing.
Pay close attention to fields/page.tsx (imperative form reads for query construction) and MonitorFieldsSearchForm.tsx (incorrect data-testid, redundant filter logic).

Important Files Changed

Filename	Overview
clients/admin-ui/src/features/data-discovery-and-detection/action-center/hooks/useSearchForm.ts	Refactored to use valibot schema validation and form submission pattern instead of inline value translation. Minor typo in comment.
clients/admin-ui/src/features/data-discovery-and-detection/action-center/forms/MonitorFieldsSearchForm.tsx	New search form component with dropdown filters. Has redundant filter logic in data category options builder and a copy-pasted data-testid that misidentifies the element.
clients/admin-ui/src/features/data-discovery-and-detection/action-center/forms/MonitorFieldSearchForm.util.ts	New utility defining valibot schema, nuqs query state, and type for the monitor field search form. Clean separation of concerns.
clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx	Replaced old filter component and search with new form-based approach. Uses imperative form.getFieldValue() instead of reactive state for query construction; requestData is unused.
clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/MonitorFields.const.ts	Removed trailing ellipsis from status labels (e.g., "Classifying..." → "Classifying"). Consistent update across all mappings.
clients/admin-ui/src/features/data-discovery-and-detection/action-center/MonitorList.const.ts	Added valibot schema and type for the monitor search form. Changed search default from empty string to parseAsString (nullable).
clients/admin-ui/src/features/data-discovery-and-detection/action-center/MonitorList.tsx	Updated to use new schema-based useSearchForm pattern and onFinish-based pagination reset.
clients/admin-ui/src/features/data-discovery-and-detection/discovery-detection.slice.ts	Added "Datastore Filters" invalidation tag to multiple mutation endpoints for automatic filter refresh.

_{Last reviewed commit: ac052af}

greptile-apps

_{15 files reviewed, 4 comments}

_{Edit Code Review Agent Settings | Greptile}

...ui/src/features/data-discovery-and-detection/action-center/forms/MonitorFieldsSearchForm.tsx

greptile-apps · 2026-02-18T17:26:31Z

clients/admin-ui/src/features/data-discovery-and-detection/action-center/hooks/useSearchForm.ts

  };

-  // Unfortunate need for effect due to current routing strategy
+  // Unfortunate need for effect due to current routin strategy


Typo: "routin" → "routing"

Suggested change

// Unfortunate need for effect due to current routin strategy

// Unfortunate need for effect due to current routing strategy

greptile-apps · 2026-02-18T17:26:32Z

clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx

  const baseMonitorFilters = {
    path: {
      monitor_config_id: monitorId,
    },
    query: {
      staged_resource_urn: selectedNodeKeys.map((key) => key.toString()),
-      search: search.searchProps.value,
-      diff_status: resourceStatus
-        ? resourceStatus.flatMap(intoDiffStatus)
-        : undefined,
-      confidence_bucket: confidenceBucket || undefined,
-      data_category: dataCategory || undefined,
+      search: form.getFieldValue("search"),
+      diff_status:
+        form.getFieldValue("resource_status")?.flatMap(intoDiffStatus) ||
+        undefined,
+      confidence_bucket: form.getFieldValue("confidence_bucket") || undefined,
+      data_category: form.getFieldValue("data_category") || undefined,
    },
  };


form.getFieldValue is not reactive

baseMonitorFilters reads filter values via form.getFieldValue(), which is an imperative read of Ant Design's form store. Unlike the previous implementation which used reactive state from useMonitorFieldsFilters, these calls only return the value at render time and don't subscribe to changes. The object will only update when something else triggers a re-render (e.g., nuqs state update propagating back).

Since useSearchForm already returns requestData (which is derived from the reactive nuqs searchForm state), consider using requestData here instead of form.getFieldValue() to ensure filter values are always in sync with the URL state. Currently requestData is destructured on line 84 but never used.

gilluminate

Greptile's feedback seems legit, and I agree with those. Three nitpicks of my own to add to that.

gilluminate · 2026-02-18T19:32:39Z

...src/features/data-discovery-and-detection/action-center/forms/MonitorFieldSearchForm.util.ts

+export type MonitorFieldSearchForm =
+  v.InferOutput<typeof MonitorFieldSearchFormQuerySchema> extends Values<
+    typeof MonitorFieldSearchFormQueryState
+  >
+    ? v.InferOutput<typeof MonitorFieldSearchFormQuerySchema>
+    : never;


consider adding this explanation as a comment in the code

clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx

...min-ui/src/features/data-discovery-and-detection/action-center/fields/MonitorFields.const.ts

wip: ehhhh wip: finally something somewhat better chore: clean ups fix: minor styles fix: last of the issues chore: update changelog fix: autofocus fix: filter data categories lint and format fix: datastore filter refresh

gilluminate · 2026-02-20T16:56:27Z

clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx

+      path: { monitor_config_id: monitorId },
+      query: {
+        confidence_bucket: query.confidence_bucket ?? undefined,
+        data_category: query.confidence_bucket ?? undefined,


copy/paste error?

Suggested change

data_category: query.confidence_bucket ?? undefined,

data_category: query.data_category ?? undefined,

vercel bot deployed to Preview – fides-plus-nightly February 18, 2026 15:08 View deployment

speaker-ender force-pushed the refactor/monitor-fields-filters branch from ce0839e to 13b1aee Compare February 18, 2026 15:25

speaker-ender commented Feb 18, 2026

View reviewed changes

speaker-ender force-pushed the refactor/monitor-fields-filters branch from 13b1aee to 156ede3 Compare February 18, 2026 16:23

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

speaker-ender force-pushed the refactor/monitor-fields-filters branch from 156ede3 to ac052af Compare February 18, 2026 17:01

vercel bot deployed to Preview – fides-plus-nightly February 18, 2026 17:06 View deployment

speaker-ender marked this pull request as ready for review February 18, 2026 17:20

speaker-ender requested a review from a team as a code owner February 18, 2026 17:20

speaker-ender requested review from gilluminate and removed request for a team February 18, 2026 17:20

greptile-apps bot reviewed Feb 18, 2026

View reviewed changes

gilluminate reviewed Feb 18, 2026

View reviewed changes

speaker-ender force-pushed the refactor/monitor-fields-filters branch from 6539b40 to 7226e60 Compare February 19, 2026 14:04

vercel bot deployed to Preview – fides-plus-nightly February 19, 2026 14:08 View deployment

speaker-ender added 9 commits February 20, 2026 10:10

refactor: monitor fields filters

cebcb56

wip: ehhhh wip: finally something somewhat better chore: clean ups fix: minor styles fix: last of the issues chore: update changelog fix: autofocus fix: filter data categories lint and format fix: datastore filter refresh

fix: removing forgotten filter

5a2af32

chore: removing unused test id

ab92a51

fix: typo

bb2d507

chore: removing old code

5cfc100

chore: removing confidence filtering

b38dbe1

chore: refactor output

f2f2957

refactor: lock down input widths

0f1ebf9

chore: add comment to type definition

cdec2b5

speaker-ender force-pushed the refactor/monitor-fields-filters branch from bab8672 to cdec2b5 Compare February 20, 2026 15:10

speaker-ender requested a review from gilluminate February 20, 2026 15:11

vercel bot deployed to Preview – fides-plus-nightly February 20, 2026 15:15 View deployment

gilluminate reviewed Feb 20, 2026

View reviewed changes

	// Unfortunate need for effect due to current routin strategy
	// Unfortunate need for effect due to current routing strategy

	data_category: query.confidence_bucket ?? undefined,
	data_category: query.data_category ?? undefined,

Comments

Conversation

speaker-ender commented Feb 18, 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 Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

speaker-ender Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

gilluminate Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

speaker-ender Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot commented Feb 18, 2026

Greptile Summary

Confidence Score: 3/5

Important Files Changed

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

greptile-apps bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

gilluminate left a comment

Choose a reason for hiding this comment

Uh oh!

gilluminate Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

gilluminate Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

speaker-ender commented Feb 18, 2026 •

edited

Loading

vercel bot commented Feb 18, 2026 •

edited

Loading