refactor: replace plantuml error message with a custom hedgedoc error alert

Signed-off-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

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
  */

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`] = `
+<div>
+  <div
+    class="fade alert test-class alert alert-primary show"
+    role="alert"
+  >
+    <p
+      class="d-flex align-items-center"
+    >
+      This is a mock for "HedgeDocLogoHorizontalGrey". Props: {"color":"dark","showText":false,"size":32,"width":32,"className":"logo"}
+      <span
+        class="exclamation ms-1 me-2"
+      >
+        !
+      </span>
+      <span>
+        <span>
+          Test Child
+        </span>
+      </span>
+    </p>
+  </div>
+</div>
+`;

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`] = `
+<div>
+  This is a mock for ApplicationErrorAlert.
+  <br />
+  Props: 
+  {"className":"test-css-class"}
+  <br />
+  Children: 
+  testKey
+</div>
+`;

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(
+      <ApplicationErrorAlert className={'test-class'}>
+        <span>Test Child</span>
+      </ApplicationErrorAlert>
+    )
+
+    expect(view.container).toMatchSnapshot()
+  })
+})

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<ApplicationErrorAlertProps> = ({ children, className }) => {
+  return (
+    <Alert className={concatCssClasses(styles.alert, className)}>
+      <p className={'d-flex align-items-center'}>
+        <HedgeDocLogoHorizontalGrey color={'dark'} showText={false} size={32} width={32} className={styles.logo} />
+        <span className={concatCssClasses(styles.exclamation, 'ms-1 me-2')}>!</span>
+        <span>{children}</span>
+      </p>
+    </Alert>
+  )
+}

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;
+}

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) => (
+    <Fragment>
+      This is a mock for ApplicationErrorAlert.
+      <br />
+      Props: {JSON.stringify(props)}
+      <br />
+      Children: {children}
+    </Fragment>
+  )
+}))
+
+describe('TranslatedApplicationErrorAlert', () => {
+  beforeAll(() => mockI18n())
+
+  it('renders correctly', () => {
+    const view = render(<TranslatedApplicationErrorAlert errorI18nKey={'testKey'} className={'test-css-class'} />)
+
+    expect(view.container).toMatchSnapshot()
+  })
+})

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<ErrorBoxProps> = ({ errorI18nKey, className }) => {
+  useTranslation()
+
+  return (
+    <ApplicationErrorAlert className={className}>
+      <Trans i18nKey={errorI18nKey} />
+    </ApplicationErrorAlert>
+  )
+}

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`] = `
 <div>
-  <p
-    class="alert alert-danger"
-  >
-    renderer.plantuml.notConfigured
-  </p>
+  This is a mock for "TranslatedApplicationErrorAlert". Props: {"errorI18nKey":"renderer.plantuml.notConfigured"}
 </div>
 `;

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(

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 (
-    <p className='alert alert-danger'>
-      <Trans i18nKey={'renderer.plantuml.notConfigured'} />
-    </p>
-  )
+  return <TranslatedApplicationErrorAlert errorI18nKey={'renderer.plantuml.notConfigured'} />
 }