[Relations component] Add filters

[ValeriaMaltseva]

Changes in this pull request

Adds the "via table header" part of #2801: the relation grid gets a filter dropdown in the header of every filterable column, next to the existing search in the toolbar.

How a column becomes filterable

The column type comes from the column configuration (SelectedColumns) and is resolved through the field filter and object data registries, adapter types included — so a column offers a filter only when its type resolves to a field filter that can be evaluated on the rows in memory (number, date, boolean, string). Relations, quantity values, classification stores and the like get no filter, and no list of known field types is hardcoded anywhere.

How the filters are applied

The rows of a relation live in the component (unsaved ones included), so the filters do not compose into a backend request but into a row matcher. It is applied next to the search term in useValue, which keeps originalIndex intact — delete and inline edit still hit the right row, and row drag is disabled while rows are filtered. The declarative filter framework (defineFilter / useFilterQuery) is used as-is; only the "query" is a predicate instead of a request.

The value is edited locally in the dropdown and written to the store on apply, so an abandoned edit in one column cannot leak into another. Whether a value is empty is decided by the field filter type itself (shouldApply).

Shared code

• The setting enums of the date and number editors move to field-filters/utils/filter-setting-values.ts, so a filter value can be interpreted without pulling in a React component. Both stay re-exported from their editor component.
• transformNumberFilter is added next to the existing transformDateFilter, so "is / less / more / between" is defined once. modules/reports still carries its own copy and can adopt it separately.

Fixes found while testing

• The setting select of the date and number editors was uncontrolled (defaultValue), so on every remount it fell back to the first option while the stored value kept its setting. Now bound to the current setting, the way the file size editor already does. This one also affects the listing and report sidebars, wherever a filter editor is remounted.
• In the header dropdown the longer settings were cut off in the list, because Ant Design gives the dropdown the width of its select. Fixed in the dropdown's own styles; the editors are untouched, so the sidebars keep their layout.

Verification

• jest — 33 suites / 332 tests, including new unit tests for the filter columns, the row matchers and a regression test for the uncontrolled setting select (verified to fail without the fix).
• eslint and tsc --noEmit clean.
• Not clicked through in a browser by Claude — the feature was tested manually by @ValeriaMaltseva, the two fixes above came out of that round. The dropdown width fix is purely visual and is not covered by a test.

🤖 Generated with Claude Code

[Copilot]

Pull request overview

Adds column-header filtering to many-to-many relation grids using dynamic field-filter types and in-memory row matching.

Changes:

• Adds filter dropdowns, state providers, column resolution, and row matchers.
• Integrates filters with search while preserving original row indexes.
• Shares date/number settings, fixes controlled selectors, and adds tests, stories, styles, and translations.

Reviewed changes

Copilot reviewed 30 out of 31 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
translations/studio.sv.yaml	Adds Swedish filter-label translation.
translations/studio.no.yaml	Adds Norwegian filter-label translation.
translations/studio.it.yaml	Adds Italian filter-label translation.
translations/studio.fr.yaml	Adds French filter-label translation.
translations/studio.es.yaml	Adds Spanish filter-label translation.
translations/studio.en.yaml	Adds English filter-label translation.
translations/studio.de.yaml	Adds German filter-label translation.
field-filters/utils/number-filter-transform.ts	Adds reusable numeric filter transformation.
field-filters/utils/filter-setting-values.ts	Centralizes date and number setting enums.
field-filters/utils/date-filter-transform.ts	Uses the shared date setting enum.
field-filters/components/dynamic-type-field-filter-setting.test.tsx	Tests controlled filter settings.
field-filters/components/dynamic-type-field-filter-number-component.tsx	Makes numeric setting selection controlled.
field-filters/components/dynamic-type-field-filter-date-component.tsx	Makes date setting selection controlled.
many-to-many-relation/many-to-many-relation.tsx	Provides and applies relation filters.
many-to-many-relation/many-to-many-relation.stories.tsx	Adds filtering stories.
many-to-many-relation/index.ts	Exports filtering APIs.
many-to-many-relation/hooks/use-value.ts	Combines search and column predicates.
many-to-many-relation/hooks/use-columns.tsx	Adds filters to eligible headers.
filters/utils/row-matchers.ts	Implements in-memory value matchers.
filters/utils/row-matchers.test.ts	Tests row-matching behavior.
filters/utils/filter-columns.ts	Resolves filter-column metadata and values.
filters/utils/filter-columns.test.ts	Tests column resolution.
filters/types.ts	Defines relation-filter contracts.
filters/provider/relation-filters-provider.tsx	Composes required filter providers.
filters/provider/relation-filter-columns-context.tsx	Supplies filterable columns and row data.
filters/index.ts	Exports relation-filter modules.
filters/hooks/use-filterable-columns.ts	Selects dynamically supported filters.
filters/filters.ts	Defines the filter store and query adapter.
filters/components/column-header-filter.tsx	Implements the filter popover.
filters/components/column-header-filter.styles.ts	Styles header filters and their panel.

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

