@centreon/ui 24.9.4 → 24.9.6

package/src/InputField/Text/useAutoSize.ts

@@ -1,62 +1,62 @@
-import { ChangeEvent, RefObject, useEffect, useRef, useState } from 'react';
-
-import { useTheme } from '@mui/material';
-
-interface UseAutoSizeProps {
-  autoSize: boolean;
-  autoSizeCustomPadding?: number;
-  autoSizeDefaultWidth: number;
-  value?: string;
-}
-
-interface UseAutoSizeState {
-  changeInputValue: (
-    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => void;
-  innerValue: string;
-  inputRef: RefObject<HTMLDivElement>;
-  width: string;
-}
-
-const defaultPaddingTotal = 4.5;
-
-const useAutoSize = ({
-  autoSize,
-  autoSizeDefaultWidth,
-  value,
-  autoSizeCustomPadding
-}: UseAutoSizeProps): UseAutoSizeState => {
-  const [innerValue, setInnerValue] = useState(value || '');
-  const [width, setWidth] = useState(autoSizeDefaultWidth);
-  const inputRef = useRef();
-  const theme = useTheme();
-
-  const changeInputValue = (
-    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ): void => {
-    setInnerValue(event.target.value);
-  };
-
-  const textFieldValue = autoSize && (value || innerValue);
-
-  useEffect(() => {
-    if (!autoSize) {
-      return;
-    }
-
-    const newWidth = inputRef.current?.getBoundingClientRect().width || 0;
-
-    setWidth(newWidth < autoSizeDefaultWidth ? autoSizeDefaultWidth : newWidth);
-  }, [textFieldValue]);
-
-  return {
-    changeInputValue,
-    innerValue,
-    inputRef,
-    width: `calc(${width}px + ${theme.spacing(
-      autoSizeCustomPadding || defaultPaddingTotal
-    )})`
-  };
-};
-
-export default useAutoSize;
+import { useState, useRef, useEffect, RefObject, ChangeEvent } from 'react';
+
+import { useTheme } from '@mui/material';
+
+interface UseAutoSizeProps {
+  autoSize: boolean;
+  autoSizeCustomPadding?: number;
+  autoSizeDefaultWidth: number;
+  value?: string;
+}
+
+interface UseAutoSizeState {
+  changeInputValue: (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
+  innerValue: string;
+  inputRef: RefObject<HTMLDivElement>;
+  width: string;
+}
+
+const defaultPaddingTotal = 4.5;
+
+const useAutoSize = ({
+  autoSize,
+  autoSizeDefaultWidth,
+  value,
+  autoSizeCustomPadding
+}: UseAutoSizeProps): UseAutoSizeState => {
+  const [innerValue, setInnerValue] = useState(value || '');
+  const [width, setWidth] = useState(autoSizeDefaultWidth);
+  const inputRef = useRef();
+  const theme = useTheme();
+
+  const changeInputValue = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ): void => {
+    setInnerValue(event.target.value);
+  };
+
+  const textFieldValue = autoSize && (value || innerValue);
+
+  useEffect(() => {
+    if (!autoSize) {
+      return;
+    }
+
+    const newWidth = inputRef.current?.getBoundingClientRect().width || 0;
+
+    setWidth(newWidth < autoSizeDefaultWidth ? autoSizeDefaultWidth : newWidth);
+  }, [textFieldValue]);
+
+  return {
+    changeInputValue,
+    innerValue,
+    inputRef,
+    width: `calc(${width}px + ${theme.spacing(
+      autoSizeCustomPadding || defaultPaddingTotal
+    )})`
+  };
+};
+
+export default useAutoSize;

package/src/LicenseMessage/index.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import { Paper, Typography, alpha } from '@mui/material';
+import { alpha, Paper, Typography } from '@mui/material';
 
 import { labelInvalidLicense } from './translatedLabels';
 

package/src/Listing/ActionBar/ColumnMultiSelect.tsx

@@ -1,13 +1,13 @@
-import { isNil, prop } from 'ramda';
 import { useTranslation } from 'react-i18next';
+import { isNil, prop } from 'ramda';
 
 import ColumnIcon from '@mui/icons-material/ViewColumn';
 
-import { Props as ListingProps, getVisibleColumns } from '..';
-import { SelectEntry } from '../../InputField/Select';
+import { getVisibleColumns, Props as ListingProps } from '..';
 import IconPopoverMultiSelect from '../../InputField/Select/IconPopover';
-import { Column } from '../models';
 import { labelAddColumns } from '../translatedLabels';
+import { SelectEntry } from '../../InputField/Select';
+import { Column } from '../models';
 
 type Props = Pick<
   ListingProps<unknown>,

package/src/Listing/ActionBar/PaginationActions.tsx

@@ -1,11 +1,11 @@
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
+import IconButton from '@mui/material/IconButton';
 import FirstPageIcon from '@mui/icons-material/FirstPage';
 import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 import LastPageIcon from '@mui/icons-material/LastPage';
-import IconButton from '@mui/material/IconButton';
 import { TablePaginationActionsProps } from '@mui/material/TablePagination/TablePaginationActions';
 
 import {

package/src/Listing/ActionBar/index.tsx

@@ -1,21 +1,22 @@
-import { useAtomValue } from 'jotai';
-import { equals, isEmpty, isNil, not, pick } from 'ramda';
 import { useTranslation } from 'react-i18next';
+import { equals, isEmpty, isNil, not, pick } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
+import { useAtomValue } from 'jotai';
 
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import Divider from '@mui/material/Divider';
 
-import { ListingVariant, userAtom } from '@centreon/ui-context';
+import { userAtom, ListingVariant } from '@centreon/ui-context';
 
-import { IconButton, ListingProps } from '../..';
-import { useMemoComponent } from '../../utils';
+import { ListingProps } from '../..';
 import { labelOf, labelRowsPerPage } from '../translatedLabels';
+import useMemoComponent from '../../utils/useMemoComponent';
+import IconButton from '../../Button/Icon/index';
 
-import ColumnMultiSelect from './ColumnMultiSelect';
 import StyledPagination from './Pagination';
 import PaginationActions from './PaginationActions';
+import ColumnMultiSelect from './ColumnMultiSelect';
 
 interface StyleProps {
   marginWidthTableListing: number;
@@ -28,7 +29,6 @@ const useStyles = makeStyles<StyleProps>()(
       paddingLeft: theme.spacing(1)
     },
     actions: {
-      flex: 1,
       padding: theme.spacing(1, 0)
     },
     container: {
@@ -86,7 +86,7 @@ type Props = Pick<
   | 'moveTablePagination'
   | 'widthToMoveTablePagination'
   | 'customPaginationClassName'
-  | 'listingVariant'
+  | 'viewMode'
   | 'viewerModeConfiguration'
 >;
 
@@ -107,7 +107,7 @@ const MemoListingActionBar = ({
   widthToMoveTablePagination = 550,
   actionsBarMemoProps = [],
   viewerModeConfiguration,
-  listingVariant
+  viewMode
 }: Props): JSX.Element => {
   const marginWidthTableListing = 30;
   const { classes, cx } = useStyles({
@@ -159,10 +159,7 @@ const MemoListingActionBar = ({
                     viewerModeConfiguration?.customStyle
                       ?.customStyleViewerModeIcon,
                     {
-                      [classes.mode]: equals(
-                        listingVariant,
-                        ListingVariant.extended
-                      )
+                      [classes.mode]: equals(viewMode, ListingVariant.extended)
                     }
                   )}
                 >
@@ -173,15 +170,14 @@ const MemoListingActionBar = ({
               </IconButton>
             )}
           <div className={classes.ModeViewer} />
-          {columnConfiguration?.selectedColumnIds &&
-            columnConfiguration?.sortable && (
-              <ColumnMultiSelect
-                columnConfiguration={columnConfiguration}
-                columns={columns}
-                onResetColumns={onResetColumns}
-                onSelectColumns={onSelectColumns}
-              />
-            )}
+          {columnConfiguration?.selectedColumnIds && (
+            <ColumnMultiSelect
+              columnConfiguration={columnConfiguration}
+              columns={columns}
+              onResetColumns={onResetColumns}
+              onSelectColumns={onSelectColumns}
+            />
+          )}
           {paginated && (
             <StyledPagination
               ActionsComponent={PaginationActions}
@@ -214,7 +210,7 @@ const MemoListingActionBar = ({
       currentPage,
       moveTablePagination,
       widthToMoveTablePagination,
-      listingVariant,
+      viewMode,
       themeMode,
       limit,
       pick(
@@ -244,7 +240,7 @@ const ListingActionBar = ({
   moveTablePagination,
   widthToMoveTablePagination,
   customPaginationClassName,
-  listingVariant,
+  viewMode,
   viewerModeConfiguration
 }: Props): JSX.Element | null => {
   if (
@@ -264,10 +260,10 @@ const ListingActionBar = ({
       currentPage={currentPage}
       customPaginationClassName={customPaginationClassName}
       limit={limit}
-      listingVariant={listingVariant}
       moveTablePagination={moveTablePagination}
       paginated={paginated}
       totalRows={totalRows}
+      viewMode={viewMode}
       viewerModeConfiguration={viewerModeConfiguration}
       widthToMoveTablePagination={widthToMoveTablePagination}
       onLimitChange={onLimitChange}

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,
@@ -14,25 +16,47 @@ import {
 } from '../models';
 import useStyleTable from '../useStyleTable';
 
-import { useStyles } from './DataCell.styles';
 import EllipsisTypography from './EllipsisTypography';
 
 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,31 +64,26 @@ const DataCell = ({
   isRowHovered,
   rowColorConditions,
   disableRowCondition,
-  listingVariant,
+  viewMode,
   getHighlightRowCondition,
-  subItemsRowProperty,
-  labelCollapse,
-  labelExpand
+  areColumnsEditable
 }: Props): JSX.Element | null => {
-  const { classes, cx } = useStyles();
-  const { dataStyle } = useStyleTable({ listingVariant });
+  const { dataStyle } = useStyleTable({ viewMode });
+  const { classes } = useStyles();
 
   const commonCellProps = {
+    align: 'left' as const,
     disableRowCondition,
-    displaySubItemsCaret: column.displaySubItemsCaret,
     isRowHovered,
-    labelCollapse,
-    labelExpand,
     row,
-    rowColorConditions,
-    subItemsRowProperty
+    rowColorConditions
   };
 
   const isRowHighlighted = getHighlightRowCondition?.(row);
 
   const cellByColumnType = {
     [ColumnType.string]: (): JSX.Element => {
-      const { getFormattedString, isTruncated, getColSpan, align } = column;
+      const { getFormattedString, isTruncated, getColSpan } = column;
 
       const colSpan = getColSpan?.(isRowSelected);
 
@@ -83,24 +102,25 @@ const DataCell = ({
 
       return (
         <Cell
-          className={classes.cell}
           isRowHighlighted={isRowHighlighted}
-          listingVariant={listingVariant}
           style={{
-            alignItems: align,
             gridColumn
           }}
+          viewMode={viewMode}
           {...commonCellProps}
         >
           {isTruncated && (
             <Tooltip title={formattedString}>{typography}</Tooltip>
           )}
-          {!isTruncated && typography}
+          <>
+            {areColumnsEditable && <DraggableIcon />}
+            {!isTruncated && typography}
+          </>
         </Cell>
       );
     },
     [ColumnType.component]: (): JSX.Element | null => {
-      const { getHiddenCondition, clickable, align } = column;
+      const { getHiddenCondition, clickable } = column;
       const Component = column.Component as (
         props: ComponentColumnProps
       ) => JSX.Element;
@@ -108,31 +128,13 @@ 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 (
         <Cell
-          className={cx(classes.cell, clickable && classes.clickable)}
           isRowHighlighted={isRowHighlighted}
-          listingVariant={listingVariant}
-          style={{
-            alignItems: align
-          }}
+          viewMode={viewMode}
           onClick={(e): void => {
             if (!clickable) {
               return;
@@ -142,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>
       );
     }
@@ -240,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
@@ -251,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) &&
@@ -273,11 +280,11 @@ 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)
     );
   }
 );
 
 export default MemoizedDataCell;
-export { useStyles, type Props };
+export { useStyles, Props };

package/src/Listing/Cell/EllipsisTypography.tsx

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 import { makeStyles } from 'tss-react/mui';
 
 import { Typography } from '@mui/material';