From b4f73c0f4982e32eaa3c674a558b0f432268b976 Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Sat, 25 Mar 2023 14:30:18 +0100 Subject: [PATCH] fix: convert realtime connection dialog into alert Signed-off-by: Tilman Vatteroth --- frontend/locales/en.json | 2 +- .../editor-page/editor-page-content.tsx | 4 +- .../realtime-connection-alert.spec.tsx.snap | 15 +++++++ .../realtime-connection-alert.spec.tsx | 29 ++++++++++++++ .../realtime-connection-alert.tsx | 30 ++++++++++++++ .../realtime-connection-modal.tsx | 39 ------------------- 6 files changed, 77 insertions(+), 42 deletions(-) create mode 100644 frontend/src/components/editor-page/realtime-connection-alert/__snapshots__/realtime-connection-alert.spec.tsx.snap create mode 100644 frontend/src/components/editor-page/realtime-connection-alert/realtime-connection-alert.spec.tsx create mode 100644 frontend/src/components/editor-page/realtime-connection-alert/realtime-connection-alert.tsx delete mode 100644 frontend/src/components/editor-page/websocket-connection-modal/realtime-connection-modal.tsx diff --git a/frontend/locales/en.json b/frontend/locales/en.json index 7f462df48..67fa8336c 100644 --- a/frontend/locales/en.json +++ b/frontend/locales/en.json @@ -600,7 +600,7 @@ } }, "realtime": { - "reconnect": "Reconnecting to HedgeDoc…" + "connecting": "Connecting to realtime collaboration server…" }, "settings": { "title": "Settings", diff --git a/frontend/src/components/editor-page/editor-page-content.tsx b/frontend/src/components/editor-page/editor-page-content.tsx index 42ae90eed..0e1358b81 100644 --- a/frontend/src/components/editor-page/editor-page-content.tsx +++ b/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 = () => { -
+
+ +
+`; + +exports[`realtime connection alert won't show if synced 1`] = `
`; diff --git a/frontend/src/components/editor-page/realtime-connection-alert/realtime-connection-alert.spec.tsx b/frontend/src/components/editor-page/realtime-connection-alert/realtime-connection-alert.spec.tsx new file mode 100644 index 000000000..27e2e4248 --- /dev/null +++ b/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() + expect(view.container).toMatchSnapshot() + }) + + it('will show if not synced', () => { + jest.spyOn(UseApplicationStateModule, 'useApplicationState').mockImplementation(() => false) + + const view = render() + expect(view.container).toMatchSnapshot() + }) +}) diff --git a/frontend/src/components/editor-page/realtime-connection-alert/realtime-connection-alert.tsx b/frontend/src/components/editor-page/realtime-connection-alert/realtime-connection-alert.tsx new file mode 100644 index 000000000..bf1525f36 --- /dev/null +++ b/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 + } + + return ( + + + + + ) +} diff --git a/frontend/src/components/editor-page/websocket-connection-modal/realtime-connection-modal.tsx b/frontend/src/components/editor-page/websocket-connection-modal/realtime-connection-modal.tsx deleted file mode 100644 index 3b0ed00b4..000000000 --- a/frontend/src/components/editor-page/websocket-connection-modal/realtime-connection-modal.tsx +++ /dev/null @@ -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 ( - - - - - - - - - - - - - - - - - - - ) -}