@vendure/dashboard 3.3.6-master-202507011151 → 3.3.6-master-202507020234

package/package.json

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

package/src/app/common/delete-bulk-action.tsx

@@ -0,0 +1,147 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { TrashIcon } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
+import { api } from '@/graphql/api.js';
+import { getMutationName, usePaginatedList } from '@/index.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+
+interface DeleteBulkActionProps {
+    /** The GraphQL mutation document to execute */
+    mutationDocument: any;
+    /** The entity name for localization (e.g., "products", "administrators") */
+    entityName: string;
+    /** The required permissions for this action */
+    requiredPermissions: string[];
+    /** Optional callback for additional cleanup after successful deletion */
+    onSuccess?: () => void;
+    /** Optional query keys to invalidate after successful deletion */
+    invalidateQueries?: string[];
+    /** The selected items to delete */
+    selection: any[];
+    /** The table instance */
+    table: any;
+}
+
+/**
+ * A reusable delete bulk action component that can be used across all bulk action files.
+ *
+ * This component handles the common pattern of deleting multiple entities:
+ * - Executes the provided GraphQL mutation
+ * - Shows success/error toasts with localized messages
+ * - Refetches the paginated list
+ * - Resets table selection
+ * - Optionally invalidates additional queries
+ * - Optionally calls additional success callbacks
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * export const DeleteProductsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+ *     return (
+ *         <DeleteBulkAction
+ *             mutationDocument={deleteProductsDocument}
+ *             entityName="products"
+ *             requiredPermissions={['DeleteCatalog', 'DeleteProduct']}
+ *             selection={selection}
+ *             table={table}
+ *         />
+ *     );
+ * };
+ *
+ * // With additional cleanup
+ * export const DeleteCollectionsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+ *     return (
+ *         <DeleteBulkAction
+ *             mutationDocument={deleteCollectionsDocument}
+ *             entityName="collections"
+ *             requiredPermissions={['DeleteCatalog', 'DeleteCollection']}
+ *             invalidateQueries={['childCollections']}
+ *             onSuccess={() => {
+ *                 // Additional cleanup logic
+ *             }}
+ *             selection={selection}
+ *             table={table}
+ *         />
+ *     );
+ * };
+ * ```
+ */
+export function DeleteBulkAction({
+    mutationDocument,
+    entityName,
+    requiredPermissions,
+    onSuccess,
+    invalidateQueries = [],
+    selection,
+    table,
+}: Readonly<DeleteBulkActionProps>) {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { i18n } = useLingui();
+    const queryClient = useQueryClient();
+
+    const { mutate } = useMutation({
+        mutationFn: api.mutate(mutationDocument),
+        onSuccess: (result: any) => {
+            let deleted = 0;
+            let failed = 0;
+            const errors: string[] = [];
+
+            // Get the mutation result field name from the document
+            const mutationResultFieldName = getMutationName(mutationDocument);
+            const deleteResults = result[mutationResultFieldName];
+
+            for (const item of deleteResults) {
+                if (item.result === 'DELETED') {
+                    deleted++;
+                } else {
+                    failed++;
+                    if (item.message) {
+                        errors.push(item.message);
+                    }
+                }
+            }
+
+            if (0 < deleted) {
+                toast.success(i18n.t(`Deleted ${deleted} ${entityName}`));
+            }
+            if (0 < failed) {
+                const errorMessage =
+                    errors.length > 0
+                        ? i18n.t(`Failed to delete ${failed} ${entityName}: ${errors.join(', ')}`)
+                        : i18n.t(`Failed to delete ${failed} ${entityName}`);
+                toast.error(errorMessage);
+            }
+
+            refetchPaginatedList();
+            table.resetRowSelection();
+
+            // Invalidate additional queries if specified
+            invalidateQueries.forEach(queryKey => {
+                queryClient.invalidateQueries({ queryKey: [queryKey] });
+            });
+
+            // Call additional success callback if provided
+            onSuccess?.();
+        },
+        onError: () => {
+            toast.error(`Failed to delete ${selection.length} ${entityName}`);
+        },
+    });
+
+    return (
+        <DataTableBulkActionItem
+            requiresPermission={requiredPermissions}
+            onClick={() => mutate({ ids: selection.map(s => s.id) })}
+            label={<Trans>Delete</Trans>}
+            confirmationText={
+                <Trans>
+                    Are you sure you want to delete {selection.length} {entityName}?
+                </Trans>
+            }
+            icon={TrashIcon}
+            className="text-destructive"
+        />
+    );
+}

