@centreon/ui 24.5.12 → 24.5.13

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.styles.ts

@@ -0,0 +1,26 @@
+import { makeStyles } from 'tss-react/mui';
+
+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',
+    lineHeight: 'inherit'
+  },
+  predefinedRowsMenu: {
+    color: theme.palette.common.white
+  }
+}));
+
+export { useStyles };

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { equals, isEmpty, not } from 'ramda';
+
+import { TableCell, TableCellBaseProps } from '@mui/material';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+
+import Checkbox from '../../Checkbox';
+import PopoverMenu from '../../../PopoverMenu';
+import { labelPredefinedRowsSelectionMenu } from '../../translatedLabels';
+import PredefinedSelectionList from '../_internals/PredefinedSelectionList';
+import { PredefinedRowSelection } from '../../models';
+
+import { useStyles } from './SelectActionListingHeaderCell.styles';
+
+export interface SelectActionListingHeaderCellProps {
+  onSelectAllClick: (event) => void;
+  onSelectRowsWithCondition: (condition) => void;
+  predefinedRowsSelection: Array<PredefinedRowSelection>;
+  rowCount: number;
+  selectedRowCount: number;
+}
+
+const SelectActionListingHeaderCell = ({
+  rowCount,
+  onSelectAllClick,
+  selectedRowCount,
+  predefinedRowsSelection,
+  onSelectRowsWithCondition
+}: SelectActionListingHeaderCellProps): JSX.Element => {
+  const { classes } = useStyles();
+
+  const hasRows = not(equals(rowCount, 0));
+
+  return (
+    <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>
+  );
+};
+
+export { SelectActionListingHeaderCell };

package/src/Listing/Header/ListingHeader.styles.ts

@@ -0,0 +1,16 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  headerLabelDragging: {
+    cursor: 'grabbing'
+  },
+  root: {
+    height: '100%',
+    padding: theme.spacing(0, 1)
+  },
+  row: {
+    display: 'contents'
+  }
+}));
+
+export { useStyles };

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

@@ -2,67 +2,22 @@ import * as React from 'react';
 
 import { closestCenter, DraggableSyntheticListeners } from '@dnd-kit/core';
 import { horizontalListSortingStrategy } from '@dnd-kit/sortable';
-import { equals, find, isEmpty, map, not, pick, propEq } from 'ramda';
-import { makeStyles, withStyles } from 'tss-react/mui';
+import { equals, find, map, pick, propEq } from 'ramda';
 
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import {
-  TableCell,
-  TableCellBaseProps,
-  TableHead,
-  TableRow
-} from '@mui/material';
+import { 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 Checkbox from '../Checkbox';
-import { Column, PredefinedRowSelection } from '../models';
-import { labelPredefinedRowsSelectionMenu } from '../translatedLabels';
-
-import PredefinedSelectionList from './PredefinedSelectionList';
-import SortableHeaderCellContent from './SortableCell/Content';
-
-const height = 28;
-
-const HeaderCell = withStyles(TableCell, (theme) => ({
-  root: {
-    padding: theme.spacing(0)
-  }
-}));
+import { Column } from '../models';
 
-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'
-  }
-}));
+import ListingHeaderCell from './Cell/ListingHeaderCell';
+import { useStyles } from './ListingHeader.styles';
+import {
+  SelectActionListingHeaderCell,
+  SelectActionListingHeaderCellProps
+} from './Cell/SelectActionListingHeaderCell';
 
 type Props = Pick<
   ListingProps<unknown>,
@@ -76,14 +31,10 @@ type Props = Pick<
   | 'totalRows'
 > & {
   areColumnsEditable: boolean;
+  listingVariant?: ListingVariant;
   memoProps: Array<unknown>;
-  onSelectAllClick: (event) => void;
-  onSelectRowsWithCondition: (condition) => void;
-  predefinedRowsSelection: Array<PredefinedRowSelection>;
   rowCount: number;
-  selectedRowCount: number;
-  viewMode?: ListingVariant;
-};
+} & SelectActionListingHeaderCellProps;
 
 interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
   attributes;
