@centreon/ui 23.10.37 → 23.10.38

package/src/Listing/Header/{index.tsx → ListingHeader.tsx}

@@ -2,67 +2,22 @@ import * as React from 'react';
 
 import { closestCenter, DraggableSyntheticListeners } from '@dnd-kit/core';
 import { horizontalListSortingStrategy } from '@dnd-kit/sortable';
-import { equals, find, isEmpty, map, not, pick, propEq } from 'ramda';
-import { makeStyles, withStyles } from 'tss-react/mui';
+import { equals, find, map, pick, propEq } from 'ramda';
 
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import {
-  TableCell,
-  TableCellBaseProps,
-  TableHead,
-  TableRow
-} from '@mui/material';
+import { TableHead, TableRow } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
 import { getVisibleColumns, Props as ListingProps } from '..';
-import PopoverMenu from '../../PopoverMenu';
 import SortableItems from '../../SortableItems';
-import Checkbox from '../Checkbox';
-import { Column, PredefinedRowSelection } from '../models';
-import { labelPredefinedRowsSelectionMenu } from '../translatedLabels';
-
-import PredefinedSelectionList from './PredefinedSelectionList';
-import SortableHeaderCellContent from './SortableCell/Content';
-
-const height = 28;
-
-const HeaderCell = withStyles(TableCell, (theme) => ({
-  root: {
-    padding: theme.spacing(0)
-  }
-}));
+import { Column } from '../models';
 
-const useStyles = makeStyles()((theme) => ({
-  checkbox: {
-    '&.Mui-checked': {
-      color: theme.palette.common.white
-    },
-    '&.MuiCheckbox-indeterminate': {
-      color: theme.palette.common.white
-    },
-    color: theme.palette.common.white
-  },
-  checkboxHeaderCell: {
-    alignItems: 'center',
-    backgroundColor: theme.palette.background.listingHeader,
-    borderBottom: 'none',
-    display: 'flex',
-    justifyContent: 'start',
-    minWidth: theme.spacing(51 / 8),
-    padding: 0
-  },
-  headerLabelDragging: {
-    cursor: 'grabbing'
-  },
-  predefinedRowsMenu: {
-    color: theme.palette.common.white,
-    width: theme.spacing(2)
-  },
-  row: {
-    display: 'contents'
-  }
-}));
+import ListingHeaderCell from './Cell/ListingHeaderCell';
+import { useStyles } from './ListingHeader.styles';
+import {
+  SelectActionListingHeaderCell,
+  SelectActionListingHeaderCellProps
+} from './Cell/SelectActionListingHeaderCell';
 
 type Props = Pick<
   ListingProps<unknown>,
@@ -77,13 +32,9 @@ type Props = Pick<
 > & {
   areColumnsEditable: boolean;
   memoProps: Array<unknown>;
-  onSelectAllClick: (event) => void;
-  onSelectRowsWithCondition: (condition) => void;
-  predefinedRowsSelection: Array<PredefinedRowSelection>;
   rowCount: number;
-  selectedRowCount: number;
   viewMode?: ListingVariant;
-};
+} & SelectActionListingHeaderCellProps;
 
 interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
   attributes;
