@vendure/dashboard 3.3.6-master-202507030732 → 3.3.6-master-202507030835

package/dist/plugin/vite-plugin-vendure-dashboard.js

@@ -32,7 +32,7 @@ export function vendureDashboardPlugin(options) {
             : [
                 TanStackRouterVite({
                     autoCodeSplitting: true,
-                    routeFileIgnorePattern: '.graphql.ts|components',
+                    routeFileIgnorePattern: '.graphql.ts|components|hooks',
                     routesDirectory: path.join(packageRoot, 'src/app/routes'),
                     generatedRouteTree: path.join(packageRoot, 'src/app/routeTree.gen.ts'),
                 }),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vendure/dashboard",
   "private": false,
-  "version": "3.3.6-master-202507030732",
+  "version": "3.3.6-master-202507030835",
   "type": "module",
   "repository": {
     "type": "git",
@@ -54,23 +54,32 @@
     "@lingui/core": "^5.2.0",
     "@lingui/react": "^5.2.0",
     "@lingui/vite-plugin": "^5.2.0",
-    "@radix-ui/react-accordion": "^1.2.3",
-    "@radix-ui/react-alert-dialog": "^1.1.6",
-    "@radix-ui/react-avatar": "^1.1.3",
-    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-collapsible": "^1.1.3",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-dropdown-menu": "^2.1.6",
-    "@radix-ui/react-hover-card": "^1.1.6",
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-scroll-area": "^1.2.3",
-    "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.3",
-    "@radix-ui/react-tabs": "^1.1.3",
-    "@radix-ui/react-tooltip": "^1.1.8",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/vite": "^4.1.5",
     "@tanstack/eslint-plugin-query": "^5.66.1",
     "@tanstack/react-query": "^5.66.7",
@@ -86,35 +95,39 @@
     "@types/react-dom": "^19.0.4",
     "@types/react-grid-layout": "^1.3.5",
     "@uidotdev/usehooks": "^2.4.1",
-    "@vendure/common": "^3.3.6-master-202507030732",
-    "@vendure/core": "^3.3.6-master-202507030732",
+    "@vendure/common": "^3.3.6-master-202507030835",
+    "@vendure/core": "^3.3.6-master-202507030835",
     "@vitejs/plugin-react": "^4.3.4",
     "awesome-graphql-client": "^2.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
+    "cmdk": "^1.1.1",
     "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.6.0",
     "gql.tada": "^1.8.10",
     "graphql": "^16.10.0",
+    "input-otp": "^1.4.2",
     "json-edit-react": "^1.23.1",
     "lucide-react": "^0.475.0",
     "motion": "^12.6.2",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
-    "react-day-picker": "^9.6.7",
+    "react-day-picker": "^9.7.0",
     "react-dom": "^19.0.0",
     "react-dropzone": "^14.3.8",
     "react-grid-layout": "^1.5.1",
-    "react-hook-form": "^7.54.2",
-    "recharts": "^2.15.1",
-    "sonner": "^2.0.1",
+    "react-hook-form": "^7.59.0",
+    "react-resizable-panels": "^3.0.3",
+    "recharts": "^2.15.4",
+    "sonner": "^2.0.5",
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.1.5",
     "tailwindcss-animate": "^1.0.7",
     "tsconfig-paths": "^4.2.0",
     "tw-animate-css": "^1.2.9",
+    "vaul": "^1.1.2",
     "vite": "^6.3.5",
-    "zod": "^3.24.2"
+    "zod": "^3.25.71"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",
@@ -130,5 +143,5 @@
     "lightningcss-linux-arm64-musl": "^1.29.3",
     "lightningcss-linux-x64-musl": "^1.29.1"
   },
-  "gitHead": "0caf3b1c7a4e75924dab2e3e92673c34dadc36f9"
+  "gitHead": "d79942fa16b812acfb665834088b0416dfde4670"
 }

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

@@ -156,3 +156,35 @@ export const deleteCollectionsDocument = graphql(`
         }
     }
 `);
+
+export const moveCollectionDocument = graphql(`
+    mutation MoveCollection($input: MoveCollectionInput!) {
+        moveCollection(input: $input) {
+            id
+        }
+    }
+`);
+
+export const collectionListForMoveDocument = graphql(`
+    query CollectionListForMove($options: CollectionListOptions) {
+        collections(options: $options) {
+            items {
+                id
+                name
+                slug
+                breadcrumbs {
+                    id
+                    name
+                    slug
+                }
+                children {
+                    id
+                }
+                position
+                isPrivate
+                parentId
+            }
+            totalItems
+        }
+    }
+`);

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

@@ -10,7 +10,7 @@ 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 { Folder, FolderOpen, FolderTreeIcon, PlusIcon } from 'lucide-react';
 import { useState } from 'react';
 
 import { collectionListDocument, deleteCollectionDocument } from './collections.graphql.js';
@@ -18,9 +18,11 @@ import {
     AssignCollectionsToChannelBulkAction,
     DeleteCollectionsBulkAction,
     DuplicateCollectionsBulkAction,
+    MoveCollectionsBulkAction,
     RemoveCollectionsFromChannelBulkAction,
 } from './components/collection-bulk-actions.js';
 import { CollectionContentsSheet } from './components/collection-contents-sheet.js';
+import { useMoveSingleCollection } from './components/move-single-collection.js';
 
 export const Route = createFileRoute('/_authenticated/_collections/collections')({
     component: CollectionListPage,
@@ -31,6 +33,7 @@ type Collection = ResultOf<typeof collectionListDocument>['collections']['items'
 
 function CollectionListPage() {
     const [expanded, setExpanded] = useState<ExpandedState>({});
+    const { handleMoveClick, MoveDialog } = useMoveSingleCollection();
     const childrenQueries = useQueries({
         queries: Object.entries(expanded).map(([collectionId, isExpanded]) => {
             return {
@@ -77,143 +80,160 @@ function CollectionListPage() {
     };
 
     return (
-        <ListPage
-            pageId="collection-list"
-            title="Collections"
-            listQuery={collectionListDocument}
-            transformVariables={input => {
-                const filterTerm = input.options?.filter?.name?.contains;
-                const isFiltering = !!filterTerm;
-                return {
-                    options: {
-                        ...input.options,
-                        topLevelOnly: !isFiltering,
+        <>
+            <ListPage
+                pageId="collection-list"
+                title="Collections"
+                listQuery={collectionListDocument}
+                transformVariables={input => {
+                    const filterTerm = input.options?.filter?.name?.contains;
+                    const isFiltering = !!filterTerm;
+                    return {
+                        options: {
+                            ...input.options,
+                            topLevelOnly: !isFiltering,
+                        },
+                    };
+                }}
+                deleteMutation={deleteCollectionDocument}
+                customizeColumns={{
+                    name: {
+                        header: 'Collection 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' : ''}
+                                    >
+                                        {isExpanded ? <FolderOpen /> : <Folder />}
+                                    </Button>
+                                    <DetailPageButton id={row.original.id} label={row.original.name} />
+                                </div>
+                            );
+                        },
+                    },
+                    breadcrumbs: {
+                        cell: ({ cell }) => {
+                            const value = cell.getValue();
+                            if (!Array.isArray(value)) {
+                                return null;
+                            }
+                            return (
+                                <div>
+                                    {value
+                                        .slice(1)
+                                        .map(breadcrumb => breadcrumb.name)
+                                        .join(' / ')}
+                                </div>
+                            );
+                        },
                     },
-                };
-            }}
-            deleteMutation={deleteCollectionDocument}
-            customizeColumns={{
-                name: {
-                    header: 'Collection 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' : ''}
+                    productVariants: {
+                        header: 'Contents',
+                        cell: ({ row }) => {
+                            return (
+                                <CollectionContentsSheet
+                                    collectionId={row.original.id}
+                                    collectionName={row.original.name}
                                 >
-                                    {isExpanded ? <FolderOpen /> : <Folder />}
-                                </Button>
-                                <DetailPageButton id={row.original.id} label={row.original.name} />
-                            </div>
-                        );
+                                    <Trans>{row.original.productVariants.totalItems} variants</Trans>
+                                </CollectionContentsSheet>
+                            );
+                        },
                     },
-                },
-                breadcrumbs: {
-                    cell: ({ cell }) => {
-                        const value = cell.getValue();
-                        if (!Array.isArray(value)) {
-                            return null;
-                        }
-                        return (
-                            <div>
-                                {value
-                                    .slice(1)
-                                    .map(breadcrumb => breadcrumb.name)
-                                    .join(' / ')}
+                }}
+                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,
+                }}
+                onSearchTermChange={searchTerm => {
+                    return {
+                        name: { contains: searchTerm },
+                    };
+                }}
+                route={Route}
+                rowActions={[
+                    {
+                        label: (
+                            <div className="flex items-center gap-2">
+                                <FolderTreeIcon className="w-4 h-4" /> <Trans>Move</Trans>
                             </div>
-                        );
+                        ),
+                        onClick: row => handleMoveClick(row.original),
+                    },
+                ]}
+                bulkActions={[
+                    {
+                        component: AssignCollectionsToChannelBulkAction,
+                        order: 100,
+                    },
+                    {
+                        component: RemoveCollectionsFromChannelBulkAction,
+                        order: 200,
+                    },
+                    {
+                        component: DuplicateCollectionsBulkAction,
+                        order: 300,
+                    },
+                    {
+                        component: MoveCollectionsBulkAction,
+                        order: 400,
                     },
-                },
-                productVariants: {
-                    header: 'Contents',
-                    cell: ({ row }) => {
-                        return (
-                            <CollectionContentsSheet
-                                collectionId={row.original.id}
-                                collectionName={row.original.name}
-                            >
-                                <Trans>{row.original.productVariants.totalItems} variants</Trans>
-                            </CollectionContentsSheet>
-                        );
+                    {
+                        component: DeleteCollectionsBulkAction,
+                        order: 500,
                     },
-                },
-            }}
-            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,
-            }}
-            onSearchTermChange={searchTerm => {
-                return {
-                    name: { contains: searchTerm },
-                };
-            }}
-            route={Route}
-            bulkActions={[
-                {
-                    component: AssignCollectionsToChannelBulkAction,
-                    order: 100,
-                },
-                {
-                    component: RemoveCollectionsFromChannelBulkAction,
-                    order: 200,
-                },
-                {
-                    component: DuplicateCollectionsBulkAction,
-                    order: 300,
-                },
-                {
-                    component: DeleteCollectionsBulkAction,
-                    order: 400,
-                },
-            ]}
-        >
-            <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>
+                ]}
+            >
+                <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>
+            <MoveDialog />
+        </>
     );
 }

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

@@ -1,9 +1,12 @@
 import { useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { FolderTree } from 'lucide-react';
 
+import { Trans } from '@/vdb/lib/trans.js';
 import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
 import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
 import { api } from '@/vdb/graphql/api.js';
-import { BulkActionComponent, useChannel } from '@/vdb/index.js';
+import { BulkActionComponent, useChannel, DataTableBulkActionItem, usePaginatedList } from '@/vdb/index.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
 import {
@@ -11,6 +14,7 @@ import {
     deleteCollectionsDocument,
     removeCollectionFromChannelDocument,
 } from '../collections.graphql.js';
+import { MoveCollectionsDialog } from './move-collections-dialog.js';
 
 export const AssignCollectionsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
     const queryClient = useQueryClient();
@@ -85,3 +89,32 @@ 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();
+    };
+
+    return (
+        <>
+            <DataTableBulkActionItem
+                requiresPermission={['UpdateCatalog', 'UpdateCollection']}
+                onClick={() => setDialogOpen(true)}
+                label={<Trans>Move</Trans>}
+                icon={FolderTree}
+            />
+            <MoveCollectionsDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                collectionsToMove={selection}
+                onSuccess={handleSuccess}
+            />
+        </>
+    );
+};