@centreon/ui 23.10.39 → 23.10.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.39",
+  "version": "23.10.41",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -48,6 +48,7 @@
   "devDependencies": {
     "@cypress/react": "^7.0.2",
     "@cypress/webpack-dev-server": "^3.2.3",
+    "@faker-js/faker": "^8.0.2",
     "@mdx-js/react": "^2.1.4",
     "@simonsmith/cypress-image-snapshot": "^6.1.0",
     "@storybook/addon-a11y": "^7.0.9",
@@ -55,6 +56,7 @@
     "@storybook/addon-essentials": "^7.0.9",
     "@storybook/addon-interactions": "^7.0.9",
     "@storybook/addon-styling": "^1.0.6",
+    "@storybook/blocks": "^7.0.26",
     "@storybook/builder-vite": "^7.0.9",
     "@storybook/jest": "^0.1.0",
     "@storybook/manager-api": "^7.0.9",

package/src/Listing/Cell/DataCell.tsx

@@ -25,8 +25,11 @@ interface Props {
   getHighlightRowCondition?: (row) => boolean;
   isRowHovered: boolean;
   isRowSelected: boolean;
+  labelCollapse?: string;
+  labelExpand?: string;
   row?;
   rowColorConditions?: Array<RowColorCondition>;
+  subItemsRowProperty?: string;
   viewMode?: ListingVariant;
 }
 
@@ -38,16 +41,23 @@ const DataCell = ({
   rowColorConditions,
   disableRowCondition,
   viewMode,
-  getHighlightRowCondition
+  getHighlightRowCondition,
+  subItemsRowProperty,
+  labelCollapse,
+  labelExpand
 }: Props): JSX.Element | null => {
   const { classes } = useStyles();
   const { dataStyle } = useStyleTable({ viewMode });
 
   const commonCellProps = {
     disableRowCondition,
+    displaySubItemsCaret: column.displaySubItemsCaret,
     isRowHovered,
+    labelCollapse,
+    labelExpand,
     row,
-    rowColorConditions
+    rowColorConditions,
+    subItemsRowProperty
   };
 
   const isRowHighlighted = getHighlightRowCondition?.(row);
@@ -106,7 +116,7 @@ const DataCell = ({
           isRowHighlighted={isRowHighlighted}
           viewMode={viewMode}
           onClick={(e): void => {
-            if (!clickable) {
+            if (!clickable || !column.displaySubItemsCaret) {
               return;
             }
             e.preventDefault();
@@ -223,6 +233,7 @@ const MemoizedDataCell = memo<Props>(
       : nextProps.row;
 
     return (
+      equals(prevProps.row, nextProps.row) &&
       equals(previousIsComponentHovered, nextIsComponentHovered) &&
       equals(prevProps.isRowHovered, nextProps.isRowHovered) &&
       equals(previousFormattedString, nextFormattedString) &&
@@ -244,7 +255,8 @@ const MemoizedDataCell = memo<Props>(
         nextProps.disableRowCondition(nextProps.row)
       ) &&
       equals(previousIsRowHighlighted, nextIsRowHighlighted) &&
-      equals(prevProps.viewMode, nextProps.viewMode) // &&
+      equals(prevProps.viewMode, nextProps.viewMode) &&
+      equals(prevProps.subItemsRowProperty, nextProps.subItemsRowProperty)
     );
   }
 );

package/src/Listing/Cell/index.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 
-import { isNil, omit } from 'ramda';
+import { append, equals, includes, isNil, omit, reject } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 import { CSSObject } from 'tss-react';
+import { useAtom } from 'jotai';
 
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
   alpha,
   TableCell,
@@ -14,7 +16,9 @@ import {
 
 import { ListingVariant } from '@centreon/ui-context';
 
+import { IconButton } from '../..';
 import { getTextStyleByViewMode } from '../useStyleTable';
+import { subItemsPivotsAtom } from '../tableAtoms';
 
 import { Props as DataCellProps } from './DataCell';
 
@@ -80,6 +84,20 @@ const useStyles = makeStyles<StylesProps>()(
       viewMode
     }
   ) => ({
+    caret: {
+      transition: theme.transitions.create('transform', {
+        duration: theme.transitions.duration.short
+      })
+    },
+    caretLess: {
+      transform: 'rotate3d(0,0,1,180deg)'
+    },
+    caretMore: {
+      transform: 'rotate3d(0,0,1,0deg)'
+    },
+    fakeCaret: {
+      marginLeft: theme.spacing(3)
+    },
     root: {
       alignItems: 'center',
       backgroundColor: getBackgroundColor({
@@ -111,15 +129,57 @@ interface Props
       'isRowHovered' | 'row' | 'rowColorConditions' | 'disableRowCondition'
     >,
     TableCellProps {
+  displaySubItemsCaret?: boolean;
   isRowHighlighted?: boolean;
+  labelCollapse?: string;
+  labelExpand?: string;
+  subItemsRowProperty?: string;
   viewMode?: ListingVariant;
 }
 
-const Cell = (props: Props): JSX.Element => {
+const isPivotExistInTheList = (
+  id
+): ((list: Array<number | string>) => boolean) => includes(id);
+
+const handleSubItems = ({
+  currentSubItemsPivots,
+  id
+}): Array<number | string> => {
+  if (isPivotExistInTheList(id)(currentSubItemsPivots)) {
+    return reject(equals(id), currentSubItemsPivots);
+  }
+
+  return append(id, currentSubItemsPivots);
+};
+
+const Cell = ({
+  displaySubItemsCaret,
+  subItemsRowProperty,
+  labelCollapse,
+  labelExpand,
+  ...props
+}: Props): JSX.Element => {
   const { classes, cx } = useStyles(props);
 
+  const [subItemsPivots, setSubItemsPivots] = useAtom(subItemsPivotsAtom);
+
   const { children } = props;
 
+  const rowId = props.row?.id;
+
+  const click = (e): void => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    setSubItemsPivots((currentSubItemsPivots) =>
+      handleSubItems({ currentSubItemsPivots, id: rowId })
+    );
+  };
+
+  const isSubItemsExpanded = isPivotExistInTheList(rowId)(subItemsPivots);
+
+  const hasSubItems = subItemsRowProperty && props.row[subItemsRowProperty];
+
   return (
     <TableCell
       classes={{
@@ -138,6 +198,26 @@ const Cell = (props: Props): JSX.Element => {
         props
       )}
     >
+      {displaySubItemsCaret &&
+        (hasSubItems ? (
+          <IconButton
+            ariaLabel={`${isSubItemsExpanded ? labelCollapse : labelExpand} ${
+              props.row.id
+            }`}
+            size="small"
+            onClick={click}
+          >
+            <ExpandMoreIcon
+              className={cx(
+                classes.caret,
+                isSubItemsExpanded ? classes.caretMore : classes.caretLess
+              )}
+              fontSize="small"
+            />
+          </IconButton>
+        ) : (
+          <div className={classes.fakeCaret} />
+        ))}
       {children}
     </TableCell>
   );

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

package/src/Listing/Listing.styles.ts

@@ -14,7 +14,7 @@ interface StylesProps {
   viewMode: ListingVariant;
 }
 
-const useStyles = makeStyles<StylesProps>()(
+const useListingStyles = makeStyles<StylesProps>()(
   (theme, { dataStyle, getGridTemplateColumn, rows, limit }) => ({
     actionBar: {
       alignItems: 'center',
@@ -73,4 +73,4 @@ const useStyles = makeStyles<StylesProps>()(
   })
 );
 
-export { useStyles, loadingIndicatorHeight };
+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/Row.tsx

@@ -49,6 +49,7 @@ type Props = {
   row;
   rowColorConditions: Array<RowColorCondition>;
   shiftKeyDownRowPivot: number | null;
+  subItemsPivots: Array<number | string>;
   viewMode?: ListingVariant;
   visibleColumns: Array<Column>;
 } & TableRowProps;
@@ -174,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)
       );
     }
 
@@ -189,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/index.stories.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable no-alert */
 /* eslint-disable react/prop-types */
 import { useState } from 'react';
 
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { equals, prop } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
@@ -16,7 +17,7 @@ import { Column, ColumnType, SortOrder } from './models';
 
 import Listing from '.';
 
-export default {
+const meta: Meta<typeof Listing> = {
   argTypes: {
     checkable: { control: 'boolean' },
     currentPage: { control: 'number' },
@@ -26,7 +27,10 @@ export default {
   },
   component: Listing,
   title: 'Listing'
-} as ComponentMeta<typeof Listing>;
+};
+export default meta;
+
+type Story = StoryObj<typeof Listing>;
 
 const useStyles = makeStyles()((theme) => ({
   listing: {
@@ -48,6 +52,12 @@ const ComponentColumn = ({ row, isSelected }): JSX.Element => (
   </>
 );
 
+const ButtonColumn = ({ row }): JSX.Element => (
+  <Button size="small" onClick={() => alert(JSON.stringify(row))}>
+    Click to reveal details about {row.name}
+  </Button>
+);
+
 const defaultColumns = [
   {
     getFormattedString: ({ name }): string => name,
@@ -131,7 +141,7 @@ const predefinedRowsSelection = [
   }
 ];
 
-const Story = ({
+const StoryTemplate = ({
   columns = defaultColumns,
   checkable = true,
   viewerModeConfiguration,
@@ -164,7 +174,7 @@ const Story = ({
   );
 };
 
-export const normal = (): JSX.Element => <Story />;
+export const normal = (): JSX.Element => <StoryTemplate />;
 
 export const WithSpecifiedViewMode = (): JSX.Element => {
   const [viewMode, setViewMode] = useState(ListingVariant.extended);
@@ -173,7 +183,7 @@ export const WithSpecifiedViewMode = (): JSX.Element => {
     : ListingVariant.compact;
 
   return (
-    <Story
+    <StoryTemplate
       viewMode={viewMode}
       viewerModeConfiguration={{
         onClick: () => setViewMode(newViewMode),
@@ -184,15 +194,15 @@ export const WithSpecifiedViewMode = (): JSX.Element => {
 };
 
 export const loadingWithNoData = (): JSX.Element => {
-  return <Story loading rows={[]} totalRows={0} />;
+  return <StoryTemplate loading rows={[]} totalRows={0} />;
 };
 
 export const loadingWithData = (): JSX.Element => {
-  return <Story loading />;
+  return <StoryTemplate loading />;
 };
 
 export const asEmptyState = (): JSX.Element => {
-  return <Story rows={[]} />;
+  return <StoryTemplate rows={[]} />;
 };
 
 const actions = (
@@ -201,12 +211,16 @@ const actions = (
   </Button>
 );
 
-export const withActions = (): JSX.Element => <Story actions={actions} />;
+export const withActions = (): JSX.Element => (
+  <StoryTemplate actions={actions} />
+);
 
-export const withoutCheckboxes = (): JSX.Element => <Story checkable={false} />;
+export const withoutCheckboxes = (): JSX.Element => (
+  <StoryTemplate checkable={false} />
+);
 
 export const withShortLabelColumns = (): JSX.Element => (
-  <Story columns={columnsWithShortLabel} />
+  <StoryTemplate columns={columnsWithShortLabel} />
 );
 
 const editableColumns = [
@@ -270,7 +284,7 @@ const ListingWithEditableColumns = (): JSX.Element => {
   };
 
   return (
-    <Story
+    <StoryTemplate
       columnConfiguration={{
         selectedColumnIds,
         sortable: true
@@ -290,23 +304,82 @@ export const withEditableAndSortableColumns = (): JSX.Element => (
   <ListingWithEditableColumns />
 );
 
-const TemplateListing: ComponentStory<typeof Listing> = (args) => (
-  <Listing
-    {...args}
-    columns={editableColumns}
-    disableRowCheckCondition={(row): boolean => row.disableCheckbox}
-    disableRowCondition={(row): boolean => row.disableRow}
-    predefinedRowsSelection={predefinedRowsSelection}
-    rowColorConditions={rowColorConditions}
-    rows={listing}
-  />
-);
+export const PlaygroundListing: Story = {
+  args: {
+    checkable: true,
+    columns: editableColumns,
+    currentPage: 1,
+    disableRowCheckCondition: (row): boolean => row.disableCheckbox,
+    disableRowCondition: (row): boolean => row.disableRow,
+    limit: 10,
+    loading: false,
+    predefinedRowsSelection,
+    rowColorConditions,
+    rows: listing,
+    totalRows: 10
+  }
+};
+
+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
+      ? [...tenElements].map((__, subIndex) => ({
+          active: false,
+          description: `Sub item ${subIndex + (index + 10) * 10} description`,
+          disableCheckbox: false,
+          disableRow: false,
+          id: subIndex + (index + 10) * 10,
+          name: `Sub Item ${subIndex + (index + 10) * 10}`,
+          selected: false
+        }))
+      : 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'
+  }
+];
 
-export const PlaygroundListing = TemplateListing.bind({});
-PlaygroundListing.args = {
-  checkable: true,
-  currentPage: 1,
-  limit: 10,
-  loading: false,
-  totalRows: 10
+export const ListingWithSubItems = {
+  args: {
+    checkable: true,
+    columns: columnsWithSubItems,
+    currentPage: 1,
+    limit: 10,
+    loading: false,
+    rows: listingWithSubItems,
+    subItems: {
+      canCheckSubItems: false,
+      enable: true,
+      labelCollapse: 'Collapse',
+      labelExpand: 'Expand',
+      rowProperty: 'subItems'
+    },
+    totalRows: 10
+  }
 };