@centreon/ui 23.10.91 → 23.10.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.91",
+  "version": "23.10.92",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Listing/Listing.cypress.spec.tsx

@@ -67,21 +67,23 @@ const mountListing = (): void => {
 
   cy.mount({
     Component: (
-      <Listing
-        checkable
-        columns={columnsWithSubItems}
-        currentPage={1}
-        limit={10}
-        rows={listingWithSubItems}
-        subItems={{
-          canCheckSubItems: false,
-          enable: true,
-          labelCollapse: 'Collapse',
-          labelExpand: 'Expand',
-          rowProperty: 'subItems'
-        }}
-        totalRows={10}
-      />
+      <div style={{ height: '100vh' }}>
+        <Listing
+          checkable
+          columns={columnsWithSubItems}
+          currentPage={1}
+          limit={10}
+          rows={listingWithSubItems}
+          subItems={{
+            canCheckSubItems: false,
+            enable: true,
+            labelCollapse: 'Collapse',
+            labelExpand: 'Expand',
+            rowProperty: 'subItems'
+          }}
+          totalRows={10}
+        />
+      </div>
     )
   });
 };

package/src/Listing/Listing.styles.ts

@@ -30,6 +30,11 @@ const useListingStyles = makeStyles<StylesProps>()(
       height: '100%',
       width: '100%'
     },
