@vendure/dashboard 3.3.5-master-202506250727 → 3.3.5-master-202506251318

package/dist/plugin/tests/barrel-exports.spec.js

@@ -10,5 +10,5 @@ describe('detecting plugins in barrel exports', () => {
         expect(result.pluginInfo).toHaveLength(1);
         expect(result.pluginInfo[0].name).toBe('MyPlugin');
         expect(result.pluginInfo[0].dashboardEntryPath).toBe('./dashboard/index.tsx');
-    });
+    }, { timeout: 10000 });
 });

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

@@ -49,6 +49,7 @@ export function viteConfigPlugin({ packageRoot }) {
                     ...(((_e = config.optimizeDeps) === null || _e === void 0 ? void 0 : _e.include) || []),
                     '@/components > recharts',
                     '@/components > react-dropzone',
+                    '@vendure/common/lib/generated-types',
                 ] });
             return config;
         },

package/dist/plugin/vite-plugin-dashboard-metadata.d.ts

@@ -4,6 +4,4 @@ import { Plugin } from 'vite';
  * generates an import statement for each one, wrapped up in a `runDashboardExtensions()`
  * function which can then be imported and executed in the Dashboard app.
  */
-export declare function dashboardMetadataPlugin(options: {
-    rootDir: string;
-}): Plugin;
+export declare function dashboardMetadataPlugin(): Plugin;

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

@@ -7,7 +7,7 @@ const resolvedVirtualModuleId = `\0${virtualModuleId}`;
  * generates an import statement for each one, wrapped up in a `runDashboardExtensions()`
  * function which can then be imported and executed in the Dashboard app.
  */
-export function dashboardMetadataPlugin(options) {
+export function dashboardMetadataPlugin() {
     let configLoaderApi;
     let loadVendureConfigResult;
     return {
@@ -41,10 +41,3 @@ export function dashboardMetadataPlugin(options) {
         },
     };
 }
-/**
- * Converts an import path to a normalized path relative to the rootDir.
- */
-function normalizeImportPath(rootDir, importPath) {
-    const relativePath = path.relative(rootDir, importPath).replace(/\\/g, '/');
-    return relativePath.replace(/\.tsx?$/, '.js');
-}

package/dist/plugin/vite-plugin-tailwind-source.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vite';
+/**
+ * This Vite plugin transforms the `app/styles.css` file to include a `@source` directive
+ * for each dashboard extension's source directory. This allows Tailwind CSS to
+ * include styles from these extensions when processing the CSS.
+ */
+export declare function dashboardTailwindSourcePlugin(): Plugin;

package/dist/plugin/vite-plugin-tailwind-source.js

@@ -0,0 +1,49 @@
+import path from 'path';
+import { getConfigLoaderApi } from './vite-plugin-config-loader.js';
+/**
+ * This Vite plugin transforms the `app/styles.css` file to include a `@source` directive
+ * for each dashboard extension's source directory. This allows Tailwind CSS to
+ * include styles from these extensions when processing the CSS.
+ */
+export function dashboardTailwindSourcePlugin() {
+    let configLoaderApi;
+    let loadVendureConfigResult;
+    return {
+        name: 'vendure:dashboard-tailwind-source',
+        // Ensure this plugin runs before Tailwind CSS processing
+        enforce: 'pre',
+        configResolved({ plugins }) {
+            configLoaderApi = getConfigLoaderApi(plugins);
+        },
+        async transform(src, id) {
+            var _a;
+            if (/app\/styles.css$/.test(id)) {
+                if (!loadVendureConfigResult) {
+                    loadVendureConfigResult = await configLoaderApi.getVendureConfig();
+                }
+                const { pluginInfo } = loadVendureConfigResult;
+                const dashboardExtensionDirs = (_a = pluginInfo === null || pluginInfo === void 0 ? void 0 : pluginInfo.map(({ dashboardEntryPath, pluginPath }) => dashboardEntryPath && path.join(pluginPath, path.dirname(dashboardEntryPath))).filter(x => x != null)) !== null && _a !== void 0 ? _a : [];
+                const sources = dashboardExtensionDirs
+                    .map(extension => {
+                    return `@source '${extension}';`;
+                })
+                    .join('\n');
+                // Find the line with the specific comment and insert sources after it
+                const lines = src.split('\n');
+                const sourceCommentIndex = lines.findIndex(line => line.includes('/* @source rules from extensions will be added here by the dashboardTailwindSourcePlugin */'));
+                if (sourceCommentIndex !== -1) {
+                    // Insert the sources after the comment line
+                    lines.splice(sourceCommentIndex + 1, 0, sources);
+                    const modifiedSrc = lines.join('\n');
+                    return {
+                        code: modifiedSrc,
+                    };
+                }
+                // If the comment is not found, append sources at the end
+                return {
+                    code: src + '\n' + sources,
+                };
+            }
+        },
+    };
+}

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

@@ -7,6 +7,7 @@ import { configLoaderPlugin } from './vite-plugin-config-loader.js';
 import { viteConfigPlugin } from './vite-plugin-config.js';
 import { dashboardMetadataPlugin } from './vite-plugin-dashboard-metadata.js';
 import { gqlTadaPlugin } from './vite-plugin-gql-tada.js';
+import { dashboardTailwindSourcePlugin } from './vite-plugin-tailwind-source.js';
 import { themeVariablesPlugin } from './vite-plugin-theme.js';
 import { transformIndexHtmlPlugin } from './vite-plugin-transform-index.js';
 import { uiConfigPlugin } from './vite-plugin-ui-config.js';
@@ -42,6 +43,7 @@ export function vendureDashboardPlugin(options) {
         // },
         }),
         themeVariablesPlugin({ theme: options.theme }),
