@centreon/ui 24.11.13 → 24.11.14

package/src/Listing/{Row/Row.tsx → Row.tsx}

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

package/src/Listing/Skeleton.tsx

@@ -0,0 +1,11 @@
+import LoadingSkeleton from '../LoadingSkeleton';
+
+const ListingLoadingSkeleton = (): JSX.Element => (
+  <>
+    {['skeleton1', 'skeleton2', 'skeleton3'].map((key) => (
+      <LoadingSkeleton height={20} key={key} variant="text" width="100%" />
+    ))}
+  </>
+);
+
+export default ListingLoadingSkeleton;

package/src/Listing/index.stories.tsx

@@ -1,8 +1,7 @@
-/* eslint-disable no-alert */
 /* eslint-disable react/prop-types */
-import { useState } from 'react';
+import { React, useState } from 'react';
 
-import { Meta, StoryObj } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { equals, prop } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
@@ -13,11 +12,11 @@ import { ListingVariant } from '@centreon/ui-context';
 
 import { ListingProps } from '..';
 
-import { Column, ColumnType, SortOrder } from './models';
+import { Column, ColumnType } from './models';
 
 import Listing from '.';
 
-const meta: Meta<typeof Listing> = {
+export default {
   argTypes: {
     checkable: { control: 'boolean' },
     currentPage: { control: 'number' },
@@ -27,20 +26,16 @@ const meta: Meta<typeof Listing> = {
   },
   component: Listing,
   title: 'Listing'
-};
-export default meta;
-
-type Story = StoryObj<typeof Listing>;
+} as ComponentMeta<typeof Listing>;
 
 const useStyles = makeStyles()((theme) => ({
   listing: {
-    backgroundColor: theme.palette.background.default,
-    height: '100vh'
+    backgroundColor: theme.palette.background.default
   }
 }));
 
 const ComponentColumn = ({ row, isSelected }): JSX.Element => (
-  <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
+  <>
     <span>
       {'I am '}
       <b>{`${isSelected ? 'selected' : 'not selected'}`}</b>
@@ -50,13 +45,7 @@ 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 = [
@@ -142,7 +131,7 @@ const predefinedRowsSelection = [
   }
 ];
 
-const StoryTemplate = ({
+const Story = ({
   columns = defaultColumns,
   checkable = true,
   viewerModeConfiguration,
@@ -164,7 +153,7 @@ const StoryTemplate = ({
         limit={listing.length}
         predefinedRowsSelection={predefinedRowsSelection}
         rowColorConditions={rowColorConditions}
-        rows={props.rows ?? listing}
+        rows={listing}
         selectedRows={selected}
         totalRows={listing.length}
         viewerModeConfiguration={viewerModeConfiguration}
@@ -175,35 +164,31 @@ const StoryTemplate = ({
   );
 };
 
-export const normal = (): JSX.Element => <StoryTemplate />;
+export const normal = (): JSX.Element => <Story />;
 
 export const WithSpecifiedViewMode = (): JSX.Element => {
-  const [listingVariant, setListingVariant] = useState(ListingVariant.extended);
-  const newListingVariant = equals(listingVariant, ListingVariant.compact)
+  const [viewMode, setViewMode] = useState(ListingVariant.extended);
+  const newViewMode = equals(viewMode, ListingVariant.compact)
     ? ListingVariant.extended
     : ListingVariant.compact;
 
   return (
-    <StoryTemplate
-      listingVariant={listingVariant}
+    <Story
+      viewMode={viewMode}
       viewerModeConfiguration={{
-        onClick: () => setListingVariant(newListingVariant),
-        title: listingVariant
+        onClick: () => setViewMode(newViewMode),
+        title: viewMode
       }}
     />
   );
 };
 
 export const loadingWithNoData = (): JSX.Element => {
-  return <StoryTemplate loading rows={[]} totalRows={0} />;
+  return <Story loading rows={[]} totalRows={0} />;
 };
 
 export const loadingWithData = (): JSX.Element => {
-  return <StoryTemplate loading />;
-};
-
-export const asEmptyState = (): JSX.Element => {
-  return <StoryTemplate rows={[]} />;
+  return <Story loading />;
 };
 
 const actions = (
@@ -212,16 +197,12 @@ const actions = (
   </Button>
 );
 
-export const withActions = (): JSX.Element => (
-  <StoryTemplate actions={actions} />
-);
+export const withActions = (): JSX.Element => <Story actions={actions} />;
 
-export const withoutCheckboxes = (): JSX.Element => (
-  <StoryTemplate checkable={false} />
-);
+export const withoutCheckboxes = (): JSX.Element => <Story checkable={false} />;
 
 export const withShortLabelColumns = (): JSX.Element => (
-  <StoryTemplate columns={columnsWithShortLabel} />
+  <Story columns={columnsWithShortLabel} />
 );
 
 const editableColumns = [
@@ -229,14 +210,12 @@ 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
   },
   {
@@ -264,157 +243,40 @@ 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 (
-    <StoryTemplate
+    <Story
       columnConfiguration={{
         selectedColumnIds,
         sortable: true
       }}
       columns={editableColumns}
-      rows={sortedRows}
-      sortField={sortParams.sortField}
-      sortOrder={sortParams.sortOrder as SortOrder}
       onResetColumns={resetColumns}
       onSelectColumns={setSelectedColumnIds}
-      onSort={onSort}
     />
   );
 };
 
-export const withEditableAndSortableColumns = (): JSX.Element => (
+export const withEditableColumns = (): JSX.Element => (
   <ListingWithEditableColumns />
 );
 
-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'
-  }
-];
-
-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
-};
+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 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
+export const PlaygroundListing = TemplateListing.bind({});
+PlaygroundListing.args = {
+  checkable: true,
+  currentPage: 1,
+  limit: 10,
+  loading: false,
+  totalRows: 10
 };

package/src/Listing/index.test.tsx

@@ -0,0 +1,234 @@
+import { useState } from 'react';
+
+import { prop } from 'ramda';
+
+import { render, fireEvent, within } from '../testRenderer';
+
+import { ColumnType } from './models';
+import { labelAddColumns } from './translatedLabels';
+
+import Listing from '.';
+
+describe('Listing', () => {
+  const getAllCheckboxes = (container): Array<HTMLElement> => {
+    return container.querySelectorAll('[type = "checkbox"]');
+  };
+
+  const columns = [
+    {
+      getFormattedString: ({ name }): string => name,
+      id: 'name',
+      label: 'name',
+      sortable: true,
+      type: ColumnType.string
+    },
+    {
+      getFormattedString: ({ description }): string => description,
+      id: 'description',
+      label: 'description',
+      sortField: 'descriptionField',
+      sortable: true,
+      type: ColumnType.string
+    }
+  ];
+
+  const rows = [
+    { description: 'first row description', id: 0, name: 'My First Row' },
+    { description: 'second row description', id: 1, name: 'My Second Row' },
+    { description: 'third row description', id: 2, name: 'My Third Row' },
+    { description: 'fourth row description', id: 3, name: 'My Fourth Row' }
+  ];
+
+  const onSelectRows = jest.fn();
+  const onSort = jest.fn();
+
+  const oneHundredElements = new Array(100).fill(0);
+
+  const oneHundredTableData = [...oneHundredElements].map((_, index) => ({
+    active: index % 2 === 0,
+    description: `Entity ${index}`,
+    disableCheckbox: index % 4 === 0,
+    id: index,
+    name: `E${index}`,
+    selected: index % 3 === 0
+  }));
+
+  const PaginationTable = (): JSX.Element => {
+    const [limit, setLimit] = useState(10);
+    const [page, setPage] = useState(4);
+
+    return (
+      <Listing
+        columns={columns}
+        currentPage={page}
+        limit={limit}
+        rows={oneHundredTableData}
+        totalRows={oneHundredTableData.length}
+        onLimitChange={setLimit}
+        onPaginate={setPage}
+        onSort={onSort}
+      />
+    );
+  };
+
+  it('selects a row when the corresponding checkbox is clicked', () => {
+    const { container } = render(
+      <Listing
+        checkable
+        columns={columns}
+        rows={rows}
+        onSelectRows={onSelectRows}
+      />
+    );
+
+    // The first visible checkbox is the 'select all' one
+    const firstRowCheckbox = getAllCheckboxes(container)[1];
+
+    fireEvent.click(firstRowCheckbox);
+
+    const firstRow = rows[0];
+    expect(onSelectRows).toHaveBeenCalledWith([firstRow]);
+  });
+
+  it('unselects a row when it is currently selected and the corresponding checkbox is clicked', () => {
+    const firstRow = rows[0];
+    const selectedRows = [firstRow];
+
+    const { container } = render(
+      <Listing
+        checkable
+        columns={columns}
+        rows={rows}
+        selectedRows={selectedRows}
+        onSelectRows={onSelectRows}
+      />
+    );
+    const firstRowCheckbox = getAllCheckboxes(container)[1];
+
+    fireEvent.click(firstRowCheckbox);
+
+    expect(onSelectRows).toHaveBeenCalledWith([]);
+  });
+
+  it('selects all rows when the "select all" checkbox is clicked', () => {
+    const { container } = render(
+      <Listing
+        checkable
+        columns={columns}
+        rows={rows}
+        totalRows={4}
+        onSelectRows={onSelectRows}
+      />
+    );
+
+    const selectAllCheckbox = getAllCheckboxes(container)[0];
+
+    fireEvent.click(selectAllCheckbox);
+
+    expect(onSelectRows).toHaveBeenLastCalledWith(rows);
+  });
+
+  it('unselects all rows when all rows are selected and the "select all" checkbox is clicked', () => {
+    const { container } = render(
+      <Listing
+        checkable
+        columns={columns}
+        rows={rows}
+        selectedRows={rows}
+        onSelectRows={onSelectRows}
+      />
+    );
+
+    const selectAllCheckbox = getAllCheckboxes(container)[0];
+
+    fireEvent.click(selectAllCheckbox);
+
+    expect(onSelectRows).toHaveBeenCalledWith([]);
+  });
+
+  it('unselects selected rows when some rows are selected and the "select all" checkbox is clicked', () => {
+    const selectedRows = rows.filter(({ id }) => id % 2 === 0);
+    const { container } = render(
+      <Listing
+        checkable
+        columns={columns}
+        rows={rows}
+        selectedRows={selectedRows}
+        onSelectRows={onSelectRows}
+      />
+    );
+
+    const selectAllCheckbox = getAllCheckboxes(container)[0];
+
+    fireEvent.click(selectAllCheckbox);
+
+    expect(onSelectRows).toHaveBeenCalledWith([]);
+  });
+
+  it('sorts on on column id when the column header is clicked and sortField is not defined', () => {
+    const columnWithoutSortField = columns[0];
+
+    const { getByLabelText } = render(
+      <Listing columns={columns} rows={rows} onSort={onSort} />
+    );
+
+    fireEvent.click(getByLabelText(`Column ${columnWithoutSortField.label}`));
+
+    expect(onSort).toHaveBeenCalledWith({
+      sortField: columnWithoutSortField.id,
+      sortOrder: 'desc'
+    });
+  });
+
+  it('sorts on on column sortField when the column header is clicked and sortField is defined', () => {
+    const columnWithSortField = columns[1];
+
+    const { getByLabelText } = render(
+      <Listing columns={columns} rows={rows} onSort={onSort} />
+    );
+
+    fireEvent.click(getByLabelText(`Column ${columnWithSortField.label}`));
+
+    expect(onSort).toHaveBeenCalledWith({
+      sortField: columnWithSortField.sortField,
+      sortOrder: 'desc'
+    });
+  });
+
+  it('resets the page number to 0 when changing the limit and the current page is different than 0', () => {
+    const { getByRole, getByText } = render(<PaginationTable />);
+
+    expect(getByText('41-50 of 100'));
+
+    fireEvent.mouseDown(getByText('10'));
+
+    const listbox = within(getByRole('listbox'));
+
+    fireEvent.click(listbox.getByText('90'));
+
+    expect(getByText('1-90 of 100'));
+  });
+
+  it(`unselects a column when the "selectable" parameter is set and a column is unselected from the corresponding menu`, () => {
+    const onSelectColumns = jest.fn();
+
+    const { getAllByText, getByLabelText } = render(
+      <Listing
+        columnConfiguration={{
+          selectedColumnIds: columns.map(prop('id')),
+          sortable: false
+        }}
+        columns={columns}
+        rows={rows}
+        onSelectColumns={onSelectColumns}
+        onSort={onSort}
+      />
+    );
+
+    fireEvent.click(getByLabelText(labelAddColumns).firstChild as HTMLElement);
+
+    fireEvent.click(getAllByText('description')[1]);
+
+    expect(onSelectColumns).toHaveBeenCalledWith(['name']);
+  });
+});