@centreon/ui 23.10.42 → 23.10.44

package/src/Listing/index.tsx

@@ -18,46 +18,50 @@ import {
   map,
   not,
   pick,
-  pluck,
   prop,
   propEq,
-  reduce,
   reject,
   slice,
   subtract,
   uniqBy
 } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import { useAtomValue } from 'jotai';
+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, useListingStyles } from './Listing.styles';
-import { EmptyResult } from './EmptyResult/EmptyResult';
-import { SkeletonLoader } from './Row/SkeletonLoaderRows';
-import { ListingHeader } from './Header';
-import { subItemsPivotsAtom } from './tableAtoms';
 
 const getVisibleColumns = ({
   columnConfiguration,
@@ -74,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;
@@ -110,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>;
@@ -118,13 +204,6 @@ export interface Props<TRow> {
   selectedRows?: Array<TRow>;
   sortField?: string;
   sortOrder?: SortOrder;
-  subItems?: {
-    canCheckSubItems: boolean;
-    enable: boolean;
-    labelCollapse: string;
-    labelExpand: string;
-    rowProperty: string;
-  };
   totalRows?: number;
   viewMode?: ListingVariant;
   viewerModeConfiguration?: ViewerModeConfiguration;
@@ -171,14 +250,7 @@ const Listing = <TRow extends { id: RowId }>({
   viewMode = ListingVariant.compact,
   widthToMoveTablePagination,
   getHighlightRowCondition,
-  viewerModeConfiguration,
-  subItems = {
-    canCheckSubItems: false,
-    enable: false,
-    labelCollapse: 'Collapse',
-    labelExpand: 'Expand',
-    rowProperty: ''
-  }
+  viewerModeConfiguration
 }: Props<TRow>): JSX.Element => {
   const currentVisibleColumns = getVisibleColumns({
     columnConfiguration,
@@ -190,6 +262,14 @@ const Listing = <TRow extends { id: RowId }>({
     viewMode
   });
 
+  const { classes } = useStyles({
+    checkable,
+    currentVisibleColumns,
+    dataStyle,
+    getGridTemplateColumn,
+    rows,
+    viewMode
+  });
   const { t } = useTranslation();
 
   const [tableTopOffset, setTableTopOffset] = React.useState(0);
@@ -203,36 +283,7 @@ const Listing = <TRow extends { id: RowId }>({
   const containerRef = React.useRef<HTMLDivElement>();
   const actionBarRef = React.useRef<HTMLDivElement>();
 
-  const subItemsPivots = useAtomValue(subItemsPivotsAtom);
-
-  const rowsToDisplay = React.useMemo(
-    () =>
-      subItems?.enable
-        ? reduce<TRow, Array<TRow>>(
-            (acc, row): Array<TRow> => {
-              if (
-                row[subItems.rowProperty] &&
-                subItemsPivots.includes(row.id)
-              ) {
-                return [...acc, row, ...row[subItems.rowProperty]];
-              }
-
-              return [...acc, row];
-            },
-            [],
-            rows
-          )
-        : rows,
-    [rows, subItemsPivots, subItems]
-  );
-
-  const { classes, theme } = useListingStyles({
-    dataStyle,
-    getGridTemplateColumn,
-    limit,
-    rows: rowsToDisplay,
-    viewMode
-  });
+  const theme = useTheme();
 
   useResizeObserver({
     onResize: () => {
@@ -439,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 => {
@@ -464,19 +515,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?.rowProperty || ''] || [])
-        ],
-        [],
-        rows
-      ),
-    [rows, subItems]
-  );
-
   return (
     <>
       {loading && rows.length > 0 && (
@@ -550,16 +588,14 @@ const Listing = <TRow extends { id: RowId }>({
               component="div"
               onMouseLeave={clearHoveredRow}
             >
-              {rowsToDisplay.map((row, index) => {
+              {rows.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)
-                    }
+                    checkable={checkable}
                     columnConfiguration={columnConfiguration}
                     columnIds={columns.map(prop('id'))}
                     disableRowCondition={disableRowCondition}
@@ -576,7 +612,6 @@ const Listing = <TRow extends { id: RowId }>({
                     row={row}
                     rowColorConditions={rowColorConditions}
                     shiftKeyDownRowPivot={shiftKeyDownRowPivot}
-                    subItemsPivots={subItemsPivots}
                     tabIndex={-1}
                     viewMode={viewMode}
                     visibleColumns={visibleColumns}
@@ -586,64 +621,66 @@ const Listing = <TRow extends { id: RowId }>({
                     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}
+                    {checkable && (
+                      <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>
+                    )}
 
                     {visibleColumns.map((column) => (
                       <DataCell
+                        areColumnsEditable={areColumnsEditable}
                         column={column}
                         disableRowCondition={disableRowCondition}
                         getHighlightRowCondition={getHighlightRowCondition}
                         isRowHovered={isRowHovered}
                         isRowSelected={isRowSelected}
                         key={`${getId(row)}-${column.id}`}
-                        labelCollapse={subItems.labelCollapse}
-                        labelExpand={subItems.labelExpand}
                         row={row}
                         rowColorConditions={rowColorConditions}
-                        subItemsRowProperty={subItems?.rowProperty}
                         viewMode={viewMode}
                       />
                     ))}
                   </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/models.ts

@@ -19,7 +19,6 @@ export interface Column {
   compact?: boolean;
   disablePadding?: boolean;
   disabled?: boolean;
-  displaySubItemsCaret?: boolean;
   getColSpan?: (isSelected) => number | undefined;
   getFormattedString?: (row) => string | null;
   getHiddenCondition?: (isSelected) => boolean;

package/src/Listing/tableAtoms.ts

@@ -43,5 +43,3 @@ export const tableStyleDerivedAtom = atom(null, (get, set, { viewMode }) => {
     header: isExtendedMode ? extendedTableHeader : compactTableHeader
   });
 });
-
-export const subItemsPivotsAtom = atom<Array<number | string>>([]);

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,8 +85,7 @@ export interface Tab {
 }
 
 export interface Props {
-  className?: string;
-  header?: React.ReactElement;
+  header: React.ReactElement;
   headerBackgroundColor?: string;
   labelClose?: string;
   minWidth?: number;
@@ -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} />
           )}

package/src/RichTextEditor/ContentEditable.tsx

@@ -9,20 +9,17 @@ import { Typography } from '@mui/material';
 
 interface StyleProps {
   editable: boolean;
-  error?: string;
   minInputHeight: number;
 }
 
 const useStyles = makeStyles<StyleProps>()(
-  (theme, { minInputHeight, editable, error }) => ({
+  (theme, { minInputHeight, editable }) => ({
     container: {
       '& p': {
         margin: 0
       },
       backgroundColor: theme.palette.background.paper,
-      border: error
-        ? `1px solid ${theme.palette.error.main}`
-        : '1px solid transparent',
+      border: '1px solid transparent',
       borderRadius: theme.shape.borderRadius,
       padding: theme.spacing(0.5, 1)
     },
@@ -34,9 +31,7 @@ const useStyles = makeStyles<StyleProps>()(
       outline: '0px solid transparent'
     },
     inputFocused: {
-      border: error
-        ? `1px solid ${theme.palette.error.main}`
-        : `1px solid ${theme.palette.primary.main}`
+      border: `1px solid ${theme.palette.primary.main}`
     },
     placeholder: {
       color: theme.palette.grey[500],
@@ -46,16 +41,13 @@ const useStyles = makeStyles<StyleProps>()(
 );
 
 interface Props {
-  className?: string;
   editable: boolean;
   editorState?: string;
-  error?: string;
   hasInitialTextContent?: boolean;
   initialEditorState?: string;
   inputClassname?: string;
   minInputHeight: number;
   namespace: string;
-  onBlur?: (e: string) => void;
   placeholder: string;
   resetEditorToInitialStateCondition?: () => boolean;
 }
@@ -69,12 +61,9 @@ const ContentEditable = ({
   editorState,
   namespace,
   resetEditorToInitialStateCondition,
-  initialEditorState,
-  error,
-  onBlur,
-  className
+  initialEditorState
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ editable, error, minInputHeight });
+  const { classes, cx } = useStyles({ editable, minInputHeight });
   const { t } = useTranslation();
 
   const [editor] = useLexicalComposerContext();
@@ -130,18 +119,9 @@ const ContentEditable = ({
 
   const isTextEmpty = isEmpty(root);
 
-  const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
-    setFocused(false);
-    onBlur?.(event);
-  };
-
   return (
     <div
-      className={cx(
-        classes.container,
-        className,
-        isFocused && classes.inputFocused
-      )}
+      className={cx(classes.container, isFocused && classes.inputFocused)}
       id={namespace}
     >
       {editable && isTextEmpty && (
@@ -159,7 +139,7 @@ const ContentEditable = ({
         contentEditable={isEditable}
         data-testid={namespace}
         ref={ref}
-        onBlur={handleBlur}
+        onBlur={(): void => setFocused(false)}
         onFocus={(): void => setFocused(true)}
       />
     </div>