Merge pull request #12316 from overleaf/td-history-view-shell-and-split-test

Add empty shell for React history view, viewable based on split test

GitOrigin-RevId: 97241d56a052648c7a0d293d323dad4b00ad4159

services/web/app/src/Features/Project/ProjectController.js

@@ -1054,6 +1054,21 @@ const ProjectController = {
             }
           )
         },
+        historyViewAssignment(cb) {
+          SplitTestHandler.getAssignment(
+            req,
+            res,
+            'history-view',
+            (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,
@@ -1138,6 +1153,7 @@ const ProjectController = {
           editorLeftMenuAssignment,
           richTextAssignment,
           onboardingVideoTourAssignment,
+          historyViewAssignment,
         }
       ) => {
         if (err != null) {
@@ -1333,6 +1349,7 @@ const ProjectController = {
               showCM6SwitchAwaySurvey: Settings.showCM6SwitchAwaySurvey,
               richTextVariant: richTextAssignment.variant,
               showOnboardingVideoTour,
+              historyViewReact: historyViewAssignment.variant === 'react',
             })
             timer.done()
           }

services/web/app/views/project/editor/file-tree-history-react.pug

@@ -0,0 +1,3 @@
+aside.editor-sidebar.full-size#history-file-tree(
+	ng-show="history.isReact && ui.view == 'history'"
+)

services/web/app/views/project/editor/main.pug

@@ -13,12 +13,13 @@ else
 	.ui-layout-center
 		include ./header-react
 
-		include ./history/toolbarV2.pug
+		if (!historyViewReact)
+			include ./history/toolbarV2.pug
 
 		main#ide-body(
 			ng-cloak,
 			role="main",
-			ng-class="{ 'ide-history-open' : (ui.view == 'history' && history.isV2) }",
+			ng-class="{ 'ide-history-open' : (ui.view == 'history' && history.isV2 && !history.isReact) }",
 			layout="main",
 			ng-hide="state.loading",
 			resize-on="layout:chat:resize,history:toggle,layout:flat-screen:toggle,south-pane-toggled",
@@ -33,13 +34,19 @@ else
 		)
 			.ui-layout-west
 				include ./file-tree-react
-				include ./file-tree-history
-				include ./history/fileTreeV2
+				if (historyViewReact)
+					include ./file-tree-history-react
+				else
+					include ./file-tree-history
+					include ./history/fileTreeV2
 
 			.ui-layout-center
 				include ./editor
 
-				include ./history
+				if (historyViewReact)
+					history-root
+				else
+					include ./history
 
 			if !isRestrictedTokenMember
 				.ui-layout-east

services/web/frontend/js/features/history/components/history-file-tree.tsx

@@ -0,0 +1,3 @@
+export default function HistoryFileTree() {
+  return <div>History file tree</div>
+}

services/web/frontend/js/features/history/components/history-root.tsx

@@ -0,0 +1,15 @@
+import { createPortal } from 'react-dom'
+import HistoryFileTree from './history-file-tree'
+
+export default function HistoryRoot() {
+  const fileTreeContainer = document.getElementById('history-file-tree')
+
+  return (
+    <>
+      {fileTreeContainer
+        ? createPortal(<HistoryFileTree />, fileTreeContainer)
+        : null}
+      History
+    </>
+  )
+}

services/web/frontend/js/features/history/controllers/history-controller.js

@@ -0,0 +1,6 @@
+import App from '../../../base'
+import { react2angular } from 'react2angular'
+import HistoryRoot from '../components/history-root'
+import { rootContext } from '../../../shared/context/root-context'
+
+App.component('historyRoot', react2angular(rootContext.use(HistoryRoot)))

services/web/frontend/js/ide.js

@@ -68,6 +68,7 @@ import './features/source-editor/controllers/cm6-switch-away-survey-controller'
 import './features/source-editor/controllers/grammarly-warning-controller'
 import './features/outline/controllers/documentation-button-controller'
 import './features/onboarding/controllers/onboarding-video-tour-modal-controller'
+import './features/history/controllers/history-controller'
 import { cleanupServiceWorker } from './utils/service-worker-cleanup'
 import { reportCM6Perf } from './infrastructure/cm6-performance'
 import { reportAcePerf } from './ide/editor/ace-performance'

services/web/frontend/js/ide/history/HistoryV2Manager.js

@@ -36,6 +36,7 @@ import './components/historyLabel'
 import './components/historyFileTree'
 import './components/historyFileEntity'
 import { paywallPrompt } from '../../../../frontend/js/main/account-upgrade'
+import getMeta from '../../utils/meta'
 let HistoryManager
 
 export default HistoryManager = (function () {
@@ -124,6 +125,10 @@ export default HistoryManager = (function () {
       )
     }
 
+    isReact() {
+      return getMeta('ol-splitTestVariants')?.['history-view'] === 'react'
+    }
+
     hardReset() {
       this.$scope.history = {
         isV2: true,
@@ -153,6 +158,7 @@ export default HistoryManager = (function () {
         showOnlyLabels: this._getShowOnlyLabelsUserPref(),
         labels: null,
         loadingFileTree: true,
+        isReact: this.isReact(),
       }
       const _deregisterFeatureWatcher = this.$scope.$watch(
         'project.features.versioning',

services/web/test/karma/ide/history/HistoryV2ManagerTests.js

@@ -42,6 +42,7 @@ export default describe('HistoryV2Manager', function () {
       showOnlyLabels: false,
       labels: null,
       loadingFileTree: true,
+      isReact: false,
     }
 
     this.sampleUpdates = [