@centreon/ui 23.10.63 → 23.10.64

package/package.json

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

package/src/Button/Icon/index.tsx

@@ -11,6 +11,9 @@ import { getNormalizedId } from '../../utils';
 const useStyles = makeStyles()((theme) => ({
   button: {
     padding: theme.spacing(0.25)
+  },
+  tooltip: {
+    background: theme.palette.background.tooltip
   }
 }));
 
@@ -19,6 +22,7 @@ type Props = {
   className?: string;
   onClick: (event) => void;
   title?: string;
+  tooltipClassName?: string;
   tooltipPlacement?:
     | 'bottom'
     | 'left'
@@ -39,12 +43,17 @@ const IconButton = ({
   ariaLabel,
   className,
   tooltipPlacement,
+  tooltipClassName,
   ...props
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
 
   return (
-    <Tooltip placement={tooltipPlacement} title={title}>
+    <Tooltip
+      classes={{ tooltip: cx(classes.tooltip, tooltipClassName) }}
+      placement={tooltipPlacement}
+      title={title}
+    >
       <span aria-label={undefined}>
         <MuiIconButton
           aria-label={ariaLabel}

package/src/Listing/ActionBar/index.tsx

@@ -86,7 +86,7 @@ type Props = Pick<
   | 'moveTablePagination'
   | 'widthToMoveTablePagination'
   | 'customPaginationClassName'
-  | 'viewMode'
+  | 'listingVariant'
   | 'viewerModeConfiguration'
 >;
 
@@ -107,7 +107,8 @@ const MemoListingActionBar = ({
   widthToMoveTablePagination = 550,
   actionsBarMemoProps = [],
   viewerModeConfiguration,
-  viewMode
+  listingVariant,
+  visualizationActions
 }: Props): JSX.Element => {
   const marginWidthTableListing = 30;
   const { classes, cx } = useStyles({
@@ -136,6 +137,7 @@ const MemoListingActionBar = ({
         <div className={classes.actions}>
           <div>{actions}</div>
         </div>
+        {visualizationActions && <div>{visualizationActions}</div>}
         <div className={classes.subContainer}>
           {!isEmpty(viewerModeConfiguration) &&
             !isNil(viewerModeConfiguration) && (
@@ -159,7 +161,10 @@ const MemoListingActionBar = ({
                     viewerModeConfiguration?.customStyle
                       ?.customStyleViewerModeIcon,
                     {
-                      [classes.mode]: equals(viewMode, ListingVariant.extended)
+                      [classes.mode]: equals(
+                        listingVariant,
+                        ListingVariant.extended
+                      )
                     }
                   )}
                 >
@@ -210,7 +215,7 @@ const MemoListingActionBar = ({
       currentPage,
       moveTablePagination,
       widthToMoveTablePagination,
-      viewMode,
+      listingVariant,
       themeMode,
       limit,
       pick(
@@ -240,8 +245,9 @@ const ListingActionBar = ({
   moveTablePagination,
   widthToMoveTablePagination,
   customPaginationClassName,
-  viewMode,
-  viewerModeConfiguration
+  listingVariant,
+  viewerModeConfiguration,
+  visualizationActions
 }: Props): JSX.Element | null => {
   if (
     not(paginated) &&
@@ -260,11 +266,12 @@ const ListingActionBar = ({
       currentPage={currentPage}
       customPaginationClassName={customPaginationClassName}
       limit={limit}
+      listingVariant={listingVariant}
       moveTablePagination={moveTablePagination}
       paginated={paginated}
       totalRows={totalRows}
-      viewMode={viewMode}
       viewerModeConfiguration={viewerModeConfiguration}
+      visualizationActions={visualizationActions}
       widthToMoveTablePagination={widthToMoveTablePagination}
       onLimitChange={onLimitChange}
       onPaginate={onPaginate}

package/src/Listing/Cell/DataCell.tsx

@@ -27,10 +27,10 @@ interface Props {
   isRowSelected: boolean;
   labelCollapse?: string;
   labelExpand?: string;
+  listingVariant?: ListingVariant;
   row?;
   rowColorConditions?: Array<RowColorCondition>;
   subItemsRowProperty?: string;
-  viewMode?: ListingVariant;
 }
 
 const DataCell = ({
@@ -40,14 +40,14 @@ const DataCell = ({
   isRowHovered,
   rowColorConditions,
   disableRowCondition,
-  viewMode,
+  listingVariant,
   getHighlightRowCondition,
   subItemsRowProperty,
   labelCollapse,
   labelExpand
 }: Props): JSX.Element | null => {
   const { classes } = useStyles();
-  const { dataStyle } = useStyleTable({ viewMode });
+  const { dataStyle } = useStyleTable({ listingVariant });
 
   const commonCellProps = {
     disableRowCondition,
@@ -85,10 +85,10 @@ const DataCell = ({
         <Cell
           className={classes.cell}
           isRowHighlighted={isRowHighlighted}
+          listingVariant={listingVariant}
           style={{
             gridColumn
           }}
-          viewMode={viewMode}
           {...commonCellProps}
         >
           {isTruncated && (
@@ -114,7 +114,7 @@ const DataCell = ({
         <Cell
           className={classes.cell}
           isRowHighlighted={isRowHighlighted}
-          viewMode={viewMode}
+          listingVariant={listingVariant}
           onClick={(e): void => {
             if (!clickable && !column.displaySubItemsCaret) {
               return;
@@ -222,7 +222,7 @@ const MemoizedDataCell = memo<Props>(
 
     // Explicitely prevent the component from rendering.
     if (nextRenderComponentCondition === false) {
-      return equals(prevProps.viewMode, nextProps.viewMode);
+      return equals(prevProps.listingVariant, nextProps.listingVariant);
     }
 
     const previousRowProps = previousRowMemoProps
@@ -255,7 +255,7 @@ const MemoizedDataCell = memo<Props>(
         nextProps.disableRowCondition(nextProps.row)
       ) &&
       equals(previousIsRowHighlighted, nextIsRowHighlighted) &&
-      equals(prevProps.viewMode, nextProps.viewMode) &&
+      equals(prevProps.listingVariant, nextProps.listingVariant) &&
       equals(prevProps.subItemsRowProperty, nextProps.subItemsRowProperty)
     );
   }

package/src/Listing/Cell/index.tsx

@@ -54,7 +54,7 @@ const getBackgroundColor = ({
 
 interface StylesProps extends Props {
   isRowHighlighted?: boolean;
-  viewMode?: ListingVariant;
+  listingVariant?: ListingVariant;
 }
 
 interface GetRowHighlightStyleProps {
@@ -81,7 +81,7 @@ const useStyles = makeStyles<StylesProps>()(
       rowColorConditions,
       disableRowCondition,
       isRowHighlighted,
-      viewMode
+      listingVariant
     }
   ) => ({
     caret: {
@@ -115,7 +115,7 @@ const useStyles = makeStyles<StylesProps>()(
       },
       height: '100%',
       overflow: 'hidden',
-      ...getTextStyleByViewMode({ theme, viewMode }),
+      ...getTextStyleByViewMode({ listingVariant, theme }),
       p: getRowHighlightStyle({ isRowHighlighted, theme }),
       padding: theme.spacing(0, 1),
       whiteSpace: 'nowrap'
@@ -133,8 +133,8 @@ interface Props
   isRowHighlighted?: boolean;
   labelCollapse?: string;
   labelExpand?: string;
+  listingVariant?: ListingVariant;
   subItemsRowProperty?: string;
-  viewMode?: ListingVariant;
 }
 
 const isPivotExistInTheList = (
@@ -193,7 +193,7 @@ const Cell = ({
           'rowColorConditions',
           'disableRowCondition',
           'isRowHighlighted',
-          'viewMode'
+          'listingVariant'
         ],
         props
       )}

package/src/Listing/Header/Cell/ListingHeaderCell.styles.ts

@@ -7,11 +7,11 @@ import { getTextStyleByViewMode } from '../../useStyleTable';
 interface StylesProps {
   isDragging?: boolean;
   isInDragOverlay?: boolean;
-  viewMode?: ListingVariant;
+  listingVariant?: ListingVariant;
 }
 
 const useStyles = makeStyles<StylesProps>()(
-  (theme, { isDragging, isInDragOverlay, viewMode }) => ({
+  (theme, { isDragging, isInDragOverlay, listingVariant }) => ({
     active: {
       '&, &:hover, &:focus': {
         color: theme.palette.common.white
@@ -54,7 +54,7 @@ const useStyles = makeStyles<StylesProps>()(
       borderBottom: 'none',
       height: 'inherit',
       padding: theme.spacing(0, 1),
-      ...getTextStyleByViewMode({ theme, viewMode }),
+      ...getTextStyleByViewMode({ listingVariant, theme }),
       '&:hover, &:focus-within, &[data-isdragging=true]': {
         '& .dragHandle': {
           opacity: 1

package/src/Listing/Header/Cell/ListingHeaderCell.tsx

@@ -38,13 +38,13 @@ const ListingHeaderCell = ({
   style,
   isInDragOverlay,
   areColumnsEditable,
-  viewMode,
+  listingVariant,
   ...props
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({
     isDragging,
     isInDragOverlay,
-    viewMode
+    listingVariant
   });
   const columnLabel = column.shortLabel || column.label;
 

package/src/Listing/Header/ListingHeader.tsx

@@ -31,9 +31,9 @@ type Props = Pick<
   | 'totalRows'
 > & {
   areColumnsEditable: boolean;
+  listingVariant?: ListingVariant;
   memoProps: Array<unknown>;
   rowCount: number;
-  viewMode?: ListingVariant;
 } & SelectActionListingHeaderCellProps;
 
 interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
@@ -57,7 +57,7 @@ const ListingHeader = ({
   checkable,
   memoProps,
   areColumnsEditable,
-  viewMode,
+  listingVariant,
   onSelectAllClick,
   selectedRowCount,
   predefinedRowsSelection,
@@ -92,10 +92,10 @@ const ListingHeader = ({
           isDragging={isDragging}
           isInDragOverlay={isInDragOverlay}
           itemRef={itemRef}
+          listingVariant={listingVariant}
           sortField={sortField}
           sortOrder={sortOrder}
           style={style}
-          viewMode={viewMode}
           onSort={onSort}
           {...listeners}
           {...attributes}
@@ -160,7 +160,7 @@ const MemoizedListingHeader = React.memo<Props>(
     equals(prevProps.columnConfiguration, nextProps.columnConfiguration) &&
     equals(prevProps.memoProps, nextProps.memoProps) &&
     equals(prevProps.areColumnsEditable, nextProps.areColumnsEditable) &&
-    equals(prevProps.viewMode, nextProps.viewMode)
+    equals(prevProps.listingVariant, nextProps.listingVariant)
 );
 
 export { MemoizedListingHeader as ListingHeader };

package/src/Listing/Listing.styles.ts

@@ -10,8 +10,8 @@ interface StylesProps {
   dataStyle: TableStyle;
   getGridTemplateColumn: string;
   limit: number;
+  listingVariant: ListingVariant;
   rows: Array<unknown>;
-  viewMode: ListingVariant;
 }
 
 const useListingStyles = makeStyles<StylesProps>()(

package/src/Listing/Row/Row.tsx

@@ -46,11 +46,11 @@ 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 +116,7 @@ const Row = memo<RowProps>(
       isShiftKeyDown: prevIsShiftKeyDown,
       shiftKeyDownRowPivot: prevShiftKeyDownRowPivot,
       lastSelectionIndex: prevLastSelectionIndex,
-      viewMode: prevViewMode
+      listingVariant: prevViewMode
     } = prevProps;
     const {
       row: nextRow,
@@ -127,7 +127,7 @@ const Row = memo<RowProps>(
       shiftKeyDownRowPivot: nextShiftKeyDownRowPivot,
       lastSelectionIndex: nextLastSelectionIndex,
       limit: nextLimit,
-      viewMode: nextViewMode
+      listingVariant: nextViewMode
     } = nextProps;
 
     if (

package/src/Listing/index.stories.tsx

@@ -177,17 +177,17 @@ const StoryTemplate = ({
 export const normal = (): JSX.Element => <StoryTemplate />;
 
 export const WithSpecifiedViewMode = (): JSX.Element => {
-  const [viewMode, setViewMode] = useState(ListingVariant.extended);
-  const newViewMode = equals(viewMode, ListingVariant.compact)
+  const [listingVariant, setListingVariant] = useState(ListingVariant.extended);
+  const newListingVariant = equals(listingVariant, ListingVariant.compact)
     ? ListingVariant.extended
     : ListingVariant.compact;
 
   return (
     <StoryTemplate
-      viewMode={viewMode}
+      listingVariant={listingVariant}
       viewerModeConfiguration={{
-        onClick: () => setViewMode(newViewMode),
-        title: viewMode
+        onClick: () => setListingVariant(newListingVariant),
+        title: listingVariant
       }}
     />
   );

package/src/Listing/index.tsx

@@ -102,6 +102,7 @@ export interface Props<TRow> {
   headerMemoProps?: Array<unknown>;
   innerScrollDisabled?: boolean;
   limit?: number;
+  listingVariant?: ListingVariant;
   loading?: boolean;
   moveTablePagination?: boolean;
   onLimitChange?: (limit) => void;
@@ -126,8 +127,8 @@ export interface Props<TRow> {
     rowProperty: string;
   };
   totalRows?: number;
-  viewMode?: ListingVariant;
   viewerModeConfiguration?: ViewerModeConfiguration;
+  visualizationActions?: JSX.Element;
   widthToMoveTablePagination?: number;
 }
 
@@ -139,6 +140,7 @@ export const performanceRowsLimit = 60;
 
 const Listing = <TRow extends { id: RowId }>({
   limit = 10,
+  visualizationActions,
   columns,
   columnConfiguration = defaultColumnConfiguration,
   customPaginationClassName,
@@ -168,7 +170,7 @@ const Listing = <TRow extends { id: RowId }>({
   predefinedRowsSelection = [],
   actionsBarMemoProps = [],
   moveTablePagination,
-  viewMode = ListingVariant.compact,
+  listingVariant = ListingVariant.compact,
   widthToMoveTablePagination,
   getHighlightRowCondition,
   viewerModeConfiguration,
@@ -187,7 +189,7 @@ const Listing = <TRow extends { id: RowId }>({
   const { dataStyle, getGridTemplateColumn } = useStyleTable({
     checkable,
     currentVisibleColumns,
-    viewMode
+    listingVariant
   });
 
   const { t } = useTranslation();
@@ -230,8 +232,8 @@ const Listing = <TRow extends { id: RowId }>({
     dataStyle,
     getGridTemplateColumn,
     limit,
-    rows: rowsToDisplay,
-    viewMode
+    listingVariant,
+    rows: rowsToDisplay
   });
 
   useResizeObserver({
@@ -501,11 +503,12 @@ const Listing = <TRow extends { id: RowId }>({
             currentPage={currentPage}
             customPaginationClassName={customPaginationClassName}
             limit={limit}
+            listingVariant={listingVariant}
             moveTablePagination={moveTablePagination}
             paginated={paginated}
             totalRows={totalRows}
-            viewMode={viewMode}
             viewerModeConfiguration={viewerModeConfiguration}
+            visualizationActions={visualizationActions}
             widthToMoveTablePagination={widthToMoveTablePagination}
             onLimitChange={changeLimit}
             onPaginate={onPaginate}
@@ -532,13 +535,13 @@ const Listing = <TRow extends { id: RowId }>({
               checkable={checkable}
               columnConfiguration={columnConfiguration}
               columns={columns}
+              listingVariant={listingVariant}
               memoProps={headerMemoProps}
               predefinedRowsSelection={predefinedRowsSelection}
               rowCount={limit - emptyRows}
               selectedRowCount={selectedRows.length}
               sortField={sortField}
               sortOrder={sortOrder}
-              viewMode={viewMode}
               onSelectAllClick={selectAllRows}
               onSelectColumns={onSelectColumns}
               onSelectRowsWithCondition={onSelectRowsWithCondition}
@@ -573,12 +576,12 @@ const Listing = <TRow extends { id: RowId }>({
                     }
                     lastSelectionIndex={lastSelectionIndex}
                     limit={limit}
+                    listingVariant={listingVariant}
                     row={row}
                     rowColorConditions={rowColorConditions}
                     shiftKeyDownRowPivot={shiftKeyDownRowPivot}
                     subItemsPivots={subItemsPivots}
                     tabIndex={-1}
-                    viewMode={viewMode}
                     visibleColumns={visibleColumns}
                     onClick={(): void => {
                       onRowClick(row);
@@ -628,10 +631,10 @@ const Listing = <TRow extends { id: RowId }>({
                         key={`${getId(row)}-${column.id}`}
                         labelCollapse={subItems.labelCollapse}
                         labelExpand={subItems.labelExpand}
+                        listingVariant={listingVariant}
                         row={row}
                         rowColorConditions={rowColorConditions}
                         subItemsRowProperty={subItems?.rowProperty}
-                        viewMode={viewMode}
                       />
                     ))}
                   </ListingRow>
@@ -674,7 +677,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
   columnConfiguration,
   moveTablePagination,
   widthToMoveTablePagination,
-  viewMode,
+  listingVariant,
   ...props
 }: MemoizedListingProps<TRow>): JSX.Element =>
   useMemoComponent({
@@ -686,6 +689,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
         currentPage={currentPage}
         innerScrollDisabled={innerScrollDisabled}
         limit={limit}
+        listingVariant={listingVariant}
         loading={loading}
         moveTablePagination={moveTablePagination}
         paginated={paginated}
@@ -695,7 +699,6 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
         sortField={sortField}
         sortOrder={sortOrder}
         totalRows={totalRows}
-        viewMode={viewMode}
         widthToMoveTablePagination={widthToMoveTablePagination}
         {...props}
       />
@@ -719,7 +722,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
       sortOrder,
       sortField,
       innerScrollDisabled,
-      viewMode
+      listingVariant
     ]
   });
 

package/src/Listing/tableAtoms.ts

@@ -32,16 +32,19 @@ export const tableStyleAtom = atom<TableStyleAtom>({
   }
 });
 
-export const tableStyleDerivedAtom = atom(null, (get, set, { viewMode }) => {
-  const tableStyle = get(tableStyleAtom);
-
-  const isExtendedMode = equals(viewMode, ListingVariant.extended);
-
-  set(tableStyleAtom, {
-    ...tableStyle,
-    body: isExtendedMode ? extendedTableBody : compactTableBody,
-    header: isExtendedMode ? extendedTableHeader : compactTableHeader
-  });
-});
+export const tableStyleDerivedAtom = atom(
+  null,
+  (get, set, { listingVariant }) => {
+    const tableStyle = get(tableStyleAtom);
+
+    const isExtendedMode = equals(listingVariant, ListingVariant.extended);
+
+    set(tableStyleAtom, {
+      ...tableStyle,
+      body: isExtendedMode ? extendedTableBody : compactTableBody,
+      header: isExtendedMode ? extendedTableHeader : compactTableHeader
+    });
+  }
+);
 
 export const subItemsPivotsAtom = atom<Array<number | string>>([]);

package/src/Listing/useStyleTable.ts

@@ -14,7 +14,7 @@ import { tableStyleAtom, tableStyleDerivedAtom } from './tableAtoms';
 interface TableStyle {
   checkable?: boolean;
   currentVisibleColumns?: Array<Column>;
-  viewMode?: ListingVariant;
+  listingVariant?: ListingVariant;
 }
 
 interface TableStyleState {
@@ -27,23 +27,23 @@ const isCompactMode = equals<ListingVariant | undefined>(
 );
 
 interface GetTextStyleProps {
+  listingVariant?: ListingVariant;
   theme: Theme;
-  viewMode?: ListingVariant;
 }
 
 export const getTextStyleByViewMode = ({
-  viewMode,
+  listingVariant,
   theme
 }: GetTextStyleProps): CSSObject =>
   pick(
     ['color', 'fontSize', 'lineHeight'],
-    theme.typography[isCompactMode(viewMode) ? 'body2' : 'body1']
+    theme.typography[isCompactMode(listingVariant) ? 'body2' : 'body1']
   );
 
 const useStyleTable = ({
   checkable,
   currentVisibleColumns,
-  viewMode
+  listingVariant
 }: TableStyle): TableStyleState => {
   const dataStyle = useAtomValue(tableStyleAtom);
 
@@ -69,10 +69,10 @@ const useStyleTable = ({
   };
 
   useEffect(() => {
-    if (viewMode) {
-      updateStyleTable({ viewMode });
+    if (listingVariant) {
+      updateStyleTable({ listingVariant });
     }
-  }, [viewMode]);
+  }, [listingVariant]);
 
   return {
     dataStyle,

package/src/SortableItems/SortableItem.tsx

@@ -56,7 +56,8 @@ const SortableItem = ({
       transform,
       props(itemProps, rest),
       ...memoProps,
-      ...additionalProps
+      ...additionalProps,
+      ...Object.values(rest)
     ]
   });
 };