@vendure/dashboard 3.4.3-master-202509120226 → 3.4.3-master-202509190229

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.4.3-master-202509120226",
+    "version": "3.4.3-master-202509190229",
     "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-202509120226",
-        "@vendure/core": "^3.4.3-master-202509120226",
+        "@vendure/common": "^3.4.3-master-202509190229",
+        "@vendure/core": "^3.4.3-master-202509190229",
         "@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": "690fb9e8ac0aa88be3555bb57a54386debc95bfe"
+    "gitHead": "1a94626a2e07d33d881a751ff394f8351c3521b4"
 }

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/_collections/collections.graphql.ts

@@ -27,6 +27,7 @@ export const collectionListDocument = graphql(
                     }
                     children {
                         id
+                        name
                     }
                     position
                     isPrivate

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

@@ -13,6 +13,7 @@ import { ResultOf } from 'gql.tada';
 import { Folder, FolderOpen, FolderTreeIcon, PlusIcon } from 'lucide-react';
 import { useState } from 'react';
 
+import { Badge } from '@/vdb/components/ui/badge.js';
 import { collectionListDocument, deleteCollectionDocument } from './collections.graphql.js';
 import {
     AssignCollectionsToChannelBulkAction,
@@ -150,6 +151,26 @@ function CollectionListPage() {
                             );
                         },
                     },
