Improve table design consistency across the dashboard (#6276)

* Unify ResponsiveTable design; Fix visual consistency of Shipping Methods

* WIP

* Updating ReactiveTable across the entire Dashboard

* Improve the ResponsiveTable styling; Stick variants list

* Improve variants page

* Unify the loading phases pattern for all ResponsiveTables

* Mock scrollIntoView in test fixture

* Add changeset

* Extract messages

* Remove old dead part of the code

* Fix error button

* Revert mistakenly overritten changelog entry

* Add changeset

* Trim AGENTS.MD to the minimum

* Handle plural

* Remove unused styles

* Drop barrel index

* Refactor

* Apply suggestions from code review

* Update messages

* fix messages, add plural

* apply other review comments

* fix incorreclty added changeset

---------

Co-authored-by: Jonatan Witoszek <jonatanwitoszek@gmail.com>

Author: mirekm

.changeset/tough-poems-sit.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Improve table design consistency across the dashboard with unified styling for ResponsiveTable components, better loading states, and improved scroll behavior for variant navigation

AGENTS.md

@@ -127,6 +127,21 @@ The codebase follows a feature-based architecture with shared components:
 - Implement proper form validation with React Hook Form
 - Add internationalization support for user-facing text
 
+### UI Design Guidelines
+
+**Before redesigning any component that displays a list, ask: "What happens with 50+ items?"**
+
+If the list could be long:
+
+- Add scrollable container with `max-height`
+- Keep headers outside the scroll area
+- Auto-scroll to active item on load
+
+Other considerations:
+
+- Loading states: Show skeletons
+- Empty states: Handle zero items gracefully
+
 ### Testing Requirements
 
 - Write unit tests for utility functions and complex components

locale/defaultMessages.json

@@ -528,6 +528,9 @@
     "context": "sum of all pending refunds inside an order",
     "string": "Pending refunds"
   },
+  "0xMUfd": {
+    "string": "No results found for \"{query}\""
+  },
   "1+ROfp": {
     "string": "Transaction"
   },
@@ -1368,17 +1371,9 @@
     "context": "weight",
     "string": "{fromValue} {fromUnit} - {toValue} {toUnit}"
   },
-  "5ye4Ik": {
-    "context": "warning message when some variants failed to create",
-    "string": "{success} variants created, {failed} failed"
-  },
   "6230rS": {
     "string": "Discount rules for carts and draft orders."
   },
-  "62Ywh2": {
-    "context": "number of countries",
-    "string": "{number} Countries"
-  },
   "62nsdy": {
     "string": "Retry"
   },
@@ -2104,6 +2099,10 @@
     "context": "replaced event title",
     "string": "Products were replaced"
   },
+  "AWyKB7": {
+    "context": "card header title",
+    "string": "Channel list"
+  },
   "AY7Tuz": {
     "string": "The same object cannot be in both lists"
   },
@@ -3241,6 +3240,10 @@
     "context": "dialog content",
     "string": "{counter,plural,one{Are you sure you want to unassign this category?} other{Are you sure you want to unassign {displayQuantity} categories?}}"
   },
+  "GjEdSd": {
+    "context": "number of postal code ranges",
+    "string": "{number, plural, one {# postal code range} other {# postal code ranges}}"
+  },
   "Gkip05": {
     "context": "button",
     "string": "Unassign"
@@ -3413,6 +3416,10 @@
     "context": "table column header, sold units preorder quantity",
     "string": "Sold units"
   },
