Expandable subcategories (continued) (#6733)

* feat(datagrid): add optional controlled row selection API

* feat(selection): extend row selection hook with partial update helpers

* feat(categories): add expandable categories with lazy child loading and targeted cache invalidation

* chore(vite): allow overriding dev server port via PORT_DEVSERVER

* chore(deps): bump eslint-plugin-storybook to ^10.2.7

* chore: update translations

* Add changeset

* feat(categories): add ripple for expandable rows

* style(categories): replace ASCII arrows with Unicode chevrons

* feat(categories): persist expanded tree state and add collapse-all action

* test(categories): add test coverage for expandable category list behavior

* test(core): cover row selection helpers and vite dev server port override

* feat(categories): replace expand glyphs with custom datagrid chevron cell

* chore: add type declaration for vite.config.js

* test(categories): add test coverage for ChevronCell

* test(datagrid): simplify chevron draw assertions

* test(ripples): assert unique ripple ids

* chore: run linter auto-fix

* removed vite.config.test

* fix: add optional chaining to cell.data

* test(datagrid): move chevron visual coverage to storybook

* refactor(categories): extract CategoryList logic into hooks, services, and utils

* refactor: replace prop drilling with Jotai atoms

* Add paginated expandable category tree with inline load more

Replace the merchant page-size control with cursor-based child fetching, shared tree behavior on category detail, Saleor throbber loading state.

* Polish category tree pagination UX and shared utilities

Extract tree indent helper, read paginated Apollo cache before network fetches, and split initial-expand vs load-more loading so parents keep their chevron while additional pages load.

* Extract messages

* Extract messages

* Fix check-types failures after main merge

* Fix strict typecheck and Storybook coverage for category tree

* Use patch bump type in changeset

---------

Co-authored-by: Yevhenii Bodanov <124465640+EugenBodanov@users.noreply.github.com>
Co-authored-by: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>

Author: 3 people

.changeset/short-teeth-film.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Added expandable rows to the Category list with lazy loading of subcategories and improved nested selection logic.

locale/defaultMessages.json

@@ -9237,6 +9237,10 @@
     "context": "order refund amount",
     "string": "Replaced Products Value"
   },
+  "i8FLQQ": {
+    "context": "load more subcategories in category tree",
+    "string": "Load {count, plural, one {# more subcategory} other {# more subcategories}}"
+  },
   "iAaYh4": {
     "context": "Info box description for unavailable products",
     "string": "Customers can view this product but cannot add it to cart."
@@ -11992,6 +11996,9 @@
     "context": "Summary of diagnostic issues found",
     "string": "{errorCount, plural, =0 {} one {# problem} other {# problems}}{hasWarnings, select, true {{hasErrors, select, true {, } other {}}} other {}}{warningCount, plural, =0 {} one {# warning} other {# warnings}} found"
   },
