fix: convert realtime connection dialog into alert

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/locales/en.json

@@ -600,7 +600,7 @@
     }
   },
   "realtime": {
-    "reconnect": "Reconnecting to HedgeDoc…"
+    "connecting": "Connecting to realtime collaboration server…"
   },
   "settings": {
     "title": "Settings",

frontend/src/components/editor-page/editor-page-content.tsx

@@ -17,10 +17,10 @@ import { EditorPane } from './editor-pane/editor-pane'
 import { useComponentsFromAppExtensions } from './editor-pane/hooks/use-components-from-app-extensions'
 import { HeadMetaProperties } from './head-meta-properties/head-meta-properties'
 import { useUpdateLocalHistoryEntry } from './hooks/use-update-local-history-entry'
+import { RealtimeConnectionAlert } from './realtime-connection-alert/realtime-connection-alert'
 import { Sidebar } from './sidebar/sidebar'
 import { Splitter } from './splitter/splitter'
 import type { DualScrollState, ScrollState } from './synced-scroll/scroll-props'
-import { RealtimeConnectionModal } from './websocket-connection-modal/realtime-connection-modal'
 import equal from 'fast-deep-equal'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -129,9 +129,9 @@ export const EditorPageContent: React.FC = () => {
         <CommunicatorImageLightbox />
         <HeadMetaProperties />
         <MotdModal />
-        <RealtimeConnectionModal />
         <div className={'d-flex flex-column vh-100'}>
           <AppBar mode={AppBarMode.EDITOR} />
+          <RealtimeConnectionAlert />
           <div className={'flex-fill d-flex h-100 w-100 overflow-hidden flex-row'}>
             <Splitter
               left={leftPane}

frontend/src/components/editor-page/realtime-connection-alert/__snapshots__/realtime-connection-alert.spec.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`realtime connection alert will show if not synced 1`] = `
+<div>
+  <div
+    class="fade m-0 rounded-0 alert alert-warning show"
+    role="alert"
+  >
+    realtime.connecting
+    BootstrapIconMock_ArrowRepeat
+  </div>
+</div>
+`;
+
+exports[`realtime connection alert won't show if synced 1`] = `<div />`;

frontend/src/components/editor-page/realtime-connection-alert/realtime-connection-alert.spec.tsx

@@ -0,0 +1,29 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import * as UseApplicationStateModule from '../../../hooks/common/use-application-state'
+import { mockI18n } from '../../markdown-renderer/test-utils/mock-i18n'
+import { RealtimeConnectionAlert } from './realtime-connection-alert'
+import { render } from '@testing-library/react'
+
+jest.mock('../../../hooks/common/use-application-state')
+
+describe('realtime connection alert', () => {
+  beforeAll(mockI18n)
+
+  it("won't show if synced", () => {
+    jest.spyOn(UseApplicationStateModule, 'useApplicationState').mockImplementation(() => true)
+
+    const view = render(<RealtimeConnectionAlert />)
+    expect(view.container).toMatchSnapshot()
+  })
+
+  it('will show if not synced', () => {
+    jest.spyOn(UseApplicationStateModule, 'useApplicationState').mockImplementation(() => false)
+
+    const view = render(<RealtimeConnectionAlert />)
+    expect(view.container).toMatchSnapshot()
+  })
+})

frontend/src/components/editor-page/realtime-connection-alert/realtime-connection-alert.tsx

@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useApplicationState } from '../../../hooks/common/use-application-state'
+import { UiIcon } from '../../common/icons/ui-icon'
+import React, { Fragment } from 'react'
+import { Alert } from 'react-bootstrap'
+import { ArrowRepeat as IconArrowRepeat } from 'react-bootstrap-icons'
+import { Trans, useTranslation } from 'react-i18next'
+
+/**
+ * Modal with a spinner that is only shown while reconnecting to the realtime backend
+ */
+export const RealtimeConnectionAlert: React.FC = () => {
+  const isSynced = useApplicationState((state) => state.realtimeStatus.isSynced)
+  useTranslation()
+
+  if (isSynced) {
+    return <Fragment />
+  }
+
+  return (
+    <Alert variant={'warning'} className={'m-0 rounded-0'}>
+      <Trans i18nKey={'realtime.connecting'}></Trans>
+      <UiIcon icon={IconArrowRepeat} spin={true} className={'ms-2 mb-1'} />
+    </Alert>
+  )
+}

frontend/src/components/editor-page/websocket-connection-modal/realtime-connection-modal.tsx

@@ -1,39 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import { useApplicationState } from '../../../hooks/common/use-application-state'
-import { WaitSpinner } from '../../common/wait-spinner/wait-spinner'
-import React from 'react'
-import { Col, Container, Modal, Row } from 'react-bootstrap'
-import { Trans, useTranslation } from 'react-i18next'
-
-/**
- * Modal with a spinner that is only shown while reconnecting to the realtime backend
- */
-export const RealtimeConnectionModal: React.FC = () => {
-  const isConnected = useApplicationState((state) => state.realtimeStatus.isSynced)
-  useTranslation()
-
-  return (
-    <Modal show={!isConnected}>
-      <Modal.Body>
-        <Container className={'text-center'}>
-          <Row className={'mb-4'}>
-            <Col xs={12}>
-              <WaitSpinner size={5}></WaitSpinner>
-            </Col>
-          </Row>
-          <Row>
-            <Col xs={12}>
-              <span>
-                <Trans i18nKey={'realtime.reconnect'}></Trans>
-              </span>
-            </Col>
-          </Row>
-        </Container>
-      </Modal.Body>
-    </Modal>
-  )
-}