From 2fceaa60857738a664d7da2c012459c5a0d0fe0b Mon Sep 17 00:00:00 2001 From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com> Date: Tue, 6 Jun 2023 16:00:54 +0300 Subject: [PATCH] Merge pull request #13343 from overleaf/ii-review-panel-migration-create-feature-flag [web] Create feature flag for review panel GitOrigin-RevId: e7e83729a536dce1824f604fb66afe1785f4be25 --- .../src/Features/Project/ProjectController.js | 17 +++++++++++++++++ .../app/views/project/editor/editor-pane.pug | 6 +++--- services/web/app/views/project/editor/meta.pug | 1 + .../app/views/source-editor/source-editor.pug | 1 + .../components/codemirror-editor.tsx | 4 ++++ .../components/review-panel/review-panel.tsx | 5 +++++ .../controllers/ReviewPanelController.js | 4 ++++ .../stylesheets/app/editor/review-panel.less | 4 ++++ 8 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 services/web/frontend/js/features/source-editor/components/review-panel/review-panel.tsx diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js index 15dfa4aaa4..7b4608011f 100644 --- a/services/web/app/src/Features/Project/ProjectController.js +++ b/services/web/app/src/Features/Project/ProjectController.js @@ -769,6 +769,21 @@ const ProjectController = { } ) }, + reviewPanelAssignment(cb) { + SplitTestHandler.getAssignment( + req, + res, + 'review-panel', + (error, assignment) => { + // do not fail editor load if assignment fails + if (error) { + cb(null, { variant: 'default' }) + } else { + cb(null, assignment) + } + } + ) + }, accessCheckForOldCompileDomainAssigment(cb) { SplitTestHandler.getAssignment( req, @@ -856,6 +871,7 @@ const ProjectController = { richTextAssignment, onboardingVideoTourAssignment, historyViewAssignment, + reviewPanelAssignment, } ) => { if (err != null) { @@ -1076,6 +1092,7 @@ const ProjectController = { richTextVariant, showOnboardingVideoTour, historyViewReact: historyViewAssignment.variant === 'react', + isReviewPanelReact: reviewPanelAssignment.variant === 'react', showPersonalAccessToken, }) timer.done() diff --git a/services/web/app/views/project/editor/editor-pane.pug b/services/web/app/views/project/editor/editor-pane.pug index e952a075ce..d19dde250b 100644 --- a/services/web/app/views/project/editor/editor-pane.pug +++ b/services/web/app/views/project/editor/editor-pane.pug @@ -53,9 +53,9 @@ include ../../source-editor/source-editor div(ng-if="!editor.newSourceEditor") include ./source-editor - - if !isRestrictedTokenMember - include ./review-panel + div(ng-if="!editor.newSourceEditor || !reviewPanel.isReact") + if !isRestrictedTokenMember + include ./review-panel if moduleIncludesAvailable('editor:symbol-palette') || moduleIncludesAvailable('editor:galileo') .div(vertical-resizable-bottom) diff --git a/services/web/app/views/project/editor/meta.pug b/services/web/app/views/project/editor/meta.pug index ecf9916230..c66b6b1bdd 100644 --- a/services/web/app/views/project/editor/meta.pug +++ b/services/web/app/views/project/editor/meta.pug @@ -42,6 +42,7 @@ meta(name="ol-showCM6SwitchAwaySurvey", data-type="boolean" content=showCM6Switc meta(name="ol-richTextVariant" content=richTextVariant) meta(name="ol-showOnboardingVideoTour", data-type="boolean" content=showOnboardingVideoTour) meta(name="ol-showPersonalAccessToken", data-type="boolean" content=showPersonalAccessToken) +meta(name="ol-isReviewPanelReact", data-type="boolean" content=isReviewPanelReact) if (richTextVariant === 'cm6') meta(name="ol-mathJax3Path" content=mathJax3Path) diff --git a/services/web/app/views/source-editor/source-editor.pug b/services/web/app/views/source-editor/source-editor.pug index e70469a1ce..0356df65d3 100644 --- a/services/web/app/views/source-editor/source-editor.pug +++ b/services/web/app/views/source-editor/source-editor.pug @@ -1,4 +1,5 @@ source-editor#editor( + ng-class="{ 'review-panel-react': reviewPanel.isReact }" ng-if="!editor.showRichText" ng-show="!!editor.sharejs_doc && !editor.opening && multiSelectedCount === 0 && !editor.error_state" ) diff --git a/services/web/frontend/js/features/source-editor/components/codemirror-editor.tsx b/services/web/frontend/js/features/source-editor/components/codemirror-editor.tsx index 7c9c397ce4..afad7a7fe3 100644 --- a/services/web/frontend/js/features/source-editor/components/codemirror-editor.tsx +++ b/services/web/frontend/js/features/source-editor/components/codemirror-editor.tsx @@ -17,6 +17,8 @@ import { dispatchTimer } from '../../../infrastructure/cm6-performance' import importOverleafModules from '../../../../macros/import-overleaf-module.macro' import { FigureModal } from './figure-modal/figure-modal' +import ReviewPanel from './review-panel/review-panel' +import getMeta from '../../../utils/meta' const sourceEditorComponents = importOverleafModules( 'sourceEditorComponents' @@ -29,6 +31,7 @@ function CodeMirrorEditor() { }) const isMounted = useIsMounted() + const isReviewPanelReact = getMeta('ol-isReviewPanelReact') // create the view using the initial state and intercept transactions const viewRef = useRef(null) @@ -57,6 +60,7 @@ function CodeMirrorEditor() { + {isReviewPanelReact && } {sourceEditorComponents.map( ({ import: { default: Component }, path }) => ( diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/review-panel.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/review-panel.tsx new file mode 100644 index 0000000000..2ce6e2cf57 --- /dev/null +++ b/services/web/frontend/js/features/source-editor/components/review-panel/review-panel.tsx @@ -0,0 +1,5 @@ +function ReviewPanel() { + return
Content to be added.
+} + +export default ReviewPanel diff --git a/services/web/frontend/js/ide/review-panel/controllers/ReviewPanelController.js b/services/web/frontend/js/ide/review-panel/controllers/ReviewPanelController.js index cc043682da..e654ab89c0 100644 --- a/services/web/frontend/js/ide/review-panel/controllers/ReviewPanelController.js +++ b/services/web/frontend/js/ide/review-panel/controllers/ReviewPanelController.js @@ -18,6 +18,7 @@ import RangesTracker from '@overleaf/ranges-tracker' import App from '../../../base' import EventEmitter from '../../../utils/EventEmitter' import ColorManager from '../../colors/ColorManager' +import getMeta from '../../../utils/meta' export default App.controller( 'ReviewPanelController', @@ -103,6 +104,7 @@ export default App.controller( // as only one. nVisibleSelectedChanges: 0, entryHover: false, + isReact: getMeta('ol-splitTestVariants')?.['review-panel'] === 'react', } ide.$scope.loadingThreads = true @@ -1151,6 +1153,7 @@ export default App.controller( let _refreshingRangeUsers = false const _refreshedForUserIds = {} + function refreshChangeUsers(refresh_for_user_id) { if (refresh_for_user_id != null) { if (_refreshedForUserIds[refresh_for_user_id] != null) { @@ -1195,6 +1198,7 @@ export default App.controller( } let _threadsLoaded = false + function ensureThreadsAreLoaded() { if (_threadsLoaded) { // We get any updates in real time so only need to load them once. diff --git a/services/web/frontend/stylesheets/app/editor/review-panel.less b/services/web/frontend/stylesheets/app/editor/review-panel.less index ed30f2c11e..2dbbe7d04a 100644 --- a/services/web/frontend/stylesheets/app/editor/review-panel.less +++ b/services/web/frontend/stylesheets/app/editor/review-panel.less @@ -773,6 +773,10 @@ } } +#editor.review-panel-react { + right: initial; +} + #editor-rich-text { .rp-size-expanded & { right: @review-panel-width;