package/src/app/common/duplicate-bulk-action.tsx

@@ -10,7 +10,7 @@ import { usePaginatedList } from '@/index.js';
 import { Trans, useLingui } from '@/lib/trans.js';
 
 interface DuplicateBulkActionProps {
-    entityType: 'Product' | 'Collection';
+    entityType: 'Product' | 'Collection' | 'Facet' | 'Promotion';
     duplicatorCode: string;
     duplicatorArguments?: Array<{ name: string; value: string }>;
     requiredPermissions: string[];

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

@@ -77,3 +77,12 @@ export const deleteAdministratorDocument = graphql(`
         }
     }
 `);
+
+export const deleteAdministratorsDocument = graphql(`
+    mutation DeleteAdministrators($ids: [ID!]!) {
+        deleteAdministrators(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

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

@@ -9,6 +9,7 @@ import { Trans } from '@/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { administratorListDocument, deleteAdministratorDocument } from './administrators.graphql.js';
+import { DeleteAdministratorsBulkAction } from './components/administrator-bulk-actions.js';
 
 export const Route = createFileRoute('/_authenticated/_administrators/administrators')({
     component: AdministratorListPage,
@@ -70,6 +71,12 @@ function AdministratorListPage() {
                 emailAddress: true,
             }}
             defaultColumnOrder={['name', 'emailAddress', 'roles']}
+            bulkActions={[
+                {
+                    component: DeleteAdministratorsBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateAdministrator']}>

package/src/app/routes/_authenticated/_administrators/components/administrator-bulk-actions.tsx

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteAdministratorsDocument } from '../administrators.graphql.js';
+
+export const DeleteAdministratorsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteAdministratorsDocument}
+            entityName="administrators"
+            requiredPermissions={['DeleteAdministrator']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_assets/assets.graphql.ts

@@ -24,3 +24,14 @@ export const assetUpdateDocument = graphql(`
         }
     }
 `);
+
+export const deleteAssetsDocument = graphql(`
+    mutation DeleteAssets($input: DeleteAssetsInput!) {
+        deleteAssets(input: $input) {
+            ... on DeletionResponse {
+                result
+                message
+            }
+        }
+    }
+`);

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

@@ -1,7 +1,8 @@
 import { AssetGallery } from '@/components/shared/asset/asset-gallery.js';
-import { Page, PageTitle, PageActionBar } from '@/framework/layout-engine/page-layout.js';
+import { Page, PageBlock, PageTitle } from '@/framework/layout-engine/page-layout.js';
 import { Trans } from '@/lib/trans.js';
 import { createFileRoute } from '@tanstack/react-router';
+import { DeleteAssetsBulkAction } from './components/asset-bulk-actions.js';
 
 export const Route = createFileRoute('/_authenticated/_assets/assets')({
     component: RouteComponent,
@@ -13,7 +14,14 @@ function RouteComponent() {
             <PageTitle>
                 <Trans>Assets</Trans>
             </PageTitle>
-            <AssetGallery selectable={true} multiSelect='manual' />
+            <PageBlock blockId="asset-gallery" column="main">
+                <AssetGallery selectable={true} multiSelect="manual" bulkActions={[{
+                        order: 10,
+                        component: DeleteAssetsBulkAction,
+                    },
+                ]}
+                />
+            </PageBlock>
         </Page>
     );
 }

package/src/app/routes/_authenticated/_assets/components/asset-bulk-actions.tsx

@@ -0,0 +1,45 @@
+import { useMutation } from '@tanstack/react-query';
+import { TrashIcon } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
+import { api } from '@/graphql/api.js';
+import { AssetFragment } from '@/graphql/fragments.js';
+import { ResultOf } from '@/graphql/graphql.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { deleteAssetsDocument } from '../assets.graphql.js';
+
+export const DeleteAssetsBulkAction = ({
+    selection,
+    refetch,
+}: {
+    selection: AssetFragment[];
+    refetch: () => void;
+}) => {
+    const { i18n } = useLingui();
+    const { mutate } = useMutation({
+        mutationFn: api.mutate(deleteAssetsDocument),
+        onSuccess: (result: ResultOf<typeof deleteAssetsDocument>) => {
+            if (result.deleteAssets.result === 'DELETED') {
+                toast.success(i18n.t(`Deleted ${selection.length} assets`));
+            } else {
+                toast.error(i18n.t(`Failed to delete assets: ${result.deleteAssets.message}`));
+            }
+            refetch();
+        },
+        onError: () => {
+            toast.error(`Failed to delete ${selection.length} assets`);
+        },
+    });
+
+    return (
+        <DataTableBulkActionItem
+            requiresPermission={['DeleteCatalog', 'DeleteAsset']}
+            onClick={() => mutate({ input: { assetIds: selection.map(s => s.id) } })}
+            label={<Trans>Delete</Trans>}
+            confirmationText={<Trans>Are you sure you want to delete {selection.length} assets?</Trans>}
+            icon={TrashIcon}
+            className="text-destructive"
+        />
+    );
+};

package/src/app/routes/_authenticated/_channels/channels.graphql.ts

@@ -91,3 +91,12 @@ export const deleteChannelDocument = graphql(`
         }
     }
 `);
+
+export const deleteChannelsDocument = graphql(`
+    mutation DeleteChannels($ids: [ID!]!) {
+        deleteChannels(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_channels/channels.tsx

@@ -9,6 +9,7 @@ import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { channelListQuery, deleteChannelDocument } from './channels.graphql.js';
 import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { DeleteChannelsBulkAction } from './components/channel-bulk-actions.js';
 
 export const Route = createFileRoute('/_authenticated/_channels/channels')({
     component: ChannelListPage,
@@ -62,6 +63,12 @@ function ChannelListPage() {
                     }
                 },
             }}
+            bulkActions={[
+                {
+                    component: DeleteChannelsBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateChannel']}>

package/src/app/routes/_authenticated/_channels/components/channel-bulk-actions.tsx

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteChannelsDocument } from '../channels.graphql.js';
+
+export const DeleteChannelsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteChannelsDocument}
+            entityName="channels"
+            requiredPermissions={['DeleteChannel']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

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

@@ -1,99 +1,57 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { LayersIcon, TrashIcon } from 'lucide-react';
-import { useState } from 'react';
-import { toast } from 'sonner';
+import { useQueryClient } from '@tanstack/react-query';
 
-import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
+import { AssignToChannelBulkAction } from '@/components/shared/assign-to-channel-bulk-action.js';
+import { RemoveFromChannelBulkAction } from '@/components/shared/remove-from-channel-bulk-action.js';
 import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
 import { api } from '@/graphql/api.js';
-import { ResultOf, useChannel, usePaginatedList } from '@/index.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+import { useChannel } from '@/index.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
 import {
     assignCollectionToChannelDocument,
     deleteCollectionsDocument,
     removeCollectionFromChannelDocument,
 } from '../collections.graphql.js';
-import { AssignCollectionsToChannelDialog } from './assign-collections-to-channel-dialog.js';
 
 export const AssignCollectionsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    const { refetchPaginatedList } = usePaginatedList();
-    const { channels } = useChannel();
-    const [dialogOpen, setDialogOpen] = useState(false);
     const queryClient = useQueryClient();
 
-    if (channels.length < 2) {
-        return null;
-    }
-
-    const handleSuccess = () => {
-        refetchPaginatedList();
-        table.resetRowSelection();
-        queryClient.invalidateQueries({ queryKey: ['childCollections'] });
-    };
-
     return (
-        <>
-            <DataTableBulkActionItem
-                requiresPermission={['UpdateCatalog', 'UpdateCollection']}
-                onClick={() => setDialogOpen(true)}
-                label={<Trans>Assign to channel</Trans>}
-                icon={LayersIcon}
-            />
-            <AssignCollectionsToChannelDialog
-                open={dialogOpen}
-                onOpenChange={setDialogOpen}
-                entityIds={selection.map(s => s.id)}
-                mutationFn={api.mutate(assignCollectionToChannelDocument)}
-                onSuccess={handleSuccess}
-            />
-        </>
+        <AssignToChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="collections"
+            mutationFn={api.mutate(assignCollectionToChannelDocument)}
+            requiredPermissions={['UpdateCatalog', 'UpdateCollection']}
+            buildInput={(channelId: string) => ({
+                collectionIds: selection.map(s => s.id),
+                channelId,
+            })}
+            onSuccess={() => {
+                queryClient.invalidateQueries({ queryKey: ['childCollections'] });
+            }}
+        />
     );
 };
 
 export const RemoveCollectionsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    const { refetchPaginatedList } = usePaginatedList();
     const { selectedChannel } = useChannel();
-    const { i18n } = useLingui();
     const queryClient = useQueryClient();
-    const { mutate } = useMutation({
-        mutationFn: api.mutate(removeCollectionFromChannelDocument),
-        onSuccess: () => {
-            toast.success(i18n.t(`Successfully removed ${selection.length} collections from channel`));
-            refetchPaginatedList();
-            table.resetRowSelection();
-            queryClient.invalidateQueries({ queryKey: ['childCollections'] });
-        },
-        onError: error => {
-            toast.error(`Failed to remove ${selection.length} collections from channel: ${error.message}`);
-        },
-    });
-
-    if (!selectedChannel) {
-        return null;
-    }
-
-    const handleRemove = () => {
-        mutate({
-            input: {
-                collectionIds: selection.map(s => s.id),
-                channelId: selectedChannel.id,
-            },
-        });
-    };
 
     return (
-        <DataTableBulkActionItem
-            requiresPermission={['UpdateCatalog', 'UpdateCollection']}
-            onClick={handleRemove}
-            label={<Trans>Remove from current channel</Trans>}
-            confirmationText={
-                <Trans>
-                    Are you sure you want to remove {selection.length} collections from the current channel?
-                </Trans>
-            }
-            icon={LayersIcon}
-            className="text-warning"
+        <RemoveFromChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="collections"
+            mutationFn={api.mutate(removeCollectionFromChannelDocument)}
+            requiredPermissions={['UpdateCatalog', 'UpdateCollection']}
+            buildInput={() => ({
+                collectionIds: selection.map(s => s.id),
+                channelId: selectedChannel?.id,
+            })}
+            onSuccess={() => {
+                queryClient.invalidateQueries({ queryKey: ['childCollections'] });
+            }}
         />
     );
 };
@@ -117,43 +75,14 @@ export const DuplicateCollectionsBulkAction: BulkActionComponent<any> = ({ selec
 };
 
 export const DeleteCollectionsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    const { refetchPaginatedList } = usePaginatedList();
-    const { i18n } = useLingui();
-    const queryClient = useQueryClient();
-    const { mutate } = useMutation({
-        mutationFn: api.mutate(deleteCollectionsDocument),
-        onSuccess: (result: ResultOf<typeof deleteCollectionsDocument>) => {
-            let deleted = 0;
-            const errors: string[] = [];
-            for (const item of result.deleteCollections) {
-                if (item.result === 'DELETED') {
-                    deleted++;
-                } else if (item.message) {
-                    errors.push(item.message);
-                }
-            }
-            if (0 < deleted) {
-                toast.success(i18n.t(`Deleted ${deleted} collections`));
-            }
-            if (0 < errors.length) {
-                toast.error(i18n.t(`Failed to delete ${errors.length} collections`));
-            }
-            refetchPaginatedList();
-            table.resetRowSelection();
-            queryClient.invalidateQueries({ queryKey: ['childCollections'] });
-        },
-        onError: () => {
-            toast.error(`Failed to delete ${selection.length} collections`);
-        },
-    });
     return (
-        <DataTableBulkActionItem
-            requiresPermission={['DeleteCatalog', 'DeleteCollection']}
-            onClick={() => mutate({ ids: selection.map(s => s.id) })}
-            label={<Trans>Delete</Trans>}
-            confirmationText={<Trans>Are you sure you want to delete {selection.length} collections?</Trans>}
-            icon={TrashIcon}
-            className="text-destructive"
+        <DeleteBulkAction
+            mutationDocument={deleteCollectionsDocument}
+            entityName="collections"
+            requiredPermissions={['DeleteCatalog', 'DeleteCollection']}
+            invalidateQueries={['childCollections']}
+            selection={selection}
+            table={table}
         />
     );
 };

package/src/app/routes/_authenticated/_countries/components/country-bulk-actions.tsx

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteCountriesDocument } from '../countries.graphql.js';
+
+export const DeleteCountriesBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteCountriesDocument}
+            entityName="countries"
+            requiredPermissions={['DeleteCountry']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_countries/countries.graphql.ts

@@ -67,3 +67,12 @@ export const deleteCountryDocument = graphql(`
         }
     }
 `);
+
+export const deleteCountriesDocument = graphql(`
+    mutation DeleteCountries($ids: [ID!]!) {
+        deleteCountries(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_countries/countries.tsx

@@ -6,6 +6,7 @@ import { ListPage } from '@/framework/page/list-page.js';
 import { Trans } from '@/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
+import { DeleteCountriesBulkAction } from './components/country-bulk-actions.js';
 import { countriesListQuery, deleteCountryDocument } from './countries.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_countries/countries')({
@@ -51,6 +52,12 @@ function CountryListPage() {
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
             }}
+            bulkActions={[
+                {
+                    component: DeleteCountriesBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateCountry']}>

package/src/app/routes/_authenticated/_customer-groups/components/customer-group-bulk-actions.tsx

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteCustomerGroupsDocument } from '../customer-groups.graphql.js';
+
+export const DeleteCustomerGroupsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteCustomerGroupsDocument}
+            entityName="customer groups"
+            requiredPermissions={['DeleteCustomerGroup']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_customer-groups/customer-groups.graphql.ts

@@ -69,3 +69,12 @@ export const deleteCustomerGroupDocument = graphql(`
         }
     }
 `);
+
+export const deleteCustomerGroupsDocument = graphql(`
+    mutation DeleteCustomerGroups($ids: [ID!]!) {
+        deleteCustomerGroups(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_customer-groups/customer-groups.tsx

@@ -6,6 +6,7 @@ import { ListPage } from '@/framework/page/list-page.js';
 import { Trans } from '@/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
+import { DeleteCustomerGroupsBulkAction } from './components/customer-group-bulk-actions.js';
 import { CustomerGroupMembersSheet } from './components/customer-group-members-sheet.js';
 import { customerGroupListDocument, deleteCustomerGroupDocument } from './customer-groups.graphql.js';
 
@@ -52,6 +53,12 @@ function CustomerGroupListPage() {
                     name: { contains: searchTerm },
                 };
             }}
+            bulkActions={[
+                {
+                    component: DeleteCustomerGroupsBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateCustomerGroup']}>