@centreon/ui 23.10.37 → 23.10.39

package/src/RichTextEditor/RichTextEditor.tsx

@@ -7,6 +7,9 @@ import anylogger from 'anylogger';
 import { makeStyles } from 'tss-react/mui';
 import { EditorState } from 'lexical';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { equals } from 'ramda';
+
+import { Typography } from '@mui/material';
 
 import ContentEditable from './ContentEditable';
 import ToolbarPlugin from './plugins/ToolbarPlugin/index';
@@ -14,15 +17,19 @@ import AutoCompleteLinkPlugin from './plugins/AutoLinkPlugin/index';
 import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
 
 export interface RichTextEditorProps {
+  contentClassName?: string;
   editable: boolean;
   editorState?: string;
+  error?: string;
   getEditorState?: (editorState: EditorState) => void;
   initialEditorState?: string;
   inputClassname?: string;
   minInputHeight?: number;
   namespace?: string;
+  onBlur?: (e: string) => void;
   placeholder?: string;
   resetEditorToInitialStateCondition?: () => boolean;
+  toolbarPositions?: 'start' | 'end';
 }
 
 const log = anylogger('Rich text editor');
@@ -31,26 +38,46 @@ const onError = (error: Error): void => {
   log.error(error.message);
 };
 
-const useStyles = makeStyles()((theme) => ({
-  bold: {
-    fontWeight: theme.typography.fontWeightBold
-  },
-  italic: {
-    fontStyle: 'italic'
-  },
-  link: {
-    color: theme.palette.primary.main
-  },
-  strikethough: {
-    textDecoration: 'line-through'
-  },
-  underline: {
-    textDecoration: 'underline'
-  },
-  underlineStrikethrough: {
-    textDecoration: 'underline line-through'
-  }
-}));
+const useStyles = makeStyles<{ toolbarPositions: 'start' | 'end' }>()(
+  (theme, { toolbarPositions }) => ({
+    bold: {
+      fontWeight: theme.typography.fontWeightBold
+    },
+    container: equals(toolbarPositions, 'end')
+      ? {
+          display: 'flex',
+          flexDirection: 'column-reverse'
+        }
+      : {},
+    error: {
+      color: theme.palette.error.main,
+      fontSize: theme.spacing(1.5),
+      fontWeight: '200',
+      paddingLeft: theme.spacing(1.5),
+      paddingTop: theme.spacing(0.5)
+    },
+    italic: {
+      fontStyle: 'italic'
+    },
+    link: {
+      color: theme.palette.primary.main
+    },
+    strikethrough: {
+      textDecoration: 'line-through'
+    },
+    toolbar: equals(toolbarPositions, 'end')
+      ? {
+          marginTop: theme.spacing(0.5)
+        }
+      : {},
+    underline: {
+      textDecoration: 'underline'
+    },
+    underlineStrikethrough: {
+      textDecoration: 'underline line-through'
+    }
+  })
+);
 
 const RichTextEditor = ({
   namespace = 'RichTextEditor',
@@ -61,9 +88,13 @@ const RichTextEditor = ({
   initialEditorState,
   editable = true,
   editorState,
-  resetEditorToInitialStateCondition
+  resetEditorToInitialStateCondition,
+  toolbarPositions = 'start',
+  error,
+  onBlur,
+  contentClassName
 }: RichTextEditorProps): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes } = useStyles({ toolbarPositions });
 
   const hasInitialTextContent = initialEditorState
     ? JSON.parse(initialEditorState).root?.children.length > 0
@@ -80,7 +111,7 @@ const RichTextEditor = ({
       text: {
         bold: classes.bold,
         italic: classes.italic,
-        strikethrough: classes.strikethough,
+        strikethrough: classes.strikethrough,
         underline: classes.underline,
         underlineStrikethrough: classes.underlineStrikethrough
       }
@@ -89,30 +120,40 @@ const RichTextEditor = ({
 
   return (
     <LexicalComposer initialConfig={initialConfig}>
-      <ToolbarPlugin editable={editable} getEditorState={getEditorState} />
-      <RichTextPlugin
-        ErrorBoundary={LexicalErrorBoundary}
-        contentEditable={
-          <ContentEditable
-            editable={editable}
-            editorState={editorState}
-            hasInitialTextContent={hasInitialTextContent}
-            initialEditorState={initialEditorState}
-            inputClassname={inputClassname}
-            minInputHeight={minInputHeight}
-            namespace={namespace}
-            placeholder={placeholder}
-            resetEditorToInitialStateCondition={
-              resetEditorToInitialStateCondition
+      <div className={classes.container}>
+        <div className={classes.toolbar}>
+          <ToolbarPlugin editable={editable} getEditorState={getEditorState} />
+        </div>
+        <div>
+          <RichTextPlugin
+            ErrorBoundary={LexicalErrorBoundary}
+            contentEditable={
+              <ContentEditable
+                className={contentClassName || ''}
+                editable={editable}
+                editorState={editorState}
+                error={error}
+                hasInitialTextContent={hasInitialTextContent}
+                initialEditorState={initialEditorState}
+                inputClassname={inputClassname}
+                minInputHeight={minInputHeight}
+                namespace={namespace}
+                placeholder={placeholder}
+                resetEditorToInitialStateCondition={
+                  resetEditorToInitialStateCondition
+                }
+                onBlur={onBlur}
+              />
             }
+            placeholder={null}
           />
-        }
-        placeholder={null}
-      />
-      <HistoryPlugin />
-      <LinkPlugin />
-      <AutoCompleteLinkPlugin />
-      <FloatingLinkEditorPlugin editable={editable} />
+          <HistoryPlugin />
+          <LinkPlugin />
+          <AutoCompleteLinkPlugin />
+          <FloatingLinkEditorPlugin editable={editable} />
+          {error && <Typography className={classes.error}>{error}</Typography>}
+        </div>
+      </div>
     </LexicalComposer>
   );
 };

package/src/RichTextEditor/plugins/FloatingLinkEditorPlugin.tsx

@@ -117,6 +117,7 @@ const FloatingLinkEditor = ({
         {editMode ? (
           <InputField
             autoFocus
+            dataTestId="InputLinkField"
             defaultValue={linkUrl}
             label={t(labelInputLink)}
             size="small"

package/src/Snackbar/index.tsx

@@ -7,22 +7,28 @@ import { makeStyles } from 'tss-react/mui';
 import { IconButton, Alert } from '@mui/material';
 import IconClose from '@mui/icons-material/Close';
 
+import { sanitizedHTML } from '../utils';
+
 import Severity from './Severity';
 
-const useStyles = makeStyles()({
+const useStyles = makeStyles()((theme) => ({
   alertIcon: {
-    paddingTop: '10px'
+    paddingTop: theme.spacing(1.25)
   },
   closeIcon: {
     fontSize: 20,
     opacity: 0.9
   },
   message: {
+    '& a': {
+      color: theme.palette.primary.main,
+      textDecoration: 'none'
+    },
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center'
   }
-});
+}));
 
 export interface SnackbarProps {
   id: string | number;
@@ -51,6 +57,10 @@ const Snackbar = React.forwardRef(
       }
       closeSnackbar(id);
     };
+    const sanitizedMessage = sanitizedHTML({ initialContent: message });
+
+    const formatedMessage =
+      typeof message === 'string' ? <div>{sanitizedMessage}</div> : message;
 
     return (
       <SnackbarContent ref={ref}>
@@ -69,7 +79,7 @@ const Snackbar = React.forwardRef(
           severity={severity}
           variant="filled"
         >
-          {message}
+          {formatedMessage}
         </Alert>
       </SnackbarContent>
     );

package/src/Snackbar/useSnackbar.tsx

@@ -2,6 +2,8 @@ import { useSnackbar as useNotistackSnackbar } from 'notistack';
 
 import { Typography } from '@mui/material';
 
+import { sanitizedHTML } from '../utils';
+
 import Severity from './Severity';
 
 import Snackbar from '.';
@@ -59,7 +61,9 @@ const useSnackbar = (): UseSnackbar => {
         <div>
           {formattedMessages.map((errorMessage, index) => (
             <Typography key={messageKeys[index]} variant="body2">
-              {errorMessage}
+              {sanitizedHTML({
+                initialContent: errorMessage
+              })}
             </Typography>
           ))}
         </div>

package/src/SortableItems/SortableItem.tsx

@@ -2,7 +2,7 @@ import { props } from 'ramda';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
-import useMemoComponent from '../utils/useMemoComponent';
+import { useMemoComponent } from '../utils';
 
 import Item from './Item';
 

package/src/ThemeProvider/index.tsx

@@ -5,18 +5,22 @@ import { CSSInterpolation } from 'tss-react';
 import { equals } from 'ramda';
 
 import {
-  ThemeProvider as MuiThemeProvider,
-  Theme,
-  StyledEngineProvider,
+  ButtonProps,
   createTheme,
   InputBaseProps,
-  ButtonProps
+  StyledEngineProvider,
+  Theme,
+  ThemeProvider as MuiThemeProvider
 } from '@mui/material';
 import CssBaseline from '@mui/material/CssBaseline';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
 import { ThemeOptions } from '@mui/material/styles/createTheme';
 
 import { ThemeMode, userAtom } from '@centreon/ui-context';
+import RobotoLightWoff2 from '@centreon/ui/fonts/roboto-light-webfont.woff2';
+import RobotoRegularWoff2 from '@centreon/ui/fonts/roboto-regular-webfont.woff2';
+import RobotoMediumWoff2 from '@centreon/ui/fonts/roboto-medium-webfont.woff2';
+import RobotoBoldWoff2 from '@centreon/ui/fonts/roboto-bold-webfont.woff2';
 
 import { getPalette } from './palettes';
 
@@ -173,6 +177,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
           height: 100%;
+          text-rendering: optimizeLegibility;
         }
         body {
           background-color: ${theme.palette.background.paper};
@@ -180,6 +185,30 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
         }
+        @font-face {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 300;
+          src: local('Roboto'), local('Roboto-Light'), url(${RobotoLightWoff2}) format('woff2');
+        }
+        @font-face {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 400;
+          src: local('Roboto'), local('Roboto-Regular'), url(${RobotoRegularWoff2}) format('woff2');
+        }
+        @font-face {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 500;
+          src: local('Roboto'), local('Roboto-Medium'), url(${RobotoMediumWoff2}) format('woff2');
+        }
+        @font-face {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 700;
+          src: local('Roboto'), local('Roboto-Bold'), url(${RobotoBoldWoff2}) format('woff2');
+        }
       `
     },
     MuiInputBase: {
@@ -253,7 +282,8 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     caption: {
       fontSize: '0.625rem'
-    }
+    },
+    fontFamily: 'Roboto, Arial'
   }
 });