@centreon/ui 24.4.13 → 24.4.14

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,23 +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)'
-    },
-    fakeCaret: {
-      marginLeft: theme.spacing(3)
-    },
     root: {
       alignItems: 'center',
       backgroundColor: getBackgroundColor({
@@ -115,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'
     }
   })
@@ -129,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={{
@@ -193,31 +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>
-        ) : (
-          <div className={classes.fakeCaret} />
-        ))}
       {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;

package/src/Listing/Header/SortableCell/DraggableIcon.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import SvgIcon from '@mui/material/SvgIcon';
+
+import { labelDragHandle } from '../../translatedLabels';
+
+interface Icon {
+  className?: string;
+  columnLabel?: string;
+  isInteractive?: boolean;
+  visible?: boolean;
+}
+
+const DraggableIcon = ({
+  visible = false,
+  columnLabel,
+  className,
+  isInteractive = false,
+  ...rest
+}: Icon): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <SvgIcon
+      aria-label={`${columnLabel} ${t(labelDragHandle)}`}
+      fontSize="medium"
+      {...rest}
+      className={className}
+      role={isInteractive ? 'button' : undefined}
+      tabIndex={isInteractive ? 0 : undefined}
+    >
+      {visible && (
+        <path d="M 12 8 c 1.1 0 2 -0.9 2 -2 s -0.9 -2 -2 -2 s -2 0.9 -2 2 s 0.9 2 2 2 Z m 0 2 c -1.1 0 -2 0.9 -2 2 s 0.9 2 2 2 s 2 -0.9 2 -2 s -0.9 -2 -2 -2 Z m 0 6 c -1.1 0 -2 0.9 -2 2 s 0.9 2 2 2 s 2 -0.9 2 -2 s -0.9 -2 -2 -2 Z" />
+      )}
+    </SvgIcon>
+  );
+};
+
+export default DraggableIcon;

package/src/Listing/Header/{ListingHeader.tsx → index.tsx}

@@ -2,22 +2,67 @@ import * as React from 'react';
 
 import { closestCenter, DraggableSyntheticListeners } from '@dnd-kit/core';
 import { horizontalListSortingStrategy } from '@dnd-kit/sortable';
-import { equals, find, map, pick, propEq } from 'ramda';
+import { equals, find, isEmpty, map, not, pick, propEq } from 'ramda';
+import { makeStyles, withStyles } from 'tss-react/mui';
 
-import { TableHead, TableRow } from '@mui/material';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import {
+  TableCell,
+  TableCellBaseProps,
+  TableHead,
+  TableRow
+} from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
 import { getVisibleColumns, Props as ListingProps } from '..';
+import PopoverMenu from '../../PopoverMenu';
 import SortableItems from '../../SortableItems';
-import { Column } from '../models';
+import Checkbox from '../Checkbox';
+import { Column, PredefinedRowSelection } from '../models';
+import { labelPredefinedRowsSelectionMenu } from '../translatedLabels';
 
-import ListingHeaderCell from './Cell/ListingHeaderCell';
-import { useStyles } from './ListingHeader.styles';
-import {
-  SelectActionListingHeaderCell,
-  SelectActionListingHeaderCellProps
-} from './Cell/SelectActionListingHeaderCell';
+import PredefinedSelectionList from './PredefinedSelectionList';
+import SortableHeaderCellContent from './SortableCell/Content';
+
+const height = 28;
+
+const HeaderCell = withStyles(TableCell, (theme) => ({
+  root: {
+    padding: theme.spacing(0)
+  }
+}));
+
+const useStyles = makeStyles()((theme) => ({
+  checkbox: {
+    '&.Mui-checked': {
+      color: theme.palette.common.white
+    },
+    '&.MuiCheckbox-indeterminate': {
+      color: theme.palette.common.white
+    },
+    color: theme.palette.common.white
+  },
+  checkboxHeaderCell: {
+    alignItems: 'center',
+    backgroundColor: theme.palette.background.listingHeader,
+    borderBottom: 'none',
+    display: 'flex',
+    justifyContent: 'start',
+    minWidth: theme.spacing(51 / 8),
+    padding: 0
+  },
+  headerLabelDragging: {
+    cursor: 'grabbing'
+  },
+  predefinedRowsMenu: {
+    color: theme.palette.common.white,
+    width: theme.spacing(2)
+  },
+  row: {
+    display: 'contents'
+  }
+}));
 
 type Props = Pick<
   ListingProps<unknown>,
