Update lists filtering component (#6879)

* Group variant-reference filter choices under their product

A flat variant page hid the size behind a long product name and listed the same product once per variant.

* Turn list filters into a foldable panel and quiet the product grid

* Let color filters mix with references and give list search the same border as Filters

Saleor rejects AttributeInput lists that mix deprecated values with value, so product attributes now send value only. List search uses the existing bordered field, and filter drafts clone so Close no longer shares mutated state with Apply.

* Fix date-between filter layout and polish list search chrome

* Add changeset

* Extract messages

* Keep filter-row option CSS from restyling product attributes

Global select-option flex rules stretched color swatches, and the variant
assign payload overwrote Product: Variant with the bare variant name.

Author: mirekm

.changeset/list-filters-general-update.md

@@ -0,0 +1,11 @@
+---
+"saleor-dashboard": patch
+---
+
+General update of the main lists filtering component.
+
+Filters on product, customer, and other lists now open as a foldable panel. Search uses the same bordered field, with syntax hints where Saleor supports them.
+
+Product and variant reference filters show chips with thumbnails; variant choices are grouped under their product. Color (swatch) attributes use a color preview instead of a plain list.
+
+Also fixes applying color together with reference filters, and filter drafts that did not reset cleanly.

.knip.json

@@ -58,7 +58,6 @@
     "@sentry/cli",
     "@react-editor-js/core",
     "playwright-ctrf-json-reporter",
-    "downshift",
     "@graphql-codegen/cli",
     "@graphql-codegen/fragment-matcher",
     "@graphql-codegen/import-types-preset",

locale/defaultMessages.json

@@ -2881,10 +2881,6 @@
     "context": "create product dialog description",
     "string": "Add a product. You can set a price, inventory, and availability after creating it."
   },
-  "9B2mOB": {
-    "context": "tile view pagination label",
-    "string": "No. of products"
-  },
   "9C7PZE": {
     "context": "navigation section name",
     "string": "Navigation"
@@ -3033,6 +3029,10 @@
     "context": "collection",
     "string": "Hidden"
   },
+  "9exKzi": {
+    "context": "Close the list filter panel without clearing applied filters",
+    "string": "Close"
+  },
   "9gb9b4": {
     "context": "address type",
     "string": "Add new address"
@@ -4492,6 +4492,10 @@
     "context": "dialog content",
     "string": "Select method you want to use to change address"
   },
+  "FK088X": {
+    "context": "Apply filters from the list filter panel",
+    "string": "Apply"
+  },
   "FKBNcP": {
     "context": "customer type chip, opens the customer type settings page",
     "string": "View {customerTypeName} type"
@@ -6512,6 +6516,10 @@
     "context": "new discount label",
     "string": "New discount value"
   },
+  "MU0Zmt": {
+    "context": "product list pagination label",
+    "string": "No. of products"
+  },
   "MUjTkk": {
     "string": "Search customer types..."
   },
@@ -7816,10 +7824,6 @@
     "context": "copy code button label",
     "string": "Copy code"
   },
-  "RZDxej": {
-    "context": "Popover trigger text (button)",
-    "string": "Filters {count, plural, =0 {} other {({count})} }"
-  },
   "RZZAjR": {
     "context": "setup review row title",
     "string": "Taxes"
@@ -16936,6 +16940,10 @@
     "context": "dialog description when restock warehouse must be selected",
     "string": "Canceling a fulfillment will restock products at the selected warehouse. The warehouse this fulfillment shipped from is pre-selected."
   },
