@centreon/ui 24.5.12 → 24.5.13

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}

@@ -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,12 +191,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 +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/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 };

package/src/Listing/index.stories.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable no-alert */
 /* eslint-disable react/prop-types */
-import { React, useState } from 'react';
+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';
 
@@ -12,11 +13,11 @@ import { ListingVariant } from '@centreon/ui-context';
 
 import { ListingProps } from '..';
 
-import { Column, ColumnType } from './models';
+import { Column, ColumnType, SortOrder } from './models';
 
 import Listing from '.';
 
-export default {
+const meta: Meta<typeof Listing> = {
   argTypes: {
     checkable: { control: 'boolean' },
     currentPage: { control: 'number' },
@@ -26,16 +27,20 @@ export default {
   },
   component: Listing,
   title: 'Listing'
-} as ComponentMeta<typeof Listing>;
+};
+export default meta;
+
+type Story = StoryObj<typeof Listing>;
 
 const useStyles = makeStyles()((theme) => ({
   listing: {
-    backgroundColor: theme.palette.background.default
+    backgroundColor: theme.palette.background.default,
+    height: '100vh'
   }
 }));
 
 const ComponentColumn = ({ row, isSelected }): JSX.Element => (
-  <>
+  <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
     <span>
       {'I am '}
       <b>{`${isSelected ? 'selected' : 'not selected'}`}</b>
@@ -45,7 +50,13 @@ const ComponentColumn = ({ row, isSelected }): JSX.Element => (
       {'I am '}
       <b>{`${row.active ? 'active' : 'not active'}`}</b>
     </span>
-  </>
+  </div>
+);
+
+const ButtonColumn = ({ row }): JSX.Element => (
+  <Button size="small" onClick={() => alert(JSON.stringify(row))}>
+    Click to reveal details about {row.name}
+  </Button>
 );
 
 const defaultColumns = [
@@ -131,7 +142,7 @@ const predefinedRowsSelection = [
   }
 ];
 
-const Story = ({
+const StoryTemplate = ({
   columns = defaultColumns,
   checkable = true,
   viewerModeConfiguration,
@@ -153,7 +164,7 @@ const Story = ({
         limit={listing.length}
         predefinedRowsSelection={predefinedRowsSelection}
         rowColorConditions={rowColorConditions}
-        rows={listing}
+        rows={props.rows ?? listing}
         selectedRows={selected}
         totalRows={listing.length}
         viewerModeConfiguration={viewerModeConfiguration}
@@ -164,31 +175,35 @@ 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);
-  const newViewMode = equals(viewMode, ListingVariant.compact)
+  const [listingVariant, setListingVariant] = useState(ListingVariant.extended);
+  const newListingVariant = equals(listingVariant, ListingVariant.compact)
     ? ListingVariant.extended
     : ListingVariant.compact;
 
   return (
-    <Story
-      viewMode={viewMode}
+    <StoryTemplate
+      listingVariant={listingVariant}
       viewerModeConfiguration={{
-        onClick: () => setViewMode(newViewMode),
-        title: viewMode
+        onClick: () => setListingVariant(newListingVariant),
+        title: listingVariant
       }}
     />
   );
 };
 
 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 <StoryTemplate rows={[]} />;
 };
 
 const actions = (
@@ -197,12 +212,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 = [
@@ -210,12 +229,14 @@ const editableColumns = [
     getFormattedString: ({ name }): string => name,
     id: 'name',
     label: 'Name',
+    sortable: true,
     type: ColumnType.string
   },
   {
     getFormattedString: ({ description }): string => description,
     id: 'description',
     label: 'Description',
+    sortable: true,
     type: ColumnType.string
   },
   {
@@ -243,40 +264,157 @@ const ListingWithEditableColumns = (): JSX.Element => {
     setSelectedColumnIds(defaultColumnIds);
   };
 
+  const [sortedRows, setSortedRows] = useState(listing);
+  const [sortParams, setSortParams] = useState({
+    sortField: editableColumns[0].id,
+    sortOrder: 'desc'
+  });
+
+  const onSort = (params: {
+    sortField: string;
+    sortOrder: SortOrder;
+  }): void => {
+    const rows = [...sortedRows];
+    rows.sort((a, b) =>
+      params.sortOrder === 'desc'
+        ? a[params.sortField]?.localeCompare(b[params.sortField])
+        : b[params.sortField]?.localeCompare(a[params.sortField])
+    );
+    setSortedRows(rows);
+    setSortParams(params);
+  };
+
   return (
-    <Story
+    <StoryTemplate
       columnConfiguration={{
         selectedColumnIds,
         sortable: true
       }}
       columns={editableColumns}
+      rows={sortedRows}
+      sortField={sortParams.sortField}
+      sortOrder={sortParams.sortOrder as SortOrder}
       onResetColumns={resetColumns}
       onSelectColumns={setSelectedColumnIds}
+      onSort={onSort}
     />
   );
 };
 
-export const withEditableColumns = (): JSX.Element => (
+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
+}));
 
-export const PlaygroundListing = TemplateListing.bind({});
-PlaygroundListing.args = {
-  checkable: true,
-  currentPage: 1,
-  limit: 10,
-  loading: false,
-  totalRows: 10
+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 TemplateSubItems = (args): JSX.Element => {
+  const { classes } = useStyles();
+
+  return (
+    <div className={classes.listing}>
+      <Listing {...args} />
+    </div>
+  );
+};
+
+export const ListingWithSubItems = {
+  args: {
+    checkable: true,
+    columns: columnsWithSubItems,
+    currentPage: 1,
+    limit: 10,
+    loading: false,
+    rows: listingWithSubItems,
+    subItems: {
+      canCheckSubItems: false,
+      enable: true,
+      getRowProperty: () => 'subItems',
+      labelCollapse: 'Collapse',
+      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

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { prop } from 'ramda';
 
-import { render, fireEvent, within } from '../testRenderer';
+import { render, fireEvent, within } from '../../test/testRenderer';
 
 import { ColumnType } from './models';
 import { labelAddColumns } from './translatedLabels';
@@ -216,7 +216,7 @@ describe('Listing', () => {
       <Listing
         columnConfiguration={{
           selectedColumnIds: columns.map(prop('id')),
-          sortable: false
+          sortable: true
         }}
         columns={columns}
         rows={rows}