Merge pull request #12434 from overleaf/ii-history-react-feature-flag

[web] Fix history view feature flag

GitOrigin-RevId: af2e76074ed43ec1ed1b877a6ffd403abab48ec8

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

@@ -1,12 +1,3 @@
-aside.editor-sidebar.full-size#history-file-tree(
-	ng-controller="ReactFileTreeController"
+aside.editor-sidebar.full-size.file-tree#history-file-tree(
 	ng-show="history.isReact && ui.view == 'history'"
 )
-	.history-file-tree-inner.file-tree
-		history-file-tree-react(
-			on-select="onSelect"
-			ref-providers="refProviders"
-			reindex-references="reindexReferences"
-			set-ref-provider-enabled="setRefProviderEnabled"
-			set-started-free-trial="setStartedFreeTrial"
-		)

services/web/frontend/js/features/history/components/diff-view/main.tsx

@@ -2,7 +2,7 @@ import { useHistoryContext } from '../../context/history-context'
 import { diffDoc } from '../../services/api'
 import { useEffect } from 'react'
 import { DocDiffResponse, Highlight } from '../../services/types/doc'
-import { highlightsFromDiffResponse } from '../../util/highlights-from-diff-response'
+import { highlightsFromDiffResponse } from '../../utils/highlights-from-diff-response'
 import DocumentDiffViewer from './document-diff-viewer'
 import useAsync from '../../../../shared/hooks/use-async'
 import { useTranslation } from 'react-i18next'

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

@@ -1,9 +1,14 @@
 import ChangeList from './change-list/change-list'
 import DiffView from './diff-view/diff-view'
 import { useLayoutContext } from '../../../shared/context/layout-context'
-import { useHistoryContext } from '../context/history-context'
+import { HistoryProvider, useHistoryContext } from '../context/history-context'
+import { createPortal } from 'react-dom'
+import HistoryFileTree from './history-file-tree'
+import getMeta from '../../../utils/meta'
 
-export default function HistoryRoot() {
+const fileTreeContainer = document.getElementById('history-file-tree')
+
+function Main() {
   const { view } = useLayoutContext()
   const { updates } = useHistoryContext()
 
@@ -12,9 +17,37 @@ export default function HistoryRoot() {
   }
 
   return (
-    <div className="history-react">
-      <DiffView />
-      <ChangeList />
-    </div>
+    <>
+      {fileTreeContainer
+        ? createPortal(
+            <HistoryFileTree
+              onSelect={() => {}}
+              refProviders={{}}
+              reindexReferences={() => {}}
+              setRefProviderEnabled={() => {}}
+              setStartedFreeTrial={() => {}}
+            />,
+            fileTreeContainer
+          )
+        : null}
+      <div className="history-react">
+        <DiffView />
+        <ChangeList />
+      </div>
+    </>
+  )
+}
+
+export default function HistoryRoot() {
+  const isReact = getMeta('ol-splitTestVariants')?.['history-view'] === 'react'
+
+  if (!isReact) {
+    return null
+  }
+
+  return (
+    <HistoryProvider>
+      <Main />
+    </HistoryProvider>
   )
 }

services/web/frontend/js/features/history/context/history-context.tsx

@@ -42,8 +42,9 @@ function useHistory() {
   })
   /* eslint-enable no-unused-vars */
 
-  const { isLoading, isError, error, data, runAsync } =
-    useAsync<{ updates: Update[] }>()
+  const { isLoading, isError, error, data, runAsync } = useAsync<{
+    updates: Update[]
+  }>()
   const updates = useMemo(() => data?.updates ?? [], [data?.updates])
   const loadingFileTree = true
 

services/web/frontend/js/shared/context/root-context.js

@@ -13,7 +13,6 @@ import { ProjectProvider } from './project-context'
 import { SplitTestProvider } from './split-test-context'
 import { FileTreeDataProvider } from './file-tree-data-context'
 import { ProjectSettingsProvider } from '../../features/editor-left-menu/context/project-settings-context'
-import { HistoryProvider } from '../../features/history/context/history-context'
 
 export function ContextRoot({ children, ide, settings }) {
   return (
@@ -26,13 +25,11 @@ export function ContextRoot({ children, ide, settings }) {
                 <EditorProvider settings={settings}>
                   <ProjectSettingsProvider>
                     <LayoutProvider>
-                      <HistoryProvider>
-                        <LocalCompileProvider>
-                          <DetachCompileProvider>
-                            <ChatProvider>{children}</ChatProvider>
-                          </DetachCompileProvider>
-                        </LocalCompileProvider>
-                      </HistoryProvider>
+                      <LocalCompileProvider>
+                        <DetachCompileProvider>
+                          <ChatProvider>{children}</ChatProvider>
+                        </DetachCompileProvider>
+                      </LocalCompileProvider>
                     </LayoutProvider>
                   </ProjectSettingsProvider>
                 </EditorProvider>