mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-04 22:25:59 -05:00
8bc374c916
[web] BS5 review panel new GitOrigin-RevId: c65d17d0053858bd74984ba746a620b89d900606
108 lines
3.7 KiB
TypeScript
108 lines
3.7 KiB
TypeScript
import React, { FC, useCallback, useState } from 'react'
|
|
import { useTranslation, Trans } from 'react-i18next'
|
|
import { ThreadId } from '../../../../../types/review-panel/review-panel'
|
|
import { useThreadsActionsContext } from '../context/threads-context'
|
|
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
|
|
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 classNames from 'classnames'
|
|
import { debugConsole } from '@/utils/debugging'
|
|
import { useModalsContext } from '@/features/ide-react/context/modals-context'
|
|
|
|
export const ReviewPanelResolvedThread: FC<{
|
|
id: ThreadId
|
|
comment: Change<CommentOperation>
|
|
docName: string
|
|
}> = ({ id, comment, docName }) => {
|
|
const { t } = useTranslation()
|
|
const { reopenThread, deleteThread } = useThreadsActionsContext()
|
|
const [processing, setProcessing] = useState(false)
|
|
const { showGenericMessageModal } = useModalsContext()
|
|
|
|
const handleReopenThread = useCallback(async () => {
|
|
setProcessing(true)
|
|
try {
|
|
await reopenThread(id)
|
|
} catch (err) {
|
|
debugConsole.error(err)
|
|
showGenericMessageModal(
|
|
t('reopen_comment_error_title'),
|
|
t('reopen_comment_error_message')
|
|
)
|
|
} finally {
|
|
setProcessing(false)
|
|
}
|
|
}, [id, reopenThread, showGenericMessageModal, t])
|
|
|
|
const handleDeleteThread = useCallback(async () => {
|
|
setProcessing(true)
|
|
try {
|
|
await deleteThread(id)
|
|
} catch (err) {
|
|
debugConsole.error(err)
|
|
showGenericMessageModal(
|
|
t('delete_comment_error_title'),
|
|
t('delete_comment_error_message')
|
|
)
|
|
} finally {
|
|
setProcessing(false)
|
|
}
|
|
}, [id, deleteThread, showGenericMessageModal, t])
|
|
|
|
return (
|
|
<div
|
|
className={classNames('review-panel-resolved-comment', {
|
|
'review-panel-resolved-disabled': processing,
|
|
})}
|
|
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">
|
|
<OLTooltip
|
|
id="reopen-thread"
|
|
overlayProps={{ placement: 'bottom' }}
|
|
description={t('reopen')}
|
|
>
|
|
<button type="button" className="btn" onClick={handleReopenThread}>
|
|
<MaterialIcon type="refresh" accessibilityLabel={t('reopen')} />
|
|
</button>
|
|
</OLTooltip>
|
|
|
|
<OLTooltip
|
|
id="delete-thread"
|
|
overlayProps={{ placement: 'bottom' }}
|
|
description={t('delete')}
|
|
>
|
|
<button type="button" className="btn" onClick={handleDeleteThread}>
|
|
<MaterialIcon type="delete" accessibilityLabel={t('delete')} />
|
|
</button>
|
|
</OLTooltip>
|
|
</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>
|
|
)
|
|
}
|