Feature/attribute values search by mirekm · Pull Request #6301 · saleor/saleor-dashboard

mirekm · 2026-01-29T22:13:38Z

Add search input to Attribute Values table for filtering by slug or name
Search only appears when there are more than 5 values to avoid UI clutter

changeset-bot · 2026-01-29T22:13:42Z

🦋 Changeset detected

Latest commit: f7454a2

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

codecov · 2026-01-29T22:17:28Z

Codecov Report

❌ Patch coverage is 53.52113% with 33 lines in your changes missing coverage. Please review.
✅ Project coverage is 42.58%. Comparing base (57e859a) to head (f7454a2).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
...tes/components/AttributeValues/AttributeValues.tsx	0.00%	19 Missing ⚠️
...ibutes/views/AttributeDetails/AttributeDetails.tsx	0.00%	7 Missing ⚠️
src/components/SortableTable/SortableTableBody.tsx	0.00%	5 Missing ⚠️
src/components/SortableTable/SortableHandle.tsx	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6301      +/-   ##
==========================================
+ Coverage   42.54%   42.58%   +0.03%     
==========================================
  Files        2494     2497       +3     
  Lines       43320    43376      +56     
  Branches    10236     9852     -384     
==========================================
+ Hits        18432    18470      +38     
- Misses      23563    24869    +1306     
+ Partials     1325       37    -1288

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

Pull request overview

This PR adds client-side search functionality to the Attribute Values table, allowing users to filter attribute values by slug or name. The search input only appears when there are more than 5 values to reduce UI clutter.

Changes:

Added a custom SearchInput component with keyboard shortcuts (Escape to clear)
Implemented client-side filtering logic that searches both slug and name fields
Modified the component structure to conditionally show search based on value count threshold

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
src/attributes/components/AttributeValues/index.ts	Changed from default export to named export pattern
src/attributes/components/AttributeValues/AttributeValues.tsx	Added search input UI, filtering logic, and conditional rendering based on search state
src/attributes/components/AttributePage/AttributePage.tsx	Updated import to use named export instead of default export
.changeset/itchy-frogs-grab.md	Added changeset documentation for the new feature

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/attributes/components/AttributeValues/AttributeValues.tsx

src/attributes/components/AttributeValues/index.ts

src/attributes/components/AttributeValues/AttributeValues.tsx

Copilot

Pull request overview

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

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-29T23:07:35Z

src/attributes/views/AttributeDetails/AttributeDetails.tsx

+      searchQuery={searchQuery}
+      onSearchChange={handleSearchChange}


The PR description and changeset state that the search should only appear when there are more than 5 values to avoid UI clutter. However, the implementation always passes searchQuery and onSearchChange to the AttributePage component unconditionally. Consider implementing logic to conditionally pass these props only when the total number of attribute values exceeds 5. This could be done by checking the data length or adding a totalCount field to the GraphQL query response.

Copilot · 2026-01-29T23:07:35Z

src/attributes/components/AttributeValues/AttributeValues.tsx

+                    <TableCell className={classes.iconCell} />
+                  </TableRowLink>
+                </TableHead>
+                <SortableTableBody onSortEnd={onValueReorder}>


The drag-and-drop reordering functionality remains enabled even when a search filter is active. This could lead to confusing behavior where users reorder search results, which affects the underlying full list in unexpected ways. Consider disabling the SortableTableBody (or passing a disabled prop) when searchQuery is not empty to prevent reordering during search.

Suggested change

<SortableTableBody onSortEnd={onValueReorder}>

<SortableTableBody

onSortEnd={onValueReorder}

disabled={disabled || !!searchQuery}

>

src/components/SearchInput/SearchInput.tsx

src/attributes/components/AttributeValues/AttributeValues.tsx

Copilot

Pull request overview

Copilot reviewed 22 out of 22 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-30T07:17:01Z

src/attributes/components/AttributeValues/AttributeValues.tsx

-                    defaultMessage="Default Store View"
-                    description="attribute values list: name column header"
+          <Box display="flex" flexDirection="column" gap={4}>
+            {/* Search input - always visible when search is enabled */}


The comment "always visible when search is enabled" is misleading given the PR description states search should only appear when there are more than 5 values. Either update this comment to reflect the intended behavior, or implement the 5-value threshold as described in the PR.

Suggested change

{/* Search input - always visible when search is enabled */}

{/* Search input - rendered when onSearchChange is provided (visibility controlled by parent) */}

Copilot · 2026-01-30T07:17:02Z

src/attributes/components/AttributeValues/AttributeValues.tsx

+  // Show search when callback is provided (controlled by parent)
+  const showSearch = Boolean(onSearchChange);


The PR description states "Search only appears when there are more than 5 values to avoid UI clutter", but this implementation shows the search whenever onSearchChange is provided, regardless of the number of values. The condition should check the total count of attribute values and only enable search when it exceeds 5 values. Consider adding logic like: const showSearch = Boolean(onSearchChange) && (values?.length > 5 || searchQuery); to match the PR description requirement.

