[web] hide all toasts when offline (#35400)

GitOrigin-RevId: cf179bf7a761ddaae56f3e5bab6327b0f3625fb5

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

@@ -7,6 +7,7 @@ import { createPortal } from 'react-dom'
 import { useGlobalAlertsContainer } from '@/features/ide-react/context/global-alerts-context'
 import Notification from '@/shared/components/notification'
 import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 const rollingBuildsUpdatedAlert: Array<{
   import: { default: ElementType }
@@ -23,6 +24,9 @@ export function Alerts() {
     secondsUntilReconnect,
   } = useConnectionContext()
   const globalAlertsContainer = useGlobalAlertsContainer()
+  const improvedFlakyConnections = useFeatureFlag(
+    'intermittent-connection-improvements'
+  )
 
   if (!globalAlertsContainer) {
     return null
@@ -36,56 +40,60 @@ export function Alerts() {
         )
       )}
 
-      {connectionState.forceDisconnected &&
-      // hide "disconnected" banner when displaying out of sync modal
-      connectionState.error !== 'out-of-sync' ? (
-        <div className="notification-list">
-          <Notification
-            type="error"
-            content={<strong>{t('disconnected')}</strong>}
-          />
-        </div>
-      ) : null}
+      {!improvedFlakyConnections && (
+        <>
+          {connectionState.forceDisconnected &&
+          // hide "disconnected" banner when displaying out of sync modal
+          connectionState.error !== 'out-of-sync' ? (
+            <div className="notification-list">
+              <Notification
+                type="error"
+                content={<strong>{t('disconnected')}</strong>}
+              />
+            </div>
+          ) : null}
 
-      {connectionState.reconnectAt ? (
-        <LostConnectionAlert
-          reconnectAt={connectionState.reconnectAt}
-          tryReconnectNow={tryReconnectNow}
-        />
-      ) : null}
+          {connectionState.reconnectAt ? (
+            <LostConnectionAlert
+              reconnectAt={connectionState.reconnectAt}
+              tryReconnectNow={tryReconnectNow}
+            />
+          ) : null}
 
-      {isStillReconnecting ? (
-        <div className="notification-list">
-          <Notification
-            type="warning"
-            content={<strong>{t('reconnecting')}…</strong>}
-          />
-        </div>
-      ) : null}
+          {isStillReconnecting ? (
+            <div className="notification-list">
+              <Notification
+                type="warning"
+                content={<strong>{t('reconnecting')}…</strong>}
+              />
+            </div>
+          ) : null}
 
-      {connectionState.inactiveDisconnect ||
-      (connectionState.readyState === WebSocket.CLOSED &&
-        (connectionState.error === 'rate-limited' ||
-          connectionState.error === 'unable-to-connect') &&
-        !secondsUntilReconnect()) ? (
-        <div className="notification-list">
-          <Notification
-            type="warning"
-            content={
-              <strong>{t('editor_disconected_click_to_reconnect')}</strong>
-            }
-          />
-        </div>
-      ) : null}
+          {connectionState.inactiveDisconnect ||
+          (connectionState.readyState === WebSocket.CLOSED &&
+            (connectionState.error === 'rate-limited' ||
+              connectionState.error === 'unable-to-connect') &&
+            !secondsUntilReconnect()) ? (
+            <div className="notification-list">
+              <Notification
+                type="warning"
+                content={
+                  <strong>{t('editor_disconected_click_to_reconnect')}</strong>
+                }
+              />
+            </div>
+          ) : null}
 
-      {debugging ? (
-        <div className="notification-list">
-          <Notification
-            type="warning"
-            content={<strong>Connected: {isConnected.toString()}</strong>}
-          />
-        </div>
-      ) : null}
+          {debugging ? (
+            <div className="notification-list">
+              <Notification
+                type="warning"
+                content={<strong>Connected: {isConnected.toString()}</strong>}
+              />
+            </div>
+          ) : null}
+        </>
+      )}
     </>,
     globalAlertsContainer
   )

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

@@ -3,11 +3,15 @@ import { useTranslation } from 'react-i18next'
 import Notification from '@/shared/components/notification'
 import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
 import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 export const UnsavedDocsLockedAlert: FC = () => {
   const { t } = useTranslation()
   const { openDocs } = useEditorManagerContext()
   const { reportError } = useIdeReactContext()
+  const improvedFlakyConnections = useFeatureFlag(
+    'intermittent-connection-improvements'
+  )
 
   useEffect(() => {
     const { pendingOpsLength, inflightOpsLength } = openDocs.getUnsavedOpsSize()
@@ -17,6 +21,10 @@ export const UnsavedDocsLockedAlert: FC = () => {
     })
   }, [reportError, openDocs])
 
+  if (improvedFlakyConnections) {
+    return null
+  }
+
   return (
     <div className="notification-list">
       <Notification