@centreon/ui 23.10.122 → 24.4.1-0

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

@@ -1,4 +1,8 @@
-import { Button } from '@mui/material';
+import { useState } from 'react';
+
+import { Button, Typography } from '@mui/material';
+
+import { ListingVariant } from '@centreon/ui-context';
 
 import { ColumnType } from './models';
 
@@ -12,20 +16,26 @@ const ButtonColumn = ({ row }: Props): JSX.Element => (
   <Button size="small">Click to reveal details about {row.name}</Button>
 );
 
-const generateSubItems = (parentIndex: number): Array<unknown> => {
+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 + (parentIndex + 10) * 10} description`,
+    description: `Sub item ${subIndex * 10} description`,
     disableCheckbox: false,
     disableRow: false,
-    id: subIndex + (parentIndex + 10) * 10,
-    name: `Sub Item ${subIndex + (parentIndex + 10) * 10}`,
+    id: subIndex * 10,
+    name: `Sub Item ${subIndex * 10}`,
     selected: false
   }));
 };
 
-const tenElements = new Array(10).fill(0);
-
 const listingWithSubItems = tenElements.map((_, index) => ({
   active: false,
   description: `Entity ${index}`,
@@ -34,9 +44,44 @@ const listingWithSubItems = tenElements.map((_, index) => ({
   id: index,
   name: `E${index}`,
   selected: false,
-  subItems: index % 2 === 0 ? generateSubItems(index) : undefined
+  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,
@@ -62,25 +107,19 @@ const columnsWithSubItems = [
 
 const expandedItems = [0, 8];
 
-const mountListing = (): void => {
+const mountListingResponsive = (listingVariant: ListingVariant): void => {
   cy.viewport('macbook-13');
 
   cy.mount({
     Component: (
       <div style={{ height: '100vh' }}>
         <Listing
-          checkable
-          columns={columnsWithSubItems}
+          isResponsive
+          columns={defaultColumn}
           currentPage={1}
           limit={10}
+          listingVariant={listingVariant}
           rows={listingWithSubItems}
-          subItems={{
-            canCheckSubItems: false,
-            enable: true,
-            labelCollapse: 'Collapse',
-            labelExpand: 'Expand',
-            rowProperty: 'subItems'
-          }}
           totalRows={10}
         />
       </div>
@@ -88,34 +127,180 @@ const mountListing = (): void => {
   });
 };
 
+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', () => {
-  beforeEach(mountListing);
+  describe('Sub items', () => {
+    it('expands the row when the corresponding icon is clicked', () => {
+      mountListingForSubItems({});
 
-  it('expands the row when the corresponding icon si clicked', () => {
-    cy.contains('E0').should('be.visible');
+      cy.contains('E0').should('be.visible');
 
-    expandedItems.forEach((index) => {
-      const subItems = generateSubItems(index);
+      expandedItems.forEach((index) => {
+        const subItems = generateSubItems(index);
 
-      cy.findByLabelText(`Expand ${index}`).click();
+        cy.findByLabelText(`Expand ${index}`).click();
 
-      cy.findByLabelText(`Collapse ${index}`).should('exist');
+        cy.findByLabelText(`Collapse ${index}`).should('exist');
 
-      subItems.forEach(({ name, description }) => {
-        cy.contains(name).should('exist');
-        cy.contains(description).should('exist');
+        subItems.forEach(({ name, description }) => {
+          cy.contains(name).should('exist');
+          cy.contains(description).should('exist');
+        });
+
+        cy.findByLabelText(`Collapse ${index}`).click();
       });
+
+      cy.makeSnapshot();
     });
 
-    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('collapses the row when the corresponding icon si clicked', () => {
-    cy.contains('Sub item 100').should('be.visible');
+  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();
+  });
 
-    cy.findByLabelText('Collapse 0').click();
+  it('displays the last column on several lines in extended mode when the isResponsive prop is set', () => {
+    mountListingResponsive(ListingVariant.extended);
 
-    cy.contains('Sub item 100').should('not.exist');
+    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

@@ -1,7 +1,5 @@
 import { makeStyles } from 'tss-react/mui';
 
-import { ListingVariant } from '@centreon/ui-context';
-
 import { TableStyleAtom as TableStyle } from './models';
 
 const loadingIndicatorHeight = 3;
@@ -9,13 +7,12 @@ const loadingIndicatorHeight = 3;
 interface StylesProps {
   dataStyle: TableStyle;
   getGridTemplateColumn: string;
-  limit: number;
-  listingVariant: ListingVariant;
+  isResponsive: string;
   rows: Array<unknown>;
 }
 
 const useListingStyles = makeStyles<StylesProps>()(
-  (theme, { dataStyle, getGridTemplateColumn, rows, limit }) => ({
+  (theme, { dataStyle, getGridTemplateColumn, rows, isResponsive }) => ({
     actionBar: {
       alignItems: 'center',
       display: 'flex'
@@ -56,8 +53,8 @@ const useListingStyles = makeStyles<StylesProps>()(
       display: 'grid',
       gridTemplateColumns: getGridTemplateColumn,
       gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
-        rows?.length || limit
-      }, ${dataStyle.body.height}px)`,
+        rows?.length || 1
+      }, ${isResponsive ? 'auto' : `${dataStyle.body.height}px`})`,
       position: 'relative'
     },
     tableBody: {

package/src/Listing/Row/Row.tsx

@@ -197,7 +197,7 @@ const Row = memo<RowProps>(
   }
 );
 
-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({
@@ -214,8 +214,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/index.stories.tsx

@@ -40,7 +40,7 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 const ComponentColumn = ({ row, isSelected }): JSX.Element => (
-  <>
+  <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
     <span>
       {'I am '}
       <b>{`${isSelected ? 'selected' : 'not selected'}`}</b>
@@ -50,7 +50,7 @@ const ComponentColumn = ({ row, isSelected }): JSX.Element => (
       {'I am '}
       <b>{`${row.active ? 'active' : 'not active'}`}</b>
     </span>
-  </>
+  </div>
 );
 
 const ButtonColumn = ({ row }): JSX.Element => (
@@ -366,6 +366,16 @@ const columnsWithSubItems = [
   }
 ];
 
+const TemplateSubItems = (args): JSX.Element => {
+  const { classes } = useStyles();
+
+  return (
+    <div className={classes.listing}>
+      <Listing {...args} />
+    </div>
+  );
+};
+
 export const ListingWithSubItems = {
   args: {
     checkable: true,
@@ -377,10 +387,34 @@ export const ListingWithSubItems = {
     subItems: {
       canCheckSubItems: false,
       enable: true,
+      getRowProperty: () => 'subItems',
       labelCollapse: 'Collapse',
-      labelExpand: 'Expand',
-      rowProperty: 'subItems'
+      labelExpand: 'Expand'
     },
     totalRows: 10
-  }
+  },
+  render: TemplateSubItems
+};
+
+export const ListingWithResponsive = {
+  args: {
+    checkable: true,
+    columns: [
+      ...defaultColumns,
+      {
+        Component: ComponentColumn,
+        id: '##',
+        label: 'Responsive',
+        type: ColumnType.component,
+        width: '140px'
+      }
+    ],
+    currentPage: 1,
+    isResponsive: true,
+    limit: 10,
+    loading: false,
+    rows: listingWithSubItems,
+    totalRows: 10
+  },
+  render: TemplateSubItems
 };

package/src/Listing/index.test.tsx

@@ -216,7 +216,7 @@ describe('Listing', () => {
       <Listing
         columnConfiguration={{
           selectedColumnIds: columns.map(prop('id')),
-          sortable: false
+          sortable: true
         }}
         columns={columns}
         rows={rows}