@vendure/dashboard 3.3.6-master-202507050232 → 3.4.0-minor-202506250934

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

@@ -1,430 +0,0 @@
-import { useMutation, useQueries, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useDebounce } from '@uidotdev/usehooks';
-import { useRef, useState } from 'react';
-import { toast } from 'sonner';
-
-import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/vdb/components/ui/dialog.js';
-import { Input } from '@/vdb/components/ui/input.js';
-import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
-import { api } from '@/vdb/graphql/api.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
-import { ChevronRight, Folder, FolderOpen, Search } from 'lucide-react';
-
-import { collectionListForMoveDocument, moveCollectionDocument } from '../collections.graphql.js';
-
-type Collection = {
-    id: string;
-    name: string;
-    slug: string;
-    children?: { id: string }[] | null;
-    breadcrumbs: Array<{ id: string; name: string; slug: string }>;
-    parentId?: string;
-};
-
-interface MoveCollectionsDialogProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    collectionsToMove: Collection[];
-    onSuccess?: () => void;
-}
-
-interface CollectionTreeNodeProps {
-    collection: Collection;
-    depth: number;
-    expanded: Record<string, boolean>;
-    onToggleExpanded: (id: string) => void;
-    onSelect: (collection: Collection) => void;
-    selectedCollectionId?: string;
-    collectionsToMove: Collection[];
-    childCollectionsByParentId: Record<string, Collection[]>;
-}
-
-interface TargetAlertProps {
-    selectedCollectionId?: string;
-    collectionsToMove: Collection[];
-    topLevelCollectionId?: string;
-    collectionNameCache: React.MutableRefObject<Map<string, string>>;
-}
-
-interface MoveToTopLevelProps {
-    selectedCollectionId?: string;
-    topLevelCollectionId?: string;
-    onSelect: (id?: string) => void;
-}
-
-function TargetAlert({
-    selectedCollectionId,
-    collectionsToMove,
-    topLevelCollectionId,
-    collectionNameCache,
-}: Readonly<TargetAlertProps>) {
-    return (
-        <Alert className={selectedCollectionId ? 'border-blue-200 bg-blue-50' : ''}>
-            <Folder className="h-4 w-4" />
-            <AlertDescription>
-                {selectedCollectionId ? (
-                    <Trans>
-                        Moving {collectionsToMove.length} collection
-                        {collectionsToMove.length === 1 ? '' : 's'} into{' '}
-                        {selectedCollectionId === topLevelCollectionId
-                            ? 'top level'
-                            : collectionNameCache.current.get(selectedCollectionId) || 'selected collection'}
-                    </Trans>
-                ) : (
-                    <Trans>Select a destination collection</Trans>
-                )}
-            </AlertDescription>
-        </Alert>
-    );
-}
-
-function MoveToTopLevel({
-    selectedCollectionId,
-    topLevelCollectionId,
-    onSelect,
-}: Readonly<MoveToTopLevelProps>) {
-    return (
-        <button
-            type="button"
-            className={`flex items-center gap-2 py-2 px-3 hover:bg-accent rounded-sm cursor-pointer w-full text-left ${
-                selectedCollectionId === topLevelCollectionId ? 'bg-accent' : ''
-            }`}
-            onClick={() => onSelect(topLevelCollectionId)}
-        >
-            <div className="w-3 h-3" />
-            <div className="flex items-center gap-2">
-                <Folder className="h-4 w-4 text-muted-foreground" />
-                <span className="text-sm font-medium">
-                    <Trans>Move to the top level</Trans>
-                </span>
-            </div>
-        </button>
-    );
-}
-
-function CollectionTreeNode({
-    collection,
-    depth,
-    expanded,
-    onToggleExpanded,
-    onSelect,
-    selectedCollectionId,
-    collectionsToMove,
-    childCollectionsByParentId,
-}: Readonly<CollectionTreeNodeProps>) {
-    const hasChildren = collection.children && collection.children.length > 0;
-    const isExpanded = expanded[collection.id];
-    const isSelected = selectedCollectionId === collection.id;
-    const isBeingMoved = collectionsToMove.some(c => c.id === collection.id);
-    const isChildOfBeingMoved = collectionsToMove.some(c => collection.breadcrumbs.some(b => b.id === c.id));
-
-    // Don't allow selecting collections that are being moved or are children of collections being moved
-    const isSelectable = !isBeingMoved && !isChildOfBeingMoved;
-
-    const childCollections = childCollectionsByParentId[collection.id] || [];
-
-    return (
-        <div className="my-0.5">
-            <div className="flex items-center" style={{ marginLeft: depth * 20 }}>
-                {hasChildren && (
-                    <Button
-                        size="icon"
-                        variant="ghost"
-                        className="h-4 w-4 p-0 mr-1"
-                        onClick={() => onToggleExpanded(collection.id)}
-                    >
-                        {isExpanded ? (
-                            <ChevronRight className="h-3 w-3 rotate-90" />
-                        ) : (
-                            <ChevronRight className="h-3 w-3" />
-                        )}
-                    </Button>
-                )}
-                {!hasChildren && <div className="w-5 h-4 mr-1" />}
-                <button
-                    type="button"
-                    className={`flex items-center gap-2 py-2 px-3 hover:bg-accent rounded-sm cursor-pointer w-full text-left ${
-                        isSelected ? 'bg-accent' : ''
-                    } ${!isSelectable ? 'opacity-50 cursor-not-allowed' : ''}`}
-                    onClick={() => {
-                        if (isSelectable) {
-                            onSelect(collection);
-                        }
-                    }}
-                    disabled={!isSelectable}
-                >
-                    <div className="flex items-center gap-2">
-                        {hasChildren &&
-                            (isExpanded ? (
-                                <FolderOpen className="h-4 w-4 text-muted-foreground" />
-                            ) : (
-                                <Folder className="h-4 w-4 text-muted-foreground" />
-                            ))}
-                        {!hasChildren && <div className="w-4 h-4" />}
-                        <div className="flex flex-col">
-                            <span className="text-sm">{collection.name}</span>
-                            {collection.breadcrumbs.length > 1 && (
-                                <span className="text-xs text-muted-foreground">
-                                    {collection.breadcrumbs
-                                        .slice(1)
-                                        .map(b => b.name)
-                                        .join(' / ')}
-                                </span>
-                            )}
-                        </div>
-                    </div>
-                </button>
-            </div>
-            {hasChildren && isExpanded && (
-                <div>
-                    {childCollections.map((childCollection: Collection) => (
-                        <CollectionTreeNode
-                            key={childCollection.id}
-                            collection={childCollection}
-                            depth={depth + 1}
-                            expanded={expanded}
-                            onToggleExpanded={onToggleExpanded}
-                            onSelect={onSelect}
-                            selectedCollectionId={selectedCollectionId}
-                            collectionsToMove={collectionsToMove}
-                            childCollectionsByParentId={childCollectionsByParentId}
-                        />
-                    ))}
-                </div>
-            )}
-        </div>
-    );
-}
-
-export function MoveCollectionsDialog({
-    open,
-    onOpenChange,
-    collectionsToMove,
-    onSuccess,
-}: Readonly<MoveCollectionsDialogProps>) {
-    const [expanded, setExpanded] = useState<Record<string, boolean>>({});
-    const [selectedCollectionId, setSelectedCollectionId] = useState<string>();
-    const [searchTerm, setSearchTerm] = useState('');
-    const debouncedSearchTerm = useDebounce(searchTerm, 300);
-    const collectionNameCache = useRef<Map<string, string>>(new Map());
-    const queryClient = useQueryClient();
-    const { i18n } = useLingui();
-    const collectionForMoveKey = ['collectionsForMove', debouncedSearchTerm];
-    const childCollectionsForMoveKey = (collectionId?: string) =>
-        collectionId ? ['childCollectionsForMove', collectionId] : ['childCollectionsForMove'];
-
-    const { data: collectionsData, isLoading } = useQuery({
-        queryKey: collectionForMoveKey,
-        queryFn: () =>
-            api.query(collectionListForMoveDocument, {
-                options: {
-                    take: 100,
-                    topLevelOnly: !debouncedSearchTerm,
-                    ...(debouncedSearchTerm && {
-                        filter: {
-                            name: { contains: debouncedSearchTerm },
-                        },
-                    }),
-                },
-            }),
-        staleTime: 1000 * 60 * 5,
-        enabled: open,
-    });
-
-    const topLevelCollectionId = collectionsData?.collections.items[0]?.parentId;
-    const selectionHasTopLevelParent = collectionsToMove.some(c => c.parentId === topLevelCollectionId);
-
-    // Load child collections for expanded nodes
-    const childrenQueries = useQueries({
-        queries: Object.entries(expanded).map(([collectionId, isExpanded]) => {
-            return {
-                queryKey: childCollectionsForMoveKey(collectionId),
-                queryFn: () =>
-                    api.query(collectionListForMoveDocument, {
-                        options: {
-                            filter: {
-                                parentId: { eq: collectionId },
-                            },
-                        },
-                    }),
-                staleTime: 1000 * 60 * 5,
-            };
-        }),
-    });
-
-    const childCollectionsByParentId = childrenQueries.reduce(
-        (acc, query, index) => {
-            const collectionId = Object.keys(expanded)[index];
-            if (query.data) {
-                const collections = query.data.collections.items as Collection[];
-                // Populate the name cache with these collections
-                collections.forEach(collection => {
-                    collectionNameCache.current.set(collection.id, collection.name);
-                });
-                acc[collectionId] = collections;
-            }
-            return acc;
-        },
-        {} as Record<string, Collection[]>,
-    );
-
-    const moveCollectionsMutation = useMutation({
-        mutationFn: api.mutate(moveCollectionDocument),
-        onSuccess: () => {
-            toast.success(i18n.t('Collections moved successfully'));
-            queryClient.invalidateQueries({ queryKey: collectionForMoveKey });
-            queryClient.invalidateQueries({ queryKey: childCollectionsForMoveKey() });
-            onSuccess?.();
-            onOpenChange(false);
-        },
-        onError: error => {
-            toast.error(i18n.t('Failed to move collections'));
-            console.error('Move collections error:', error);
-        },
-    });
-
-    const handleToggleExpanded = (id: string) => {
-        setExpanded(prev => ({
-            ...prev,
-            [id]: !prev[id],
-        }));
-    };
-
-    const handleSelect = (collection: Collection) => {
-        setSelectedCollectionId(collection.id);
-    };
-
-    const handleMove = () => {
-        if (!selectedCollectionId) {
-            toast.error(i18n.t('Please select a target collection'));
-            return;
-        }
-        // Move to a specific parent using moveCollection
-        const movePromises = collectionsToMove.map((collection: Collection) =>
-            moveCollectionsMutation.mutateAsync({
-                input: {
-                    collectionId: collection.id,
-                    parentId: selectedCollectionId,
-                    index: 0, // Move to the beginning of the target collection
-                },
-            }),
-        );
-        Promise.all(movePromises);
-    };
-
-    const collections = (collectionsData?.collections.items as Collection[]) || [];
-
-    // Populate the name cache with top-level collections
-    collections.forEach(collection => {
-        collectionNameCache.current.set(collection.id, collection.name);
-    });
-
-    return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-[600px] max-h-[80vh]">
-                <DialogHeader>
-                    <DialogTitle>
-                        <Trans>Move Collections</Trans>
-                    </DialogTitle>
-                    <DialogDescription>
-                        <Trans>
-                            Select a target collection to move{' '}
-                            {collectionsToMove.length === 1
-                                ? 'this collection'
-                                : `${collectionsToMove.length} collections`}{' '}
-                            to.
-                        </Trans>
-                    </DialogDescription>
-                </DialogHeader>
-                <div className="px-6 py-3 bg-muted/50 border-b">
-                    <div className="flex flex-wrap gap-2">
-                        {collectionsToMove.map(collection => (
-                            <div
-                                key={collection.id}
-                                className="flex items-center gap-2 px-3 py-1 bg-background border rounded-md text-sm"
-                            >
-                                <Folder className="h-3 w-3 text-muted-foreground" />
-                                <span>{collection.name}</span>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-                <div className="py-4">
-                    <div className="px-6 pb-3">
-                        <div className="relative mb-3">
-                            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                            <Input
-                                placeholder={i18n.t('Filter by collection name')}
-                                value={searchTerm}
-                                onChange={e => setSearchTerm(e.target.value)}
-                                className="pl-10"
-                            />
-                        </div>
-                        <ScrollArea className="h-[400px]">
-                            <div className="space-y-1">
-                                {isLoading ? (
-                                    <div className="flex items-center justify-center py-8">
-                                        <Trans>Loading collections...</Trans>
-                                    </div>
-                                ) : (
-                                    <>
-                                        {!debouncedSearchTerm && !selectionHasTopLevelParent && (
-                                            <MoveToTopLevel
-                                                selectedCollectionId={selectedCollectionId}
-                                                topLevelCollectionId={topLevelCollectionId}
-                                                onSelect={setSelectedCollectionId}
-                                            />
-                                        )}
-                                        {collections.map((collection: Collection) => (
-                                            <CollectionTreeNode
-                                                key={collection.id}
-                                                collection={collection}
-                                                depth={0}
-                                                expanded={expanded}
-                                                onToggleExpanded={handleToggleExpanded}
-                                                onSelect={handleSelect}
-                                                selectedCollectionId={selectedCollectionId}
-                                                collectionsToMove={collectionsToMove}
-                                                childCollectionsByParentId={childCollectionsByParentId}
-                                            />
-                                        ))}
-                                    </>
-                                )}
-                            </div>
-                        </ScrollArea>
-                        <TargetAlert
-                            selectedCollectionId={selectedCollectionId}
-                            collectionsToMove={collectionsToMove}
-                            topLevelCollectionId={topLevelCollectionId}
-                            collectionNameCache={collectionNameCache}
-                        />
-                    </div>
-                </div>
-                <DialogFooter>
-                    <Button variant="outline" onClick={() => onOpenChange(false)}>
-                        <Trans>Cancel</Trans>
-                    </Button>
-                    <Button
-                        onClick={handleMove}
-                        disabled={!selectedCollectionId || moveCollectionsMutation.isPending}
-                    >
-                        {moveCollectionsMutation.isPending ? (
-                            <Trans>Moving...</Trans>
-                        ) : (
-                            <Trans>Move Collections</Trans>
-                        )}
-                    </Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    );
-}

package/src/app/routes/_authenticated/_collections/components/move-single-collection.tsx

@@ -1,33 +0,0 @@
-import { ResultOf } from 'gql.tada';
-import { useState } from 'react';
-
-import { collectionListDocument } from '../collections.graphql.js';
-import { MoveCollectionsDialog } from './move-collections-dialog.js';
-
-type Collection = ResultOf<typeof collectionListDocument>['collections']['items'][number];
-
-export function useMoveSingleCollection() {
-    const [moveDialogOpen, setMoveDialogOpen] = useState(false);
-    const [collectionsToMove, setCollectionsToMove] = useState<Collection[]>([]);
-
-    const handleMoveClick = (collection: Collection) => {
-        setCollectionsToMove([collection]);
-        setMoveDialogOpen(true);
-    };
-
-    const MoveDialog = () => (
-        <MoveCollectionsDialog
-            open={moveDialogOpen}
-            onOpenChange={setMoveDialogOpen}
-            collectionsToMove={collectionsToMove}
-            onSuccess={() => {
-                // The dialog will handle invalidating queries internally
-            }}
-        />
-    );
-
-    return {
-        handleMoveClick,
-        MoveDialog,
-    };
-}

package/src/app/routes/_authenticated/_countries/components/country-bulk-actions.tsx

@@ -1,15 +0,0 @@
-import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
-import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
-import { deleteCountriesDocument } from '../countries.graphql.js';
-
-export const DeleteCountriesBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    return (
-        <DeleteBulkAction
-            mutationDocument={deleteCountriesDocument}
-            entityName="countries"
-            requiredPermissions={['DeleteCountry']}
-            selection={selection}
-            table={table}
-        />
-    );
-};

package/src/app/routes/_authenticated/_customer-groups/components/customer-group-bulk-actions.tsx

@@ -1,15 +0,0 @@
-import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
-import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
-import { deleteCustomerGroupsDocument } from '../customer-groups.graphql.js';
-
-export const DeleteCustomerGroupsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    return (
-        <DeleteBulkAction
-            mutationDocument={deleteCustomerGroupsDocument}
-            entityName="customer groups"
-            requiredPermissions={['DeleteCustomerGroup']}
-            selection={selection}
-            table={table}
-        />
-    );
-};

