@centreon/ui 23.10.36 → 23.10.37

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>,
@@ -32,9 +77,13 @@ 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;
@@ -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,
-  viewMode,
-  onSelectAllClick,
-  selectedRowCount,
-  predefinedRowsSelection,
-  onSelectRowsWithCondition
+  viewMode
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
 
@@ -85,7 +134,7 @@ const ListingHeader = ({
       id
     }: ContentProps): JSX.Element => {
       return (
-        <ListingHeaderCell
+        <SortableHeaderCellContent
           areColumnsEditable={areColumnsEditable}
           column={getColumnById(id)}
           columnConfiguration={columnConfiguration}
@@ -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'
 ];
@@ -163,4 +239,5 @@ const MemoizedListingHeader = React.memo<Props>(
     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 {

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,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import { useState } from 'react';
+import { React, 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, SortOrder } from './models';
+import { Column, ColumnType } from './models';
 
 import Listing from '.';
 
@@ -153,7 +153,7 @@ const Story = ({
         limit={listing.length}
         predefinedRowsSelection={predefinedRowsSelection}
         rowColorConditions={rowColorConditions}
-        rows={props.rows ?? listing}
+        rows={listing}
         selectedRows={selected}
         totalRows={listing.length}
         viewerModeConfiguration={viewerModeConfiguration}
@@ -191,10 +191,6 @@ 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
@@ -214,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
   },
   {
@@ -249,26 +243,6 @@ 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={{
@@ -276,17 +250,13 @@ 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 withEditableAndSortableColumns = (): JSX.Element => (
+export const withEditableColumns = (): 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 '../../test/testRenderer';
+import { render, fireEvent, within } from '../testRenderer';
 
 import { ColumnType } from './models';
 import { labelAddColumns } from './translatedLabels';

package/src/Listing/index.tsx

@@ -26,34 +26,42 @@ import {
   uniqBy
 } from 'ramda';
 import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
-import { Box, LinearProgress, Table, TableBody } from '@mui/material';
+import {
+  Box,
+  LinearProgress,
+  Table,
+  TableBody,
+  TableRow,
+  useTheme
+} from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
-import { useKeyObserver, useMemoComponent } from '../utils';
+import useKeyObserver from '../utils/useKeyObserver';
+import useMemoComponent from '../utils/useMemoComponent';
 
 import ListingActionBar from './ActionBar';
 import Cell from './Cell';
 import DataCell from './Cell/DataCell';
 import Checkbox from './Checkbox';
 import getCumulativeOffset from './getCumulativeOffset';
+import ListingHeader, { headerHeight } from './Header/index';
 import {
   Column,
   ColumnConfiguration,
   PredefinedRowSelection,
   RowColorCondition,
   RowId,
-  SortOrder
+  SortOrder,
+  TableStyleAtom as TableStyle
 } from './models';
-import ListingRow from './Row/Row';
+import ListingRow from './Row';
+import ListingLoadingSkeleton from './Skeleton';
 import { labelNoResultFound } from './translatedLabels';
 import useResizeObserver from './useResizeObserver';
 import useStyleTable from './useStyleTable';
-import { loadingIndicatorHeight, useStyles } from './Listing.styles';
-import { EmptyResult } from './EmptyResult/EmptyResult';
-import { SkeletonLoader } from './Row/SkeletonLoaderRows';
-import { ListingHeader } from './Header';
 
 const getVisibleColumns = ({
   columnConfiguration,
@@ -70,6 +78,88 @@ const getVisibleColumns = ({
   ) as Array<Column>;
 };
 
+const loadingIndicatorHeight = 3;
+
+interface StylesProps {
+  checkable: boolean;
+  currentVisibleColumns: Array<Column>;
+  dataStyle: TableStyle;
+  getGridTemplateColumn: string;
+  rows: Array<unknown>;
+  viewMode: ListingVariant;
+}
+
+const useStyles = makeStyles<StylesProps>()(
+  (
+    theme,
+    { dataStyle, getGridTemplateColumn, rows, checkable, currentVisibleColumns }
+  ) => ({
+    actionBar: {
+      alignItems: 'center',
+      display: 'flex'
+    },
+    checkbox: {
+      justifyContent: 'start'
+    },
+    container: {
+      background: 'none',
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      width: '100%'
+    },
+    emptyDataCell: {
+      flexDirection: 'column',
+      gridColumn: `auto / span ${
+        checkable
+          ? currentVisibleColumns.length + 1
+          : currentVisibleColumns.length
+      }`,
+      justifyContent: 'center'
+    },
+    emptyDataRow: {
+      display: 'contents'
+    },
+    loadingIndicator: {
+      height: loadingIndicatorHeight,
+      width: '100%'
+    },
+    table: {
+      '.listingHeader > div > div:first-of-type': {
+        paddingLeft: theme.spacing(1.5)
+      },
+      '.listingHeader div div': {
+        backgroundColor: theme.palette.background.listingHeader,
+        boxShadow: `-1px 0px 0px 0px ${theme.palette.background.listingHeader}`,
+        height: dataStyle.header.height,
+        padding: 0
+      },
+      alignItems: 'center',
+      display: 'grid',
+      gridTemplateColumns: getGridTemplateColumn,
+      gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
+        rows?.length
+      }, ${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'
+    }
+  })
+);
+
 interface CustomStyle {
   customStyleViewerModeContainer?: string;
   customStyleViewerModeIcon?: string;
@@ -106,7 +196,7 @@ export interface Props<TRow> {
   onRowClick?: (row: TRow) => void;
   onSelectColumns?: (selectedColumnIds: Array<string>) => void;
   onSelectRows?: (rows: Array<TRow>) => void;
-  onSort?: (sortParams: { sortField: string; sortOrder: SortOrder }) => void;
+  onSort?: (sortParams) => void;
   paginated?: boolean;
   predefinedRowsSelection?: Array<PredefinedRowSelection>;
   rowColorConditions?: Array<RowColorCondition>;
@@ -172,10 +262,11 @@ const Listing = <TRow extends { id: RowId }>({
     viewMode
   });
 
-  const { classes, theme } = useStyles({
+  const { classes } = useStyles({
+    checkable,
+    currentVisibleColumns,
     dataStyle,
     getGridTemplateColumn,
-    limit,
     rows,
     viewMode
   });
@@ -192,6 +283,8 @@ const Listing = <TRow extends { id: RowId }>({
   const containerRef = React.useRef<HTMLDivElement>();
   const actionBarRef = React.useRef<HTMLDivElement>();
 
+  const theme = useTheme();
+
   useResizeObserver({
     onResize: () => {
       setTableTopOffset(getCumulativeOffset(containerRef.current));
@@ -397,9 +490,9 @@ const Listing = <TRow extends { id: RowId }>({
 
     return `calc(100vh - ${tableTopOffset}px - ${
       actionBarRef.current?.offsetHeight
-    }px - ${
-      dataStyle.header.height
-    }px - ${loadingIndicatorHeight}px - ${theme.spacing(1)})`;
+    }px - ${headerHeight}px - ${loadingIndicatorHeight}px - ${theme.spacing(
+      1
+    )})`;
   };
 
   const changeLimit = (updatedLimit: string): void => {
@@ -553,6 +646,7 @@ const Listing = <TRow extends { id: RowId }>({
 
                     {visibleColumns.map((column) => (
                       <DataCell
+                        areColumnsEditable={areColumnsEditable}
                         column={column}
                         disableRowCondition={disableRowCondition}
                         getHighlightRowCondition={getHighlightRowCondition}
@@ -567,13 +661,26 @@ const Listing = <TRow extends { id: RowId }>({
                   </ListingRow>
                 );
               })}
-
-              {rows.length < 1 &&
-                (loading ? (
-                  <SkeletonLoader rows={limit} />
-                ) : (
-                  <EmptyResult label={t(labelNoResultFound)} />
-                ))}
+              {rows.length < 1 && (
+                <TableRow
+                  className={classes.emptyDataRow}
+                  component="div"
+                  tabIndex={-1}
+                >
+                  <Cell
+                    align="center"
+                    className={classes.emptyDataCell}
+                    disableRowCondition={(): boolean => false}
+                    isRowHovered={false}
+                  >
+                    {loading ? (
+                      <ListingLoadingSkeleton />
+                    ) : (
+                      t(labelNoResultFound)
+                    )}
+                  </Cell>
+                </TableRow>
+              )}
             </TableBody>
           </Table>
         </Box>

package/src/Listing/useStyleTable.ts

@@ -50,7 +50,7 @@ const useStyleTable = ({
   const updateStyleTable = useSetAtom(tableStyleDerivedAtom);
 
   const getGridTemplateColumn = (): string => {
-    const checkbox = checkable ? 'fit-content(1rem) ' : ''; // SelectAction (checkbox) cell adjusts to content
+    const checkbox = checkable ? '50px ' : '';
 
     const columnTemplate = currentVisibleColumns
       ?.map(({ width, shortLabel }) => {

package/src/ListingPage/index.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Box } from '@mui/material';
 
-import { useMemoComponent } from '../utils';
+import useMemoComponent from '../utils/useMemoComponent';
 import WithPanel from '../Panel/WithPanel';
 
 import FilterSkeleton from './FilterSkeleton';

package/src/Logo/CentreonLogo.tsx

@@ -6,8 +6,8 @@ import { makeStyles } from 'tss-react/mui';
 import { Image, ImageVariant } from '..';
 import LoadingSkeleton from '../LoadingSkeleton';
 import { useThemeMode } from '../utils/useThemeMode';
-import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
-import CentreonLogoDark from '../@assets/brand/centreon-logo-one-line-dark.svg';
+import CentreonLogoLight from '../../assets/centreon-logo-one-line-light.svg';
+import CentreonLogoDark from '../../assets/centreon-logo-one-line-dark.svg';
 
 import { labelCentreonLogo } from './translatedLabels';
 

package/src/Module/LicensedModule/LicenseCheck/index.stories.tsx

@@ -1,4 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import withMock from 'storybook-addon-mock';
 import { makeStyles } from 'tss-react/mui';
 
 import { Alert, Container } from '@mui/material';
@@ -19,6 +20,7 @@ export default {
     moduleName: { control: 'text' }
   },
   component: LicenseCheck,
+  decorators: [withMock],
   title: 'LicenseCheck'
 } as ComponentMeta<typeof LicenseCheck>;
 

package/src/Panel/Memoized.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef } from 'react';
 
-import { useMemoComponent } from '../utils';
+import useMemoComponent from '../utils/useMemoComponent';
 
 import Panel, { Props } from '.';
 

package/src/Panel/Section/index.test.tsx

@@ -1,4 +1,4 @@
-import { render, fireEvent } from '../../../test/testRenderer';
+import { render, fireEvent } from '../../testRenderer';
 
 import SectionPanel from '.';
 

package/src/Panel/Section/index.tsx

@@ -6,7 +6,7 @@ import ForwardIcon from '@mui/icons-material/ArrowForwardIos';
 
 import Panel from '..';
 import ContentWithCircularLoading from '../../ContentWithCircularProgress';
-import { useMemoComponent } from '../../utils';
+import useMemoComponent from '../../utils/useMemoComponent';
 
 import ExpandableSection from './ExpandableSection';
 

package/src/Panel/index.tsx

@@ -33,7 +33,7 @@ const useStyles = makeStyles<StylesProps>()(
       height: '100%'
     },
     container: {
-      backgroundColor: theme.palette.background.panel,
+      backgroundColor: theme.palette.background.default,
       borderTopRightRadius: 0,
       display: 'grid',
       gridTemplate: 'auto auto 1fr / 1fr',
@@ -85,7 +85,6 @@ export interface Tab {
 }
 
 export interface Props {
-  className?: string;
   header: React.ReactElement;
   headerBackgroundColor?: string;
   labelClose?: string;
@@ -112,12 +111,11 @@ const Panel = React.forwardRef(
       width = 550,
       minWidth = 550,
       headerBackgroundColor,
-      onResize,
-      className
+      onResize
     }: Props,
     ref
   ): JSX.Element => {
-    const { classes, cx } = useStyles({
+    const { classes } = useStyles({
       hasTabs: !isEmpty(tabs),
       headerBackgroundColor,
       width
@@ -181,7 +179,7 @@ const Panel = React.forwardRef(
           exit: 50
         }}
       >
-        <Paper className={cx(classes.container, className)} elevation={2}>
+        <Paper className={classes.container} elevation={2}>
           {!isNil(onResize) && (
             <div className={classes.dragger} role="none" onMouseDown={resize} />
           )}