@centreon/ui 24.4.59 → 24.4.60

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

@@ -1,7 +1,7 @@
 import { includes, map, prop, reject } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Chip, ChipProps, Tooltip } from '@mui/material';
+import { Chip } from '@mui/material';
 import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
 import Autocomplete, { Props as AutocompleteProps } from '..';
@@ -18,6 +18,7 @@ const useStyles = makeStyles()((theme) => ({
     width: theme.spacing(1.5)
   },
   tag: {
+    backgroundColor: theme.palette.divider,
     fontSize: theme.typography.caption.fontSize
   }
 }));
@@ -32,48 +33,30 @@ export interface Props
       UseAutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>,
       'multiple'
     > {
-  chipProps?: ChipProps;
   disableSortedOptions?: boolean;
-  getOptionTooltipLabel?: (option) => string;
-  getTagLabel?: (option) => string;
-  optionProperty?: string;
 }
 
 const MultiAutocompleteField = ({
   value,
   options,
   disableSortedOptions = false,
-  optionProperty = 'name',
-  getOptionLabel = (option): string => option.name,
-  getTagLabel = (option): string => option[optionProperty],
-  getOptionTooltipLabel,
-  chipProps,
   ...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
-            }}
-            label={getTagLabel(option)}
-            size="medium"
-            {...getTagProps({ index })}
-            {...chipProps}
-            onDelete={(event) => chipProps?.onDelete?.(event, option)}
-          />
-        </Tooltip>
-      );
-    });
+    renderedValue.map((option, index) => (
+      <Chip
+        classes={{
+          deleteIcon: classes.deleteIcon,
+          root: classes.tag
+        }}
+        key={option.id}
+        label={option.name}
+        size="medium"
+        {...getTagProps({ index })}
+      />
+    ));
 
   const getLimitTagsText = (more): JSX.Element => <Option>{`+${more}`}</Option>;
 
@@ -101,7 +84,7 @@ const MultiAutocompleteField = ({
           key={option.id}
           {...(renderProps as React.HTMLAttributes<HTMLLIElement>)}
         >
-          <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
+          <Option checkboxSelected={selected}>{option.name}</Option>
         </li>
       )}
       renderTags={renderTags}

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

