diff --git a/frontend/global-styles/index.scss b/frontend/global-styles/index.scss index 038d62a13..5f54eb214 100644 --- a/frontend/global-styles/index.scss +++ b/frontend/global-styles/index.scss @@ -1,5 +1,5 @@ -/* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) +/*! + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) * * SPDX-License-Identifier: AGPL-3.0-only */ diff --git a/frontend/src/components/common/application-error-alert/__snapshots__/application-error-alert.spec.tsx.snap b/frontend/src/components/common/application-error-alert/__snapshots__/application-error-alert.spec.tsx.snap new file mode 100644 index 000000000..e2031aaac --- /dev/null +++ b/frontend/src/components/common/application-error-alert/__snapshots__/application-error-alert.spec.tsx.snap @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ApplicationErrorAlert renders correctly 1`] = ` +
+ +
+`; diff --git a/frontend/src/components/common/application-error-alert/__snapshots__/translated-application-error-alert.spec.tsx.snap b/frontend/src/components/common/application-error-alert/__snapshots__/translated-application-error-alert.spec.tsx.snap new file mode 100644 index 000000000..bbf80c197 --- /dev/null +++ b/frontend/src/components/common/application-error-alert/__snapshots__/translated-application-error-alert.spec.tsx.snap @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TranslatedApplicationErrorAlert renders correctly 1`] = ` +
+ This is a mock for ApplicationErrorAlert. +
+ Props: + {"className":"test-css-class"} +
+ Children: + testKey +
+`; diff --git a/frontend/src/components/common/application-error-alert/application-error-alert.spec.tsx b/frontend/src/components/common/application-error-alert/application-error-alert.spec.tsx new file mode 100644 index 000000000..d6bfa45b4 --- /dev/null +++ b/frontend/src/components/common/application-error-alert/application-error-alert.spec.tsx @@ -0,0 +1,26 @@ +/* + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { render } from '@testing-library/react' +import { ApplicationErrorAlert } from './application-error-alert' +import type { PropsWithChildren } from 'react' + +jest.mock('../hedge-doc-logo/hedge-doc-logo-horizontal-grey', () => ({ + HedgeDocLogoHorizontalGrey: (props: PropsWithChildren) => + `This is a mock for "HedgeDocLogoHorizontalGrey". Props: ${JSON.stringify(props)}` +})) + +describe('ApplicationErrorAlert', () => { + it('renders correctly', () => { + const view = render( + + Test Child + + ) + + expect(view.container).toMatchSnapshot() + }) +}) diff --git a/frontend/src/components/common/application-error-alert/application-error-alert.tsx b/frontend/src/components/common/application-error-alert/application-error-alert.tsx new file mode 100644 index 000000000..c77f740cb --- /dev/null +++ b/frontend/src/components/common/application-error-alert/application-error-alert.tsx @@ -0,0 +1,32 @@ +/* + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import type { PropsWithChildren } from 'react' +import React from 'react' +import { HedgeDocLogoHorizontalGrey } from '../hedge-doc-logo/hedge-doc-logo-horizontal-grey' +import styles from './style.module.scss' +import { Alert } from 'react-bootstrap' +import { concatCssClasses } from '../../../utils/concat-css-classes' + +export interface ApplicationErrorAlertProps extends PropsWithChildren { + className?: string +} + +/** + * Renders an alert box that indicates an error in the application. + * + * @param error The error message to display. + */ +export const ApplicationErrorAlert: React.FC = ({ children, className }) => { + return ( + +

+ + ! + {children} +

+ + ) +} diff --git a/frontend/src/components/common/application-error-alert/style.module.scss b/frontend/src/components/common/application-error-alert/style.module.scss new file mode 100644 index 000000000..b1e0f2c03 --- /dev/null +++ b/frontend/src/components/common/application-error-alert/style.module.scss @@ -0,0 +1,26 @@ +/*! + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +.exclamation { + font-size: 2.3em; + line-height: 1.4em; + height: 48px; + display: inline-block; + user-select: none; +} + +.alert { + $color: #5A0F04; + display: flex; + --bs-alert-color: #{lighten($color, 80%)}; + --bs-alert-bg: #{$color}; + --bs-alert-border-color: #{lighten($color, 20%)}; + flex-direction: row; +} + +.logo { + flex: 0 0 32px; +} diff --git a/frontend/src/components/common/application-error-alert/translated-application-error-alert.spec.tsx b/frontend/src/components/common/application-error-alert/translated-application-error-alert.spec.tsx new file mode 100644 index 000000000..ab4d60a63 --- /dev/null +++ b/frontend/src/components/common/application-error-alert/translated-application-error-alert.spec.tsx @@ -0,0 +1,33 @@ +/* + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { render } from '@testing-library/react' +import { mockI18n } from '../../../test-utils/mock-i18n' +import { TranslatedApplicationErrorAlert } from './translated-application-error-alert' +import type { PropsWithChildren } from 'react' +import React, { Fragment } from 'react' + +jest.mock('./application-error-alert', () => ({ + ApplicationErrorAlert: ({ children, ...props }: PropsWithChildren) => ( + + This is a mock for ApplicationErrorAlert. +
+ Props: {JSON.stringify(props)} +
+ Children: {children} + + ) +})) + +describe('TranslatedApplicationErrorAlert', () => { + beforeAll(() => mockI18n()) + + it('renders correctly', () => { + const view = render() + + expect(view.container).toMatchSnapshot() + }) +}) diff --git a/frontend/src/components/common/application-error-alert/translated-application-error-alert.tsx b/frontend/src/components/common/application-error-alert/translated-application-error-alert.tsx new file mode 100644 index 000000000..dda8aa46a --- /dev/null +++ b/frontend/src/components/common/application-error-alert/translated-application-error-alert.tsx @@ -0,0 +1,28 @@ +/* + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import React from 'react' +import { Trans, useTranslation } from 'react-i18next' +import { ApplicationErrorAlert } from './application-error-alert' + +export interface ErrorBoxProps { + errorI18nKey: string + className?: string +} + +/** + * Renders an alert box that indicates an error in the application. + * + * @param error The error message to display. + */ +export const TranslatedApplicationErrorAlert: React.FC = ({ errorI18nKey, className }) => { + useTranslation() + + return ( + + + + ) +} diff --git a/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-horizontal-grey.tsx b/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-horizontal-grey.tsx index e2ead59a6..b22f50004 100644 --- a/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-horizontal-grey.tsx +++ b/frontend/src/components/common/hedge-doc-logo/hedge-doc-logo-horizontal-grey.tsx @@ -5,25 +5,33 @@ */ import { LogoSize } from './logo-size' import React from 'react' +import { ShowIf } from '../show-if/show-if' interface HedgeDocLogoHorizontalGreyProps { color: 'dark' | 'light' size?: LogoSize | number + showText?: boolean + width?: string | number + className?: string } export const HedgeDocLogoHorizontalGrey: React.FC = ({ color, - size = LogoSize.MEDIUM + size = LogoSize.MEDIUM, + showText = true, + width = 'auto', + className }) => { return ( - + + + ) diff --git a/frontend/src/extensions/external-lib-app-extensions/plantuml/__snapshots__/plantuml-markdown-extension.spec.tsx.snap b/frontend/src/extensions/external-lib-app-extensions/plantuml/__snapshots__/plantuml-markdown-extension.spec.tsx.snap index 3a3dc2e3b..c0f8029fd 100644 --- a/frontend/src/extensions/external-lib-app-extensions/plantuml/__snapshots__/plantuml-markdown-extension.spec.tsx.snap +++ b/frontend/src/extensions/external-lib-app-extensions/plantuml/__snapshots__/plantuml-markdown-extension.spec.tsx.snap @@ -13,10 +13,6 @@ exports[`PlantUML markdown extensions renders a plantuml codeblock 1`] = ` exports[`PlantUML markdown extensions renders an error if no server is defined 1`] = `
-

- renderer.plantuml.notConfigured -

+ This is a mock for "TranslatedApplicationErrorAlert". Props: {"errorI18nKey":"renderer.plantuml.notConfigured"}
`; diff --git a/frontend/src/extensions/external-lib-app-extensions/plantuml/plantuml-markdown-extension.spec.tsx b/frontend/src/extensions/external-lib-app-extensions/plantuml/plantuml-markdown-extension.spec.tsx index 2697c6c37..bf2479992 100644 --- a/frontend/src/extensions/external-lib-app-extensions/plantuml/plantuml-markdown-extension.spec.tsx +++ b/frontend/src/extensions/external-lib-app-extensions/plantuml/plantuml-markdown-extension.spec.tsx @@ -7,10 +7,18 @@ import { TestMarkdownRenderer } from '../../../components/markdown-renderer/test import { mockI18n } from '../../../test-utils/mock-i18n' import { PlantumlMarkdownExtension } from './plantuml-markdown-extension' import { render } from '@testing-library/react' +import type { PropsWithChildren } from 'react' import React from 'react' +jest.mock('../../../components/common/application-error-alert/translated-application-error-alert', () => ({ + TranslatedApplicationErrorAlert: (props: PropsWithChildren) => + `This is a mock for "TranslatedApplicationErrorAlert". Props: ${JSON.stringify(props)}` +})) + describe('PlantUML markdown extensions', () => { - beforeAll(() => mockI18n()) + beforeAll(async () => { + await mockI18n() + }) it('renders a plantuml codeblock', () => { const view = render( diff --git a/frontend/src/extensions/external-lib-app-extensions/plantuml/plantuml-not-configured-alert.tsx b/frontend/src/extensions/external-lib-app-extensions/plantuml/plantuml-not-configured-alert.tsx index d2b0172d5..5fc584350 100644 --- a/frontend/src/extensions/external-lib-app-extensions/plantuml/plantuml-not-configured-alert.tsx +++ b/frontend/src/extensions/external-lib-app-extensions/plantuml/plantuml-not-configured-alert.tsx @@ -1,20 +1,14 @@ /* - * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file) + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) * * SPDX-License-Identifier: AGPL-3.0-only */ import React from 'react' -import { Trans, useTranslation } from 'react-i18next' +import { TranslatedApplicationErrorAlert } from '../../../components/common/application-error-alert/translated-application-error-alert' /** * Renders an alert if plantuml is not configured. */ export const PlantumlNotConfiguredAlert: React.FC = () => { - useTranslation() - - return ( -

- -

- ) + return }