@centreon/ui 23.10.121 → 24.4.0

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

@@ -0,0 +1,155 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import {
+  $isListNode,
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  ListNode,
+  REMOVE_LIST_COMMAND
+} from '@lexical/list';
+import { $getSelection, $isRootOrShadowRoot } from 'lexical';
+import {
+  $findMatchingParent,
+  $getNearestNodeOfType,
+  mergeRegister
+} from '@lexical/utils';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { equals, isNil } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
+import UnorderedListIcon from '@mui/icons-material/FormatListBulleted';
+import OrderedListIcon from '@mui/icons-material/FormatListNumbered';
+
+import { Menu } from '../../../components';
+import { labelOrderedList, labelUnorderedList } from '../../translatedLabels';
+
+import { useStyles } from './ToolbarPlugin.styles';
+
+const options = [
+  {
+    Icon: UnorderedListIcon,
+    label: labelUnorderedList,
+    value: 'bullet'
+  },
+  {
+    Icon: OrderedListIcon,
+    label: labelOrderedList,
+    value: 'number'
+  }
+];
+
+interface Props {
+  disabled?: boolean;
+}
+
+const ListButton = ({ disabled }: Props): JSX.Element => {
+  const { classes } = useStyles();
+  const { t } = useTranslation();
+
+  const [editor] = useLexicalComposerContext();
+
+  const [elementList, setElementList] = useState(null);
+
+  const formatBulletList = (): void => {
+    if (elementList !== 'bullet') {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    }
+  };
+
+  const formatNumberedList = (): void => {
+    if (elementList !== 'number') {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    }
+  };
+
+  const formatList = (type): void => {
+    if (equals(type, elementList)) {
+      setElementList(null);
+    }
+
+    if (equals(type, 'bullet')) {
+      formatBulletList();
+
+      return;
+    }
+    formatNumberedList();
+  };
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    const anchorNode = selection?.anchor.getNode();
+    const element = equals(anchorNode?.getKey(), 'root')
+      ? anchorNode
+      : $findMatchingParent(anchorNode, (e) => {
+          const parent = e.getParent();
+
+          return parent !== null && $isRootOrShadowRoot(parent);
+        }) || anchorNode?.getTopLevelElementOrThrow();
+
+    const elementKey = element?.getKey();
+    const elementDOM = editor.getElementByKey(elementKey);
+
+    if (isNil(elementDOM)) {
+      return;
+    }
+
+    if ($isListNode(element)) {
+      const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+      const type = parentList
+        ? parentList.getListType()
+        : element.getListType();
+      setElementList(type);
+    }
+  }, [editor]);
+
+  const selectedList = options.find(({ value }) => equals(value, elementList));
+
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        updateToolbar();
+      });
+    });
+  }, [editor, updateToolbar]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateToolbar();
+        });
+      })
+    );
+  }, [editor, updateToolbar]);
+
+  return (
+    <Menu>
+      <Menu.Button
+        ariaLabel="list"
+        className={classes.button}
+        disabled={disabled}
+      >
+        {selectedList ? <selectedList.Icon /> : <UnorderedListIcon />}
+      </Menu.Button>
+      <Menu.Items className={classes.menuItems}>
+        <div className={classes.menu}>
+          {options.map(({ Icon, value, label }) => (
+            <Menu.Item
+              isActive={equals(value, elementList)}
+              key={value}
+              onClick={() => formatList(value)}
+            >
+              <Icon aria-label={t(label)} />
+            </Menu.Item>
+          ))}
+        </div>
+      </Menu.Items>
+    </Menu>
+  );
+};
+
+export default ListButton;

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

@@ -1,13 +1,11 @@
-import { useState } from 'react';
-
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { createCommand, LexicalCommand } from 'lexical';
 
 import MacrosIcon from '@mui/icons-material/TerminalOutlined';
 
-import { ActionsList, IconButton, PopoverMenu } from '../../..';
+import { Menu } from '../../../components';
 
-import { useStyles } from '.';
+import { useStyles } from './ToolbarPlugin.styles';
 
 const LowPriority = 1;
 
