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/extracted-translations.json

@@ -205,6 +205,7 @@
   "back_to_subscription": "",
   "back_to_your_projects": "",
   "basic_compile_time": "",
+  "been_offline_changes_saved_in_browser": "",
   "before_you_use_error_assistant": "",
   "beta_program_already_participating": "",
   "beta_program_benefits": "",
@@ -585,6 +586,7 @@
   "editing": "",
   "editing_captions": "",
   "editing_mode": "",
+  "editing_paused": "",
   "editor": "",
   "editor_disconected_click_to_reconnect": "",
   "editor_font_family": "",

services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs

@@ -53,6 +53,7 @@ export default /** @type {const} */ ([
   'notifications',
   'open_in_new',
   'password',
+  'pause_circle',
   'person',
   'person_edit',
   'picture_as_pdf',

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>
+  )
+}

services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx

@@ -35,6 +35,7 @@ import { useDebugDiffTracker } from '../hooks/use-debug-diff-tracker'
 import { convertFileRefToBinaryFile } from '@/features/ide-react/util/file-view'
 import { useEditorOpenDocContext } from '@/features/ide-react/context/editor-open-doc-context'
 import { useEditorPropertiesContext } from '@/features/ide-react/context/editor-properties-context'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 export interface GotoOffsetOptions {
   gotoOffset: number
@@ -118,6 +119,9 @@ export const EditorManagerProvider: FC<React.PropsWithChildren> = ({
     projectId,
     currentDocument
   )
+  const improvedFlakyConnections = useFeatureFlag(
+    'intermittent-connection-improvements'
+  )
 
   const [globalEditorWatchdogManager] = useState(
     () =>
@@ -573,7 +577,9 @@ export const EditorManagerProvider: FC<React.PropsWithChildren> = ({
         // Ensure that the editor is locked
         setOutOfSync(true)
         // Display the "out of sync" modal
-        showOutOfSyncModal(editorContent || '')
+        if (!improvedFlakyConnections) {
+          showOutOfSyncModal(editorContent || '')
+        }
 
         // Do not forceReopen the document.
         return
@@ -601,6 +607,7 @@ export const EditorManagerProvider: FC<React.PropsWithChildren> = ({
     showOutOfSyncModal,
     setOutOfSync,
     t,
+    improvedFlakyConnections,
   ])
 
   useEventListener(

services/web/frontend/stylesheets/pages/editor/ide-redesign.scss

@@ -3,6 +3,7 @@
   --ide-redesign-color: var(--content-primary-dark);
   --ide-redesign-resizing-background: var(--bg-dark-primary);
   --ide-redesign-color-scheme: dark;
+  --editing-paused-banner-background: var(--bg-dark-tertiary);
 }
 
 @include theme('light') {
@@ -10,6 +11,7 @@
   --ide-redesign-color: var(--content-primary);
   --ide-redesign-resizing-background: var(--white);
   --ide-redesign-color-scheme: light;
+  --editing-paused-banner-background: var(--blue-10);
 }
 
 .ide-redesign-body {
@@ -32,6 +34,19 @@
   }
 }
 
+.editing-paused-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-04);
+  padding: var(--spacing-04) 0;
+  background-color: var(--editing-paused-banner-background);
+  color: var(--content-primary-themed);
+  border-bottom: 1px solid var(--redesign-toolbar-border-divider);
+  font-size: var(--font-size-03);
+  line-height: var(--line-height-03);
+}
+
 .ide-skeleton-block {
   border: 1px solid grey;
   background-color: white;

services/web/locales/en.json

@@ -268,6 +268,7 @@
   "basic_compile_time": "Basic compile time",
   "basic_compile_timeout": "Basic compile timeout",
   "basic_compile_timeout_on_fast_servers": "Basic compile timeout on fast servers",
+  "been_offline_changes_saved_in_browser": "You’ve been offline for a while. Your changes are saved in the browser.",
   "before_you_use_error_assistant": "Before you use Error Assist",
   "best_for_individuals_and_teams_collaborating_on_complex_projects": "Best for individuals and teams collaborating on complex projects.",
   "beta": "Beta",
@@ -755,6 +756,7 @@
   "editing_and_collaboration": "Editing and collaboration",
   "editing_captions": "Editing captions",
   "editing_mode": "Editing mode",
+  "editing_paused": "Editing paused",
   "editor": "Editor",
   "editor_disconected_click_to_reconnect": "Editor disconnected, click anywhere to reconnect.",
   "editor_font_family": "Editor font family",