One or more custom setup steps configured for this repository failed during this Copilot code review run:

Install dependencies with Composer

Setup steps run before each review. If the review above is missing context, or no review was posted at all, the failing step above may be the cause. See the workflow run for failure details, fix your setup steps configuration, and re-request a review.

Note

You can configure setup steps for Copilot code review separately from Copilot cloud agent with a copilot-code-review.yml file. Read the docs for details.

[Copilot]

Pull request overview

Copilot reviewed 37 out of 39 changed files in this pull request and generated 2 comments.

Suppressed comments (3)

assets/js/src/core/components/many-to-many-relation/filters/components/column-header-filter.styles.ts:53

• These rules do not widen the setting select: the shared Select applies a concrete width from the editor (90/100px), while this only removes max-width and sets the same 90px minimum. Because Ant Design matches the popup to the trigger by default, the localized options remain clipped—the visual fix described by the PR is ineffective. Give the scoped trigger a sufficiently larger width/minimum or configure the popup not to match the trigger width.

      .ant-select {
        min-width: 90px;
        max-width: none !important;
      }

assets/js/src/core/components/many-to-many-relation/filters/utils/row-matchers.ts:138

• BEFORE and AFTER are currently inclusive because both To and From use <=/>=. The existing transforms map those settings to strict less-than/greater-than semantics (and the UI says “before”/“after”); only BETWEEN should include its endpoints. Branch on filterValue.setting so a row on the selected day is excluded for before/after.

      case DateFilterOperator.From:
        return day >= conditionDay

      case DateFilterOperator.To:
        return day <= conditionDay

assets/js/src/core/components/many-to-many-relation/many-to-many-relation.tsx:118

• This serialization records only column keys, although the matcher also depends on each column's valueKey, type, frontend type, and config. If a host replaces a same-key column with a different field definition, matchRow changes but this effect does not rerun, leaving the rows filtered with the old matcher result until another event refreshes them. Include the matcher-relevant column metadata in the serialized key.

  const filterContextKey = useMemo(() => JSON.stringify({
    filters: appliedFilters,
    columns: filterableColumns.map((column) => column.key),
    visibleFields: props.visibleFieldsValue
  }), [appliedFilters, filterableColumns, props.visibleFieldsValue])

[Copilot]

One or more custom setup steps configured for this repository failed during this Copilot code review run:

Install dependencies with Composer

Setup steps run before each review. If the review above is missing context, or no review was posted at all, the failing step above may be the cause. See the workflow run for failure details, fix your setup steps configuration, and re-request a review.

Note

You can configure setup steps for Copilot code review separately from Copilot cloud agent with a copilot-code-review.yml file. Read the docs for details.

[Copilot]

Pull request overview

Copilot reviewed 36 out of 38 changed files in this pull request and generated no new comments.

Suppressed comments (2)

assets/js/src/core/components/many-to-many-relation/many-to-many-relation.tsx:126

• This can overwrite a simultaneous external value update with stale rows. If props.value and visibleFieldsValue change in the same commit, the preceding [props.value] effect refreshes from the new prop, then this effect runs with the old value state captured by that render and refreshes from it last; after setValue rerenders, neither dependency changes again, so the grid remains stale. Coordinate these effects (or track the latest value explicitly) so only the new relation value is used when both inputs change together.

    updateDisplayValue(value)

assets/js/src/core/components/many-to-many-relation/filters/utils/row-matchers.ts:138

• From and To are evaluated inclusively here, so “After 2026-04-15” still matches rows on 2026-04-15 and “Before” does likewise. This differs from the established filter semantics: both reports and notes map these same DateFilterOperator values to GREATER_THAN and LESS_THAN (reports/.../field-filters/helpers.tsx:77-80, notes-and-events/filters/helpers.ts:15-18). Use strict comparisons so the in-memory relation filter behaves like the existing date filters; the boundary expectation in row-matchers.test.ts should be updated too.

      case DateFilterOperator.From:
        return day >= conditionDay

      case DateFilterOperator.To:
        return day <= conditionDay

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
7 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.1% Duplication on New Code

See analysis details on SonarQube Cloud