@vendure/dashboard 3.5.2-master-202512170238 → 3.5.2-master-202512180239

package/dist/plugin/dashboard.plugin.js

@@ -151,7 +151,7 @@ let DashboardPlugin = DashboardPlugin_1 = class DashboardPlugin {
     createStaticServer(dashboardPath) {
         const limiter = (0, express_rate_limit_1.rateLimit)({
             windowMs: 60 * 1000,
-            limit: process.env.NODE_ENV === 'production' ? 500 : 10000,
+            limit: process.env.NODE_ENV === 'production' ? 500 : 1000000,
             standardHeaders: true,
             legacyHeaders: false,
         });

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.5.2-master-202512170238",
+    "version": "3.5.2-master-202512180239",
     "type": "module",
     "repository": {
         "type": "git",
@@ -156,8 +156,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.2-master-202512170238",
-        "@vendure/core": "^3.5.2-master-202512170238",
+        "@vendure/common": "^3.5.2-master-202512180239",
+        "@vendure/core": "^3.5.2-master-202512180239",
         "@vitest/browser": "^3.2.4",
         "@vitest/coverage-v8": "^3.2.4",
         "eslint": "^9.19.0",

package/src/app/routes/_authenticated/_collections/collections.graphql.ts

@@ -163,6 +163,7 @@ export const moveCollectionDocument = graphql(`
     mutation MoveCollection($input: MoveCollectionInput!) {
         moveCollection(input: $input) {
             id
+            position
         }
     }
 `);

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

@@ -4,18 +4,25 @@ import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans } from '@lingui/react/macro';
-import { FetchQueryOptions, useQueries } from '@tanstack/react-query';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { FetchQueryOptions, useQueries, useQueryClient } from '@tanstack/react-query';
 import { createFileRoute, Link } 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 { toast } from 'sonner';
 
 import { RichTextDescriptionCell } from '@/vdb/components/shared/table-cell/order-table-cell-components.js';
 import { Badge } from '@/vdb/components/ui/badge.js';
-import { collectionListDocument } from './collections.graphql.js';
+import {
+    calculateDragTargetPosition,
+    calculateSiblingIndex,
+    getItemParentId,
+    isCircularReference,
+} from '@/vdb/components/data-table/data-table-utils.js';
+import { collectionListDocument, moveCollectionDocument } from './collections.graphql.js';
 import {
     AssignCollectionsToChannelBulkAction,
     DeleteCollectionsBulkAction,
@@ -25,15 +32,21 @@ import {
 } from './components/collection-bulk-actions.js';
 import { CollectionContentsSheet } from './components/collection-contents-sheet.js';
 
+
 export const Route = createFileRoute('/_authenticated/_collections/collections')({
     component: CollectionListPage,
     loader: () => ({ breadcrumb: () => <Trans>Collections</Trans> }),
 });
 
+
 type Collection = ResultOf<typeof collectionListDocument>['collections']['items'][number];
 
 function CollectionListPage() {
+    const { t } = useLingui();
+    const queryClient = useQueryClient();
     const [expanded, setExpanded] = useState<ExpandedState>({});
+    const [searchTerm, setSearchTerm] = useState<string>('');
+
     const childrenQueries = useQueries({
         queries: Object.entries(expanded).map(([collectionId, isExpanded]) => {
             return {
@@ -50,6 +63,7 @@ function CollectionListPage() {
             } satisfies FetchQueryOptions;
         }),
     });
+
     const childCollectionsByParentId = childrenQueries.reduce(
         (acc, query, index) => {
             const collectionId = Object.keys(expanded)[index];
@@ -79,177 +93,245 @@ function CollectionListPage() {
         return allRows;
     };
 
+    const handleReorder = async (oldIndex: number, newIndex: number, item: Collection, allItems?: Collection[]) => {
+        try {
+            const items = allItems || [];
+            const sourceParentId = getItemParentId(item);
+
+            if (!sourceParentId) {
+                throw new Error('Unable to determine parent collection ID');
+            }
+
+            // Calculate target position (parent and index)
+            const { targetParentId, adjustedIndex: initialIndex } = calculateDragTargetPosition({
+                item,
+                oldIndex,
+                newIndex,
+                items,
+                sourceParentId,
+                expanded,
+            });
+
+            // Validate no circular references when moving to different parent
+            if (targetParentId !== sourceParentId && isCircularReference(item, targetParentId, items)) {
+                toast.error(t`Cannot move a collection into its own descendant`);
+                throw new Error('Circular reference detected');
+            }
+
+            // Calculate final index (adjust for same-parent moves)
+            const adjustedIndex = targetParentId === sourceParentId
+                ? calculateSiblingIndex({ item, oldIndex, newIndex, items, parentId: sourceParentId })
+                : initialIndex;
+
+            // Perform the move
+            await api.mutate(moveCollectionDocument, {
+                input: {
+                    collectionId: item.id,
+                    parentId: targetParentId,
+                    index: adjustedIndex,
+                },
+            });
+
+            // Invalidate queries and show success message
+            const queriesToInvalidate = [
+                queryClient.invalidateQueries({ queryKey: ['childCollections', sourceParentId] }),
+                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) {
+            console.error('Failed to reorder collection:', error);
+            if (error instanceof Error && error.message !== 'Circular reference detected') {
+                toast.error(t`Failed to update collection position`);
+            }
+            throw error;
+        }
+    };
+
     return (
-        <>
-            <ListPage
-                pageId="collection-list"
-                title={<Trans>Collections</Trans>}
-                listQuery={collectionListDocument}
-                transformVariables={input => {
-                    const filterTerm = input.options?.filter?.name?.contains;
-                    const isFiltering = !!filterTerm;
-                    return {
-                        options: {
-                            ...input.options,
-                            topLevelOnly: !isFiltering,
-                        },
-                    };
-                }}
-                customizeColumns={{
-                    name: {
-                        meta: {
-                            // This column needs the following fields to always be available
-                            // in order to correctly render.
-                            dependencies: ['children', 'breadcrumbs'],
-                        },
-                        cell: ({ row }) => {
-                            const isExpanded = row.getIsExpanded();
-                            const hasChildren = !!row.original.children?.length;
-                            return (
-                                <div
-                                    style={{ marginLeft: (row.original.breadcrumbs?.length - 2) * 20 + 'px' }}
-                                    className="flex gap-2 items-center"
-                                >
-                                    <Button
-                                        size="icon"
-                                        variant="secondary"
-                                        onClick={row.getToggleExpandedHandler()}
-                                        disabled={!hasChildren}
-                                        className={!hasChildren ? 'opacity-20' : ''}
-                                    >
-                                        {isExpanded ? <FolderOpen /> : <Folder />}
-                                    </Button>
-                                    <DetailPageButton id={row.original.id} label={row.original.name} />
-                                </div>
-                            );
-                        },
+        <ListPage
+            pageId="collection-list"
+            title={<Trans>Collections</Trans>}
+            listQuery={collectionListDocument}
+            transformVariables={input => {
+                const filterTerm = input.options?.filter?.name?.contains;
+                const isFiltering = !!filterTerm;
+                return {
+                    options: {
+                        ...input.options,
+                        topLevelOnly: !isFiltering,
                     },
-                    description: {
-                        cell: RichTextDescriptionCell,
+                };
+            }}
+            customizeColumns={{
+                name: {
+                    meta: {
+                        dependencies: ['children', 'breadcrumbs'],
                     },
-                    breadcrumbs: {
-                        cell: ({ cell }) => {
-                            const value = cell.getValue();
-                            if (!Array.isArray(value)) {
-                                return null;
-                            }
-                            return (
-                                <div>
-                                    {value
-                                        .slice(1)
-                                        .map(breadcrumb => breadcrumb.name)
-                                        .join(' / ')}
-                                </div>
-                            );
-                        },
-                    },
-                    productVariants: {
-                        header: () => <Trans>Contents</Trans>,
-                        cell: ({ row }) => {
-                            return (
-                                <CollectionContentsSheet
-                                    collectionId={row.original.id}
-                                    collectionName={row.original.name}
+                    cell: ({ row }) => {
+                        const isExpanded = row.getIsExpanded();
+                        const hasChildren = !!row.original.children?.length;
+                        return (
+                            <div
+                                style={{ marginLeft: (row.original.breadcrumbs?.length - 2) * 20 + 'px' }}
+                                className="flex gap-2 items-center"
+                            >
+                                <Button
+                                    size="icon"
+                                    variant="secondary"
+                                    onClick={row.getToggleExpandedHandler()}
+                                    disabled={!hasChildren}
+                                    className={!hasChildren ? 'opacity-20' : ''}
                                 >
-                                    <Trans>{row.original.productVariants?.totalItems} variants</Trans>
-                                </CollectionContentsSheet>
-                            );
-                        },
-                    },
-                    children: {
-                        cell: ({ row }) => {
-                            const children = row.original.children ?? [];
-                            const count = children.length;
-                            const maxDisplay = 5;
-                            const leftOver = Math.max(count - maxDisplay, 0);
-                            return (
-                                <div className="flex flex-wrap gap-2">
-                                    {children.slice(0, maxDisplay).map(child => (
-                                        <Badge variant="outline">{child.name}</Badge>
-                                    ))}
-                                    {leftOver > 0 ? (
-                                        <Badge variant="outline">
-                                            <Trans>+ {leftOver} more</Trans>
-                                        </Badge>
-                                    ) : null}
-                                </div>
-                            );
-                        },
+                                    {isExpanded ? <FolderOpen /> : <Folder />}
+                                </Button>
+                                <DetailPageButton id={row.original.id} label={row.original.name} />
+                            </div>
+                        );
                     },
-                }}
-                defaultColumnOrder={[
-                    'featuredAsset',
-                    'children',
-                    'name',
-                    'slug',
-                    'breadcrumbs',
-                    'productVariants',
-                ]}
-                transformData={data => {
-                    return addSubCollections(data);
-                }}
-                setTableOptions={(options: TableOptions<any>) => {
-                    options.state = {
-                        ...options.state,
-                        expanded: expanded,
-                    };
-                    options.onExpandedChange = setExpanded;
-                    options.getExpandedRowModel = getExpandedRowModel();
-                    options.getRowCanExpand = () => true;
-                    options.getRowId = row => {
-                        return row.id;
-                    };
-                    return options;
-                }}
-                defaultVisibility={{
-                    id: false,
-                    createdAt: false,
-                    updatedAt: false,
-                    position: false,
-                    parentId: false,
-                    children: false,
-                    description: false,
-                }}
-                onSearchTermChange={searchTerm => {
-                    return {
-                        name: { contains: searchTerm },
-                    };
-                }}
-                route={Route}
-                bulkActions={[
-                    {
-                        component: AssignCollectionsToChannelBulkAction,
-                        order: 100,
+                },
+                description: {
+                    cell: RichTextDescriptionCell,
+                },
+                breadcrumbs: {
+                    cell: ({ cell }) => {
+                        const value = cell.getValue();
+                        if (!Array.isArray(value)) {
+                            return null;
+                        }
+                        return (
+                            <div>
+                                {value
+                                    .slice(1)
+                                    .map(breadcrumb => breadcrumb.name)
+                                    .join(' / ')}
+                            </div>
+                        );
                     },
-                    {
-                        component: RemoveCollectionsFromChannelBulkAction,
-                        order: 200,
+                },
+                productVariants: {
+                    header: () => <Trans>Contents</Trans>,
+                    cell: ({ row }) => {
+                        return (
+                            <CollectionContentsSheet
+                                collectionId={row.original.id}
+                                collectionName={row.original.name}
+                            >
+                                <Trans>{row.original.productVariants?.totalItems} variants</Trans>
+                            </CollectionContentsSheet>
+                        );
                     },
-                    {
-                        component: DuplicateCollectionsBulkAction,
-                        order: 300,
+                },
+                children: {
+                    cell: ({ row }) => {
+                        const children = row.original.children ?? [];
+                        const count = children.length;
+                        const maxDisplay = 5;
+                        const leftOver = Math.max(count - maxDisplay, 0);
+                        return (
+                            <div className="flex flex-wrap gap-2">
+                                {children.slice(0, maxDisplay).map(child => (
+                                    <Badge key={child.id} variant="outline">{child.name}</Badge>
+                                ))}
+                                {leftOver > 0 ? (
+                                    <Badge variant="outline">
+                                        <Trans>+ {leftOver} more</Trans>
+                                    </Badge>
+                                ) : null}
+                            </div>
+                        );
                     },
-                    {
-                        component: MoveCollectionsBulkAction,
-                        order: 400,
-                    },
-                    {
-                        component: DeleteCollectionsBulkAction,
-                        order: 500,
-                    },
-                ]}
-            >
-                <PageActionBarRight>
-                    <PermissionGuard requires={['CreateCollection', 'CreateCatalog']}>
-                        <Button asChild>
-                            <Link to="./new">
-                                <PlusIcon className="mr-2 h-4 w-4" />
-                                <Trans>New Collection</Trans>
-                            </Link>
-                        </Button>
-                    </PermissionGuard>
-                </PageActionBarRight>
-            </ListPage>
-        </>
+                },
+            }}
+            defaultColumnOrder={[
+                'featuredAsset',
+                'name',
+                'slug',
+                'breadcrumbs',
+                'productVariants',
+            ]}
+            transformData={data => {
+                return addSubCollections(data);
+            }}
+            setTableOptions={(options: TableOptions<any>) => {
+                options.state = {
+                    ...options.state,
+                    expanded: expanded,
+                };
+                options.onExpandedChange = setExpanded;
+                options.getExpandedRowModel = getExpandedRowModel();
+                options.getRowCanExpand = () => true;
+                options.getRowId = row => {
+                    return row.id;
+                };
+                options.meta = {
+                    ...options.meta,
+                    resetExpanded: () => setExpanded({}),
+                };
+                return options;
+            }}
+            defaultVisibility={{
+                id: false,
+                createdAt: false,
+                updatedAt: false,
+                position: false,
+                parentId: false,
+                children: false,
+                description: false,
+                isPrivate: false,
+            }}
+            onSearchTermChange={searchTerm => {
+                setSearchTerm(searchTerm);
+                return {
+                    name: { contains: searchTerm },
+                };
+            }}
+            route={Route}
+            bulkActions={[
+                {
+                    component: AssignCollectionsToChannelBulkAction,
+                    order: 100,
+                },
+                {
+                    component: RemoveCollectionsFromChannelBulkAction,
+                    order: 200,
+                },
+                {
+                    component: DuplicateCollectionsBulkAction,
+                    order: 300,
+                },
+                {
+                    component: MoveCollectionsBulkAction,
+                    order: 400,
+                },
+                {
+                    component: DeleteCollectionsBulkAction,
+                    order: 500,
+                },
+            ]}
+            onReorder={handleReorder}
+            disableDragAndDrop={!!searchTerm} // Disable dragging while searching
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateCollection', 'CreateCatalog']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon className="mr-2 h-4 w-4" />
+                            <Trans>New Collection</Trans>
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
     );
 }
+

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

@@ -103,6 +103,13 @@ export const MoveCollectionsBulkAction: BulkActionComponent<any> = ({ selection,
         table.resetRowSelection();
     };
 
+    const handleResetExpanded = () => {
+        const resetExpanded = (table.options.meta as { resetExpanded: () => void })?.resetExpanded;
+        if (resetExpanded) {
+            resetExpanded();
+        }
+    };
+
     return (
         <>
             <DataTableBulkActionItem
@@ -116,6 +123,7 @@ export const MoveCollectionsBulkAction: BulkActionComponent<any> = ({ selection,
                 onOpenChange={setDialogOpen}
                 collectionsToMove={selection}
                 onSuccess={handleSuccess}
+                onResetExpanded={handleResetExpanded}
             />
         </>
     );

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

@@ -34,6 +34,7 @@ interface MoveCollectionsDialogProps {
     onOpenChange: (open: boolean) => void;
     collectionsToMove: Collection[];
     onSuccess?: () => void;
+    onResetExpanded?: () => void;
 }
 
 interface CollectionTreeNodeProps {
@@ -209,6 +210,7 @@ export function MoveCollectionsDialog({
     onOpenChange,
     collectionsToMove,
     onSuccess,
+    onResetExpanded,
 }: Readonly<MoveCollectionsDialogProps>) {
     const [expanded, setExpanded] = useState<Record<string, boolean>>({});
     const [selectedCollectionId, setSelectedCollectionId] = useState<string>();
@@ -282,6 +284,8 @@ export function MoveCollectionsDialog({
             toast.success(t`Collections moved successfully`);
             queryClient.invalidateQueries({ queryKey: collectionForMoveKey });
             queryClient.invalidateQueries({ queryKey: childCollectionsForMoveKey() });
+            queryClient.invalidateQueries({ queryKey: ['PaginatedListDataTable'] });
+            onResetExpanded?.();
             onSuccess?.();
             onOpenChange(false);
         },

package/src/app/routes/_authenticated/_tax-rates/tax-rates_.$id.tsx

@@ -1,4 +1,4 @@
-import { AffixedInput } from '@/vdb/components/data-input/affixed-input.js';
+import { NumberInput } from '@/vdb/components/data-input/number-input.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
@@ -121,14 +121,7 @@ function TaxRateDetailPage() {
                             name="value"
                             label={<Trans>Rate</Trans>}
                             render={({ field }) => (
-                                <AffixedInput
-                                    {...field}
-                                    type="number"
-                                    suffix="%"
-                                    min={0}
-                                    value={field.value}
-                                    onChange={e => field.onChange(e.target.valueAsNumber)}
-                                />
+                                <NumberInput {...field} value={field.value} min={0} step={0.01} suffix="%" />
                             )}
                         />
                         <FormFieldWrapper

package/src/lib/components/data-input/number-input.tsx

@@ -3,11 +3,14 @@ import { Input } from '@/vdb/components/ui/input.js';
 
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+import { ReactNode } from 'react';
 
 export type NumberInputProps = DashboardFormComponentProps & {
     min?: number;
     max?: number;
     step?: number;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
 };
 
 /**
@@ -17,28 +20,43 @@ export type NumberInputProps = DashboardFormComponentProps & {
  * @docsCategory form-components
  * @docsPage NumberInput
  */
-export function NumberInput({ fieldDef, onChange, ...fieldProps }: Readonly<NumberInputProps>) {
+export function NumberInput({
+    fieldDef,
+    onChange,
+    prefix: overridePrefix,
+    suffix: overrideSuffix,
+    ...fieldProps
+}: Readonly<NumberInputProps>) {
     const readOnly = fieldProps.disabled || isReadonlyField(fieldDef);
     const isFloat = fieldDef ? fieldDef.type === 'float' : false;
     const min = fieldProps.min ?? fieldDef?.ui?.min;
     const max = fieldProps.max ?? fieldDef?.ui?.max;
     const step = fieldProps.step ?? (fieldDef?.ui?.step || (isFloat ? 0.01 : 1));
-    const prefix = fieldDef?.ui?.prefix;
-    const suffix = fieldDef?.ui?.suffix;
+    const prefix = overridePrefix ?? fieldDef?.ui?.prefix;
+    const suffix = overrideSuffix ?? fieldDef?.ui?.suffix;
     const shouldUseAffixedInput = prefix || suffix;
+    const value = fieldProps.value ?? '';
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         if (readOnly) return;
-        const numValue = e.target.valueAsNumber;
+
+        let numValue = e.target.valueAsNumber;
+
+        if (Number.isNaN(numValue) && e.target.value) {
+            const normalized = e.target.value.replace(',', '.');
+            numValue = Number(normalized);
+        }
+
         if (Number.isNaN(numValue)) {
             onChange(null);
         } else {
-            onChange(e.target.valueAsNumber);
+            onChange(numValue);
         }
     };
     if (shouldUseAffixedInput) {
         return (
             <AffixedInput
                 {...fieldProps}
+                value={value}
                 type="number"
                 onChange={handleChange}
                 min={min}
@@ -57,6 +75,7 @@ export function NumberInput({ fieldDef, onChange, ...fieldProps }: Readonly<Numb
             type="number"
             onChange={handleChange}
             {...fieldProps}
+            value={value}
             min={min}
             max={max}
             step={step}