@centreon/ui 24.11.14 → 24.11.21

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

@@ -0,0 +1,33 @@
+import { useTranslation } from 'react-i18next';
+
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import { IconButton as MuiIconButton, SvgIcon } from '@mui/material';
+
+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/{Label.tsx → _internals/Label.tsx}

@@ -1,8 +1,7 @@
-import * as React from 'react';
-
 import { makeStyles } from 'tss-react/mui';
 
 import { Typography, TypographyProps } from '@mui/material';
+import { ReactNode } from 'react';
 
 const useStyles = makeStyles()(() => ({
   root: {
@@ -11,7 +10,7 @@ const useStyles = makeStyles()(() => ({
 }));
 
 interface Props {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 const HeaderLabel = ({

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();
+  });
+});

package/src/Listing/Listing.styles.ts

@@ -0,0 +1,78 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { TableStyleAtom as TableStyle } from './models';
+
+const loadingIndicatorHeight = 3;
+
+interface StylesProps {
+  dataStyle: TableStyle;
+  getGridTemplateColumn: string;
+  isResponsive: string;
+  rows: Array<unknown>;
+}
+
+const useListingStyles = makeStyles<StylesProps>()(
+  (theme, { dataStyle, getGridTemplateColumn, rows, isResponsive }) => ({
+    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
+      }, ${isResponsive ? 'auto' : `${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}

@@ -1,20 +1,18 @@
 /* eslint-disable react/no-unused-prop-types */
 
-import { memo, useRef, useEffect } from 'react';
+import { memo, useEffect, useRef } from 'react';
 
 import { equals, gte, lt, not, pluck } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { TableRowProps, TableRow, useTheme } from '@mui/material';
+import { TableRow, TableRowProps, 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 LoadingSkeleton from '../../LoadingSkeleton';
+import { useViewportIntersection } from '../../utils/useViewportIntersection';
+import { performanceRowsLimit } from '../index';
+import { Column, ColumnConfiguration, RowColorCondition } from '../models';
 
 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;
 
@@ -98,7 +97,6 @@ const Row = memo<RowProps>(
       <TableRow
         className={classes.row}
         component="div"
-        role={undefined}
         tabIndex={tabIndex}
         onClick={onClick}
         onFocus={onFocus}
@@ -117,7 +115,7 @@ const Row = memo<RowProps>(
       isShiftKeyDown: prevIsShiftKeyDown,
       shiftKeyDownRowPivot: prevShiftKeyDownRowPivot,
       lastSelectionIndex: prevLastSelectionIndex,
-      viewMode: prevViewMode
+      listingVariant: prevViewMode
     } = prevProps;
     const {
       row: nextRow,
@@ -128,7 +126,7 @@ const Row = memo<RowProps>(
       shiftKeyDownRowPivot: nextShiftKeyDownRowPivot,
       lastSelectionIndex: nextLastSelectionIndex,
       limit: nextLimit,
-      viewMode: nextViewMode
+      listingVariant: nextViewMode
     } = nextProps;
 
     if (
@@ -176,7 +174,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,12 +190,13 @@ const Row = memo<RowProps>(
       equals(prevIsShiftKeyDown, nextIsShiftKeyDown) &&
       equals(prevShiftKeyDownRowPivot, nextShiftKeyDownRowPivot) &&
       equals(prevLastSelectionIndex, nextLastSelectionIndex) &&
-      equals(prevViewMode, nextViewMode)
+      equals(prevViewMode, nextViewMode) &&
+      equals(prevProps.subItemsPivots, nextProps.subItemsPivots)
     );
   }
 );
 
-const IntersectionRow = (props: Props): JSX.Element => {
+const IntersectionRow = ({ isHovered, ...rest }: Props): JSX.Element => {
   const rowRef = useRef<HTMLDivElement | null>(null);
   const theme = useTheme();
   const { isInViewport, setElement } = useViewportIntersection({
@@ -213,8 +213,12 @@ const IntersectionRow = (props: Props): JSX.Element => {
   }, [getFirstCellElement()]);
 
   return (
-    <div className={classes.intersectionRow} ref={rowRef}>
-      <Row {...props} isInViewport={isInViewport} />
+    <div
+      className={classes.intersectionRow}
+      data-isHovered={isHovered}
+      ref={rowRef}
+    >
+      <Row {...rest} isHovered={isHovered} isInViewport={isInViewport} />
     </div>
   );
 };

package/src/Listing/Row/SkeletonLoaderRows.tsx

@@ -0,0 +1,21 @@
+import LoadingSkeleton from '../../LoadingSkeleton';
+
+import { EmptyRow } from './EmptyRow';
+
+interface SkeletonLoaderProps {
+  rows?: number;
+}
+
+const SkeletonLoader = ({ rows = 10 }: SkeletonLoaderProps): JSX.Element => (
+  <>
+    {[...Array(rows)]
+      .map((_, i) => i)
+      .map((v) => (
+        <EmptyRow key={`skeleton-row-${v}`}>
+          <LoadingSkeleton variant="text" width="100%" />
+        </EmptyRow>
+      ))}
+  </>
+);
+
+export { SkeletonLoader };