refactor: use application error alert in flowchart

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

frontend/src/components/common/application-error-alert/__snapshots__/translated-application-error-alert.spec.tsx.snap

@@ -2,12 +2,18 @@
 
 exports[`TranslatedApplicationErrorAlert renders correctly 1`] = `
 <div>
-  This is a mock for ApplicationErrorAlert.
-  <br />
-  Props: 
-  {"className":"test-css-class"}
-  <br />
-  Children: 
-  testKey
+  <div>
+    <h3>
+      This is a mock for ApplicationErrorAlert.
+    </h3>
+    Props: 
+    <code>
+      {"className":"test-css-class"}
+    </code>
+    Children:
+    <div>
+      testKey
+    </div>
+  </div>
 </div>
 `;

frontend/src/components/common/application-error-alert/translated-application-error-alert.spec.tsx

@@ -8,17 +8,16 @@ 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'
+import React 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>
+    <div>
+      <h3>This is a mock for ApplicationErrorAlert.</h3>
+      Props: <code>{JSON.stringify(props)}</code>
+      Children:
+      <div>{children}</div>
+    </div>
   )
 }))
 

frontend/src/extensions/external-lib-app-extensions/abcjs/__snapshots__/abc-frame.spec.tsx.snap

@@ -2384,11 +2384,18 @@ exports[`AbcFrame renders an error if abcjs render function crashes 1`] = `
 
 exports[`AbcFrame renders an error if abcjs render function crashes 2`] = `
 <div>
-  <div
-    class="fade alert alert-danger show"
-    role="alert"
-  >
-    editor.embeddings.abcJs.errorWhileRendering
+  <div>
+    <h3>
+      This is a mock for ApplicationErrorAlert.
+    </h3>
+    Props: 
+    <code>
+      {}
+    </code>
+    Children:
+    <div>
+      editor.embeddings.abcJs.errorWhileRendering
+    </div>
   </div>
   <div
     class="abcjs-score bg-white text-black svg-container"

frontend/src/extensions/external-lib-app-extensions/abcjs/abc-frame.spec.tsx

@@ -6,8 +6,20 @@
 import { mockI18n } from '../../../test-utils/mock-i18n'
 import { AbcFrame } from './abc-frame'
 import { render, screen } from '@testing-library/react'
+import type { PropsWithChildren } from 'react'
 import React from 'react'
 
