Confirm deletions

src-web/components/RequestActionsDropdown.tsx

@@ -0,0 +1,48 @@
+import type { HTMLAttributes, ReactElement } from 'react';
+import { useConfirm } from '../hooks/useConfirm';
+import { useDeleteRequest } from '../hooks/useDeleteRequest';
+import { useDuplicateRequest } from '../hooks/useDuplicateRequest';
+import { useRequest } from '../hooks/useRequest';
+import { Dropdown } from './core/Dropdown';
+import { Icon } from './core/Icon';
+
+interface Props {
+  requestId: string;
+  children: ReactElement<HTMLAttributes<HTMLButtonElement>>;
+}
+
+export function RequestActionsDropdown({ requestId, children }: Props) {
+  const request = useRequest(requestId ?? null);
+  const deleteRequest = useDeleteRequest(requestId ?? null);
+  const duplicateRequest = useDuplicateRequest({ id: requestId, navigateAfter: true });
+  const confirm = useConfirm();
+
+  return (
+    <Dropdown
+      items={[
+        {
+          label: 'Duplicate',
+          onSelect: duplicateRequest.mutate,
+          leftSlot: <Icon icon="copy" />,
+        },
+        {
+          label: 'Delete',
+          onSelect: async () => {
+            const confirmed = await confirm({
+              title: 'Delete Request',
+              description: `Are you sure you want to delete "${request?.name}"?`,
+              confirmButtonColor: 'danger',
+              confirmButtonText: 'Delete',
+            });
+            if (confirmed) {
+              deleteRequest.mutate();
+            }
+          },
+          leftSlot: <Icon icon="trash" />,
+        },
+      ]}
+    >
+      {children}
+    </Dropdown>
+  );
+}