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/modals/force-disconnected.tsx

@@ -1,8 +1,11 @@
 import { useTranslation } from 'react-i18next'
-import { Modal } from 'react-bootstrap'
-import AccessibleModal from '@/shared/components/accessible-modal'
 import { memo, useEffect, useState } from 'react'
 import { useConnectionContext } from '@/features/ide-react/context/connection-context'
+import OLModal, {
+  OLModalBody,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/features/ui/components/ol/ol-modal'
 
 // show modal when editor is forcefully disconnected
 function ForceDisconnected() {
@@ -40,7 +43,7 @@ function ForceDisconnected() {
   }
 
   return (
-    <AccessibleModal
+    <OLModal
       show
       // It's not possible to hide this modal, but it's a required prop
       onHide={() => {}}
@@ -48,13 +51,13 @@ function ForceDisconnected() {
       backdrop={false}
       keyboard={false}
     >
-      <Modal.Header>
-        <Modal.Title>{t('please_wait')}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
+      <OLModalHeader>
+        <OLModalTitle>{t('please_wait')}</OLModalTitle>
+      </OLModalHeader>
+      <OLModalBody>
         {t('were_performing_maintenance', { seconds: secondsUntilRefresh })}
-      </Modal.Body>
-    </AccessibleModal>
+      </OLModalBody>
+    </OLModal>
   )
 }
 

services/web/frontend/js/features/ide-react/components/modals/generic-message-modal.tsx

@@ -1,14 +1,19 @@
 import { useTranslation } from 'react-i18next'
-import { Modal } from 'react-bootstrap'
-import AccessibleModal from '@/shared/components/accessible-modal'
 import { memo } from 'react'
+import OLModal, {
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/features/ui/components/ol/ol-modal'
+import OLButton from '@/features/ui/components/ol/ol-button'
 
 export type GenericMessageModalOwnProps = {
   title: string
   message: string
 }
 
-type GenericMessageModalProps = React.ComponentProps<typeof AccessibleModal> &
+type GenericMessageModalProps = React.ComponentProps<typeof OLModal> &
   GenericMessageModalOwnProps
 
 function GenericMessageModal({
@@ -19,19 +24,19 @@ function GenericMessageModal({
   const { t } = useTranslation()
 
   return (
-    <AccessibleModal {...modalProps}>
-      <Modal.Header closeButton>
-        <Modal.Title>{title}</Modal.Title>
-      </Modal.Header>
+    <OLModal {...modalProps}>
+      <OLModalHeader closeButton>
+        <OLModalTitle>{title}</OLModalTitle>
+      </OLModalHeader>
 
-      <Modal.Body className="modal-body-share">{message}</Modal.Body>
+      <OLModalBody className="modal-body-share">{message}</OLModalBody>
 
-      <Modal.Footer>
-        <button className="btn btn-info" onClick={() => modalProps.onHide()}>
+      <OLModalFooter>
+        <OLButton variant="secondary" onClick={() => modalProps.onHide()}>
           {t('ok')}
-        </button>
-      </Modal.Footer>
-    </AccessibleModal>
+        </OLButton>
+      </OLModalFooter>
+    </OLModal>
   )
 }
 

services/web/frontend/js/features/ide-react/components/modals/out-of-sync-modal.tsx

@@ -1,8 +1,13 @@
 import { Trans, useTranslation } from 'react-i18next'
-import { Button, Modal } from 'react-bootstrap'
-import AccessibleModal from '@/shared/components/accessible-modal'
 import { memo, useState } from 'react'
 import { useLocation } from '@/shared/hooks/use-location'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import OLModal, {
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/features/ui/components/ol/ol-modal'
 
 export type OutOfSyncModalProps = {
   editorContent: string
@@ -24,17 +29,17 @@ function OutOfSyncModal({ editorContent, show, onHide }: OutOfSyncModalProps) {
   }
 
   return (
-    <AccessibleModal
+    <OLModal
       show={show}
       onHide={done}
       className="out-of-sync-modal"
       backdrop={false}
       keyboard={false}
     >
-      <Modal.Header closeButton>
-        <Modal.Title>{t('out_of_sync')}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body className="modal-body-share">
+      <OLModalHeader closeButton>
+        <OLModalTitle>{t('out_of_sync')}</OLModalTitle>
+      </OLModalHeader>
+      <OLModalBody className="modal-body-share">
         <Trans
           i18nKey="out_of_sync_detail"
           components={[
@@ -48,16 +53,16 @@ function OutOfSyncModal({ editorContent, show, onHide }: OutOfSyncModalProps) {
             />,
           ]}
         />
-      </Modal.Body>
-      <Modal.Body>
-        <Button
-          bsStyle="info"
+      </OLModalBody>
+      <OLModalBody>
+        <OLButton
+          variant="secondary"
           onClick={() => setEditorContentShown(shown => !shown)}
         >
           {editorContentShown
             ? t('hide_local_file_contents')
             : t('show_local_file_contents')}
-        </Button>
+        </OLButton>
         {editorContentShown ? (
           <div className="text-preview">
             <textarea
@@ -68,13 +73,13 @@ function OutOfSyncModal({ editorContent, show, onHide }: OutOfSyncModalProps) {
             />
           </div>
         ) : null}
-      </Modal.Body>
-      <Modal.Footer>
-        <Button bsStyle="info" onClick={done}>
+      </OLModalBody>
+      <OLModalFooter>
+        <OLButton variant="secondary" onClick={done}>
           {t('reload_editor')}
-        </Button>
-      </Modal.Footer>
-    </AccessibleModal>
+        </OLButton>
+      </OLModalFooter>
+    </OLModal>
   )
 }