From 225de683c71c3de6b00f6b416cb67714aedfb3bb Mon Sep 17 00:00:00 2001 From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com> Date: Fri, 7 Jul 2023 13:13:25 +0300 Subject: [PATCH] Merge pull request #13687 from overleaf/ii-review-panel-migration-add-comment-entry [web] Create add comment entry GitOrigin-RevId: 019f508eeb3982fce082df153e56d6c3c3e3bae5 --- .../web/frontend/extracted-translations.json | 3 + .../review-panel/current-file-container.tsx | 2 +- .../entries/add-comment-entry.tsx | 109 +++++++++++++++++- .../entries/aggregate-change-entry.tsx | 5 +- .../review-panel/entries/change-entry.tsx | 8 +- .../review-panel/entries/comment-entry.tsx | 7 +- .../review-panel/entries/comment.tsx | 1 + .../review-panel/entries/entry-callout.tsx | 7 ++ .../hooks/use-angular-review-panel-state.ts | 4 + .../review-panel/types/review-panel-state.ts | 1 + .../review-panel/review-panel.spec.tsx | 11 ++ services/web/types/review-panel/entry.ts | 2 +- 12 files changed, 146 insertions(+), 14 deletions(-) create mode 100644 services/web/frontend/js/features/source-editor/components/review-panel/entries/entry-callout.tsx diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 14290768b6..52229c81c9 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -28,6 +28,7 @@ "add_another_email": "", "add_another_token": "", "add_comma_separated_emails_help": "", + "add_comment": "", "add_company_details": "", "add_email_to_claim_features": "", "add_files": "", @@ -36,6 +37,7 @@ "add_or_remove_project_from_tag": "", "add_role_and_department": "", "add_to_tag": "", + "add_your_comment_here": "", "add_your_first_group_member_now": "", "added_by_on": "", "adding": "", @@ -137,6 +139,7 @@ "collabs_per_proj": "", "collabs_per_proj_single": "", "collapse": "", + "comment": "", "commit": "", "common": "", "commons_plan_tooltip": "", diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/current-file-container.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/current-file-container.tsx index 73b4d51fbd..da4fbd0aee 100644 --- a/services/web/frontend/js/features/source-editor/components/review-panel/current-file-container.tsx +++ b/services/web/frontend/js/features/source-editor/components/review-panel/current-file-container.tsx @@ -110,7 +110,7 @@ function CurrentFileContainer() { } if (entry.type === 'add-comment' && permissions.comment) { - return + return } if (entry.type === 'bulk-actions') { diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/entries/add-comment-entry.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/entries/add-comment-entry.tsx index 15f35acefe..570858aaaf 100644 --- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/add-comment-entry.tsx +++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/add-comment-entry.tsx @@ -1,7 +1,112 @@ +import { useTranslation } from 'react-i18next' +import { useState } from 'react' import EntryContainer from './entry-container' +import EntryCallout from './entry-callout' +import EntryActions from './entry-actions' +import AutoExpandingTextArea from '../../../../../shared/components/auto-expanding-text-area' +import Icon from '../../../../../shared/components/icon' +import { useReviewPanelValueContext } from '../../../context/review-panel/review-panel-context' +import classnames from 'classnames' +import { ReviewPanelAddCommentEntry } from '../../../../../../../types/review-panel/entry' -function AddCommentEntry() { - return Add comment entry +type AddCommentEntryProps = { + entry: ReviewPanelAddCommentEntry +} + +function AddCommentEntry({ entry }: AddCommentEntryProps) { + const { t } = useTranslation() + const { submitNewComment, handleLayoutChange } = useReviewPanelValueContext() + + const [content, setContent] = useState('') + const [isAdding, setIsAdding] = useState(false) + + const handleStartNewComment = () => { + setIsAdding(true) + handleLayoutChange() + } + + const handleSubmitNewComment = () => { + submitNewComment(content) + setIsAdding(false) + setContent('') + } + + const handleCancelNewComment = () => { + setIsAdding(false) + setContent('') + handleLayoutChange() + } + + const handleCommentKeyPress = ( + e: React.KeyboardEvent + ) => { + const target = e.target as HTMLTextAreaElement + + if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.metaKey) { + e.preventDefault() + if (content.length) { + handleSubmitNewComment() + } + } + + if (['PageDown', 'PageUp'].includes(e.key)) { + if (target.closest('textarea')) { + e.preventDefault() + } + } + } + + return ( + + +
+ {isAdding ? ( + <> +
+ setContent(e.target.value)} + onKeyPress={handleCommentKeyPress} + onResize={handleLayoutChange} + placeholder={t('add_your_comment_here')} + value={content} + autoFocus // eslint-disable-line jsx-a11y/no-autofocus + /> +
+ + + {t('cancel')} + + + {t('comment')} + + + + ) : ( + + )} +
+ + ) } export default AddCommentEntry diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx index 9ddd9451b9..a0cebd4876 100644 --- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx +++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx @@ -1,6 +1,7 @@ import { useTranslation } from 'react-i18next' import { useState } from 'react' import EntryContainer from './entry-container' +import EntryCallout from './entry-callout' import EntryActions from './entry-actions' import Icon from '../../../../../shared/components/icon' import { useReviewPanelValueContext } from '../../../context/review-panel/review-panel-context' @@ -85,8 +86,8 @@ function AggregateChangeEntry({ onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} > -
-
-
e.stopPropagation()} onResize={handleLayoutChange} + autoFocus // eslint-disable-line jsx-a11y/no-autofocus /> ) : ( <> diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/entries/entry-callout.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/entries/entry-callout.tsx new file mode 100644 index 0000000000..282791f2b6 --- /dev/null +++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/entry-callout.tsx @@ -0,0 +1,7 @@ +import classnames from 'classnames' + +function EntryCallout({ className, ...rest }: React.ComponentProps<'div'>) { + return
+} + +export default EntryCallout diff --git a/services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts b/services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts index 82566600dd..849c99d6af 100644 --- a/services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts +++ b/services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts @@ -71,6 +71,8 @@ function useAngularReviewPanelState(): ReviewPanelState { >('reviewPanel.trackChangesForGuestsAvailable') const [resolveComment] = useScopeValue>('resolveComment') + const [submitNewComment] = + useScopeValue>('submitNewComment') const [deleteComment] = useScopeValue>('deleteComment') const [gotoEntry] = useScopeValue>('gotoEntry') @@ -155,6 +157,7 @@ function useAngularReviewPanelState(): ReviewPanelState { refreshResolvedCommentsDropdown, acceptChanges, rejectChanges, + submitNewComment, }), [ collapsed, @@ -191,6 +194,7 @@ function useAngularReviewPanelState(): ReviewPanelState { refreshResolvedCommentsDropdown, acceptChanges, rejectChanges, + submitNewComment, ] ) diff --git a/services/web/frontend/js/features/source-editor/context/review-panel/types/review-panel-state.ts b/services/web/frontend/js/features/source-editor/context/review-panel/types/review-panel-state.ts index d022ef625e..9c8bf61deb 100644 --- a/services/web/frontend/js/features/source-editor/context/review-panel/types/review-panel-state.ts +++ b/services/web/frontend/js/features/source-editor/context/review-panel/types/review-panel-state.ts @@ -59,6 +59,7 @@ export interface ReviewPanelState { refreshResolvedCommentsDropdown: () => Promise acceptChanges: (entryIds: unknown) => void rejectChanges: (entryIds: unknown) => void + submitNewComment: (content: string) => void } updaterFns: { handleSetSubview: (subView: SubView) => void diff --git a/services/web/test/frontend/features/review-panel/review-panel.spec.tsx b/services/web/test/frontend/features/review-panel/review-panel.spec.tsx index 571c4c0911..257867acf6 100644 --- a/services/web/test/frontend/features/review-panel/review-panel.spec.tsx +++ b/services/web/test/frontend/features/review-panel/review-panel.spec.tsx @@ -221,6 +221,17 @@ describe('', function () { it.skip('renders changed entries in overview mode', function () {}) }) + describe('add comment entry', function () { + // eslint-disable-next-line mocha/no-skipped-tests + it.skip('renders `add comment button`', function () {}) + + // eslint-disable-next-line mocha/no-skipped-tests + it.skip('cancels adding comment', function () {}) + + // eslint-disable-next-line mocha/no-skipped-tests + it.skip('adds comment', function () {}) + }) + describe('overview mode', function () { // eslint-disable-next-line mocha/no-skipped-tests it.skip('shows list of files changed', function () {}) diff --git a/services/web/types/review-panel/entry.ts b/services/web/types/review-panel/entry.ts index f046d9adeb..faf78a308d 100644 --- a/services/web/types/review-panel/entry.ts +++ b/services/web/types/review-panel/entry.ts @@ -53,7 +53,7 @@ export interface ReviewPanelAggregateChangeEntry extends ReviewPanelBaseEntry { } } -interface ReviewPanelAddCommentEntry extends ReviewPanelBaseEntry { +export interface ReviewPanelAddCommentEntry extends ReviewPanelBaseEntry { type: 'add-comment' }