Copilot · 2026-01-30T07:17:02Z

.changeset/itchy-frogs-grab.md

+"saleor-dashboard": patch
+---
+
+Attribute configuration: allow users to filter attribute values by slug or name when there are more than 5 values.


The changeset description states that users can filter "when there are more than 5 values", but this condition is not implemented in the code. The search feature is always available regardless of the number of values. Either update this description to match the actual implementation, or implement the condition as described.

Copilot · 2026-01-30T07:17:02Z

src/components/SearchInput/SearchInput.tsx

+            onChange("");
+            inputRef.current?.focus();
+          }}
+          data-test-id={`${dataTestId}-clear`}


The clear button lacks an accessible label for screen readers. Add an aria-label attribute to the button element to describe its purpose, such as "Clear search" or similar. This is important for users who rely on assistive technologies.

Suggested change

data-test-id={`${dataTestId}-clear`}

data-test-id={`${dataTestId}-clear`}

aria-label="Clear search"

Copilot

Pull request overview

Copilot reviewed 22 out of 22 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-30T08:30:02Z

src/attributes/components/AttributeValues/AttributeValues.tsx

-                    description="attribute values list: name column header"
+          <Box display="flex" flexDirection="column" gap={4}>
+            {/* Search input - always visible when search is enabled */}
+            {showSearch && (


The PR description states "Search only appears when there are more than 5 values to avoid UI clutter", but the implementation always shows the search input when the onSearchChange callback is provided, regardless of the number of values. The search is unconditionally passed in AttributeDetails and displayed whenever values are not undefined in AttributeValues. Consider either:

Implementing the conditional display logic based on value count (e.g., showSearch && values.length > 5), or

Updating the PR description to accurately reflect the implementation

mirekm added 2 commits January 29, 2026 23:09

Ads changeset

ec0ca8a

Add attribute values filtering

423634b

mirekm requested a review from a team as a code owner January 29, 2026 22:13

mirekm requested review from Copilot, lkostrowski and witoszekdev January 29, 2026 22:13

Copilot started reviewing on behalf of mirekm January 29, 2026 22:13 View session

mirekm marked this pull request as draft January 29, 2026 22:17

Copilot AI reviewed Jan 29, 2026

View reviewed changes

mirekm added 5 commits January 29, 2026 23:34

Hook search into server side filtering for attribute values

64daac3

Refactor Attribute values search

80ccc7f

Add ripple

a0352ed

Add tests

b67bd3b

Extract messages

9f40d75

Copilot AI review requested due to automatic review settings January 29, 2026 23:02

mirekm marked this pull request as ready for review January 29, 2026 23:02

Copilot started reviewing on behalf of mirekm January 29, 2026 23:02 View session

Copilot AI reviewed Jan 29, 2026

View reviewed changes

Disable sorting when in search mode

78930ad

lkostrowski reviewed Jan 30, 2026

View reviewed changes

src/attributes/components/AttributeValues/AttributeValues.tsx Outdated Show resolved Hide resolved

Don't pass the search query in variants

8092807

Copilot AI review requested due to automatic review settings January 30, 2026 07:10

Copilot started reviewing on behalf of mirekm January 30, 2026 07:10 View session

lkostrowski previously approved these changes Jan 30, 2026

View reviewed changes

Copilot AI reviewed Jan 30, 2026

View reviewed changes

mirekm added 2 commits January 30, 2026 09:20

Merge branch 'main' into feature/attribute-values-search

d80b8a3

Simplify redundant condition

b7f8948

Copilot AI review requested due to automatic review settings January 30, 2026 08:25

mirekm dismissed lkostrowski’s stale review via b7f8948 January 30, 2026 08:25

Copilot started reviewing on behalf of mirekm January 30, 2026 08:26 View session

Copilot AI reviewed Jan 30, 2026

View reviewed changes

Fix types

f7454a2

lkostrowski approved these changes Jan 30, 2026

View reviewed changes

lkostrowski merged commit d097e37 into main Jan 30, 2026
13 of 14 checks passed

lkostrowski deleted the feature/attribute-values-search branch January 30, 2026 10:38

saleor-deployments bot mentioned this pull request Jan 30, 2026

Prepare release 3.22.29 #6302

Merged

		searchQuery={searchQuery}
		onSearchChange={handleSearchChange}

	{/* Search input - always visible when search is enabled */}
	{/* Search input - rendered when onSearchChange is provided (visibility controlled by parent) */}

		// Show search when callback is provided (controlled by parent)
		const showSearch = Boolean(onSearchChange);

	data-test-id={`${dataTestId}-clear`}
	data-test-id={`${dataTestId}-clear`}
	aria-label="Clear search"

Conversation

mirekm commented Jan 29, 2026

Uh oh!

changeset-bot bot commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

codecov bot commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Jan 29, 2026 •

edited

Loading

codecov bot commented Jan 29, 2026 •

edited

Loading