Rebeka DekanyandCopybot
d751b88e6b
* Remove icons folder * Create folders for badge, button, and dropdown components * Remove Bootstrap 5 from test * Rename `getBootstrap5Breakpoint` to `getBootstrapBreakpoint` * Cleanup and update BS 5 comments * Move components to the shared folder * Rename `tooltips-bs5` to `tooltip` * Remove `-bs5` suffix * Fix path * Delete BS3 version file * Rename `_form_marketing-bootstrap-5` to `_form_marketing` * Delete BS3 version file * Rename `_contact_general_modal-marketing-bootstrap-5` to `_contact_general_modal-marketing` * Delete BS3 version file * Rename `_contact_modal-marketing-bootstrap-5` to `_contact_modal-marketing` * Delete BS3 version file * Rename `thin-footer-bootstrap-5` to `thin-footer` * Delete BS3 version file * Rename `language-picker-bootstrap-5` to `language-picker` * Rename `fat-footer-react-bootstrap-5` to `fat-footer-react` * Delete BS3 version file * Rename `navbar-marketing-bootstrap-5` to `navbar-marketing` * Rename `navbar-marketing-react-bootstrap-5` to `navbar-marketing-react` * Delete BS3 version file * Rename `layout-website-redesign-cms-bootstrap-5` to `layout-website-redesign-cms` * Source format * Fix path GitOrigin-RevId: cf0f5db7c84cf545c69213dcc271d9ff17fe5db7
72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
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 { createPortal } from 'react-dom'
|
|
import { useGlobalAlertsContainer } from '@/features/ide-react/context/global-alerts-context'
|
|
import OLNotification from '@/shared/components/ol/ol-notification'
|
|
|
|
export function Alerts() {
|
|
const { t } = useTranslation()
|
|
const {
|
|
connectionState,
|
|
isConnected,
|
|
isStillReconnecting,
|
|
tryReconnectNow,
|
|
secondsUntilReconnect,
|
|
} = useConnectionContext()
|
|
const globalAlertsContainer = useGlobalAlertsContainer()
|
|
|
|
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}
|
|
|
|
{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
|
|
)
|
|
}
|