@centreon/ui 24.4.1-sync-release-34022.0 → 24.4.1-test-code-coverage.0

package/src/Listing/index.tsx

@@ -18,7 +18,6 @@ import {
   map,
   not,
   pick,
-  pluck,
   prop,
   propEq,
   reduce,
@@ -58,6 +57,8 @@ import { SkeletonLoader } from './Row/SkeletonLoaderRows';
 import { ListingHeader } from './Header';
 import { subItemsPivotsAtom } from './tableAtoms';
 
+const subItemPrefixKey = 'listing';
+
 const getVisibleColumns = ({
   columnConfiguration,
   columns
@@ -93,13 +94,16 @@ export interface Props<TRow> {
   columnConfiguration?: ColumnConfiguration;
   columns: Array<Column>;
   currentPage?: number;
+  customListingComponent?: JSX.Element;
   customPaginationClassName?: string;
   disableRowCheckCondition?: (row) => boolean;
   disableRowCondition?: (row) => boolean;
+  displayCustomListing?: boolean;
   getHighlightRowCondition?: (row: TRow) => boolean;
   getId?: (row: TRow) => RowId;
   headerMemoProps?: Array<unknown>;
   innerScrollDisabled?: boolean;
+  isResponsive?: boolean;
   limit?: number;
   listingVariant?: ListingVariant;
   loading?: boolean;
@@ -137,12 +141,15 @@ const defaultColumnConfiguration = {
 
 export const performanceRowsLimit = 60;
 
-const Listing = <TRow extends { id: RowId }>({
+const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
+  customListingComponent,
+  displayCustomListing,
   limit = 10,
   visualizationActions,
   columns,
   columnConfiguration = defaultColumnConfiguration,
   customPaginationClassName,
+  isResponsive = false,
   onResetColumns,
   onSelectColumns,
   rows = [],
@@ -205,6 +212,21 @@ const Listing = <TRow extends { id: RowId }>({
 
   const subItemsPivots = useAtomValue(subItemsPivotsAtom);
 
+  const allSubItemIds = React.useMemo(
+    () =>
+      reduce<TRow | number, Array<string | number>>(
+        (acc, row) => [
+          ...acc,
+          ...(row[subItems?.getRowProperty() || ''] || []).map(
+            ({ id }) => `${subItemPrefixKey}_${getId(row)}_${id}`
+          )
+        ],
+        [],
+        rows
+      ),
+    [rows, subItems]
+  );
+
   const rowsToDisplay = React.useMemo(
     () =>
       subItems?.enable
@@ -214,7 +236,14 @@ const Listing = <TRow extends { id: RowId }>({
                 row[subItems.getRowProperty()] &&
                 subItemsPivots.includes(row.id)
               ) {
-                return [...acc, row, ...row[subItems.getRowProperty()]];
+                return [
+                  ...acc,
+                  row,
+                  ...row[subItems.getRowProperty()].map((subRow) => ({
+                    ...subRow,
+                    internalListingParentId: row.id
+                  }))
+                ];
               }
 
               return [...acc, row];
@@ -226,10 +255,28 @@ const Listing = <TRow extends { id: RowId }>({
     [rows, subItemsPivots, subItems]
   );
 
+  const getSubItemRowId = React.useCallback((row: TRow) => {
+    return `${subItemPrefixKey}_${row.internalListingParentId}_${row.id}`;
+  }, []);
+
+  const getIsSubItem = React.useCallback(
+    (row: TRow) => {
+      return allSubItemIds.includes(getSubItemRowId(row));
+    },
+    [allSubItemIds]
+  );
+
+  const getRowId = React.useCallback(
+    (row: TRow) => {
+      return getIsSubItem(row) ? getSubItemRowId(row) : getId(row);
+    },
+    [allSubItemIds]
+  );
+
   const { classes } = useListingStyles({
     dataStyle,
     getGridTemplateColumn,
-    listingVariant,
+    isResponsive,
     rows: rowsToDisplay
   });
 
@@ -249,7 +296,7 @@ const Listing = <TRow extends { id: RowId }>({
       event.target.checked &&
       event.target.getAttribute('data-indeterminate') === 'false'
     ) {
-      onSelectRows(reject(disableRowCheckCondition, rows));
+      onSelectRows(reject(disableRowCheckCondition, rowsToDisplay));
       setLastSelectionIndex(null);
 
       return;
@@ -321,7 +368,11 @@ const Listing = <TRow extends { id: RowId }>({
   const selectRowsWithShiftKey = (selectedRowIndex: number): void => {
     const lastSelectedIndex = lastSelectionIndex as number;
     if (isNil(shiftKeyDownRowPivot)) {
-      const selectedRowsFromTheStart = slice(0, selectedRowIndex + 1, rows);
+      const selectedRowsFromTheStart = slice(
+        0,
+        selectedRowIndex + 1,
+        rowsToDisplay
+      );
 
       onSelectRows(reject(disableRowCheckCondition, selectedRowsFromTheStart));
 
@@ -330,7 +381,10 @@ const Listing = <TRow extends { id: RowId }>({
 
     const selectedRowsIndex = map(
       (row) =>
-        findIndex((listingRow) => equals(getId(row), getId(listingRow)), rows),
+        findIndex(
+          (listingRow) => equals(getId(row), getId(listingRow)),
+          rowsToDisplay
+        ),
       selectedRows
     ).sort(subtract);
 
@@ -338,7 +392,7 @@ const Listing = <TRow extends { id: RowId }>({
       const newSelection = slice(
         selectedRowIndex,
         (lastSelectionIndex as number) + 1,
-        rows
+        rowsToDisplay
       );
       onSelectRows(
         reject(
@@ -357,7 +411,11 @@ const Listing = <TRow extends { id: RowId }>({
       return;
     }
 
-    const newSelection = slice(lastSelectedIndex, selectedRowIndex + 1, rows);
+    const newSelection = slice(
+      lastSelectedIndex,
+      selectedRowIndex + 1,
+      rowsToDisplay
+    );
     onSelectRows(
       reject(
         disableRowCheckCondition,
@@ -381,7 +439,7 @@ const Listing = <TRow extends { id: RowId }>({
 
     const selectedRowIndex = findIndex(
       (listingRow) => equals(getId(row), getId(listingRow)),
-      rows
+      rowsToDisplay
     );
 
     if (isShiftKeyDown) {
@@ -408,10 +466,10 @@ const Listing = <TRow extends { id: RowId }>({
   };
 
   const hoverRow = (row): void => {
-    if (equals(hoveredRowId, getId(row))) {
+    if (equals(hoveredRowId, getRowId(row))) {
       return;
     }
-    setHoveredRowId(getId(row));
+    setHoveredRowId(getRowId(row));
   };
 
   const clearHoveredRow = (): void => {
@@ -422,8 +480,6 @@ const Listing = <TRow extends { id: RowId }>({
     return selectedRowsInclude(row);
   };
 
-  const emptyRows = limit - Math.min(limit, totalRows - currentPage * limit);
-
   const changeLimit = (updatedLimit: string): void => {
     onLimitChange?.(Number(updatedLimit));
   };
@@ -444,19 +500,6 @@ const Listing = <TRow extends { id: RowId }>({
 
   const areColumnsEditable = not(isNil(onSelectColumns));
 
-  const allSubItemIds = React.useMemo(
-    () =>
-      reduce<TRow | number, Array<string | number>>(
-        (acc, row) => [
-          ...acc,
-          ...pluck('id', row[subItems?.getRowProperty() || ''] || [])
-        ],
-        [],
-        rows
-      ),
-    [rows, subItems]
-  );
-
   return (
     <div className={classes.listingContainer}>
       {loading && rows.length > 0 && (
@@ -494,6 +537,7 @@ const Listing = <TRow extends { id: RowId }>({
             onSelectColumns={onSelectColumns}
           />
         </div>
+
         <ParentSize
           parentSizeStyles={{
             height: '100%',
@@ -509,132 +553,147 @@ const Listing = <TRow extends { id: RowId }>({
                 height: innerScrollDisabled ? '100%' : `calc(${height}px - 4px)`
               }}
             >
-              <Table
-                stickyHeader
-                className={classes.table}
-                component="div"
-                role={undefined}
-                size="small"
-              >
-                <ListingHeader
-                  areColumnsEditable={areColumnsEditable}
-                  checkable={checkable}
-                  columnConfiguration={columnConfiguration}
-                  columns={columns}
-                  listingVariant={listingVariant}
-                  memoProps={headerMemoProps}
-                  predefinedRowsSelection={predefinedRowsSelection}
-                  rowCount={limit - emptyRows}
-                  selectedRowCount={selectedRows.length}
-                  sortField={sortField}
-                  sortOrder={sortOrder}
-                  onSelectAllClick={selectAllRows}
-                  onSelectColumns={onSelectColumns}
-                  onSelectRowsWithCondition={onSelectRowsWithCondition}
-                  onSort={onSort}
-                />
-
-                <TableBody
-                  className={classes.tableBody}
+              {displayCustomListing ? (
+                customListingComponent
+              ) : (
+                <Table
+                  stickyHeader
+                  className={classes.table}
                   component="div"
-                  onMouseLeave={clearHoveredRow}
+                  role={undefined}
+                  size="small"
                 >
-                  {rowsToDisplay.map((row, index) => {
-                    const isRowSelected = isSelected(row);
-                    const isRowHovered = equals(hoveredRowId, getId(row));
-                    const isSubItem = allSubItemIds.includes(row.id);
-
-                    return (
-                      <ListingRow
-                        checkable={
-                          checkable && (!isSubItem || subItems.canCheckSubItems)
-                        }
-                        columnConfiguration={columnConfiguration}
-                        columnIds={columns.map(prop('id'))}
-                        disableRowCondition={disableRowCondition}
-                        isHovered={isRowHovered}
-                        isSelected={isRowSelected}
-                        isShiftKeyDown={isShiftKeyDown}
-                        key={
-                          gte(limit, performanceRowsLimit)
-                            ? `row_${index}`
-                            : getId(row)
-                        }
-                        lastSelectionIndex={lastSelectionIndex}
-                        limit={limit}
-                        listingVariant={listingVariant}
-                        row={row}
-                        rowColorConditions={rowColorConditions}
-                        shiftKeyDownRowPivot={shiftKeyDownRowPivot}
-                        subItemsPivots={subItemsPivots}
-                        tabIndex={-1}
-                        visibleColumns={visibleColumns}
-                        onClick={(): void => {
-                          onRowClick(row);
-                        }}
-                        onFocus={(): void => hoverRow(row)}
-                        onMouseOver={(): void => hoverRow(row)}
-                      >
-                        {checkable &&
-                          (!isSubItem || subItems.canCheckSubItems ? (
-                            <Cell
-                              align="left"
-                              className={classes.checkbox}
-                              disableRowCondition={disableRowCondition}
-                              isRowHovered={isRowHovered}
-                              row={row}
-                              rowColorConditions={rowColorConditions}
-                              onClick={(event): void => selectRow(event, row)}
-                            >
-                              <Checkbox
-                                checked={isRowSelected}
-                                disabled={
-                                  disableRowCheckCondition(row) ||
-                                  disableRowCondition(row)
+                  <ListingHeader
+                    areColumnsEditable={areColumnsEditable}
+                    checkable={checkable}
+                    columnConfiguration={columnConfiguration}
+                    columns={columns}
+                    listingVariant={listingVariant}
+                    memoProps={headerMemoProps}
+                    predefinedRowsSelection={predefinedRowsSelection}
+                    rowCount={rowsToDisplay.length}
+                    selectedRowCount={selectedRows.length}
+                    sortField={sortField}
+                    sortOrder={sortOrder}
+                    onSelectAllClick={selectAllRows}
+                    onSelectColumns={onSelectColumns}
+                    onSelectRowsWithCondition={onSelectRowsWithCondition}
+                    onSort={onSort}
+                  />
+
+                  <TableBody
+                    className={classes.tableBody}
+                    component="div"
+                    onMouseLeave={clearHoveredRow}
+                  >
+                    {rowsToDisplay.map((row, index) => {
+                      const isRowSelected = isSelected(row);
+                      const isSubItem = allSubItemIds.includes(
+                        getSubItemRowId(row)
+                      );
+                      const isRowHovered = equals(hoveredRowId, getRowId(row));
+
+                      return (
+                        <ListingRow
+                          checkable={
+                            checkable &&
+                            (!isSubItem || subItems.canCheckSubItems)
+                          }
+                          columnConfiguration={columnConfiguration}
+                          columnIds={columns.map(prop('id'))}
+                          disableRowCondition={disableRowCondition}
+                          isHovered={isRowHovered}
+                          isSelected={isRowSelected}
+                          isShiftKeyDown={isShiftKeyDown}
+                          key={
+                            gte(limit, performanceRowsLimit)
+                              ? `row_${index}`
+                              : getRowId(row)
+                          }
+                          lastSelectionIndex={lastSelectionIndex}
+                          limit={limit}
+                          listingVariant={listingVariant}
+                          row={row}
+                          rowColorConditions={rowColorConditions}
+                          shiftKeyDownRowPivot={shiftKeyDownRowPivot}
+                          subItemsPivots={subItemsPivots}
+                          tabIndex={-1}
+                          visibleColumns={visibleColumns}
+                          onClick={
+                            isSubItem
+                              ? undefined
+                              : (): void => {
+                                  onRowClick(row);
                                 }
-                                inputProps={{
-                                  'aria-label': `Select row ${getId(row)}`
-                                }}
+                          }
+                          onFocus={(): void => hoverRow(row)}
+                          onMouseOver={(): void => hoverRow(row)}
+                        >
+                          {checkable &&
+                            (!isSubItem || subItems.canCheckSubItems ? (
+                              <Cell
+                                align="left"
+                                className={classes.checkbox}
+                                disableRowCondition={disableRowCondition}
+                                isRowHovered={isRowHovered}
+                                row={row}
+                                rowColorConditions={rowColorConditions}
+                                onClick={(event): void => selectRow(event, row)}
+                              >
+                                <Checkbox
+                                  checked={isRowSelected}
+                                  disabled={
+                                    disableRowCheckCondition(row) ||
+                                    disableRowCondition(row)
+                                  }
+                                  inputProps={{
+                                    'aria-label': `Select row ${getId(row)}`
+                                  }}
+                                />
+                              </Cell>
+                            ) : (
+                              <Cell
+                                align="left"
+                                disableRowCondition={disableRowCondition}
+                                isRowHovered={isRowHovered}
+                                row={row}
+                                rowColorConditions={rowColorConditions}
                               />
-                            </Cell>
-                          ) : (
-                            <Cell
-                              align="left"
+                            ))}
+
+                          {visibleColumns.map((column) => (
+                            <DataCell
+                              column={column}
                               disableRowCondition={disableRowCondition}
+                              getHighlightRowCondition={
+                                getHighlightRowCondition
+                              }
                               isRowHovered={isRowHovered}
+                              isRowSelected={isRowSelected}
+                              key={`${getId(row)}-${column.id}`}
+                              labelCollapse={subItems.labelCollapse}
+                              labelExpand={subItems.labelExpand}
+                              listingVariant={listingVariant}
                               row={row}
                               rowColorConditions={rowColorConditions}
+                              subItemsRowProperty={subItems?.getRowProperty(
+                                row
+                              )}
                             />
                           ))}
-
-                        {visibleColumns.map((column) => (
-                          <DataCell
-                            column={column}
-                            disableRowCondition={disableRowCondition}
-                            getHighlightRowCondition={getHighlightRowCondition}
-                            isRowHovered={isRowHovered}
-                            isRowSelected={isRowSelected}
-                            key={`${getId(row)}-${column.id}`}
-                            labelCollapse={subItems.labelCollapse}
-                            labelExpand={subItems.labelExpand}
-                            listingVariant={listingVariant}
-                            row={row}
-                            rowColorConditions={rowColorConditions}
-                            subItemsRowProperty={subItems?.getRowProperty(row)}
-                          />
-                        ))}
-                      </ListingRow>
-                    );
-                  })}
-
-                  {rows.length < 1 &&
-                    (loading ? (
-                      <SkeletonLoader rows={limit} />
-                    ) : (
-                      <EmptyResult label={t(labelNoResultFound)} />
-                    ))}
-                </TableBody>
-              </Table>
+                        </ListingRow>
+                      );
+                    })}
+
+                    {rows.length < 1 &&
+                      (loading ? (
+                        <SkeletonLoader rows={limit} />
+                      ) : (
+                        <EmptyResult label={t(labelNoResultFound)} />
+                      ))}
+                  </TableBody>
+                </Table>
+              )}
             </Box>
           )}
         </ParentSize>

package/src/Listing/models.ts

@@ -15,6 +15,7 @@ export interface ComponentColumnProps {
 
 export interface Column {
   Component?: (props: ComponentColumnProps) => JSX.Element | null;
+  align?: 'start' | 'end' | 'center';
   clickable?: boolean;
   compact?: boolean;
   disablePadding?: boolean;

package/src/Listing/useStyleTable.ts

@@ -53,6 +53,7 @@ const useStyleTable = ({
     const checkbox = checkable ? 'fit-content(1rem) ' : ''; // SelectAction (checkbox) cell adjusts to content
 
     const columnTemplate = currentVisibleColumns
+      ?.filter((column) => column)
       ?.map(({ width, shortLabel }) => {
         if (!isNil(shortLabel)) {
           return 'min-content';

package/src/Panel/index.tsx

@@ -9,7 +9,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Paper, Slide, Divider, AppBar, Tabs } from '@mui/material';
 import IconClose from '@mui/icons-material/Clear';
 
-import IconButton from '../Button/Icon';
+import { IconButton } from '..';
 
 import { minTabHeight } from './Tab';
 

package/src/PopoverMenu/index.tsx

@@ -6,14 +6,16 @@ import {
   ClickAwayListener,
   Paper,
   Popper,
-  PopperPlacementType,
-  useTheme
+  PopperPlacementType
 } from '@mui/material';
 import { PopperProps } from '@mui/material/Popper';
 
 import { IconButton } from '..';
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()((theme) => ({
+  popover: {
+    zIndex: theme.zIndex.tooltip
+  },
   popoverIconButton: {
     padding: 0,
     width: '100%'
@@ -52,7 +54,6 @@ const PopoverMenu = ({
   getPopoverData,
   popperProps
 }: Props): JSX.Element => {
-  const theme = useTheme();
   const { classes, cx } = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>();
   const isOpen = Boolean(anchorEl);
@@ -105,9 +106,9 @@ const PopoverMenu = ({
           <Popper
             open
             anchorEl={anchorEl}
+            className={classes.popover}
             nonce={undefined}
             placement={popperPlacement}
-            style={{ zIndex: theme.zIndex.tooltip }}
             onResize={(): undefined => undefined}
             onResizeCapture={(): undefined => undefined}
             {...popperProps}

package/src/ThemeProvider/index.tsx

@@ -184,6 +184,9 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
         }
+        #root {
+          background-color: ${theme.palette.background.paper};
+        }
         @font-face {
           font-family: 'Roboto';
           font-style: normal;

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.styles.ts

@@ -12,22 +12,21 @@ const useStyles = makeStyles()((theme) => ({
   },
   containerDates: {
     display: 'flex',
-    gap: theme.spacing(0.5),
     [theme.breakpoints.down('sm')]: {
-      columnGap: theme.spacing(0.5),
-      flexDirection: 'column'
+      flexDirection: 'column',
+      gap: theme.spacing(0.5)
     }
   },
   date: {
-    minWidth: theme.spacing(12.5),
+    minWidth: theme.spacing(12),
     textAlign: 'start'
   },
   error: {
     textAlign: 'center'
   },
   label: {
-    minWidth: theme.spacing(3),
-    textAlign: 'start'
+    minWidth: theme.spacing(3.5),
+    textAlign: 'end'
   },
 
   picker: {
@@ -39,7 +38,7 @@ const useStyles = makeStyles()((theme) => ({
   },
   timeContainer: {
     alignItems: 'center',
-    columnGap: theme.spacing(1),
+    columnGap: theme.spacing(0.5),
     display: 'flex',
     flexDirection: 'row',
     [theme.breakpoints.down('sm')]: {

package/src/TimePeriods/ResolutionTimePeriod.cypress.spec.tsx

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import 'dayjs/locale/fr';
+import 'dayjs/locale/en';
 import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
@@ -19,18 +19,18 @@ dayjs.extend(localizedFormatPlugin);
 
 const data = [
   {
-    locale: 'fr_FR',
-    resolution: { height: 720, width: 500 },
+    locale: 'en_US',
+    resolution: { height: 590, width: 500 },
     timezone: 'Europe/Paris'
   },
   {
-    locale: 'fr_FR',
-    resolution: { height: 720, width: 200 },
+    locale: 'en_US',
+    resolution: { height: 590, width: 200 },
     timezone: 'Europe/Paris'
   },
   {
-    locale: 'fr_FR',
-    resolution: { height: 720, width: 1024 },
+    locale: 'en_US',
+    resolution: { height: 590, width: 1024 },
     timezone: 'Europe/Paris'
   }
 ];
@@ -45,7 +45,7 @@ data.forEach((item) =>
 
       store.set(userAtom, {
         ...retrievedUser,
-        locale: 'fr_FR',
+        locale: 'en_US',
         timezone: 'Europe/Paris'
       });
 
@@ -59,7 +59,10 @@ data.forEach((item) =>
     });
 
     it(`displays correctly the dates design when screen resolution is ${width}px`, () => {
-      cy.makeSnapshot(`${width}px`);
+      cy.makeSnapshotWithCustomResolution({
+        resolution: { height, width },
+        title: `${width}px`
+      });
     });
   })
 );