@centreon/ui 24.7.2 → 24.7.4

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)
                     }
                   )}
                 >
@@ -174,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}
@@ -215,7 +210,7 @@ const MemoListingActionBar = ({
       currentPage,
       moveTablePagination,
       widthToMoveTablePagination,
-      listingVariant,
+      viewMode,
       themeMode,
       limit,
       pick(
@@ -224,7 +219,6 @@ const MemoListingActionBar = ({
       ),
       columnConfiguration,
       customPaginationClassName,
-      visualizationActions,
       ...actionsBarMemoProps
     ]
   });
@@ -246,9 +240,8 @@ const ListingActionBar = ({
   moveTablePagination,
   widthToMoveTablePagination,
   customPaginationClassName,
-  listingVariant,
-  viewerModeConfiguration,
-  visualizationActions
+  viewMode,
+  viewerModeConfiguration
 }: Props): JSX.Element | null => {
   if (
     not(paginated) &&
@@ -267,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,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,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)
     );
   }
 );

package/src/Listing/Cell/index.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
 
-import { append, equals, includes, isNil, omit, reject } from 'ramda';
+import { isNil, omit } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 import { CSSObject } from 'tss-react';
-import { useAtom } from 'jotai';
 
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
   alpha,
   TableCell,
@@ -16,9 +14,7 @@ import {
 
 import { ListingVariant } from '@centreon/ui-context';
 
-import { IconButton } from '../..';
 import { getTextStyleByViewMode } from '../useStyleTable';
-import { subItemsPivotsAtom } from '../tableAtoms';
 
 import { Props as DataCellProps } from './DataCell';
 
@@ -54,7 +50,7 @@ const getBackgroundColor = ({
 
 interface StylesProps extends Props {
   isRowHighlighted?: boolean;
-  listingVariant?: ListingVariant;
+  viewMode?: ListingVariant;
 }
 
 interface GetRowHighlightStyleProps {
@@ -81,20 +77,9 @@ const useStyles = makeStyles<StylesProps>()(
       rowColorConditions,
       disableRowCondition,
       isRowHighlighted,
-      listingVariant
+      viewMode
     }
   ) => ({
-    caret: {
-      transition: theme.transitions.create('transform', {
-        duration: theme.transitions.duration.short
-      })
-    },
-    caretLess: {
-      transform: 'rotate3d(0,0,1,0deg)'
-    },
-    caretMore: {
-      transform: 'rotate3d(0,0,1,180deg)'
-    },
     root: {
       alignItems: 'center',
       backgroundColor: getBackgroundColor({
@@ -112,9 +97,9 @@ const useStyles = makeStyles<StylesProps>()(
       },
       height: '100%',
       overflow: 'hidden',
-      ...getTextStyleByViewMode({ listingVariant, theme }),
+      ...getTextStyleByViewMode({ theme, viewMode }),
       p: getRowHighlightStyle({ isRowHighlighted, theme }),
-      padding: theme.spacing(0, 1),
+      padding: 0,
       whiteSpace: 'nowrap'
     }
   })
@@ -126,57 +111,15 @@ interface Props
       'isRowHovered' | 'row' | 'rowColorConditions' | 'disableRowCondition'
     >,
     TableCellProps {
-  displaySubItemsCaret?: boolean;
   isRowHighlighted?: boolean;
-  labelCollapse?: string;
-  labelExpand?: string;
-  listingVariant?: ListingVariant;
-  subItemsRowProperty?: string;
+  viewMode?: ListingVariant;
 }
 
-const isPivotExistInTheList = (
-  id
-): ((list: Array<number | string>) => boolean) => includes(id);
-
-const handleSubItems = ({
-  currentSubItemsPivots,
-  id
-}): Array<number | string> => {
-  if (isPivotExistInTheList(id)(currentSubItemsPivots)) {
-    return reject(equals(id), currentSubItemsPivots);
-  }
-
-  return append(id, currentSubItemsPivots);
-};
-
-const Cell = ({
-  displaySubItemsCaret,
-  subItemsRowProperty,
-  labelCollapse,
-  labelExpand,
-  ...props
-}: Props): JSX.Element => {
+const Cell = (props: Props): JSX.Element => {
   const { classes, cx } = useStyles(props);
 
-  const [subItemsPivots, setSubItemsPivots] = useAtom(subItemsPivotsAtom);
-
   const { children } = props;
 
-  const rowId = props.row?.id;
-
-  const click = (e): void => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    setSubItemsPivots((currentSubItemsPivots) =>
-      handleSubItems({ currentSubItemsPivots, id: rowId })
-    );
-  };
-
-  const isSubItemsExpanded = isPivotExistInTheList(rowId)(subItemsPivots);
-
-  const hasSubItems = subItemsRowProperty && props.row[subItemsRowProperty];
-
   return (
     <TableCell
       classes={{
@@ -190,28 +133,11 @@ const Cell = ({
           'rowColorConditions',
           'disableRowCondition',
           'isRowHighlighted',
-          'listingVariant'
+          'viewMode'
         ],
         props
       )}
     >
-      {displaySubItemsCaret && hasSubItems && (
-        <IconButton
-          ariaLabel={`${isSubItemsExpanded ? labelCollapse : labelExpand} ${
-            props.row.id
-          }`}
-          size="small"
-          onClick={click}
-        >
-          <ExpandMoreIcon
-            className={cx(
-              classes.caret,
-              isSubItemsExpanded ? classes.caretMore : classes.caretLess
-            )}
-            fontSize="small"
-          />
-        </IconButton>
-      )}
       {children}
     </TableCell>
   );

package/src/Listing/Header/{_internals/PredefinedSelectionList.tsx → PredefinedSelectionList.tsx}

@@ -1,6 +1,6 @@
 import { List, ListItem, ListItemText } from '@mui/material';
 
-import { PredefinedRowSelection } from '../../models';
+import { PredefinedRowSelection } from '../models';
 
 interface Props {
   close: () => void;

package/src/Listing/Header/{Cell/ListingHeaderCell.tsx → SortableCell/Content.tsx}

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { always, and, equals, ifElse, isNil } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
 
 import {
   TableCell,
@@ -9,12 +10,61 @@ import {
   Tooltip
 } from '@mui/material';
 
+import { ListingVariant } from '@centreon/ui-context';
+
 import { Props as ListingProps } from '../..';
 import { Column } from '../../models';
-import HeaderLabel from '../_internals/Label';
-import { DraggableIconButton } from '../_internals/DraggableIconButton';
+import HeaderLabel from '../Label';
+import { getTextStyleByViewMode } from '../../useStyleTable';
+
+import DraggableIcon from './DraggableIcon';
+
+type StylesProps = Pick<Props, 'isDragging' | 'isInDragOverlay' | 'viewMode'>;
 
-import { StylesProps, useStyles } from './ListingHeaderCell.styles';
+const useStyles = makeStyles<StylesProps>()(
+  (theme, { isDragging, isInDragOverlay, viewMode }) => ({
+    active: {
+      '&.Mui-active': {
+        '& .MuiTableSortLabel-icon': {
+          color: theme.palette.common.white
+        },
+        color: theme.palette.common.white
+      },
+      '&:hover': {
+        '& .MuiTableSortLabel-icon': {
+          opacity: 1
+        },
+        color: theme.palette.common.white
+      }
+    },
+    content: {
+      alignItems: 'center',
+      borderRadius: isDragging && isInDragOverlay ? theme.spacing(0.5) : 0,
+      color: theme.palette.common.white,
+      display: 'flex',
+      minHeight: theme.spacing(3)
+    },
+    dragHandle: {
+      alignSelf: 'center',
+      cursor: isDragging ? 'grabbing' : 'grab',
+      display: 'flex',
+      outline: 'none'
+    },
+    simpleHeaderCellContent: {
+      alignItems: 'center',
+      display: 'inline-flex',
+      marginRight: theme.spacing(2)
+    },
+    tableCell: {
+      backgroundColor: isInDragOverlay
+        ? 'transparent'
+        : theme.palette.background.listingHeader,
+      borderBottom: 'none',
+      padding: 0,
+      ...getTextStyleByViewMode({ theme, viewMode })
+    }
+  })
+);
 
 type Props = Pick<
   ListingProps<unknown>,
@@ -23,11 +73,14 @@ type Props = Pick<
   areColumnsEditable: boolean;
   className: string;
   column: Column;
+  isDragging?: boolean;
+  isInDragOverlay?: boolean;
   itemRef: React.RefObject<HTMLDivElement>;
   style;
-} & StylesProps;
+  viewMode?: ListingVariant;
+};
 
-const ListingHeaderCell = ({
+const SortableHeaderCellContent = ({
   column,
   columnConfiguration,
   sortField,
@@ -38,14 +91,16 @@ const ListingHeaderCell = ({
   style,
   isInDragOverlay,
   areColumnsEditable,
-  listingVariant,
+  viewMode,
   ...props
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({
     isDragging,
     isInDragOverlay,
-    listingVariant
+    viewMode
   });
+  const [cellHovered, setCellHovered] = React.useState(false);
+
   const columnLabel = column.shortLabel || column.label;
 
   const columnSortField = column.sortField || column.id;
@@ -64,6 +119,14 @@ const ListingHeaderCell = ({
     });
   };
 
+  const mouseOver = (): void => {
+    setCellHovered(true);
+  };
+
+  const mouseOut = (): void => {
+    setCellHovered(false);
+  };
+
   const headerContent = (
     <Tooltip placement="top" title={getTooltipLabel(column.shortLabel)}>
       <HeaderLabel>{columnLabel}</HeaderLabel>
@@ -74,12 +137,22 @@ const ListingHeaderCell = ({
     <TableCell
       className={classes.tableCell}
       component={'div' as unknown as React.ElementType<TableCellBaseProps>}
-      data-isdragging={isDragging}
-      data-isindragoverlay={isInDragOverlay}
       ref={itemRef}
       style={style}
+      onMouseOut={mouseOut}
+      onMouseOver={mouseOver}
     >
       <div className={classes.content}>
+        {columnConfiguration?.sortable && areColumnsEditable && (
+          <DraggableIcon
+            visible={cellHovered}
+            {...props}
+            isInteractive
+            className={cx({ [classes.dragHandle]: cellHovered })}
+            columnLabel={columnLabel}
+          />
+        )}
+
         {column.sortable ? (
           <TableSortLabel
             active={sortField === columnSortField}
@@ -93,17 +166,9 @@ const ListingHeaderCell = ({
         ) : (
           <div className={classes.simpleHeaderCellContent}>{headerContent}</div>
         )}
-
-        {columnConfiguration?.sortable && areColumnsEditable && (
-          <DraggableIconButton
-            {...props}
-            className={cx(classes.dragHandle, 'dragHandle')}
-            columnLabel={columnLabel}
-          />
-        )}
       </div>
     </TableCell>
   );
 };
 
-export default ListingHeaderCell;
+export default SortableHeaderCellContent;