+  "Hd3E1g": {
+    "context": "table header column",
+    "string": "Channel name"
+  },
   "Hebup2": {
     "context": "Health check subtitle when product is not published",
     "string": "Product is not published. Publish it to make it visible in your store."
@@ -5814,10 +5821,6 @@
   "VEext+": {
     "string": "Are you sure you want to delete this image?"
   },
-  "VHuzgq": {
-    "context": "table actions",
-    "string": "Actions"
-  },
   "VIABHy": {
     "context": "error message",
     "string": "Default shipping zone already exists"
@@ -5987,10 +5990,6 @@
   "WHgdsk": {
     "string": "Out of stock"
   },
-  "WIxSDm": {
-    "context": "card header",
-    "string": "{country} class rates"
-  },
   "WK62MN": {
     "string": "Fulfillment"
   },
@@ -6954,6 +6953,10 @@
     "context": "button",
     "string": "Create permission group"
   },
+  "bRQeJp": {
+    "context": "success message when all variants are created",
+    "string": "{count, plural, one {# variant created successfully} other {# variants created successfully}}"
+  },
   "bRXgSC": {
     "context": "capture button with amount",
     "string": "Capture {amount}"
@@ -7299,6 +7302,10 @@
     "context": "error message",
     "string": "Cannot change the quantity because of insufficient stock"
   },
+  "dAst+b": {
+    "context": "attribute values list: no attribute values found",
+    "string": "No values found"
+  },
   "dDCLFW": {
     "context": "alert message",
     "string": "Not available for sale this channel"
@@ -7453,6 +7460,10 @@
   "eRqx44": {
     "string": "Search collections..."
   },
+  "eS8xZ6": {
+    "context": "card header",
+    "string": "Tax class rates: {country}"
+  },
   "eUjFjW": {
     "string": "Permission group created"
   },
@@ -7699,10 +7710,6 @@
     "context": "button",
     "string": "Assign categories"
   },
-  "g5zIpS": {
-    "context": "No attribute values found",
-    "string": "No values found"
-  },
   "g6yuk2": {
     "context": "export items to csv file, choice field label",
     "string": "Export information for:"
@@ -7778,10 +7785,6 @@
   "gTr0qE": {
     "string": "Shipping Settings"
   },
-  "gVD1os": {
-    "context": "empty list message",
-    "string": "You haven’t assigned any member to this permission group yet."
-  },
   "gVqSnA": {
     "string": "Assign and save"
   },
@@ -7966,6 +7969,9 @@
   "hYWxeg": {
     "string": "The extension requests permissions you cannot grant or that exceed its allowed scope. Review the extension's manifest and your permissions. {docsLink} ({errorCode})"
   },
+  "hh0xW7": {
+    "string": "Channel Name"
+  },
   "hjEkEH": {
     "string": "All webhooks registered by this extension. In case of failed webhook delivery, list of attempts is displayed."
   },
@@ -8152,6 +8158,9 @@
     "context": "translation progress",
     "string": "{current} of {max}"
   },
+  "imYtnq": {
+    "string": "Selected {number, plural, one {# item} other {# items}}"
+  },
   "inWs4U": {
     "context": "attribute visibility in storefront",
     "string": "Visible in storefront"
@@ -8197,10 +8206,6 @@
     "context": "Shown when shipping zone count cannot be determined",
     "string": "Shipping zones: Unknown"
   },
-  "j/vV0n": {
-    "context": "channel name",
-    "string": "Channel Name"
-  },
   "j08fR9": {
     "context": "Product collections",
     "string": "Collections"
@@ -8589,6 +8594,10 @@
     "context": "order return error title when cannot refund",
     "string": "Couldn't refund products"
   },
+  "lCEp2/": {
+    "context": "save button disabled tooltip",
+    "string": "Set prices for all channels to save"
+  },
   "lCPxtT": {
     "context": "resend code label",
     "string": "Resend code"
@@ -9930,10 +9939,6 @@
   "t1Bd7E": {
     "string": "Payment captured"
   },
-  "t1XcOo": {
-    "context": "success message when all variants are created",
-    "string": "{count} variants created successfully"
-  },
   "t1scMK": {
     "string": "Refunds settings"
   },
@@ -9949,6 +9954,10 @@
     "context": "voucher status",
     "string": "Expired"
   },
+  "t84lbb": {
+    "context": "empty list message",
+    "string": "You haven't assigned any member to this permission group yet."
+  },
   "tCLTCb": {
     "context": "tab name",
     "string": "All products"
@@ -10111,6 +10120,10 @@
     "context": "shipping zones configuration",
     "string": "Change default weight unit"
   },
+  "u6rPuc": {
+    "context": "warning message when some variants failed to create",
+    "string": "{success, plural, one {# variant} other {# variants}} created, {failed, plural, one {# failed} other {# failed}}"
+  },
   "u7ShY+": {
     "context": "pill status for overcaptured outcome",
     "string": "Overcaptured"
@@ -10200,10 +10213,6 @@
     "context": "Dry run objects",
     "string": "Objects"
   },
-  "ud0w8h": {
-    "context": "number of postal code ranges",
-    "string": "{number} postal code ranges"
-  },
   "udJUSa": {
     "context": "Authorize {app name}",
     "string": "Authorize"
@@ -10320,6 +10329,9 @@
   "v3WWK+": {
     "string": "Status is invalid"
   },
+  "v8UngX": {
+    "string": "Search warehouses..."
+  },
   "v8e93p": {
     "context": "hint for order total option",
     "string": "Matches what customer owes"
@@ -10373,6 +10385,10 @@
     "context": "button",
     "string": "Undo"
   },
+  "vNaDeR": {
+    "context": "number of countries",
+    "string": "{count, plural, one {# Country} other {# Countries}}"
+  },
   "vONi+O": {
     "string": "Country"
   },
@@ -10435,6 +10451,9 @@
     "context": "default product variant indicator",
     "string": "Default"
   },
+  "vaFjs6": {
+    "string": "No warehouses available to add"
+  },
   "vbop3G": {
     "string": "Create new model"
   },
@@ -10588,9 +10607,6 @@
     "context": "refund amounts were settled",
     "string": "Settled"
   },