+  "v0fBOU": {
+    "string": "Collapse all"
+  },
   "v17EX7": {
     "context": "built-in attribute list filter preset",
     "string": "Model attributes"

src/categories/components/CategoryListDatagrid/CategoryListDatagrid.stories.tsx

@@ -1,20 +1,63 @@
 import { categories } from "@dashboard/categories/fixtures";
+import { type CategoryListRow } from "@dashboard/categories/views/CategoryList/types";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 
 import { STORYBOOK_CHROMATIC_PARAMS } from "../../../storybook/chromatic";
 import { CategoryListDatagrid } from "./CategoryListDatagrid";
 
+const rootRows: CategoryListRow[] = categories.map(category => ({
+  type: "category" as const,
+  category,
+  depth: 0,
+  parentId: null,
+}));
+
+const expandedRows: CategoryListRow[] = [
+  rootRows[0],
+  {
+    type: "category",
+    category: {
+      ...categories[0],
+      id: "child-1",
+      name: "Phones",
+      children: { __typename: "CategoryCountableConnection", totalCount: 0 },
+      products: { __typename: "ProductCountableConnection", totalCount: 12 },
+    },
+    depth: 1,
+    parentId: categories[0].id,
+  },
+  {
+    type: "category",
+    category: {
+      ...categories[0],
+      id: "child-2",
+      name: "Laptops",
+      children: { __typename: "CategoryCountableConnection", totalCount: 0 },
+      products: { __typename: "ProductCountableConnection", totalCount: 8 },
+    },
+    depth: 1,
+    parentId: categories[0].id,
+  },
+  {
+    type: "load-more",
+    parentId: categories[0].id,
+    depth: 1,
+    remainingCount: 25,
+  },
+  ...rootRows.slice(1),
+];
+
 const meta: Meta<typeof CategoryListDatagrid> = {
   title: "Categories/CategoryListDatagrid",
   component: CategoryListDatagrid,
 
   args: {
-    categories,
+    rows: rootRows,
     disabled: false,
     sort: { sort: "name" as any, asc: true },
     onSort: fn(),
-    settings: { columns: ["name", "subcategories", "products"], rowsPerPage: 20 },
+    settings: { columns: ["name", "subcategories", "products"], rowNumber: 20 },
     onUpdateListSettings: fn(),
     onSelectCategoriesIds: fn(),
   },
@@ -33,7 +76,7 @@ export const Disabled: Story = {
 };
 
 export const Empty: Story = {
-  args: { categories: [] },
+  args: { rows: [] },
 };
 
 export const WithoutSort: Story = {
@@ -42,3 +85,15 @@ export const WithoutSort: Story = {
     onSort: undefined,
   },
 };
+
+export const ExpandedSubcategories: Story = {
+  args: {
+    rows: expandedRows,
+    isCategoryExpanded: (categoryId: string) => categoryId === categories[0].id,
+    onCategoryExpandToggle: fn(),
+    getCategoryDepth: (categoryId: string) =>
+      expandedRows.find(row => row.type === "category" && row.category.id === categoryId)?.depth ??
+      0,
+    onLoadMoreSubcategories: fn(),
+  },
+};

src/categories/components/CategoryListDatagrid/CategoryListDatagrid.test.tsx

@@ -0,0 +1,211 @@
+import { categoryUrl } from "@dashboard/categories/urls";
+import { type CategoryFragment } from "@dashboard/graphql";
+import { CompactSelection, type GridSelection } from "@glideapps/glide-data-grid";
+import { render } from "@testing-library/react";
+
+import { CategoryListDatagrid } from "./CategoryListDatagrid";
+
+const navigateMock = jest.fn();
+let datagridProps: Record<string, any> = {};
+
+jest.mock("@dashboard/hooks/useNavigator", () => () => navigateMock);
+jest.mock("@dashboard/hooks/useBackLinkWithState", () => ({
+  getPrevLocationState: () => undefined,
+}));
+jest.mock("@dashboard/components/Datagrid/ColumnPicker/ColumnPicker", () => ({
+  ColumnPicker: () => null,
+}));
+jest.mock("@dashboard/components/TablePagination", () => ({
+  DatagridPagination: () => null,
+}));
+jest.mock("@dashboard/components/Datagrid/Datagrid", () => ({
+  Datagrid: (props: Record<string, any>) => {
+    datagridProps = props;
+
+    return null;
+  },
+}));
+jest.mock("@dashboard/components/Datagrid/ColumnPicker/useColumns", () => ({
+  useColumns: () => ({
+    handlers: {
+      onMove: jest.fn(),
+      onResize: jest.fn(),
+      onToggle: jest.fn(),
+    },
+    selectedColumns: [],
+    staticColumns: [],
+    visibleColumns: [
+      { id: "name", title: "Name", width: 320 },
+      { id: "subcategories", title: "Subcategories", width: 160 },
+      { id: "products", title: "Products", width: 160 },
+    ],
+  }),
+}));
+jest.mock("react-router", () => ({
+  useLocation: () => ({
+    pathname: "/categories/",
+    search: "",
+    hash: "",
+    state: undefined,
+  }),
+}));
+jest.mock("@saleor/macaw-ui-next", () => ({
+  useTheme: () => ({
+    themeValues: {
+      fontWeight: { regular: 400 },
+      fontSize: { 2: "12px", 3: "14px" },
+      colors: {
+        background: { default1: "#ffffff" },
+        text: { default2: "#666666", accent1: "#2e47ba" },
+      },
+    },
+  }),
+}));
+
+const createCategory = (id: string, childrenCount: number): CategoryFragment =>
+  ({
+    __typename: "Category",
+    id,
+    name: `Category ${id}`,
+    children: {
+      __typename: "CategoryCountableConnection",
+      totalCount: childrenCount,
+    },
+    products: {
+      __typename: "ProductCountableConnection",
+      totalCount: 10,
+    },
+  }) as CategoryFragment;
+
+const makeCategoryRow = (category: CategoryFragment) => ({
+  type: "category" as const,
+  category,
+  depth: 0,
+  parentId: null,
+});
+
+const baseProps = {
+  disabled: false,
+  settings: {
+    rowNumber: 20,
+    columns: [],
+  },
+  rows: [
+    makeCategoryRow(createCategory("cat-1", 1)),
+    makeCategoryRow(createCategory("cat-2", 0)),
+    makeCategoryRow(createCategory("cat-3", 2)),
+  ],
+  onSelectCategoriesIds: jest.fn(),
+  onUpdateListSettings: jest.fn(),
+};
+
+describe("CategoryListDatagrid", () => {
+  beforeEach(() => {
+    datagridProps = {};
+    navigateMock.mockReset();
+  });
+
+  it("should map selected category ids to controlled row selection", () => {
+    // Arrange
+    render(
+      <CategoryListDatagrid
+        {...baseProps}
+        selectedCategoriesIds={["cat-2", "missing-id"]}
+        onSelectedCategoriesIdsChange={jest.fn()}
+      />,
+    );
+
+    // Act
+    const selectedRows = datagridProps.controlledSelection.rows.toArray();
+
+    // Assert
+    expect(selectedRows).toEqual([1]);
+    expect(typeof datagridProps.onControlledSelectionChange).toBe("function");
+  });
+
+  it("should map controlled row selection back to category ids", () => {
+    // Arrange
+    const onSelectedCategoriesIdsChange = jest.fn();
+
+    render(
+      <CategoryListDatagrid
+        {...baseProps}
+        selectedCategoriesIds={[]}
+        onSelectedCategoriesIdsChange={onSelectedCategoriesIdsChange}
+      />,
+    );
+
+    const selection: GridSelection = {
+      columns: CompactSelection.empty(),
+      rows: CompactSelection.empty().add(0).add(2),
+    };
+
+    // Act
+    datagridProps.onControlledSelectionChange(selection);
+
+    // Assert
+    expect(onSelectedCategoriesIdsChange).toHaveBeenCalledWith(["cat-1", "cat-3"]);
+  });
+
+  it("should trigger expand toggle only for expandable non-loading rows", () => {
+    // Arrange
+    const onCategoryExpandToggle = jest.fn();
+
+    render(
+      <CategoryListDatagrid
+        {...baseProps}
+        isCategoryExpanded={() => false}
+        isCategoryChildrenLoading={categoryId => categoryId === "cat-3"}
+        onCategoryExpandToggle={onCategoryExpandToggle}
+      />,
+    );
+
+    // Act
+    datagridProps.onRowClick([0, 0]);
+    datagridProps.onRowClick([0, 1]);
+    datagridProps.onRowClick([0, 2]);
+
+    // Assert
+    expect(onCategoryExpandToggle).toHaveBeenCalledTimes(1);
+    expect(onCategoryExpandToggle).toHaveBeenCalledWith("cat-1");
+  });
+
+  it("should navigate to details when clicking non-expand columns", () => {
+    // Arrange
+    render(<CategoryListDatagrid {...baseProps} />);
+
+    // Act
+    datagridProps.onRowClick([1, 0]);
+
+    // Assert
+    expect(navigateMock).toHaveBeenCalledWith(categoryUrl("cat-1"));
+  });
+
+  it("should trigger load more callback when clicking load more row", () => {
+    // Arrange
+    const onLoadMoreSubcategories = jest.fn();
+
+    render(
+      <CategoryListDatagrid
+        {...baseProps}
+        rows={[
+          ...baseProps.rows,
+          {
+            type: "load-more" as const,
+            parentId: "cat-1",
+            depth: 1,
+            remainingCount: 20,
+          },
+        ]}
+        onLoadMoreSubcategories={onLoadMoreSubcategories}
+      />,
+    );
+
+    // Act
+    datagridProps.onRowClick([0, 3]);
+
+    // Assert
+    expect(onLoadMoreSubcategories).toHaveBeenCalledWith("cat-1");
+    expect(navigateMock).not.toHaveBeenCalled();
+  });
+});