From 833c53f5aa97bb23b98120455fed27e48f59c53c Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 24 Sep 2024 16:22:57 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20error=20alert=20closea?=
 =?UTF-8?q?ble=20on=20editor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When we were uploading a file that was not allowed,
an error alert was shown. This alert was not closeable.
This commit makes the alert closeable.
---
 CHANGELOG.md                                        |  6 +++++-
 .../apps/impress/src/components/TextErrors.tsx      | 13 +++++++++++--
 .../docs/doc-editor/components/BlockNoteEditor.tsx  |  6 +++++-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6178a07d..5865a3f0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,9 +9,13 @@ and this project adheres to
 
 ## [Unreleased]
 
+## Changed
+
+- 💄(frontend) error alert closeable on editor #284
+
 ## Fixed
 
-- 🐛 (backend) gitlab oicd userinfo endpoint #232
+- 🐛(backend) gitlab oicd userinfo endpoint #232
 
 
 ## [1.4.0] - 2024-09-17
diff --git a/src/frontend/apps/impress/src/components/TextErrors.tsx b/src/frontend/apps/impress/src/components/TextErrors.tsx
index b39ac33b..b5db019e 100644
--- a/src/frontend/apps/impress/src/components/TextErrors.tsx
+++ b/src/frontend/apps/impress/src/components/TextErrors.tsx
@@ -1,25 +1,34 @@
 import { Alert, VariantType } from '@openfun/cunningham-react';
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
 
 import { Box, Text, TextType } from '@/components';
 
+const AlertStyled = styled(Alert)`
+  & .c__button--tertiary:hover {
+    background-color: var(--c--theme--colors--greyscale-200);
+  }
+`;
+
 interface TextErrorsProps extends TextType {
   causes?: string[];
   defaultMessage?: string;
   icon?: ReactNode;
+  canClose?: boolean;
 }
 
 export const TextErrors = ({
   causes,
   defaultMessage,
   icon,
+  canClose = false,
   ...textProps
 }: TextErrorsProps) => {
   const { t } = useTranslation();
 
   return (
-    <Alert canClose={false} type={VariantType.ERROR} icon={icon}>
+    <AlertStyled canClose={canClose} type={VariantType.ERROR} icon={icon}>
       <Box $direction="column" $gap="0.2rem">
         {causes &&
           causes.map((cause, i) => (
@@ -39,6 +48,6 @@ export const TextErrors = ({
           </Text>
         )}
       </Box>
-    </Alert>
+    </AlertStyled>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
index 3d228a77..8895e41f 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
@@ -120,7 +120,11 @@ export const BlockNoteContent = ({
     <Box $css={cssEditor}>
       {isErrorAttachment && (
         <Box $margin={{ bottom: 'big' }}>
-          <TextErrors causes={errorAttachment.cause} />
+          <TextErrors
+            causes={errorAttachment.cause}
+            canClose
+            $textAlign="left"
+          />
         </Box>
       )}