@@ -27,15 +25,12 @@ export const standardMacros = [
 
 const MacrosButton = ({ disabled }: Props): JSX.Element => {
   const { classes } = useStyles();
-  const [arMacrosDiplayed, setAreMacrosDiplayed] = useState(false);
 
   const [editor] = useLexicalComposerContext();
 
   const INSERT_MACROS_COMMAND: LexicalCommand<string> = createCommand();
 
-  const onClick = (e): void => {
-    const macro = e.target.id || e.target.textContent.trim();
-
+  const onClick = (macro): void => {
     editor.dispatchCommand(INSERT_MACROS_COMMAND, macro);
   };
 
@@ -53,38 +48,27 @@ const MacrosButton = ({ disabled }: Props): JSX.Element => {
     LowPriority
   );
 
-  const displayMacros = (): void => {
-    setAreMacrosDiplayed(true);
-  };
-
-  const actions = standardMacros.map((macro) => ({
-    label: macro,
-    onClick
-  }));
-
   return (
-    <PopoverMenu
-      icon={
-        <IconButton
-          ariaLabel="Macros"
-          className={classes.macrosButton}
-          disabled={disabled}
-          title="Macros"
-          tooltipPlacement="top"
-          onClick={displayMacros}
-        >
-          <MacrosIcon />
-        </IconButton>
-      }
-    >
-      {(): JSX.Element => (
-        <div>
-          {arMacrosDiplayed && (
-            <ActionsList actions={actions} listItemClassName={classes.macros} />
-          )}
-        </div>
-      )}
-    </PopoverMenu>
+    <Menu>
+      <Menu.Button
+        ariaLabel="Macros"
+        className={classes.button}
+        disabled={disabled}
+      >
+        <MacrosIcon />
+      </Menu.Button>
+      <Menu.Items className={classes.menuItems}>
+        {standardMacros.map((name) => (
+          <Menu.Item
+            className={classes.menuItem}
+            key={name}
+            onClick={(): void => onClick(name)}
+          >
+            {name}
+          </Menu.Item>
+        ))}
+      </Menu.Items>
+    </Menu>
   );
 };
 

package/src/RichTextEditor/plugins/ToolbarPlugin/ToolbarPlugin.styles.ts

@@ -1,22 +1,32 @@
 import { makeStyles } from 'tss-react/mui';
 
-export const useBlockButtonsStyles = makeStyles()((theme) => ({
-  autocomplete: {
-    width: theme.spacing(17)
-  }
-}));
+import { alpha } from '@mui/system';
 
-export const useAlignPickerStyles = makeStyles()((theme) => ({
+export const useStyles = makeStyles()((theme) => ({
   button: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(1)
+    color: theme.palette.text.primary
   },
-  option: {
-    alignItems: 'center',
+  buttonSelected: {
+    backgroundColor: alpha(
+      theme.palette.primary.main,
+      theme.palette.action.activatedOpacity
+    )
+  },
+  menu: {
     display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(2)
+    flexDirection: 'row'
+  },
+  menuItem: {
+    '&, &.MuiMenuItem-root': {
+      fontSize: theme.typography.body2.fontSize
+    }
+  },
+  menuItems: {
+    '& > .MuiPaper-root.MuiMenu-paper': {
+      minWidth: 0
+    },
+    '& ul, & ul.MuiMenu-list': {
+      padding: 0
+    }
   }
 }));

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

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

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

@@ -5,8 +5,10 @@ import { Divider } from '@mui/material';
 import FormatButtons from './FormatButtons';
 import UndoRedoButtons from './UndoRedoButtons';
 import MacrosButton from './MacrosButton';
-import BlockButtons from './BlockButtons';
 import AlignPicker from './AlignPicker';
+import ListButton from './ListButton';
+import LinkButton from './LinkButton';
+import BlockButtons from './BlockButtons';
 
 interface Props {
   className?: string;
@@ -22,14 +24,6 @@ export const useStyles = makeStyles()((theme) => ({
     columnGap: theme.spacing(1),
     display: 'flex',
     marginBottom: theme.spacing(1)
-  },
-  macros: {
-    '& span': {
-      fontSize: theme.typography.caption.fontSize
-    }
-  },
-  macrosButton: {
-    marginBottom: theme.spacing(0.5)
   }
 }));
 
@@ -51,9 +45,10 @@ const ToolbarPlugin = ({
           <BlockButtons disabled={disabled} />
         </>
       )}
-      <Divider flexItem orientation="vertical" />
       <FormatButtons disabled={disabled} />
       <AlignPicker disabled={disabled} />
+      <ListButton disabled={disabled} />
+      <LinkButton disabled={disabled} />
       {displayMacrosButton && (
         <>
           <Divider flexItem orientation="vertical" />

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/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/StoryBookThemeProvider/index.tsx

@@ -1,36 +1,35 @@
-import * as React from 'react';
-import { useMemo } from 'react';
-
-import {
-  ThemeProvider as MuiThemeProvider,
-  StyledEngineProvider,
-  createTheme,
-  CssBaseline
-} from '@mui/material';
-
-import { ThemeMode } from '@centreon/ui-context';
-
-import { getTheme } from '../ThemeProvider';
-
-interface Props {
-  children: React.ReactElement;
-  themeMode: ThemeMode;
-}
-
-const StoryBookThemeProvider = ({
-  children,
-  themeMode
-}: Props): JSX.Element => {
-  const theme = useMemo(() => createTheme(getTheme(themeMode)), [themeMode]);
-
-  return (
-    <StyledEngineProvider injectFirst>
-      <MuiThemeProvider theme={theme}>
-        {children}
-        <CssBaseline />
-      </MuiThemeProvider>
-    </StyledEngineProvider>
-  );
-};
-
-export default StoryBookThemeProvider;
+import { useMemo } from 'react';
+
+import {
+  CssBaseline,
+  ThemeProvider as MuiThemeProvider,
+  StyledEngineProvider,
+  createTheme
+} from '@mui/material';
+
+import { ThemeMode } from '@centreon/ui-context';
+
+import { getTheme } from '../ThemeProvider';
+
+interface Props {
+  children: React.ReactElement;
+  themeMode: ThemeMode;
+}
+
+const StoryBookThemeProvider = ({
+  children,
+  themeMode
+}: Props): JSX.Element => {
+  const theme = useMemo(() => createTheme(getTheme(themeMode)), [themeMode]);
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <MuiThemeProvider theme={theme}>
+        {children}
+        <CssBaseline />
+      </MuiThemeProvider>
+    </StyledEngineProvider>
+  );
+};
+
+export default StoryBookThemeProvider;

package/src/ThemeProvider/index.tsx

@@ -1,31 +1,31 @@
-import * as React from 'react';
+import { ReactNode, useMemo } from 'react';
 
 import { useAtomValue } from 'jotai';
-import { CSSInterpolation } from 'tss-react';
 import { equals } from 'ramda';
+import { CSSInterpolation } from 'tss-react';
 
 import {
   ButtonProps,
-  createTheme,
   InputBaseProps,
+  ThemeProvider as MuiThemeProvider,
   StyledEngineProvider,
   Theme,
-  ThemeProvider as MuiThemeProvider
+  createTheme
 } from '@mui/material';
-import CssBaseline from '@mui/material/CssBaseline';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
+import CssBaseline from '@mui/material/CssBaseline';
 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 RobotoBoldWoff2 from '../fonts/roboto-bold-webfont.woff2';
+import RobotoLightWoff2 from '../fonts/roboto-light-webfont.woff2';
+import RobotoMediumWoff2 from '../fonts/roboto-medium-webfont.woff2';
+import RobotoRegularWoff2 from '../fonts/roboto-regular-webfont.woff2';
 
 import { getPalette } from './palettes';
 
 declare module '@mui/styles/defaultTheme' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface DefaultTheme extends Theme {}
 }
 
@@ -147,6 +147,30 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     MuiCssBaseline: {
       styleOverrides: (theme) => `
+        ::-webkit-scrollbar {
+          height: ${theme.spacing(1)};
+          width: ${theme.spacing(1)};
+          background-color: transparent;
+        }
+        ::-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;
@@ -160,6 +184,9 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
         }
+        #root {
+          background-color: ${theme.palette.background.paper};
+        }
         @font-face {
           font-family: 'Roboto';
           font-style: normal;
@@ -266,13 +293,13 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
 });
 
 interface Props {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 const ThemeProvider = ({ children }: Props): JSX.Element => {
   const { themeMode } = useAtomValue(userAtom);
 
-  const theme = React.useMemo(
+  const theme = useMemo(
     () => createTheme(getTheme(themeMode || ThemeMode.light)),
     [themeMode]
   );

package/src/ThemeProvider/palettes.ts

@@ -1,6 +1,9 @@
 import { equals } from 'ramda';
 
-import { alpha, PaletteOptions } from '@mui/material';
+import {
+  type PaletteOptions as PaletteOptionsModel,
+  alpha
+} from '@mui/material';
 
 import { ThemeMode } from '@centreon/ui-context';
 
@@ -140,10 +143,10 @@ declare module '@mui/material/Badge' {
   }
 }
 
-export const lightPalette: PaletteOptions = {
+export const lightPalette: PaletteOptionsModel = {
   action: {
-    acknowledged: '#67532C',
-    acknowledgedBackground: '#F5F1E9',
+    acknowledged: '#745F35',
+    acknowledgedBackground: '#DFD2B9',
     activatedOpacity: 0.12,
     active: '#666666',
     disabled: '#999999',
@@ -152,8 +155,8 @@ export const lightPalette: PaletteOptions = {
     focusOpacity: 0.12,
     hover: 'rgba(0, 0, 0, 0.06)',
     hoverOpacity: 0.06,
-    inDowntime: '#4B2352',
-    inDowntimeBackground: '#F0E9F8',
+    inDowntime: '#512980',
+    inDowntimeBackground: '#E5D8F3',
     selected: 'rgba(102, 102, 102, 0.3)',
     selectedOpacity: 0.3
   },
@@ -280,10 +283,10 @@ export const lightPalette: PaletteOptions = {
   }
 };
 
-export const darkPalette: PaletteOptions = {
+export const darkPalette: PaletteOptionsModel = {
   action: {
-    acknowledged: '#67532C',
-    acknowledgedBackground: '#67532C',
+    acknowledged: '#DFD2B9',
+    acknowledgedBackground: '#745F35',
     activatedOpacity: 0.3,
     active: '#B5B5B5',
     disabled: '#999999',
@@ -292,8 +295,8 @@ export const darkPalette: PaletteOptions = {
     focusOpacity: 0.3,
     hover: 'rgba(255, 255, 255, 0.16)',
     hoverOpacity: 0.16,
-    inDowntime: '#4B2352',
-    inDowntimeBackground: '#4B2352',
+    inDowntime: '#E5D8F3',
+    inDowntimeBackground: '#512980',
     selected: 'rgba(255, 255, 255, 0.5)',
     selectedOpacity: 0.5
   },
@@ -418,5 +421,5 @@ export const darkPalette: PaletteOptions = {
   }
 };
 
-export const getPalette = (mode: ThemeMode): PaletteOptions =>
+export const getPalette = (mode: ThemeMode): PaletteOptionsModel =>
   equals(mode, ThemeMode.dark) ? darkPalette : lightPalette;

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.styles.ts

@@ -12,22 +12,21 @@ const useStyles = makeStyles()((theme) => ({
   },
   containerDates: {
     display: 'flex',
-    gap: theme.spacing(0.5),
     [theme.breakpoints.down('sm')]: {
-      columnGap: theme.spacing(0.5),
-      flexDirection: 'column'
+      flexDirection: 'column',
+      gap: theme.spacing(0.5)
     }
   },
   date: {
-    minWidth: theme.spacing(12.5),
+    minWidth: theme.spacing(12),
     textAlign: 'start'
   },
   error: {
     textAlign: 'center'
   },
   label: {
-    minWidth: theme.spacing(3),
-    textAlign: 'start'
+    minWidth: theme.spacing(3.5),
+    textAlign: 'end'
   },
 
   picker: {
@@ -39,7 +38,7 @@ const useStyles = makeStyles()((theme) => ({
   },
   timeContainer: {
     alignItems: 'center',
-    columnGap: theme.spacing(1),
+    columnGap: theme.spacing(0.5),
     display: 'flex',
     flexDirection: 'row',
     [theme.breakpoints.down('sm')]: {