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

package/src/app/routes/_authenticated/_assets/components/asset-tags-editor.tsx

@@ -0,0 +1,226 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+} from '@/vdb/components/ui/command.js';
+import { Label } from '@/vdb/components/ui/label.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Check, ChevronsUpDown, Settings2, X } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+import { createTagDocument, tagListDocument } from '../assets.graphql.js';
+import { ManageTagsDialog } from './manage-tags-dialog.js';
+
+interface AssetTagsEditorProps {
+    selectedTags: string[];
+    onTagsChange: (tags: string[]) => void;
+    disabled?: boolean;
+    onTagsUpdated?: () => void;
+}
+
+export function AssetTagsEditor({
+    selectedTags,
+    onTagsChange,
+    disabled = false,
+    onTagsUpdated,
+}: Readonly<AssetTagsEditorProps>) {
+    const [open, setOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const [manageDialogOpen, setManageDialogOpen] = useState(false);
+    const queryClient = useQueryClient();
+
+    // Fetch available tags
+    const { data: tagsData } = useQuery({
+        queryKey: ['tags'],
+        queryFn: () => api.query(tagListDocument, { options: { take: 100 } }),
+        staleTime: 1000 * 60 * 5, // 5 minutes
+    });
+
+    // Create new tag mutation
+    const createTagMutation = useMutation({
+        mutationFn: (tagValue: string) => api.mutate(createTagDocument, { input: { value: tagValue } }),
+        onSuccess: data => {
+            const newTag = data.createTag.value;
+            onTagsChange([...selectedTags, newTag]);
+            toast.success(`Created tag "${newTag}"`);
+            setSearchValue('');
+            // Invalidate and refetch tags list
+            queryClient.invalidateQueries({ queryKey: ['tags'] });
+        },
+        onError: error => {
+            toast.error('Failed to create tag', {
+                description: error instanceof Error ? error.message : 'Unknown error',
+            });
+        },
+    });
+
+    const availableTags = tagsData?.tags.items || [];
+
+    // Filter tags based on search value
+    const filteredTags = availableTags.filter(tag =>
+        tag.value.toLowerCase().includes(searchValue.toLowerCase()),
+    );
+
+    // Check if search value would create a new tag
+    const isNewTag =
+        searchValue.trim() &&
+        !availableTags.some(tag => tag.value.toLowerCase() === searchValue.toLowerCase());
+
+    const handleSelectTag = useCallback(
+        (tagValue: string) => {
+            if (!selectedTags.includes(tagValue)) {
+                onTagsChange([...selectedTags, tagValue]);
+            }
+            setSearchValue('');
+            setOpen(false);
+        },
+        [selectedTags, onTagsChange],
+    );
+
+    const handleRemoveTag = useCallback(
+        (tagToRemove: string) => {
+            onTagsChange(selectedTags.filter(tag => tag !== tagToRemove));
+        },
+        [selectedTags, onTagsChange],
+    );
+
+    const handleCreateTag = useCallback(() => {
+        if (isNewTag) {
+            createTagMutation.mutate(searchValue.trim());
+        }
+    }, [isNewTag, searchValue, createTagMutation]);
+
+    return (
+        <div className="space-y-3">
+            <Label>
+                <Trans>Tags</Trans>
+            </Label>
+
+            {/* Selected tags display */}
+            <div className="flex flex-wrap gap-2 min-h-[32px]">
+                {selectedTags.length === 0 ? (
+                    <span className="text-sm text-muted-foreground">
+                        <Trans>No tags selected</Trans>
+                    </span>
+                ) : (
+                    selectedTags.map(tag => (
+                        <Badge key={tag} variant="secondary" className="flex items-center gap-1">
+                            {tag}
+                            {!disabled && (
+                                <button
+                                    type="button"
+                                    onClick={() => handleRemoveTag(tag)}
+                                    className="ml-1 hover:bg-destructive/20 rounded-full p-0.5 transition-colors"
+                                >
+                                    <X className="h-3 w-3" />
+                                </button>
+                            )}
+                        </Badge>
+                    ))
+                )}
+            </div>
+
+            {/* Tag selector */}
+            {!disabled && (
+                <Popover open={open} onOpenChange={setOpen}>
+                    <PopoverTrigger asChild>
+                        <Button
+                            variant="outline"
+                            role="combobox"
+                            aria-expanded={open}
+                            className="w-full justify-between"
+                        >
+                            <Trans>Add tags...</Trans>
+                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-full p-0" align="start">
+                        <Command>
+                            <CommandInput
+                                placeholder="Search tags..."
+                                value={searchValue}
+                                onValueChange={setSearchValue}
+                            />
+                            <CommandEmpty>
+                                {searchValue.trim() ? (
+                                    <div className="">
+                                        <Button
+                                            variant="ghost"
+                                            className="w-full justify-start"
+                                            onClick={handleCreateTag}
+                                            disabled={createTagMutation.isPending}
+                                        >
+                                            <Trans>Create "{searchValue.trim()}"</Trans>
+                                        </Button>
+                                    </div>
+                                ) : (
+                                    <div className="p-2 text-sm">
+                                        <Trans>No tags found</Trans>
+                                    </div>
+                                )}
+                            </CommandEmpty>
+                            <CommandGroup>
+                                {/* Show option to create new tag if search doesn't match exactly */}
+                                {isNewTag && (
+                                    <CommandItem
+                                        onSelect={handleCreateTag}
+                                        disabled={createTagMutation.isPending}
+                                        className="font-medium"
+                                    >
+                                        <Trans>Create "{searchValue.trim()}"</Trans>
+                                    </CommandItem>
+                                )}
+
+                                {/* Show existing tags */}
+                                {filteredTags.map(tag => {
+                                    const isSelected = selectedTags.includes(tag.value);
+                                    return (
+                                        <CommandItem
+                                            key={tag.id}
+                                            onSelect={() => handleSelectTag(tag.value)}
+                                            disabled={isSelected}
+                                        >
+                                            <Check
+                                                className={cn(
+                                                    'mr-2 h-4 w-4',
+                                                    isSelected ? 'opacity-100' : 'opacity-0',
+                                                )}
+                                            />
+                                            {tag.value}
+                                        </CommandItem>
+                                    );
+                                })}
+                            </CommandGroup>
+                        </Command>
+                    </PopoverContent>
+                </Popover>
+            )}
+
+            {!disabled && (
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setManageDialogOpen(true)}
+                    className="w-full justify-start"
+                >
+                    <Settings2 className="h-4 w-4 mr-2" />
+                    <Trans>Manage tags</Trans>
+                </Button>
+            )}
+            {/* Manage Tags Dialog */}
+            <ManageTagsDialog
+                open={manageDialogOpen}
+                onOpenChange={setManageDialogOpen}
+                onTagsUpdated={onTagsUpdated}
+            />
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_assets/components/manage-tags-dialog.tsx

@@ -0,0 +1,217 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { deleteTagDocument, tagListDocument, updateTagDocument } from '../assets.graphql.js';
+
+interface ManageTagsDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onTagsUpdated?: () => void;
+}
+
+export function ManageTagsDialog({ open, onOpenChange, onTagsUpdated }: Readonly<ManageTagsDialogProps>) {
+    const queryClient = useQueryClient();
+    const [toDelete, setToDelete] = useState<string[]>([]);
+    const [toUpdate, setToUpdate] = useState<Array<{ id: string; value: string }>>([]);
+    const [isSaving, setIsSaving] = useState(false);
+
+    // Fetch all tags
+    const { data: tagsData, isLoading } = useQuery({
+        queryKey: ['tags'],
+        queryFn: () => api.query(tagListDocument, { options: { take: 100 } }),
+        staleTime: 1000 * 60 * 5,
+    });
+
+    // Update tag mutation
+    const updateTagMutation = useMutation({
+        mutationFn: ({ id, value }: { id: string; value: string }) =>
+            api.mutate(updateTagDocument, { input: { id, value } }),
+    });
+
+    // Delete tag mutation
+    const deleteTagMutation = useMutation({
+        mutationFn: (id: string) => api.mutate(deleteTagDocument, { id }),
+    });
+
+    const allTags = tagsData?.tags.items || [];
+
+    const toggleDelete = (id: string) => {
+        if (toDelete.includes(id)) {
+            setToDelete(toDelete.filter(_id => _id !== id));
+        } else {
+            setToDelete([...toDelete, id]);
+        }
+    };
+
+    const markedAsDeleted = (id: string) => {
+        return toDelete.includes(id);
+    };
+
+    const updateTagValue = (id: string, value: string) => {
+        const exists = toUpdate.find(i => i.id === id);
+        if (exists) {
+            if (value === allTags.find(tag => tag.id === id)?.value) {
+                // If value is reverted to original, remove from update list
+                setToUpdate(toUpdate.filter(i => i.id !== id));
+            } else {
+                exists.value = value;
+                setToUpdate([...toUpdate]);
+            }
+        } else {
+            setToUpdate([...toUpdate, { id, value }]);
+        }
+    };
+
+    const getDisplayValue = (id: string) => {
+        const updateItem = toUpdate.find(i => i.id === id);
+        if (updateItem) {
+            return updateItem.value;
+        }
+        return allTags.find(tag => tag.id === id)?.value || '';
+    };
+
+    const renderTagsList = () => {
+        if (isLoading) {
+            return (
+                <div className="text-sm text-muted-foreground">
+                    <Trans>Loading tags...</Trans>
+                </div>
+            );
+        }
+
+        if (allTags.length === 0) {
+            return (
+                <div className="text-sm text-muted-foreground">
+                    <Trans>No tags found</Trans>
+                </div>
+            );
+        }
+
+        return allTags.map(tag => {
+            const isDeleted = markedAsDeleted(tag.id);
+            const isModified = toUpdate.some(i => i.id === tag.id);
+
+            return (
+                <div
+                    key={tag.id}
+                    className={cn(
+                        'flex items-center gap-2 p-2 rounded-md',
+                        isDeleted && 'opacity-50',
+                    )}
+                >
+                    <Input
+                        value={getDisplayValue(tag.id)}
+                        onChange={e => updateTagValue(tag.id, e.target.value)}
+                        disabled={isDeleted || isSaving}
+                        className={cn('flex-1', isModified && !isDeleted && 'border-primary')}
+                    />
+                    <Button
+                        variant={isDeleted ? 'default' : 'ghost'}
+                        size="icon"
+                        onClick={() => toggleDelete(tag.id)}
+                        disabled={isSaving}
+                        className={cn(isDeleted && 'bg-destructive hover:bg-destructive/90')}
+                    >
+                        <Trash2 className="h-4 w-4" />
+                    </Button>
+                </div>
+            );
+        });
+    };
+
+    const hasChanges = toDelete.length > 0 || toUpdate.length > 0;
+
+    const handleCancel = () => {
+        setToDelete([]);
+        setToUpdate([]);
+        onOpenChange(false);
+    };
+
+    const handleSave = async () => {
+        setIsSaving(true);
+
+        try {
+            const operations = [];
+
+            // Delete operations
+            for (const id of toDelete) {
+                operations.push(deleteTagMutation.mutateAsync(id));
+            }
+
+            // Update operations (skip if marked for deletion)
+            for (const item of toUpdate) {
+                if (!toDelete.includes(item.id)) {
+                    operations.push(updateTagMutation.mutateAsync(item));
+                }
+            }
+
+            await Promise.all(operations);
+
+            // Invalidate tags query to refresh the list
+            await queryClient.invalidateQueries({ queryKey: ['tags'] });
+
+            // Also invalidate asset queries to refresh any assets using these tags
+            await queryClient.invalidateQueries({ queryKey: ['asset'] });
+
+            toast.success('Tags updated successfully');
+
+            // Call callback to notify parent component
+            if (onTagsUpdated) {
+                onTagsUpdated();
+            }
+
+            // Reset state
+            setToDelete([]);
+            setToUpdate([]);
+            onOpenChange(false);
+        } catch (error) {
+            toast.error('Failed to update tags', {
+                description: error instanceof Error ? error.message : 'Unknown error',
+            });
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-md">
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Manage Tags</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                        <Trans>Edit or delete existing tags</Trans>
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="max-h-[400px] overflow-y-auto space-y-2 py-4">
+                    {renderTagsList()}
+                </div>
+
+                <DialogFooter>
+                    <Button variant="outline" onClick={handleCancel} disabled={isSaving}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button onClick={handleSave} disabled={!hasChanges || isSaving}>
+                        {isSaving ? <Trans>Saving...</Trans> : <Trans>Save Changes</Trans>}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

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

@@ -8,7 +8,7 @@ import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
-import { channelListQuery, deleteChannelDocument } from './channels.graphql.js';
+import { channelListQuery } from './channels.graphql.js';
 import { DeleteChannelsBulkAction } from './components/channel-bulk-actions.js';
 
 export const Route = createFileRoute('/_authenticated/_channels/channels')({
@@ -23,7 +23,6 @@ function ChannelListPage() {
             pageId="channel-list"
             title="Channels"
             listQuery={channelListQuery}
-            deleteMutation={deleteChannelDocument}
             route={Route}
             defaultVisibility={{
                 code: true,

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

@@ -10,11 +10,11 @@ import { createFileRoute, Link } from '@tanstack/react-router';
 import { ExpandedState, getExpandedRowModel } from '@tanstack/react-table';
 import { TableOptions } from '@tanstack/table-core';
 import { ResultOf } from 'gql.tada';
-import { Folder, FolderOpen, FolderTreeIcon, PlusIcon } from 'lucide-react';
+import { Folder, FolderOpen, PlusIcon } from 'lucide-react';
 import { useState } from 'react';
 
 import { Badge } from '@/vdb/components/ui/badge.js';
-import { collectionListDocument, deleteCollectionDocument } from './collections.graphql.js';
+import { collectionListDocument } from './collections.graphql.js';
 import {
     AssignCollectionsToChannelBulkAction,
     DeleteCollectionsBulkAction,
@@ -23,7 +23,6 @@ import {
     RemoveCollectionsFromChannelBulkAction,
 } from './components/collection-bulk-actions.js';
 import { CollectionContentsSheet } from './components/collection-contents-sheet.js';
-import { useMoveSingleCollection } from './components/move-single-collection.js';
 
 export const Route = createFileRoute('/_authenticated/_collections/collections')({
     component: CollectionListPage,
@@ -34,7 +33,6 @@ type Collection = ResultOf<typeof collectionListDocument>['collections']['items'
 
 function CollectionListPage() {
     const [expanded, setExpanded] = useState<ExpandedState>({});
-    const { handleMoveClick, MoveDialog } = useMoveSingleCollection();
     const childrenQueries = useQueries({
         queries: Object.entries(expanded).map(([collectionId, isExpanded]) => {
             return {
@@ -96,7 +94,6 @@ function CollectionListPage() {
                         },
                     };
                 }}
-                deleteMutation={deleteCollectionDocument}
                 customizeColumns={{
                     name: {
                         header: 'Collection Name',
@@ -210,16 +207,6 @@ function CollectionListPage() {
                     };
                 }}
                 route={Route}
-                rowActions={[
-                    {
-                        label: (
-                            <div className="flex items-center gap-2">
-                                <FolderTreeIcon className="w-4 h-4" /> <Trans>Move</Trans>
-                            </div>
-                        ),
-                        onClick: row => handleMoveClick(row.original),
-                    },
-                ]}
                 bulkActions={[
                     {
                         component: AssignCollectionsToChannelBulkAction,
@@ -254,7 +241,6 @@ function CollectionListPage() {
                     </PermissionGuard>
                 </PageActionBarRight>
             </ListPage>
-            <MoveDialog />
         </>
     );
 }

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

@@ -7,7 +7,7 @@ import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteCountriesBulkAction } from './components/country-bulk-actions.js';
-import { countriesListQuery, deleteCountryDocument } from './countries.graphql.js';
+import { countriesListQuery } from './countries.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_countries/countries')({
     component: CountryListPage,
@@ -19,7 +19,6 @@ function CountryListPage() {
         <ListPage
             pageId="country-list"
             listQuery={countriesListQuery}
-            deleteMutation={deleteCountryDocument}
             route={Route}
             title="Countries"
             defaultVisibility={{

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

@@ -8,7 +8,7 @@ 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';
+import { customerGroupListDocument } from './customer-groups.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_customer-groups/customer-groups')({
     component: CustomerGroupListPage,
@@ -21,7 +21,6 @@ function CustomerGroupListPage() {
             pageId="customer-group-list"
             title="Customer Groups"
             listQuery={customerGroupListDocument}
-            deleteMutation={deleteCustomerGroupDocument}
             route={Route}
             customizeColumns={{
                 name: {

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

@@ -8,7 +8,7 @@ import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteCustomersBulkAction } from './components/customer-bulk-actions.js';
 import { CustomerStatusBadge } from './components/customer-status-badge.js';
-import { customerListDocument, deleteCustomerDocument } from './customers.graphql.js';
+import { customerListDocument } from './customers.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_customers/customers')({
     component: CustomerListPage,
@@ -21,7 +21,6 @@ function CustomerListPage() {
             title="Customers"
             pageId="customer-list"
             listQuery={customerListDocument}
-            deleteMutation={deleteCustomerDocument}
             onSearchTermChange={searchTerm => {
                 return {
                     lastName: {

package/src/app/routes/_authenticated/_facets/facets.tsx

@@ -63,7 +63,6 @@ function FacetListPage() {
             pageId="facet-list"
             title="Facets"
             listQuery={facetListDocument}
-            deleteMutation={deleteFacetDocument}
             defaultVisibility={{
                 name: true,
                 isPrivate: true,

package/src/app/routes/_authenticated/_payment-methods/payment-methods.tsx

@@ -12,7 +12,7 @@ import {
     DeletePaymentMethodsBulkAction,
     RemovePaymentMethodsFromChannelBulkAction,
 } from './components/payment-method-bulk-actions.js';
-import { deletePaymentMethodDocument, paymentMethodListQuery } from './payment-methods.graphql.js';
+import { paymentMethodListQuery } from './payment-methods.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_payment-methods/payment-methods')({
     component: PaymentMethodListPage,
@@ -24,7 +24,6 @@ function PaymentMethodListPage() {
         <ListPage
             pageId="payment-method-list"
             listQuery={paymentMethodListQuery}
-            deleteMutation={deletePaymentMethodDocument}
             route={Route}
             title="Payment Methods"
             defaultVisibility={{

package/src/app/routes/_authenticated/_product-variants/product-variants.tsx

@@ -11,7 +11,7 @@ import {
     DeleteProductVariantsBulkAction,
     RemoveProductVariantsFromChannelBulkAction,
 } from './components/product-variant-bulk-actions.js';
-import { deleteProductVariantDocument, productVariantListDocument } from './product-variants.graphql.js';
+import { productVariantListDocument } from './product-variants.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_product-variants/product-variants')({
     component: ProductListPage,
@@ -25,7 +25,6 @@ function ProductListPage() {
             pageId="product-variant-list"
             title={<Trans>Product Variants</Trans>}
             listQuery={productVariantListDocument}
-            deleteMutation={deleteProductVariantDocument}
             bulkActions={[
                 {
                     component: AssignProductVariantsToChannelBulkAction,

package/src/app/routes/_authenticated/_products/products.tsx

@@ -13,7 +13,7 @@ import {
     DuplicateProductsBulkAction,
     RemoveProductsFromChannelBulkAction,
 } from './components/product-bulk-actions.js';
-import { deleteProductDocument, productListDocument } from './products.graphql.js';
+import { productListDocument } from './products.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_products/products')({
     component: ProductListPage,
@@ -25,7 +25,6 @@ function ProductListPage() {
         <ListPage
             pageId="product-list"
             listQuery={productListDocument}
-            deleteMutation={deleteProductDocument}
             title="Products"
             customizeColumns={{
                 name: {

package/src/app/routes/_authenticated/_promotions/promotions.tsx

@@ -13,7 +13,7 @@ import {
     DuplicatePromotionsBulkAction,
     RemovePromotionsFromChannelBulkAction,
 } from './components/promotion-bulk-actions.js';
-import { deletePromotionDocument, promotionListDocument } from './promotions.graphql.js';
+import { promotionListDocument } from './promotions.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_promotions/promotions')({
     component: PromotionListPage,
@@ -25,7 +25,6 @@ function PromotionListPage() {
         <ListPage
             pageId="promotion-list"
             listQuery={promotionListDocument}
-            deleteMutation={deletePromotionDocument}
             route={Route}
             title="Promotions"
             defaultVisibility={{

package/src/app/routes/_authenticated/_roles/roles.tsx

@@ -12,7 +12,7 @@ import { createFileRoute, Link } from '@tanstack/react-router';
 import { LayersIcon, PlusIcon } from 'lucide-react';
 import { ExpandablePermissions } from './components/expandable-permissions.js';
 import { DeleteRolesBulkAction } from './components/role-bulk-actions.js';
-import { deleteRoleDocument, roleListQuery } from './roles.graphql.js';
+import { roleListQuery } from './roles.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_roles/roles')({
     component: RoleListPage,
@@ -27,7 +27,6 @@ function RoleListPage() {
             pageId="role-list"
             title="Roles"
             listQuery={roleListQuery}
-            deleteMutation={deleteRoleDocument}
             route={Route}
             defaultVisibility={{
                 description: true,