github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-09-16 02:52:31 -04:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #19346 from overleaf/dp-review-panel-empty-state

Browse source 
Add empty state to review panel

GitOrigin-RevId: 47d7b676e9868942567fc02db234b0827ac86ba3
This commit is contained in:
David 2024-07-11 14:22:28 +01:00 committed by Copybot
parent fb26087894
commit 0c7a32b4f2
8 changed files with 212 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
services/web/app/src/Features/Project/ProjectController.js
View file

@ -335,6 +335,7 @@ const _ProjectController = {
'pdfjs-40',
'personal-access-token',
'revert-file',
'review-panel-redesign',
'track-pdf-download',
!anonymous && 'writefull-oauth-promotion',
'ieee-stylesheet',

2
services/web/frontend/extracted-translations.json
View file

@ -849,12 +849,14 @@
"no_borders": "",
"no_caption": "",
"no_comments": "",
"no_comments_or_suggestions": "",
"no_existing_password": "",
"no_folder": "",
"no_image_files_found": "",
"no_members": "",
"no_messages": "",
"no_new_commits_in_github": "",
"no_one_has_commented_or_left_any_suggestions_yet": "",
"no_other_projects_found": "",
"no_pdf_error_explanation": "",
"no_pdf_error_reason_no_content": "",

120
services/web/frontend/js/features/source-editor/components/review-panel/current-file-container.tsx
View file

@ -3,37 +3,18 @@ import Container from './container'
import Toolbar from './toolbar/toolbar'
import Nav from './nav'
import Toggler from './toggler'
import ChangeEntry from './entries/change-entry'
import AggregateChangeEntry from './entries/aggregate-change-entry'
import CommentEntry from './entries/comment-entry'
import AddCommentEntry from './entries/add-comment-entry'
import BulkActionsEntry from './entries/bulk-actions-entry/bulk-actions-entry'
import PositionedEntries from './positioned-entries'
import { useReviewPanelValueContext } from '../../context/review-panel/review-panel-context'
import { useEditorContext } from '../../../../shared/context/editor-context'
import useCodeMirrorContentHeight from '../../hooks/use-codemirror-content-height'
import { ReviewPanelEntry } from '../../../../../../types/review-panel/entry'
import {
ReviewPanelDocEntries,
ThreadId,
} from '../../../../../../types/review-panel/review-panel'
const isEntryAThreadId = (
entry: keyof ReviewPanelDocEntries
): entry is ThreadId => entry !== 'add-comment' && entry !== 'bulk-actions'
import { ReviewPanelDocEntries } from '../../../../../../types/review-panel/review-panel'
import Entry from './entry'
import EmptyState from './empty-state'
import { useFeatureFlag } from '@/shared/context/split-test-context'
function CurrentFileContainer() {
const {
commentThreads,
entries,
openDocId,
permissions,
loadingThreads,
users,
nVisibleSelectedChanges: nChanges,
} = useReviewPanelValueContext()
const { entries, openDocId } = useReviewPanelValueContext()
const contentHeight = useCodeMirrorContentHeight()
const { isRestrictedTokenMember } = useEditorContext()
const currentDocEntries =
openDocId && openDocId in entries ? entries[openDocId] : undefined
@ -44,10 +25,19 @@ function CurrentFileContainer() {
>
}, [currentDocEntries])
const enableEmptyState = useFeatureFlag('review-panel-redesign')
const showEmptyState =
enableEmptyState &&
objectEntries.filter(
([key]) => key !== 'add-comment' && key !== 'bulk-actions'
).length === 0
return (
<Container className="rp-current-file-container">
<div className="review-panel-tools">
<Toolbar />
{showEmptyState && <EmptyState />}
<Nav />
</div>
<Toggler />
@ -63,87 +53,7 @@ function CurrentFileContainer() {
>
{openDocId &&
objectEntries.map(([id, entry]) => {
if (!entry.visible) {
return null
}
if (
isEntryAThreadId(id) &&
(entry.type === 'insert' || entry.type === 'delete')
) {
return (
<ChangeEntry
key={id}
docId={openDocId}
entryId={id}
permissions={permissions}
user={users[entry.metadata.user_id]}
content={entry.content}
offset={entry.offset}
type={entry.type}
focused={entry.focused}
entryIds={entry.entry_ids}
timestamp={entry.metadata.ts}
/>
)
}
if (isEntryAThreadId(id) && entry.type === 'aggregate-change') {
return (
<AggregateChangeEntry
key={id}
docId={openDocId}
entryId={id}
permissions={permissions}
user={users[entry.metadata.user_id]}
content={entry.content}
replacedContent={entry.metadata.replaced_content}
offset={entry.offset}
focused={entry.focused}
entryIds={entry.entry_ids}
timestamp={entry.metadata.ts}
/>
)
}
if (
isEntryAThreadId(id) &&
entry.type === 'comment' &&
!loadingThreads
) {
return (
<CommentEntry
key={id}
docId={openDocId}
threadId={entry.thread_id}
thread={commentThreads[entry.thread_id]}
entryId={id}
offset={entry.offset}
focused={entry.focused}
permissions={permissions}
/>
)
}
if (
entry.type === 'add-comment' &&
permissions.comment &&
!isRestrictedTokenMember
) {
return <AddCommentEntry key={id} />
}
if (entry.type === 'bulk-actions' && permissions.write) {
return (
<BulkActionsEntry
key={id}
entryId={entry.type}
nChanges={nChanges}
/>
)
}
return null
return <Entry key={id} id={id} entry={entry} />
})}
</PositionedEntries>
</div>

22
services/web/frontend/js/features/source-editor/components/review-panel/empty-state.tsx Normal file
View file

@ -0,0 +1,22 @@
import MaterialIcon from '@/shared/components/material-icon'
import { useTranslation } from 'react-i18next'
function EmptyState() {
const { t } = useTranslation()
return (
<div className="rp-empty-state">
<div className="rp-empty-state-inner">
<div className="rp-empty-state-comment-icon">
<MaterialIcon type="question_answer" />
</div>
<p>
<strong>{t('no_comments_or_suggestions')}</strong>
</p>
<p>{t('no_one_has_commented_or_left_any_suggestions_yet')}</p>
</div>
</div>
)
}
export default EmptyState

109
services/web/frontend/js/features/source-editor/components/review-panel/entry.tsx Normal file
View file

@ -0,0 +1,109 @@
import { memo } from 'react'
import ChangeEntry from './entries/change-entry'
import AggregateChangeEntry from './entries/aggregate-change-entry'
import CommentEntry from './entries/comment-entry'
import AddCommentEntry from './entries/add-comment-entry'
import BulkActionsEntry from './entries/bulk-actions-entry/bulk-actions-entry'
import {
ReviewPanelDocEntries,
ThreadId,
} from '../../../../../../types/review-panel/review-panel'
import { useReviewPanelValueContext } from '../../context/review-panel/review-panel-context'
import { useEditorContext } from '../../../../shared/context/editor-context'
type Props = {
entry: ReviewPanelDocEntries[keyof ReviewPanelDocEntries]
id: ThreadId | 'add-comment' | 'bulk-actions'
}
const isEntryAThreadId = (
entry: keyof ReviewPanelDocEntries
): entry is ThreadId => entry !== 'add-comment' && entry !== 'bulk-actions'
function Entry({ entry, id }: Props) {
const {
commentThreads,
openDocId,
permissions,
loadingThreads,
users,
nVisibleSelectedChanges: nChanges,
} = useReviewPanelValueContext()
const { isRestrictedTokenMember } = useEditorContext()
if (!entry.visible || !openDocId) {
return null
}
if (
isEntryAThreadId(id) &&
(entry.type === 'insert' || entry.type === 'delete')
) {
return (
<ChangeEntry
key={id}
docId={openDocId}
entryId={id}
permissions={permissions}
user={users[entry.metadata.user_id]}
content={entry.content}
offset={entry.offset}
type={entry.type}
focused={entry.focused}
entryIds={entry.entry_ids}
timestamp={entry.metadata.ts}
/>
)
}
if (isEntryAThreadId(id) && entry.type === 'aggregate-change') {
return (
<AggregateChangeEntry
key={id}
docId={openDocId}
entryId={id}
permissions={permissions}
user={users[entry.metadata.user_id]}
content={entry.content}
replacedContent={entry.metadata.replaced_content}
offset={entry.offset}
focused={entry.focused}
entryIds={entry.entry_ids}
timestamp={entry.metadata.ts}
/>
)
}
if (isEntryAThreadId(id) && entry.type === 'comment' && !loadingThreads) {
return (
<CommentEntry
key={id}
docId={openDocId}
threadId={entry.thread_id}
thread={commentThreads[entry.thread_id]}
entryId={id}
offset={entry.offset}
focused={entry.focused}
permissions={permissions}
/>
)
}
if (
entry.type === 'add-comment' &&
permissions.comment &&
!isRestrictedTokenMember
) {
return <AddCommentEntry key={id} />
}
if (entry.type === 'bulk-actions' && permissions.write) {
return (
<BulkActionsEntry key={id} entryId={entry.type} nChanges={nChanges} />
)
}
return null
}
export default memo(Entry)

20
services/web/frontend/js/features/source-editor/components/review-panel/overview-container.tsx
View file

@ -6,15 +6,33 @@ import Icon from '../../../../shared/components/icon'
import OverviewFile from './overview-file'
import { useReviewPanelValueContext } from '../../context/review-panel/review-panel-context'
import { useFileTreeData } from '@/shared/context/file-tree-data-context'
import { memo } from 'react'
import { memo, useMemo } from 'react'
import EmptyState from './empty-state'
import { useFeatureFlag } from '@/shared/context/split-test-context'
function OverviewContainer() {
const { entries } = useReviewPanelValueContext()
const { isOverviewLoading } = useReviewPanelValueContext()
const { docs } = useFileTreeData()
const entryCount = useMemo(() => {
return docs
?.map(doc => {
const docEntries = entries[doc.doc.id] ?? {}
return Object.keys(docEntries).filter(
key => key !== 'add-comment' && key !== 'bulk-actions'
).length
})
.reduce((acc, curr) => acc + curr, 0)
}, [docs, entries])
const enableEmptyState = useFeatureFlag('review-panel-redesign')
return (
<Container>
<Toggler />
{enableEmptyState && entryCount === 0 && <EmptyState />}
<Toolbar />
<div
className="rp-entry-list"

42
services/web/frontend/stylesheets/app/editor/review-panel.less
View file

@ -1231,3 +1231,45 @@ button when (@is-overleaf-light = true) {
border: 0;
}
}
.rp-empty-state {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
.rp-empty-state-inner {
position: sticky;
top: 50%;
transform: translateY(-50%);
width: 100%;
padding-left: 16px;
padding-right: 16px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
p {
margin-bottom: 0;
text-align: center;
}
}
.rp-empty-state-comment-icon {
width: 80px;
height: 80px;
background-color: white;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
.material-symbols {
font-size: 32px;
}
}
}

2
services/web/locales/en.json
View file

@ -1243,6 +1243,7 @@
"no_borders": "No borders",
"no_caption": "No caption",
"no_comments": "No comments",
"no_comments_or_suggestions": "No comments or suggestions",
"no_existing_password": "Please use the password reset form to set your password",
"no_featured_templates": "No featured templates",
"no_folder": "No folder",
@ -1251,6 +1252,7 @@
"no_members": "No members",
"no_messages": "No messages",
"no_new_commits_in_github": "No new commits in GitHub since last merge.",
"no_one_has_commented_or_left_any_suggestions_yet": "No one has commented or left any suggestions yet.",
"no_other_projects_found": "No other projects found, please create another project first",
"no_other_sessions": "No other sessions active",
"no_pdf_error_explanation": "This compile didn’t produce a PDF. This can happen if:",