+    listingContainer: {
+      height: '100%',
+      overflow: 'hidden',
+      width: '100%'
+    },
     loadingIndicator: {
       height: loadingIndicatorHeight,
       width: '100%'

package/src/Listing/index.stories.tsx

@@ -34,7 +34,8 @@ type Story = StoryObj<typeof Listing>;
 
 const useStyles = makeStyles()((theme) => ({
   listing: {
-    backgroundColor: theme.palette.background.default
+    backgroundColor: theme.palette.background.default,
+    height: '100vh'
   }
 }));
 

package/src/Listing/index.tsx

@@ -35,12 +35,12 @@ import { Box, LinearProgress, Table, TableBody } from '@mui/material';
 import { ListingVariant } from '@centreon/ui-context';
 
 import { useKeyObserver, useMemoComponent } from '../utils';
+import { ParentSize } from '..';
 
 import ListingActionBar from './ActionBar';
 import Cell from './Cell';
 import DataCell from './Cell/DataCell';
 import Checkbox from './Checkbox';
-import getCumulativeOffset from './getCumulativeOffset';
 import {
   Column,
   ColumnConfiguration,
@@ -51,9 +51,8 @@ import {
 } from './models';
 import ListingRow from './Row/Row';
 import { labelNoResultFound } from './translatedLabels';
-import useResizeObserver from './useResizeObserver';
 import useStyleTable from './useStyleTable';
-import { loadingIndicatorHeight, useListingStyles } from './Listing.styles';
+import { useListingStyles } from './Listing.styles';
 import { EmptyResult } from './EmptyResult/EmptyResult';
 import { SkeletonLoader } from './Row/SkeletonLoaderRows';
 import { ListingHeader } from './Header';
@@ -194,7 +193,6 @@ const Listing = <TRow extends { id: RowId }>({
 
   const { t } = useTranslation();
 
-  const [tableTopOffset, setTableTopOffset] = React.useState(0);
   const [hoveredRowId, setHoveredRowId] = React.useState<RowId | null>(null);
   const [shiftKeyDownRowPivot, setShiftKeyDownRowPivot] = React.useState<
     number | null
@@ -228,7 +226,7 @@ const Listing = <TRow extends { id: RowId }>({
     [rows, subItemsPivots, subItems]
   );
 
-  const { classes, theme } = useListingStyles({
+  const { classes } = useListingStyles({
     dataStyle,
     getGridTemplateColumn,
     limit,
@@ -236,13 +234,6 @@ const Listing = <TRow extends { id: RowId }>({
     rows: rowsToDisplay
   });
 
-  useResizeObserver({
-    onResize: () => {
-      setTableTopOffset(getCumulativeOffset(containerRef.current));
-    },
-    ref: containerRef
-  });
-
   const { isShiftKeyDown } = useKeyObserver();
 
   const haveSameId = (row: TRow, rowToCompare: TRow): boolean =>
@@ -434,18 +425,6 @@ const Listing = <TRow extends { id: RowId }>({
 
   const emptyRows = limit - Math.min(limit, totalRows - currentPage * limit);
 
-  const tableMaxHeight = (): string => {
-    if (innerScrollDisabled) {
-      return '100%';
-    }
-
-    return `calc(100vh - ${tableTopOffset}px - ${
-      actionBarRef.current?.offsetHeight
-    }px - ${
-      dataStyle.header.height
-    }px - ${loadingIndicatorHeight}px - ${theme.spacing(1)})`;
-  };
-
   const changeLimit = (updatedLimit: string): void => {
     onLimitChange?.(Number(updatedLimit));
   };
@@ -480,7 +459,7 @@ const Listing = <TRow extends { id: RowId }>({
   );
 
   return (
-    <>
+    <div className={classes.listingContainer}>
       {loading && rows.length > 0 && (
         <LinearProgress className={classes.loadingIndicator} />
       )}
@@ -516,142 +495,152 @@ const Listing = <TRow extends { id: RowId }>({
             onSelectColumns={onSelectColumns}
           />
         </div>
-        <Box
-          className={classes.tableWrapper}
-          component="div"
-          style={{
-            maxHeight: tableMaxHeight()
+        <ParentSize
+          parentSizeStyles={{
+            height: '100%',
+            overflowY: 'auto',
+            width: '100%'
           }}
         >
-          <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}
+          {({ height }) => (
+            <Box
+              className={classes.tableWrapper}
               component="div"
-              onMouseLeave={clearHoveredRow}
+              style={{
+                height: innerScrollDisabled ? '100%' : `calc(${height}px - 4px)`
+              }}
             >
-              {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)
-                            }
-                            inputProps={{
-                              'aria-label': `Select row ${getId(row)}`
-                            }}
-                          />
-                        </Cell>
-                      ) : (
-                        <Cell
-                          align="left"
-                          disableRowCondition={disableRowCondition}
-                          isRowHovered={isRowHovered}
-                          row={row}
-                          rowColorConditions={rowColorConditions}
-                        />
-                      ))}
-
-                    {visibleColumns.map((column) => (
-                      <DataCell
-                        column={column}
+              <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}
+                  component="div"
+                  onMouseLeave={clearHoveredRow}
+                >
+                  {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}
-                        getHighlightRowCondition={getHighlightRowCondition}
-                        isRowHovered={isRowHovered}
-                        isRowSelected={isRowSelected}
-                        key={`${getId(row)}-${column.id}`}
-                        labelCollapse={subItems.labelCollapse}
-                        labelExpand={subItems.labelExpand}
+                        isHovered={isRowHovered}
+                        isSelected={isRowSelected}
+                        isShiftKeyDown={isShiftKeyDown}
+                        key={
+                          gte(limit, performanceRowsLimit)
+                            ? `row_${index}`
+                            : getId(row)
+                        }
+                        lastSelectionIndex={lastSelectionIndex}
+                        limit={limit}
                         listingVariant={listingVariant}
                         row={row}
                         rowColorConditions={rowColorConditions}
-                        subItemsRowProperty={subItems?.rowProperty}
-                      />
+                        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)
+                                }
+                                inputProps={{
+                                  'aria-label': `Select row ${getId(row)}`
+                                }}
+                              />
+                            </Cell>
+                          ) : (
+                            <Cell
+                              align="left"
+                              disableRowCondition={disableRowCondition}
+                              isRowHovered={isRowHovered}
+                              row={row}
+                              rowColorConditions={rowColorConditions}
+                            />
+                          ))}
+
+                        {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?.rowProperty}
+                          />
+                        ))}
+                      </ListingRow>
+                    );
+                  })}
+
+                  {rows.length < 1 &&
+                    (loading ? (
+                      <SkeletonLoader rows={limit} />
+                    ) : (
+                      <EmptyResult label={t(labelNoResultFound)} />
                     ))}
-                  </ListingRow>
-                );
-              })}
-
-              {rows.length < 1 &&
-                (loading ? (
-                  <SkeletonLoader rows={limit} />
-                ) : (
-                  <EmptyResult label={t(labelNoResultFound)} />
-                ))}
-            </TableBody>
-          </Table>
-        </Box>
+                </TableBody>
+              </Table>
+            </Box>
+          )}
+        </ParentSize>
       </div>
-    </>
+    </div>
   );
 };
 

package/src/ListingPage/index.stories.tsx

@@ -14,7 +14,7 @@ import Panel from '../Panel';
 
 import Filter from './Filter';
 
-import ListingPage from '.';
+import ListingPage, { ListingPageProps } from '.';
 
 export default { title: 'Listing Page' };
 
