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/unsaved-docs/unsaved-docs-alert.tsx

@@ -1,7 +1,7 @@
 import { FC, useMemo } from 'react'
 import { useFileTreePathContext } from '@/features/file-tree/contexts/file-tree-path'
-import { Alert } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
+import OLNotification from '@/features/ui/components/ol/ol-notification'
 
 export const UnsavedDocsAlert: FC<{ unsavedDocs: Map<string, number> }> = ({
   unsavedDocs,
@@ -33,11 +33,12 @@ const UnsavedDocAlert: FC<{ docId: string; seconds: number }> = ({
   }
 
   return (
-    <Alert bsStyle="warning" bsSize="small">
-      {t('saving_notification_with_seconds', {
+    <OLNotification
+      type="warning"
+      content={t('saving_notification_with_seconds', {
         docname: doc.entity.name,
         seconds,
       })}
-    </Alert>
+    />
   )
 }

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

@@ -1,23 +1,28 @@
 import { FC } from 'react'
-import { Modal } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import AccessibleModal from '@/shared/components/accessible-modal'
+import OLModal, {
+  OLModalBody,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/features/ui/components/ol/ol-modal'
 
 export const UnsavedDocsLockedModal: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <AccessibleModal
+    <OLModal
       show
       onHide={() => {}} // It's not possible to hide this modal, but it's a required prop
       className="lock-editor-modal"
       backdrop={false}
       keyboard={false}
     >
-      <Modal.Header>
-        <Modal.Title>{t('connection_lost')}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>{t('sorry_the_connection_to_the_server_is_down')}</Modal.Body>
-    </AccessibleModal>
+      <OLModalHeader>
+        <OLModalTitle>{t('connection_lost')}</OLModalTitle>
+      </OLModalHeader>
+      <OLModalBody>
+        {t('sorry_the_connection_to_the_server_is_down')}
+      </OLModalBody>
+    </OLModal>
   )
 }