Merge pull request #15592 from overleaf/td-ide-page-more-modals

React IDE page: add out-of-sync modal and project deleted modal

GitOrigin-RevId: 6081a40c3009e8ebc5b3f9752c4059af3d52966d

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

@@ -0,0 +1,48 @@
+import { useTranslation } from 'react-i18next'
+import { Modal } from 'react-bootstrap'
+import AccessibleModal from '@/shared/components/accessible-modal'
+import { useEffect, useState } from 'react'
+
+export type LockEditorMessageModalProps = {
+  delay: number // In seconds
+  show: boolean
+}
+
+function LockEditorMessageModal({ delay, show }: LockEditorMessageModalProps) {
+  const { t } = useTranslation()
+  const [secondsUntilRefresh, setSecondsUntilRefresh] = useState(0)
+
+  useEffect(() => {
+    if (show) {
+      setSecondsUntilRefresh(delay)
+
+      const timer = window.setInterval(() => {
+        setSecondsUntilRefresh(seconds => Math.max(0, seconds - 1))
+      }, 1000)
+
+      return () => {
+        window.clearInterval(timer)
+      }
+    }
+  }, [show, delay])
+
+  return (
+    <AccessibleModal
+      show={show}
+      // It's not possible to hide this modal, but it's a required prop
+      onHide={() => {}}
+      className="lock-editor-modal"
+      backdrop={false}
+      keyboard={false}
+    >
+      <Modal.Header>
+        <Modal.Title>{t('please_wait')}</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        {t('were_performing_maintenance', { seconds: secondsUntilRefresh })}
+      </Modal.Body>
+    </AccessibleModal>
+  )
+}
+
+export default LockEditorMessageModal

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

@@ -0,0 +1,81 @@
+import { Trans, useTranslation } from 'react-i18next'
+import { Button, Modal } from 'react-bootstrap'
+import AccessibleModal from '@/shared/components/accessible-modal'
+import { useState } from 'react'
+import { useLocation } from '@/shared/hooks/use-location'
+
+export type OutOfSyncModalProps = {
+  editorContent: string
+  show: boolean
+  onHide: () => void
+}
+
+function OutOfSyncModal({ editorContent, show, onHide }: OutOfSyncModalProps) {
+  const { t } = useTranslation()
+  const location = useLocation()
+  const [editorContentShown, setEditorContentShown] = useState(false)
+  const editorContentRows = (editorContent.match(/\n/g)?.length || 0) + 1
+
+  // Reload the page to avoid staying in an inconsistent state.
+  // https://github.com/overleaf/issues/issues/3694
+  function done() {
+    onHide()
+    location.reload()
+  }
+
+  return (
+    <AccessibleModal
+      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">
+        <Trans
+          i18nKey="out_of_sync_detail"
+          components={[
+            // eslint-disable-next-line react/jsx-key
+            <br />,
+            // eslint-disable-next-line jsx-a11y/anchor-has-content,react/jsx-key
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="/learn/Kb/Editor_out_of_sync_problems"
+            />,
+          ]}
+        />
+      </Modal.Body>
+      <Modal.Body>
+        <Button
+          bsStyle="info"
+          onClick={() => setEditorContentShown(shown => !shown)}
+        >
+          {editorContentShown
+            ? t('hide_local_file_contents')
+            : t('show_local_file_contents')}
+        </Button>
+        {editorContentShown ? (
+          <div className="text-preview">
+            <textarea
+              className="scroll-container"
+              readOnly
+              rows={editorContentRows}
+              value={editorContent}
+            />
+          </div>
+        ) : null}
+      </Modal.Body>
+      <Modal.Footer>
+        <Button bsStyle="info" onClick={done}>
+          {t('reload_editor')}
+        </Button>
+      </Modal.Footer>
+    </AccessibleModal>
+  )
+}
+
+export default OutOfSyncModal