From dfda9d06779463d1a766f4af7bc9635ede6e189a Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Mon, 3 Apr 2023 11:13:56 +0300
Subject: [PATCH] Merge pull request #12434 from
 overleaf/ii-history-react-feature-flag

[web] Fix history view feature flag

GitOrigin-RevId: af2e76074ed43ec1ed1b877a6ffd403abab48ec8
---
 .../editor/file-tree-history-react.pug        | 11 +----
 .../history/components/diff-view/main.tsx     |  2 +-
 .../history/components/history-root.tsx       | 45 ++++++++++++++++---
 .../history/context/history-context.tsx       |  5 ++-
 .../highlights-from-diff-response.ts          |  0
 .../js/shared/context/root-context.js         | 13 +++---
 6 files changed, 49 insertions(+), 27 deletions(-)
 rename services/web/frontend/js/features/history/{util => utils}/highlights-from-diff-response.ts (100%)

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
index 02dfe6ea25..234d8f1622 100644
--- a/services/web/app/views/project/editor/file-tree-history-react.pug
+++ b/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"
-		)
diff --git a/services/web/frontend/js/features/history/components/diff-view/main.tsx b/services/web/frontend/js/features/history/components/diff-view/main.tsx
index 52248eae3e..a0c8599d78 100644
--- a/services/web/frontend/js/features/history/components/diff-view/main.tsx
+++ b/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'
diff --git a/services/web/frontend/js/features/history/components/history-root.tsx b/services/web/frontend/js/features/history/components/history-root.tsx
index 09484c9dc5..f0ba4c5a1d 100644
--- a/services/web/frontend/js/features/history/components/history-root.tsx
+++ b/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>
   )
 }
diff --git a/services/web/frontend/js/features/history/context/history-context.tsx b/services/web/frontend/js/features/history/context/history-context.tsx
index 583fbd1943..4c73c6b6c4 100644
--- a/services/web/frontend/js/features/history/context/history-context.tsx
+++ b/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
 
diff --git a/services/web/frontend/js/features/history/util/highlights-from-diff-response.ts b/services/web/frontend/js/features/history/utils/highlights-from-diff-response.ts
similarity index 100%
rename from services/web/frontend/js/features/history/util/highlights-from-diff-response.ts
rename to services/web/frontend/js/features/history/utils/highlights-from-diff-response.ts
diff --git a/services/web/frontend/js/shared/context/root-context.js b/services/web/frontend/js/shared/context/root-context.js
index 7bbbbb4774..7808d7f689 100644
--- a/services/web/frontend/js/shared/context/root-context.js
+++ b/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>