@centreon/ui 23.10.69 → 23.10.71

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();
 
@@ -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,120 @@
+import { Button } from '@mui/material';
+
+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 generateSubItems = (parentIndex: number): Array<unknown> => {
+  return tenElements.map((__, subIndex) => ({
+    active: false,
+    description: `Sub item ${subIndex + (parentIndex + 10) * 10} description`,
+    disableCheckbox: false,
+    disableRow: false,
+    id: subIndex + (parentIndex + 10) * 10,
+    name: `Sub Item ${subIndex + (parentIndex + 10) * 10}`,
+    selected: false
+  }));
+};
+
+const tenElements = new Array(10).fill(0);
+
+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(index) : undefined
+}));
+
+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 mountListing = (): void => {
+  cy.viewport('macbook-13');
+
+  cy.mount({
+    Component: (
+      <Listing
+        checkable
+        columns={columnsWithSubItems}
+        currentPage={1}
+        limit={10}
+        rows={listingWithSubItems}
+        subItems={{
+          canCheckSubItems: false,
+          enable: true,
+          labelCollapse: 'Collapse',
+          labelExpand: 'Expand',
+          rowProperty: 'subItems'
+        }}
+        totalRows={10}
+      />
+    )
+  });
+};
+
+describe('Listing', () => {
+  beforeEach(mountListing);
+
+  it('expands the row when the corresponding icon si clicked', () => {
+    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.makeSnapshot();
+  });
+
+  it('collapses the row when the corresponding icon si clicked', () => {
+    cy.contains('Sub item 100').should('be.visible');
+
+    cy.findByLabelText('Collapse 0').click();
+
+    cy.contains('Sub item 100').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Listing/Listing.styles.ts

@@ -0,0 +1,76 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { ListingVariant } from '@centreon/ui-context';
+
+import { TableStyleAtom as TableStyle } from './models';
+
+const loadingIndicatorHeight = 3;
+
+interface StylesProps {
+  dataStyle: TableStyle;
+  getGridTemplateColumn: string;
+  limit: number;
+  listingVariant: ListingVariant;
+  rows: Array<unknown>;
+}
+
+const useListingStyles = makeStyles<StylesProps>()(
+  (theme, { dataStyle, getGridTemplateColumn, rows, limit }) => ({
+    actionBar: {
+      alignItems: 'center',
+      display: 'flex'
+    },
+    checkbox: {
+      justifyContent: 'start'
+    },
+    container: {
+      background: 'none',
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      width: '100%'
+    },
+    loadingIndicator: {
+      height: loadingIndicatorHeight,
+      width: '100%'
+    },
+    table: {
+      '.listingHeader': {
+        backgroundColor: theme.palette.background.listingHeader,
+        padding: theme.spacing(0, 1)
+      },
+      '.listingHeader > div > div': {
+        backgroundColor: theme.palette.background.listingHeader,
+        height: theme.spacing(dataStyle.header.height / 8)
+      },
+      '.listingHeader > div > div:first-of-type': {
+        height: '100%',
+        padding: theme.spacing(0, 0.5, 0, 1.5)
+      },
+      alignItems: 'center',
+      display: 'grid',
+      gridTemplateColumns: getGridTemplateColumn,
+      gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
+        rows?.length || limit
+      }, ${dataStyle.body.height}px)`,
+      position: 'relative'
+    },
+    tableBody: {
+      '.MuiTableRow-root > div:first-of-type': {
+        paddingLeft: theme.spacing(1.5)
+      },
+
+      display: 'contents',
+      'div:first-of-type': {
+        gridColumnStart: 1
+      },
+      position: 'relative'
+    },
+    tableWrapper: {
+      borderBottom: 'none',
+      overflow: 'auto'
+    }
+  })
+);
+
+export { useListingStyles, loadingIndicatorHeight };

package/src/Listing/ListingDocs.mdx

@@ -0,0 +1,61 @@
+{/* ListingDocs.mdx */}
+
+import { Meta, Story } from '@storybook/blocks';
+import * as ListingStories from './index.stories';
+
+<Meta of={ListingStories} />
+
+# Listing
+
+## Expand/collapse rows
+
+The listing supports rows expanding and collapsing.
+
+In order to use this feature, please follow the instructions:
+- (pre-requisite): Your data should have a child property that contains sub-items.
+```javascript
+[
+  {
+    "id": 1,
+    "festival": "Test",
+    "name": "Tom",
+    "counter": 3,
+    "description": "My description of Tom"
+  },
+  {
+    "id": 2,
+    "name": "Jane's group",
+    "festival": "fest",
+    "counter": 5,
+    "description": "My description of Jane's group",
+    "subItems": [
+      {
+        "id": 3,
+        "name": "Jane",
+        "counter": 0,
+        "description": "My description of Jane"
+      },
+    ]
+  }
+]
+```
+- Use the `subItems` property to configure how the component will handle your sub-items
+```javascript
+subItems={{
+  canCheckSubItems: false, // Display checkbox on sub items. Default: false
+  enable: true, // It enables or disable the row expand/collapse feature. Default: false
+  rowProperty: 'subItems' // Which property should be used to detect sub-items. Default: ''
+  labelExpand: 'Expand',
+  labelCollapse: 'Collapse'
+}}
+```
+- Finally, update the column configuration in order to display the expand/collapse caret
+```javascript
+{
+  Component: ButtonColumn,
+  displaySubItemsCaret: true, // Add this property
+  id: '#',
+  label: 'Custom',
+  type: ColumnType.component
+}
+```

package/src/Listing/Row/EmptyRow.styles.ts

@@ -0,0 +1,14 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()(() => ({
+  emptyDataCell: {
+    flexDirection: 'column',
+    gridColumn: 'auto / -1',
+    justifyContent: 'center'
+  },
+  emptyDataRow: {
+    display: 'contents'
+  }
+}));
+
+export { useStyles };

package/src/Listing/Row/EmptyRow.tsx

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+
+import { TableRow } from '@mui/material';
+
+import Cell from '../Cell';
+
+import { useStyles } from './EmptyRow.styles';
+
+interface EmptyRowProps {
+  children: ReactNode;
+}
+
+const EmptyRow = ({ children }: EmptyRowProps): JSX.Element => {
+  const { classes } = useStyles();
+
+  return (
+    <TableRow className={classes.emptyDataRow} component="div" tabIndex={-1}>
+      <Cell
+        align="center"
+        className={classes.emptyDataCell}
+        disableRowCondition={(): boolean => false}
+        isRowHovered={false}
+      >
+        {children}
+      </Cell>
+    </TableRow>
+  );
+};
+
+export { EmptyRow };

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

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

package/src/Listing/Row/SkeletonLoaderRows.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import LoadingSkeleton from '../../LoadingSkeleton';
+
+import { EmptyRow } from './EmptyRow';
+
+interface SkeletonLoaderProps {
+  rows?: number;
+}
+
+const SkeletonLoader = ({ rows = 10 }: SkeletonLoaderProps): JSX.Element => (
+  <>
+    {[...Array(rows)].map((_v, i) => (
+      <EmptyRow
+        key={`skeleton-row-${i}`} // eslint-disable-line react/no-array-index-key
+      >
+        <LoadingSkeleton variant="text" width="100%" />
+      </EmptyRow>
+    ))}
+  </>
+);
+
+export { SkeletonLoader };