@@ -31,10 +76,14 @@ type Props = Pick<
   | 'totalRows'
 > & {
   areColumnsEditable: boolean;
-  listingVariant?: ListingVariant;
   memoProps: Array<unknown>;
+  onSelectAllClick: (event) => void;
+  onSelectRowsWithCondition: (condition) => void;
+  predefinedRowsSelection: Array<PredefinedRowSelection>;
   rowCount: number;
-} & SelectActionListingHeaderCellProps;
+  selectedRowCount: number;
+  viewMode?: ListingVariant;
+};
 
 interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
   attributes;
@@ -47,21 +96,21 @@ interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
 }
 
 const ListingHeader = ({
+  onSelectAllClick,
   sortOrder,
   sortField,
+  selectedRowCount,
   rowCount,
   columns,
   columnConfiguration,
   onSort,
   onSelectColumns,
   checkable,
+  predefinedRowsSelection,
+  onSelectRowsWithCondition,
   memoProps,
   areColumnsEditable,
-  listingVariant,
-  onSelectAllClick,
-  selectedRowCount,
-  predefinedRowsSelection,
-  onSelectRowsWithCondition
+  viewMode
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
 
@@ -71,7 +120,7 @@ const ListingHeader = ({
   });
 
   const getColumnById = (id: string): Column => {
-    return find(propEq(id, 'id'), columns) as Column;
+    return find(propEq('id', id), columns) as Column;
   };
 
   const Content = React.useCallback(
@@ -85,17 +134,17 @@ const ListingHeader = ({
       id
     }: ContentProps): JSX.Element => {
       return (
-        <ListingHeaderCell
+        <SortableHeaderCellContent
           areColumnsEditable={areColumnsEditable}
           column={getColumnById(id)}
           columnConfiguration={columnConfiguration}
           isDragging={isDragging}
           isInDragOverlay={isInDragOverlay}
           itemRef={itemRef}
-          listingVariant={listingVariant}
           sortField={sortField}
           sortOrder={sortOrder}
           style={style}
+          viewMode={viewMode}
           onSort={onSort}
           {...listeners}
           {...attributes}
@@ -105,17 +154,45 @@ const ListingHeader = ({
     [columnConfiguration, columns, sortField, sortOrder]
   );
 
+  const hasRows = not(equals(rowCount, 0));
+
   return (
     <TableHead className={cx(classes.row, 'listingHeader')} component="div">
       <TableRow className={classes.row} component="div">
         {checkable && (
-          <SelectActionListingHeaderCell
-            predefinedRowsSelection={predefinedRowsSelection}
-            rowCount={rowCount}
-            selectedRowCount={selectedRowCount}
-            onSelectAllClick={onSelectAllClick}
-            onSelectRowsWithCondition={onSelectRowsWithCondition}
-          />
+          <TableCell
+            className={classes.checkboxHeaderCell}
+            component={
+              'div' as unknown as React.ElementType<TableCellBaseProps>
+            }
+          >
+            <Checkbox
+              checked={hasRows && selectedRowCount === rowCount}
+              className={classes.checkbox}
+              indeterminate={
+                hasRows && selectedRowCount > 0 && selectedRowCount < rowCount
+              }
+              inputProps={{ 'aria-label': 'Select all' }}
+              onChange={onSelectAllClick}
+            />
+            {not(isEmpty(predefinedRowsSelection)) ? (
+              <PopoverMenu
+                className={classes.predefinedRowsMenu}
+                icon={<ArrowDropDownIcon />}
+                title={labelPredefinedRowsSelectionMenu}
+              >
+                {({ close }): JSX.Element => (
+                  <PredefinedSelectionList
+                    close={close}
+                    predefinedRowsSelection={predefinedRowsSelection}
+                    onSelectRowsWithCondition={onSelectRowsWithCondition}
+                  />
+                )}
+              </PopoverMenu>
+            ) : (
+              <div className={classes.predefinedRowsMenu} />
+            )}
+          </TableCell>
         )}
         <SortableItems
           updateSortableItemsOnItemsChange
@@ -140,7 +217,6 @@ const columnMemoProps = [
   'label',
   'rowMemoProps',
   'sortField',
-  'sortOrder',
   'sortable',
   'type'
 ];
@@ -160,7 +236,8 @@ const MemoizedListingHeader = React.memo<Props>(
     equals(prevProps.columnConfiguration, nextProps.columnConfiguration) &&
     equals(prevProps.memoProps, nextProps.memoProps) &&
     equals(prevProps.areColumnsEditable, nextProps.areColumnsEditable) &&
-    equals(prevProps.listingVariant, nextProps.listingVariant)
+    equals(prevProps.viewMode, nextProps.viewMode)
 );
 
-export { MemoizedListingHeader as ListingHeader };
+export default MemoizedListingHeader;
+export { height as headerHeight, HeaderCell };

package/src/Listing/{Row/Row.tsx → Row.tsx}

@@ -9,10 +9,12 @@ import { TableRowProps, TableRow, useTheme } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
-import { useViewportIntersection } from '../../utils/useViewportIntersection';
-import LoadingSkeleton from '../../LoadingSkeleton';
-import { Column, ColumnConfiguration, RowColorCondition } from '../models';
-import { performanceRowsLimit } from '../index';
+import { useViewportIntersection } from '../utils/useViewportIntersection';
+import LoadingSkeleton from '../LoadingSkeleton';
+
+import { Column, ColumnConfiguration, RowColorCondition } from './models';
+
+import { performanceRowsLimit } from '.';
 
 const useStyles = makeStyles()((theme) => {
   return {
@@ -46,11 +48,10 @@ type Props = {
   isShiftKeyDown: boolean;
   lastSelectionIndex: number | null;
   limit: number;
-  listingVariant?: ListingVariant;
   row;
   rowColorConditions: Array<RowColorCondition>;
   shiftKeyDownRowPivot: number | null;
-  subItemsPivots: Array<number | string>;
+  viewMode?: ListingVariant;
   visibleColumns: Array<Column>;
 } & TableRowProps;
 
@@ -116,7 +117,7 @@ const Row = memo<RowProps>(
       isShiftKeyDown: prevIsShiftKeyDown,
       shiftKeyDownRowPivot: prevShiftKeyDownRowPivot,
       lastSelectionIndex: prevLastSelectionIndex,
-      listingVariant: prevViewMode
+      viewMode: prevViewMode
     } = prevProps;
     const {
       row: nextRow,
@@ -127,7 +128,7 @@ const Row = memo<RowProps>(
       shiftKeyDownRowPivot: nextShiftKeyDownRowPivot,
       lastSelectionIndex: nextLastSelectionIndex,
       limit: nextLimit,
-      listingVariant: nextViewMode
+      viewMode: nextViewMode
     } = nextProps;
 
     if (
@@ -175,8 +176,7 @@ const Row = memo<RowProps>(
         equals(prevProps.row, nextProps.row) &&
         equals(previousRowConditions, nextRowConditions) &&
         equals(previousRowColors, nextRowColors) &&
-        equals(prevProps.className, nextProps.className) &&
-        equals(prevProps.subItemsPivots, nextProps.subItemsPivots)
+        equals(prevProps.className, nextProps.className)
       );
     }
 
@@ -191,8 +191,7 @@ const Row = memo<RowProps>(
       equals(prevIsShiftKeyDown, nextIsShiftKeyDown) &&
       equals(prevShiftKeyDownRowPivot, nextShiftKeyDownRowPivot) &&
       equals(prevLastSelectionIndex, nextLastSelectionIndex) &&
-      equals(prevViewMode, nextViewMode) &&
-      equals(prevProps.subItemsPivots, nextProps.subItemsPivots)
+      equals(prevViewMode, nextViewMode)
     );
   }
 );

package/src/Listing/Skeleton.tsx

@@ -0,0 +1,11 @@
+import LoadingSkeleton from '../LoadingSkeleton';
+
+const ListingLoadingSkeleton = (): JSX.Element => (
+  <>
+    {['skeleton1', 'skeleton2', 'skeleton3'].map((key) => (
+      <LoadingSkeleton height={20} key={key} variant="text" width="100%" />
+    ))}
+  </>
+);
+
+export default ListingLoadingSkeleton;