@centreon/ui 26.5.14 → 26.7.0

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

@@ -1,4 +1,5 @@
 import { Typography } from '@mui/material';
+import type { AutocompleteRenderInputParams } from '@mui/material/Autocomplete';
 
 import {
   equals,
@@ -15,7 +16,12 @@ import {
   propEq,
   remove
 } from 'ramda';
-import { type ChangeEvent, useEffect, useState } from 'react';
+import {
+  type ChangeEvent,
+  type HTMLAttributes,
+  useEffect,
+  useState
+} from 'react';
 
 import TextField from '../../../Text';
 import type { Props as SingleAutocompletefieldProps } from '..';
@@ -41,9 +47,15 @@ interface Props {
   required?: boolean;
 }
 
+// biome-ignore lint/suspicious/noExplicitAny: HOC accepts varied multi-autocomplete shapes
+type MultiAutocompleteLike = (props: any) => JSX.Element;
+
 const DraggableAutocomplete = (
-  MultiAutocomplete: (props) => JSX.Element
-): ((props) => JSX.Element) => {
+  MultiAutocomplete: MultiAutocompleteLike
+): ((
+  props: Props &
+    (ConnectedAutoCompleteFieldProps<string> | SingleAutocompletefieldProps)
+) => JSX.Element) => {
   const InnerDraggableAutocompleteField = ({
     onSelectedValuesChange,
     initialValues,
@@ -66,12 +78,14 @@ const DraggableAutocomplete = (
     );
     const [inputText, setInputText] = useState<string | null>(null);
 
-    const onChangeSelectedValuesOrder = (newSelectedValues): void => {
+    const onChangeSelectedValuesOrder = (
+      newSelectedValues: Array<DraggableSelectEntry>
+    ): void => {
       setSelectedValues(newSelectedValues);
       onSelectedValuesChange?.(newSelectedValues);
     };
 
-    const deleteValue = (id): void => {
+    const deleteValue = (id: string | number): void => {
       itemHover?.(null);
       setSelectedValues((values: Array<DraggableSelectEntry>) => {
         const index = findIndex(propEq(id, 'id'), values);
@@ -84,7 +98,10 @@ const DraggableAutocomplete = (
       });
     };
 
-    const onChange = (_, newValue): void => {
+    const onChange = (
+      _: React.SyntheticEvent,
+      newValue: Array<DraggableSelectEntry | string>
+    ): void => {
       if (isEmpty(newValue)) {
         setInputText(null);
         onSelectedValuesChange?.([]);
@@ -110,8 +127,8 @@ const DraggableAutocomplete = (
 
         return;
       }
-      const lastItem = last<DraggableSelectEntry>(
-        newValue
+      const lastItem = last(
+        newValue as Array<DraggableSelectEntry>
       ) as DraggableSelectEntry;
 
       const lastDraggableItem: DraggableSelectEntry = {
@@ -166,7 +183,10 @@ const DraggableAutocomplete = (
       setInputText(null);
     };
 
-    const renderOption = (renderProps, option): JSX.Element => (
+    const renderOption = (
+      renderProps: HTMLAttributes<HTMLLIElement>,
+      option: DraggableSelectEntry
+    ): JSX.Element => (
       <div key={option.id} style={{ width: '100%' }}>
         <li {...renderProps}>
           <Typography variant="body2">{option.name}</Typography>
@@ -174,9 +194,14 @@ const DraggableAutocomplete = (
       </div>
     );
 
-    const renderInput = (renderProps): JSX.Element => (
+    const renderInput = (
+      renderProps: AutocompleteRenderInputParams & {
+        inputLabel?: Record<string, unknown>;
+      }
+    ): JSX.Element => (
       <TextField
         {...renderProps}
+        dataTestId={label}
         error={error}
         helperText={error}
         label={label}

package/src/InputField/Select/Autocomplete/Multi/Listbox.tsx

@@ -1,6 +1,7 @@
 import { ListSubheader, Typography } from '@mui/material';
 
 import type React from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Button } from '../../../../components/Button';
@@ -12,13 +13,20 @@ import {
 import type { SelectEntry } from '../..';
 import { useListboxStyles } from './Multi.styles';
 
+interface CustomListboxProps extends HTMLAttributes<HTMLUListElement> {
+  children?: ReactNode;
+  label: string;
+  labelTotal: string;
+  handleSelectAllToggle: () => void;
+}
+
 const CustomListbox = ({
   children,
   label,
   labelTotal,
   handleSelectAllToggle,
   ...props
-}) => {
+}: CustomListboxProps) => {
   const { classes } = useListboxStyles();
 
   return (
@@ -63,7 +71,9 @@ const ListboxComponent = ({
     return;
   }
 
-  return (listboxProps): JSX.Element | undefined => {
+  return (
+    listboxProps: HTMLAttributes<HTMLUListElement>
+  ): JSX.Element | undefined => {
     const allSelected =
       options.length > 0 && options.every((opt) => isOptionSelected(opt));
 

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

@@ -1,4 +1,5 @@
 import { Chip, type ChipProps, Tooltip } from '@mui/material';
+import type { AutocompleteRenderGetTagProps } from '@mui/material/Autocomplete';
 import type { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
 import { compose, includes, map, prop, reject, sortBy, toLower } from 'ramda';
@@ -23,8 +24,8 @@ export interface Props
   chipProps?: ChipProps;
   disableSortedOptions?: boolean;
   disableSelectAll?: boolean;
-  getOptionTooltipLabel?: (option) => string;
-  getTagLabel?: (option) => string;
+  getOptionTooltipLabel?: (option: SelectEntry) => string;
+  getTagLabel?: (option: SelectEntry) => string;
   optionProperty?: string;
   customRenderTags?: (tags: React.ReactNode) => React.ReactNode;
   total?: number;
@@ -36,9 +37,10 @@ const MultiAutocompleteField = ({
   disableSortedOptions = false,
   disableSelectAll = true,
   optionProperty = 'name',
-  getOptionLabel = (option): string =>
+  getOptionLabel = (option: SelectEntry | string): string =>
     typeof option === 'string' ? option : option?.name,
-  getTagLabel = (option): string => option[optionProperty],
+  getTagLabel = (option: SelectEntry): string =>
+    (option as unknown as Record<string, string>)[optionProperty],
   getOptionTooltipLabel,
   chipProps,
   customRenderTags,
@@ -48,8 +50,11 @@ const MultiAutocompleteField = ({
 }: Props): JSX.Element => {
   const { classes } = useStyles();
 
-  const renderTags = (renderedValue, getTagProps): Array<JSX.Element> =>
-    renderedValue.map((option, index) => {
+  const renderTags = (
+    renderedValue: Array<SelectEntry>,
+    getTagProps: AutocompleteRenderGetTagProps
+  ): Array<JSX.Element> =>
+    renderedValue.map((option: SelectEntry, index: number) => {
       return (
         <Tooltip
           key={option.id}
@@ -78,11 +83,13 @@ const MultiAutocompleteField = ({
       );
     });
 
-  const getLimitTagsText = (more): JSX.Element => <Option>{`+${more}`}</Option>;
+  const getLimitTagsText = (more: number): JSX.Element => (
+    <Option>{`+${more}`}</Option>
+  );
 
   const values = (value as Array<SelectEntry>) || [];
 
-  const isOptionSelected = ({ id }): boolean => {
+  const isOptionSelected = ({ id }: { id: SelectEntry['id'] }): boolean => {
     const valueIds = map(prop('id'), values);
 
     return includes(id, valueIds);

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

@@ -42,9 +42,12 @@ const useStyles = makeStyles()((theme) => ({
   }
 }));
 
+// biome-ignore lint/suspicious/noExplicitAny: HOC accepts varied autocomplete shapes
+type AutocompleteLike = (props: any) => JSX.Element;
+
 const PopoverAutocomplete = (
-  AutocompleteField: (props) => JSX.Element
-): ((props) => JSX.Element) => {
+  AutocompleteField: AutocompleteLike
+): ((props: Props) => JSX.Element) => {
   const InnerAutocomplete = ({
     value,
     label,

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

@@ -1,6 +1,7 @@
 import {
   Autocomplete,
   type AutocompleteProps,
+  type AutocompleteRenderInputParams,
   CircularProgress,
   InputAdornment,
   type InputProps,
@@ -41,7 +42,7 @@ export type Props = {
   displayPopupIcon?: boolean;
   endAdornment?: ReactElement;
   error?: string;
-  getOptionItemLabel?: (option) => string;
+  getOptionItemLabel?: (option: SelectEntry | undefined) => string | undefined;
   hideInput?: boolean;
   renderOption?: (
     renderProps: HTMLAttributes<HTMLLIElement>,
@@ -50,7 +51,7 @@ export type Props = {
   ) => ReactElement;
   label: string;
   loading?: boolean;
-  onTextChange?;
+  onTextChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   placeholder?: string | undefined;
   required?: boolean;
   forceInputRenderValue?: boolean;
@@ -115,8 +116,11 @@ const AutocompleteField = forwardRef(
     const { t } = useTranslation();
     const theme = useTheme();
 
-    const areSelectEntriesEqual = (option, value): boolean => {
-      const identifyingProps = ['id', 'name'];
+    const areSelectEntriesEqual = (
+      option: SelectEntry,
+      value: SelectEntry
+    ): boolean => {
+      const identifyingProps: Array<keyof SelectEntry> = ['id', 'name'];
 
       return equals(
         pick(identifyingProps, option),
@@ -126,7 +130,10 @@ const AutocompleteField = forwardRef(
 
     const renderOptions = renderOption
       ? renderOption
-      : (props, option): ReactElement => {
+      : (
+          props: HTMLAttributes<HTMLLIElement>,
+          option: SelectEntry
+        ): ReactElement => {
           return (
             <li
               className={classes.options}
@@ -135,13 +142,15 @@ const AutocompleteField = forwardRef(
               <Option
                 thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
               >
-                {getOptionItemLabel(option)}
+                {getOptionItemLabel(option) || ''}
               </Option>
             </li>
           );
         };
 
-    const renderInput = (params): ReactElement => {
+    const renderInput = (
+      params: AutocompleteRenderInputParams
+    ): ReactElement => {
       return (
         <TextField
           {...params}
@@ -174,7 +183,8 @@ const AutocompleteField = forwardRef(
               ...(forceInputRenderValue
                 ? {
                     value: getOptionItemLabel(
-                      autocompleteProps?.value || undefined
+                      (autocompleteProps?.value as SelectEntry | undefined) ||
+                        undefined
                     )
                   }
                 : {}),
@@ -207,13 +217,16 @@ const AutocompleteField = forwardRef(
               classes: {
                 marginDense: classes.inputLabel,
                 shrink: classes.inputLabelShrink
-              }
+              } as unknown as Record<string, string>
             }
           }}
           value={
             inputValue ||
             (forceInputRenderValue
-              ? getOptionItemLabel(autocompleteProps?.value || undefined)
+              ? getOptionItemLabel(
+                  (autocompleteProps?.value as SelectEntry | undefined) ||
+                    undefined
+                )
               : undefined) ||
             undefined
           }

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

@@ -47,11 +47,11 @@ const IconPopoverMultiAutocomplete = ({
   const theme = useTheme();
   const { classes } = useStyles();
   const { t } = useTranslation();
-  const [anchorEl, setAnchorEl] = useState();
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>();
 
   const isOpen = Boolean(anchorEl);
 
-  const close = (reason?): void => {
+  const close = (reason?: { type?: string }): void => {
     const isClosedByInputClick = reason?.type === 'mousedown';
 
     if (isClosedByInputClick) {
@@ -60,14 +60,14 @@ const IconPopoverMultiAutocomplete = ({
     setAnchorEl(undefined);
   };
 
-  const toggle = (event): void => {
+  const toggle = (event: React.MouseEvent): void => {
     if (isOpen) {
       close();
 
       return;
     }
 
-    setAnchorEl(event.currentTarget);
+    setAnchorEl(event.currentTarget as HTMLElement);
   };
 
   const isSelected = (id: number | string): boolean => {
@@ -89,7 +89,10 @@ const IconPopoverMultiAutocomplete = ({
       <div>
         <IconButton
           ariaLabel={title}
-          onClick={toggle}
+          onClick={
+            toggle as ((event: React.MouseEvent) => void) &
+              React.MouseEventHandler<HTMLButtonElement>
+          }
           size="large"
           title={title}
         >

package/src/InputField/Select/index.tsx

@@ -7,6 +7,7 @@ import {
   ListSubheader,
   MenuItem,
   Select,
+  type SelectChangeEvent,
   type SelectProps,
   type Theme
 } from '@mui/material';
@@ -78,13 +79,13 @@ const SelectField = ({
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
 
-  const getOption = (id): SelectEntry => {
+  const getOption = (id: unknown): SelectEntry => {
     return options.find(propEq(id, 'id')) as SelectEntry;
   };
 
-  const changeOption = (event): void => {
+  const changeOption = (event: SelectChangeEvent<unknown>): void => {
     if (!isNil(event.target.value)) {
-      onChange(event);
+      onChange(event as unknown as React.ChangeEvent<HTMLInputElement>);
     }
   };
 

package/src/InputField/Text/index.tsx

@@ -85,7 +85,7 @@ export type TextProps = {
   autoSizeDefaultWidth?: number;
   className?: string;
   containerClassName?: string;
-  dataTestId: string;
+  dataTestId?: string;
   debounced?: boolean;
   displayErrorInTooltip?: boolean;
   error?: string;

package/src/InputField/Text/useAutoSize.ts

@@ -43,8 +43,6 @@ const useAutoSize = ({
     setInnerValue(event.target.value);
   };
 
-  const _textFieldValue = autoSize && (value || innerValue);
-
   useEffect(() => {
     if (!autoSize) {
       return;

package/src/Listing/ActionBar/ColumnMultiSelect.tsx

@@ -34,8 +34,8 @@ const ColumnMultiSelect = ({
     columns
   });
 
-  const selectColumnIds = (updatedColumns): void => {
-    onSelectColumns?.(updatedColumns.map(prop('id')));
+  const selectColumnIds = (updatedColumns: Array<SelectEntry>): void => {
+    onSelectColumns?.(updatedColumns.map(prop('id')) as Array<string>);
   };
 
   return (

package/src/Listing/ActionBar/Pagination.tsx

@@ -1,9 +1,11 @@
-import TablePagination from '@mui/material/TablePagination';
+import TablePagination, {
+  type TablePaginationProps
+} from '@mui/material/TablePagination';
 
 import { equals } from 'ramda';
 import { memo } from 'react';
 
-const Pagination = (props): JSX.Element => (
+const Pagination = (props: TablePaginationProps): JSX.Element => (
   <TablePagination
     classes={{
       toolbar: 'pl-1 overflow-hidden h-8'

package/src/Listing/ActionBar/PaginationActions.tsx

@@ -22,15 +22,21 @@ const PaginationActions = ({
 }: TablePaginationActionsProps): JSX.Element => {
   const { t } = useTranslation();
 
-  const changeToFirstPage = (event): void => {
+  const changeToFirstPage = (
+    event: React.MouseEvent<HTMLButtonElement>
+  ): void => {
     onPageChange(event, 0);
   };
 
-  const changeToPreviousPage = (event): void => {
+  const changeToPreviousPage = (
+    event: React.MouseEvent<HTMLButtonElement>
+  ): void => {
     onPageChange(event, page - 1);
   };
 
-  const changeToNextPage = (event): void => {
+  const changeToNextPage = (
+    event: React.MouseEvent<HTMLButtonElement>
+  ): void => {
     onPageChange(event, page + 1);
   };
 
@@ -39,7 +45,9 @@ const PaginationActions = ({
   const isFirstPage = page === 0;
   const isLastPage = page >= lastPage;
 
-  const changeToLastPage = (event): void => {
+  const changeToLastPage = (
+    event: React.MouseEvent<HTMLButtonElement>
+  ): void => {
     onPageChange(event, Math.max(0, lastPage));
   };
 

package/src/Listing/ActionBar/index.tsx

@@ -117,17 +117,29 @@ const MemoListingActionBar = ({
 
   const { themeMode } = useAtomValue(userAtom);
 
-  const changeRowPerPage = (event): void => {
+  const changeRowPerPage = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
     onLimitChange?.(event.target.value);
     onPaginate?.(0);
   };
 
-  const changePage = (_, value: number): void => {
+  const changePage = (
+    _: React.MouseEvent<HTMLButtonElement> | null,
+    value: number
+  ): void => {
     onPaginate?.(value);
   };
 
-  const labelDisplayedRows = ({ from, to, count }): string =>
-    `${from}-${to} ${t(labelOf)} ${count}`;
+  const labelDisplayedRows = ({
+    from,
+    to,
+    count
+  }: {
+    from: number;
+    to: number;
+    count: number;
+  }): string => `${from}-${to} ${t(labelOf)} ${count}`;
 
   return useMemoComponent({
     Component: (
@@ -188,13 +200,13 @@ const MemoListingActionBar = ({
                 [classes.moving]: moveTablePagination
               })}
               colSpan={3}
-              count={totalRows}
+              count={totalRows ?? 0}
               labelDisplayedRows={labelDisplayedRows}
               labelRowsPerPage={null}
               onPageChange={changePage}
               onRowsPerPageChange={changeRowPerPage}
-              page={currentPage}
-              rowsPerPage={limit}
+              page={currentPage ?? 0}
+              rowsPerPage={limit ?? 10}
               rowsPerPageOptions={[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]}
               SelectProps={{
                 id: labelRowsPerPage,

package/src/Listing/Cell/DataCell.tsx

@@ -17,14 +17,14 @@ import EllipsisTypography from './EllipsisTypography';
 
 interface Props {
   column: Column;
-  disableRowCondition: (row) => boolean;
-  getHighlightRowCondition?: (row) => boolean;
+  disableRowCondition: (row: Record<string, unknown>) => boolean;
+  getHighlightRowCondition?: (row: Record<string, unknown>) => boolean;
   isRowHovered: boolean;
   isRowSelected: boolean;
   labelCollapse?: string;
   labelExpand?: string;
   listingVariant?: ListingVariant;
-  row?;
+  row: Record<string, unknown>;
   rowColorConditions?: Array<RowColorCondition>;
   subItemsRowProperty?: string;
 }

package/src/Listing/Cell/index.tsx

@@ -27,8 +27,8 @@ interface GetBackgroundColorProps extends Omit<Props, 'isRowHighlighted'> {
 interface GetRowHighlightStyleProps {
   isRowHighlighted?: boolean;
   theme: Theme;
-  disableRowCondition;
-  row;
+  disableRowCondition: (row: Record<string, unknown>) => boolean;
+  row?: Record<string, unknown>;
 }
 
 const getBackgroundColor = ({
@@ -38,7 +38,7 @@ const getBackgroundColor = ({
   disableRowCondition,
   theme
 }: GetBackgroundColorProps): string => {
-  if (disableRowCondition(row)) {
+  if (disableRowCondition(row as Record<string, unknown>)) {
     return alpha(theme.palette.common.black, theme.palette.action.focusOpacity);
   }
 
@@ -47,7 +47,7 @@ const getBackgroundColor = ({
   }
 
   const foundCondition = rowColorConditions?.find(({ condition }) =>
-    condition(row)
+    condition(row as Record<string, unknown>)
   );
 
   if (!isNil(foundCondition)) {
@@ -67,15 +67,17 @@ const getRowTextColor = ({
     return { color: theme.palette.text.primary };
   }
 
-  if (disableRowCondition(row)) {
+  if (disableRowCondition(row as Record<string, unknown>)) {
     return { color: alpha(theme.palette.text.secondary, 0.5) };
   }
+
+  return undefined;
 };
 
 interface Props
   extends Pick<
       DataCellProps,
-      'isRowHovered' | 'row' | 'rowColorConditions' | 'disableRowCondition'
+      'isRowHovered' | 'rowColorConditions' | 'disableRowCondition'
     >,
     TableCellProps {
   displaySubItemsCaret?: boolean;
@@ -83,16 +85,20 @@ interface Props
   labelCollapse?: string;
   labelExpand?: string;
   listingVariant?: ListingVariant;
+  row?: Record<string, unknown>;
   subItemsRowProperty?: string;
 }
 
 const isPivotExistInTheList = (
-  id
+  id: number | string
 ): ((list: Array<number | string>) => boolean) => includes(id);
 
 const handleSubItems = ({
   currentSubItemsPivots,
   id
+}: {
+  currentSubItemsPivots: Array<number | string>;
+  id: number | string;
 }): Array<number | string> => {
   if (isPivotExistInTheList(id)(currentSubItemsPivots)) {
     return reject(equals(id), currentSubItemsPivots);
@@ -121,20 +127,27 @@ const Cell = ({
 
   const { children } = props;
 
-  const rowId = row?.id;
+  const rowId = row?.id as number | string | undefined;
 
-  const click = (e): void => {
+  const click = (e: React.MouseEvent): void => {
     e.preventDefault();
     e.stopPropagation();
 
     setSubItemsPivots((currentSubItemsPivots) =>
-      handleSubItems({ currentSubItemsPivots, id: rowId })
+      handleSubItems({
+        currentSubItemsPivots,
+        id: rowId as number | string
+      })
     );
   };
 
-  const isSubItemsExpanded = isPivotExistInTheList(rowId)(subItemsPivots);
+  const isSubItemsExpanded = isPivotExistInTheList(rowId as number | string)(
+    subItemsPivots
+  );
 
-  const hasSubItems = subItemsRowProperty && row[subItemsRowProperty];
+  const hasSubItems = Boolean(
+    subItemsRowProperty && row?.[subItemsRowProperty]
+  );
 
   return (
     <TableCell
@@ -169,7 +182,7 @@ const Cell = ({
       {displaySubItemsCaret && hasSubItems && (
         <IconButton
           ariaLabel={`${isSubItemsExpanded ? labelCollapse : labelExpand} ${
-            row.id
+            row?.id
           }`}
           onClick={click}
           size="small"

package/src/Listing/Header/Cell/ListingHeaderCell.tsx

@@ -19,10 +19,10 @@ type Props = Pick<
   'columnConfiguration' | 'sortField' | 'sortOrder' | 'onSort'
 > & {
   areColumnsEditable: boolean;
-  className: string;
+  className?: string;
   column: Column;
   itemRef: React.RefObject<HTMLDivElement>;
-  style;
+  style: React.CSSProperties;
 } & StylesProps;
 
 const ListingHeaderCell = ({