@centreon/ui 23.10.43 → 23.10.44

package/src/RichTextEditor/RichTextEditor.tsx

@@ -7,9 +7,6 @@ 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';
@@ -17,19 +14,15 @@ 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');
@@ -38,46 +31,26 @@ const onError = (error: Error): void => {
   log.error(error.message);
 };
 
-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 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 RichTextEditor = ({
   namespace = 'RichTextEditor',
@@ -88,13 +61,9 @@ const RichTextEditor = ({
   initialEditorState,
   editable = true,
   editorState,
-  resetEditorToInitialStateCondition,
-  toolbarPositions = 'start',
-  error,
-  onBlur,
-  contentClassName
+  resetEditorToInitialStateCondition
 }: RichTextEditorProps): JSX.Element => {
-  const { classes } = useStyles({ toolbarPositions });
+  const { classes } = useStyles();
 
   const hasInitialTextContent = initialEditorState
     ? JSON.parse(initialEditorState).root?.children.length > 0
@@ -111,7 +80,7 @@ const RichTextEditor = ({
       text: {
         bold: classes.bold,
         italic: classes.italic,
-        strikethrough: classes.strikethrough,
+        strikethrough: classes.strikethough,
         underline: classes.underline,
         underlineStrikethrough: classes.underlineStrikethrough
       }
@@ -120,40 +89,30 @@ const RichTextEditor = ({
 
   return (
     <LexicalComposer initialConfig={initialConfig}>
-      <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}
-              />
+      <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
             }
-            placeholder={null}
           />
-          <HistoryPlugin />
-          <LinkPlugin />
-          <AutoCompleteLinkPlugin />
-          <FloatingLinkEditorPlugin editable={editable} />
-          {error && <Typography className={classes.error}>{error}</Typography>}
-        </div>
-      </div>
+        }
+        placeholder={null}
+      />
+      <HistoryPlugin />
+      <LinkPlugin />
+      <AutoCompleteLinkPlugin />
+      <FloatingLinkEditorPlugin editable={editable} />
     </LexicalComposer>
   );
 };

package/src/RichTextEditor/plugins/FloatingLinkEditorPlugin.tsx

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

package/src/Snackbar/index.tsx

@@ -7,28 +7,22 @@ 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()((theme) => ({
+const useStyles = makeStyles()({
   alertIcon: {
-    paddingTop: theme.spacing(1.25)
+    paddingTop: '10px'
   },
   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;
@@ -57,10 +51,6 @@ const Snackbar = React.forwardRef(
       }
       closeSnackbar(id);
     };
-    const sanitizedMessage = sanitizedHTML({ initialContent: message });
-
-    const formatedMessage =
-      typeof message === 'string' ? <div>{sanitizedMessage}</div> : message;
 
     return (
       <SnackbarContent ref={ref}>
@@ -79,7 +69,7 @@ const Snackbar = React.forwardRef(
           severity={severity}
           variant="filled"
         >
-          {formatedMessage}
+          {message}
         </Alert>
       </SnackbarContent>
     );

package/src/Snackbar/useSnackbar.tsx

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

package/src/ThemeProvider/index.tsx

@@ -5,22 +5,18 @@ import { CSSInterpolation } from 'tss-react';
 import { equals } from 'ramda';
 
 import {
-  ButtonProps,
+  ThemeProvider as MuiThemeProvider,
+  Theme,
+  StyledEngineProvider,
   createTheme,
   InputBaseProps,
-  StyledEngineProvider,
-  Theme,
-  ThemeProvider as MuiThemeProvider
+  ButtonProps
 } 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';
 
@@ -148,12 +144,35 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     MuiCssBaseline: {
       styleOverrides: (theme) => `
+        ::-webkit-scrollbar {
+          height: ${theme.spacing(1)};
+          width: ${theme.spacing(1)};
+          background-color: ${theme.palette.background.default};
+        }
+        ::-webkit-scrollbar-thumb {
+          background-color: ${
+            equals(mode, 'dark')
+              ? theme.palette.divider
+              : theme.palette.text.disabled
+          };
+          border-radius: ${theme.spacing(0.5)};
+        }
+        ::-webkit-scrollbar-thumb:hover {
+          background-color: ${theme.palette.primary.main};
+        }
+        * {
+          scrollbar-color: ${
+            equals(mode, 'dark')
+              ? theme.palette.divider
+              : theme.palette.text.disabled
+          } ${theme.palette.background.default};
+          scrollbar-width: thin;
+        }
         html {
           margin: 0;
           padding: 0;
           width: 100%;
           height: 100%;
-          text-rendering: optimizeLegibility;
         }
         body {
           background-color: ${theme.palette.background.paper};
@@ -161,30 +180,6 @@ 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: {
@@ -258,8 +253,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     caption: {
       fontSize: '0.625rem'
-    },
-    fontFamily: 'Roboto, Arial'
+    }
   }
 });