@centreon/ui 25.3.3 → 25.4.0-MON-191119-npm-develop.0

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

@@ -0,0 +1,124 @@
+import { compose, includes, map, prop, reject, sortBy, toLower } from 'ramda';
+import { JSX } from 'react';
+
+import { Chip, ChipProps, Tooltip } from '@mui/material';
+import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
+
+import Autocomplete, { Props as AutocompleteProps } from '..';
+import { SelectEntry } from '../..';
+import Option from '../../Option';
+import ListboxComponent from './Listbox';
+import { useStyles } from './Multi.styles';
+
+type Multiple = boolean;
+type DisableClearable = boolean;
+type FreeSolo = boolean;
+
+export interface Props
+  extends Omit<AutocompleteProps, 'renderTags' | 'renderOption' | 'multiple'>,
+    Omit<
+      UseAutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>,
+      'multiple'
+    > {
+  chipProps?: ChipProps;
+  disableSortedOptions?: boolean;
+  disableSelectAll?: boolean;
+  getOptionTooltipLabel?: (option) => string;
+  getTagLabel?: (option) => string;
+  optionProperty?: string;
+  customRenderTags?: (tags: React.ReactNode) => React.ReactNode;
+  total?: number;
+}
+
+const MultiAutocompleteField = ({
+  value,
+  options,
+  disableSortedOptions = false,
+  disableSelectAll = true,
+  optionProperty = 'name',
+  getOptionLabel = (option): string => option.name,
+  getTagLabel = (option): string => option[optionProperty],
+  getOptionTooltipLabel,
+  chipProps,
+  customRenderTags,
+  onChange,
+  total,
+  ...props
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const renderTags = (renderedValue, getTagProps): Array<JSX.Element> =>
+    renderedValue.map((option, index) => {
+      return (
+        <Tooltip
+          key={option.id}
+          placement="top"
+          title={getOptionTooltipLabel?.(option)}
+        >
+          <Chip
+            classes={{
+              deleteIcon: classes.deleteIcon,
+              root: classes.tag
+            }}
+            data-testid={`tag-option-chip-${option.id}`}
+            label={getTagLabel(option)}
+            size="medium"
+            {...getTagProps({ index })}
+            {...chipProps}
+            onDelete={(event) => chipProps?.onDelete?.(event, option)}
+          />
+        </Tooltip>
+      );
+    });
+
+  const getLimitTagsText = (more): JSX.Element => <Option>{`+${more}`}</Option>;
+
+  const values = (value as Array<SelectEntry>) || [];
+
+  const isOptionSelected = ({ id }): boolean => {
+    const valueIds = map(prop('id'), values);
+
+    return includes(id, valueIds);
+  };
+
+  const sortByName = sortBy(compose(toLower, prop(optionProperty)));
+
+  const autocompleteOptions = disableSortedOptions
+    ? options
+    : sortByName([...values, ...reject(isOptionSelected, options)]);
+
+  return (
+    <Autocomplete
+      disableCloseOnSelect
+      displayOptionThumbnail
+      multiple
+      getLimitTagsText={getLimitTagsText}
+      options={autocompleteOptions}
+      renderOption={(renderProps, option, { selected }): JSX.Element => (
+        <li
+          key={option.id}
+          {...(renderProps as React.HTMLAttributes<HTMLLIElement>)}
+        >
+          <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
+        </li>
+      )}
+      value={values}
+      renderTags={(renderedValue, getTagProps): React.ReactNode =>
+        customRenderTags
+          ? customRenderTags(renderTags(renderedValue, getTagProps))
+          : renderTags(renderedValue, getTagProps)
+      }
+      ListboxComponent={ListboxComponent({
+        total,
+        onChange,
+        isOptionSelected,
+        disableSelectAll,
+        options
+      })}
+      onChange={onChange}
+      {...props}
+    />
+  );
+};
+
+export default MultiAutocompleteField;

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

@@ -1,119 +1,3 @@
-import { compose, includes, map, prop, reject, sortBy, toLower } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
-import { Chip, ChipProps, Tooltip } from '@mui/material';
-import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
-
-import Autocomplete, { Props as AutocompleteProps } from '..';
-import { SelectEntry } from '../..';
-import Option from '../../Option';
-
-const useStyles = makeStyles()((theme) => ({
-  deleteIcon: {
-    height: theme.spacing(1.5),
-    width: theme.spacing(1.5)
-  },
-  tag: {
-    fontSize: theme.typography.caption.fontSize
-  }
-}));
-
-type Multiple = boolean;
-type DisableClearable = boolean;
-type FreeSolo = boolean;
-
-export interface Props
-  extends Omit<AutocompleteProps, 'renderTags' | 'renderOption' | 'multiple'>,
-    Omit<
-      UseAutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>,
-      'multiple'
-    > {
-  chipProps?: ChipProps;
-  disableSortedOptions?: boolean;
-  getOptionTooltipLabel?: (option) => string;
-  getTagLabel?: (option) => string;
-  optionProperty?: string;
-  customRenderTags?: (tags: React.ReactNode) => React.ReactNode;
-}
-
-const MultiAutocompleteField = ({
-  value,
-  options,
-  disableSortedOptions = false,
-  optionProperty = 'name',
-  getOptionLabel = (option): string => option.name,
-  getTagLabel = (option): string => option[optionProperty],
-  getOptionTooltipLabel,
-  chipProps,
-  customRenderTags,
-  ...props
-}: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  const renderTags = (renderedValue, getTagProps): Array<JSX.Element> =>
-    renderedValue.map((option, index) => {
-      return (
-        <Tooltip
-          key={option.id}
-          placement="top"
-          title={getOptionTooltipLabel?.(option)}
-        >
-          <Chip
-            classes={{
-              deleteIcon: classes.deleteIcon,
-              root: classes.tag
-            }}
-            data-testid={`tag-option-chip-${option.id}`}
-            label={getTagLabel(option)}
-            size="medium"
-            {...getTagProps({ index })}
-            {...chipProps}
-            onDelete={(event) => chipProps?.onDelete?.(event, option)}
-          />
-        </Tooltip>
-      );
-    });
-
-  const getLimitTagsText = (more): JSX.Element => <Option>{`+${more}`}</Option>;
-
-  const values = (value as Array<SelectEntry>) || [];
-
-  const isOptionSelected = ({ id }): boolean => {
-    const valueIds = map(prop('id'), values);
-
-    return includes(id, valueIds);
-  };
-
-  const sortByName = sortBy(compose(toLower, prop(optionProperty)));
-
-  const autocompleteOptions = disableSortedOptions
-    ? options
-    : sortByName([...values, ...reject(isOptionSelected, options)]);
-
-  return (
-    <Autocomplete
-      disableCloseOnSelect
-      displayOptionThumbnail
-      multiple
-      getLimitTagsText={getLimitTagsText}
-      options={autocompleteOptions}
-      renderOption={(renderProps, option, { selected }): JSX.Element => (
-        <li
-          key={option.id}
-          {...(renderProps as React.HTMLAttributes<HTMLLIElement>)}
-        >
-          <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
-        </li>
-      )}
-      renderTags={(renderedValue, getTagProps): React.ReactNode =>
-        customRenderTags
-          ? customRenderTags(renderTags(renderedValue, getTagProps))
-          : renderTags(renderedValue, getTagProps)
-      }
-      value={value}
-      {...props}
-    />
-  );
-};
+import MultiAutocompleteField from './Multi';
 
 export default MultiAutocompleteField;

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

@@ -13,6 +13,7 @@ import { AutocompleteSlotsAndSlotProps } from '@mui/material/Autocomplete';
 import { TextFieldSlotsAndSlotProps } from '@mui/material/TextField';
 import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
+import type { AutocompleteRenderOptionState } from '@mui/material/Autocomplete';
 import { ForwardedRef, HTMLAttributes, ReactElement, forwardRef } from 'react';
 import { SelectEntry } from '..';
 import { getNormalizedId } from '../../../utils';
@@ -33,6 +34,11 @@ export type Props = {
   error?: string;
   getOptionItemLabel?: (option) => string;
   hideInput?: boolean;
+  renderOption?: (
+    renderProps: HTMLAttributes<HTMLLIElement>,
+    option: SelectEntry,
+    state: AutocompleteRenderOptionState
+  ) => ReactElement;
   label: string;
   loading?: boolean;
   onTextChange?;
@@ -52,7 +58,7 @@ export type Props = {
 > &
   UseAutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>;
 
-const LoadingIndicator = (): JSX.Element => {
+const LoadingIndicator = (): ReactElement => {
   const { classes } = useAutoCompleteStyles({});
 
   return (
@@ -90,10 +96,11 @@ const AutocompleteField = forwardRef(
       forceInputRenderValue = false,
       textFieldSlotsAndSlotProps,
       autocompleteSlotsAndSlotProps,
+      renderOption,
       ...autocompleteProps
     }: Props,
     ref?: ForwardedRef<HTMLDivElement>
-  ): JSX.Element => {
+  ): ReactElement => {
     const { classes, cx } = useAutoCompleteStyles({ hideInput });
     const { t } = useTranslation();
     const theme = useTheme();
@@ -107,7 +114,24 @@ const AutocompleteField = forwardRef(
       );
     };
 
-    const renderInput = (params): JSX.Element => {
+    const renderOptions = renderOption
+      ? renderOption
+      : (props, option): ReactElement => {
+          return (
+            <li
+              className={classes.options}
+              {...(props as HTMLAttributes<HTMLLIElement>)}
+            >
+              <Option
+                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
+              >
+                {getOptionItemLabel(option)}
+              </Option>
+            </li>
+          );
+        };
+
+    const renderInput = (params): ReactElement => {
       return (
         <TextField
           {...params}
@@ -202,20 +226,7 @@ const AutocompleteField = forwardRef(
         options={options}
         ref={ref}
         renderInput={renderInput}
-        renderOption={(props, option): JSX.Element => {
-          return (
-            <li
-              className={classes.options}
-              {...(props as HTMLAttributes<HTMLLIElement>)}
-            >
-              <Option
-                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
-              >
-                {getOptionItemLabel(option)}
-              </Option>
-            </li>
-          );
-        }}
+        renderOption={renderOptions}
         size="small"
         slotProps={{
           ...autocompleteSlotsAndSlotProps?.slotProps,

package/src/InputField/Select/Option.tsx

@@ -1,4 +1,4 @@
-import { RefObject, forwardRef } from 'react';
+import { ReactElement, RefObject, forwardRef } from 'react';
 
 import { equals, isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
@@ -28,12 +28,12 @@ const useStyles = makeStyles()((theme) => ({
 
 interface Props {
   checkboxSelected?: boolean;
-  children: string;
+  children: string | ReactElement;
   thumbnailUrl?: string;
 }
 
 const Option = forwardRef(
-  ({ children, checkboxSelected, thumbnailUrl }: Props, ref): JSX.Element => {
+  ({ children, checkboxSelected, thumbnailUrl }: Props, ref): ReactElement => {
     const { classes } = useStyles();
 
     return (

package/src/InputField/Select/index.tsx

@@ -4,6 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import {
   Divider,
   FormControl,
+  FormControlProps,
   FormHelperText,
   InputLabel,
   ListSubheader,
@@ -59,6 +60,7 @@ type Props = {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   options: Array<SelectEntry>;
   selectedOptionId: number | string;
+  formControlProps: FormControlProps;
 } & Omit<SelectProps, 'error'>;
 
 const SelectField = ({
@@ -72,6 +74,7 @@ const SelectField = ({
   ariaLabel,
   inputProps,
   compact = false,
+  formControlProps,
   ...props
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
@@ -92,6 +95,7 @@ const SelectField = ({
       error={!isNil(error)}
       fullWidth={fullWidth}
       size="small"
+      {...formControlProps}
     >
       {label && <InputLabel>{label}</InputLabel>}
       <Select

package/src/InputField/Text/index.tsx

@@ -98,6 +98,7 @@ export type TextProps = {
   transparent?: boolean;
   value?: string;
   textFieldSlotsAndSlotProps?: TextFieldSlotsAndSlotProps<InputProps>;
+  forceUncontrolled?: boolean;
 } & Omit<TextFieldProps, 'variant' | 'size' | 'error'>;
 
 const TextField = forwardRef(
@@ -123,6 +124,7 @@ const TextField = forwardRef(
       containerClassName,
       type,
       textFieldSlotsAndSlotProps,
+      forceUncontrolled,
       ...rest
     }: TextProps,
     ref: React.ForwardedRef<HTMLDivElement>
@@ -141,7 +143,7 @@ const TextField = forwardRef(
     const tooltipTitle = displayErrorInTooltip && !isNil(error) ? error : '';
 
     const getValueProps = useCallback((): object => {
-      if (debounced) {
+      if (debounced || forceUncontrolled) {
         return {};
       }
       if (defaultValue) {
@@ -149,7 +151,7 @@ const TextField = forwardRef(
       }
 
       return { value: innerValue };
-    }, [innerValue, debounced, defaultValue]);
+    }, [innerValue, debounced, defaultValue, forceUncontrolled]);
 
     return (
       <Box

package/src/InputField/translatedLabels.ts

@@ -1,3 +1,7 @@
 export const searchLabel = 'Search';
 export const labelOpen = 'Open';
 export const labelClear = 'Clear';
+
+export const labelSelectAll = 'Select all';
+export const labelUnSelectAll = 'Unselect all';
+export const labelElementsFound = '{{total}} element(s) found';

package/src/Listing/ActionBar/Pagination.tsx

@@ -1,32 +1,19 @@
 import { memo } from 'react';
 
 import { equals } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
 
 import TablePagination from '@mui/material/TablePagination';
 
-const useStyles = makeStyles()((theme) => ({
-  toolbar: {
-    height: theme.spacing(4),
-    overflow: 'hidden',
-    paddingLeft: 5
-  }
-}));
-
-const Pagination = (props): JSX.Element => {
-  const { classes } = useStyles();
-
-  return (
-    <TablePagination
-      classes={{
-        toolbar: classes.toolbar
-      }}
-      component="div"
-      data-testid="Listing Pagination"
-      {...props}
-    />
-  );
-};
+const Pagination = (props): JSX.Element => (
+  <TablePagination
+    classes={{
+      toolbar: 'pl-1 overflow-hidden h-8'
+    }}
+    component="div"
+    data-testid="Listing Pagination"
+    {...props}
+  />
+);
 
 const MemoizedPagination = memo(
   Pagination,

package/src/Listing/ActionBar/PaginationActions.tsx

@@ -1,5 +1,4 @@
 import { useTranslation } from 'react-i18next';
-import { makeStyles } from 'tss-react/mui';
 
 import FirstPageIcon from '@mui/icons-material/FirstPage';
 import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
@@ -15,20 +14,12 @@ import {
   labelPreviousPage
 } from '../translatedLabels';
 
-const useStyles = makeStyles()((theme) => ({
-  root: {
-    color: theme.palette.text.secondary,
-    flexShrink: 0
-  }
-}));
-
 const PaginationActions = ({
   onPageChange,
   page,
   rowsPerPage,
   count
 }: TablePaginationActionsProps): JSX.Element => {
-  const { classes } = useStyles();
   const { t } = useTranslation();
 
   const changeToFirstPage = (event): void => {
@@ -53,7 +44,7 @@ const PaginationActions = ({
   };
 
   return (
-    <div className={classes.root}>
+    <div className="shrink-0 text-text-secondary">
       <IconButton
         aria-label={t(labelFirstPage) || ''}
         disabled={isFirstPage}

package/src/Listing/ActionBar/index.tsx

@@ -29,7 +29,7 @@ const useStyles = makeStyles<StyleProps>()(
     },
     actions: {
       flex: 1,
-      padding: theme.spacing(1, 0)
+      padding: theme.spacing(1, 1, 1, 0)
     },
     container: {
       alignItems: 'center',

package/src/Listing/Cell/DataCell.tsx

@@ -14,7 +14,6 @@ import {
 } from '../models';
 import useStyleTable from '../useStyleTable';
 
-import { useStyles } from './DataCell.styles';
 import EllipsisTypography from './EllipsisTypography';
 
 import Cell from '.';
@@ -46,7 +45,6 @@ const DataCell = ({
   labelCollapse,
   labelExpand
 }: Props): JSX.Element | null => {
-  const { classes, cx } = useStyles();
   const { dataStyle } = useStyleTable({ listingVariant });
 
   const commonCellProps = {
@@ -78,12 +76,13 @@ const DataCell = ({
           disableRowCondition={disableRowCondition(row)}
           formattedString={formattedString}
           isRowHovered={isRowHovered}
+          isRowHighlighted={isRowHighlighted}
         />
       );
 
       return (
         <Cell
-          className={classes.cell}
+          className="flex items-center h-full overflow-hidden whitespace-nowrap"
           isRowHighlighted={isRowHighlighted}
           listingVariant={listingVariant}
           style={{
@@ -110,7 +109,7 @@ const DataCell = ({
       if (isCellHidden) {
         return (
           <Cell
-            className={classes.cell}
+            className="flex items-center h-full overflow-hidden whitespace-nowrap"
             isRowHighlighted={isRowHighlighted}
             listingVariant={listingVariant}
             onClick={(e): void => {
@@ -127,7 +126,7 @@ const DataCell = ({
 
       return (
         <Cell
-          className={cx(classes.cell, clickable && classes.clickable)}
+          className={`flex align-items h-full overflow-hidden whitespace-nowrap ${clickable && 'cursor-default'}`}
           isRowHighlighted={isRowHighlighted}
           listingVariant={listingVariant}
           style={{
@@ -156,6 +155,7 @@ const DataCell = ({
                   disableRowCondition={disableRowCondition(row)}
                   formattedString={formattedString}
                   isRowHovered={isRowHovered}
+                  isRowHighlighted={isRowHighlighted}
                 />
               );
             }}
@@ -280,4 +280,4 @@ const MemoizedDataCell = memo<Props>(
 );
 
 export default MemoizedDataCell;
-export { useStyles, type Props };
+export type { Props };

package/src/Listing/Cell/EllipsisTypography.tsx

@@ -1,50 +1,28 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { Typography } from '@mui/material';
 
 import { TableStyleAtom as TableStyle } from '../models';
 
-interface StylesProps {
-  body: TableStyle['body'];
-}
-
-const useStyles = makeStyles<StylesProps>()((theme, { body }) => ({
-  rowNotHovered: {
-    color: theme.palette.text.secondary
-  },
-  text: {
-    fontSize: body.fontSize,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }
-}));
-
 interface Ellipsis {
   className?: string;
   dataStyle: TableStyle;
   disableRowCondition: boolean;
   formattedString: string;
   isRowHovered: boolean;
+  isRowHighlighted?: boolean;
 }
 const EllipsisTypography = ({
   formattedString,
   isRowHovered,
   disableRowCondition,
   className,
-  dataStyle
-}: Ellipsis): JSX.Element => {
-  const { cx, classes } = useStyles({ body: dataStyle.body });
-
-  return (
-    <Typography
-      className={cx(className, classes.text, {
-        [classes.rowNotHovered]: !isRowHovered || disableRowCondition
-      })}
-    >
-      {formattedString}
-    </Typography>
-  );
-};
+  dataStyle,
+  isRowHighlighted
+}: Ellipsis): JSX.Element => (
+  <Typography
+    className={`${className} text-[${dataStyle.body.fontSize}] truncate ${!isRowHighlighted && (!isRowHovered || disableRowCondition) && 'text-text-secondary'}`}
+  >
+    {formattedString}
+  </Typography>
+);
 
 export default EllipsisTypography;