Swatch variant datagrid (#6705)

* Add swatch variant attributes to variants datagrid

* Render swatch previews in variant datagrid cells

* Harden product type tab count deduping and add missing tests (#6722)

* Harden product type tab count deduping and add missing tests

* Default attribute list group-by-type on and fix test types.

New sessions see type tabs on product and model attribute lists by default, with ripple copy updated accordingly. Test helpers use NonNullable aliases for nullable GraphQL query fields.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Extract messages

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

* Product Type and Model Type views update (#6725)

* Add PageTypeMetadataDialog for model type metadata editing

Prepares the header metadata modal pattern by introducing a standalone dialog component aligned with other entity detail pages.

* Move model type metadata editing to header modal

Wire PageTypeMetadataDialog through URL state and TopNav, and decouple metadata from the main type save flow on edit.

* Add skeleton title component to model type detail header

* Add changeset for type page metadata in header

Documents the user-facing move of metadata editing to the header on model type and product type detail pages.

* Move product type metadata editing to header modal

Mirror the model type refresh with ProductTypeMetadataDialog, TopNav metadata button, skeleton title, and decoupled metadata save on edit.

* Add iconized cog menu actions on type detail pages

* Polish type detail page layout and GraphiQL menu icon

* Reorganize type pages and improve create form UX

Move attribute schema to the main column and type settings to the sidebar, keep the variant toggle in main content, autofocus the name field on create, use Macaw inputs on model types, and suppress duplicate validation toasts when errors are shown inline.

* Align type delete dialogs with standard delete modal patter

* Fix type delete dialog links and remove blocking spinner

* Fix dirty state handling on product and model type detail pages

* Extract messages

* Fix fulfilment warehouse guard (#6726)

* Guard fulfill submit when warehouse is missing

Skip zero-quantity allocations and lines without a warehouse before
mapping warehouse IDs, preventing a crash when fulfilling a single line.

* Guard fulfill submit and polish order fulfill page

Extract getOrderFulfillSubmitItems with regression tests, add changeset,
and align fulfill line controls with macaw patterns including warehouse
pre-selection, zero-quantity disabling, and truncated variant captions.

* Polish reason reference modal layout (#6727)

Align add/edit reason dialog with dashboard modal patterns.

* Alternative fullfilments view (#6728)

* Line matrix order details view

Add "Timeline" | "Line matrix" toggle on order details with lifecycle columns,
expanded shipment panel, and shared warehouse labeling across matrix,
timeline, and order history. Correlate canceled fulfillments with restock
warehouse from events; default cancel-dialog restock warehouse to source;
move shipment cancel into overflow menu for parity with timeline cards.

* Complete line matrix Phase 1 polish

Persist view mode in list settings with legacy key migration, wire refunded
column tooltip, collapse canceled timeline fulfillments, add matrix tests and
i18n extraction, and drop visible focus ring on the expanded shipment panel.

* Add line-first return and refund actions to order matrix

Deep-link return and transaction refund flows with lineId prefill, expose per-row actions in the matrix, and show fulfillment refunded amounts in the expanded panel.

* Unify order refund navigation across dashboard entry points

Introduce getOrderRefundNavigation and route order details, fulfillment cards, and matrix row actions through it so legacy and transaction refunds pick the same destination.

* Polish order line matrix actions and shipment detail rows

Make shipment status and return context scannable in the expanded panel, and wire matrix row menus through TopNav.Menu with guarded return/refund actions.

* Polish line matrix refunds, failure surfacing, and needs-action UX

* Add ripple on line matrix view switch

* Correct column reorder off-by-one for pinned status, and scope expanded-panel refunds to the active line

* Fix order matrix and refund test fixture types for strict checking

* Close line matrix parity gaps and polish matrix UX for refunds and navigation

* Scope return page to a single line when opened from the matrix

* Unpin product column name in line matrix

* Keep expanded line panel open when fullfilment dialogs open

* Fix matrix column image cell invalidation

* Align price breakdown modal with DashboardModal layout patterns

* Use a 1px border for expanded matrix status icons

* Fix matrix scroll jank when a line is focused via lineId

The lineId sync effect called setViewMode("matrix") unconditionally; list
settings always produce a new state object and write to localStorage, and the
effect deps are recreated each render, so the whole order details tree
re-rendered in an endless loop whenever lineId was in the URL. Guard the
setViewMode call so the effect is idempotent.

* Attach tooltip to the label instead of a help icon

* Extract messages

* Remove unused ts-jest (#6730)

* Reuse existing SwatchPreview for variant datagrid swatch cells

Avoid a duplicate preview component by extracting swatch data helpers and wrapping the attributes SwatchPreview for datagrid use.

---------

Co-authored-by: Elon <yong.gu@coraool.ai>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>

Author: 4 people

.changeset/swatch-variant-columns.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Swatch variant attributes now appear in the product variants grid with color previews, so merchants can edit color-style variant values alongside other variant columns.

src/components/Attributes/DatagridSwatchPreview.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { DatagridSwatchPreview } from "./DatagridSwatchPreview";
+
+const meta: Meta<typeof DatagridSwatchPreview> = {
+  title: "Components/DatagridSwatchPreview",
+  component: DatagridSwatchPreview,
+  args: {
+    colorValue: "#E53935",
+    size: 8,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DatagridSwatchPreview>;
+
+export const Color: Story = {};
+
+export const Image: Story = {
+  args: {
+    colorValue: null,
+    fileUrl: "https://placehold.co/32x32/png",
+    size: 14,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    colorValue: null,
+    fileUrl: null,
+  },
+};

src/components/Attributes/DatagridSwatchPreview.tsx

@@ -0,0 +1,15 @@
+import { SwatchPreview } from "@dashboard/attributes/components/SwatchPreview/SwatchPreview";
+
+import { type AttributeSwatchData } from "./getAttributeSwatchData";
+
+interface DatagridSwatchPreviewProps extends AttributeSwatchData {
+  size?: number;
+}
+
+export const DatagridSwatchPreview = ({
+  colorValue,
+  fileUrl,
+  size = 8,
+}: DatagridSwatchPreviewProps) => (
+  <SwatchPreview color={colorValue} imageUrl={fileUrl} size={size} />
+);

src/components/Attributes/getAttributeSwatchData.ts

@@ -0,0 +1,26 @@
+export interface AttributeSwatchData {
+  colorValue?: string | null;
+  fileUrl?: string | null;
+}
+
+interface AttributeValueWithSwatch {
+  file?: { url?: string } | null;
+  value?: string | null;
+}
+
+export const getAttributeSwatchData = (
+  attributeValue: AttributeValueWithSwatch | null | undefined,
+): AttributeSwatchData | undefined => {
+  if (!attributeValue) {
+    return undefined;
+  }
+
+  const fileUrl = attributeValue.file?.url;
+  const colorValue = attributeValue.value;
+
+  if (!fileUrl && !colorValue) {
+    return undefined;
+  }
+
+  return { colorValue, fileUrl };
+};

src/components/Datagrid/customCells/DropdownCell.tsx

@@ -1,6 +1,9 @@
+import { DatagridSwatchPreview } from "@dashboard/components/Attributes/DatagridSwatchPreview";
+import { type AttributeSwatchData } from "@dashboard/components/Attributes/getAttributeSwatchData";
 import {
   type CustomCell,
   type CustomRenderer,
+  type DrawArgs,
   getMiddleCenterBias,
   GridCellKind,
   type ProvideEditorCallback,
@@ -9,13 +12,19 @@ import { DynamicCombobox, type Option } from "@saleor/macaw-ui-next";
 import { useCallback, useState } from "react";
 
 type DropdownCellGetSuggestionsFn = (text: string) => Promise<Option[]>;
+
+export type AttributeSearchOption = Option & {
+  swatch?: AttributeSwatchData;
+};
+
 export interface DropdownCellProps {
   readonly choices?: Option[];
   readonly update?: DropdownCellGetSuggestionsFn;
   readonly kind: "dropdown-cell";
   readonly value: Option | null;
   readonly allowCustomValues?: boolean;
   readonly emptyOption?: boolean;
+  readonly swatch?: AttributeSwatchData;
 }
 
 export type DropdownCell = CustomCell<DropdownCellProps>;
@@ -25,6 +34,12 @@ export const emptyDropdownCellValue: Option = {
   value: "",
 };
 
+const SWATCH_SIZE = 14;
+const SWATCH_TEXT_GAP = 6;
+
+const getOptionSwatch = (option: Option | null | undefined): AttributeSwatchData | undefined =>
+  (option as AttributeSearchOption | null | undefined)?.swatch;
+
 const DropdownCellEdit: ReturnType<ProvideEditorCallback<DropdownCell>> = ({
   value: cell,
   onFinishedEditing,
@@ -42,44 +57,99 @@ const DropdownCellEdit: ReturnType<ProvideEditorCallback<DropdownCell>> = ({
     ? { fetchOnFocus: true, fetchChoices: getChoices, choices: data }
     : { fetchOnFocus: false, fetchChoices: () => Promise.resolve([]), choices: cell.data.choices };
 
+  const selectedSwatch = cell.data.swatch ?? getOptionSwatch(cell.data.value);
+
   return (
     <DynamicCombobox
       options={props.choices ?? []}
       value={cell.data.value}
       onFocus={() => props.fetchChoices("")}
       loading={false}
       name=""
+      startAdornment={() => (selectedSwatch ? <DatagridSwatchPreview {...selectedSwatch} /> : null)}
       /**
        * There is a bug - looks like it's properly changing with keyobard, but mouse event is somehow not passed
        * to the dropdown layer @fixme
        */
       onChange={option => {
+        const matchedOption =
+          props.choices?.find(choice => choice.value === option?.value) ??
+          ({
+            label: option?.label ?? "",
+            value: option?.value ?? "",
+          } satisfies Option);
+
         return onFinishedEditing({
           ...cell,
           data: {
             ...cell.data,
-            value: props.choices?.find(c => c.value === option?.value) ?? {
-              label: option?.label ?? "",
-              value: option?.value ?? "",
-            },
+            value: matchedOption,
+            swatch: getOptionSwatch(matchedOption),
           },
         });
       }}
     />
   );
 };
 
+const drawSwatch = (
+  args: DrawArgs<DropdownCell>,
+  x: number,
+  y: number,
+  swatch: AttributeSwatchData,
+) => {
+  const { ctx, theme, imageLoader, col, row } = args;
+  const radius = SWATCH_SIZE / 2;
+  const centerX = x + radius;
+  const centerY = y + radius;
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+  ctx.clip();
+
+  if (swatch.fileUrl) {
+    const imageResult = imageLoader.loadOrGetImage(swatch.fileUrl, col, row);
+
+    if (imageResult) {
+      ctx.drawImage(imageResult, x, y, SWATCH_SIZE, SWATCH_SIZE);
+    } else {
+      ctx.fillStyle = theme.borderColor;
+      ctx.fill();
+    }
+  } else if (swatch.colorValue) {
+    ctx.fillStyle = swatch.colorValue;
+    ctx.fill();
+  }
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+  ctx.strokeStyle = theme.borderColor;
+  ctx.lineWidth = 1;
+  ctx.stroke();
+};
+
 export const dropdownCellRenderer: CustomRenderer<DropdownCell> = {
   kind: GridCellKind.Custom,
   isMatch: (c): c is DropdownCell => (c.data as any).kind === "dropdown-cell",
   draw: (args, cell) => {
     const { ctx, theme, rect } = args;
-    const { value } = cell.data;
+    const { value, swatch } = cell.data;
+    const cellSwatch = swatch ?? getOptionSwatch(value);
+    const textX = cellSwatch ? rect.x + 8 + SWATCH_SIZE + SWATCH_TEXT_GAP : rect.x + 8;
+
+    if (cellSwatch) {
+      const swatchY = rect.y + (rect.height - SWATCH_SIZE) / 2;
+
+      drawSwatch(args, rect.x + 8, swatchY, cellSwatch);
+    }
 
     ctx.fillStyle = theme.textDark;
     ctx.fillText(
       value?.label ?? "",
-      rect.x + 8,
+      textX,
       rect.y + rect.height / 2 + getMiddleCenterBias(ctx, theme),
     );
 
@@ -95,11 +165,13 @@ export const dropdownCellRenderer: CustomRenderer<DropdownCell> = {
         ...cell.data,
         display: "",
         value: null,
+        swatch: undefined,
       },
     }),
   }),
   onPaste: (value, data) => ({
     ...data,
     value: value ? { value, label: value } : null,
+    swatch: undefined,
   }),
 };

src/components/Datagrid/customCells/cells.ts

@@ -171,7 +171,7 @@ export function moneyDiscountedCell(
 
 export function dropdownCell(
   value: Option,
-  dataOpts: Pick<DropdownCellProps, "allowCustomValues" | "emptyOption"> &
+  dataOpts: Pick<DropdownCellProps, "allowCustomValues" | "emptyOption" | "swatch"> &
     ({ choices: Option[] } | { update: (text: string) => Promise<Option[]> }),
   opts?: Partial<GridCell>,
 ): DropdownCell {

src/products/components/ProductVariants/ProductVariants.tsx

@@ -11,7 +11,6 @@ import {
 import { iconSize, iconStrokeWidthBySize } from "@dashboard/components/icons";
 import { DashboardModal } from "@dashboard/components/Modal";
 import {
-  AttributeInputTypeEnum,
   type ProductDetailsVariantFragment,
   type ProductFragment,
   type ProductVariantBulkCreateInput,
@@ -37,6 +36,7 @@ import {
 } from "../ProductVariantGenerator/types";
 import { ProductVariantsHeader } from "./components/ProductVariantsHeader";
 import {
+  isVariantDatagridSupportedAttribute,
   useAttributesAdapter,
   useChannelAdapter,
   useChannelAvailabilityAdapter,
@@ -185,11 +185,7 @@ export const ProductVariants = ({
             ]),
             ...warehouses.map(warehouse => `warehouse:${warehouse.id}`),
             ...(variantAttributes
-              ?.filter(
-                attribute =>
-                  attribute.inputType === AttributeInputTypeEnum.DROPDOWN ||
-                  attribute.inputType === AttributeInputTypeEnum.PLAIN_TEXT,
-              )
+              ?.filter(attribute => isVariantDatagridSupportedAttribute(attribute.inputType))
               .map(attribute => `attribute:${attribute.id}`) ?? []),
           ]
         : undefined,
@@ -258,10 +254,11 @@ export const ProductVariants = ({
         row,
         channels,
         variants,
+        variantAttributes,
         searchAttributeValues: onAttributeValuesSearch,
         ...opts,
       }),
-    [channels, visibleColumns, onAttributeValuesSearch, variants],
+    [channels, visibleColumns, onAttributeValuesSearch, variantAttributes, variants],
   );
   const getCellError = useCallback(
     ([column, row]: Item, opts: GetCellContentOpts) =>

src/products/components/ProductVariants/datagrid.test.ts

@@ -0,0 +1,31 @@
+import { AttributeInputTypeEnum } from "@dashboard/graphql";
+
+import { isVariantDatagridSupportedAttribute } from "./datagrid";
+
+describe("isVariantDatagridSupportedAttribute", () => {
+  it("should return true for attributes supported by variants datagrid", () => {
+    // Arrange
+    const supportedInputTypes = [
+      AttributeInputTypeEnum.DROPDOWN,
+      AttributeInputTypeEnum.PLAIN_TEXT,
+      AttributeInputTypeEnum.SWATCH,
+    ];
+
+    // Act
+    const result = supportedInputTypes.map(isVariantDatagridSupportedAttribute);
+
+    // Assert
+    expect(result).toEqual([true, true, true]);
+  });
+
+  it("should return false for attributes unsupported by variants datagrid", () => {
+    // Arrange
+    const unsupportedInputTypes = [AttributeInputTypeEnum.BOOLEAN, null, undefined];
+
+    // Act
+    const result = unsupportedInputTypes.map(isVariantDatagridSupportedAttribute);
+
+    // Assert
+    expect(result).toEqual([false, false, false]);
+  });
+});

src/products/components/ProductVariants/datagrid.ts

@@ -12,6 +12,13 @@ import { type IntlShape } from "react-intl";
 
 import messages from "./messages";
 
+export const isVariantDatagridSupportedAttribute = (
+  inputType: AttributeInputTypeEnum | null | undefined,
+) =>
+  inputType === AttributeInputTypeEnum.DROPDOWN ||
+  inputType === AttributeInputTypeEnum.PLAIN_TEXT ||
+  inputType === AttributeInputTypeEnum.SWATCH;
+
 export const variantsStaticColumnsAdapter = (intl: IntlShape) => [
   {
     id: "name",
@@ -126,15 +133,9 @@ export const useAttributesAdapter = ({
   selectedColumns: string[] | undefined;
   attributes: ProductFragment["productType"]["variantAttributes"];
 }) => {
-  const supportedAttributes = attributes?.filter(attribute => {
-    if (!attribute.inputType) {
-      return false;
-    }
-
-    return [AttributeInputTypeEnum.DROPDOWN, AttributeInputTypeEnum.PLAIN_TEXT].includes(
-      attribute.inputType,
-    );
-  });
+  const supportedAttributes = attributes?.filter(attribute =>
+    isVariantDatagridSupportedAttribute(attribute.inputType),
+  );
   const [attributeQuery, setAttributeQuery] = useState("");
   const { paginate, currentPage, changeCurrentPage } = useClientPagination();
   const paginatedAttributes = paginate(