Merge pull request #20586 from overleaf/dp-resoled-comments-tooltip

Add tooltips for resolved comments toggle and reopen/delete thread buttons

GitOrigin-RevId: 6e043d0ca83418f4362ec1b49994c4ceed24742b

services/web/frontend/js/features/review-panel-new/components/review-panel-resolved-thread.tsx

@@ -7,6 +7,7 @@ import MaterialIcon from '@/shared/components/material-icon'
 import { ExpandableContent } from './review-panel-expandable-content'
 import { ReviewPanelCommentContent } from './review-panel-comment-content'
 import { Change, CommentOperation } from '../../../../../types/change'
+import Tooltip from '@/shared/components/tooltip'
 
 export const ReviewPanelResolvedThread: FC<{
   id: string
@@ -32,12 +33,25 @@ export const ReviewPanelResolvedThread: FC<{
           />
         </div>
         <div className="review-panel-resolved-comment-buttons">
-          <Button onClick={() => reopenThread(id as ThreadId)}>
-            <MaterialIcon type="refresh" accessibilityLabel={t('reopen')} />
-          </Button>
-          <Button onClick={() => deleteThread(id as ThreadId)}>
-            <MaterialIcon type="delete" accessibilityLabel={t('delete')} />
-          </Button>
+          <Tooltip
+            id="reopen-thread"
+            overlayProps={{ placement: 'bottom' }}
+            description={t('reopen')}
+          >
+            <Button onClick={() => reopenThread(id as ThreadId)}>
+              <MaterialIcon type="refresh" accessibilityLabel={t('reopen')} />
+            </Button>
+          </Tooltip>
+
+          <Tooltip
+            id="delete-thread"
+            overlayProps={{ placement: 'bottom' }}
+            description={t('delete')}
+          >
+            <Button onClick={() => deleteThread(id as ThreadId)}>
+              <MaterialIcon type="delete" accessibilityLabel={t('delete')} />
+            </Button>
+          </Tooltip>
         </div>
       </div>
       <div className="review-panel-resolved-comment-quoted-text">

services/web/frontend/js/features/review-panel-new/components/review-panel-resolved-threads-button.tsx

@@ -2,20 +2,29 @@ import React, { FC, useRef, useState } from 'react'
 import Icon from '@/shared/components/icon'
 import { ReviewPanelResolvedThreadsMenu } from './review-panel-resolved-threads-menu'
 import { Overlay, Popover } from 'react-bootstrap'
+import Tooltip from '@/shared/components/tooltip'
+import { useTranslation } from 'react-i18next'
 
 export const ReviewPanelResolvedThreadsButton: FC = () => {
   const [expanded, setExpanded] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
+  const { t } = useTranslation()
 
   return (
     <>
-      <button
-        className="resolved-comments-toggle"
-        ref={buttonRef}
-        onClick={() => setExpanded(true)}
+      <Tooltip
+        id="resolved-comments"
+        overlayProps={{ placement: 'bottom' }}
+        description={t('resolved_comments')}
       >
-        <Icon type="inbox" fw />
-      </button>
+        <button
+          className="resolved-comments-toggle"
+          ref={buttonRef}
+          onClick={() => setExpanded(true)}
+        >
+          <Icon type="inbox" fw />
+        </button>
+      </Tooltip>
       {expanded && (
         <Overlay
           show