@centreon/ui 24.4.21 → 24.4.22

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,122 @@
+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: (
+      <div style={{ height: '100vh' }}>
+        <Listing
+          checkable
+          columns={columnsWithSubItems}
+          currentPage={1}
+          limit={10}
+          rows={listingWithSubItems}
+          subItems={{
+            canCheckSubItems: false,
+            enable: true,
+            getRowProperty: () => 'subItems',
+            labelCollapse: 'Collapse',
+            labelExpand: 'Expand'
+          }}
+          totalRows={10}
+        />
+      </div>
+    )
+  });
+};
+
+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,80 @@
+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;
+  listingVariant: ListingVariant;
+  rows: Array<unknown>;
+}
+
+const useListingStyles = makeStyles<StylesProps>()(
+  (theme, { dataStyle, getGridTemplateColumn, rows }) => ({
+    actionBar: {
+      alignItems: 'center',
+      display: 'flex'
+    },
+    checkbox: {
+      justifyContent: 'start'
+    },
+    container: {
+      background: 'none',
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      width: '100%'
+    },
+    listingContainer: {
+      height: '100%',
+      overflow: 'hidden',
+      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 || 1
+      }, ${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 };