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

package/src/app/routes/_authenticated/_sellers/sellers.tsx

@@ -7,7 +7,7 @@ import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteSellersBulkAction } from './components/seller-bulk-actions.js';
-import { deleteSellerDocument, sellerListQuery } from './sellers.graphql.js';
+import { sellerListQuery } from './sellers.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_sellers/sellers')({
     component: SellerListPage,
@@ -19,7 +19,6 @@ function SellerListPage() {
         <ListPage
             pageId="seller-list"
             listQuery={sellerListQuery}
-            deleteMutation={deleteSellerDocument}
             route={Route}
             title="Sellers"
             defaultVisibility={{

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods.tsx

@@ -12,7 +12,7 @@ import {
     RemoveShippingMethodsFromChannelBulkAction,
 } from './components/shipping-method-bulk-actions.js';
 import { TestShippingMethodDialog } from './components/test-shipping-method-dialog.js';
-import { deleteShippingMethodDocument, shippingMethodListQuery } from './shipping-methods.graphql.js';
+import { shippingMethodListQuery } from './shipping-methods.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_shipping-methods/shipping-methods')({
     component: ShippingMethodListPage,
@@ -24,7 +24,6 @@ function ShippingMethodListPage() {
         <ListPage
             pageId="shipping-method-list"
             listQuery={shippingMethodListQuery}
-            deleteMutation={deleteShippingMethodDocument}
             route={Route}
             title="Shipping Methods"
             defaultVisibility={{

package/src/app/routes/_authenticated/_stock-locations/stock-locations.tsx

@@ -11,7 +11,7 @@ import {
     DeleteStockLocationsBulkAction,
     RemoveStockLocationsFromChannelBulkAction,
 } from './components/stock-location-bulk-actions.js';
-import { deleteStockLocationDocument, stockLocationListQuery } from './stock-locations.graphql.js';
+import { stockLocationListQuery } from './stock-locations.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_stock-locations/stock-locations')({
     component: StockLocationListPage,
@@ -24,7 +24,6 @@ function StockLocationListPage() {
             pageId="stock-location-list"
             title="Stock Locations"
             listQuery={stockLocationListQuery}
-            deleteMutation={deleteStockLocationDocument}
             route={Route}
             customizeColumns={{
                 name: {

package/src/app/routes/_authenticated/_tax-categories/tax-categories.tsx

@@ -8,7 +8,7 @@ import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteTaxCategoriesBulkAction } from './components/tax-category-bulk-actions.js';
-import { deleteTaxCategoryDocument, taxCategoryListQuery } from './tax-categories.graphql.js';
+import { taxCategoryListQuery } from './tax-categories.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_tax-categories/tax-categories')({
     component: TaxCategoryListPage,
@@ -20,7 +20,6 @@ function TaxCategoryListPage() {
         <ListPage
             pageId="tax-category-list"
             listQuery={taxCategoryListQuery}
-            deleteMutation={deleteTaxCategoryDocument}
             route={Route}
             title="Tax Categories"
             defaultVisibility={{

package/src/app/routes/_authenticated/_tax-rates/tax-rates.tsx

@@ -11,7 +11,7 @@ import { PlusIcon } from 'lucide-react';
 import { taxCategoryListQuery } from '../_tax-categories/tax-categories.graphql.js';
 import { zoneListQuery } from '../_zones/zones.graphql.js';
 import { DeleteTaxRatesBulkAction } from './components/tax-rate-bulk-actions.js';
-import { deleteTaxRateDocument, taxRateListQuery } from './tax-rates.graphql.js';
+import { taxRateListQuery } from './tax-rates.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates')({
     component: TaxRateListPage,
@@ -23,7 +23,6 @@ function TaxRateListPage() {
         <ListPage
             pageId="tax-rate-list"
             listQuery={taxRateListQuery}
-            deleteMutation={deleteTaxRateDocument}
             route={Route}
             title="Tax Rates"
             defaultVisibility={{

package/src/app/routes/_authenticated/_zones/zones.tsx

@@ -8,7 +8,7 @@ import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteZonesBulkAction } from './components/zone-bulk-actions.js';
 import { ZoneCountriesSheet } from './components/zone-countries-sheet.js';
-import { deleteZoneDocument, zoneListQuery } from './zones.graphql.js';
+import { zoneListQuery } from './zones.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_zones/zones')({
     component: ZoneListPage,
@@ -20,7 +20,6 @@ function ZoneListPage() {
         <ListPage
             pageId="zone-list"
             listQuery={zoneListQuery}
-            deleteMutation={deleteZoneDocument}
             route={Route}
             title="Zones"
             defaultVisibility={{

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} />;
 }

package/src/lib/components/data-table/data-table-bulk-actions.tsx

@@ -1,5 +1,4 @@
-'use client';
-
+import { useAllBulkActions } from '@/vdb/components/data-table/use-all-bulk-actions.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import {
     DropdownMenu,
@@ -7,11 +6,8 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/vdb/components/ui/dropdown-menu.js';
-import { getBulkActions } from '@/vdb/framework/data-table/data-table-extensions.js';
 import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
 import { useFloatingBulkActions } from '@/vdb/hooks/use-floating-bulk-actions.js';
-import { usePageBlock } from '@/vdb/hooks/use-page-block.js';
-import { usePage } from '@/vdb/hooks/use-page.js';
 import { Trans } from '@/vdb/lib/trans.js';
 import { Table } from '@tanstack/react-table';
 import { ChevronDown } from 'lucide-react';
@@ -26,9 +22,7 @@ export function DataTableBulkActions<TData>({
     table,
     bulkActions,
 }: Readonly<DataTableBulkActionsProps<TData>>) {
-    const { pageId } = usePage();
-    const pageBlock = usePageBlock();
-    const blockId = pageBlock?.blockId;
+    const allBulkActions = useAllBulkActions(bulkActions);
 
     // Cache to store selected items across page changes
     const selectedItemsCache = useRef<Map<string, TData>>(new Map());
@@ -63,18 +57,15 @@ export function DataTableBulkActions<TData>({
     if (!shouldShow) {
         return null;
     }
-    const extendedBulkActions = pageId ? getBulkActions(pageId, blockId) : [];
-    const allBulkActions = [...extendedBulkActions, ...(bulkActions ?? [])];
-    allBulkActions.sort((a, b) => (a.order ?? 10_000) - (b.order ?? 10_000));
 
     return (
         <div
             className="flex items-center gap-4 px-8 py-2 animate-in fade-in duration-200 fixed transform -translate-x-1/2 bg-white shadow-2xl rounded-md border z-50"
-            style={{ 
-                height: 'auto', 
+            style={{
+                height: 'auto',
                 maxHeight: '60px',
                 bottom: position.bottom,
-                left: position.left
+                left: position.left,
             }}
         >
             <span className="text-sm text-muted-foreground">

package/src/lib/components/data-table/use-all-bulk-actions.ts

@@ -0,0 +1,19 @@
+import { getBulkActions } from '@/vdb/framework/data-table/data-table-extensions.js';
+import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
+import { usePageBlock } from '@/vdb/hooks/use-page-block.js';
+import { usePage } from '@/vdb/hooks/use-page.js';
+
+/**
+ * @description
+ * Augments the provided Bulk Actions with any user-defined actions for the current
+ * page & block, and returns all of the bulk actions sorted by the `order` property.
+ */
+export function useAllBulkActions(bulkActions: BulkAction[]): BulkAction[] {
+    const { pageId } = usePage();
+    const pageBlock = usePageBlock();
+    const blockId = pageBlock?.blockId;
+    const extendedBulkActions = pageId ? getBulkActions(pageId, blockId) : [];
+    const allBulkActions = [...extendedBulkActions, ...(bulkActions ?? [])];
+    allBulkActions.sort((a, b) => (a.order ?? 10_000) - (b.order ?? 10_000));
+    return allBulkActions;
+}

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;
 }