@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/app/app-providers.tsx

@@ -1,9 +1,9 @@
-import { AuthProvider } from '@/providers/auth.js';
-import { ChannelProvider } from '@/providers/channel-provider.js';
-import { I18nProvider } from '@/providers/i18n-provider.js';
-import { ServerConfigProvider } from '@/providers/server-config.js';
-import { ThemeProvider } from '@/providers/theme-provider.js';
-import { UserSettingsProvider } from '@/providers/user-settings.js';
+import { AuthProvider } from '@/vdb/providers/auth.js';
+import { ChannelProvider } from '@/vdb/providers/channel-provider.js';
+import { I18nProvider } from '@/vdb/providers/i18n-provider.js';
+import { ServerConfigProvider } from '@/vdb/providers/server-config.js';
+import { ThemeProvider } from '@/vdb/providers/theme-provider.js';
+import { UserSettingsProvider } from '@/vdb/providers/user-settings.js';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';
@@ -14,7 +14,7 @@ export function AppProviders({ children }: { children: React.ReactNode }) {
     return (
         <I18nProvider>
             <QueryClientProvider client={queryClient}>
-                <UserSettingsProvider>
+                <UserSettingsProvider queryClient={queryClient}>
                     <ThemeProvider defaultTheme="system">
                         <AuthProvider>
                             <ServerConfigProvider>

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

@@ -0,0 +1,148 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { TrashIcon } from 'lucide-react';
+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 { getMutationName } from '@/vdb/framework/document-introspection/get-document-structure.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@/vdb/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

@@ -0,0 +1,134 @@
+import { useMutation } from '@tanstack/react-query';
+import { CopyIcon } from 'lucide-react';
+import { useState } from 'react';
+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 { api } from '@/vdb/graphql/api.js';
+import { duplicateEntityDocument } from '@/vdb/graphql/common-operations.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+
+interface DuplicateBulkActionProps {
+    entityType: 'Product' | 'Collection' | 'Facet' | 'Promotion';
+    duplicatorCode: string;
+    duplicatorArguments?: Array<{ name: string; value: string }>;
+    requiredPermissions: string[];
+    entityName: string; // For display purposes in error messages
+    onSuccess?: () => void;
+    selection: any[];
+    table: any;
+}
+
+export function DuplicateBulkAction({
+    entityType,
+    duplicatorCode,
+    duplicatorArguments = [],
+    requiredPermissions,
+    entityName,
+    onSuccess,
+    selection,
+    table,
+}: DuplicateBulkActionProps) {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { i18n } = useLingui();
+    const [isDuplicating, setIsDuplicating] = useState(false);
+    const [progress, setProgress] = useState({ completed: 0, total: 0 });
+
+    const { mutateAsync } = useMutation({
+        mutationFn: api.mutate(duplicateEntityDocument),
+    });
+
+    const handleDuplicate = async () => {
+        if (isDuplicating) return;
+
+        setIsDuplicating(true);
+        setProgress({ completed: 0, total: selection.length });
+
+        const results = {
+            success: 0,
+            failed: 0,
+            errors: [] as string[],
+        };
+
+        try {
+            // Process entities sequentially to avoid overwhelming the server
+            for (let i = 0; i < selection.length; i++) {
+                const entity = selection[i];
+
+                try {
+                    const result = await mutateAsync({
+                        input: {
+                            entityName: entityType,
+                            entityId: entity.id,
+                            duplicatorInput: {
+                                code: duplicatorCode,
+                                arguments: duplicatorArguments,
+                            },
+                        },
+                    });
+
+                    if ('newEntityId' in result.duplicateEntity) {
+                        results.success++;
+                    } else {
+                        results.failed++;
+                        const errorMsg =
+                            result.duplicateEntity.message ||
+                            result.duplicateEntity.duplicationError ||
+                            'Unknown error';
+                        results.errors.push(`${entityName} ${entity.name || entity.id}: ${errorMsg}`);
+                    }
+                } catch (error) {
+                    results.failed++;
+                    results.errors.push(
+                        `${entityName} ${entity.name || entity.id}: ${error instanceof Error ? error.message : 'Unknown error'}`,
+                    );
+                }
+
+                setProgress({ completed: i + 1, total: selection.length });
+            }
+
+            // Show results
+            if (results.success > 0) {
+                toast.success(
+                    i18n.t(`Successfully duplicated ${results.success} ${entityName.toLowerCase()}s`),
+                );
+            }
+            if (results.failed > 0) {
+                const errorMessage =
+                    results.errors.length > 3
+                        ? `${results.errors.slice(0, 3).join(', ')}... and ${results.errors.length - 3} more`
+                        : results.errors.join(', ');
+                toast.error(
+                    `Failed to duplicate ${results.failed} ${entityName.toLowerCase()}s: ${errorMessage}`,
+                );
+            }
+
+            if (results.success > 0) {
+                refetchPaginatedList();
+                table.resetRowSelection();
+                onSuccess?.();
+            }
+        } finally {
+            setIsDuplicating(false);
+            setProgress({ completed: 0, total: 0 });
+        }
+    };
+
+    return (
+        <DataTableBulkActionItem
+            requiresPermission={requiredPermissions}
+            onClick={handleDuplicate}
+            label={
+                isDuplicating ? (
+                    <Trans>
+                        Duplicating... ({progress.completed}/{progress.total})
+                    </Trans>
+                ) : (
+                    <Trans>Duplicate</Trans>
+                )
+            }
+            icon={CopyIcon}
+        />
+    );
+}

package/src/app/main.tsx

@@ -1,12 +1,12 @@
-import { Toaster } from '@/components/ui/sonner.js';
-import { registerDefaults } from '@/framework/defaults.js';
-import { setCustomFieldsMap } from '@/framework/document-introspection/add-custom-fields.js';
-import { executeDashboardExtensionCallbacks } from '@/framework/extension-api/define-dashboard-extension.js';
-import { useDashboardExtensions } from '@/framework/extension-api/use-dashboard-extensions.js';
-import { useExtendedRouter } from '@/framework/page/use-extended-router.js';
-import { useAuth } from '@/hooks/use-auth.js';
-import { useServerConfig } from '@/hooks/use-server-config.js';
-import { defaultLocale, dynamicActivate } from '@/providers/i18n-provider.js';
+import { Toaster } from '@/vdb/components/ui/sonner.js';
+import { registerDefaults } from '@/vdb/framework/defaults.js';
+import { setCustomFieldsMap } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import { executeDashboardExtensionCallbacks } from '@/vdb/framework/extension-api/define-dashboard-extension.js';
+import { useDashboardExtensions } from '@/vdb/framework/extension-api/use-dashboard-extensions.js';
+import { useExtendedRouter } from '@/vdb/framework/page/use-extended-router.js';
+import { useAuth } from '@/vdb/hooks/use-auth.js';
+import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
+import { defaultLocale, dynamicActivate } from '@/vdb/providers/i18n-provider.js';
 import { createRouter, RouterProvider } from '@tanstack/react-router';
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';

package/src/app/routes/__root.tsx

@@ -1,7 +1,6 @@
-import { AuthContext } from '@/providers/auth.js';
+import { AuthContext } from '@/vdb/providers/auth.js';
 import { QueryClient } from '@tanstack/react-query';
 import { createRootRouteWithContext, Outlet } from '@tanstack/react-router';
-import { TanStackRouterDevtools } from '@tanstack/router-devtools';
 
 export interface MyRouterContext {
     auth: AuthContext;

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

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const administratorItemFragment = graphql(`
     fragment AdministratorItem on Administrator {
@@ -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

@@ -1,14 +1,15 @@
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { RoleCodeLabel } from '@/components/shared/role-code-label.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Button } from '@/components/ui/button.js';
-import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { Trans } from '@/lib/trans.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { RoleCodeLabel } from '@/vdb/components/shared/role-code-label.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { Trans } from '@/vdb/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/administrators_.$id.tsx

@@ -1,10 +1,10 @@
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { RoleSelector } from '@/components/shared/role-selector.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { RoleSelector } from '@/vdb/components/shared/role-selector.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     Page,
@@ -13,10 +13,10 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import {
@@ -26,9 +26,12 @@ import {
 } from './administrators.graphql.js';
 import { RolePermissionsDisplay } from './components/role-permissions-display.js';
 
+const pageId = 'administrator-detail';
+
 export const Route = createFileRoute('/_authenticated/_administrators/administrators_/$id')({
     component: AdministratorDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: administratorDetailDocument,
         breadcrumb: (isNew, entity) => {
             const name = `${entity?.firstName} ${entity?.lastName}`;
@@ -48,6 +51,7 @@ function AdministratorDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: administratorDetailDocument,
         createDocument: createAdministratorDocument,
         updateDocument: updateAdministratorDocument,
@@ -87,7 +91,7 @@ function AdministratorDetailPage() {
     const roleIds = form.watch('roleIds');
 
     return (
-        <Page pageId="administrator-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New administrator</Trans> : name}</PageTitle>
 
             <PageActionBar>

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

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.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/_administrators/components/role-permissions-display.tsx

@@ -1,11 +1,11 @@
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
-import { Checkbox } from '@/components/ui/checkbox.js';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { useGroupedPermissions } from '@/hooks/use-grouped-permissions.js';
-import { useLingui } from '@/lib/trans.js';
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
+import { Checkbox } from '@/vdb/components/ui/checkbox.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useGroupedPermissions } from '@/vdb/hooks/use-grouped-permissions.js';
+import { useLingui } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
 
 const rolesByIdDocument = graphql(`
@@ -28,7 +28,7 @@ interface RolePermissionsDisplayProps {
     value: string[];
 }
 
-export function RolePermissionsDisplay({ value = [] }: RolePermissionsDisplayProps) {
+export function RolePermissionsDisplay({ value = [] }: Readonly<RolePermissionsDisplayProps>) {
     const { i18n } = useLingui();
     const groupedPermissions = useGroupedPermissions();
 
@@ -46,9 +46,9 @@ export function RolePermissionsDisplay({ value = [] }: RolePermissionsDisplayPro
 
     const roles = data?.roles.items ?? [];
 
-    const allChannels = roles.flatMap(role => role.channels).filter((channel, index, self) =>
-        index === self.findIndex((t) => t.code === channel.code),
-    );
+    const allChannels = roles
+        .flatMap(role => role.channels)
+        .filter((channel, index, self) => index === self.findIndex(t => t.code === channel.code));
 
     const isPermissionEnabled = (permissionName: string, channelCode: string) => {
         // Check if any role has this permission for this channel
@@ -87,7 +87,9 @@ export function RolePermissionsDisplay({ value = [] }: RolePermissionsDisplayPro
                                 {groupedPermissions.map((group, idx) => (
                                     <tr
                                         key={group.label}
-                                        className={idx !== groupedPermissions.length - 1 ? 'border-b' : undefined}
+                                        className={
+                                            idx !== groupedPermissions.length - 1 ? 'border-b' : undefined
+                                        }
                                     >
                                         <td className="p-4">
                                             <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
@@ -106,9 +108,7 @@ export function RolePermissionsDisplay({ value = [] }: RolePermissionsDisplayPro
                                                         <TooltipProvider>
                                                             <Tooltip>
                                                                 <TooltipTrigger asChild>
-                                                                    <label
-                                                                        className="text-sm cursor-default"
-                                                                    >
+                                                                    <label className="text-sm cursor-default">
                                                                         {i18n.t(permission.name)}
                                                                     </label>
                                                                 </TooltipTrigger>

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

@@ -1,5 +1,5 @@
-import { assetFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
+import { assetFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const assetDetailDocument = graphql(
     `
@@ -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 { Trans } from '@/lib/trans.js';
+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 '@/vdb/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,18 @@ 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>
     );
 }