package/src/app/routes/_authenticated/_customers/components/customer-bulk-actions.tsx

@@ -1,15 +0,0 @@
-import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
-import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
-import { deleteCustomersDocument } from '../customers.graphql.js';
-
-export const DeleteCustomersBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    return (
-        <DeleteBulkAction
-            mutationDocument={deleteCustomersDocument}
-            entityName="customers"
-            requiredPermissions={['DeleteCustomer']}
-            selection={selection}
-            table={table}
-        />
-    );
-};

package/src/app/routes/_authenticated/_facets/components/facet-bulk-actions.tsx

@@ -1,104 +0,0 @@
-import { toast } from 'sonner';
-
-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 { ResultOf } from '@/vdb/graphql/graphql.js';
-import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
-import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { useLingui } from '@/vdb/lib/trans.js';
-import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
-import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
-
-import {
-    assignFacetsToChannelDocument,
-    deleteFacetsDocument,
-    removeFacetsFromChannelDocument,
-} from '../facets.graphql.js';
-
-export const DeleteFacetsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    return (
-        <DeleteBulkAction
-            mutationDocument={deleteFacetsDocument}
-            entityName="facets"
-            requiredPermissions={['DeleteCatalog', 'DeleteFacet']}
-            selection={selection}
-            table={table}
-        />
-    );
-};
-
-export const AssignFacetsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    return (
-        <AssignToChannelBulkAction
-            selection={selection}
-            table={table}
-            entityType="facets"
-            mutationFn={api.mutate(assignFacetsToChannelDocument)}
-            requiredPermissions={['UpdateCatalog', 'UpdateFacet']}
-            buildInput={(channelId: string) => ({
-                facetIds: selection.map(s => s.id),
-                channelId,
-            })}
-        />
-    );
-};
-
-export const RemoveFacetsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    const { selectedChannel } = useChannel();
-    const { i18n } = useLingui();
-
-    return (
-        <RemoveFromChannelBulkAction
-            selection={selection}
-            table={table}
-            entityType="facets"
-            mutationFn={api.mutate(removeFacetsFromChannelDocument)}
-            requiredPermissions={['UpdateCatalog', 'UpdateFacet']}
-            buildInput={() => ({
-                facetIds: selection.map(s => s.id),
-                channelId: selectedChannel?.id,
-            })}
-            onSuccess={result => {
-                const typedResult = result as ResultOf<typeof removeFacetsFromChannelDocument>;
-                if (typedResult?.removeFacetsFromChannel) {
-                    const errors: string[] = [];
-
-                    for (const item of typedResult.removeFacetsFromChannel) {
-                        if ('id' in item) {
-                            // Do nothing
-                        } else if ('message' in item) {
-                            errors.push(item.message);
-                            toast.error(i18n.t(`Failed to remove facet from channel: ${item.message}`));
-                        }
-                    }
-
-                    const successCount = selection.length - errors.length;
-
-                    if (successCount > 0) {
-                        toast.success(i18n.t(`Successfully removed ${successCount} facets from channel`));
-                    }
-                }
-            }}
-        />
-    );
-};
-
-export const DuplicateFacetsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    return (
-        <DuplicateBulkAction
-            entityType="Facet"
-            duplicatorCode="facet-duplicator"
-            duplicatorArguments={[
-                {
-                    name: 'includeValues',
-                    value: 'true',
-                },
-            ]}
-            requiredPermissions={['UpdateCatalog', 'UpdateFacet']}
-            entityName="Facet"
-            selection={selection}
-            table={table}
-        />
-    );
-};