feat(dashboard): Confirmation on deletion from list views

packages/dashboard/src/app/routes/_authenticated/_products/components/product-variants-table.tsx

@@ -6,6 +6,17 @@ import { DetailPageButton } from "@/index.js";
 import { ColumnFiltersState, SortingState } from "@tanstack/react-table";
 import { useState } from "react";
 import { productVariantListDocument } from "../products.graphql.js";
+import { graphql } from '@/graphql/graphql.js';
+
+export const deleteProductVariantDocument = graphql(`
+    mutation DeleteProductVariant($id: ID!) {
+        deleteProductVariant(id: $id) {
+            result
+            message
+        }
+    }
+`);
+
 
 interface ProductVariantsTableProps {
     productId: string;
@@ -22,6 +33,7 @@ export function ProductVariantsTable({ productId, registerRefresher }: ProductVa
     return <PaginatedListDataTable
         registerRefresher={registerRefresher}
         listQuery={productVariantListDocument}
+        deleteMutation={deleteProductVariantDocument}
         transformVariables={variables => ({
             ...variables,
             productId,

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

@@ -16,6 +16,17 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu.js';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '@/components/ui/alert-dialog.js';
 import { DisplayComponent } from '@/framework/component-registry/dynamic-component.js';
 import { ResultOf } from '@/graphql/graphql.js';
 import { Trans, useLingui } from '@/lib/trans.js';
@@ -523,12 +534,37 @@ function DeleteMutationRowAction({
         },
     });
     return (
-        <DropdownMenuItem onClick={() => deleteMutationFn({ id: row.original.id })}>
-            <div className="flex items-center gap-2 text-destructive">
-                <TrashIcon className="w-4 h-4 text-destructive" />
-                <Trans>Delete</Trans>
-            </div>
-        </DropdownMenuItem>
+        <AlertDialog>
+            <AlertDialogTrigger asChild>
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                    <div className="flex items-center gap-2 text-destructive">
+                        <TrashIcon className="w-4 h-4 text-destructive" />
+                        <Trans>Delete</Trans>
+                    </div>
+                </DropdownMenuItem>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>
+                        <Trans>Confirm deletion</Trans>
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                        <Trans>Are you sure you want to delete this item? This action cannot be undone.</Trans>
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel>
+                        <Trans>Cancel</Trans>
+                    </AlertDialogCancel>
+                    <AlertDialogAction
+                        onClick={() => deleteMutationFn({ id: row.original.id })}
+                        className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                    >
+                        <Trans>Delete</Trans>
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
     );
 }
 /**