+jest.mock('../../../components/common/application-error-alert/application-error-alert', () => ({
+  ApplicationErrorAlert: ({ children, ...props }: PropsWithChildren) => (
+    <div>
+      <h3>This is a mock for ApplicationErrorAlert.</h3>
+      Props: <code>{JSON.stringify(props)}</code>
+      Children:
+      <div>{children}</div>
+    </div>
+  )
+}))
+
 describe('AbcFrame', () => {
   afterEach(() => {
     jest.resetModules()

frontend/src/extensions/external-lib-app-extensions/flowchart/__snapshots__/flowchart.spec.tsx.snap

@@ -13,11 +13,18 @@ exports[`Flowchart handles error if lib loading failed 1`] = `
 
 exports[`Flowchart handles error while rendering 1`] = `
 <div>
-  <div
-    class="fade alert alert-danger show"
-    role="alert"
-  >
-    renderer.flowchart.invalidSyntax
+  <div>
+    <h3>
+      This is a mock for ApplicationErrorAlert.
+    </h3>
+    Props: 
+    <code>
+      {}
+    </code>
+    Children:
+    <div>
+      renderer.flowchart.invalidSyntax
+    </div>
   </div>
   <div
     class="text-center"

frontend/src/extensions/external-lib-app-extensions/flowchart/flowchart.spec.tsx

@@ -9,8 +9,20 @@ import { FlowChart } from './flowchart'
 import * as useMediaQuery from '@restart/hooks/useMediaQuery'
 import { render, screen } from '@testing-library/react'
 import type * as flowchartJsModule from 'flowchart.js'
+import type { PropsWithChildren } from 'react'
+import React from 'react'
 
 jest.mock('@restart/hooks/useMediaQuery')
+jest.mock('../../../components/common/application-error-alert/application-error-alert', () => ({
+  ApplicationErrorAlert: ({ children, ...props }: PropsWithChildren) => (
+    <div>
+      <h3>This is a mock for ApplicationErrorAlert.</h3>
+      Props: <code>{JSON.stringify(props)}</code>
+      Children:
+      <div>{children}</div>
+    </div>
+  )
+}))
 
 describe('Flowchart', () => {
   const successText = 'Flowchart rendering succeeded!'

frontend/src/extensions/external-lib-app-extensions/flowchart/flowchart.tsx

@@ -11,9 +11,9 @@ import { useDarkModeState } from '../../../hooks/dark-mode/use-dark-mode-state'
 import { Logger } from '../../../utils/logger'
 import { testId } from '../../../utils/test-id'
 import React, { useEffect, useRef, useState } from 'react'
-import { Alert } from 'react-bootstrap'
-import { Trans, useTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 import { useAsync } from 'react-use'
+import { TranslatedApplicationErrorAlert } from '../../../components/common/application-error-alert/translated-application-error-alert'
 
 const log = new Logger('FlowChart')
 
@@ -72,9 +72,7 @@ export const FlowChart: React.FC<CodeProps> = ({ code }) => {
   return (
     <AsyncLoadingBoundary loading={loading || !flowchartLib} componentName={'flowchart.js'} error={!!libLoadingError}>
       <ShowIf condition={syntaxError}>
-        <Alert variant={'danger'}>
-          <Trans i18nKey={'renderer.flowchart.invalidSyntax'} />
-        </Alert>
+        <TranslatedApplicationErrorAlert errorI18nKey={'renderer.flowchart.invalidSyntax'} />
       </ShowIf>
       <div ref={diagramRef} {...testId('flowchart')} className={'text-center'} />
     </AsyncLoadingBoundary>

frontend/src/extensions/external-lib-app-extensions/katex/__snapshots__/katex-frame.spec.tsx.snap

@@ -89,13 +89,19 @@ exports[`katex frame renders an error for an invalid latex expression as explici
   <p
     data-testid="katex-block"
   >
-    This is a mock for ApplicationErrorAlert.
-    <br />
-    Props: 
-    {"className":""}
-    <br />
-    Children: 
-    mocked parseerror
+    <div>
+      <h3>
+        This is a mock for ApplicationErrorAlert.
+      </h3>
+      Props: 
+      <code>
+        {"className":""}
+      </code>
+      Children:
+      <div>
+        mocked parseerror
+      </div>
+    </div>
   </p>
 </div>
 `;
@@ -105,13 +111,19 @@ exports[`katex frame renders an error for an invalid latex expression as explici
   <span
     data-testid="katex-inline"
   >
-    This is a mock for ApplicationErrorAlert.
-    <br />
-    Props: 
-    {"className":"d-inline-block"}
-    <br />
-    Children: 
-    mocked parseerror
+    <div>
+      <h3>
+        This is a mock for ApplicationErrorAlert.
+      </h3>
+      Props: 
+      <code>
+        {"className":"d-inline-block"}
+      </code>
+      Children:
+      <div>
+        mocked parseerror
+      </div>
+    </div>
   </span>
 </div>
 `;
@@ -121,13 +133,19 @@ exports[`katex frame renders an error for an invalid latex expression as implici
   <span
     data-testid="katex-inline"
   >
-    This is a mock for ApplicationErrorAlert.
-    <br />
-    Props: 
-    {"className":"d-inline-block"}
-    <br />
-    Children: 
-    mocked parseerror
+    <div>
+      <h3>
+        This is a mock for ApplicationErrorAlert.
+      </h3>
+      Props: 
+      <code>
+        {"className":"d-inline-block"}
+      </code>
+      Children:
+      <div>
+        mocked parseerror
+      </div>
+    </div>
   </span>
 </div>
 `;

frontend/src/extensions/external-lib-app-extensions/katex/__snapshots__/katex-markdown-extension.spec.tsx.snap

@@ -100,75 +100,18 @@ exports[`KaTeX markdown extensions renders an error message for an invalid LaTeX
     <span
       data-testid="katex-inline"
     >
-      <div
-        class="fade alert d-inline-block alert alert-primary show"
-        role="alert"
-      >
-        <p
-          class="d-flex align-items-center"
-        >
-          <svg
-            class="logo"
-            clip-rule="evenodd"
-            fill-rule="evenodd"
-            height="32px"
-            stroke-linejoin="round"
-            stroke-miterlimit="2"
-            viewBox="0 0 430.07892 430.07892"
-            width="32"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g
-              fill-rule="nonzero"
-              transform="translate(10.242436 10.242452)"
-            >
-              <path
-                d="m0-124.766-6.399 6.398-7.662-4.814-4.812 7.662-8.541-2.989-2.988 8.54-8.993-1.013-1.011 8.991-8.992 1.013 1.012 8.991-8.541 2.989 2.988 8.54-7.661 4.815 4.815 7.662-6.399 6.399 6.398 6.398-4.814 7.661 7.661 4.814-2.988 8.541 8.541 2.988-1.012 8.985 8.992 1.011 1.011 8.985 8.993-1.015 2.988 8.54 8.541-2.988 4.812 7.662 7.662-4.813h12.796l7.661 4.813 4.814-7.66 8.541 2.988 2.988-8.54 8.992 1.014 1.014-8.985 8.99-1.012-1.012-8.985 8.54-2.988-2.988-8.541 7.662-4.815-4.815-7.66 6.398-6.398-6.398-6.399 4.815-7.66-7.662-4.814 2.988-8.542-8.54-2.988 1.014-8.991-8.992-1.015-1.013-8.991-8.991 1.013-2.989-8.54-8.54 2.989-4.814-7.663-7.663 4.815z"
-                fill="none"
-                stroke="#fff"
-                stroke-linejoin="miter"
-                stroke-miterlimit="2"
-                stroke-width="4.4095"
-                transform="matrix(3.2849556 0 0 3.2849556 207.55664 409.85076)"
-              />
-              <path
-                d="m0-30.513c0-12.366-10.025-22.393-22.392-22.393-6.143 0-11.707 2.476-15.752 6.481l-.003-.002-5.705 5.706-4.665-4.665c-4.104-4.683-10.125-7.642-16.839-7.642-12.367 0-22.392 10.025-22.392 22.391 0 6.463 2.74 12.281 7.118 16.368l36.799 36.784 35.987-36.014c4.496-4.232 7.844-10.203 7.844-17.014"
-                fill="#fefefe"
-                transform="matrix(3.2849556 0 0 3.2849556 351.53527 341.0132)"
-              />
-              <path
-                d="m-4.558-8.253c1.645 1.64 2.662 3.904 2.662 6.406 0 2.5-1.017 4.766-2.662 6.405-3.514-.026-6.357-2.883-6.357-6.405s2.843-6.38 6.357-6.406"
-                transform="matrix(0 -3.2849556 -3.2849556 0 201.44397 379.04995)"
-              />
-              <path
-                d="m-4.896-4.894c-2.704 0-4.895 2.191-4.895 4.894 0 2.704 2.191 4.896 4.895 4.896s4.896-2.192 4.896-4.896c0-2.703-2.192-4.894-4.896-4.894"
-                transform="matrix(0 -3.2849556 -3.2849556 0 166.86087 250.80164)"
-              />
-              <path
-                d="m-1.356-1.355c-.751 0-1.356.607-1.356 1.356 0 .748.605 1.355 1.356 1.355.749 0 1.357-.607 1.357-1.355 0-.749-.608-1.356-1.357-1.356"
-                fill="#fff"
-                transform="matrix(0 -3.2849556 -3.2849556 0 172.96926 261.80315)"
-              />
-              <path
-                d="m-4.896-4.894c-2.704 0-4.895 2.191-4.895 4.896 0 2.703 2.191 4.894 4.895 4.894s4.896-2.191 4.896-4.894c0-2.705-2.192-4.896-4.896-4.896"
-                transform="matrix(0 -3.2849556 -3.2849556 0 248.40602 250.80164)"
-              />
-              <path
-                d="m-1.357-1.356c-.751 0-1.356.608-1.356 1.358 0 .748.605 1.355 1.356 1.355.749 0 1.357-.607 1.357-1.355 0-.75-.608-1.358-1.357-1.358"
-                fill="#fff"
-                transform="matrix(0 -3.2849556 -3.2849556 0 254.51398 261.79888)"
-              />
-            </g>
-          </svg>
-          <span
-            class="exclamation"
-          >
-            !
-          </span>
-          <span>
-            mocked parseerror
-          </span>
-        </p>
+      <div>
+        <h3>
+          This is a mock for ApplicationErrorAlert.
+        </h3>
+        Props: 
+        <code>
+          {"className":"d-inline-block"}
+        </code>
+        Children:
+        <div>
+          mocked parseerror
+        </div>
       </div>
     </span>
   </p>

frontend/src/extensions/external-lib-app-extensions/katex/katex-frame.spec.tsx

@@ -8,19 +8,18 @@ import { render } from '@testing-library/react'
 import type { KatexOptions } from 'katex'
 import { default as KatexDefault } from 'katex'
 import type { PropsWithChildren } from 'react'
-import React, { Fragment } from 'react'
+import React from 'react'
 
 jest.mock('katex')
 
 jest.mock('../../../components/common/application-error-alert/application-error-alert', () => ({
   ApplicationErrorAlert: ({ children, ...props }: PropsWithChildren) => (
-    <Fragment>
-      This is a mock for ApplicationErrorAlert.
-      <br />
-      Props: {JSON.stringify(props)}
-      <br />
-      Children: {children}
-    </Fragment>
+    <div>
+      <h3>This is a mock for ApplicationErrorAlert.</h3>
+      Props: <code>{JSON.stringify(props)}</code>
+      Children:
+      <div>{children}</div>
+    </div>
   )
 }))
 

frontend/src/extensions/external-lib-app-extensions/katex/katex-markdown-extension.spec.tsx

@@ -8,9 +8,20 @@ import { KatexMarkdownExtension } from './katex-markdown-extension'
 import { render, screen } from '@testing-library/react'
 import type { KatexOptions } from 'katex'
 import { default as KatexDefault } from 'katex'
-import { Suspense } from 'react'
+import type { PropsWithChildren } from 'react'
+import React, { Suspense } from 'react'
 
 jest.mock('katex')
+jest.mock('../../../components/common/application-error-alert/application-error-alert', () => ({
+  ApplicationErrorAlert: ({ children, ...props }: PropsWithChildren) => (
+    <div>
+      <h3>This is a mock for ApplicationErrorAlert.</h3>
+      Props: <code>{JSON.stringify(props)}</code>
+      Children:
+      <div>{children}</div>
+    </div>
+  )
+}))
 
 describe('KaTeX markdown extensions', () => {
   afterAll(() => {

frontend/src/extensions/external-lib-app-extensions/vega-lite/__snapshots__/vega-lite-markdown-extension.spec.tsx.snap

@@ -15,19 +15,3 @@ exports[`Vega-Lite markdown extensions renders a vega-lite codeblock 1`] = `
 
 </div>
 `;
-
-exports[`Vega-Lite markdown extensions shows an error on invalid json 1`] = `
-<div>
-  <pre>
-    <span>
-      this is a mock for vega lite
-      <code>
-        wpieoghwpoegj
-
-      </code>
-    </span>
-  </pre>
-  
-
-</div>
-`;

frontend/src/extensions/external-lib-app-extensions/vega-lite/vega-lite-markdown-extension.spec.tsx

@@ -9,9 +9,20 @@ import { mockI18n } from '../../../test-utils/mock-i18n'
 import * as VegaLiteChartModule from '../vega-lite/vega-lite-chart'
 import { VegaLiteMarkdownExtension } from './vega-lite-markdown-extension'
 import { render } from '@testing-library/react'
+import type { PropsWithChildren } from 'react'
 import React from 'react'
 
 jest.mock('../vega-lite/vega-lite-chart')
+jest.mock('../../../components/common/application-error-alert/application-error-alert', () => ({
+  ApplicationErrorAlert: ({ children, ...props }: PropsWithChildren) => (
+    <div>
+      <h3>This is a mock for ApplicationErrorAlert.</h3>
+      Props: <code>{JSON.stringify(props)}</code>
+      Children:
+      <div>{children}</div>
+    </div>
+  )
+}))
 
 describe('Vega-Lite markdown extensions', () => {
   beforeAll(async () => {