@@ -59,6 +59,9 @@ const useStyles = makeStyles()((theme) => ({
     gridGap: theme.spacing(2),
     gridTemplateColumns: 'auto auto 1fr'
   },
+  page: {
+    height: '100vh'
+  },
   title: {
     alignItems: 'center',
     gridArea: 'title',
@@ -251,8 +254,18 @@ const DetailsPanelWithTabs = (): JSX.Element => (
   />
 );
 
+const Template = (args: ListingPageProps): JSX.Element => {
+  const { classes } = useStyles();
+
+  return (
+    <div className={classes.page}>
+      <ListingPage {...args} />
+    </div>
+  );
+};
+
 export const normal = (): JSX.Element => (
-  <ListingPage
+  <Template
     filter={<FilterWithContent />}
     listing={listing}
     panelOpen={false}
@@ -260,7 +273,7 @@ export const normal = (): JSX.Element => (
 );
 
 export const withOpenPanel = (): JSX.Element => (
-  <ListingPage
+  <Template
     panelOpen
     filter={<FilterWithContent />}
     listing={listing}
@@ -269,7 +282,7 @@ export const withOpenPanel = (): JSX.Element => (
 );
 
 export const withOpenPanelAndTabs = (): JSX.Element => (
-  <ListingPage
+  <Template
     panelOpen
     filter={<FilterWithContent />}
     listing={listing}
@@ -278,7 +291,7 @@ export const withOpenPanelAndTabs = (): JSX.Element => (
 );
 
 export const withFilterDetailsAndOpenPanel = (): JSX.Element => (
-  <ListingPage
+  <Template
     panelOpen
     filter={<FilterWithContent />}
     listing={listing}
@@ -290,7 +303,7 @@ export const withFixedPanel = (): JSX.Element => {
   const [open, setOpen] = useState(true);
 
   return (
-    <ListingPage
+    <Template
       panelFixed
       filter={<FilterWithOpenButton onOpen={(): void => setOpen(true)} />}
       listing={listing}
@@ -304,7 +317,7 @@ export const withResponsivePaginationTable = (): JSX.Element => {
   const [open, setOpen] = useState(true);
 
   return (
-    <ListingPage
+    <Template
       filter={<FilterWithOpenButton onOpen={(): void => setOpen(true)} />}
       listing={
         <Listing
@@ -326,7 +339,7 @@ export const withResponsivePaginationTable = (): JSX.Element => {
 };
 
 export const withALongContent = (): JSX.Element => (
-  <ListingPage
+  <Template
     filter={<FilterWithContent />}
     listing={
       <div>

package/src/ListingPage/index.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useEffect, useRef, useState } from 'react';
+import { Suspense, useRef } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
@@ -6,6 +6,7 @@ import { Box } from '@mui/material';
 
 import { useMemoComponent } from '../utils';
 import WithPanel from '../Panel/WithPanel';
+import { ParentSize } from '..';
 
 import FilterSkeleton from './FilterSkeleton';
 import ListingSkeleton from './ListingSkeleton';
@@ -30,7 +31,7 @@ const useStyles = makeStyles()((theme) => {
   };
 });
 
-interface Props {
+export interface ListingPageProps {
   filter: JSX.Element;
   fullHeight?: boolean;
   listing: JSX.Element;
@@ -52,32 +53,10 @@ const ListingPage = ({
   listingScrollOffset = 16,
   fullHeight = false,
   memoListingProps = []
-}: Props): JSX.Element => {
+}: ListingPageProps): JSX.Element => {
   const { classes, cx } = useStyles();
-  const [listingHeight, setListingHeight] = useState(0);
-  const listingRef = useRef<HTMLDivElement | null>(null);
   const filtersRef = useRef<HTMLDivElement | null>(null);
 
-  const resize = (): void => {
-    setListingHeight(window.innerHeight);
-  };
-
-  useEffect(() => {
-    window.addEventListener('resize', resize);
-
-    setListingHeight(window.innerHeight);
-
-    return () => {
-      window.removeEventListener('resize', resize);
-    };
-  }, []);
-
-  const listingContainerHeight =
-    listingHeight -
-    (filtersRef.current?.getBoundingClientRect().height || 0) -
-    (filtersRef.current?.getBoundingClientRect().top || 0) -
-    listingScrollOffset;
-
   const memoListingComponent = useMemoComponent({
     Component: listing,
     memoProps: [...memoListingProps]
@@ -90,18 +69,21 @@ const ListingPage = ({
       </div>
 
       <WithPanel fixed={panelFixed} open={panelOpen} panel={panel}>
-        <Box
-          className={classes.listing}
-          ref={listingRef}
-          sx={{
-            ...(fullHeight && { height: '100%' }),
-            maxHeight: listingContainerHeight
-          }}
-        >
-          <Suspense fallback={<ListingSkeleton />}>
-            {memoListingComponent}
-          </Suspense>
-        </Box>
+        <ParentSize>
+          {({ height }) => (
+            <Box
+              className={classes.listing}
+              sx={{
+                height: `calc(${height}px - ${listingScrollOffset}px)`,
+                ...(fullHeight && { height: '100%' })
+              }}
+            >
+              <Suspense fallback={<ListingSkeleton />}>
+                {memoListingComponent}
+              </Suspense>
+            </Box>
+          )}
+        </ParentSize>
       </WithPanel>
     </div>
   );