@centreon/ui 24.7.2 → 24.7.4

package/src/Listing/Header/SortableCell/DraggableIcon.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import SvgIcon from '@mui/material/SvgIcon';
+
+import { labelDragHandle } from '../../translatedLabels';
+
+interface Icon {
+  className?: string;
+  columnLabel?: string;
+  isInteractive?: boolean;
+  visible?: boolean;
+}
+
+const DraggableIcon = ({
+  visible = false,
+  columnLabel,
+  className,
+  isInteractive = false,
+  ...rest
+}: Icon): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <SvgIcon
+      aria-label={`${columnLabel} ${t(labelDragHandle)}`}
+      fontSize="medium"
+      {...rest}
+      className={className}
+      role={isInteractive ? 'button' : undefined}
+      tabIndex={isInteractive ? 0 : undefined}
+    >
+      {visible && (
+        <path d="M 12 8 c 1.1 0 2 -0.9 2 -2 s -0.9 -2 -2 -2 s -2 0.9 -2 2 s 0.9 2 2 2 Z m 0 2 c -1.1 0 -2 0.9 -2 2 s 0.9 2 2 2 s 2 -0.9 2 -2 s -0.9 -2 -2 -2 Z m 0 6 c -1.1 0 -2 0.9 -2 2 s 0.9 2 2 2 s 2 -0.9 2 -2 s -0.9 -2 -2 -2 Z" />
+      )}
+    </SvgIcon>
+  );
+};
+
+export default DraggableIcon;

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

@@ -2,22 +2,67 @@ import * as React from 'react';
 
 import { closestCenter, DraggableSyntheticListeners } from '@dnd-kit/core';
 import { horizontalListSortingStrategy } from '@dnd-kit/sortable';
-import { equals, find, map, pick, propEq } from 'ramda';
+import { equals, find, isEmpty, map, not, pick, propEq } from 'ramda';
+import { makeStyles, withStyles } from 'tss-react/mui';
 
-import { TableHead, TableRow } from '@mui/material';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import {
+  TableCell,
+  TableCellBaseProps,
+  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 { Column } from '../models';
+import Checkbox from '../Checkbox';
+import { Column, PredefinedRowSelection } from '../models';
+import { labelPredefinedRowsSelectionMenu } from '../translatedLabels';
 
-import ListingHeaderCell from './Cell/ListingHeaderCell';
-import { useStyles } from './ListingHeader.styles';
-import {
-  SelectActionListingHeaderCell,
-  SelectActionListingHeaderCellProps
-} from './Cell/SelectActionListingHeaderCell';
+import PredefinedSelectionList from './PredefinedSelectionList';
+import SortableHeaderCellContent from './SortableCell/Content';
+
+const height = 28;
+
+const HeaderCell = withStyles(TableCell, (theme) => ({
+  root: {
+    padding: theme.spacing(0)
+  }
+}));
+
+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'
+  }
+}));
 
 type Props = Pick<
   ListingProps<unknown>,
@@ -31,10 +76,14 @@ type Props = Pick<
   | 'totalRows'
 > & {
   areColumnsEditable: boolean;
-  listingVariant?: ListingVariant;
   memoProps: Array<unknown>;
+  onSelectAllClick: (event) => void;
+  onSelectRowsWithCondition: (condition) => void;
+  predefinedRowsSelection: Array<PredefinedRowSelection>;
   rowCount: number;
-} & SelectActionListingHeaderCellProps;
+  selectedRowCount: number;
+  viewMode?: ListingVariant;
+};
 
 interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
   attributes;
@@ -47,21 +96,21 @@ interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
 }
 
 const ListingHeader = ({
+  onSelectAllClick,
   sortOrder,
   sortField,
+  selectedRowCount,
   rowCount,
   columns,
   columnConfiguration,
   onSort,
   onSelectColumns,
   checkable,
+  predefinedRowsSelection,
+  onSelectRowsWithCondition,
   memoProps,
   areColumnsEditable,
-  listingVariant,
-  onSelectAllClick,
-  selectedRowCount,
-  predefinedRowsSelection,
-  onSelectRowsWithCondition
+  viewMode
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
 
@@ -71,7 +120,7 @@ const ListingHeader = ({
   });
 
   const getColumnById = (id: string): Column => {
-    return find(propEq(id, 'id'), columns) as Column;
+    return find(propEq('id', id), columns) as Column;
   };
 
   const Content = React.useCallback(
@@ -85,17 +134,17 @@ const ListingHeader = ({
       id
     }: ContentProps): JSX.Element => {
       return (
-        <ListingHeaderCell
+        <SortableHeaderCellContent
           areColumnsEditable={areColumnsEditable}
           column={getColumnById(id)}
           columnConfiguration={columnConfiguration}
           isDragging={isDragging}
           isInDragOverlay={isInDragOverlay}
           itemRef={itemRef}
-          listingVariant={listingVariant}
           sortField={sortField}
           sortOrder={sortOrder}
           style={style}
+          viewMode={viewMode}
           onSort={onSort}
           {...listeners}
           {...attributes}
@@ -105,17 +154,45 @@ 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 && (
-          <SelectActionListingHeaderCell
-            predefinedRowsSelection={predefinedRowsSelection}
-            rowCount={rowCount}
-            selectedRowCount={selectedRowCount}
-            onSelectAllClick={onSelectAllClick}
-            onSelectRowsWithCondition={onSelectRowsWithCondition}
-          />
+          <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>
         )}
         <SortableItems
           updateSortableItemsOnItemsChange
@@ -140,7 +217,6 @@ const columnMemoProps = [
   'label',
   'rowMemoProps',
   'sortField',
-  'sortOrder',
   'sortable',
   'type'
 ];
@@ -160,7 +236,8 @@ const MemoizedListingHeader = React.memo<Props>(
     equals(prevProps.columnConfiguration, nextProps.columnConfiguration) &&
     equals(prevProps.memoProps, nextProps.memoProps) &&
     equals(prevProps.areColumnsEditable, nextProps.areColumnsEditable) &&
-    equals(prevProps.listingVariant, nextProps.listingVariant)
+    equals(prevProps.viewMode, nextProps.viewMode)
 );
 
-export { MemoizedListingHeader as ListingHeader };
+export default MemoizedListingHeader;
+export { height as headerHeight, HeaderCell };

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

@@ -9,10 +9,12 @@ 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 '../index';
+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;
 
@@ -116,7 +117,7 @@ const Row = memo<RowProps>(
       isShiftKeyDown: prevIsShiftKeyDown,
       shiftKeyDownRowPivot: prevShiftKeyDownRowPivot,
       lastSelectionIndex: prevLastSelectionIndex,
-      listingVariant: prevViewMode
+      viewMode: prevViewMode
     } = prevProps;
     const {
       row: nextRow,
@@ -127,7 +128,7 @@ const Row = memo<RowProps>(
       shiftKeyDownRowPivot: nextShiftKeyDownRowPivot,
       lastSelectionIndex: nextLastSelectionIndex,
       limit: nextLimit,
-      listingVariant: nextViewMode
+      viewMode: nextViewMode
     } = nextProps;
 
     if (
@@ -175,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)
       );
     }
 
@@ -191,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({
@@ -214,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
 };