+  "xzqW+K": {
+    "context": "Add condition button on the list filter panel",
+    "string": "Add condition"
+  },
   "xzzNba": {
     "context": "helper under currency on create",
     "string": "Prices and payments use this currency. It can’t be changed later."

src/attributes/components/SwatchPreview/SwatchPreview.module.css

@@ -1,5 +1,6 @@
 .swatchPreview {
   display: block;
+  flex: none;
   flex-shrink: 0;
   box-sizing: border-box;
   border: 1px solid var(--mu-colors-border-default1);

src/attributes/utils/data.test.ts

@@ -462,7 +462,42 @@ describe("attributes/utils/data", () => {
 
       // Assert
       expect(result.data.references).toEqual([
-        { value: "test-variant-1", label: "Product 1 Variant A" },
+        { value: "test-variant-1", label: "Product 1: Variant A" },
+      ]);
+    });
+
+    it("ignores additionalData that is only the raw id and uses search instead", () => {
+      // Arrange
+      const variantId = "UHJvZHVjdFZhcmlhbnQ6Mzg0";
+      const attribute = {
+        id: "attr-gid-test",
+        value: [variantId],
+        label: "Test",
+        data: {
+          inputType: AttributeInputTypeEnum.REFERENCE,
+          entityType: AttributeEntityTypeEnum.PRODUCT_VARIANT,
+          isRequired: false,
+          values: [],
+          references: [],
+        },
+        additionalData: [{ value: variantId, label: variantId }],
+      };
+      const references = createMockReferenceData({
+        products: [
+          {
+            id: "test-product-1",
+            name: "White Plimsolls",
+            variants: [{ id: variantId, name: "44 / White" }],
+          },
+        ],
+      });
+
+      // Act
+      const result = getReferenceAttributeDisplayData(attribute, references);
+
+      // Assert
+      expect(result.data.references).toEqual([
+        { value: variantId, label: "White Plimsolls: 44 / White" },
       ]);
     });
 
@@ -534,7 +569,7 @@ describe("attributes/utils/data", () => {
 
       // Assert
       expect(result.data.references).toEqual([
-        { value: "v3", label: "Product 3 Variant 3" },
+        { value: "v3", label: "Product 3: Variant 3" },
         { value: "non-existent", label: "non-existent" }, // Fallback
       ]);
     });
@@ -646,14 +681,14 @@ describe("attributes/utils/data", () => {
 
         // Assert - Verify cache is working
         expect(result1.data.references).toEqual([
-          { value: "cache-variant-1", label: "Cache Test Product Cache Variant 1" },
+          { value: "cache-variant-1", label: "Cache Test Product: Cache Variant 1" },
         ]);
         expect(result2.data.references).toEqual([
-          { value: "cache-variant-2", label: "Cache Test Product Cache Variant 2" },
+          { value: "cache-variant-2", label: "Cache Test Product: Cache Variant 2" },
         ]);
         expect(result3.data.references).toEqual([
-          { value: "cache-variant-3", label: "Cache Test Product Cache Variant 3" },
-          { value: "cache-variant-1", label: "Cache Test Product Cache Variant 1" },
+          { value: "cache-variant-3", label: "Cache Test Product: Cache Variant 3" },
+          { value: "cache-variant-1", label: "Cache Test Product: Cache Variant 1" },
         ]);
 
         // productVariants is read once while building the cache; later lookups reuse it
@@ -711,10 +746,10 @@ describe("attributes/utils/data", () => {
 
         // Assert
         expect(result.data.references).toEqual([
-          { value: "sep-p1-v1", label: "Separate Cache Product 1 P1 Variant 1" },
-          { value: "sep-p2-v1", label: "Separate Cache Product 2 P2 Variant 1" },
-          { value: "sep-p1-v2", label: "Separate Cache Product 1 P1 Variant 2" },
-          { value: "sep-p2-v2", label: "Separate Cache Product 2 P2 Variant 2" },
+          { value: "sep-p1-v1", label: "Separate Cache Product 1: P1 Variant 1" },
+          { value: "sep-p2-v1", label: "Separate Cache Product 2: P2 Variant 1" },
+          { value: "sep-p1-v2", label: "Separate Cache Product 1: P1 Variant 2" },
+          { value: "sep-p2-v2", label: "Separate Cache Product 2: P2 Variant 2" },
         ]);
 
         expect(product1GetterCalls).toBe(1);

src/attributes/utils/data.ts

@@ -29,6 +29,7 @@ import {
 } from "@dashboard/utils/richText/useMultipleRichText";
 
 import { type AttributePageFormData } from "../components/AttributePage";
+import { formatVariantReferenceLabel } from "./formatVariantReferenceLabel";
 import { productVariantCacheManager } from "./productVariantCache";
 
 type AtributesOfFiles = Pick<AttributeValueInput, "file" | "id" | "values" | "contentType">;
@@ -566,7 +567,7 @@ const findProductVariantReference = (
 
     if (variant) {
       return {
-        label: `${product.name} ${variant.name}`,
+        label: formatVariantReferenceLabel(product.name, variant.name),
         value: valueId,
       };
     }
@@ -612,7 +613,9 @@ export const getReferenceAttributeDisplayData = (
                * and whenever the user assigns references in the dialog into useFormset data. */
               const meta = attribute.additionalData?.find(m => m.value === valueId);
 
-              if (meta) {
+              // Skip labels that are just the raw id (common when assign metadata
+              // never resolved). Search / saved values can still supply a name.
+              if (meta?.label && meta.label !== meta.value) {
                 return {
                   label: meta.label,
                   value: meta.value,

src/attributes/utils/formatVariantReferenceLabel.test.ts

@@ -0,0 +1,16 @@
+import { formatVariantReferenceLabel } from "./formatVariantReferenceLabel";
+
+describe("formatVariantReferenceLabel", () => {
+  it("joins product and variant the same way saved values do", () => {
+    // Arrange // Act // Assert
+    expect(formatVariantReferenceLabel("White Plimsolls", "44 / White")).toBe(
+      "White Plimsolls: 44 / White",
+    );
+  });
+
+  it("returns the side that exists when the other is empty", () => {
+    // Arrange // Act // Assert
+    expect(formatVariantReferenceLabel("Bottle", "")).toBe("Bottle");
+    expect(formatVariantReferenceLabel("", "700ml")).toBe("700ml");
+  });
+});

src/attributes/utils/formatVariantReferenceLabel.ts

@@ -0,0 +1,15 @@
+/** Same shape as saved variant-reference attribute values (`Product: Variant`). */
+export const formatVariantReferenceLabel = (productName: string, variantName: string): string => {
+  const product = productName.trim();
+  const variant = variantName.trim();
+
+  if (!variant) {
+    return product;
+  }
+
+  if (!product) {
+    return variant;
+  }
+
+  return `${product}: ${variant}`;
+};

src/components/AppLayout/ContextualLinks/ContextualHelpIcon.module.css

@@ -0,0 +1,34 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  height: var(--mu-spacing-8);
+  line-height: 0;
+}
+
+/* Flatten the trigger box so the <a> is the only flex item and tab stop. */
+.root :global(button) {
+  display: contents;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--mu-colors-text-default2);
+  line-height: 0;
+}
+
+.icon svg {
+  display: block;
+}
+
+.icon:hover {
+  color: var(--mu-colors-text-default1);
+}
+
+.icon:focus-visible {
+  outline: 2px solid var(--mu-colors-border-accent1);
+  outline-offset: 2px;
+  border-radius: 4px;
+}

src/components/AppLayout/ContextualLinks/ContextualHelpIcon.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { ContextualHelpIcon } from "./ContextualHelpIcon";
+
+const trackEvent = jest.fn();
+
+jest.mock("@dashboard/components/ProductAnalytics/useAnalytics", () => ({
+  useAnalytics: () => ({ trackEvent }),
+}));
+
+describe("ContextualHelpIcon", () => {
+  beforeEach(() => {
+    trackEvent.mockClear();
+  });
+
+  it("renders a docs link and tracks the click", async () => {
+    // Arrange
+    const user = userEvent.setup();
+
+    render(
+      <ContextualHelpIcon
+        href="https://docs.saleor.io/developer/products/configuration"
+        label="Learn more about product configurations"
+        analyticsType="product_configuration_docs"
+        dataTestId="product-configurations-docs"
+      />,
+    );
+
+    // Act
+    const link = screen.getByRole("link", { name: "Learn more about product configurations" });
+
+    await user.click(link);
+
+    // Assert
+    expect(link).toHaveAttribute("href", "https://docs.saleor.io/developer/products/configuration");
+    expect(trackEvent).toHaveBeenCalledWith("contextual_link_clicked", {
+      type: "product_configuration_docs",
+    });
+  });
+
+  it("exposes the docs control as a link, not a nested button", () => {
+    // Arrange & Act
+    render(
+      <ContextualHelpIcon
+        href="https://docs.saleor.io/developer/products/configuration"
+        label="Learn more about product configurations"
+        analyticsType="product_configuration_docs"
+      />,
+    );
+
+    // Assert
+    expect(
+      screen.getByRole("link", { name: "Learn more about product configurations" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+});