overleaf/services/web/frontend/js/features/review-panel-new/components/review-panel-overview-file.tsx

95 lines
2.7 KiB
TypeScript
Raw Normal View History

Add review panel context providers and components (#19490) * Tidy up review panel components * Add ReviewPanel providers * [web] new design for review panel track change (#19544) * [web] new design for review panel track change * fixed mini view * mini icon style change * fix icon size * format date * useRangesUserContext hook * remove useRangesUserContext hook * using full class names * fix action icons hover * change wording for tooltips * added ReviewPanelChangeUser component * Update header in new review panel * Extract ReviewPanelTrackChangesMenuButton as a separate component * Remove wrapper div * Replace h2 with div for review panel label * Rename ReviewPanelTools to ReviewPanelHeader * Rename trackChangesExpanded -> trackChangesMenuExpanded * Dont break memoisation of ReviewPanelTrackChangesMenuButton * Fix the width of the track changes arrow icon * Update how prop types are declared * Remove new empty state from old review panel * Add empty state to new review panel * Add project members and owner to ChangesUsers context (#19624) --------- Co-authored-by: Alf Eaton <alf.eaton@overleaf.com> * Redesign comment entry in review panel (#19678) * Redesign comment entry in review panel * ReviewPanelCommentOptions component * remove unused prop * Tidying * Add conditional import * Optional changeManager * Add more split test compatibility * More split test compatibility * Fixes * Improve overview scrolling * Fix overview scrolling * Fix & simplify track changes toggle * Fix overview scrolling * Fix current file container * ExpandableContent component for messages in review panel (#19738) * ExpandableContent component for messages in review panel * remove isExpanded dependancy * Delete comment option for new review panel (#19772) * Delete comment option for new review panel * dont show thread warning if there are no replies * fix hasReplies issue * Implement initial collapsing overview files * Fix positioning of overview panel * Small styling changes * Add count of unresolved comments and tracked chanegs * More style adjustments * Move review-panel-overview styles into css file * Remove unused var --------- Co-authored-by: Domagoj Kriskovic <dom.kriskovic@overleaf.com> Co-authored-by: David Powell <david.powell@overleaf.com> Co-authored-by: David <33458145+davidmcpowell@users.noreply.github.com> GitOrigin-RevId: e67463443d541f88445a86eed5e2b6ec6040f9c7
2024-08-12 05:50:54 -04:00
import { FC, useMemo } from 'react'
import { MainDocument } from '../../../../../types/project-settings'
import { Ranges } from '../context/ranges-context'
import { ReviewPanelComment } from './review-panel-comment'
import { ReviewPanelChange } from './review-panel-change'
import { isDeleteChange, isInsertChange } from '@/utils/operations'
import {
Change,
DeleteOperation,
EditOperation,
} from '../../../../../types/change'
import { canAggregate } from '../utils/can-aggregate'
import { Button } from 'react-bootstrap'
import MaterialIcon from '@/shared/components/material-icon'
import useOverviewFileCollapsed from '../hooks/use-overview-file-collapsed'
import { useThreadsContext } from '../context/threads-context'
export const ReviewPanelOverviewFile: FC<{
doc: MainDocument
ranges: Ranges
}> = ({ doc, ranges }) => {
const { collapsed, toggleCollapsed } = useOverviewFileCollapsed(doc.doc.id)
const threads = useThreadsContext()
const { aggregates, changes } = useMemo(() => {
const changes: Change<EditOperation>[] = []
const aggregates: Map<string, Change<DeleteOperation>> = new Map()
let precedingChange: Change<EditOperation> | null = null
for (const change of ranges.changes) {
if (
precedingChange &&
isInsertChange(precedingChange) &&
isDeleteChange(change) &&
canAggregate(change, precedingChange)
) {
aggregates.set(precedingChange.id, change)
} else {
changes.push(change)
}
precedingChange = change
}
return { aggregates, changes }
}, [ranges])
const unresolvedComments = useMemo(() => {
return ranges.comments.filter(comment => {
const thread = threads?.[comment.op.t]
return thread && !thread.resolved
})
}, [ranges.comments, threads])
const numEntries = changes.length + unresolvedComments.length
if (numEntries === 0) {
return null
}
return (
<div>
<Button
bsClass="review-panel-overview-file-header"
bsStyle={null}
onClick={toggleCollapsed}
>
<MaterialIcon
type={collapsed ? 'keyboard_arrow_right' : 'keyboard_arrow_down'}
/>
{doc.doc.name}
<div className="review-panel-overview-file-entry-count">
{numEntries}
</div>
</Button>
{!collapsed && (
<div className="review-panel-overview-file-entries">
{changes.map(change => (
<ReviewPanelChange
key={change.id}
change={change}
aggregate={aggregates.get(change.id)}
/>
))}
{unresolvedComments.map(comment => (
<ReviewPanelComment key={comment.id} comment={comment} />
))}
</div>
)}
</div>
)
}