@centreon/ui 24.4.39 → 24.4.40

package/src/Graph/common/timeSeries/index.ts

@@ -179,7 +179,7 @@ const getMetricValuesForUnit = ({
     ) as Array<number>;
 
   return pipe(
-    filter(propEq(unit, 'unit')) as (line) => Array<Line>,
+    filter(propEq('unit', unit)) as (line) => Array<Line>,
     map(prop('metric_id')),
     map(getTimeSeriesValuesForMetric),
     flatten,
@@ -203,7 +203,7 @@ const getLineForMetric = ({
   lines,
   metric_id
 }: LineForMetricProps): Line | undefined =>
-  find(propEq(metric_id, 'metric_id'), lines);
+  find(propEq('metric_id', metric_id), lines);
 
 interface LinesTimeSeries {
   lines: Array<Line>;
@@ -275,7 +275,7 @@ interface HasStackedLines {
 }
 
 const hasUnitStackedLines = ({ lines, unit }: HasStackedLines): boolean =>
-  pipe(getSortedStackedLines, any(propEq(unit, 'unit')))(lines);
+  pipe(getSortedStackedLines, any(propEq('unit', unit)))(lines);
 
 const getTimeSeriesForLines = ({
   lines,

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -292,16 +292,13 @@ const ConnectedAutocompleteField = (
       }
     }, [optionsOpen]);
 
-    useEffect(
-      () => {
-        setSearchParameter(
-          !isEmpty(searchConditions)
-            ? { conditions: searchConditions }
-            : undefined
-        );
-      },
-      useDeepCompare([searchConditions])
-    );
+    useEffect(() => {
+      setSearchParameter(
+        !isEmpty(searchConditions)
+          ? { conditions: searchConditions }
+          : undefined
+      );
+    }, useDeepCompare([searchConditions]));
 
     useEffect(() => {
       if (!autocompleteChangedValue && !props?.value) {

package/src/InputField/Select/Autocomplete/Draggable/SortableList.tsx

@@ -49,7 +49,7 @@ const SortableList = ({
   const dragEnd = ({ items: newItems }): void =>
     changeItemsOrder(
       map(
-        (item) => find(propEq(item, 'id'), items),
+        (item) => find(propEq('id', item), items),
         newItems
       ) as Array<DraggableSelectEntry>
     );

package/src/InputField/Select/Autocomplete/Draggable/SortableListContent.tsx

@@ -49,7 +49,7 @@ const SortableListContent = ({
         return;
       }
 
-      const itemIndex = findIndex(propEq(id, 'id'), items);
+      const itemIndex = findIndex(propEq('id', id), items);
 
       itemHover?.(null);
       itemClick?.({ index: itemIndex, item: { createOption, id, name } });

package/src/InputField/Select/Autocomplete/Draggable/index.tsx

@@ -77,7 +77,7 @@ const DraggableAutocomplete = (
     const deleteValue = (id): void => {
       itemHover?.(null);
       setSelectedValues((values: Array<DraggableSelectEntry>) => {
-        const index = findIndex(propEq(id, 'id'), values);
+        const index = findIndex(propEq('id', id), values);
 
         const newSelectedValues = remove(index, 1, values);
 

package/src/InputField/Select/Autocomplete/index.tsx

@@ -141,132 +141,126 @@ type Multiple = boolean;
 type DisableClearable = boolean;
 type FreeSolo = boolean;
 
-const AutocompleteField = React.forwardRef(
-  (
-    {
-      options,
-      label,
-      placeholder,
-      loading = false,
-      onTextChange = (): void => undefined,
-      endAdornment = undefined,
-      inputValue,
-      displayOptionThumbnail = false,
-      required = false,
-      error,
-      displayPopupIcon = true,
-      autoFocus = false,
-      hideInput = false,
-      dataTestId,
-      autoSize = false,
-      autoSizeDefaultWidth = 0,
-      autoSizeCustomPadding,
-      getOptionItemLabel = (option) => option.name,
-      ...autocompleteProps
-    }: Props,
-    ref?: React.ForwardedRef<HTMLDivElement>
-  ): JSX.Element => {
-    const { classes, cx } = useStyles({ hideInput });
-    const { t } = useTranslation();
-    const theme = useTheme();
+const AutocompleteField = ({
+  options,
+  label,
+  placeholder,
+  loading = false,
+  onTextChange = (): void => undefined,
+  endAdornment = undefined,
+  inputValue,
+  displayOptionThumbnail = false,
+  required = false,
+  error,
+  displayPopupIcon = true,
+  autoFocus = false,
+  hideInput = false,
+  dataTestId,
+  autoSize = false,
+  autoSizeDefaultWidth = 0,
+  autoSizeCustomPadding,
+  getOptionItemLabel = (option) => option.name,
+  ...autocompleteProps
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles({ hideInput });
+  const { t } = useTranslation();
+  const theme = useTheme();
 
-    const areSelectEntriesEqual = (option, value): boolean => {
-      const identifyingProps = ['id', 'name'];
+  const areSelectEntriesEqual = (option, value): boolean => {
+    const identifyingProps = ['id', 'name'];
 
-      return equals(
-        pick(identifyingProps, option),
-        pick(identifyingProps, value)
-      );
-    };
-
-    const renderInput = (params): JSX.Element => (
-      <TextField
-        {...params}
-        InputLabelProps={{
-          classes: {
-            marginDense: classes.inputLabel,
-            shrink: classes.inputLabelShrink
-          }
-        }}
-        InputProps={{
-          ...params.InputProps,
-          endAdornment: (
-            <>
-              {endAdornment && (
-                <InputAdornment position="end">{endAdornment}</InputAdornment>
-              )}
-              {params.InputProps.endAdornment}
-            </>
-          ),
-          style: {
-            background: 'transparent',
-            paddingRight: theme.spacing(5)
-          }
-        }}
-        autoFocus={autoFocus}
-        autoSize={autoSize}
-        autoSizeCustomPadding={7 + (autoSizeCustomPadding || 0)}
-        autoSizeDefaultWidth={autoSizeDefaultWidth}
-        classes={{
-          root: classes.textfield
-        }}
-        error={error}
-        externalValueForAutoSize={autocompleteProps?.value?.name}
-        inputProps={{
-          ...params.inputProps,
-          'aria-label': label,
-          'data-testid': dataTestId || label,
-          id: getNormalizedId(label || '')
-        }}
-        label={label}
-        placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
-        required={required}
-        value={inputValue || undefined}
-        onChange={onTextChange}
-      />
+    return equals(
+      pick(identifyingProps, option),
+      pick(identifyingProps, value)
     );
+  };
 
-    return (
-      <Autocomplete
-        disableClearable
-        classes={{
-          groupLabel: classes.inputLabel,
-          inputRoot: cx([
-            classes.input,
-            label ? classes.inputWithLabel : classes.inputWithoutLabel
-          ]),
-          popper: classes.popper,
-          root: classes.textfield
-        }}
-        forcePopupIcon={displayPopupIcon}
-        getOptionLabel={(option): string =>
-          (option as SelectEntry)?.name?.toString() || ''
+  const renderInput = (params): JSX.Element => (
+    <TextField
+      {...params}
+      InputLabelProps={{
+        classes: {
+          marginDense: classes.inputLabel,
+          shrink: classes.inputLabelShrink
+        }
+      }}
+      InputProps={{
+        ...params.InputProps,
+        endAdornment: (
+          <>
+            {endAdornment && (
+              <InputAdornment position="end">{endAdornment}</InputAdornment>
+            )}
+            {params.InputProps.endAdornment}
+          </>
+        ),
+        style: {
+          background: 'transparent',
+          paddingRight: theme.spacing(5)
         }
-        isOptionEqualToValue={areSelectEntriesEqual}
-        loading={loading}
-        loadingText={<LoadingIndicator />}
-        options={options}
-        ref={ref}
-        renderInput={renderInput}
-        renderOption={(props, option): JSX.Element => {
-          return (
-            <li
-              className={classes.options}
-              {...(props as React.HTMLAttributes<HTMLLIElement>)}
+      }}
+      autoFocus={autoFocus}
+      autoSize={autoSize}
+      autoSizeCustomPadding={7 + (autoSizeCustomPadding || 0)}
+      autoSizeDefaultWidth={autoSizeDefaultWidth}
+      classes={{
+        root: classes.textfield
+      }}
+      error={error}
+      externalValueForAutoSize={autocompleteProps?.value?.name}
+      inputProps={{
+        ...params.inputProps,
+        'aria-label': label,
+        'data-testid': dataTestId || label,
+        id: getNormalizedId(label || '')
+      }}
+      label={label}
+      placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
+      required={required}
+      value={inputValue || undefined}
+      onChange={onTextChange}
+    />
+  );
+
+  return (
+    <Autocomplete
+      disableClearable
+      classes={{
+        groupLabel: classes.inputLabel,
+        inputRoot: cx([
+          classes.input,
+          label ? classes.inputWithLabel : classes.inputWithoutLabel
+        ]),
+        popper: classes.popper,
+        root: classes.textfield
+      }}
+      forcePopupIcon={displayPopupIcon}
+      getOptionLabel={(option): string =>
+        (option as SelectEntry)?.name?.toString() || ''
+      }
+      isOptionEqualToValue={areSelectEntriesEqual}
+      loading={loading}
+      loadingText={<LoadingIndicator />}
+      options={options}
+      renderInput={renderInput}
+      renderOption={(props, option): JSX.Element => {
+        return (
+          <li
+            className={classes.options}
+            {...(props as React.HTMLAttributes<HTMLLIElement>)}
+          >
+            <Option
+              thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
             >
-              <Option
-                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
-              >
-                {getOptionItemLabel(option)}
-              </Option>
-            </li>
-          );
-        }}
-        size="small"
-        {...autocompleteProps}
-      />
-    );
-  }
-);
+              {getOptionItemLabel(option)}
+            </Option>
+          </li>
+        );
+      }}
+      size="small"
+      {...autocompleteProps}
+    />
+  );
+};
 
 export default AutocompleteField;

package/src/InputField/Select/IconPopover/index.tsx

@@ -73,14 +73,14 @@ const IconPopoverMultiAutocomplete = ({
   };
 
   const isSelected = (id: number | string): boolean => {
-    return pipe(find(propEq(id, 'id')), Boolean)(value);
+    return pipe(find(propEq('id', id)), Boolean)(value);
   };
 
   const unSelect = (option: SelectEntry): void => {
     const { id } = option;
 
     const updatedValue = isSelected(id)
-      ? reject(propEq(id, 'id'), value)
+      ? reject(propEq('id', id), value)
       : [...value, option];
 
     onChange(updatedValue);

package/src/InputField/Select/index.tsx

@@ -69,7 +69,7 @@ const SelectField = ({
   const { classes, cx } = useStyles();
 
   const getOption = (id): SelectEntry => {
-    return options.find(propEq(id, 'id')) as SelectEntry;
+    return options.find(propEq('id', id)) as SelectEntry;
   };
 
   const changeOption = (event): void => {

package/src/InputField/Text/index.tsx

@@ -154,9 +154,9 @@ const TextField = forwardRef(
             helperText={displayErrorInTooltip ? undefined : error}
             id={getNormalizedId(dataTestId || '')}
             inputProps={{
+              ...rest.inputProps,
               'aria-label': ariaLabel,
-              'data-testid': dataTestId,
-              ...rest.inputProps
+              'data-testid': dataTestId
             }}
             label={label}
             ref={ref}

package/src/Listing/Cell/DataCell.tsx

@@ -107,21 +107,7 @@ const DataCell = ({
       const isCellHidden = getHiddenCondition?.(isRowSelected);
 
       if (isCellHidden) {
-        return (
-          <Cell
-            className={classes.cell}
-            isRowHighlighted={isRowHighlighted}
-            listingVariant={listingVariant}
-            onClick={(e): void => {
-              if (!clickable) {
-                return;
-              }
-              e.preventDefault();
-              e.stopPropagation();
-            }}
-            {...commonCellProps}
-          />
-        );
+        return null;
       }
 
       return (

package/src/Listing/Header/ListingHeader.tsx

@@ -71,7 +71,7 @@ const ListingHeader = ({
   });
 
   const getColumnById = (id: string): Column => {
-    return find(propEq(id, 'id'), columns) as Column;
+    return find(propEq('id', id), columns) as Column;
   };
 
   const Content = React.useCallback(

package/src/Listing/Listing.styles.ts

@@ -9,12 +9,13 @@ const loadingIndicatorHeight = 3;
 interface StylesProps {
   dataStyle: TableStyle;
   getGridTemplateColumn: string;
+  limit: number;
   listingVariant: ListingVariant;
   rows: Array<unknown>;
 }
 
 const useListingStyles = makeStyles<StylesProps>()(
-  (theme, { dataStyle, getGridTemplateColumn, rows }) => ({
+  (theme, { dataStyle, getGridTemplateColumn, rows, limit }) => ({
     actionBar: {
       alignItems: 'center',
       display: 'flex'
@@ -55,7 +56,7 @@ const useListingStyles = makeStyles<StylesProps>()(
       display: 'grid',
       gridTemplateColumns: getGridTemplateColumn,
       gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
-        rows?.length || 1
+        rows?.length || limit
       }, ${dataStyle.body.height}px)`,
       position: 'relative'
     },

package/src/Listing/index.stories.tsx

@@ -366,16 +366,6 @@ const columnsWithSubItems = [
   }
 ];
 
-const TemplateSubItems = (args): JSX.Element => {
-  const { classes } = useStyles();
-
-  return (
-    <div className={classes.listing}>
-      <Listing {...args} />
-    </div>
-  );
-};
-
 export const ListingWithSubItems = {
   args: {
     checkable: true,
@@ -392,6 +382,5 @@ export const ListingWithSubItems = {
       labelExpand: 'Expand'
     },
     totalRows: 10
-  },
-  render: TemplateSubItems
+  }
 };

package/src/Listing/index.tsx

@@ -69,7 +69,7 @@ const getVisibleColumns = ({
   }
 
   return selectedColumnIds.map((id) =>
-    columns.find(propEq(id, 'id'))
+    columns.find(propEq('id', id))
   ) as Array<Column>;
 };
 
@@ -233,6 +233,7 @@ const Listing = <TRow extends { id: RowId }>({
   const { classes } = useListingStyles({
     dataStyle,
     getGridTemplateColumn,
+    limit,
     listingVariant,
     rows: rowsToDisplay
   });

package/src/Module/index.tsx

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 import { Provider as JotaiProvider, createStore } from 'jotai';
 
 import { createGenerateClassName, StylesProvider } from '@mui/styles';
@@ -7,7 +9,7 @@ import SnackbarProvider from '../Snackbar/SnackbarProvider';
 
 export interface ModuleProps {
   children: React.ReactElement;
-  maxSnackbars?: number;
+  maxSnackbars: number;
   seedName: string;
   store: ReturnType<typeof createStore>;
 }
@@ -15,7 +17,7 @@ export interface ModuleProps {
 const Module = ({
   children,
   seedName,
-  maxSnackbars = 3,
+  maxSnackbars,
   store
 }: ModuleProps): JSX.Element => {
   const generateClassName = createGenerateClassName({

package/src/RichTextEditor/RichTextEditor.tsx

@@ -12,7 +12,6 @@ import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { equals } from 'ramda';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
-import { $generateHtmlFromNodes } from '@lexical/html';
 
 import { Typography } from '@mui/material';
 
@@ -39,7 +38,6 @@ export interface RichTextEditorProps {
   openLinkInNewTab?: boolean;
   placeholder?: string;
   resetEditorToInitialStateCondition?: () => boolean;
-  setHtmlString?: (htmlString: string) => void;
   toolbarClassName?: string;
   toolbarPositions?: 'start' | 'end';
 }
@@ -145,7 +143,6 @@ const RichTextEditor = ({
   openLinkInNewTab = true,
   initialize,
   displayBlockButtons = true,
-  setHtmlString,
   toolbarClassName
 }: RichTextEditorProps): JSX.Element => {
   const { classes } = useStyles({ toolbarPositions });
@@ -181,13 +178,6 @@ const RichTextEditor = ({
     }
   };
 
-  const change = (state: EditorState, editor: LexicalEditor): void => {
-    editor.update(() => {
-      setHtmlString?.($generateHtmlFromNodes(editor, null));
-    });
-    getEditorState?.(state, editor);
-  };
-
   return (
     <LexicalComposer initialConfig={initialConfig}>
       <div className={classes.container}>
@@ -220,7 +210,6 @@ const RichTextEditor = ({
                 resetEditorToInitialStateCondition={
                   resetEditorToInitialStateCondition
                 }
-                setHtmlString={setHtmlString}
                 onBlur={onBlur}
               />
             }
@@ -229,7 +218,7 @@ const RichTextEditor = ({
           <HistoryPlugin />
           <LinkPlugin />
           <ListPlugin />
-          <OnChangePlugin onChange={change} />
+          <OnChangePlugin onChange={getEditorState} />
           <AutoCompleteLinkPlugin openLinkInNewTab={openLinkInNewTab} />
           <FloatingLinkEditorPlugin
             editable={editable}

package/src/SortableItems/index.tsx

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

package/src/ThemeProvider/index.tsx

@@ -147,30 +147,6 @@ 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;

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

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