React IDE page: add connection and SyncTex alerts (#15273)

Add connection and SyncTex alerts GitOrigin-RevId: 5004a0d356d0a0355d125516a18db1f57e617a7f
2023-10-19 08:03:04 +00:00
parent 3be937c503
commit 87199c80fe
7 changed files with 140 additions and 1 deletions
@@ -0,0 +1,73 @@
+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'
+
+// TODO SavingNotificationController, SystemMessagesController, out-of-sync modal
+export function Alerts() {
+  const { t } = useTranslation()
+  const {
+    connectionState,
+    isConnected,
+    isStillReconnecting,
+    tryReconnectNow,
+    secondsUntilReconnect,
+  } = useConnectionContext()
+
+  // TODO: Get this from a context
+  const synctexError = false
+
+  return (
+    <div className="global-alerts">
+      {connectionState.forceDisconnected ? (
+        <Alert bsStyle="warning" className="small">
+          <strong>{t('disconnected')}</strong>
+        </Alert>
+      ) : null}
+
+      {connectionState.reconnectAt ? (
+        <LostConnectionAlert
+          reconnectAt={connectionState.reconnectAt}
+          tryReconnectNow={tryReconnectNow}
+        />
+      ) : null}
+
+      {isStillReconnecting ? (
+        <Alert bsStyle="warning" className="small">
+          <strong>{t('reconnecting')}…</strong>
+        </Alert>
+      ) : 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>
+      ) : null}
+
+      {connectionState.inactiveDisconnect ||
+      (connectionState.readyState === WebSocket.CLOSED &&
+        (connectionState.error === 'rate-limited' ||
+          connectionState.error === 'unable-to-connect') &&
+        !secondsUntilReconnect()) ? (
+        <Alert bsStyle="warning" className="small">
+          <strong>{t('editor_disconected_click_to_reconnect')}</strong>
+        </Alert>
+      ) : null}
+
+      {debugging ? (
+        <Alert bsStyle="warning" className="small">
+          <strong>Connected: {isConnected.toString()}</strong>
+        </Alert>
+      ) : null}
+    </div>
+  )
+}
@@ -0,0 +1,40 @@
+import { useTranslation } from 'react-i18next'
+import { useEffect, useState } from 'react'
+import { secondsUntil } from '@/features/ide-react/connection/utils'
+import { Alert } from 'react-bootstrap'
+
+type LostConnectionAlertProps = {
+  reconnectAt: number
+  tryReconnectNow: () => void
+}
+
+export function LostConnectionAlert({
+  reconnectAt,
+  tryReconnectNow,
+}: LostConnectionAlertProps) {
+  const { t } = useTranslation()
+  const [secondsUntilReconnect, setSecondsUntilReconnect] = useState(
+    secondsUntil(reconnectAt)
+  )
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      setSecondsUntilReconnect(secondsUntil(reconnectAt))
+    }, 1000)
+    return () => window.clearInterval(timer)
+  }, [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>
+  )
+}
@@ -2,6 +2,7 @@ import LayoutWithPlaceholders from '@/features/ide-react/components/layout/layou
 import { useConnectionContext } from '@/features/ide-react/context/connection-context'
 import useEventListener from '@/shared/hooks/use-event-listener'
 import { useCallback, useEffect } from 'react'
+import { Alerts } from '@/features/ide-react/components/alerts/alerts'

 // This is filled with placeholder content while the real content is migrated
 // away from Angular
@@ -23,7 +24,8 @@ export default function IdePage() {

  return (
    <>
-      {/* TODO: Alerts and left menu will go here */}
+      <Alerts />
+      {/* TODO: Left menu will go here */}
      <LayoutWithPlaceholders shouldPersistLayout />
    </>
  )