From cdd368bc81c9274b1c07b8301a06038518485b02 Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Sun, 6 Aug 2023 13:38:36 +0200
Subject: [PATCH] refactor: use application error alert in abc-frame

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 .../external-lib-app-extensions/abcjs/abc-frame.tsx        | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontend/src/extensions/external-lib-app-extensions/abcjs/abc-frame.tsx b/frontend/src/extensions/external-lib-app-extensions/abcjs/abc-frame.tsx
index 4530e06f6..89cc0a8ad 100644
--- a/frontend/src/extensions/external-lib-app-extensions/abcjs/abc-frame.tsx
+++ b/frontend/src/extensions/external-lib-app-extensions/abcjs/abc-frame.tsx
@@ -12,9 +12,8 @@ import { cypressId } from '../../../utils/cypress-attribute'
 import { Logger } from '../../../utils/logger'
 import styles from './abc.module.scss'
 import React, { useRef } from 'react'
-import { Alert } from 'react-bootstrap'
-import { Trans } from 'react-i18next'
 import { useAsync } from 'react-use'
+import { TranslatedApplicationErrorAlert } from '../../../components/common/application-error-alert/translated-application-error-alert'
 
 const log = new Logger('AbcFrame')
 
@@ -51,9 +50,7 @@ export const AbcFrame: React.FC<CodeProps> = ({ code }) => {
   return (
     <AsyncLoadingBoundary loading={loading || !abcLib} error={!!loadingError} componentName={'abc.js'}>
       <ShowIf condition={!!renderError}>
-        <Alert variant={'danger'}>
-          <Trans i18nKey={'editor.embeddings.abcJs.errorWhileRendering'} />
-        </Alert>
+        <TranslatedApplicationErrorAlert errorI18nKey={'editor.embeddings.abcJs.errorWhileRendering'} />
       </ShowIf>
       <div
         ref={container}