@vendure/dashboard 3.4.3-master-202509180227 → 3.4.3-master-202509200226

package/dist/vite/vite-plugin-config.js

@@ -47,6 +47,7 @@ export function viteConfigPlugin({ packageRoot }) {
                     ...(((_e = config.optimizeDeps) === null || _e === void 0 ? void 0 : _e.include) || []),
                     '@/components > recharts',
                     '@/components > react-dropzone',
+                    '@/components > @tiptap/react', // https://github.com/fawmi/vue-google-maps/issues/148#issuecomment-1235143844
                     '@vendure/common/lib/generated-types',
                 ] });
             return config;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.4.3-master-202509180227",
+    "version": "3.4.3-master-202509200226",
     "type": "module",
     "repository": {
         "type": "git",
@@ -94,14 +94,18 @@
         "@tanstack/react-table": "^8.21.2",
         "@tanstack/router-devtools": "^1.105.0",
         "@tanstack/router-plugin": "^1.105.0",
-        "@tiptap/pm": "^2.11.5",
-        "@tiptap/react": "^2.11.5",
-        "@tiptap/starter-kit": "^2.11.5",
+        "@tiptap/extension-floating-menu": "^3.4.4",
+        "@tiptap/extension-image": "^3.4.4",
+        "@tiptap/extension-table": "^3.4.4",
+        "@tiptap/extension-text-style": "^3.4.4",
+        "@tiptap/pm": "^3.4.4",
+        "@tiptap/react": "^3.4.4",
+        "@tiptap/starter-kit": "^3.4.4",
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
         "@uidotdev/usehooks": "^2.4.1",
-        "@vendure/common": "^3.4.3-master-202509180227",
-        "@vendure/core": "^3.4.3-master-202509180227",
+        "@vendure/common": "^3.4.3-master-202509200226",
+        "@vendure/core": "^3.4.3-master-202509200226",
         "@vitejs/plugin-react": "^4.3.4",
         "acorn": "^8.11.3",
         "acorn-walk": "^8.3.2",
@@ -152,5 +156,5 @@
         "lightningcss-linux-arm64-musl": "^1.29.3",
         "lightningcss-linux-x64-musl": "^1.29.1"
     },
-    "gitHead": "abb4130cebdea8f79dcfb0823d806293bb0d2a1b"
+    "gitHead": "e2f1befe89f08f48faf285a6a929ca2a4042c903"
 }

package/src/app/common/duplicate-bulk-action.tsx

@@ -1,4 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
+import { ConfigurableOperationInput } from '@vendure/common/lib/generated-types';
 import { CopyIcon } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
