@centreon/ui 24.4.31 → 24.4.32

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.cypress.spec.tsx

@@ -77,9 +77,9 @@ const mountListing = (): void => {
           subItems={{
             canCheckSubItems: false,
             enable: true,
-            getRowProperty: () => 'subItems',
             labelCollapse: 'Collapse',
-            labelExpand: 'Expand'
+            labelExpand: 'Expand',
+            rowProperty: 'subItems'
           }}
           totalRows={10}
         />

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,
@@ -387,11 +377,10 @@ export const ListingWithSubItems = {
     subItems: {
       canCheckSubItems: false,
       enable: true,
-      getRowProperty: () => 'subItems',
       labelCollapse: 'Collapse',
-      labelExpand: 'Expand'
+      labelExpand: 'Expand',
+      rowProperty: 'subItems'
     },
     totalRows: 10
-  },
-  render: TemplateSubItems
+  }
 };