-  "wL7VAE": {
-    "string": "Actions"
-  },
   "wL850U": {
     "context": "draft order lines, section header",
     "string": "Order lines"
@@ -10891,10 +10907,6 @@
     "context": "discount value",
     "string": "discount"
   },
-  "yLfbSh": {
-    "context": "support label",
-    "string": "Channel name"
-  },
   "yOaNWB": {
     "context": "delete shipping method",
     "string": "Are you sure you want to delete {name}?"
@@ -11028,10 +11040,6 @@
   "zCb8fX": {
     "string": "Weight"
   },
-  "zD7/M6": {
-    "context": "empty list message",
-    "string": "Please use Assign Members button to do so."
-  },
   "zDvDnG": {
     "context": "modal header",
     "string": "Media from the URL you supply will be shown in the media gallery. You will be able to define the order of the gallery."

src/attributes/components/AttributeListDatagrid/AttributeListDatagrid.tsx

@@ -6,13 +6,12 @@ import {
   DatagridChangeStateContext,
   useDatagridChangeState,
 } from "@dashboard/components/Datagrid/hooks/useDatagridChange";
-import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
+import { DatagridPagination } from "@dashboard/components/TablePagination";
 import { AttributeFragment } from "@dashboard/graphql";
 import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { ListProps, SortPage } from "@dashboard/types";
 import { Item } from "@glideapps/glide-data-grid";
-import { Box } from "@saleor/macaw-ui-next";
 import { useCallback, useMemo } from "react";
 import { useIntl } from "react-intl";
 import { useLocation } from "react-router";
@@ -122,14 +121,12 @@ export const AttributeListDatagrid = ({
         navigatorOpts={{ state: getPrevLocationState(location) }}
       />
 
-      <Box paddingX={6}>
-        <TablePaginationWithContext
-          component="div"
-          settings={settings}
-          disabled={disabled}
-          onUpdateListSettings={onUpdateListSettings}
-        />
-      </Box>
+      <DatagridPagination
+        component="div"
+        settings={settings}
+        disabled={disabled}
+        onUpdateListSettings={onUpdateListSettings}
+      />
     </DatagridChangeStateContext.Provider>
   );
 };