Merge pull request #21008 from overleaf/rd-editor-errors

[web] Migrate notifications and error boundaries on the editor page

GitOrigin-RevId: c195ecf0dd9e38ec8326c823174e559e1f192ce1

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

@@ -2,10 +2,11 @@ import { useTranslation } from 'react-i18next'
 import { LostConnectionAlert } from './lost-connection-alert'
 import { useConnectionContext } from '@/features/ide-react/context/connection-context'
 import { debugging } from '@/utils/debugging'
-import { Alert } from 'react-bootstrap'
 import useScopeValue from '@/shared/hooks/use-scope-value'
 import { createPortal } from 'react-dom'
 import { useGlobalAlertsContainer } from '@/features/ide-react/context/global-alerts-context'
+import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLButton from '@/features/ui/components/ol/ol-button'
 
 export function Alerts() {
   const { t } = useTranslation()
@@ -27,9 +28,10 @@ export function Alerts() {
   return createPortal(
     <>
       {connectionState.forceDisconnected ? (
-        <Alert bsStyle="danger" className="small">
-          <strong>{t('disconnected')}</strong>
-        </Alert>
+        <OLNotification
+          type="error"
+          content={<strong>{t('disconnected')}</strong>}
+        />
       ) : null}
 
       {connectionState.reconnectAt ? (
@@ -40,23 +42,29 @@ export function Alerts() {
       ) : null}
 
       {isStillReconnecting ? (
-        <Alert bsStyle="warning" className="small">
-          <strong>{t('reconnecting')}…</strong>
-        </Alert>
+        <OLNotification
+          type="warning"
+          content={<strong>{t('reconnecting')}…</strong>}
+        />
       ) : null}
 
       {synctexError ? (
-        <Alert bsStyle="warning" className="small">
-          <strong>{t('synctex_failed')}</strong>
-          <a
-            href="/learn/how-to/SyncTeX_Errors"
-            target="_blank"
-            id="synctex-more-info-button"
-            className="alert-link-as-btn pull-right"
-          >
-            {t('more_info')}
-          </a>
-        </Alert>
+        <OLNotification
+          type="warning"
+          content={<strong>{t('synctex_failed')}</strong>}
+          action={
+            <OLButton
+              href="/learn/how-to/SyncTeX_Errors"
+              target="_blank"
+              id="synctex-more-info-button"
+              variant="secondary"
+              size="sm"
+              bs3Props={{ className: 'alert-link-as-btn pull-right' }}
+            >
+              {t('more_info')}
+            </OLButton>
+          }
+        />
       ) : null}
 
       {connectionState.inactiveDisconnect ||
@@ -64,15 +72,19 @@ export function Alerts() {
         (connectionState.error === 'rate-limited' ||
           connectionState.error === 'unable-to-connect') &&
         !secondsUntilReconnect()) ? (
-        <Alert bsStyle="warning" className="small">
-          <strong>{t('editor_disconected_click_to_reconnect')}</strong>
-        </Alert>
+        <OLNotification
+          type="warning"
+          content={
+            <strong>{t('editor_disconected_click_to_reconnect')}</strong>
+          }
+        />
       ) : null}
 
       {debugging ? (
-        <Alert bsStyle="warning" className="small">
-          <strong>Connected: {isConnected.toString()}</strong>
-        </Alert>
+        <OLNotification
+          type="warning"
+          content={<strong>Connected: {isConnected.toString()}</strong>}
+        />
       ) : null}
     </>,
     globalAlertsContainer

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

@@ -1,7 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import { useEffect, useState } from 'react'
 import { secondsUntil } from '@/features/ide-react/connection/utils'
-import { Alert } from 'react-bootstrap'
+import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLButton from '@/features/ui/components/ol/ol-button'
 
 type LostConnectionAlertProps = {
   reconnectAt: number
@@ -25,16 +26,25 @@ export function LostConnectionAlert({
   }, [reconnectAt])
 
   return (
-    <Alert bsStyle="warning" className="small">
-      <strong>{t('lost_connection')}</strong>{' '}
-      {t('reconnecting_in_x_secs', { seconds: secondsUntilReconnect })}.
-      <button
-        id="try-reconnect-now-button"
-        className="pull-right"
-        onClick={() => tryReconnectNow()}
-      >
-        {t('try_now')}
-      </button>
-    </Alert>
+    <OLNotification
+      type="warning"
+      content={
+        <>
+          <strong>{t('lost_connection')}</strong>{' '}
+          {t('reconnecting_in_x_secs', { seconds: secondsUntilReconnect })}.
+        </>
+      }
+      action={
+        <OLButton
+          id="try-reconnect-now-button"
+          onClick={() => tryReconnectNow()}
+          size="sm"
+          variant="secondary"
+          bs3Props={{ className: 'pull-right' }}
+        >
+          {t('try_now')}
+        </OLButton>
+      }
+    />
   )
 }