💄(frontend) error alert closeable on editor

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

@@ -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

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

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>
       )}