first commit

common/resources/client/comments/comments-datatable-page/delete-comments-button.tsx

@@ -0,0 +1,66 @@
+import {useDeleteComments} from '@common/comments/requests/use-delete-comments';
+import {DialogTrigger} from '@common/ui/overlays/dialog/dialog-trigger';
+import {queryClient} from '@common/http/query-client';
+import {Button} from '@common/ui/buttons/button';
+import {Trans} from '@common/i18n/trans';
+import {ConfirmationDialog} from '@common/ui/overlays/dialog/confirmation-dialog';
+import React from 'react';
+import {ButtonVariant} from '@common/ui/buttons/get-shared-button-style';
+import {ButtonSize} from '@common/ui/buttons/button-size';
+
+interface DeleteCommentsButtonProps {
+  commentIds: number[];
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+export function DeleteCommentsButton({
+  commentIds,
+  variant = 'outline',
+  size = 'xs',
+}: DeleteCommentsButtonProps) {
+  const deleteComments = useDeleteComments();
+  return (
+    <DialogTrigger
+      type="modal"
+      onClose={isConfirmed => {
+        if (isConfirmed) {
+          deleteComments.mutate(
+            {commentIds},
+            {
+              onSuccess: () => {
+                queryClient.invalidateQueries({queryKey: ['comment']});
+              },
+            },
+          );
+        }
+      }}
+    >
+      <Button
+        variant={variant}
+        size={size}
+        color="danger"
+        className="mr-10"
+        disabled={deleteComments.isPending}
+      >
+        <Trans message="Delete" />
+      </Button>
+      <ConfirmationDialog
+        isDanger
+        title={
+          <Trans
+            message="Delete [one comment|other :count comments]"
+            values={{count: commentIds.length}}
+          />
+        }
+        body={
+          commentIds.length > 1 ? (
+            <Trans message="Are you sure you want to delete selected comments?" />
+          ) : (
+            <Trans message="Are you sure you want to delete this comment?" />
+          )
+        }
+        confirm={<Trans message="Delete" />}
+      />
+    </DialogTrigger>
+  );
+}