add Popconfirm for delete

dashboard/src/components/template/SentEdit/SuggestionToolbar.tsx

@@ -1,15 +1,15 @@
-import { Divider, Space, Tooltip, Typography } from "antd";
-import { LikeOutlined } from "@ant-design/icons";
+import { Divider, Popconfirm, Space, Tooltip, Typography } from "antd";
+import { LikeOutlined, DeleteOutlined } from "@ant-design/icons";
 import { ISentence } from "../SentEdit";
 import { useEffect, useState } from "react";
 import CommentBox from "../../discussion/DiscussionDrawer";
-import SuggestionBox from "./SuggestionBox";
 import PrAcceptButton from "./PrAcceptButton";
 import { CommentOutlinedIcon, HandOutlinedIcon } from "../../../assets/icon";
 import store from "../../../store";
 import { count, show } from "../../../reducers/discussion";
 import { useAppSelector } from "../../../hooks";
 import { openPanel } from "../../../reducers/right-panel";
+import { useIntl } from "react-intl";
 
 const { Text, Paragraph } = Typography;
 
@@ -21,6 +21,7 @@ interface IWidget {
   prOpen?: boolean;
   onPrClose?: Function;
   onAccept?: Function;
+  onDelete?: Function;
 }
 const SuggestionToolbarWidget = ({
   data,
@@ -30,11 +31,13 @@ const SuggestionToolbarWidget = ({
   prOpen = false,
   compact = false,
   onPrClose,
+  onDelete,
 }: IWidget) => {
   const [CommentCount, setCommentCount] = useState<number | undefined>(
     data.suggestionCount?.discussion
   );
   const discussionCount = useAppSelector(count);
+  const intl = useIntl();
 
   useEffect(() => {
     if (
@@ -59,6 +62,31 @@ const SuggestionToolbarWidget = ({
               }
             }}
           />
+          <Popconfirm
+            title={intl.formatMessage({
+              id: "message.delete.confirm",
+            })}
+            placement="right"
+            onConfirm={() => {
+              if (typeof onDelete !== "undefined") {
+                onDelete();
+              }
+            }}
+            okText={intl.formatMessage({
+              id: `buttons.yes`,
+            })}
+            cancelText={intl.formatMessage({
+              id: `buttons.no`,
+            })}
+          >
+            <Tooltip
+              title={intl.formatMessage({
+                id: `buttons.delete`,
+              })}
+            >
+              <DeleteOutlined />
+            </Tooltip>
+          </Popconfirm>
         </Space>
       ) : (
         <Space size={"small"}>