@@ -85,7 +85,7 @@ const AutoSizeAutocompleteField = ({
   endAdornment,
   customPadding
 }: AutoSizeAutocompleteFieldProps): JSX.Element => {
-  const [value, setValue] = React.useState(null);
+  const [value, setValue] = React.useState(autoSizeOptions[1]);
 
   const change = (_, newValue): void => {
     setValue(newValue);
@@ -108,3 +108,12 @@ const AutoSizeAutocompleteField = ({
 export const autoSize = (): JSX.Element => {
   return <AutoSizeAutocompleteField />;
 };
+
+export const autoSizeWithCustomPadding = (): JSX.Element => {
+  return (
+    <AutoSizeAutocompleteField
+      customPadding={5}
+      endAdornment={<EndAdornment />}
+    />
+  );
+};

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

@@ -20,7 +20,7 @@ import Option from '../Option';
 import TextField from '../../Text';
 import { SelectEntry } from '..';
 import { searchLabel } from '../../translatedLabels';
-import { getNormalizedId } from '../../../utils';
+import getNormalizedId from '../../../utils/getNormalizedId';
 
 export type Props = {
   autoFocus?: boolean;
@@ -32,7 +32,6 @@ export type Props = {
   displayPopupIcon?: boolean;
   endAdornment?: React.ReactElement;
   error?: string;
-  getOptionItemLabel?: (option) => string;
   hideInput?: boolean;
   label: string;
   loading?: boolean;
@@ -159,7 +158,6 @@ const AutocompleteField = ({
   autoSize = false,
   autoSizeDefaultWidth = 0,
   autoSizeCustomPadding,
-  getOptionItemLabel = (option) => option.name,
   ...autocompleteProps
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ hideInput });
@@ -195,7 +193,6 @@ const AutocompleteField = ({
           </>
         ),
         style: {
-          background: 'transparent',
           paddingRight: theme.spacing(5)
         }
       }}
@@ -252,7 +249,7 @@ const AutocompleteField = ({
             <Option
               thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
             >
-              {getOptionItemLabel(option)}
+              {option.name}
             </Option>
           </li>
         );

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

@@ -15,7 +15,7 @@ import {
 } from '@mui/material';
 import IconReset from '@mui/icons-material/RotateLeft';
 
-import { IconButton } from '../../..';
+import IconButton from '../../../Button/Icon';
 import Option from '../Option';
 import { SelectEntry } from '..';
 

package/src/InputField/Select/index.tsx

@@ -13,7 +13,7 @@ import {
   Divider
 } from '@mui/material';
 
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 import Option from './Option';
 
@@ -115,7 +115,6 @@ const SelectField = ({
 
             return (
               <MenuItem
-                aria-label={name}
                 data-testid={testId}
                 key={key}
                 style={{ backgroundColor: color }}

package/src/InputField/Text/index.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useCallback } from 'react';
 
-import { equals, isNil } from 'ramda';
+import { isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import {
@@ -9,44 +9,44 @@ import {
   TextFieldProps,
   Theme,
   Tooltip,
-  Typography,
-  Box
+  Typography
 } from '@mui/material';
 
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 import useAutoSize from './useAutoSize';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  autoSizeCompact: {
-    paddingRight: theme.spacing(1),
-    paddingTop: theme.spacing(0.6)
-  },
-  hiddenText: {
-    display: 'table',
-    lineHeight: 0,
-    transform: 'scaleY(0)'
-  },
-  input: {
-    fontSize: theme.typography.body1.fontSize
-  },
-  inputBase: {
-    display: 'inline-flex',
-    justifyItems: 'start',
-    paddingRight: theme.spacing(1)
-  },
-  noLabelInput: {
-    padding: theme.spacing(1)
-  },
-  textField: {
-    transition: theme.transitions.create(['width'], {
-      duration: theme.transitions.duration.shortest
-    })
-  },
-  transparent: {
-    backgroundColor: 'transparent'
-  }
-}));
+const useStyles = makeStyles<{ displayAsBlock: boolean }>()(
+  (theme: Theme, { displayAsBlock }) => ({
+    compact: {
+      fontSize: 'x-small'
+    },
+    hiddenText: {
+      display: 'table',
+      lineHeight: 0,
+      transform: 'scaleY(0)'
+    },
+    input: {
+      fontSize: theme.typography.body1.fontSize
+    },
+    inputBase: {
+      display: displayAsBlock ? 'block' : 'inline-flex',
+      justifyItems: 'start',
+      paddingRight: theme.spacing(1)
+    },
+    noLabelInput: {
+      padding: theme.spacing(1)
+    },
+    textField: {
+      transition: theme.transitions.create(['width'], {
+        duration: theme.transitions.duration.shortest
+      })
+    },
+    transparent: {
+      backgroundColor: 'transparent'
+    }
+  })
+);
 
 interface OptionalLabelInputAdornmentProps {
   children: React.ReactNode;
@@ -70,7 +70,7 @@ const OptionalLabelInputAdornment = ({
 
 type SizeVariant = 'large' | 'medium' | 'small' | 'compact';
 
-export type TextProps = {
+export type Props = {
   EndAdornment?: React.FC;
   StartAdornment?: React.FC;
   ariaLabel?: string;
@@ -78,14 +78,12 @@ export type TextProps = {
   autoSizeCustomPadding?: number;
   autoSizeDefaultWidth?: number;
   className?: string;
-  containerClassName?: string;
   dataTestId: string;
   debounced?: boolean;
   displayErrorInTooltip?: boolean;
   error?: string;
   externalValueForAutoSize?: string;
   open?: boolean;
-  required?: boolean;
   size?: SizeVariant;
   transparent?: boolean;
   value?: string;
@@ -110,20 +108,17 @@ const TextField = forwardRef(
       externalValueForAutoSize,
       autoSizeCustomPadding,
       defaultValue,
-      required = false,
-      containerClassName,
-      type,
       ...rest
-    }: TextProps,
+    }: Props,
     ref: React.ForwardedRef<HTMLDivElement>
   ): JSX.Element => {
-    const { classes, cx } = useStyles();
+    const { classes, cx } = useStyles({
+      displayAsBlock: autoSize && isNil(StartAdornment) && isNil(EndAdornment)
+    });
 
     const { inputRef, width, changeInputValue, innerValue } = useAutoSize({
       autoSize,
-      autoSizeCustomPadding: equals(type, 'number')
-        ? Math.max(6, autoSizeCustomPadding || 0)
-        : autoSizeCustomPadding,
+      autoSizeCustomPadding,
       autoSizeDefaultWidth,
       value: externalValueForAutoSize || rest.value
     });
@@ -143,10 +138,7 @@ const TextField = forwardRef(
     }, [innerValue, debounced, defaultValue]);
 
     return (
-      <Box
-        className={containerClassName}
-        sx={{ width: autoSize ? 'auto' : '100%' }}
-      >
+      <>
         <Tooltip placement="top" title={tooltipTitle}>
           <MuiTextField
             data-testid={dataTestId}
@@ -168,11 +160,11 @@ const TextField = forwardRef(
               className: cx(
                 classes.inputBase,
                 {
-                  [classes.transparent]: transparent,
-                  [classes.autoSizeCompact]: autoSize && equals(size, 'compact')
+                  [classes.transparent]: transparent
                 },
                 className
               ),
+              disableUnderline: true,
               endAdornment: (
                 <OptionalLabelInputAdornment label={label} position="end">
                   {EndAdornment ? (
@@ -190,12 +182,10 @@ const TextField = forwardRef(
               ...rest.InputProps
             }}
             className={classes.textField}
-            required={required}
             sx={{
               width: autoSize ? width : undefined,
               ...rest?.sx
             }}
-            type={type}
           />
         </Tooltip>
         {autoSize && (
@@ -203,7 +193,7 @@ const TextField = forwardRef(
             {rest.value || externalValueForAutoSize || innerValue}
           </Typography>
         )}
-      </Box>
+      </>
     );
   }
 );

package/src/Listing/ActionBar/index.tsx

@@ -9,9 +9,10 @@ import Divider from '@mui/material/Divider';
 
 import { userAtom, ListingVariant } from '@centreon/ui-context';
 
-import { ListingProps, IconButton } from '../..';
+import { ListingProps } from '../..';
 import { labelOf, labelRowsPerPage } from '../translatedLabels';
-import { useMemoComponent } from '../../utils';
+import useMemoComponent from '../../utils/useMemoComponent';
+import IconButton from '../../Button/Icon/index';
 
 import StyledPagination from './Pagination';
 import PaginationActions from './PaginationActions';
@@ -85,7 +86,7 @@ type Props = Pick<
   | 'moveTablePagination'
   | 'widthToMoveTablePagination'
   | 'customPaginationClassName'
-  | 'listingVariant'
+  | 'viewMode'
   | 'viewerModeConfiguration'
 >;
 
@@ -106,8 +107,7 @@ const MemoListingActionBar = ({
   widthToMoveTablePagination = 550,
   actionsBarMemoProps = [],
   viewerModeConfiguration,
-  listingVariant,
-  visualizationActions
+  viewMode
 }: Props): JSX.Element => {
   const marginWidthTableListing = 30;
   const { classes, cx } = useStyles({
@@ -136,7 +136,6 @@ const MemoListingActionBar = ({
         <div className={classes.actions}>
           <div>{actions}</div>
         </div>
-        {visualizationActions && <div>{visualizationActions}</div>}
         <div className={classes.subContainer}>
           {!isEmpty(viewerModeConfiguration) &&
             !isNil(viewerModeConfiguration) && (
@@ -160,10 +159,7 @@ const MemoListingActionBar = ({
                     viewerModeConfiguration?.customStyle
                       ?.customStyleViewerModeIcon,
                     {
-                      [classes.mode]: equals(
-                        listingVariant,
-                        ListingVariant.extended
-                      )
+                      [classes.mode]: equals(viewMode, ListingVariant.extended)
                     }
                   )}
                 >
@@ -214,7 +210,7 @@ const MemoListingActionBar = ({
       currentPage,
       moveTablePagination,
       widthToMoveTablePagination,
-      listingVariant,
+      viewMode,
       themeMode,
       limit,
       pick(
@@ -244,9 +240,8 @@ const ListingActionBar = ({
   moveTablePagination,
   widthToMoveTablePagination,
   customPaginationClassName,
-  listingVariant,
-  viewerModeConfiguration,
-  visualizationActions
+  viewMode,
+  viewerModeConfiguration
 }: Props): JSX.Element | null => {
   if (
     not(paginated) &&
@@ -265,12 +260,11 @@ const ListingActionBar = ({
       currentPage={currentPage}
       customPaginationClassName={customPaginationClassName}
       limit={limit}
-      listingVariant={listingVariant}
       moveTablePagination={moveTablePagination}
       paginated={paginated}
       totalRows={totalRows}
+      viewMode={viewMode}
       viewerModeConfiguration={viewerModeConfiguration}
-      visualizationActions={visualizationActions}
       widthToMoveTablePagination={widthToMoveTablePagination}
       onLimitChange={onLimitChange}
       onPaginate={onPaginate}

package/src/Listing/Cell/DataCell.tsx

@@ -1,11 +1,13 @@
 import { memo } from 'react';
 
 import { equals, props } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
 
 import { Tooltip } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
+import DraggableIcon from '../Header/SortableCell/DraggableIcon';
 import {
   Column,
   ColumnType,
@@ -15,24 +17,46 @@ import {
 import useStyleTable from '../useStyleTable';
 
 import EllipsisTypography from './EllipsisTypography';
-import { useStyles } from './DataCell.styles';
 
 import Cell from '.';
 
 interface Props {
+  areColumnsEditable: boolean;
   column: Column;
   disableRowCondition: (row) => boolean;
   getHighlightRowCondition?: (row) => boolean;
   isRowHovered: boolean;
   isRowSelected: boolean;
-  labelCollapse?: string;
-  labelExpand?: string;
-  listingVariant?: ListingVariant;
   row?;
   rowColorConditions?: Array<RowColorCondition>;
-  subItemsRowProperty?: string;
+  viewMode?: ListingVariant;
 }
 
+const useStyles = makeStyles()((theme) => ({
+  cell: {
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    display: 'flex',
+    height: '100%',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
+  },
+  componentColumn: {
+    width: theme.spacing(2.75)
+  },
+  headerCell: {
+    padding: theme.spacing(0, 0, 0, 1)
+  },
+  rowNotHovered: {
+    color: theme.palette.text.secondary
+  },
+  text: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  }
+}));
+
 const DataCell = ({
   row,
   column,
@@ -40,24 +64,19 @@ const DataCell = ({
   isRowHovered,
   rowColorConditions,
   disableRowCondition,
-  listingVariant,
+  viewMode,
   getHighlightRowCondition,
-  subItemsRowProperty,
-  labelCollapse,
-  labelExpand
+  areColumnsEditable
 }: Props): JSX.Element | null => {
+  const { dataStyle } = useStyleTable({ viewMode });
   const { classes } = useStyles();
-  const { dataStyle } = useStyleTable({ listingVariant });
 
   const commonCellProps = {
+    align: 'left' as const,
     disableRowCondition,
-    displaySubItemsCaret: column.displaySubItemsCaret,
     isRowHovered,
-    labelCollapse,
-    labelExpand,
     row,
-    rowColorConditions,
-    subItemsRowProperty
+    rowColorConditions
   };
 
   const isRowHighlighted = getHighlightRowCondition?.(row);
@@ -83,18 +102,20 @@ const DataCell = ({
 
       return (
         <Cell
-          className={classes.cell}
           isRowHighlighted={isRowHighlighted}
-          listingVariant={listingVariant}
           style={{
             gridColumn
           }}
+          viewMode={viewMode}
           {...commonCellProps}
         >
           {isTruncated && (
             <Tooltip title={formattedString}>{typography}</Tooltip>
           )}
-          {!isTruncated && typography}
+          <>
+            {areColumnsEditable && <DraggableIcon />}
+            {!isTruncated && typography}
+          </>
         </Cell>
       );
     },
@@ -112,9 +133,8 @@ const DataCell = ({
 
       return (
         <Cell
-          className={classes.cell}
           isRowHighlighted={isRowHighlighted}
-          listingVariant={listingVariant}
+          viewMode={viewMode}
           onClick={(e): void => {
             if (!clickable) {
               return;
@@ -124,25 +144,31 @@ const DataCell = ({
           }}
           {...commonCellProps}
         >
-          <Component
-            isHovered={isRowHovered}
-            isSelected={isRowSelected}
-            renderEllipsisTypography={({
-              className,
-              formattedString
-            }): JSX.Element => {
-              return (
-                <EllipsisTypography
-                  className={className}
-                  dataStyle={dataStyle}
-                  disableRowCondition={disableRowCondition(row)}
-                  formattedString={formattedString}
-                  isRowHovered={isRowHovered}
-                />
-              );
-            }}
-            row={row}
-          />
+          <>
+            {areColumnsEditable && (
+              <DraggableIcon className={classes.componentColumn} />
+            )}
+
+            <Component
+              isHovered={isRowHovered}
+              isSelected={isRowSelected}
+              renderEllipsisTypography={({
+                className,
+                formattedString
+              }): JSX.Element => {
+                return (
+                  <EllipsisTypography
+                    className={className}
+                    dataStyle={dataStyle}
+                    disableRowCondition={disableRowCondition(row)}
+                    formattedString={formattedString}
+                    isRowHovered={isRowHovered}
+                  />
+                );
+              }}
+              row={row}
+            />
+          </>
         </Cell>
       );
     }
@@ -222,7 +248,7 @@ const MemoizedDataCell = memo<Props>(
 
     // Explicitely prevent the component from rendering.
     if (nextRenderComponentCondition === false) {
-      return equals(prevProps.listingVariant, nextProps.listingVariant);
+      return equals(prevProps.viewMode, nextProps.viewMode);
     }
 
     const previousRowProps = previousRowMemoProps
@@ -233,7 +259,6 @@ const MemoizedDataCell = memo<Props>(
       : nextProps.row;
 
     return (
-      equals(prevProps.row, nextProps.row) &&
       equals(previousIsComponentHovered, nextIsComponentHovered) &&
       equals(prevProps.isRowHovered, nextProps.isRowHovered) &&
       equals(previousFormattedString, nextFormattedString) &&
@@ -255,8 +280,8 @@ const MemoizedDataCell = memo<Props>(
         nextProps.disableRowCondition(nextProps.row)
       ) &&
       equals(previousIsRowHighlighted, nextIsRowHighlighted) &&
-      equals(prevProps.listingVariant, nextProps.listingVariant) &&
-      equals(prevProps.subItemsRowProperty, nextProps.subItemsRowProperty)
+      equals(prevProps.viewMode, nextProps.viewMode) &&
+      equals(prevProps.areColumnsEditable, nextProps.areColumnsEditable)
     );
   }
 );