@vendure/dashboard 3.5.6-master-202603270307 → 3.5.6

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.5.6-master-202603270307",
+    "version": "3.5.6",
     "type": "module",
     "repository": {
         "type": "git",
@@ -162,8 +162,8 @@
         "@storybook/addon-vitest": "^10.0.0-beta.9",
         "@storybook/react-vite": "^10.0.0-beta.9",
         "@types/node": "^22.13.4",
-        "@vendure/common": "^3.5.6-master-202603270307",
-        "@vendure/core": "^3.5.6-master-202603270307",
+        "@vendure/common": "3.5.6",
+        "@vendure/core": "3.5.6",
         "@vitest/browser": "^3.2.4",
         "@vitest/coverage-v8": "^3.2.4",
         "eslint": "^9.19.0",

package/src/app/routes/_authenticated/_collections/collections.tsx

@@ -6,12 +6,12 @@ import { ListPage } from '@/vdb/framework/page/list-page.js';
 import { api } from '@/vdb/graphql/api.js';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { FetchQueryOptions, useQueries, useQueryClient } from '@tanstack/react-query';
-import { createFileRoute, Link } from '@tanstack/react-router';
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
 import { ExpandedState, getExpandedRowModel } from '@tanstack/react-table';
 import { TableOptions } from '@tanstack/table-core';
 import { ResultOf } from 'gql.tada';
 import { Folder, FolderOpen, PlusIcon } from 'lucide-react';
-import { useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 
 import { RichTextDescriptionCell } from '@/vdb/components/shared/table-cell/order-table-cell-components.js';
@@ -33,9 +33,29 @@ import {
 import { CollectionContentsSheet } from './components/collection-contents-sheet.js';
 
 
+function parseExpandedParam(expanded?: string): ExpandedState {
+    if (!expanded) return {};
+    const ids = expanded.split(',').filter(Boolean);
+    return Object.fromEntries(ids.map(id => [id, true]));
+}
+
+function serializeExpandedState(expanded: ExpandedState): string | undefined {
+    if (expanded === true) return undefined;
+    const ids = Object.entries(expanded)
+        .filter(([_, v]) => v)
+        .map(([id]) => id);
+    return ids.length > 0 ? ids.join(',') : undefined;
+}
+
 export const Route = createFileRoute('/_authenticated/_collections/collections')({
     component: CollectionListPage,
     loader: () => ({ breadcrumb: () => <Trans>Collections</Trans> }),
+    validateSearch: (search: Record<string, unknown>) => {
+        return {
+            ...search,
+            expanded: (search.expanded as string) || undefined,
+        };
+    },
 });
 
 
@@ -61,14 +81,36 @@ function isLoadMoreRow(row: CollectionOrLoadMore): row is LoadMoreRow {
 function CollectionListPage() {
     const { t } = useLingui();
     const queryClient = useQueryClient();
-    const [expanded, setExpanded] = useState<ExpandedState>({});
+    const routeSearch = Route.useSearch();
+    const navigate = useNavigate({ from: Route.fullPath });
+    const [expanded, setExpandedState] = useState<ExpandedState>(() => parseExpandedParam(routeSearch.expanded));
     const [searchTerm, setSearchTerm] = useState<string>('');
     const [accumulatedChildren, setAccumulatedChildren] = useState<
         Record<string, { items: Collection[]; totalItems: number }>
     >({});
     const [nextPageToFetch, setNextPageToFetch] = useState<Record<string, number>>({});
 
-    useQueries({
+    const setExpanded = useCallback((updater: ExpandedState | ((prev: ExpandedState) => ExpandedState)) => {
+        setExpandedState(prev => {
+            const next = typeof updater === 'function' ? updater(prev) : updater;
+            navigate({
+                search: (old: Record<string, unknown>) => ({
+                    ...old,
+                    expanded: serializeExpandedState(next),
+                }),
+                replace: true,
+            });
+            return next;
+        });
+    }, [navigate]);
+
+    // NOTE: queryFn must be pure (no setState side effects) because TanStack Query
+    // skips queryFn entirely when data is served from cache (staleTime: 5min). If we
+    // called setAccumulatedChildren inside queryFn, a re-mounted component would get
+    // cache hits but accumulatedChildren would never be populated, so children wouldn't
+    // render. Instead we sync via useEffect below, which fires for both cache hits and
+    // fresh fetches.
+    const firstPageChildQueries = useQueries({
         queries: expanded === true ? [] : Object.entries(expanded)
             .filter(([collectionId]) => !accumulatedChildren[collectionId])
             .map(([collectionId]) => {
@@ -84,21 +126,35 @@ function CollectionListPage() {
                                 skip: 0,
                             },
                         });
-                        setAccumulatedChildren(prev => ({
-                            ...prev,
-                            [collectionId]: {
-                                items: result.collections.items,
-                                totalItems: result.collections.totalItems,
-                            },
-                        }));
-                        return result;
+                        return {
+                            collectionId,
+                            items: result.collections.items,
+                            totalItems: result.collections.totalItems,
+                        };
                     },
                     staleTime: 1000 * 60 * 5,
                 } satisfies FetchQueryOptions;
             }),
     });
 
-    useQueries({
+    useEffect(() => {
+        const newChildren: Record<string, { items: Collection[]; totalItems: number }> = {};
+        let hasNew = false;
+        for (const query of firstPageChildQueries) {
+            if (query.data && !accumulatedChildren[query.data.collectionId]) {
+                newChildren[query.data.collectionId] = {
+                    items: query.data.items as Collection[],
+                    totalItems: query.data.totalItems,
+                };
+                hasNew = true;
+            }
+        }
+        if (hasNew) {
+            setAccumulatedChildren(prev => ({ ...prev, ...newChildren }));
+        }
+    }, [firstPageChildQueries]);
+
+    const pagedChildQueries = useQueries({
         queries: Object.entries(nextPageToFetch)
             .filter(([_, page]) => page > 0)
             .map(([collectionId, page]) => {
@@ -114,28 +170,49 @@ function CollectionListPage() {
                                 skip: page * CHILDREN_PAGE_SIZE,
                             },
                         });
-                        setAccumulatedChildren(prev => {
-                            const existing = prev[collectionId];
-                            if (!existing) return prev;
-                            return {
-                                ...prev,
-                                [collectionId]: {
-                                    items: [...existing.items, ...result.collections.items],
-                                    totalItems: result.collections.totalItems,
-                                },
-                            };
-                        });
-                        setNextPageToFetch(prev => {
-                            const { [collectionId]: _, ...rest } = prev;
-                            return rest;
-                        });
-                        return result;
+                        return {
+                            collectionId,
+                            items: result.collections.items,
+                            totalItems: result.collections.totalItems,
+                        };
                     },
                     staleTime: 1000 * 60 * 5,
                 } satisfies FetchQueryOptions;
             }),
     });
 
+    useEffect(() => {
+        let hasUpdates = false;
+        const childUpdates: Record<string, { items: Collection[]; totalItems: number }> = {};
+        const fetchedPages: string[] = [];
+        for (const query of pagedChildQueries) {
+            if (!query.data) continue;
+            const { collectionId, items, totalItems } = query.data as {
+                collectionId: string;
+                items: Collection[];
+                totalItems: number;
+            };
+            if (accumulatedChildren[collectionId]) {
+                childUpdates[collectionId] = {
+                    items: [...accumulatedChildren[collectionId].items, ...items],
+                    totalItems,
+                };
+                fetchedPages.push(collectionId);
+                hasUpdates = true;
+            }
+        }
+        if (hasUpdates) {
+            setAccumulatedChildren(prev => ({ ...prev, ...childUpdates }));
+            setNextPageToFetch(prev => {
+                const next = { ...prev };
+                for (const id of fetchedPages) {
+                    delete next[id];
+                }
+                return next;
+            });
+        }
+    }, [pagedChildQueries]);
+
     const addSubCollections = (data: Collection[]): CollectionOrLoadMore[] => {
         const allRows: CollectionOrLoadMore[] = [];
         const addSubRows = (row: Collection) => {
@@ -226,6 +303,13 @@ function CollectionListPage() {
                 },
             });
 
+            // Remove query cache entries BEFORE clearing accumulated children
+            // to prevent stale cached data from being synced back by the useEffect.
+            queryClient.removeQueries({ queryKey: ['childCollections', sourceParentId] });
+            if (targetParentId !== sourceParentId) {
+                queryClient.removeQueries({ queryKey: ['childCollections', targetParentId] });
+            }
+
             setAccumulatedChildren(prev => {
                 const newState = { ...prev };
                 delete newState[sourceParentId];
@@ -235,19 +319,11 @@ function CollectionListPage() {
                 return newState;
             });
 
-            const queriesToInvalidate = [
-                queryClient.invalidateQueries({ queryKey: ['childCollections', sourceParentId] }),
-                queryClient.invalidateQueries({ queryKey: ['PaginatedListDataTable'] }),
-            ];
+            await queryClient.invalidateQueries({ queryKey: ['PaginatedListDataTable'] });
 
             if (targetParentId === sourceParentId) {
-                await Promise.all(queriesToInvalidate);
                 toast.success(t`Collection position updated`);
             } else {
-                queriesToInvalidate.push(
-                    queryClient.invalidateQueries({ queryKey: ['childCollections', targetParentId] })
-                );
-                await Promise.all(queriesToInvalidate);
                 toast.success(t`Collection moved to new parent`);
             }
         } catch (error) {
@@ -378,6 +454,11 @@ function CollectionListPage() {
                 options.meta = {
                     ...options.meta,
                     resetExpanded: () => setExpanded({}),
+                    refreshChildCaches: () => {
+                        queryClient.removeQueries({ queryKey: ['childCollections'] });
+                        queryClient.removeQueries({ queryKey: ['PaginatedListDataTable'] });
+                        setAccumulatedChildren({});
+                    },
                     isUtilityRow: (row: { original: CollectionOrLoadMore }) => isLoadMoreRow(row.original),
                     renderUtilityRow: (row: { original: CollectionOrLoadMore }) => {
                         const original = row.original as LoadMoreRow;

package/src/app/routes/_authenticated/_collections/components/collection-bulk-actions.tsx

@@ -94,19 +94,17 @@ export const DeleteCollectionsBulkAction: BulkActionComponent<any> = ({ selectio
 
 export const MoveCollectionsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
     const [dialogOpen, setDialogOpen] = useState(false);
-    const queryClient = useQueryClient();
     const { refetchPaginatedList } = usePaginatedList();
 
     const handleSuccess = () => {
-        queryClient.invalidateQueries({ queryKey: ['childCollections'] });
         refetchPaginatedList();
         table.resetRowSelection();
     };
 
     const handleResetExpanded = () => {
-        const resetExpanded = (table.options.meta as { resetExpanded: () => void })?.resetExpanded;
-        if (resetExpanded) {
-            resetExpanded();
+        const refreshChildCaches = (table.options.meta as { refreshChildCaches: () => void })?.refreshChildCaches;
+        if (refreshChildCaches) {
+            refreshChildCaches();
         }
     };
 

package/src/app/routes/_authenticated/_collections/components/move-collections-dialog.tsx

@@ -284,7 +284,8 @@ export function MoveCollectionsDialog({
             toast.success(t`Collections moved successfully`);
             queryClient.invalidateQueries({ queryKey: collectionForMoveKey });
             queryClient.invalidateQueries({ queryKey: childCollectionsForMoveKey() });
-            queryClient.invalidateQueries({ queryKey: ['PaginatedListDataTable'] });
+            // Remove child caches BEFORE invalidating the main list to prevent
+            // stale cached children from being synced back (same race as drag-reorder).
             onResetExpanded?.();
             onSuccess?.();
             onOpenChange(false);

package/src/app/routes/_authenticated/_product-variants/product-variants_.$id.tsx

@@ -9,6 +9,7 @@ import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js'
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { TaxCategorySelector } from '@/vdb/components/shared/tax-category-selector.js';
 import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '@/vdb/components/ui/form.js';
 import { Input } from '@/vdb/components/ui/input.js';
@@ -33,9 +34,9 @@ import { api } from '@/vdb/graphql/api.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
-import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
 import { VariablesOf } from 'gql.tada';
-import { Trash } from 'lucide-react';
+import { Edit2, Trash } from 'lucide-react';
 import { toast } from 'sonner';
 
 import { AddCurrencyDropdown } from './components/add-currency-dropdown.js';
@@ -241,6 +242,23 @@ function ProductVariantDetailPage() {
                         )}
                     />
                 </PageBlock>
+                {entity?.options && entity.options.length > 0 && (
+                    <PageBlock column="side" blockId="options" title={<Trans>Options</Trans>}>
+                        <div className="flex flex-wrap gap-1.5">
+                            {entity.options.map(option => (
+                                <Badge key={option.id} variant="secondary" className="text-xs" title={option.code}>
+                                    <span>{option.group.name}: {option.name}</span>
+                                    <Link
+                                        to={`/products/${entity.product.id}/option-groups/${option.group.id}`}
+                                        className="ml-1.5 inline-flex"
+                                    >
+                                        <Edit2 className="h-3 w-3" />
+                                    </Link>
+                                </Badge>
+                            ))}
+                        </div>
+                    </PageBlock>
+                )}
                 <PageBlock column="main" blockId="main-form">
                     <DetailFormGrid>
                         <TranslatableFormFieldWrapper