first commit

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

@@ -0,0 +1,93 @@
+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 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()
+  const {
+    connectionState,
+    isConnected,
+    isStillReconnecting,
+    tryReconnectNow,
+    secondsUntilReconnect,
+  } = useConnectionContext()
+  const globalAlertsContainer = useGlobalAlertsContainer()
+
+  const [synctexError] = useScopeValue('sync_tex_error')
+
+  if (!globalAlertsContainer) {
+    return null
+  }
+
+  return createPortal(
+    <>
+      {connectionState.forceDisconnected &&
+      // hide "disconnected" banner when displaying out of sync modal
+      connectionState.error !== 'out-of-sync' ? (
+        <OLNotification
+          type="error"
+          content={<strong>{t('disconnected')}</strong>}
+        />
+      ) : null}
+
+      {connectionState.reconnectAt ? (
+        <LostConnectionAlert
+          reconnectAt={connectionState.reconnectAt}
+          tryReconnectNow={tryReconnectNow}
+        />
+      ) : null}
+
+      {isStillReconnecting ? (
+        <OLNotification
+          type="warning"
+          content={<strong>{t('reconnecting')}…</strong>}
+        />
+      ) : null}
+
+      {synctexError ? (
+        <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"
+            >
+              {t('more_info')}
+            </OLButton>
+          }
+        />
+      ) : null}
+
+      {connectionState.inactiveDisconnect ||
+      (connectionState.readyState === WebSocket.CLOSED &&
+        (connectionState.error === 'rate-limited' ||
+          connectionState.error === 'unable-to-connect') &&
+        !secondsUntilReconnect()) ? (
+        <OLNotification
+          type="warning"
+          content={
+            <strong>{t('editor_disconected_click_to_reconnect')}</strong>
+          }
+        />
+      ) : null}
+
+      {debugging ? (
+        <OLNotification
+          type="warning"
+          content={<strong>Connected: {isConnected.toString()}</strong>}
+        />
+      ) : null}
+    </>,
+    globalAlertsContainer
+  )
+}

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

@@ -0,0 +1,49 @@
+import { useTranslation } from 'react-i18next'
+import { useEffect, useState } from 'react'
+import { secondsUntil } from '@/features/ide-react/connection/utils'
+import OLNotification from '@/features/ui/components/ol/ol-notification'
+import OLButton from '@/features/ui/components/ol/ol-button'
+
+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 (
+    <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"
+        >
+          {t('try_now')}
+        </OLButton>
+      }
+    />
+  )
+}