Merge pull request #35393 from overleaf/ds-adding-paused-banner

[WEB] Add "Editing Paused" banner when we lock the editor due to network stall

GitOrigin-RevId: 6e8d984f03afb6a29ed900cd342a8a8a655e20d0

services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx

@@ -5,6 +5,7 @@ import PdfPreview from '@/features/pdf-preview/components/pdf-preview'
 import { RailLayout } from '../rail/rail'
 import { Toolbar } from '../toolbar/toolbar'
 import { HorizontalToggler } from '@/features/ide-react/components/resize/horizontal-toggler'
+import { EditingPausedBanner } from '../toolbar/editing-paused-banner'
 import { useTranslation } from 'react-i18next'
 import { usePdfPane } from '@/features/ide-react/hooks/use-pdf-pane'
 import { useLayoutContext } from '@/shared/context/layout-context'
@@ -46,6 +47,7 @@ export default function MainLayout() {
   return (
     <div className="ide-redesign-main">
       <Toolbar />
+      <EditingPausedBanner />
       <div className="ide-redesign-body">
         <PanelGroup
           autoSaveId="ide-redesign-outer-layout"

services/web/frontend/js/features/ide-react/components/toolbar/editing-paused-banner.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import MaterialIcon from '@/shared/components/material-icon'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
+import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
+import { useUnsavedDocsContext } from '@/features/ide-react/context/unsaved-docs-context'
+
+export const EditingPausedBanner: FC = () => {
+  const { t } = useTranslation()
+  const intermittentConnectionImprovementsEnabled = useFeatureFlag(
+    'intermittent-connection-improvements'
+  )
+  const { outOfSync } = useIdeReactContext()
+  const { isLocked } = useUnsavedDocsContext()
+
+  if (!intermittentConnectionImprovementsEnabled || (!isLocked && !outOfSync)) {
+    return null
+  }
+
+  return (
+    <div className="editing-paused-banner" role="alert">
+      <MaterialIcon type="pause_circle" unfilled />
+      <span>
+        <strong>{t('editing_paused')}</strong>{' '}
+        {t('been_offline_changes_saved_in_browser')}
+      </span>
+    </div>
+  )
+}