+                    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>
+                            );
+                        },
+                    },
                 }}
                 defaultColumnOrder={[
                     'featuredAsset',

package/src/app/routes/_authenticated/_product-variants/product-variants.graphql.ts

@@ -14,6 +14,7 @@ export const productVariantListDocument = graphql(
                     }
                     name
                     sku
+                    enabled
                     currencyCode
                     price
                     priceWithTax

package/src/app/routes/_authenticated/_products/components/product-variants-table.tsx

@@ -9,6 +9,12 @@ import { graphql } from '@/vdb/graphql/graphql.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
 import { useState } from 'react';
+import {
+    AssignFacetValuesToProductVariantsBulkAction,
+    AssignProductVariantsToChannelBulkAction,
+    DeleteProductVariantsBulkAction,
+    RemoveProductVariantsFromChannelBulkAction,
+} from '../../_product-variants/components/product-variant-bulk-actions.js';
 import { productVariantListDocument } from '../products.graphql.js';
 
 export const deleteProductVariantDocument = graphql(`
@@ -47,9 +53,31 @@ export function ProductVariantsTable({
                 productId,
             })}
             defaultVisibility={{
-                id: false,
-                currencyCode: false,
+                featuredAsset: true,
+                name: true,
+                enabled: true,
+                price: true,
+                priceWithTax: true,
+                stockLevels: true,
             }}
+            bulkActions={[
+                {
+                    component: AssignProductVariantsToChannelBulkAction,
+                    order: 100,
+                },
+                {
+                    component: RemoveProductVariantsFromChannelBulkAction,
+                    order: 200,
+                },
+                {
+                    component: AssignFacetValuesToProductVariantsBulkAction,
+                    order: 300,
+                },
+                {
+                    component: DeleteProductVariantsBulkAction,
+                    order: 400,
+                },
+            ]}
             customizeColumns={{
                 name: {
                     header: 'Variant name',

package/src/app/routes/_authenticated/_products/products.graphql.ts

@@ -61,25 +61,34 @@ export const productDetailFragment = graphql(
     [assetFragment],
 );
 
-export const productVariantListDocument = graphql(`
-    query ProductVariantList($options: ProductVariantListOptions, $productId: ID) {
-        productVariants(options: $options, productId: $productId) {
-            items {
-                id
-                name
-                sku
-                currencyCode
-                price
-                priceWithTax
-                stockLevels {
-                    stockOnHand
-                    stockAllocated
+export const productVariantListDocument = graphql(
+    `
+        query ProductVariantList($options: ProductVariantListOptions, $productId: ID) {
+            productVariants(options: $options, productId: $productId) {
+                items {
+                    id
+                    createdAt
+                    updatedAt
+                    featuredAsset {
+                        ...Asset
+                    }
+                    name
+                    sku
+                    enabled
+                    currencyCode
+                    price
+                    priceWithTax
+                    stockLevels {
+                        stockOnHand
+                        stockAllocated
+                    }
                 }
+                totalItems
             }
-            totalItems
         }
-    }
-`);
+    `,
+    [assetFragment],
+);
 
 export const productDetailDocument = graphql(
     `

package/src/lib/components/data-input/rich-text-input.tsx

@@ -1,26 +1,6 @@
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
-import TextStyle from '@tiptap/extension-text-style';
-import { BubbleMenu, Editor, EditorContent, useEditor } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-import { BoldIcon, ItalicIcon, StrikethroughIcon } from 'lucide-react';
-import { useLayoutEffect, useRef } from 'react';
-import { Button } from '../ui/button.js';
-
-// define your extension array
-const extensions = [
-    TextStyle.configure(),
-    StarterKit.configure({
-        bulletList: {
-            keepMarks: true,
-            keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
-        },
-        orderedList: {
-            keepMarks: true,
-            keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
-        },
-    }),
-];
+import { RichTextEditor } from '../shared/rich-text-editor/rich-text-editor.js';
 
 /**
  * @description
@@ -31,99 +11,6 @@ const extensions = [
  */
 export function RichTextInput({ value, onChange, fieldDef }: Readonly<DashboardFormComponentProps>) {
     const readOnly = isReadonlyField(fieldDef);
-    const isInternalUpdate = useRef(false);
-
-    const editor = useEditor({
-        parseOptions: {
-            preserveWhitespace: 'full',
-        },
-        extensions: extensions,
-        content: value,
-        editable: !readOnly,
-        onUpdate: ({ editor }) => {
-            if (!readOnly) {
-                isInternalUpdate.current = true;
-                console.log('onUpdate');
-                const newValue = editor.getHTML();
-                if (value !== newValue) {
-                    onChange(newValue);
-                }
-            }
-        },
-        editorProps: {
-            attributes: {
-                class: `border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/10 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm max-h-[500px] overflow-y-auto ${readOnly ? 'cursor-not-allowed opacity-50' : ''}`,
-            },
-        },
-    });
-
-    useLayoutEffect(() => {
-        if (editor && !isInternalUpdate.current) {
-            const currentContent = editor.getHTML();
-            if (currentContent !== value) {
-                const { from, to } = editor.state.selection;
-                editor.commands.setContent(value, false);
-                editor.commands.setTextSelection({ from, to });
-            }
-        }
-        isInternalUpdate.current = false;
-    }, [value, editor]);
-
-    // Update editor's editable state when disabled prop changes
-    useLayoutEffect(() => {
-        if (editor) {
-            editor.setEditable(!readOnly, false);
-        }
-    }, [readOnly, editor]);
-
-    if (!editor) {
-        return null;
-    }
-
-    return (
-        <>
-            <EditorContent editor={editor} />
-            <CustomBubbleMenu editor={editor} disabled={readOnly} />
-        </>
-    );
-}
 
-function CustomBubbleMenu({ editor, disabled }: { editor: Editor | null; disabled?: boolean }) {
-    if (!editor || disabled) return null;
-    return (
-        <BubbleMenu editor={editor}>
-            <div className="flex items-center gap-2 bg-background p-2 rounded-md border">
-                <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => editor.chain().focus().toggleBold().run()}
-                    className={editor.isActive('bold') ? 'bg-accent' : ''}
-                    disabled={disabled}
-                >
-                    <BoldIcon className="w-4 h-4" />
-                </Button>
-                <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => editor.chain().focus().toggleItalic().run()}
-                    className={editor.isActive('italic') ? 'bg-accent' : ''}
-                    disabled={disabled}
-                >
-                    <ItalicIcon className="w-4 h-4" />
-                </Button>
-                <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => editor.chain().focus().toggleStrike().run()}
-                    className={editor.isActive('strike') ? 'bg-accent' : ''}
-                    disabled={disabled}
-                >
-                    <StrikethroughIcon className="w-4 h-4" />
-                </Button>
-            </div>
-        </BubbleMenu>
-    );
+    return <RichTextEditor value={value} onChange={onChange} disabled={readOnly} />;
 }