@vendure/dashboard 3.5.0-minor-202510071456 → 3.5.0-minor-202510201346

package/dist/plugin/dashboard.plugin.js

@@ -151,7 +151,7 @@ let DashboardPlugin = DashboardPlugin_1 = class DashboardPlugin {
     createStaticServer(dashboardPath) {
         const limiter = (0, express_rate_limit_1.rateLimit)({
             windowMs: 60 * 1000,
-            limit: process.env.NODE_ENV === 'production' ? 500 : 2000,
+            limit: process.env.NODE_ENV === 'production' ? 500 : 10000,
             standardHeaders: true,
             legacyHeaders: false,
         });

package/dist/vite/utils/ast-utils.spec.js

@@ -2,7 +2,7 @@ import ts from 'typescript';
 import { describe, expect, it } from 'vitest';
 import { findConfigExport } from './ast-utils.js';
 describe('findConfigExport', () => {
-    it('should return undefined when no VendureConfig export is found', () => {
+    it('should return undefined when no VendureConfig export is found', { timeout: 30000 }, () => {
         const sourceText = `
             export const notConfig = {
                 some: 'value'
@@ -12,7 +12,7 @@ describe('findConfigExport', () => {
         const result = findConfigExport(sourceFile);
         expect(result).toBeUndefined();
     });
-    it('should find exported variable with VendureConfig type', () => {
+    it('should find exported variable with VendureConfig type', { timeout: 30000 }, () => {
         const sourceText = `
             import { VendureConfig } from '@vendure/core';
 
@@ -26,7 +26,7 @@ describe('findConfigExport', () => {
         const result = findConfigExport(sourceFile);
         expect(result).toBe('config');
     });
-    it('should find exported variable with VendureConfig type among other exports', () => {
+    it('should find exported variable with VendureConfig type among other exports', { timeout: 30000 }, () => {
         const sourceText = `
             import { VendureConfig } from '@vendure/core';
 

package/dist/vite/vite-plugin-hmr.d.ts

@@ -0,0 +1,8 @@
+import { Plugin } from 'vite';
+/**
+ * @description
+ * This plugin enables kind-of HMR for when dashboard extension files change.
+ * It is not true HMR because it triggers a page reload. Making real HMR work is very
+ * tricky in this case due to the way we load extension files via virtual modules.
+ */
+export declare function hmrPlugin(): Plugin;

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

@@ -0,0 +1,34 @@
+/**
+ * @description
+ * This plugin enables kind-of HMR for when dashboard extension files change.
+ * It is not true HMR because it triggers a page reload. Making real HMR work is very
+ * tricky in this case due to the way we load extension files via virtual modules.
+ */
+export function hmrPlugin() {
+    let viteRoot;
+    return {
+        name: 'vendure:hmr',
+        configResolved(config) {
+            viteRoot = config.root;
+        },
+        handleHotUpdate({ server, modules, timestamp, file }) {
+            const invalidatedModules = new Set();
+            for (const mod of modules) {
+                server.moduleGraph.invalidateModule(mod, invalidatedModules, timestamp, true);
+                // Check if this is a file outside the Vite root (e.g., dashboard extensions)
+                const isOutsideRoot = mod.file && !mod.file.startsWith(viteRoot);
+                if (isOutsideRoot) {
+                    // For files outside root, trigger a full page reload
+                    // This ensures all extension code is fresh
+                    server.ws.send({
+                        type: 'full-reload',
+                        path: '*',
+                    });
+                    return [];
+                }
+            }
+            // Let Vite handle normal HMR for files inside root
+            return undefined;
+        },
+    };
+}

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

@@ -7,16 +7,16 @@ const defaultVariables = {
         popover: 'oklch(1.0000 0 0)',
         'popover-foreground': 'oklch(0.2103 0.0059 285.8852)',
         primary: 'oklch(0.7613 0.1503 231.1314)',
-        'primary-foreground': 'oklch(0.1408 0.0044 285.8229)',
+        'primary-foreground': 'oklch(0.261 0.043 218.379)',
         secondary: 'oklch(0.9674 0.0013 286.3752)',
         'secondary-foreground': 'oklch(0.2103 0.0059 285.8852)',
         muted: 'oklch(0.9674 0.0013 286.3752)',
         'muted-foreground': 'oklch(0.5517 0.0138 285.9385)',
         accent: 'oklch(0.9674 0.0013 286.3752)',
         'accent-foreground': 'oklch(0.2103 0.0059 285.8852)',
-        destructive: 'oklch(0.5771 0.2152 27.3250)',
+        destructive: 'oklch(0.505 0.188 27.325)',
         'destructive-foreground': 'oklch(0.9851 0 0)',
-        success: 'hsl(100, 81%, 35%)',
+        success: 'hsl(99deg 67.25% 33.2%)',
         'success-foreground': 'hsl(0 0% 98%)',
         'dev-mode': 'hsl(204, 76%, 62%)',
         'dev-mode-foreground': 'hsl(0 0% 98%)',
@@ -58,9 +58,9 @@ const defaultVariables = {
         'muted-foreground': 'oklch(0.7118 0.0129 286.0665)',
         accent: 'oklch(0.2739 0.0055 286.0326)',
         'accent-foreground': 'oklch(0.9851 0 0)',
-        destructive: 'oklch(0.6368 0.2078 25.3313)',
+        destructive: 'oklch(0.4 0.15 27.11)',
         'destructive-foreground': 'oklch(0.9851 0 0)',
-        success: 'hsl(100, 100%, 35%)',
+        success: 'hsl(100 76.42% 22.21%)',
         'success-foreground': 'hsl(0 0% 98%)',
         'dev-mode': 'hsl(204, 86%, 53%)',
         'dev-mode-foreground': 'hsl(0 0% 98%)',
@@ -72,7 +72,7 @@ const defaultVariables = {
         'chart-3': 'oklch(0.6450 0.2154 16.4393)',
         'chart-4': 'oklch(0.7686 0.1647 70.0804)',
         'chart-5': 'oklch(0.7227 0.1920 149.5793)',
-        sidebar: 'oklch(0.1408 0.0044 285.8229)',
+        sidebar: 'oklch(0.2 0 0)',
         'sidebar-foreground': 'oklch(0.9851 0 0)',
         'sidebar-primary': 'oklch(0.7613 0.1503 231.1314)',
         'sidebar-primary-foreground': 'oklch(0.1408 0.0044 285.8229)',

package/dist/vite/vite-plugin-transform-index.js

@@ -17,7 +17,12 @@ export function transformIndexHtmlPlugin() {
         },
         // Only apply this plugin during the build phase
         apply: 'build',
-        transformIndexHtml(html) {
+        transformIndexHtml(html, ctx) {
+            // Don't transform Storybook HTML files
+            if (ctx.filename &&
+                (ctx.filename.includes('iframe.html') || ctx.filename.includes('storybook'))) {
+                return html;
+            }
             if (config.base && config.base !== '/') {
                 // Remove the base path from hrefs and srcs
                 const basePath = config.base.replace(/\/$/, ''); // Remove trailing slash

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

@@ -73,11 +73,38 @@ export type VitePluginVendureDashboardOptions = {
      * the location based on the location of the `@vendure/core` package.
      */
     pluginPackageScanner?: PackageScannerConfig;
+    /**
+     * @description
+     * Allows you to selectively disable individual plugins.
+     * @example
+     * ```ts
+     * vendureDashboardPlugin({
+     *   vendureConfigPath: './config.ts',
+     *   disablePlugins: {
+     *     react: true,
+     *     lingui: true,
+     *   }
+     * })
+     * ```
+     */
+    disablePlugins?: {
+        tanstackRouter?: boolean;
+        react?: boolean;
+        lingui?: boolean;
+        themeVariables?: boolean;
+        tailwindSource?: boolean;
+        tailwindcss?: boolean;
+        configLoader?: boolean;
+        viteConfig?: boolean;
+        adminApiSchema?: boolean;
+        dashboardMetadata?: boolean;
+        uiConfig?: boolean;
+        gqlTada?: boolean;
+        transformIndexHtml?: boolean;
+        translations?: boolean;
+        hmr?: boolean;
+    };
 } & UiConfigPluginOptions & ThemeVariablesPluginOptions;
-/**
- * @description
- * This is a Vite plugin which configures a set of plugins required to build the Vendure Dashboard.
- */
 export declare function vendureDashboardPlugin(options: VitePluginVendureDashboardOptions): PluginOption[];
 /**
  * Get the normalized path to the Vendure config file given either a string or URL.

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

@@ -8,60 +8,115 @@ 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 { hmrPlugin } from './vite-plugin-hmr.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 { translationsPlugin } from './vite-plugin-translations.js';
 import { uiConfigPlugin } from './vite-plugin-ui-config.js';
-/**
- * @description
- * This is a Vite plugin which configures a set of plugins required to build the Vendure Dashboard.
- */
 export function vendureDashboardPlugin(options) {
-    var _a;
+    var _a, _b;
     const tempDir = (_a = options.tempCompilationDir) !== null && _a !== void 0 ? _a : path.join(import.meta.dirname, './.vendure-dashboard-temp');
     const normalizedVendureConfigPath = getNormalizedVendureConfigPath(options.vendureConfigPath);
     const packageRoot = getDashboardPackageRoot();
     const linguiConfigPath = path.join(packageRoot, 'lingui.config.js');
+    const disabled = (_b = options.disablePlugins) !== null && _b !== void 0 ? _b : {};
     if (process.env.IS_LOCAL_DEV !== 'true') {
         process.env.LINGUI_CONFIG = linguiConfigPath;
     }
-    return [
-        ...(options.disableTansStackRouterPlugin
-            ? []
-            : [
+    const pluginMap = [
+        {
+            key: 'tanstackRouter',
+            plugin: () => !options.disableTansStackRouterPlugin &&
                 tanstackRouter({
                     autoCodeSplitting: true,
                     routeFileIgnorePattern: '.graphql.ts|components|hooks|utils',
                     routesDirectory: path.join(packageRoot, 'src/app/routes'),
                     generatedRouteTree: path.join(packageRoot, 'src/app/routeTree.gen.ts'),
                 }),
-            ]),
-        react({
-            plugins: [['@lingui/swc-plugin', {}]],
-        }),
-        lingui({}),
-        themeVariablesPlugin({ theme: options.theme }),
-        dashboardTailwindSourcePlugin(),
-        tailwindcss(),
-        configLoaderPlugin({
-            vendureConfigPath: normalizedVendureConfigPath,
-            outputPath: tempDir,
-            pathAdapter: options.pathAdapter,
-            pluginPackageScanner: options.pluginPackageScanner,
-        }),
-        viteConfigPlugin({ packageRoot }),
-        adminApiSchemaPlugin(),
-        dashboardMetadataPlugin(),
-        uiConfigPlugin(options),
-        ...(options.gqlOutputPath
-            ? [gqlTadaPlugin({ gqlTadaOutputPath: options.gqlOutputPath, tempDir, packageRoot })]
-            : []),
-        transformIndexHtmlPlugin(),
-        translationsPlugin({
-            packageRoot,
-        }),
+        },
+        {
+            key: 'react',
+            plugin: () => react({
+                plugins: [['@lingui/swc-plugin', {}]],
+            }),
+        },
+        {
+            key: 'lingui',
+            plugin: () => lingui({}),
+        },
+        {
+            key: 'themeVariables',
+            plugin: () => themeVariablesPlugin({ theme: options.theme }),
+        },
+        {
+            key: 'tailwindSource',
+            plugin: () => dashboardTailwindSourcePlugin(),
+        },
+        {
+            key: 'tailwindcss',
+            plugin: () => tailwindcss(),
+        },
+        {
+            key: 'configLoader',
+            plugin: () => configLoaderPlugin({
+                vendureConfigPath: normalizedVendureConfigPath,
+                outputPath: tempDir,
+                pathAdapter: options.pathAdapter,
+                pluginPackageScanner: options.pluginPackageScanner,
+            }),
+        },
+        {
+            key: 'viteConfig',
+            plugin: () => viteConfigPlugin({ packageRoot }),
+        },
+        {
+            key: 'adminApiSchema',
+            plugin: () => adminApiSchemaPlugin(),
+        },
+        {
+            key: 'dashboardMetadata',
+            plugin: () => dashboardMetadataPlugin(),
+        },
+        {
+            key: 'uiConfig',
+            plugin: () => uiConfigPlugin(options),
+        },
+        {
+            key: 'gqlTada',
+            plugin: () => options.gqlOutputPath &&
+                gqlTadaPlugin({ gqlTadaOutputPath: options.gqlOutputPath, tempDir, packageRoot }),
+        },
+        {
+            key: 'transformIndexHtml',
+            plugin: () => transformIndexHtmlPlugin(),
+        },
+        {
+            key: 'translations',
+            plugin: () => translationsPlugin({
+                packageRoot,
+            }),
+        },
+        {
+            key: 'hmr',
+            plugin: () => hmrPlugin(),
+        },
     ];
+    const plugins = [];
+    for (const entry of pluginMap) {
+        if (!disabled[entry.key]) {
+            const plugin = entry.plugin();
+            if (plugin) {
+                if (Array.isArray(plugin)) {
+                    plugins.push(...plugin);
+                }
+                else {
+                    plugins.push(plugin);
+                }
+            }
+        }
+    }
+    return plugins;
 }
 /**
  * @description

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vendure/dashboard",
   "private": false,
-  "version": "3.5.0-minor-202510071456",
+  "version": "3.5.0-minor-202510201346",
   "type": "module",
   "repository": {
     "type": "git",
@@ -24,7 +24,10 @@
     "preview": "vite preview",
     "generate-index": "node scripts/generate-index.js",
     "i18n:extract": "lingui extract && node ./scripts/translate/i18n-tool.js extract",
-    "i18n:apply": "node ./scripts/translate/i18n-tool.js apply"
+    "i18n:apply": "node ./scripts/translate/i18n-tool.js apply",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "storybook:deploy": "npm run build --prefix ../common && npm run build --prefix ../core && npm run build:vite && storybook build"
   },
   "module": "./src/lib/index.ts",
   "main": "./src/lib/index.ts",
@@ -146,19 +149,28 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",
+    "@storybook/addon-a11y": "^10.0.0-beta.9",
+    "@storybook/addon-docs": "^10.0.0-beta.9",
+    "@storybook/addon-vitest": "^10.0.0-beta.9",
+    "@storybook/react-vite": "^10.0.0-beta.9",
     "@types/node": "^22.13.4",
-    "@vendure/common": "^3.5.0-minor-202510071456",
-    "@vendure/core": "^3.5.0-minor-202510071456",
+    "@vendure/common": "^3.5.0-minor-202510201346",
+    "@vendure/core": "^3.5.0-minor-202510201346",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
     "eslint": "^9.19.0",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.18",
+    "eslint-plugin-storybook": "^10.0.0-beta.9",
     "globals": "^15.14.0",
+    "playwright": "^1.55.1",
+    "storybook": "^10.0.0-beta.9",
     "vite-plugin-dts": "^4.5.4"
   },
   "optionalDependencies": {
     "lightningcss-linux-arm64-musl": "^1.29.3",
     "lightningcss-linux-x64-musl": "^1.29.1"
   },
-  "gitHead": "a0d7f3f10de46e0ab1825b412baf42093dbd9ebf"
+  "gitHead": "6701c9ee1a7f79763fc710486a60d6fd5529c16b"
 }

package/src/app/app-providers.tsx

@@ -1,3 +1,4 @@
+import { AlertsProvider } from '@/vdb/providers/alerts-provider.js';
 import { AuthProvider } from '@/vdb/providers/auth.js';
 import { ChannelProvider } from '@/vdb/providers/channel-provider.js';
 import { I18nProvider } from '@/vdb/providers/i18n-provider.js';
@@ -17,7 +18,9 @@ export function AppProviders({ children }: { children: React.ReactNode }) {
                     <ThemeProvider defaultTheme="system">
                         <AuthProvider>
                             <ServerConfigProvider>
-                                <ChannelProvider>{children}</ChannelProvider>
+                                <ChannelProvider>
+                                    <AlertsProvider>{children}</AlertsProvider>
+                                </ChannelProvider>
                             </ServerConfigProvider>
                         </AuthProvider>
                     </ThemeProvider>

package/src/app/common/map-faceted-filter-fields.ts

@@ -0,0 +1,21 @@
+/**
+ * Maps filter fields to their corresponding ID fields in faceted filters.
+ * For example, transforms { category: '5' } to { categoryId: { eq: '5' } }
+ *
+ * @param facetedFilters - Array of filter objects to transform
+ * @param fieldMapping - Record mapping source field names to target field names
+ */
+export function mapFacetedFilterFields(
+    facetedFilters: Array<Record<string, any>>,
+    fieldMapping: Record<string, string>,
+) {
+    for (const [index, filter] of Object.entries(facetedFilters)) {
+        for (const [sourceField, targetField] of Object.entries(fieldMapping)) {
+            if (filter[sourceField]) {
+                facetedFilters[index as unknown as number] = {
+                    [targetField]: filter[sourceField],
+                };
+            }
+        }
+    }
+}

package/src/app/main.tsx

@@ -38,7 +38,9 @@ const routerOptions: RouterOptions<AnyRoute, any> = {
         auth: undefined!, // This will be set after we wrap the app in an AuthProvider
         queryClient,
     },
-    defaultErrorComponent: ({ error }: { error: Error }) => <div>Uh Oh!!! {error.message}</div>,
+    defaultErrorComponent: ({ error }: { error: Error }) => (
+        <div className="text-destructive p-6">An error occurred: {error.message}</div>
+    ),
 };
 
 // Create a type-only router instance for TypeScript type registration

package/src/app/routes/_authenticated/_administrators/administrators.graphql.ts

@@ -29,8 +29,8 @@ export const administratorItemFragment = graphql(`
 
 export const administratorListDocument = graphql(
     `
-        query AdministratorList {
-            administrators {
+        query AdministratorList($options: AdministratorListOptions) {
+            administrators(options: $options) {
                 items {
                     ...AdministratorItem
                 }

package/src/app/routes/_authenticated/_administrators/administrators.tsx

@@ -24,10 +24,20 @@ function AdministratorListPage() {
             listQuery={administratorListDocument}
             route={Route}
             onSearchTermChange={searchTerm => {
+                return searchTerm
+                    ? {
+                          firstName: { contains: searchTerm },
+                          lastName: { contains: searchTerm },
+                          emailAddress: { contains: searchTerm },
+                      }
+                    : {};
+            }}
+            transformVariables={variables => {
                 return {
-                    firstName: { contains: searchTerm },
-                    lastName: { contains: searchTerm },
-                    emailAddress: { contains: searchTerm },
+                    options: {
+                        ...variables.options,
+                        filterOperator: 'OR',
+                    },
                 };
             }}
             additionalColumns={{

package/src/app/routes/_authenticated/_administrators/administrators_.$id.tsx

@@ -75,11 +75,9 @@ function AdministratorDetailPage() {
         params: { id: params.id },
         onSuccess: async data => {
             toast(
-                i18n.t(
-                    creatingNewEntity
-                        ? 'Successfully created administrator'
-                        : 'Successfully updated administrator',
-                ),
+                creatingNewEntity
+                    ? t`Successfully created administrator`
+                    : t`Successfully updated administrator`,
             );
             resetForm();
             if (creatingNewEntity) {
@@ -87,14 +85,9 @@ function AdministratorDetailPage() {
             }
         },
         onError: err => {
-            toast(
-                i18n.t(
-                    creatingNewEntity ? 'Failed to create administrator' : 'Failed to update administrator',
-                ),
-                {
-                    description: err instanceof Error ? err.message : 'Unknown error',
-                },
-            );
+            toast(creatingNewEntity ? t`Failed to create administrator` : t`Failed to update administrator`, {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
         },
     });
 

package/src/app/routes/_authenticated/_administrators/components/role-permissions-display.tsx

@@ -29,7 +29,7 @@ interface RolePermissionsDisplayProps {
 }
 
 export function RolePermissionsDisplay({ value = [] }: Readonly<RolePermissionsDisplayProps>) {
-    const { t } = useLingui();
+    const { i18n } = useLingui();
     const groupedPermissions = useGroupedPermissions();
 
     const { data } = useQuery({

package/src/app/routes/_authenticated/_assets/assets.tsx

@@ -1,15 +1,29 @@
 import { AssetGallery } from '@/vdb/components/shared/asset/asset-gallery.js';
 import { Page, PageBlock, PageTitle } from '@/vdb/framework/layout-engine/page-layout.js';
 import { Trans } from '@lingui/react/macro';
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { DeleteAssetsBulkAction } from './components/asset-bulk-actions.js';
 
 export const Route = createFileRoute('/_authenticated/_assets/assets')({
     component: RouteComponent,
     loader: () => ({ breadcrumb: () => <Trans>Assets</Trans> }),
+    validateSearch: (search: Record<string, unknown>) => {
+        return {
+            perPage: (search.perPage as number) || 24,
+        };
+    },
 });
 
 function RouteComponent() {
+    const navigate = useNavigate({ from: Route.fullPath });
+    const { perPage } = Route.useSearch();
+
+    const handlePageSizeChange = (newPageSize: number) => {
+        navigate({
+            search: (prev: any) => ({ ...prev, perPage: newPageSize }),
+        });
+    };
+
     return (
         <Page pageId="asset-list">
             <PageTitle>
@@ -19,6 +33,8 @@ function RouteComponent() {
                 <AssetGallery
                     selectable={true}
                     multiSelect="manual"
+                    pageSize={perPage}
+                    onPageSizeChange={handlePageSizeChange}
                     bulkActions={[
                         {
                             order: 10,

package/src/app/routes/_authenticated/_collections/collections.graphql.ts

@@ -20,6 +20,7 @@ export const collectionListDocument = graphql(
                     }
                     name
                     slug
+                    description
                     breadcrumbs {
                         id
                         name

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

@@ -13,6 +13,7 @@ import { ResultOf } from 'gql.tada';
 import { Folder, FolderOpen, PlusIcon } from 'lucide-react';
 import { useState } from 'react';
 
+import { RichTextDescriptionCell } from '@/vdb/components/shared/table-cell/order-table-cell-components.js';
 import { Badge } from '@/vdb/components/ui/badge.js';
 import { collectionListDocument } from './collections.graphql.js';
 import {
@@ -123,6 +124,9 @@ function CollectionListPage() {
                             );
                         },
                     },
+                    description: {
+                        cell: RichTextDescriptionCell,
+                    },
                     breadcrumbs: {
                         cell: ({ cell }) => {
                             const value = cell.getValue();
@@ -204,6 +208,7 @@ function CollectionListPage() {
                     position: false,
                     parentId: false,
                     children: false,
+                    description: false,
                 }}
                 onSearchTermChange={searchTerm => {
                     return {

package/src/app/routes/_authenticated/_collections/components/collection-bulk-actions.tsx

@@ -68,7 +68,6 @@ export const DuplicateCollectionsBulkAction: BulkActionComponent<any> = ({ selec
         <DuplicateBulkAction
             entityType="Collection"
             duplicatorCode="collection-duplicator"
-            duplicatorArguments={[]}
             requiredPermissions={['UpdateCatalog', 'UpdateCollection']}
             entityName="Collection"
             selection={selection}

package/src/app/routes/_authenticated/_customers/customers.tsx

@@ -51,11 +51,15 @@ function CustomerListPage() {
                 },
                 groups: {
                     cell: ({ row }) => {
-                        return row.original.groups?.map(g => (
-                            <Badge variant="secondary" key={g.id}>
-                                {g.name}
-                            </Badge>
-                        ));
+                        return (
+                            <div className="flex flex-wrap gap-1">
+                                {row.original.groups?.map(g => (
+                                    <Badge variant="secondary" key={g.id}>
+                                        {g.name}
+                                    </Badge>
+                                ))}
+                            </div>
+                        );
                     },
                 },
             }}

package/src/app/routes/_authenticated/_facets/components/facet-bulk-actions.tsx

@@ -90,12 +90,6 @@ export const DuplicateFacetsBulkAction: BulkActionComponent<any> = ({ selection,
         <DuplicateBulkAction
             entityType="Facet"
             duplicatorCode="facet-duplicator"
-            duplicatorArguments={[
-                {
-                    name: 'includeValues',
-                    value: 'true',
-                },
-            ]}
             requiredPermissions={['UpdateCatalog', 'UpdateFacet']}
             entityName="Facet"
             selection={selection}

package/src/app/routes/_authenticated/_facets/components/facet-value-bulk-actions.tsx

@@ -0,0 +1,16 @@
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+
+import { deleteFacetValuesDocument } from '../facets.graphql.js';
+
+export const DeleteFacetValuesBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteFacetValuesDocument}
+            entityName="facets"
+            requiredPermissions={['DeleteCatalog', 'DeleteFacet']}
+            selection={selection}
+            table={table}
+        />
+    );
+};