Merge pull request #13343 from overleaf/ii-review-panel-migration-create-feature-flag

[web] Create feature flag for review panel

GitOrigin-RevId: e7e83729a536dce1824f604fb66afe1785f4be25

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()

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)

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)
 

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"
 )

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<EditorView | null>(null)
@@ -57,6 +60,7 @@ function CodeMirrorEditor() {
         <FigureModal />
         <CodeMirrorSearch />
         <CodeMirrorToolbar />
+        {isReviewPanelReact && <ReviewPanel />}
         {sourceEditorComponents.map(
           ({ import: { default: Component }, path }) => (
             <Component key={path} />

services/web/frontend/js/features/source-editor/components/review-panel/review-panel.tsx

@@ -0,0 +1,5 @@
+function ReviewPanel() {
+  return <div>Content to be added.</div>
+}
+
+export default ReviewPanel

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.

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;