overleaf/services/web/frontend/js/features/review-panel-new/components/review-panel-resolved-thread.tsx
David 2a051700b5 Merge pull request #20586 from overleaf/dp-resoled-comments-tooltip
Add tooltips for resolved comments toggle and reopen/delete thread buttons

GitOrigin-RevId: 6e043d0ca83418f4362ec1b49994c4ceed24742b
2024-09-27 08:04:26 +00:00

69 lines
2.5 KiB
TypeScript

import React, { FC } from 'react'
import { useTranslation, Trans } from 'react-i18next'
import { ThreadId } from '../../../../../types/review-panel/review-panel'
import { useThreadsActionsContext } from '../context/threads-context'
import { Button } from 'react-bootstrap'
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
comment: Change<CommentOperation>
docName: string
}> = ({ id, comment, docName }) => {
const { t } = useTranslation()
const { reopenThread, deleteThread } = useThreadsActionsContext()
return (
<div className="review-panel-resolved-comment" key={id}>
<div className="review-panel-resolved-comment-header">
<div>
<Trans
i18nKey="from_filename"
components={[
// eslint-disable-next-line react/jsx-key
<span className="review-panel-resolved-comment-filename" />,
]}
values={{ filename: docName }}
shouldUnescape
tOptions={{ interpolation: { escapeValue: true } }}
/>
</div>
<div className="review-panel-resolved-comment-buttons">
<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">
<div className="review-panel-resolved-comment-quoted-text-label">
{t('quoted_text')}
</div>
<ExpandableContent className="review-panel-resolved-comment-quoted-text-quote">
{comment?.op.c}
</ExpandableContent>
</div>
<ReviewPanelCommentContent comment={comment} isResolved />
</div>
)
}