+        dashboardTailwindSourcePlugin(),
         tailwindcss(),
         configLoaderPlugin({
             vendureConfigPath: normalizedVendureConfigPath,
@@ -51,7 +53,7 @@ export function vendureDashboardPlugin(options) {
         }),
         viteConfigPlugin({ packageRoot }),
         adminApiSchemaPlugin(),
-        dashboardMetadataPlugin({ rootDir: tempDir }),
+        dashboardMetadataPlugin(),
         uiConfigPlugin({ adminUiConfig: options.adminUiConfig }),
         ...(options.gqlTadaOutputPath
             ? [gqlTadaPlugin({ gqlTadaOutputPath: options.gqlTadaOutputPath, tempDir, packageRoot })]

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.3.5-master-202506250727",
+    "version": "3.3.5-master-202506251318",
     "type": "module",
     "repository": {
         "type": "git",
@@ -86,8 +86,8 @@
         "@types/react-dom": "^19.0.4",
         "@types/react-grid-layout": "^1.3.5",
         "@uidotdev/usehooks": "^2.4.1",
-        "@vendure/common": "^3.3.5-master-202506250727",
-        "@vendure/core": "^3.3.5-master-202506250727",
+        "@vendure/common": "^3.3.5-master-202506251318",
+        "@vendure/core": "^3.3.5-master-202506251318",
         "@vitejs/plugin-react": "^4.3.4",
         "awesome-graphql-client": "^2.1.0",
         "class-variance-authority": "^0.7.1",
@@ -130,5 +130,5 @@
         "lightningcss-linux-arm64-musl": "^1.29.3",
         "lightningcss-linux-x64-musl": "^1.29.1"
     },
-    "gitHead": "a1b6b57cbb9b65a63e88cf06e0e65d5a5dd0a87f"
+    "gitHead": "ef8a39dcc2b48b73b38647c8dd96a7891d598e7a"
 }

package/src/app/routes/_authenticated/_products/components/assign-facet-values-dialog.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { useMutation } from '@tanstack/react-query';
+
+import { Button } from '@/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog.js';
+import { FacetValueSelector, FacetValue } from '@/components/shared/facet-value-selector.js';
+import { api } from '@/graphql/api.js';
+import { ResultOf } from '@/graphql/graphql.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+
+import { updateProductsDocument } from '../products.graphql.js';
+
+interface AssignFacetValuesDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    productIds: string[];
+    onSuccess?: () => void;
+}
+
+export function AssignFacetValuesDialog({ open, onOpenChange, productIds, onSuccess }: AssignFacetValuesDialogProps) {
+    const { i18n } = useLingui();
+    const [selectedFacetValueIds, setSelectedFacetValueIds] = useState<string[]>([]);
+
+    const { mutate, isPending } = useMutation({
+        mutationFn: api.mutate(updateProductsDocument),
+        onSuccess: (result: ResultOf<typeof updateProductsDocument>) => {
+            toast.success(i18n.t(`Successfully updated facet values for ${productIds.length} products`));
+            onSuccess?.();
+            onOpenChange(false);
+        },
+        onError: () => {
+            toast.error(`Failed to update facet values for ${productIds.length} products`);
+        },
+    });
+
+    const handleAssign = () => {
+        if (selectedFacetValueIds.length === 0) {
+            toast.error('Please select at least one facet value');
+            return;
+        }
+
+        mutate({
+            input: productIds.map(productId => ({
+                id: productId,
+                facetValueIds: selectedFacetValueIds,
+            })),
+        });
+    };
+
+    const handleFacetValueSelect = (facetValue: FacetValue) => {
+        setSelectedFacetValueIds(prev => [...new Set([...prev, facetValue.id])]);
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[500px]">
+                <DialogHeader>
+                    <DialogTitle><Trans>Edit facet values</Trans></DialogTitle>
+                    <DialogDescription>
+                        <Trans>Select facet values to assign to {productIds.length} products</Trans>
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="grid gap-4 py-4">
+                    <div className="grid gap-2">
+                        <label className="text-sm font-medium">
+                            <Trans>Facet values</Trans>
+                        </label>
+                        <FacetValueSelector
+                            onValueSelect={handleFacetValueSelect}
+                            placeholder="Search facet values..."
+                        />
+                    </div>
+                    {selectedFacetValueIds.length > 0 && (
+                        <div className="text-sm text-muted-foreground">
+                            <Trans>{selectedFacetValueIds.length} facet value(s) selected</Trans>
+                        </div>
+                    )}
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button onClick={handleAssign} disabled={selectedFacetValueIds.length === 0 || isPending}>
+                        <Trans>Update</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+} 

package/src/app/routes/_authenticated/_products/components/assign-to-channel-dialog.tsx

@@ -0,0 +1,126 @@
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
+import { Button } from '@/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog.js';
+import { Input } from '@/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
+import { api } from '@/graphql/api.js';
+import { ResultOf } from '@/graphql/graphql.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+
+import { useChannel } from '@/hooks/use-channel.js';
+import { assignProductsToChannelDocument } from '../products.graphql.js';
+
+interface AssignToChannelDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    productIds: string[];
+    onSuccess?: () => void;
+}
+
+export function AssignToChannelDialog({
+    open,
+    onOpenChange,
+    productIds,
+    onSuccess,
+}: AssignToChannelDialogProps) {
+    const { i18n } = useLingui();
+    const [selectedChannelId, setSelectedChannelId] = useState<string>('');
+    const [priceFactor, setPriceFactor] = useState<number>(1);
+    const { channels, selectedChannel } = useChannel();
+
+    // Filter out the currently selected channel from available options
+    const availableChannels = channels.filter(channel => channel.id !== selectedChannel?.id);
+
+    const { mutate, isPending } = useMutation({
+        mutationFn: api.mutate(assignProductsToChannelDocument),
+        onSuccess: (result: ResultOf<typeof assignProductsToChannelDocument>) => {
+            toast.success(i18n.t(`Successfully assigned ${productIds.length} products to channel`));
+            onSuccess?.();
+            onOpenChange(false);
+        },
+        onError: () => {
+            toast.error(`Failed to assign ${productIds.length} products to channel`);
+        },
+    });
+
+    const handleAssign = () => {
+        if (!selectedChannelId) {
+            toast.error('Please select a channel');
+            return;
+        }
+
+        mutate({
+            input: {
+                productIds,
+                channelId: selectedChannelId,
+                priceFactor,
+            },
+        });
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Assign products to channel</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                        <Trans>Select a channel to assign {productIds.length} products to</Trans>
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="grid gap-4 py-4">
+                    <div className="grid gap-2">
+                        <label className="text-sm font-medium">
+                            <Trans>Channel</Trans>
+                        </label>
+                        <Select value={selectedChannelId} onValueChange={setSelectedChannelId}>
+                            <SelectTrigger>
+                                <SelectValue placeholder={i18n.t('Select a channel')} />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {availableChannels.map(channel => (
+                                    <SelectItem key={channel.id} value={channel.id}>
+                                        <ChannelCodeLabel code={channel.code} />
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    <div className="grid gap-2">
+                        <label className="text-sm font-medium">
+                            <Trans>Price conversion factor</Trans>
+                        </label>
+                        <Input
+                            type="number"
+                            min="0"
+                            max="99999"
+                            step="0.01"
+                            value={priceFactor}
+                            onChange={e => setPriceFactor(parseFloat(e.target.value) || 1)}
+                        />
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button onClick={handleAssign} disabled={!selectedChannelId || isPending}>
+                        <Trans>Assign</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/app/routes/_authenticated/_products/components/product-bulk-actions.tsx

@@ -0,0 +1,268 @@
+import { useMutation } from '@tanstack/react-query';
+import { CopyIcon, LayersIcon, TagIcon, TrashIcon } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
+import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { api } from '@/graphql/api.js';
+import { ResultOf } from '@/graphql/graphql.js';
+import { useChannel, usePaginatedList } from '@/index.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+
+import { Permission } from '@vendure/common/lib/generated-types';
+import {
+    deleteProductsDocument,
+    duplicateEntityDocument,
+    removeProductsFromChannelDocument,
+} from '../products.graphql.js';
+import { AssignFacetValuesDialog } from './assign-facet-values-dialog.js';
+import { AssignToChannelDialog } from './assign-to-channel-dialog.js';
+
+export const DeleteProductsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { i18n } = useLingui();
+    const { mutate } = useMutation({
+        mutationFn: api.mutate(deleteProductsDocument),
+        onSuccess: (result: ResultOf<typeof deleteProductsDocument>) => {
+            let deleted = 0;
+            const errors: string[] = [];
+            for (const item of result.deleteProducts) {
+                if (item.result === 'DELETED') {
+                    deleted++;
+                } else if (item.message) {
+                    errors.push(item.message);
+                }
+            }
+            if (0 < deleted) {
+                toast.success(i18n.t(`Deleted ${deleted} products`));
+            }
+            if (0 < errors.length) {
+                toast.error(i18n.t(`Failed to delete ${errors.length} products`));
+            }
+            refetchPaginatedList();
+            table.resetRowSelection();
+        },
+        onError: () => {
+            toast.error(`Failed to delete ${selection.length} products`);
+        },
+    });
+    return (
+        <DataTableBulkActionItem
+            requiresPermission={[Permission.DeleteCatalog, Permission.DeleteProduct]}
+            onClick={() => mutate({ ids: selection.map(s => s.id) })}
+            label={<Trans>Delete</Trans>}
+            confirmationText={<Trans>Are you sure you want to delete {selection.length} products?</Trans>}
+            icon={TrashIcon}
+            className="text-destructive"
+        />
+    );
+};
+
+export const AssignProductsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { channels, selectedChannel } = useChannel();
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    if (channels.length < 2) {
+        return null;
+    }
+
+    const handleSuccess = () => {
+        refetchPaginatedList();
+        table.resetRowSelection();
+    };
+
+    return (
+        <>
+            <DataTableBulkActionItem
+                requiresPermission={[Permission.UpdateCatalog, Permission.UpdateProduct]}
+                onClick={() => setDialogOpen(true)}
+                label={<Trans>Assign to channel</Trans>}
+                icon={LayersIcon}
+            />
+            <AssignToChannelDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                productIds={selection.map(s => s.id)}
+                onSuccess={handleSuccess}
+            />
+        </>
+    );
+};
+
+export const RemoveProductsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { selectedChannel } = useChannel();
+    const { i18n } = useLingui();
+    const { mutate } = useMutation({
+        mutationFn: api.mutate(removeProductsFromChannelDocument),
+        onSuccess: () => {
+            toast.success(i18n.t(`Successfully removed ${selection.length} products from channel`));
+            refetchPaginatedList();
+            table.resetRowSelection();
+        },
+        onError: error => {
+            toast.error(`Failed to remove ${selection.length} products from channel: ${error.message}`);
+        },
+    });
+
+    if (!selectedChannel) {
+        return null;
+    }
+
+    const handleRemove = () => {
+        mutate({
+            input: {
+                productIds: selection.map(s => s.id),
+                channelId: selectedChannel.id,
+            },
+        });
+    };
+
+    return (
+        <DataTableBulkActionItem
+            requiresPermission={[Permission.UpdateCatalog, Permission.UpdateProduct]}
+            onClick={handleRemove}
+            label={<Trans>Remove from current channel</Trans>}
+            confirmationText={
+                <Trans>
+                    Are you sure you want to remove {selection.length} products from the current channel?
+                </Trans>
+            }
+            icon={LayersIcon}
+            className="text-warning"
+        />
+    );
+};
+
+export const AssignFacetValuesToProductsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { refetchPaginatedList } = usePaginatedList();
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    const handleSuccess = () => {
+        refetchPaginatedList();
+        table.resetRowSelection();
+    };
+
+    return (
+        <>
+            <DataTableBulkActionItem
+                requiresPermission={[Permission.UpdateCatalog, Permission.UpdateProduct]}
+                onClick={() => setDialogOpen(true)}
+                label={<Trans>Edit facet values</Trans>}
+                icon={TagIcon}
+            />
+            <AssignFacetValuesDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                productIds={selection.map(s => s.id)}
+                onSuccess={handleSuccess}
+            />
+        </>
+    );
+};
+
+export const DuplicateProductsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { i18n } = useLingui();
+    const [isDuplicating, setIsDuplicating] = useState(false);
+    const [progress, setProgress] = useState({ completed: 0, total: 0 });
+
+    const { mutateAsync } = useMutation({
+        mutationFn: api.mutate(duplicateEntityDocument),
+    });
+
+    const handleDuplicate = async () => {
+        if (isDuplicating) return;
+
+        setIsDuplicating(true);
+        setProgress({ completed: 0, total: selection.length });
+
+        const results = {
+            success: 0,
+            failed: 0,
+            errors: [] as string[],
+        };
+
+        try {
+            // Process products sequentially to avoid overwhelming the server
+            for (let i = 0; i < selection.length; i++) {
+                const product = selection[i];
+
+                try {
+                    const result = await mutateAsync({
+                        input: {
+                            entityName: 'Product',
+                            entityId: product.id,
+                            duplicatorInput: {
+                                code: 'product-duplicator',
+                                arguments: [
+                                    {
+                                        name: 'includeVariants',
+                                        value: 'true',
+                                    },
+                                ],
+                            },
+                        },
+                    });
+
+                    if ('newEntityId' in result.duplicateEntity) {
+                        results.success++;
+                    } else {
+                        results.failed++;
+                        const errorMsg =
+                            result.duplicateEntity.message ||
+                            result.duplicateEntity.duplicationError ||
+                            'Unknown error';
+                        results.errors.push(`Product ${product.name || product.id}: ${errorMsg}`);
+                    }
+                } catch (error) {
+                    results.failed++;
+                    results.errors.push(
+                        `Product ${product.name || product.id}: ${error instanceof Error ? error.message : 'Unknown error'}`,
+                    );
+                }
+
+                setProgress({ completed: i + 1, total: selection.length });
+            }
+
+            // Show results
+            if (results.success > 0) {
+                toast.success(i18n.t(`Successfully duplicated ${results.success} products`));
+            }
+            if (results.failed > 0) {
+                const errorMessage =
+                    results.errors.length > 3
+                        ? `${results.errors.slice(0, 3).join(', ')}... and ${results.errors.length - 3} more`
+                        : results.errors.join(', ');
+                toast.error(`Failed to duplicate ${results.failed} products: ${errorMessage}`);
+            }
+
+            if (results.success > 0) {
+                refetchPaginatedList();
+                table.resetRowSelection();
+            }
+        } finally {
+            setIsDuplicating(false);
+            setProgress({ completed: 0, total: 0 });
+        }
+    };
+
+    return (
+        <DataTableBulkActionItem
+            requiresPermission={[Permission.UpdateCatalog, Permission.UpdateProduct]}
+            onClick={handleDuplicate}
+            label={
+                isDuplicating ? (
+                    <Trans>
+                        Duplicating... ({progress.completed}/{progress.total})
+                    </Trans>
+                ) : (
+                    <Trans>Duplicate</Trans>
+                )
+            }
+            icon={CopyIcon}
+        />
+    );
+};