@vendure/dashboard 3.5.0-minor-202510031341 → 3.5.0-minor-202510161257

package/src/lib/components/shared/facet-value-selector.tsx

@@ -10,7 +10,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@lingui/react/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 import { ChevronRight, Loader2, Plus } from 'lucide-react';
@@ -141,21 +141,24 @@ const getFacetValuesForFacetDocument = graphql(`
  * @since 3.4.0
  */
 export function FacetValueSelector({
-                                       onValueSelect,
-                                       disabled,
-                                       placeholder = 'Search facet values...',
-                                       pageSize = 4,
-                                   }: FacetValueSelectorProps) {
+    onValueSelect,
+    disabled,
+    placeholder,
+    pageSize = 10,
+}: FacetValueSelectorProps) {
     const [open, setOpen] = useState(false);
     const [searchTerm, setSearchTerm] = useState('');
     const [expandedFacetId, setExpandedFacetId] = useState<string | null>(null);
+    const [browseMode, setBrowseMode] = useState(false);
     const debouncedSearch = useDebounce(searchTerm, 200);
+    const { t } = useLingui();
+    const minSearchLength = 1;
 
     // Query for facet values based on search
     const { data: facetValueData, isLoading: isLoadingFacetValues } = useQuery({
         queryKey: ['facetValues', debouncedSearch],
         queryFn: () => {
-            if (debouncedSearch.length < 2) {
+            if (debouncedSearch.length < minSearchLength) {
                 return { facetValues: { items: [], totalItems: 0 } };
             }
             return api.query(getFacetValueListDocument, {
@@ -167,14 +170,14 @@ export function FacetValueSelector({
                 },
             });
         },
-        enabled: debouncedSearch.length >= 2 && !expandedFacetId,
+        enabled: debouncedSearch.length >= minSearchLength && !expandedFacetId,
     });
 
-    // Query for facets based on search
-    const { data: facetData, isLoading: isLoadingFacets } = useQuery({
+    // Query for facets based on search (use regular query for search, infinite for browse)
+    const { data: facetSearchData, isLoading: isLoadingFacetSearch } = useQuery({
         queryKey: ['facets', debouncedSearch],
         queryFn: () => {
-            if (debouncedSearch.length < 2) {
+            if (debouncedSearch.length < minSearchLength) {
                 return { facets: { items: [], totalItems: 0 } };
             }
             return api.query(getFacetListDocument, {
@@ -186,7 +189,36 @@ export function FacetValueSelector({
                 },
             });
         },
-        enabled: debouncedSearch.length >= 2 && !expandedFacetId,
+        enabled: !browseMode && debouncedSearch.length >= minSearchLength && !expandedFacetId,
+    });
+
+    // Infinite query for browse mode
+    const {
+        data: facetBrowseData,
+        isLoading: isLoadingFacetBrowse,
+        fetchNextPage: fetchNextFacetsPage,
+        hasNextPage: hasNextFacetsPage,
+        isFetchingNextPage: isFetchingNextFacetsPage,
+    } = useInfiniteQuery({
+        queryKey: ['facets', 'browse'],
+        queryFn: async ({ pageParam = 0 }) => {
+            const response = await api.query(getFacetListDocument, {
+                options: {
+                    filter: {},
+                    sort: { name: 'ASC' },
+                    skip: pageParam * pageSize,
+                    take: pageSize,
+                },
+            });
+            return response.facets;
+        },
+        getNextPageParam: (lastPage, allPages) => {
+            if (!lastPage) return undefined;
+            const totalFetched = allPages.length * pageSize;
+            return totalFetched < lastPage.totalItems ? allPages.length : undefined;
+        },
+        enabled: browseMode && !expandedFacetId,
+        initialPageParam: 0,
     });
 
     // Query for paginated values of a specific facet when expanded
@@ -220,7 +252,9 @@ export function FacetValueSelector({
     });
 
     const facetValues = facetValueData?.facetValues.items ?? [];
-    const facets = facetData?.facets.items ?? [];
+    const facets = browseMode
+        ? (facetBrowseData?.pages.flatMap(page => page?.items ?? []) ?? [])
+        : (facetSearchData?.facets.items ?? []);
     const expandedFacetValues = expandedFacetData?.pages.flatMap(page => page?.items ?? []) ?? [];
     const expandedFacetName = expandedFacetValues[0]?.facet.name;
 
@@ -237,14 +271,22 @@ export function FacetValueSelector({
         {},
     );
 
-    const isLoading = isLoadingFacetValues || isLoadingFacets || isLoadingExpandedFacet;
+    const isLoading =
+        isLoadingFacetValues || isLoadingFacetSearch || isLoadingFacetBrowse || isLoadingExpandedFacet;
 
     const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
         const target = e.currentTarget;
         const scrolledToBottom = Math.abs(target.scrollHeight - target.clientHeight - target.scrollTop) < 1;
 
-        if (scrolledToBottom && hasNextPage && !isFetchingNextPage) {
-            fetchNextPage();
+        if (scrolledToBottom && !isFetchingNextPage) {
+            // For expanded facet values
+            if (expandedFacetId && hasNextPage) {
+                void fetchNextPage();
+            }
+            // For browse mode facets
+            if (browseMode && !expandedFacetId && hasNextFacetsPage) {
+                void fetchNextFacetsPage();
+            }
         }
     };
 
@@ -259,22 +301,59 @@ export function FacetValueSelector({
             <PopoverContent className="p-0 w-[400px]" align="start">
                 <Command shouldFilter={false}>
                     <CommandInput
-                        placeholder={placeholder}
+                        placeholder={placeholder ?? t`Search facet values...`}
                         value={searchTerm}
                         onValueChange={value => {
                             setSearchTerm(value);
                             setExpandedFacetId(null);
+                            setBrowseMode(false);
+                        }}
+                        onKeyDown={e => {
+                            if (
+                                e.key === 'ArrowDown' &&
+                                !browseMode &&
+                                debouncedSearch.length < minSearchLength
+                            ) {
+                                e.preventDefault();
+                                setBrowseMode(true);
+                            }
                         }}
                         disabled={disabled}
                     />
                     <CommandList className="h-[200px] overflow-y-auto" onScroll={handleScroll}>
                         <CommandEmpty>
-                            {debouncedSearch.length < 2 ? (
-                                <Trans>Type at least 2 characters to search...</Trans>
+                            {debouncedSearch.length < 2 && !browseMode ? (
+                                <div className="flex flex-col items-center gap-2 py-4">
+                                    <div className="text-sm text-muted-foreground">
+                                        <Trans>Type at least 2 characters to search...</Trans>
+                                    </div>
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={() => setBrowseMode(true)}
+                                        type="button"
+                                    >
+                                        <Trans>Browse facets</Trans>
+                                    </Button>
+                                </div>
                             ) : isLoading ? (
                                 <Trans>Loading...</Trans>
                             ) : (
-                                <Trans>No results found</Trans>
+                                <div className="flex flex-col items-center gap-2 py-4">
+                                    <div className="text-sm text-muted-foreground">
+                                        <Trans>No results found</Trans>
+                                    </div>
+                                    {!browseMode && (
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={() => setBrowseMode(true)}
+                                            type="button"
+                                        >
+                                            <Trans>Browse facets</Trans>
+                                        </Button>
+                                    )}
+                                </div>
                             )}
                         </CommandEmpty>
 
@@ -282,7 +361,10 @@ export function FacetValueSelector({
                             <>
                                 <CommandGroup>
                                     <CommandItem
-                                        onSelect={() => setExpandedFacetId(null)}
+                                        onSelect={() => {
+                                            setExpandedFacetId(null);
+                                            setBrowseMode(false);
+                                        }}
                                         className="cursor-pointer"
                                     >
                                         ← <Trans>Back to search</Trans>
@@ -297,6 +379,7 @@ export function FacetValueSelector({
                                                 onValueSelect(facetValue);
                                                 setSearchTerm('');
                                                 setExpandedFacetId(null);
+                                                setBrowseMode(false);
                                                 setOpen(false);
                                             }}
                                         >
@@ -318,19 +401,31 @@ export function FacetValueSelector({
                         ) : (
                             <>
                                 {facets.length > 0 && (
-                                    <CommandGroup heading={<Trans>Facets</Trans>}>
-                                        {facets.map(facet => (
-                                            <CommandItem
-                                                key={facet.id}
-                                                value={`facet-${facet.id}`}
-                                                onSelect={() => setExpandedFacetId(facet.id)}
-                                                className="cursor-pointer"
-                                            >
-                                                <span className="flex-1">{facet.name}</span>
-                                                <ChevronRight className="h-4 w-4" />
-                                            </CommandItem>
-                                        ))}
-                                    </CommandGroup>
+                                    <>
+                                        <CommandGroup heading={<Trans>Facets</Trans>}>
+                                            {facets.map(facet => (
+                                                <CommandItem
+                                                    key={facet.id}
+                                                    value={`facet-${facet.id}`}
+                                                    onSelect={() => setExpandedFacetId(facet.id)}
+                                                    className="cursor-pointer"
+                                                >
+                                                    <span className="flex-1">{facet.name}</span>
+                                                    <ChevronRight className="h-4 w-4" />
+                                                </CommandItem>
+                                            ))}
+                                        </CommandGroup>
+                                        {browseMode && isFetchingNextFacetsPage && (
+                                            <div className="flex items-center justify-center py-2">
+                                                <Loader2 className="h-4 w-4 animate-spin" />
+                                            </div>
+                                        )}
+                                        {browseMode && !hasNextFacetsPage && facets.length > 0 && (
+                                            <div className="text-center py-2 text-sm text-muted-foreground">
+                                                <Trans>No more facets</Trans>
+                                            </div>
+                                        )}
+                                    </>
                                 )}
 
                                 {Object.entries(facetGroups).map(
@@ -343,6 +438,7 @@ export function FacetValueSelector({
                                                     onSelect={() => {
                                                         onValueSelect(facetValue);
                                                         setSearchTerm('');
+                                                        setBrowseMode(false);
                                                         setOpen(false);
                                                     }}
                                                 >

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

@@ -0,0 +1,212 @@
+import { Money } from '@/vdb/components/data-display/money.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { FullWidthPageBlock, Page, PageLayout } from '@/vdb/framework/layout-engine/page-layout.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { useState } from 'react';
+import { withDescription } from '../../../../.storybook/with-description.js';
+import { PaginatedListDataTable } from './paginated-list-data-table.js';
+
+// GraphQL query for products list
+const productsListDocument = graphql(`
+    query ProductsList($options: ProductListOptions) {
+        products(options: $options) {
+            items {
+                id
+                createdAt
+                updatedAt
+                name
+                slug
+                description
+                enabled
+                featuredAsset {
+                    id
+                    preview
+                }
+                variants {
+                    id
+                    name
+                    sku
+                    price
+                    priceWithTax
+                    currencyCode
+                }
+            }
+            totalItems
+        }
+    }
+`);
+
+const meta = {
+    title: 'Components/PaginatedListDataTable',
+    component: PaginatedListDataTable,
+    ...withDescription(import.meta.url, './paginated-list-data-table.js'),
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof PaginatedListDataTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => {
+        const [page, setPage] = useState(1);
+        const [pageSize, setPageSize] = useState(10);
+        const [sorting, setSorting] = useState<SortingState>([{ id: 'name', desc: false }]);
+        const [filters, setFilters] = useState<ColumnFiltersState>([]);
+
+        return (
+            <div className="p-6">
+                <Page pageId="test-page">
+                    <PageLayout>
+                        <FullWidthPageBlock blockId="test-block">
+                            <PaginatedListDataTable
+                                listQuery={productsListDocument}
+                                defaultVisibility={{
+                                    id: false,
+                                    updatedAt: false,
+                                    description: false,
+                                    slug: false,
+                                    variants: false,
+                                }}
+                                customizeColumns={{
+                                    name: {
+                                        header: 'Product Name',
+                                        cell: ({ cell, row }) => {
+                                            const value = cell.getValue() as string;
+                                            return (
+                                                <div className="flex items-center gap-2">
+                                                    {row.original.featuredAsset && (
+                                                        <img
+                                                            src={row.original.featuredAsset.preview}
+                                                            alt={value}
+                                                            className="w-8 h-8 rounded object-cover"
+                                                        />
+                                                    )}
+                                                    <span className="font-medium">{value}</span>
+                                                </div>
+                                            );
+                                        },
+                                    },
+                                    enabled: {
+                                        header: 'Status',
+                                        cell: ({ cell }) => {
+                                            const value = cell.getValue() as boolean;
+                                            return (
+                                                <Badge variant={value ? 'default' : 'secondary'}>
+                                                    {value ? 'Enabled' : 'Disabled'}
+                                                </Badge>
+                                            );
+                                        },
+                                    },
+                                    slug: {
+                                        header: 'Slug',
+                                        cell: ({ cell }) => {
+                                            const value = cell.getValue() as string;
+                                            return (
+                                                <code className="text-xs bg-muted px-1 py-0.5 rounded">
+                                                    {value}
+                                                </code>
+                                            );
+                                        },
+                                    },
+                                }}
+                                additionalColumns={{
+                                    variantCount: {
+                                        header: 'Variants',
+                                        accessorFn: row => row.variants?.length ?? 0,
+                                        cell: ({ cell }) => {
+                                            const count = cell.getValue() as number;
+                                            return <span className="text-muted-foreground">{count}</span>;
+                                        },
+                                    },
+                                    price: {
+                                        header: 'Price Range',
+                                        accessorFn: row => {
+                                            const variants = row.variants ?? [];
+                                            if (variants.length === 0) return null;
+                                            const prices = variants.map(v => v.price);
+                                            const min = Math.min(...prices);
+                                            const max = Math.max(...prices);
+                                            return { min, max, currency: variants[0].currencyCode };
+                                        },
+                                        cell: ({ cell }) => {
+                                            const value = cell.getValue() as {
+                                                min: number;
+                                                max: number;
+                                                currency: string;
+                                            } | null;
+                                            if (!value) return null;
+                                            if (value.min === value.max) {
+                                                return <Money value={value.min} currency={value.currency} />;
+                                            }
+                                            return (
+                                                <span>
+                                                    <Money value={value.min} currency={value.currency} /> -{' '}
+                                                    <Money value={value.max} currency={value.currency} />
+                                                </span>
+                                            );
+                                        },
+                                        meta: {
+                                            dependencies: ['variants'],
+                                        },
+                                    },
+                                }}
+                                defaultColumnOrder={[
+                                    'name',
+                                    'slug',
+                                    'enabled',
+                                    'variantCount',
+                                    'price',
+                                    'createdAt',
+                                ]}
+                                onSearchTermChange={searchTerm => {
+                                    if (!searchTerm) return {};
+                                    return {
+                                        name: { contains: searchTerm },
+                                    };
+                                }}
+                                page={page}
+                                itemsPerPage={pageSize}
+                                sorting={sorting}
+                                columnFilters={filters}
+                                onPageChange={(_, page, perPage) => {
+                                    setPage(page);
+                                    setPageSize(perPage);
+                                }}
+                                onSortChange={(_, sorting) => {
+                                    setSorting(sorting);
+                                }}
+                                onFilterChange={(_, filters) => {
+                                    setFilters(filters);
+                                }}
+                                facetedFilters={{
+                                    enabled: {
+                                        title: 'Status',
+                                        options: [
+                                            { label: 'Enabled', value: true },
+                                            { label: 'Disabled', value: false },
+                                        ],
+                                    },
+                                }}
+                                rowActions={[
+                                    {
+                                        label: 'Edit',
+                                        onClick: row => console.log('Edit product:', row.original.id),
+                                    },
+                                    {
+                                        label: 'Duplicate',
+                                        onClick: row => console.log('Duplicate product:', row.original.id),
+                                    },
+                                ]}
+                            />
+                        </FullWidthPageBlock>
+                    </PageLayout>
+                </Page>
+            </div>
+        );
+    },
+};

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

@@ -394,17 +394,6 @@ export function PaginatedListDataTable<
         return { ...acc, [field]: direction };
     }, {});
 
-    const filter = columnFilters?.length
-        ? {
-              _and: columnFilters.map(f => {
-                  if (Array.isArray(f.value)) {
-                      return { [f.id]: { in: f.value } };
-                  }
-                  return { [f.id]: f.value };
-              }),
-          }
-        : undefined;
-
     function refetchPaginatedList() {
         queryClient.invalidateQueries({ queryKey });
     }
@@ -438,6 +427,17 @@ export function PaginatedListDataTable<
         }));
     const minimalListQuery = includeOnlySelectedListFields(extendedListQuery, visibleColumns);
 
+    const filter = columnFilters?.length
+        ? {
+              _and: columnFilters.map(f => {
+                  if (Array.isArray(f.value)) {
+                      return { [f.id]: { in: f.value } };
+                  }
+                  return { [f.id]: f.value };
+              }),
+          }
+        : undefined;
+
     const defaultQueryKey = [
         PaginatedListDataTableKey,
         minimalListQuery,
@@ -456,7 +456,7 @@ export function PaginatedListDataTable<
             const mergedFilter = { ...filter, ...searchFilter };
             const variables = {
                 options: {
-                    take: itemsPerPage,
+                    take: Math.min(itemsPerPage, 100),
                     skip: (page - 1) * itemsPerPage,
                     sort,
                     filter: mergedFilter,

package/src/lib/components/shared/permission-guard.stories.tsx

@@ -0,0 +1,46 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { withDescription } from '../../../../.storybook/with-description.js';
+import { PermissionGuard } from './permission-guard.js';
+
+const meta = {
+    title: 'Components/PermissionGuard',
+    component: PermissionGuard,
+    ...withDescription(import.meta.url, './permission-guard.js'),
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof PermissionGuard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => {
+        return (
+            <div className="space-y-6">
+                <div className="space-y-2">
+                    <div className="text-sm font-medium">
+                        Has Permission (ReadCatalog) - Button should be visible
+                    </div>
+                    <PermissionGuard requires={['ReadCatalog']}>
+                        <Button>View Catalog</Button>
+                    </PermissionGuard>
+                </div>
+
+                <div className="space-y-2">
+                    <div className="text-sm font-medium">
+                        No Permission (NonExistentPermission) - Button should be hidden
+                    </div>
+                    <PermissionGuard requires={['NonExistentPermission']}>
+                        <Button variant="destructive">Delete Catalog</Button>
+                    </PermissionGuard>
+                    <div className="text-xs text-muted-foreground">
+                        (The delete button is hidden because user lacks NonExistentPermission permission)
+                    </div>
+                </div>
+            </div>
+        );
+    },
+};

package/src/lib/components/shared/remove-from-channel-bulk-action.tsx

@@ -4,6 +4,7 @@ import { toast } from 'sonner';
 
 import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
 import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { DEFAULT_CHANNEL_CODE } from '@/vdb/constants.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { Trans, useLingui } from '@lingui/react/macro';
@@ -86,6 +87,7 @@ export function RemoveFromChannelBulkAction({
             }
             icon={LayersIcon}
             className="text-warning"
+            disabled={activeChannel.code === DEFAULT_CHANNEL_CODE}
         />
     );
 }

package/src/lib/components/shared/rich-text-editor/responsive-toolbar.tsx

@@ -83,6 +83,10 @@ export function ResponsiveToolbar({ editor, disabled }: Readonly<ResponsiveToolb
         [],
     );
 
+    const canUndo = !!editor?.can().undo();
+    const canRedo = !!editor?.can().redo();
+    const canInsertTable = !!editor?.can().insertTable();
+
     const toolbarItems: ToolbarItem[] = useMemo(() => {
         if (!editor) return [];
 
@@ -272,7 +276,7 @@ export function ResponsiveToolbar({ editor, disabled }: Readonly<ResponsiveToolb
                                 .run()
                         }
                         className={`h-8 px-2 ${editor.isActive('table') ? 'bg-accent' : ''}`}
-                        disabled={disabled || !editor.can().insertTable()}
+                        disabled={disabled || !canInsertTable}
                     >
                         <TableIcon className="h-4 w-4" />
                     </Button>
@@ -290,7 +294,7 @@ export function ResponsiveToolbar({ editor, disabled }: Readonly<ResponsiveToolb
                         variant="ghost"
                         size="sm"
                         onClick={() => editor.chain().focus().undo().run()}
-                        disabled={disabled || !editor.can().undo()}
+                        disabled={disabled || !canUndo}
                         className="h-8 px-2"
                     >
                         <Undo2Icon className="h-4 w-4" />
@@ -309,7 +313,7 @@ export function ResponsiveToolbar({ editor, disabled }: Readonly<ResponsiveToolb
                         variant="ghost"
                         size="sm"
                         onClick={() => editor.chain().focus().redo().run()}
-                        disabled={disabled || !editor.can().redo()}
+                        disabled={disabled || !canRedo}
                         className="h-8 px-2"
                     >
                         <Redo2Icon className="h-4 w-4" />
@@ -317,7 +321,7 @@ export function ResponsiveToolbar({ editor, disabled }: Readonly<ResponsiveToolb
                 ),
             },
         ];
-    }, [editor, disabled, linkDialogOpen, imageDialogOpen]);
+    }, [editor, disabled, linkDialogOpen, imageDialogOpen, canUndo, canRedo, canInsertTable]);
 
     useEffect(() => {
         const calculateVisibleItems = () => {

package/src/lib/components/shared/rich-text-editor/rich-text-editor.tsx

@@ -5,6 +5,7 @@ import { TextStyle } from '@tiptap/extension-text-style';
 import { EditorContent, useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import { useLayoutEffect, useRef } from 'react';
+
 import { ResponsiveToolbar } from './responsive-toolbar.js';
 import { TableDeleteMenu } from './table-delete-menu.js';
 import { TableEditIcons } from './table-edit-icons.js';