From 2340b1b25e256e7dd99e786cfec80d854dae8831 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Fri, 20 May 2022 09:15:49 +0100
Subject: [PATCH] Add "[PDF]" prefix to detached window title (#8039)

* Move DetachProvider outside EditorProvider
* Add "[PDF]" prefix to detached window title

GitOrigin-RevId: 7d09f4053069b20d55a2a04a8f29f90b973e50b9
---
 .../js/shared/context/detach-context.js       |  3 +++
 .../js/shared/context/editor-context.js       | 27 ++++++++++++++-----
 .../js/shared/context/root-context.js         |  8 +++---
 .../test/frontend/helpers/editor-providers.js |  8 +++---
 4 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/services/web/frontend/js/shared/context/detach-context.js b/services/web/frontend/js/shared/context/detach-context.js
index c6008d88db..e9b21c9d9d 100644
--- a/services/web/frontend/js/shared/context/detach-context.js
+++ b/services/web/frontend/js/shared/context/detach-context.js
@@ -135,6 +135,9 @@ DetachProvider.propTypes = {
 
 export function useDetachContext(propTypes) {
   const data = useContext(DetachContext)
+  if (!data) {
+    throw new Error('useDetachContext is only available inside DetachProvider')
+  }
   PropTypes.checkPropTypes(propTypes, data, 'data', 'DetachContext.Provider')
   return data
 }
diff --git a/services/web/frontend/js/shared/context/editor-context.js b/services/web/frontend/js/shared/context/editor-context.js
index 04533082d6..1fdda391c7 100644
--- a/services/web/frontend/js/shared/context/editor-context.js
+++ b/services/web/frontend/js/shared/context/editor-context.js
@@ -10,6 +10,7 @@ import useScopeValue from '../hooks/use-scope-value'
 import useBrowserWindow from '../hooks/use-browser-window'
 import { useIdeContext } from './ide-context'
 import { useProjectContext } from './project-context'
+import { useDetachContext } from './detach-context'
 
 export const EditorContext = createContext()
 
@@ -41,6 +42,8 @@ EditorContext.Provider.propTypes = {
 export function EditorProvider({ children, settings }) {
   const ide = useIdeContext()
 
+  const { role } = useDetachContext()
+
   const { owner, features } = useProjectContext({
     owner: PropTypes.shape({
       _id: PropTypes.string.isRequired,
@@ -107,12 +110,24 @@ export function EditorProvider({ children, settings }) {
 
   const { setTitle } = useBrowserWindow()
   useEffect(() => {
-    setTitle(
-      `${projectName ? projectName + ' - ' : ''}Online LaTeX Editor ${
-        window.ExposedSettings.appName
-      }`
-    )
-  }, [projectName, setTitle])
+    const parts = []
+
+    if (role === 'detached') {
+      parts.push('[PDF]')
+    }
+
+    if (projectName) {
+      parts.push(projectName)
+      parts.push('-')
+    }
+
+    parts.push('Online LaTeX Editor')
+    parts.push(window.ExposedSettings.appName)
+
+    const title = parts.join(' ')
+
+    setTitle(title)
+  }, [projectName, setTitle, role])
 
   const insertSymbol = useCallback(symbol => {
     window.dispatchEvent(
diff --git a/services/web/frontend/js/shared/context/root-context.js b/services/web/frontend/js/shared/context/root-context.js
index eb425fa5ea..bdc1c6a681 100644
--- a/services/web/frontend/js/shared/context/root-context.js
+++ b/services/web/frontend/js/shared/context/root-context.js
@@ -20,8 +20,8 @@ export function ContextRoot({ children, ide, settings }) {
         <UserProvider>
           <ProjectProvider>
             <FileTreeDataProvider>
-              <EditorProvider settings={settings}>
-                <DetachProvider>
+              <DetachProvider>
+                <EditorProvider settings={settings}>
                   <LayoutProvider>
                     <LocalCompileProvider>
                       <DetachCompileProvider>
@@ -29,8 +29,8 @@ export function ContextRoot({ children, ide, settings }) {
                       </DetachCompileProvider>
                     </LocalCompileProvider>
                   </LayoutProvider>
-                </DetachProvider>
-              </EditorProvider>
+                </EditorProvider>
+              </DetachProvider>
             </FileTreeDataProvider>
           </ProjectProvider>
         </UserProvider>
diff --git a/services/web/test/frontend/helpers/editor-providers.js b/services/web/test/frontend/helpers/editor-providers.js
index 72dca645e1..c81c921d3b 100644
--- a/services/web/test/frontend/helpers/editor-providers.js
+++ b/services/web/test/frontend/helpers/editor-providers.js
@@ -109,15 +109,15 @@ export function EditorProviders({
         <UserProvider>
           <ProjectProvider>
             <FileTreeDataProvider>
-              <EditorProvider settings={{}}>
-                <DetachProvider>
+              <DetachProvider>
+                <EditorProvider settings={{}}>
                   <LayoutProvider>
                     <LocalCompileProvider>
                       <DetachCompileProvider>{children}</DetachCompileProvider>
                     </LocalCompileProvider>
                   </LayoutProvider>
-                </DetachProvider>
-              </EditorProvider>
+                </EditorProvider>
+              </DetachProvider>
             </FileTreeDataProvider>
           </ProjectProvider>
         </UserProvider>