Merge pull request #16335 from overleaf/ae-real-time-down

[ide-react] Improve handling of lost connection

GitOrigin-RevId: 89b641b2beca4f9de65551e6873b3c8c11bb1695

services/web/frontend/js/features/ide-react/components/unsaved-docs/unsaved-docs-alert.tsx

@@ -6,14 +6,14 @@ import { useTranslation } from 'react-i18next'
 export const UnsavedDocsAlert: FC<{ unsavedDocs: Map<string, number> }> = ({
   unsavedDocs,
 }) => (
-  <div className="global-alerts">
+  <>
     {[...unsavedDocs.entries()].map(
       ([docId, seconds]) =>
         seconds > 8 && (
           <UnsavedDocAlert key={docId} docId={docId} seconds={seconds} />
         )
     )}
-  </div>
+  </>
 )
 
 const UnsavedDocAlert: FC<{ docId: string; seconds: number }> = ({

services/web/frontend/js/features/ide-react/components/unsaved-docs/unsaved-docs-locked-modal.tsx

@@ -8,6 +8,7 @@ export const UnsavedDocsLockedModal: FC = () => {
 
   return (
     <AccessibleModal
+      show
       onHide={() => {}} // It's not possible to hide this modal, but it's a required prop
       className="lock-editor-modal"
       backdrop={false}

services/web/frontend/js/features/ide-react/components/unsaved-docs/unsaved-docs.tsx

@@ -5,6 +5,8 @@ import { PermissionsLevel } from '@/features/ide-react/types/permissions'
 import { UnsavedDocsLockedModal } from '@/features/ide-react/components/unsaved-docs/unsaved-docs-locked-modal'
 import { UnsavedDocsAlert } from '@/features/ide-react/components/unsaved-docs/unsaved-docs-alert'
 import useEventListener from '@/shared/hooks/use-event-listener'
+import { createPortal } from 'react-dom'
+import { useGlobalAlertsContainer } from '@/features/ide-react/context/global-alerts-context'
 
 const MAX_UNSAVED_SECONDS = 15 // lock the editor after this time if unsaved
 
@@ -13,6 +15,7 @@ export const UnsavedDocs: FC = () => {
   const { permissionsLevel, setPermissionsLevel } = useEditorContext()
   const [isLocked, setIsLocked] = useState(false)
   const [unsavedDocs, setUnsavedDocs] = useState(new Map<string, number>())
+  const globalAlertsContainer = useGlobalAlertsContainer()
 
   // always contains the latest value
   const previousUnsavedDocsRef = useRef(unsavedDocs)
@@ -99,7 +102,12 @@ export const UnsavedDocs: FC = () => {
   return (
     <>
       {isLocked && <UnsavedDocsLockedModal />}
-      {unsavedDocs.size > 0 && <UnsavedDocsAlert unsavedDocs={unsavedDocs} />}
+      {unsavedDocs.size > 0 &&
+        globalAlertsContainer &&
+        createPortal(
+          <UnsavedDocsAlert unsavedDocs={unsavedDocs} />,
+          globalAlertsContainer
+        )}
     </>
   )
 }