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

package/src/lib/components/data-table/use-generated-columns.tsx

@@ -1,9 +1,11 @@
+import { useAllBulkActions } from '@/vdb/components/data-table/use-all-bulk-actions.js';
 import { DisplayComponent } from '@/vdb/framework/component-registry/display-component.js';
 import {
     FieldInfo,
     getOperationVariablesFields,
     getTypeFieldInfo,
 } from '@/vdb/framework/document-introspection/get-document-structure.js';
+import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
 import { api } from '@/vdb/graphql/api.js';
 import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
@@ -51,6 +53,7 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
     fields,
     customizeColumns,
     rowActions,
+    bulkActions,
     deleteMutation,
     additionalColumns,
     defaultColumnOrder,
@@ -62,6 +65,7 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
     fields: FieldInfo[];
     customizeColumns?: CustomizeColumnConfig<T>;
     rowActions?: RowAction<PaginatedListItemFields<T>>[];
+    bulkActions?: BulkAction[];
     deleteMutation?: TypedDocumentNode<any, any>;
     additionalColumns?: AdditionalColumns<T>;
     defaultColumnOrder?: Array<string | number | symbol>;
@@ -71,6 +75,7 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
     enableSorting?: boolean;
 }>) {
     const columnHelper = createColumnHelper<PaginatedListItemFields<T>>();
+    const allBulkActions = useAllBulkActions(bulkActions ?? []);
 
     const { columns, customFieldColumnNames } = useMemo(() => {
         const columnConfigs: Array<{ fieldInfo: FieldInfo; isCustomField: boolean }> = [];
@@ -169,8 +174,8 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
             finalColumns = [...orderedColumns, ...remainingColumns];
         }
 
-        if (includeActionsColumn && (rowActions || deleteMutation)) {
-            const rowActionColumn = getRowActions(rowActions, deleteMutation);
+        if (includeActionsColumn && (rowActions || deleteMutation || bulkActions)) {
+            const rowActionColumn = getRowActions(rowActions, deleteMutation, allBulkActions);
             if (rowActionColumn) {
                 finalColumns.push(rowActionColumn);
             }
@@ -212,13 +217,14 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
 function getRowActions(
     rowActions?: RowAction<any>[],
     deleteMutation?: TypedDocumentNode<any, any>,
+    bulkActions?: BulkAction[],
 ): AccessorKeyColumnDef<any> | undefined {
     return {
         id: 'actions',
         accessorKey: 'actions',
         header: () => <Trans>Actions</Trans>,
         enableColumnFilter: false,
-        cell: ({ row }) => {
+        cell: ({ row, table }) => {
             return (
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
@@ -235,6 +241,9 @@ function getRowActions(
                                 {action.label}
                             </DropdownMenuItem>
                         ))}
+                        {bulkActions?.map((action, index) => (
+                            <action.component key={`bulk-action-${index}`} selection={[row]} table={table} />
+                        ))}
                         {deleteMutation && (
                             <DeleteMutationRowAction deleteMutation={deleteMutation} row={row} />
                         )}

package/src/lib/components/layout/nav-main.tsx

@@ -14,6 +14,7 @@ import {
     NavMenuSection,
     NavMenuSectionPlacement,
 } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
+import { usePermissions } from '@/vdb/hooks/use-permissions.js';
 import { Link, useRouter, useRouterState } from '@tanstack/react-router';
 import { ChevronRight } from 'lucide-react';
 import * as React from 'react';
@@ -39,6 +40,7 @@ function escapeRegexChars(str: string): string {
 export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavMenuItem> }>) {
     const router = useRouter();
     const routerState = useRouterState();
+    const { hasPermissions } = usePermissions();
     const currentPath = routerState.location.pathname;
     const basePath = router.basepath || '';
 
@@ -46,16 +48,20 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
     const isPathActive = React.useCallback(
         (itemUrl: string) => {
             // Remove basepath prefix from current path for comparison
-            const normalizedCurrentPath = basePath ? currentPath.replace(new RegExp(`^${escapeRegexChars(basePath)}`), '') : currentPath;
-            
+            const normalizedCurrentPath = basePath
+                ? currentPath.replace(new RegExp(`^${escapeRegexChars(basePath)}`), '')
+                : currentPath;
+
             // Ensure normalized path starts with /
-            const cleanPath = normalizedCurrentPath.startsWith('/') ? normalizedCurrentPath : `/${normalizedCurrentPath}`;
-            
+            const cleanPath = normalizedCurrentPath.startsWith('/')
+                ? normalizedCurrentPath
+                : `/${normalizedCurrentPath}`;
+
             // Special handling for root path
             if (itemUrl === '/') {
                 return cleanPath === '/' || cleanPath === '';
             }
-            
+
             // For other paths, check exact match or prefix match
             return cleanPath === itemUrl || cleanPath.startsWith(`${itemUrl}/`);
         },
@@ -97,6 +103,20 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
         return activeTopSections;
     });
 
+    // Helper to check if an item is allowed based on permissions
+    const isItemAllowed = React.useCallback(
+        (item: NavMenuItem) => {
+            if (!item.requiresPermission) {
+                return true;
+            }
+            const permissions = Array.isArray(item.requiresPermission)
+                ? item.requiresPermission
+                : [item.requiresPermission];
+            return hasPermissions(permissions);
+        },
+        [hasPermissions],
+    );
+
     // Helper to build a sorted list of sections for a given placement, memoized for stability
     const getSortedSections = React.useCallback(
         (placement: NavMenuSectionPlacement) => {
@@ -104,13 +124,24 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                 .filter(item => item.placement === placement)
                 .slice()
                 .sort(sortByOrder)
-                .map(section =>
-                    'items' in section
-                        ? { ...section, items: section.items?.slice().sort(sortByOrder) }
-                        : section,
-                );
+                .map(section => {
+                    if ('items' in section) {
+                        // Filter items based on permissions
+                        const allowedItems = (section.items ?? []).filter(isItemAllowed).sort(sortByOrder);
+                        return { ...section, items: allowedItems };
+                    }
+                    return section;
+                })
+                .filter(section => {
+                    // Drop sections that have no items after permission filtering
+                    if ('items' in section) {
+                        return section.items && section.items.length > 0;
+                    }
+                    // For single items, check if they're allowed
+                    return isItemAllowed(section as NavMenuItem);
+                });
         },
-        [items],
+        [items, isItemAllowed],
     );
 
     const topSections = React.useMemo(() => getSortedSections('top'), [getSortedSections]);
@@ -154,11 +185,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
             return (
                 <NavItemWrapper key={item.title} locationId={item.id} order={item.order} offset={true}>
                     <SidebarMenuItem>
-                        <SidebarMenuButton
-                            tooltip={item.title}
-                            asChild
-                            isActive={isPathActive(item.url)}
-                        >
+                        <SidebarMenuButton tooltip={item.title} asChild isActive={isPathActive(item.url)}>
                             <Link to={item.url}>
                                 {item.icon && <item.icon />}
                                 <span>{item.title}</span>
@@ -220,11 +247,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
             return (
                 <NavItemWrapper key={item.title} locationId={item.id} order={item.order} offset={true}>
                     <SidebarMenuItem>
-                        <SidebarMenuButton
-                            tooltip={item.title}
-                            asChild
-                            isActive={isPathActive(item.url)}
-                        >
+                        <SidebarMenuButton tooltip={item.title} asChild isActive={isPathActive(item.url)}>
                             <Link to={item.url}>
                                 {item.icon && <item.icon />}
                                 <span>{item.title}</span>
@@ -287,10 +310,12 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
             </SidebarGroup>
 
             {/* Bottom sections - will be pushed to the bottom by CSS */}
-            <SidebarGroup className="mt-auto">
-                <SidebarGroupLabel>Administration</SidebarGroupLabel>
-                <SidebarMenu>{bottomSections.map(renderBottomSection)}</SidebarMenu>
-            </SidebarGroup>
+            {bottomSections.length ? (
+                <SidebarGroup className="mt-auto">
+                    <SidebarGroupLabel>Administration</SidebarGroupLabel>
+                    <SidebarMenu>{bottomSections.map(renderBottomSection)}</SidebarMenu>
+                </SidebarGroup>
+            ) : null}
         </>
     );
 }

package/src/lib/components/shared/asset/asset-focal-point-editor.tsx

@@ -17,7 +17,7 @@ export interface AssetFocalPointEditorProps {
     children?: React.ReactNode;
 }
 
-interface Point {
+export interface Point {
     x: number;
     y: number;
 }

package/src/lib/components/shared/asset/asset-gallery.tsx

@@ -23,6 +23,8 @@ import { useDebounce } from '@uidotdev/usehooks';
 import { Loader2, Search, Upload, X } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
+import { tagListDocument } from '../../../../app/routes/_authenticated/_assets/assets.graphql.js';
+import { AssetTagFilter } from '../../../../app/routes/_authenticated/_assets/components/asset-tag-filter.js';
 import { DetailPageButton } from '../detail-page-button.js';
 import { AssetBulkAction, AssetBulkActions } from './asset-bulk-actions.js';
 
@@ -74,7 +76,7 @@ export type Asset = AssetFragment;
 /**
  * @description
  * Props for the {@link AssetGallery} component.
- * 
+ *
  * @docsCategory components
  * @docsPage AssetGallery
  */
@@ -134,16 +136,16 @@ export interface AssetGalleryProps {
 /**
  * @description
  * A component for displaying a gallery of assets.
- * 
+ *
  * @example
  * ```tsx
  *  <AssetGallery
-        onSelect={handleAssetSelect}
-        multiSelect="manual"
-        initialSelectedAssets={initialSelectedAssets}
-        fixedHeight={false}
-        displayBulkActions={false}
-    />
+ onSelect={handleAssetSelect}
+ multiSelect="manual"
+ initialSelectedAssets={initialSelectedAssets}
+ fixedHeight={false}
+ displayBulkActions={false}
+ />
  * ```
  *
  * @docsCategory components
@@ -169,9 +171,19 @@ export function AssetGallery({
     const debouncedSearch = useDebounce(search, 500);
     const [assetType, setAssetType] = useState<string>(AssetType.ALL);
     const [selected, setSelected] = useState<Asset[]>(initialSelectedAssets || []);
+    const [selectedTags, setSelectedTags] = useState<string[]>([]);
     const queryClient = useQueryClient();
 
-    const queryKey = ['AssetGallery', page, pageSize, debouncedSearch, assetType];
+    const queryKey = ['AssetGallery', page, pageSize, debouncedSearch, assetType, selectedTags];
+
+    // Query for available tags to check if we should show the filter
+    const { data: tagsData } = useQuery({
+        queryKey: ['tags-check'],
+        queryFn: () => api.query(tagListDocument, { options: { take: 1 } }),
+        staleTime: 1000 * 60 * 5,
+    });
+
+    const hasTags = (tagsData?.tags.items?.length || 0) > 0;
 
     // Query for assets
     const { data, isLoading, refetch } = useQuery({
@@ -187,14 +199,20 @@ export function AssetGallery({
                 filter.type = { eq: assetType };
             }
 
-            return api.query(getAssetListDocument, {
-                options: {
-                    skip: (page - 1) * pageSize,
-                    take: pageSize,
-                    filter: Object.keys(filter).length > 0 ? filter : undefined,
-                    sort: { createdAt: 'DESC' },
-                },
-            });
+            const options: any = {
+                skip: (page - 1) * pageSize,
+                take: pageSize,
+                filter: Object.keys(filter).length > 0 ? filter : undefined,
+                sort: { createdAt: 'DESC' },
+            };
+
+            // Add tag filtering if tags are provided
+            if (selectedTags && selectedTags.length > 0) {
+                options.tags = selectedTags;
+                options.tagsOperator = 'AND';
+            }
+
+            return api.query(getAssetListDocument, { options });
         },
     });
 
@@ -262,10 +280,17 @@ export function AssetGallery({
     // Check if an asset is selected
     const isSelected = (asset: Asset) => selected.some(a => a.id === asset.id);
 
+    // Handle tag changes
+    const handleTagsChange = (tags: string[]) => {
+        setSelectedTags(tags);
+        setPage(1); // Reset to page 1 when tags change
+    };
+
     // Clear filters
     const clearFilters = () => {
         setSearch('');
         setAssetType(AssetType.ALL);
+        setSelectedTags([]);
         setPage(1);
     };
 
@@ -294,40 +319,48 @@ export function AssetGallery({
     return (
         <div className={`relative flex flex-col w-full ${fixedHeight ? 'h-[600px]' : 'h-full'} ${className}`}>
             {showHeader && (
-                <div className="flex flex-col md:flex-row gap-2 mb-4 flex-shrink-0">
-                    <div className="relative flex-grow flex items-center gap-2">
-                        <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-                        <Input
-                            placeholder="Search assets..."
-                            value={search}
-                            onChange={e => setSearch(e.target.value)}
-                            className="pl-8"
-                        />
-                        {(search || assetType !== AssetType.ALL) && (
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={clearFilters}
-                                className="absolute right-0"
-                            >
-                                <X className="h-4 w-4 mr-1" /> Clear filters
-                            </Button>
-                        )}
+                <div className="space-y-4 mb-4 flex-shrink-0">
+                    <div className="flex flex-col md:flex-row gap-2">
+                        <div className="relative flex-grow flex items-center gap-2">
+                            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                            <Input
+                                placeholder="Search assets..."
+                                value={search}
+                                onChange={e => setSearch(e.target.value)}
+                                className="pl-8"
+                            />
+                            {(search || assetType !== AssetType.ALL || selectedTags.length > 0) && (
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={clearFilters}
+                                    className="absolute right-0"
+                                >
+                                    <X className="h-4 w-4 mr-1" /> Clear filters
+                                </Button>
+                            )}
+                        </div>
+                        <Select value={assetType} onValueChange={setAssetType}>
+                            <SelectTrigger className="w-full md:w-[180px]">
+                                <SelectValue placeholder="Asset type" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value={AssetType.ALL}>All types</SelectItem>
+                                <SelectItem value={AssetType.IMAGE}>Images</SelectItem>
+                                <SelectItem value={AssetType.VIDEO}>Video</SelectItem>
+                                <SelectItem value={AssetType.BINARY}>Binary</SelectItem>
+                            </SelectContent>
+                        </Select>
+                        <Button onClick={openFileDialog} className="whitespace-nowrap">
+                            <Upload className="h-4 w-4 mr-2" /> <Trans>Upload</Trans>
+                        </Button>
                     </div>
-                    <Select value={assetType} onValueChange={setAssetType}>
-                        <SelectTrigger className="w-full md:w-[180px]">
-                            <SelectValue placeholder="Asset type" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value={AssetType.ALL}>All types</SelectItem>
-                            <SelectItem value={AssetType.IMAGE}>Images</SelectItem>
-                            <SelectItem value={AssetType.VIDEO}>Video</SelectItem>
-                            <SelectItem value={AssetType.BINARY}>Binary</SelectItem>
-                        </SelectContent>
-                    </Select>
-                    <Button onClick={openFileDialog} className="whitespace-nowrap">
-                        <Upload className="h-4 w-4 mr-2" /> <Trans>Upload</Trans>
-                    </Button>
+
+                    {hasTags && (
+                        <div className="flex items-center -mt-2">
+                            <AssetTagFilter selectedTags={selectedTags} onTagsChange={handleTagsChange} />
+                        </div>
+                    )}
                 </div>
             )}
 

package/src/lib/components/shared/paginated-list-data-table.tsx

@@ -437,6 +437,7 @@ export function PaginatedListDataTable<
         fields,
         customizeColumns,
         rowActions,
+        bulkActions,
         deleteMutation,
         additionalColumns,
         defaultColumnOrder,

package/src/lib/components/shared/vendure-image.tsx

@@ -25,7 +25,7 @@ export interface AssetLike {
  * @docsPage VendureImage
  * @since 3.4.0
  */
-export type ImagePreset = 'tiny' | 'thumb' | 'small' | 'medium' | 'large' | null;
+export type ImagePreset = 'tiny' | 'thumb' | 'small' | 'medium' | 'large' | 'full' | null;
 
 /**
  * @description
@@ -219,6 +219,10 @@ function getMinDimensions(preset?: ImagePreset, width?: number, height?: number)
                 return { width: 300, height: 300 };
             case 'medium':
                 return { width: 500, height: 500 };
+            case 'large':
+                return { width: 800, height: 800 };
+            case 'full':
+                return { width: undefined, height: undefined };
         }
     }
 
@@ -258,6 +262,10 @@ export function PlaceholderImage({
                 width = 800;
                 height = 800;
                 break;
+            case 'full':
+                width = 1200;
+                height = 1200;
+                break;
             default:
                 break;
         }

package/src/lib/framework/defaults.ts

@@ -37,30 +37,35 @@ export function registerDefaults() {
                         title: 'Products',
                         url: '/products',
                         order: 100,
+                        requiresPermission: ['ReadProduct', 'ReadCatalog'],
                     },
                     {
                         id: 'product-variants',
                         title: 'Product Variants',
                         url: '/product-variants',
                         order: 200,
+                        requiresPermission: ['ReadProduct', 'ReadCatalog'],
                     },
                     {
                         id: 'facets',
                         title: 'Facets',
                         url: '/facets',
                         order: 300,
+                        requiresPermission: ['ReadProduct', 'ReadCatalog'],
                     },
                     {
                         id: 'collections',
                         title: 'Collections',
                         url: '/collections',
                         order: 400,
+                        requiresPermission: ['ReadCollection', 'ReadCatalog'],
                     },
                     {
                         id: 'assets',
                         title: 'Assets',
                         url: '/assets',
                         order: 500,
+                        requiresPermission: ['ReadAsset', 'ReadCatalog'],
                     },
                 ],
             },
@@ -76,6 +81,7 @@ export function registerDefaults() {
                         title: 'Orders',
                         url: '/orders',
                         order: 100,
+                        requiresPermission: ['ReadOrder'],
                     },
                 ],
             },
@@ -91,12 +97,14 @@ export function registerDefaults() {
                         title: 'Customers',
                         url: '/customers',
                         order: 100,
+                        requiresPermission: ['ReadCustomer'],
                     },
                     {
                         id: 'customer-groups',
                         title: 'Customer Groups',
                         url: '/customer-groups',
                         order: 200,
+                        requiresPermission: ['ReadCustomerGroup'],
                     },
                 ],
             },
@@ -112,6 +120,7 @@ export function registerDefaults() {
                         title: 'Promotions',
                         url: '/promotions',
                         order: 100,
+                        requiresPermission: ['ReadPromotion'],
                     },
                 ],
             },
@@ -127,18 +136,21 @@ export function registerDefaults() {
                         title: 'Job Queue',
                         url: '/job-queue',
                         order: 100,
+                        requiresPermission: ['ReadSystem'],
                     },
                     {
                         id: 'healthchecks',
                         title: 'Healthchecks',
                         url: '/healthchecks',
                         order: 200,
+                        requiresPermission: ['ReadSystem'],
                     },
                     {
                         id: 'scheduled-tasks',
                         title: 'Scheduled Tasks',
                         url: '/scheduled-tasks',
                         order: 300,
+                        requiresPermission: ['ReadSystem'],
                     },
                 ],
             },
@@ -154,72 +166,84 @@ export function registerDefaults() {
                         title: 'Sellers',
                         url: '/sellers',
                         order: 100,
+                        requiresPermission: ['ReadSeller'],
                     },
                     {
                         id: 'channels',
                         title: 'Channels',
                         url: '/channels',
                         order: 200,
+                        requiresPermission: ['ReadChannel'],
                     },
                     {
                         id: 'stock-locations',
                         title: 'Stock Locations',
                         url: '/stock-locations',
                         order: 300,
+                        requiresPermission: ['ReadStockLocation'],
                     },
                     {
                         id: 'administrators',
                         title: 'Administrators',
                         url: '/administrators',
                         order: 400,
+                        requiresPermission: ['ReadAdministrator'],
                     },
                     {
                         id: 'roles',
                         title: 'Roles',
                         url: '/roles',
                         order: 500,
+                        requiresPermission: ['ReadAdministrator'],
                     },
                     {
                         id: 'shipping-methods',
                         title: 'Shipping Methods',
                         url: '/shipping-methods',
                         order: 600,
+                        requiresPermission: ['ReadShippingMethod'],
                     },
                     {
                         id: 'payment-methods',
                         title: 'Payment Methods',
                         url: '/payment-methods',
                         order: 700,
+                        requiresPermission: ['ReadPaymentMethod'],
                     },
                     {
                         id: 'tax-categories',
                         title: 'Tax Categories',
                         url: '/tax-categories',
                         order: 800,
+                        requiresPermission: ['ReadTaxCategory'],
                     },
                     {
                         id: 'tax-rates',
                         title: 'Tax Rates',
                         url: '/tax-rates',
                         order: 900,
+                        requiresPermission: ['ReadTaxRate'],
                     },
                     {
                         id: 'countries',
                         title: 'Countries',
                         url: '/countries',
                         order: 1000,
+                        requiresPermission: ['ReadCountry'],
                     },
                     {
                         id: 'zones',
                         title: 'Zones',
                         url: '/zones',
                         order: 1100,
+                        requiresPermission: ['ReadZone'],
                     },
                     {
                         id: 'global-settings',
                         title: 'Global Settings',
                         url: '/global-settings',
                         order: 1200,
+                        requiresPermission: ['UpdateGlobalSettings'],
                     },
                 ],
             },

package/src/lib/framework/extension-api/types/navigation.ts

@@ -27,6 +27,10 @@ export interface DashboardRouteDefinition {
      * @description
      * Optional navigation menu item configuration to add this route to the nav menu
      * on the left side of the dashboard.
+     *
+     * The `sectionId` specifies which nav menu section (e.g. "catalog", "customers")
+     * this item should appear in. It can also point to custom nav menu sections that
+     * have been defined using the `navSections` extension property.
      */
     navMenuItem?: Partial<NavMenuItem> & { sectionId: string };
     /**
@@ -42,8 +46,12 @@ export interface DashboardRouteDefinition {
  * @description
  * Defines a custom navigation section in the dashboard sidebar.
  *
+ * Individual items can then be added to the section by defining routes in the
+ * `routes` property of your Dashboard extension.
+ *
  * @docsCategory extensions-api
  * @docsPage Navigation
+ * @docsWeight 0
  * @since 3.4.0
  */
 export interface DashboardNavSectionDefinition {