From e76bcbec8d5dc541a01afeeff6bfa77baf9ed824 Mon Sep 17 00:00:00 2001 From: Tim Down <158919+timdown@users.noreply.github.com> Date: Wed, 22 Mar 2023 11:21:58 +0000 Subject: [PATCH] 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 --- .../src/Features/Project/ProjectController.js | 17 +++++++++++++++++ .../project/editor/file-tree-history-react.pug | 3 +++ services/web/app/views/project/editor/main.pug | 17 ++++++++++++----- .../history/components/history-file-tree.tsx | 3 +++ .../history/components/history-root.tsx | 15 +++++++++++++++ .../history/controllers/history-controller.js | 6 ++++++ services/web/frontend/js/ide.js | 1 + .../frontend/js/ide/history/HistoryV2Manager.js | 6 ++++++ .../karma/ide/history/HistoryV2ManagerTests.js | 1 + 9 files changed, 64 insertions(+), 5 deletions(-) create mode 100644 services/web/app/views/project/editor/file-tree-history-react.pug create mode 100644 services/web/frontend/js/features/history/components/history-file-tree.tsx create mode 100644 services/web/frontend/js/features/history/components/history-root.tsx create mode 100644 services/web/frontend/js/features/history/controllers/history-controller.js diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js index c08d9e525a..cb6ab7d193 100644 --- a/services/web/app/src/Features/Project/ProjectController.js +++ b/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() } diff --git a/services/web/app/views/project/editor/file-tree-history-react.pug b/services/web/app/views/project/editor/file-tree-history-react.pug new file mode 100644 index 0000000000..072eaca47a --- /dev/null +++ b/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'" +) diff --git a/services/web/app/views/project/editor/main.pug b/services/web/app/views/project/editor/main.pug index 65d5d8cb33..6995188e7f 100644 --- a/services/web/app/views/project/editor/main.pug +++ b/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 diff --git a/services/web/frontend/js/features/history/components/history-file-tree.tsx b/services/web/frontend/js/features/history/components/history-file-tree.tsx new file mode 100644 index 0000000000..98d39ebb87 --- /dev/null +++ b/services/web/frontend/js/features/history/components/history-file-tree.tsx @@ -0,0 +1,3 @@ +export default function HistoryFileTree() { + return
History file tree
+} diff --git a/services/web/frontend/js/features/history/components/history-root.tsx b/services/web/frontend/js/features/history/components/history-root.tsx new file mode 100644 index 0000000000..5932eaf58b --- /dev/null +++ b/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(, fileTreeContainer) + : null} + History + + ) +} diff --git a/services/web/frontend/js/features/history/controllers/history-controller.js b/services/web/frontend/js/features/history/controllers/history-controller.js new file mode 100644 index 0000000000..4441ee5f34 --- /dev/null +++ b/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))) diff --git a/services/web/frontend/js/ide.js b/services/web/frontend/js/ide.js index b67776e3c6..aef77df081 100644 --- a/services/web/frontend/js/ide.js +++ b/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' diff --git a/services/web/frontend/js/ide/history/HistoryV2Manager.js b/services/web/frontend/js/ide/history/HistoryV2Manager.js index 740cc66791..6a0825da73 100644 --- a/services/web/frontend/js/ide/history/HistoryV2Manager.js +++ b/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', diff --git a/services/web/test/karma/ide/history/HistoryV2ManagerTests.js b/services/web/test/karma/ide/history/HistoryV2ManagerTests.js index 8793ef9b86..61a45a2e02 100644 --- a/services/web/test/karma/ide/history/HistoryV2ManagerTests.js +++ b/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 = [