@@ -8,13 +9,13 @@ import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-ta
 import { api } from '@/vdb/graphql/api.js';
 import { duplicateEntityDocument } from '@/vdb/graphql/common-operations.js';
 import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { DuplicateEntityDialog } from './duplicate-entity-dialog.js';
 
 interface DuplicateBulkActionProps {
     entityType: 'Product' | 'Collection' | 'Facet' | 'Promotion';
     duplicatorCode: string;
-    duplicatorArguments?: Array<{ name: string; value: string }>;
     requiredPermissions: string[];
-    entityName: string; // For display purposes in error messages
+    entityName: string;
     onSuccess?: () => void;
     selection: any[];
     table: any;
@@ -23,23 +24,28 @@ interface DuplicateBulkActionProps {
 export function DuplicateBulkAction({
     entityType,
     duplicatorCode,
-    duplicatorArguments = [],
     requiredPermissions,
     entityName,
     onSuccess,
     selection,
     table,
-}: DuplicateBulkActionProps) {
+}: Readonly<DuplicateBulkActionProps>) {
     const { refetchPaginatedList } = usePaginatedList();
     const { i18n } = useLingui();
     const [isDuplicating, setIsDuplicating] = useState(false);
     const [progress, setProgress] = useState({ completed: 0, total: 0 });
+    const [dialogOpen, setDialogOpen] = useState(false);
 
     const { mutateAsync } = useMutation({
         mutationFn: api.mutate(duplicateEntityDocument),
     });
 
-    const handleDuplicate = async () => {
+    const handleStartDuplication = () => {
+        if (isDuplicating) return;
+        setDialogOpen(true);
+    };
+
+    const handleConfirmDuplication = async (duplicatorInput: ConfigurableOperationInput) => {
         if (isDuplicating) return;
 
         setIsDuplicating(true);
@@ -61,10 +67,7 @@ export function DuplicateBulkAction({
                         input: {
                             entityName: entityType,
                             entityId: entity.id,
-                            duplicatorInput: {
-                                code: duplicatorCode,
-                                arguments: duplicatorArguments,
-                            },
+                            duplicatorInput,
                         },
                     });
 
@@ -116,19 +119,30 @@ export function DuplicateBulkAction({
     };
 
     return (
-        <DataTableBulkActionItem
-            requiresPermission={requiredPermissions}
-            onClick={handleDuplicate}
-            label={
-                isDuplicating ? (
-                    <Trans>
-                        Duplicating... ({progress.completed}/{progress.total})
-                    </Trans>
-                ) : (
-                    <Trans>Duplicate</Trans>
-                )
-            }
-            icon={CopyIcon}
-        />
+        <>
+            <DataTableBulkActionItem
+                requiresPermission={requiredPermissions}
+                onClick={handleStartDuplication}
+                label={
+                    isDuplicating ? (
+                        <Trans>
+                            Duplicating... ({progress.completed}/{progress.total})
+                        </Trans>
+                    ) : (
+                        <Trans>Duplicate</Trans>
+                    )
+                }
+                icon={CopyIcon}
+            />
+            <DuplicateEntityDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                entityType={entityType}
+                entityName={entityName}
+                entities={selection}
+                duplicatorCode={duplicatorCode}
+                onConfirm={handleConfirmDuplication}
+            />
+        </>
     );
 }

package/src/app/common/duplicate-entity-dialog.tsx

@@ -0,0 +1,117 @@
+import { ConfigurableOperationInput as ConfigurableOperationInputComponent } from '@/vdb/components/shared/configurable-operation-input.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { api } from '@/vdb/graphql/api.js';
+import { getEntityDuplicatorsDocument } from '@/vdb/graphql/common-operations.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { ConfigurableOperationInput } from '@vendure/common/lib/generated-types';
+import React, { useState } from 'react';
+
+interface DuplicateEntityDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    entityType: 'Product' | 'Collection' | 'Facet' | 'Promotion';
+    entityName: string;
+    entities: Array<{ id: string; name?: string }>;
+    duplicatorCode: string;
+    onConfirm: (duplicatorInput: ConfigurableOperationInput) => void;
+}
+
+export function DuplicateEntityDialog({
+    open,
+    onOpenChange,
+    entityType,
+    entityName,
+    duplicatorCode,
+    onConfirm,
+}: Readonly<DuplicateEntityDialogProps>) {
+    const [selectedDuplicator, setSelectedDuplicator] = useState<ConfigurableOperationInput | undefined>();
+
+    const { data } = useQuery({
+        queryKey: ['entityDuplicators'],
+        queryFn: () => api.query(getEntityDuplicatorsDocument),
+        staleTime: 1000 * 60 * 60 * 5,
+    });
+
+    // Find the duplicator that matches the provided code and supports this entity type
+    const matchingDuplicator = data?.entityDuplicators?.find(
+        duplicator => duplicator.code === duplicatorCode && duplicator.forEntities.includes(entityType),
+    );
+
+    // Auto-initialize the duplicator when found
+    React.useEffect(() => {
+        if (matchingDuplicator && !selectedDuplicator) {
+            setSelectedDuplicator({
+                code: matchingDuplicator.code,
+                arguments:
+                    matchingDuplicator.args?.map(arg => ({
+                        name: arg.name,
+                        value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
+                    })) || [],
+            });
+        }
+    }, [matchingDuplicator, selectedDuplicator]);
+
+    const onDuplicatorValueChange = (newVal: ConfigurableOperationInput) => {
+        setSelectedDuplicator(newVal);
+    };
+
+    const handleConfirm = () => {
+        if (!selectedDuplicator) return;
+        onConfirm(selectedDuplicator);
+        onOpenChange(false);
+        setSelectedDuplicator(undefined);
+    };
+
+    const handleCancel = () => {
+        onOpenChange(false);
+        setSelectedDuplicator(undefined);
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-lg">
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Duplicate {entityName.toLowerCase()}s</Trans>
+                    </DialogTitle>
+                </DialogHeader>
+
+                <div className="space-y-4">
+                    {selectedDuplicator && matchingDuplicator && (
+                        <ConfigurableOperationInputComponent
+                            operationDefinition={matchingDuplicator}
+                            value={selectedDuplicator}
+                            onChange={onDuplicatorValueChange}
+                            removable={false}
+                        />
+                    )}
+
+                    {!matchingDuplicator && (
+                        <div className="text-sm text-muted-foreground">
+                            <Trans>
+                                No duplicator found with code "{duplicatorCode}" for {entityName}s
+                            </Trans>
+                        </div>
+                    )}
+                </div>
+
+                <DialogFooter>
+                    <Button variant="outline" onClick={handleCancel}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button onClick={handleConfirm} disabled={!selectedDuplicator}>
+                        <Trans>Duplicate</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/app/routes/_authenticated/_administrators/administrators.tsx

@@ -8,7 +8,7 @@ import { ListPage } from '@/vdb/framework/page/list-page.js';
 import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
-import { administratorListDocument, deleteAdministratorDocument } from './administrators.graphql.js';
+import { administratorListDocument } from './administrators.graphql.js';
 import { DeleteAdministratorsBulkAction } from './components/administrator-bulk-actions.js';
 
 export const Route = createFileRoute('/_authenticated/_administrators/administrators')({
@@ -22,7 +22,6 @@ function AdministratorListPage() {
             pageId="administrator-list"
             title="Administrators"
             listQuery={administratorListDocument}
-            deleteMutation={deleteAdministratorDocument}
             route={Route}
             onSearchTermChange={searchTerm => {
                 return {

package/src/app/routes/_authenticated/_assets/assets.graphql.ts

@@ -35,3 +35,42 @@ export const deleteAssetsDocument = graphql(`
         }
     }
 `);
+
+export const tagListDocument = graphql(`
+    query TagList($options: TagListOptions) {
+        tags(options: $options) {
+            items {
+                id
+                value
+            }
+            totalItems
+        }
+    }
+`);
+
+export const createTagDocument = graphql(`
+    mutation CreateTag($input: CreateTagInput!) {
+        createTag(input: $input) {
+            id
+            value
+        }
+    }
+`);
+
+export const updateTagDocument = graphql(`
+    mutation UpdateTag($input: UpdateTagInput!) {
+        updateTag(input: $input) {
+            id
+            value
+        }
+    }
+`);
+
+export const deleteTagDocument = graphql(`
+    mutation DeleteTag($id: ID!) {
+        deleteTag(id: $id) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_assets/assets_.$id.tsx

@@ -2,7 +2,6 @@ import { AssetFocalPointEditor } from '@/vdb/components/shared/asset/asset-focal
 import { AssetPreviewSelector } from '@/vdb/components/shared/asset/asset-preview-selector.js';
 import { PreviewPreset } from '@/vdb/components/shared/asset/asset-preview.js';
 import { AssetProperties } from '@/vdb/components/shared/asset/asset-properties.js';
-import { Point } from '@/vdb/components/shared/asset/focal-point-control.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
@@ -25,6 +24,7 @@ import { FocusIcon } from 'lucide-react';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { assetDetailDocument, assetUpdateDocument } from './assets.graphql.js';
+import { AssetTagsEditor } from './components/asset-tags-editor.js';
 
 const pageId = 'asset-detail';
 
@@ -51,9 +51,8 @@ function AssetDetailPage() {
     const [size, setSize] = useState<PreviewPreset>('medium');
     const [width, setWidth] = useState(0);
     const [height, setHeight] = useState(0);
-    const [focalPoint, setFocalPoint] = useState<Point | undefined>(undefined);
     const [settingFocalPoint, setSettingFocalPoint] = useState(false);
-    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+    const { form, submitHandler, entity, isPending, refreshEntity } = useDetailPage({
         pageId,
         queryDocument: assetDetailDocument,
         updateDocument: assetUpdateDocument,
@@ -106,12 +105,12 @@ function AssetDetailPage() {
             </PageActionBar>
             <PageLayout>
                 <PageBlock column="main" blockId="asset-preview">
-                    <div className="relative flex items-center justify-center bg-muted/30 rounded-lg min-h-[300px] overflow-auto">
+                    <div className="relative flex items-center justify-center bg-muted/30 rounded-lg min-h-[300px] overflow-auto resize-y">
                         <AssetFocalPointEditor
                             width={width}
                             height={height}
                             settingFocalPoint={settingFocalPoint}
-                            focalPoint={form.getValues().focalPoint ?? { x: 0.5, y: 0.5 }}
+                            focalPoint={entity.focalPoint ?? { x: 0.5, y: 0.5 }}
                             onFocalPointChange={point => {
                                 form.setValue('focalPoint.x', point.x, { shouldDirty: true });
                                 form.setValue('focalPoint.y', point.y, { shouldDirty: true });
@@ -125,10 +124,9 @@ function AssetDetailPage() {
                                 ref={imageRef}
                                 asset={entity}
                                 preset={size || undefined}
-                                mode="resize"
                                 useFocalPoint={true}
                                 onLoad={updateDimensions}
-                                className="max-w-full max-h-full object-contain"
+                                className="max-w-full object-contain"
                             />
                         </AssetFocalPointEditor>
                     </div>
@@ -164,6 +162,19 @@ function AssetDetailPage() {
                         </div>
                     </div>
                 </PageBlock>
+                <PageBlock column="side" blockId="asset-tags">
+                    <AssetTagsEditor
+                        selectedTags={form.watch('tags') || []}
+                        onTagsChange={tags => {
+                            form.setValue('tags', tags, { shouldDirty: true });
+                        }}
+                        onTagsUpdated={() => {
+                            // Refresh the asset entity to get updated tag values
+                            refreshEntity();
+                        }}
+                        disabled={isPending}
+                    />
+                </PageBlock>
             </PageLayout>
         </Page>
     );

package/src/app/routes/_authenticated/_assets/components/asset-tag-filter.tsx

@@ -0,0 +1,206 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
+import { Check, Filter, Loader2, X } from 'lucide-react';
+import { useState } from 'react';
+import { tagListDocument } from '../assets.graphql.js';
+
+interface AssetTagFilterProps {
+    selectedTags: string[];
+    onTagsChange: (tags: string[]) => void;
+}
+
+export function AssetTagFilter({ selectedTags, onTagsChange }: Readonly<AssetTagFilterProps>) {
+    const [open, setOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+
+    const debouncedSearch = useDebounce(searchValue, 300);
+    const pageSize = 25;
+
+    // Fetch available tags with infinite query
+    const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
+        queryKey: ['tags', debouncedSearch],
+        queryFn: async ({ pageParam = 0 }) => {
+            const options: any = {
+                skip: pageParam * pageSize,
+                take: pageSize,
+                sort: { value: 'ASC' },
+            };
+
+            if (debouncedSearch.trim()) {
+                options.filter = {
+                    value: { contains: debouncedSearch.trim() },
+                };
+            }
+
+            const response = await api.query(tagListDocument, { options });
+            return response.tags;
+        },
+        getNextPageParam: (lastPage, allPages) => {
+            if (!lastPage) return undefined;
+            const totalFetched = allPages.length * pageSize;
+            return totalFetched < lastPage.totalItems ? allPages.length : undefined;
+        },
+        initialPageParam: 0,
+        staleTime: 1000 * 60 * 5,
+    });
+
+    const availableTags = data?.pages.flatMap(page => page?.items ?? []) ?? [];
+    const totalTags = data?.pages[0]?.totalItems ?? 0;
+
+    // Tags are already filtered server-side, so use them directly
+    const filteredTags = availableTags;
+
+    const handleSelectTag = (tagValue: string) => {
+        if (!selectedTags.includes(tagValue)) {
+            onTagsChange([...selectedTags, tagValue]);
+        }
+        setSearchValue('');
+    };
+
+    const handleRemoveTag = (tagToRemove: string) => {
+        onTagsChange(selectedTags.filter(tag => tag !== tagToRemove));
+    };
+
+    const handleClearAll = () => {
+        onTagsChange([]);
+        setOpen(false);
+    };
+
+    const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+        const target = e.currentTarget;
+        const scrolledToBottom = Math.abs(target.scrollHeight - target.clientHeight - target.scrollTop) < 1;
+
+        if (scrolledToBottom && hasNextPage && !isFetchingNextPage) {
+            fetchNextPage();
+        }
+    };
+
+    return (
+        <div className="flex items-center gap-2">
+            <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger asChild>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        role="combobox"
+                        aria-expanded={open}
+                        className="justify-start"
+                    >
+                        <Filter className="h-4 w-4 mr-2" />
+                        <Trans>Filter by tags</Trans>
+                        {selectedTags.length > 0 && (
+                            <Badge variant="secondary" className="ml-2">
+                                {selectedTags.length}
+                            </Badge>
+                        )}
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-80 p-0" align="start">
+                    <Command shouldFilter={false}>
+                        <CommandInput
+                            placeholder="Search tags..."
+                            value={searchValue}
+                            onValueChange={setSearchValue}
+                        />
+                        <CommandList className="max-h-[300px] overflow-y-auto" onScroll={handleScroll}>
+                            <CommandEmpty>
+                                {isLoading ? (
+                                    <div className="flex items-center justify-center py-6">
+                                        <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                                        <Trans>Loading...</Trans>
+                                    </div>
+                                ) : (
+                                    <div className="p-2 text-sm">
+                                        <Trans>No tags found</Trans>
+                                    </div>
+                                )}
+                            </CommandEmpty>
+                            <CommandGroup>
+                                {filteredTags.map(tag => {
+                                    const isSelected = selectedTags.includes(tag.value);
+                                    return (
+                                        <CommandItem
+                                            key={tag.id}
+                                            onSelect={() => {
+                                                if (isSelected) {
+                                                    handleRemoveTag(tag.value);
+                                                } else {
+                                                    handleSelectTag(tag.value);
+                                                }
+                                            }}
+                                        >
+                                            <Check
+                                                className={cn(
+                                                    'mr-2 h-4 w-4',
+                                                    isSelected ? 'opacity-100' : 'opacity-0',
+                                                )}
+                                            />
+                                            {tag.value}
+                                        </CommandItem>
+                                    );
+                                })}
+
+                                {(isFetchingNextPage || isLoading) && (
+                                    <div className="flex items-center justify-center py-2">
+                                        <Loader2 className="h-4 w-4 animate-spin" />
+                                    </div>
+                                )}
+
+                                {!hasNextPage &&
+                                    filteredTags.length > 0 &&
+                                    totalTags > filteredTags.length && (
+                                        <div className="text-center py-2 text-xs text-muted-foreground">
+                                            <Trans>Showing all {filteredTags.length} results</Trans>
+                                        </div>
+                                    )}
+                            </CommandGroup>
+                        </CommandList>
+                        {selectedTags.length > 0 && (
+                            <div className="border-t p-2">
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="w-full justify-start"
+                                    onClick={handleClearAll}
+                                >
+                                    <Trans>Clear all</Trans>
+                                </Button>
+                            </div>
+                        )}
+                    </Command>
+                </PopoverContent>
+            </Popover>
+
+            {/* Display selected tags */}
+            {selectedTags.length > 0 && (
+                <div className="flex flex-wrap gap-1">
+                    {selectedTags.map(tag => (
+                        <Badge key={tag} variant="secondary" className="text-xs">
+                            {tag}
+                            <button
+                                onClick={() => handleRemoveTag(tag)}
+                                className="ml-1 hover:bg-destructive/20 rounded-full p-0.5 transition-colors"
+                            >
+                                <X className="h-3 w-3" />
+                            </button>
+                        </Badge>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}