@@ -96,21 +47,21 @@ interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
 }
 
 const ListingHeader = ({
-  onSelectAllClick,
   sortOrder,
   sortField,
-  selectedRowCount,
   rowCount,
   columns,
   columnConfiguration,
   onSort,
   onSelectColumns,
   checkable,
-  predefinedRowsSelection,
-  onSelectRowsWithCondition,
   memoProps,
   areColumnsEditable,
-  viewMode
+  listingVariant,
+  onSelectAllClick,
+  selectedRowCount,
+  predefinedRowsSelection,
+  onSelectRowsWithCondition
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
 
@@ -120,7 +71,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(
@@ -134,17 +85,17 @@ const ListingHeader = ({
       id
     }: ContentProps): JSX.Element => {
       return (
-        <SortableHeaderCellContent
+        <ListingHeaderCell
           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}
@@ -154,45 +105,17 @@ 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 && (
-          <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>
+          <SelectActionListingHeaderCell
+            predefinedRowsSelection={predefinedRowsSelection}
+            rowCount={rowCount}
+            selectedRowCount={selectedRowCount}
+            onSelectAllClick={onSelectAllClick}
+            onSelectRowsWithCondition={onSelectRowsWithCondition}
+          />
         )}
         <SortableItems
           updateSortableItemsOnItemsChange
@@ -217,6 +140,7 @@ const columnMemoProps = [
   'label',
   'rowMemoProps',
   'sortField',
+  'sortOrder',
   'sortable',
   'type'
 ];
@@ -236,8 +160,7 @@ const MemoizedListingHeader = React.memo<Props>(
     equals(prevProps.columnConfiguration, nextProps.columnConfiguration) &&
     equals(prevProps.memoProps, nextProps.memoProps) &&
     equals(prevProps.areColumnsEditable, nextProps.areColumnsEditable) &&
-    equals(prevProps.viewMode, nextProps.viewMode)
+    equals(prevProps.listingVariant, nextProps.listingVariant)
 );
 
-export default MemoizedListingHeader;
-export { height as headerHeight, HeaderCell };
+export { MemoizedListingHeader as ListingHeader };

package/src/Listing/Header/_internals/DraggableIconButton.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { SvgIcon, IconButton as MuiIconButton } from '@mui/material';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+
+import { labelDragHandle } from '../../translatedLabels';
+
+interface DraggableIconButtonProps {
+  className?: string;
+  columnLabel?: string;
+}
+
+const DraggableIconButton = ({
+  columnLabel,
+  className,
+  ...props
+}: DraggableIconButtonProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <MuiIconButton
+      className={className}
+      {...props}
+      aria-label={`${columnLabel} ${t(labelDragHandle)}`}
+    >
+      <SvgIcon fontSize="small">
+        <DragIndicatorIcon />
+      </SvgIcon>
+    </MuiIconButton>
+  );
+};
+
+export { DraggableIconButton };

package/src/Listing/Header/{PredefinedSelectionList.tsx → _internals/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/index.ts

@@ -0,0 +1 @@
+export * from './ListingHeader';

package/src/Listing/Listing.cypress.spec.tsx

@@ -0,0 +1,307 @@
+import { useState } from 'react';
+
+import { Button, Typography } from '@mui/material';
+
+import { ListingVariant } from '@centreon/ui-context';
+
+import { ColumnType } from './models';
+
+import Listing from '.';
+
+interface Props {
+  row: { name: string };
+}
+
+const ButtonColumn = ({ row }: Props): JSX.Element => (
+  <Button size="small">Click to reveal details about {row.name}</Button>
+);
+
+const LargeText = (): JSX.Element => (
+  <Typography sx={{ whiteSpace: 'normal' }}>
+    This is a large text that fills the content
+  </Typography>
+);
+
+const tenElements = new Array(10).fill(0);
+
+const generateSubItems = (): Array<unknown> => {
+  return tenElements.map((__, subIndex) => ({
+    active: false,
+    description: `Sub item ${subIndex * 10} description`,
+    disableCheckbox: false,
+    disableRow: false,
+    id: subIndex * 10,
+    name: `Sub Item ${subIndex * 10}`,
+    selected: false
+  }));
+};
+
+const listingWithSubItems = tenElements.map((_, index) => ({
+  active: false,
+  description: `Entity ${index}`,
+  disableCheckbox: false,
+  disableRow: false,
+  id: index,
+  name: `E${index}`,
+  selected: false,
+  subItems: index % 2 === 0 ? generateSubItems() : undefined
+}));
+
+const listingWithSubItems3Rows = Array(3)
+  .fill(0)
+  .map((_, index) => ({
+    active: false,
+    description: `Entity ${index}`,
+    disableCheckbox: false,
+    disableRow: false,
+    id: index,
+    name: `E${index}`,
+    selected: false,
+    subItems: index % 2 === 0 ? generateSubItems() : undefined
+  }));
+
+const defaultColumn = [
+  {
+    getFormattedString: ({ name }): string => name,
+    id: 'name',
+    label: 'Name',
+    type: ColumnType.string
+  },
+  {
+    getFormattedString: ({ description }): string => description,
+    id: 'description',
+    label: 'Description',
+    type: ColumnType.string
+  },
+  {
+    Component: LargeText,
+    id: '#',
+    label: 'Custom',
+    type: ColumnType.component,
+    width: '100px'
+  }
+];
+
+const columnsWithSubItems = [
+  {
+    getFormattedString: ({ name }): string => name,
+    id: 'name',
+    label: 'Name',
+    type: ColumnType.string
+  },
+  {
+    getFormattedString: ({ description }): string => description,
+    id: 'description',
+    label: 'Description',
+    type: ColumnType.string
+  },
+  {
+    Component: ButtonColumn,
+    displaySubItemsCaret: true,
+    id: '#',
+    label: 'Custom',
+    type: ColumnType.component,
+    width: '350px'
+  }
+];
+
+const expandedItems = [0, 8];
+
+const mountListingResponsive = (listingVariant: ListingVariant): void => {
+  cy.viewport('macbook-13');
+
+  cy.mount({
+    Component: (
+      <div style={{ height: '100vh' }}>
+        <Listing
+          isResponsive
+          columns={defaultColumn}
+          currentPage={1}
+          limit={10}
+          listingVariant={listingVariant}
+          rows={listingWithSubItems}
+          totalRows={10}
+        />
+      </div>
+    )
+  });
+};
+
+interface TestComponentProps {
+  canCheckSubItems?: boolean;
+  isSmallListing?: boolean;
+}
+
+const TestComponent = ({
+  isSmallListing = false,
+  canCheckSubItems = false
+}: TestComponentProps): JSX.Element => {
+  const [selectedRows, setSelectedRows] = useState([]);
+
+  return (
+    <Listing
+      checkable
+      columns={columnsWithSubItems}
+      currentPage={1}
+      limit={10}
+      rows={isSmallListing ? listingWithSubItems3Rows : listingWithSubItems}
+      selectedRows={selectedRows}
+      subItems={{
+        canCheckSubItems,
+        enable: true,
+        getRowProperty: () => 'subItems',
+        labelCollapse: 'Collapse',
+        labelExpand: 'Expand'
+      }}
+      totalRows={10}
+      onSelectRows={setSelectedRows}
+    />
+  );
+};
+
+const mountListingForSubItems = ({
+  isSmallListing = false,
+  canCheckSubItems = false
+}: TestComponentProps): void => {
+  cy.viewport('macbook-13');
+
+  cy.mount({
+    Component: (
+      <div style={{ height: '100vh' }}>
+        <TestComponent
+          canCheckSubItems={canCheckSubItems}
+          isSmallListing={isSmallListing}
+        />
+      </div>
+    )
+  });
+};
+
+describe('Listing', () => {
+  describe('Sub items', () => {
+    it('expands the row when the corresponding icon is clicked', () => {
+      mountListingForSubItems({});
+
+      cy.contains('E0').should('be.visible');
+
+      expandedItems.forEach((index) => {
+        const subItems = generateSubItems(index);
+
+        cy.findByLabelText(`Expand ${index}`).click();
+
+        cy.findByLabelText(`Collapse ${index}`).should('exist');
+
+        subItems.forEach(({ name, description }) => {
+          cy.contains(name).should('exist');
+          cy.contains(description).should('exist');
+        });
+
+        cy.findByLabelText(`Collapse ${index}`).click();
+      });
+
+      cy.makeSnapshot();
+    });
+
+    it('collapses the row when the corresponding icon is clicked', () => {
+      mountListingForSubItems({});
+
+      cy.findByLabelText(`Expand 0`).click();
+
+      cy.contains('Sub item 10').should('be.visible');
+
+      cy.findByLabelText('Collapse 0').click();
+
+      cy.contains('Sub item 10').should('not.exist');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays only one row as hovered when mutilple rows are expanded and a sub item row is hovered', () => {
+      mountListingForSubItems({ isSmallListing: true });
+
+      cy.findByLabelText('Expand 2').click();
+      cy.findByLabelText('Expand 0').click();
+
+      cy.findByLabelText('Collapse 0').should('be.visible');
+      cy.findByLabelText('Collapse 2').should('be.visible');
+
+      cy.contains('Sub Item 0').realHover();
+
+      cy.get('[data-isHovered="true"]').should('have.length', 1);
+      cy.get('[data-isHovered="true"]').contains('Sub Item 0').should('exist');
+
+      cy.findByLabelText('Collapse 0').click();
+      cy.findByLabelText('Collapse 2').click();
+    });
+
+    it('selects displayed rows when a row is selected and another row is selected with the shift key', () => {
+      mountListingForSubItems({ canCheckSubItems: true, isSmallListing: true });
+
+      cy.findByLabelText('Expand 0').click();
+
+      cy.findByLabelText('Collapse 0').should('be.visible');
+
+      cy.findAllByLabelText('Select row 0').eq(0).click();
+      cy.get('body').type('{shift}', { release: false });
+      cy.findByLabelText('Select row 50').eq(0).click();
+
+      cy.findAllByLabelText('Select row 0').eq(0).should('be.checked');
+      cy.findAllByLabelText('Select row 0').eq(1).should('be.checked');
+      cy.findByLabelText('Select row 10').should('be.checked');
+      cy.findByLabelText('Select row 20').should('be.checked');
+      cy.findByLabelText('Select row 30').should('be.checked');
+      cy.findByLabelText('Select row 40').should('be.checked');
+      cy.findByLabelText('Select row 50').should('be.checked');
+
+      cy.findByLabelText('Collapse 0').click();
+    });
+
+    it('selects displayed rows when the corresponding checkbox is clicked', () => {
+      mountListingForSubItems({ canCheckSubItems: true, isSmallListing: true });
+
+      cy.findByLabelText('Expand 0').click();
+
+      cy.findByLabelText('Collapse 0').should('be.visible');
+
+      cy.findAllByLabelText('Select all').eq(0).click();
+
+      cy.findAllByLabelText('Select row 0').eq(0).should('be.checked');
+      tenElements.forEach((_, index) => {
+        if (index === 0) {
+          cy.findAllByLabelText('Select row 0').eq(1).should('be.checked');
+
+          return;
+        }
+        cy.findByLabelText(`Select row ${index * 10}`).should('be.checked');
+      });
+      cy.findByLabelText('Select row 1').should('be.checked');
+      cy.findByLabelText('Select row 2').should('be.checked');
+
+      cy.findByLabelText('Collapse 0').click();
+    });
+  });
+
+  it('displays the last column on several lines in compact mode when the isResponsive prop is set', () => {
+    mountListingResponsive(ListingVariant.compact);
+
+    cy.get('.MuiTable-root').should(
+      'have.css',
+      'grid-template-rows',
+      '30px 85px 85px 85px 85px 85px 85px 85px 85px 85px 85px'
+    );
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the last column on several lines in extended mode when the isResponsive prop is set', () => {
+    mountListingResponsive(ListingVariant.extended);
+
+    cy.get('.MuiTable-root').should(
+      'have.css',
+      'grid-template-rows',
+      '38px 85px 85px 85px 85px 85px 85px 85px 85px 85px 85px'
+    );
+
+    cy.makeSnapshot();
+  });
+});