@centreon/ui 24.4.21 → 24.4.22

package/src/RichTextEditor/plugins/ToolbarPlugin/UndoRedoButtons.tsx

@@ -16,9 +16,17 @@ import RedoIcon from '@mui/icons-material/Redo';
 import { IconButton } from '../../..';
 import { labelRedo, labelUndo } from '../../translatedLabels';
 
+import { useStyles } from './ToolbarPlugin.styles';
+
 const LowPriority = 1;
 
-const UndoRedoButtons = (): JSX.Element => {
+interface Props {
+  disabled: boolean;
+}
+
+const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
+  const { classes } = useStyles();
+
   const { t } = useTranslation();
 
   const [canUndo, setCanUndo] = useState(false);
@@ -64,7 +72,8 @@ const UndoRedoButtons = (): JSX.Element => {
     <>
       <IconButton
         ariaLabel={translatedUndo}
-        disabled={!canUndo}
+        className={classes.button}
+        disabled={!canUndo || disabled}
         title={translatedUndo}
         tooltipPlacement="top"
         onClick={undo}
@@ -73,7 +82,8 @@ const UndoRedoButtons = (): JSX.Element => {
       </IconButton>
       <IconButton
         ariaLabel={translatedRedo}
-        disabled={!canRedo}
+        className={classes.button}
+        disabled={!canRedo || disabled}
         title={translatedRedo}
         tooltipPlacement="top"
         onClick={redo}

package/src/RichTextEditor/plugins/ToolbarPlugin/index.tsx

@@ -1,18 +1,26 @@
-import { EditorState } from 'lexical';
 import { makeStyles } from 'tss-react/mui';
 
 import { Divider } from '@mui/material';
 
 import FormatButtons from './FormatButtons';
 import UndoRedoButtons from './UndoRedoButtons';
+import MacrosButton from './MacrosButton';
+import AlignPicker from './AlignPicker';
+import ListButton from './ListButton';
+import LinkButton from './LinkButton';
+import BlockButtons from './BlockButtons';
 
 interface Props {
+  className?: string;
+  disabled: boolean;
+  displayBlockButtons: boolean;
+  displayMacrosButton?: boolean;
   editable: boolean;
-  getEditorState?: (editorState: EditorState) => void;
 }
 
-const useStyles = makeStyles()((theme) => ({
+export const useStyles = makeStyles()((theme) => ({
   container: {
+    alignItems: 'center',
     columnGap: theme.spacing(1),
     display: 'flex',
     marginBottom: theme.spacing(1)
@@ -20,16 +28,33 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 const ToolbarPlugin = ({
-  getEditorState,
-  editable
+  editable,
+  displayMacrosButton,
+  disabled,
+  displayBlockButtons,
+  className
 }: Props): JSX.Element | null => {
-  const { classes } = useStyles();
+  const { cx, classes } = useStyles();
 
   return editable ? (
-    <div className={classes.container}>
-      <UndoRedoButtons />
-      <Divider flexItem orientation="vertical" />
-      <FormatButtons getEditorState={getEditorState} />
+    <div className={cx(classes.container, className)}>
+      <UndoRedoButtons disabled={disabled} />
+      {displayBlockButtons && (
+        <>
+          <Divider flexItem orientation="vertical" />
+          <BlockButtons disabled={disabled} />
+        </>
+      )}
+      <FormatButtons disabled={disabled} />
+      <AlignPicker disabled={disabled} />
+      <ListButton disabled={disabled} />
+      <LinkButton disabled={disabled} />
+      {displayMacrosButton && (
+        <>
+          <Divider flexItem orientation="vertical" />
+          <MacrosButton disabled={disabled} />
+        </>
+      )}
     </div>
   ) : null;
 };

package/src/RichTextEditor/translatedLabels.ts

@@ -3,3 +3,6 @@ export const labelRedo = 'Redo';
 export const labelInputLink = 'Insert link';
 export const labelSavedLink = 'Saved link';
 export const labelEditLink = 'Edit link';
+export const labelAlignPicker = 'align picker';
+export const labelUnorderedList = 'Unordered List';
+export const labelOrderedList = 'Ordered List';

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';
 
@@ -56,7 +56,8 @@ const SortableItem = ({
       transform,
       props(itemProps, rest),
       ...memoProps,
-      ...additionalProps
+      ...additionalProps,
+      ...Object.values(rest)
     ]
   });
 };

package/src/SortableItems/index.tsx

@@ -15,11 +15,7 @@ import {
   DragEndEvent,
   Over
 } from '@dnd-kit/core';
-import {
-  SortableContext,
-  sortableKeyboardCoordinates,
-  SortingStrategy
-} from '@dnd-kit/sortable';
+import { SortableContext, SortingStrategy } from '@dnd-kit/sortable';
 import {
   equals,
   find,
@@ -117,7 +113,6 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
     useSensor(MouseSensor),
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
       keyboardCodes: {
         cancel: ['Escape'],
         end: ['Space', 'Enter'],
@@ -169,7 +164,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
   };
 
   const getItemById = (id): T | undefined =>
-    find(propEq(propertyToFilterItemsOn, id), items);
+    find(propEq(id, propertyToFilterItemsOn), items);
 
   const activeItem = getItemById(activeId) as Record<string, unknown>;
 

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';
 
@@ -44,8 +48,7 @@ const getInputBaseRootStyle = ({
 
   if (equals(size, 'compact')) {
     return {
-      padding: '8px 8px',
-      paddingRight: '0px'
+      padding: '0px 0px 0px 8px'
     };
   }
   if (equals(size, 'small')) {
@@ -71,7 +74,6 @@ const getInputBaseRootStyle = ({
 const getInputBaseInputStyle = ({ size }: InputBaseProps): CSSInterpolation => {
   if (equals(size, 'compact')) {
     return {
-      fontSize: 'x-small',
       minHeight: '32px'
     };
   }
@@ -119,6 +121,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     MuiChip: {
       styleOverrides: {
         root: ({ ownerState, theme }) => ({
+          backgroundColor: !ownerState.color && theme.palette.divider,
           ...(equals(ownerState.size, 'medium') && {
             borderRadius: theme.spacing(1.25),
             fontSize: theme.typography.body2.fontSize,
@@ -147,7 +150,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
         ::-webkit-scrollbar {
           height: ${theme.spacing(1)};
           width: ${theme.spacing(1)};
-          background-color: ${theme.palette.background.default};
+          background-color: transparent;
         }
         ::-webkit-scrollbar-thumb {
           background-color: ${
@@ -173,6 +176,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
           height: 100%;
+          text-rendering: optimizeLegibility;
         }
         body {
           background-color: ${theme.palette.background.paper};
@@ -180,11 +184,38 @@ 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: {
       styleOverrides: {
-        root: ({ ownerState }) => getInputBaseInputStyle(ownerState)
+        root: ({ ownerState, theme }) => ({
+          ...getInputBaseInputStyle(ownerState),
+          backgroundColor: theme.palette.background.paper
+        })
       }
     },
     MuiList: {
@@ -253,7 +284,8 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     caption: {
       fontSize: '0.625rem'
-    }
+    },
+    fontFamily: 'Roboto, Arial'
   }
 });