@@ -96,21 +47,21 @@ interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
 }
 
 const ListingHeader = ({
-  onSelectAllClick,
   sortOrder,
   sortField,
-  selectedRowCount,
   rowCount,
   columns,
   columnConfiguration,
   onSort,
   onSelectColumns,
   checkable,
-  predefinedRowsSelection,
-  onSelectRowsWithCondition,
   memoProps,
   areColumnsEditable,
-  viewMode
+  viewMode,
+  onSelectAllClick,
+  selectedRowCount,
+  predefinedRowsSelection,
+  onSelectRowsWithCondition
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
 
@@ -134,7 +85,7 @@ const ListingHeader = ({
       id
     }: ContentProps): JSX.Element => {
       return (
-        <SortableHeaderCellContent
+        <ListingHeaderCell
           areColumnsEditable={areColumnsEditable}
           column={getColumnById(id)}
           columnConfiguration={columnConfiguration}
@@ -154,45 +105,17 @@ const ListingHeader = ({
     [columnConfiguration, columns, sortField, sortOrder]
   );
 
-  const hasRows = not(equals(rowCount, 0));
-
   return (
     <TableHead className={cx(classes.row, 'listingHeader')} component="div">
       <TableRow className={classes.row} component="div">
         {checkable && (
-          <TableCell
-            className={classes.checkboxHeaderCell}
-            component={
-              'div' as unknown as React.ElementType<TableCellBaseProps>
-            }
-          >
-            <Checkbox
-              checked={hasRows && selectedRowCount === rowCount}
-              className={classes.checkbox}
-              indeterminate={
-                hasRows && selectedRowCount > 0 && selectedRowCount < rowCount
-              }
-              inputProps={{ 'aria-label': 'Select all' }}
-              onChange={onSelectAllClick}
-            />
-            {not(isEmpty(predefinedRowsSelection)) ? (
-              <PopoverMenu
-                className={classes.predefinedRowsMenu}
-                icon={<ArrowDropDownIcon />}
-                title={labelPredefinedRowsSelectionMenu}
-              >
-                {({ close }): JSX.Element => (
-                  <PredefinedSelectionList
-                    close={close}
-                    predefinedRowsSelection={predefinedRowsSelection}
-                    onSelectRowsWithCondition={onSelectRowsWithCondition}
-                  />
-                )}
-              </PopoverMenu>
-            ) : (
-              <div className={classes.predefinedRowsMenu} />
-            )}
-          </TableCell>
+          <SelectActionListingHeaderCell
+            predefinedRowsSelection={predefinedRowsSelection}
+            rowCount={rowCount}
+            selectedRowCount={selectedRowCount}
+            onSelectAllClick={onSelectAllClick}
+            onSelectRowsWithCondition={onSelectRowsWithCondition}
+          />
         )}
         <SortableItems
           updateSortableItemsOnItemsChange
@@ -217,6 +140,7 @@ const columnMemoProps = [
   'label',
   'rowMemoProps',
   'sortField',
+  'sortOrder',
   'sortable',
   'type'
 ];
@@ -239,5 +163,4 @@ const MemoizedListingHeader = React.memo<Props>(
     equals(prevProps.viewMode, nextProps.viewMode)
 );
 
-export default MemoizedListingHeader;
-export { height as headerHeight, HeaderCell };
+export { MemoizedListingHeader as ListingHeader };

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { SvgIcon, IconButton as MuiIconButton } from '@mui/material';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+
+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/{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.styles.ts

@@ -0,0 +1,76 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { ListingVariant } from '@centreon/ui-context';
+
+import { TableStyleAtom as TableStyle } from './models';
+
+const loadingIndicatorHeight = 3;
+
+interface StylesProps {
+  dataStyle: TableStyle;
+  getGridTemplateColumn: string;
+  limit: number;
+  rows: Array<unknown>;
+  viewMode: ListingVariant;
+}
+
+const useStyles = makeStyles<StylesProps>()(
+  (theme, { dataStyle, getGridTemplateColumn, rows, limit }) => ({
+    actionBar: {
+      alignItems: 'center',
+      display: 'flex'
+    },
+    checkbox: {
+      justifyContent: 'start'
+    },
+    container: {
+      background: 'none',
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      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 || limit
+      }, ${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 { useStyles, loadingIndicatorHeight };

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 {

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,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import { React, useState } from 'react';
+import { useState } from 'react';
 
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { equals, prop } from 'ramda';
@@ -12,7 +12,7 @@ import { ListingVariant } from '@centreon/ui-context';
 
 import { ListingProps } from '..';
 
-import { Column, ColumnType } from './models';
+import { Column, ColumnType, SortOrder } from './models';
 
 import Listing from '.';
 
@@ -153,7 +153,7 @@ const Story = ({
         limit={listing.length}
         predefinedRowsSelection={predefinedRowsSelection}
         rowColorConditions={rowColorConditions}
-        rows={listing}
+        rows={props.rows ?? listing}
         selectedRows={selected}
         totalRows={listing.length}
         viewerModeConfiguration={viewerModeConfiguration}
@@ -191,6 +191,10 @@ export const loadingWithData = (): JSX.Element => {
   return <Story loading />;
 };
 
+export const asEmptyState = (): JSX.Element => {
+  return <Story rows={[]} />;
+};
+
 const actions = (
   <Button color="primary" size="small" variant="contained">
     Action
@@ -210,12 +214,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,6 +249,26 @@ 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
       columnConfiguration={{
@@ -250,13 +276,17 @@ const ListingWithEditableColumns = (): JSX.Element => {
         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 />
 );
 

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';