@centreon/ui 24.4.30 → 24.4.32

package/src/InputField/Text/index.tsx

@@ -17,38 +17,36 @@ import { getNormalizedId } from '../../utils';
 
 import useAutoSize from './useAutoSize';
 
-const useStyles = makeStyles<{ displayAsBlock: boolean }>()(
-  (theme: Theme, { displayAsBlock }) => ({
-    autoSizeCompact: {
-      paddingRight: theme.spacing(1),
-      paddingTop: theme.spacing(0.6)
-    },
-    hiddenText: {
-      display: 'table',
-      lineHeight: 0,
-      transform: 'scaleY(0)'
-    },
-    input: {
-      fontSize: theme.typography.body1.fontSize
-    },
-    inputBase: {
-      display: displayAsBlock ? 'block' : 'inline-flex',
-      justifyItems: 'start',
-      paddingRight: theme.spacing(1)
-    },
-    noLabelInput: {
-      padding: theme.spacing(1)
-    },
-    textField: {
-      transition: theme.transitions.create(['width'], {
-        duration: theme.transitions.duration.shortest
-      })
-    },
-    transparent: {
-      backgroundColor: 'transparent'
-    }
-  })
-);
+const useStyles = makeStyles()((theme: Theme) => ({
+  autoSizeCompact: {
+    paddingRight: theme.spacing(1),
+    paddingTop: theme.spacing(0.6)
+  },
+  hiddenText: {
+    display: 'table',
+    lineHeight: 0,
+    transform: 'scaleY(0)'
+  },
+  input: {
+    fontSize: theme.typography.body1.fontSize
+  },
+  inputBase: {
+    display: 'inline-flex',
+    justifyItems: 'start',
+    paddingRight: theme.spacing(1)
+  },
+  noLabelInput: {
+    padding: theme.spacing(1)
+  },
+  textField: {
+    transition: theme.transitions.create(['width'], {
+      duration: theme.transitions.duration.shortest
+    })
+  },
+  transparent: {
+    backgroundColor: 'transparent'
+  }
+}));
 
 interface OptionalLabelInputAdornmentProps {
   children: React.ReactNode;
@@ -72,7 +70,7 @@ const OptionalLabelInputAdornment = ({
 
 type SizeVariant = 'large' | 'medium' | 'small' | 'compact';
 
-export type Props = {
+export type TextProps = {
   EndAdornment?: React.FC;
   StartAdornment?: React.FC;
   ariaLabel?: string;
@@ -114,17 +112,18 @@ const TextField = forwardRef(
       defaultValue,
       required = false,
       containerClassName,
+      type,
       ...rest
-    }: Props,
+    }: TextProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ): JSX.Element => {
-    const { classes, cx } = useStyles({
-      displayAsBlock: autoSize && isNil(StartAdornment) && isNil(EndAdornment)
-    });
+    const { classes, cx } = useStyles();
 
     const { inputRef, width, changeInputValue, innerValue } = useAutoSize({
       autoSize,
-      autoSizeCustomPadding,
+      autoSizeCustomPadding: equals(type, 'number')
+        ? Math.max(6, autoSizeCustomPadding || 0)
+        : autoSizeCustomPadding,
       autoSizeDefaultWidth,
       value: externalValueForAutoSize || rest.value
     });
@@ -155,9 +154,9 @@ const TextField = forwardRef(
             helperText={displayErrorInTooltip ? undefined : error}
             id={getNormalizedId(dataTestId || '')}
             inputProps={{
+              ...rest.inputProps,
               'aria-label': ariaLabel,
-              'data-testid': dataTestId,
-              ...rest.inputProps
+              'data-testid': dataTestId
             }}
             label={label}
             ref={ref}
@@ -196,6 +195,7 @@ const TextField = forwardRef(
               width: autoSize ? width : undefined,
               ...rest?.sx
             }}
+            type={type}
           />
         </Tooltip>
         {autoSize && (

package/src/Listing/Cell/DataCell.tsx

@@ -107,21 +107,7 @@ const DataCell = ({
       const isCellHidden = getHiddenCondition?.(isRowSelected);
 
       if (isCellHidden) {
-        return (
-          <Cell
-            className={classes.cell}
-            isRowHighlighted={isRowHighlighted}
-            listingVariant={listingVariant}
-            onClick={(e): void => {
-              if (!clickable) {
-                return;
-              }
-              e.preventDefault();
-              e.stopPropagation();
-            }}
-            {...commonCellProps}
-          />
-        );
+        return null;
       }
 
       return (

package/src/Listing/Header/ListingHeader.tsx

@@ -71,7 +71,7 @@ const ListingHeader = ({
   });
 
   const getColumnById = (id: string): Column => {
-    return find(propEq(id, 'id'), columns) as Column;
+    return find(propEq('id', id), columns) as Column;
   };
 
   const Content = React.useCallback(

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

@@ -77,9 +77,9 @@ const mountListing = (): void => {
           subItems={{
             canCheckSubItems: false,
             enable: true,
-            getRowProperty: () => 'subItems',
             labelCollapse: 'Collapse',
-            labelExpand: 'Expand'
+            labelExpand: 'Expand',
+            rowProperty: 'subItems'
           }}
           totalRows={10}
         />

package/src/Listing/Listing.styles.ts

@@ -9,12 +9,13 @@ const loadingIndicatorHeight = 3;
 interface StylesProps {
   dataStyle: TableStyle;
   getGridTemplateColumn: string;
+  limit: number;
   listingVariant: ListingVariant;
   rows: Array<unknown>;
 }
 
 const useListingStyles = makeStyles<StylesProps>()(
-  (theme, { dataStyle, getGridTemplateColumn, rows }) => ({
+  (theme, { dataStyle, getGridTemplateColumn, rows, limit }) => ({
     actionBar: {
       alignItems: 'center',
       display: 'flex'
@@ -55,7 +56,7 @@ const useListingStyles = makeStyles<StylesProps>()(
       display: 'grid',
       gridTemplateColumns: getGridTemplateColumn,
       gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
-        rows?.length || 1
+        rows?.length || limit
       }, ${dataStyle.body.height}px)`,
       position: 'relative'
     },

package/src/Listing/index.stories.tsx

@@ -366,16 +366,6 @@ const columnsWithSubItems = [
   }
 ];
 
-const TemplateSubItems = (args): JSX.Element => {
-  const { classes } = useStyles();
-
-  return (
-    <div className={classes.listing}>
-      <Listing {...args} />
-    </div>
-  );
-};
-
 export const ListingWithSubItems = {
   args: {
     checkable: true,
@@ -387,11 +377,10 @@ export const ListingWithSubItems = {
     subItems: {
       canCheckSubItems: false,
       enable: true,
-      getRowProperty: () => 'subItems',
       labelCollapse: 'Collapse',
-      labelExpand: 'Expand'
+      labelExpand: 'Expand',
+      rowProperty: 'subItems'
     },
     totalRows: 10
-  },
-  render: TemplateSubItems
+  }
 };

package/src/Listing/index.tsx

@@ -69,7 +69,7 @@ const getVisibleColumns = ({
   }
 
   return selectedColumnIds.map((id) =>
-    columns.find(propEq(id, 'id'))
+    columns.find(propEq('id', id))
   ) as Array<Column>;
 };
 
@@ -93,11 +93,9 @@ 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>;
@@ -123,9 +121,9 @@ export interface Props<TRow> {
   subItems?: {
     canCheckSubItems: boolean;
     enable: boolean;
-    getRowProperty: (row?) => string;
     labelCollapse: string;
     labelExpand: string;
+    rowProperty: string;
   };
   totalRows?: number;
   viewerModeConfiguration?: ViewerModeConfiguration;
@@ -140,8 +138,6 @@ const defaultColumnConfiguration = {
 export const performanceRowsLimit = 60;
 
 const Listing = <TRow extends { id: RowId }>({
-  customListingComponent,
-  displayCustomListing,
   limit = 10,
   visualizationActions,
   columns,
@@ -180,9 +176,9 @@ const Listing = <TRow extends { id: RowId }>({
   subItems = {
     canCheckSubItems: false,
     enable: false,
-    getRowProperty: () => '',
     labelCollapse: 'Collapse',
-    labelExpand: 'Expand'
+    labelExpand: 'Expand',
+    rowProperty: ''
   }
 }: Props<TRow>): JSX.Element => {
   const currentVisibleColumns = getVisibleColumns({
@@ -215,10 +211,10 @@ const Listing = <TRow extends { id: RowId }>({
         ? reduce<TRow, Array<TRow>>(
             (acc, row): Array<TRow> => {
               if (
-                row[subItems.getRowProperty()] &&
+                row[subItems.rowProperty] &&
                 subItemsPivots.includes(row.id)
               ) {
-                return [...acc, row, ...row[subItems.getRowProperty()]];
+                return [...acc, row, ...row[subItems.rowProperty]];
               }
 
               return [...acc, row];
@@ -233,6 +229,7 @@ const Listing = <TRow extends { id: RowId }>({
   const { classes } = useListingStyles({
     dataStyle,
     getGridTemplateColumn,
+    limit,
     listingVariant,
     rows: rowsToDisplay
   });
@@ -453,7 +450,7 @@ const Listing = <TRow extends { id: RowId }>({
       reduce<TRow | number, Array<string | number>>(
         (acc, row) => [
           ...acc,
-          ...pluck('id', row[subItems?.getRowProperty() || ''] || [])
+          ...pluck('id', row[subItems?.rowProperty || ''] || [])
         ],
         [],
         rows
@@ -498,7 +495,6 @@ const Listing = <TRow extends { id: RowId }>({
             onSelectColumns={onSelectColumns}
           />
         </div>
-
         <ParentSize
           parentSizeStyles={{
             height: '100%',
@@ -514,141 +510,132 @@ const Listing = <TRow extends { id: RowId }>({
                 height: innerScrollDisabled ? '100%' : `calc(${height}px - 4px)`
               }}
             >
-              {displayCustomListing ? (
-                customListingComponent
-              ) : (
-                <Table
-                  stickyHeader
-                  className={classes.table}
+              <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"
-                  role={undefined}
-                  size="small"
+                  onMouseLeave={clearHoveredRow}
                 >
-                  <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}
-                          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}
+                  {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)}`
+                                }}
                               />
-                            ))}
-
-                          {visibleColumns.map((column) => (
-                            <DataCell
-                              column={column}
+                            </Cell>
+                          ) : (
+                            <Cell
+                              align="left"
                               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>
-              )}
+
+                        {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)} />
+                    ))}
+                </TableBody>
+              </Table>
             </Box>
           )}
         </ParentSize>

package/src/Module/index.tsx

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 import { Provider as JotaiProvider, createStore } from 'jotai';
 
 import { createGenerateClassName, StylesProvider } from '@mui/styles';
@@ -7,7 +9,7 @@ import SnackbarProvider from '../Snackbar/SnackbarProvider';
 
 export interface ModuleProps {
   children: React.ReactElement;
-  maxSnackbars?: number;
+  maxSnackbars: number;
   seedName: string;
   store: ReturnType<typeof createStore>;
 }
@@ -15,7 +17,7 @@ export interface ModuleProps {
 const Module = ({
   children,
   seedName,
-  maxSnackbars = 3,
+  maxSnackbars,
   store
 }: ModuleProps): JSX.Element => {
   const generateClassName = createGenerateClassName({

package/src/RichTextEditor/RichTextEditor.tsx

@@ -12,7 +12,6 @@ import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { equals } from 'ramda';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
-import { $generateHtmlFromNodes } from '@lexical/html';
 
 import { Typography } from '@mui/material';
 
@@ -39,7 +38,6 @@ export interface RichTextEditorProps {
   openLinkInNewTab?: boolean;
   placeholder?: string;
   resetEditorToInitialStateCondition?: () => boolean;
-  setHtmlString?: (htmlString: string) => void;
   toolbarClassName?: string;
   toolbarPositions?: 'start' | 'end';
 }
@@ -145,7 +143,6 @@ const RichTextEditor = ({
   openLinkInNewTab = true,
   initialize,
   displayBlockButtons = true,
-  setHtmlString,
   toolbarClassName
 }: RichTextEditorProps): JSX.Element => {
   const { classes } = useStyles({ toolbarPositions });
@@ -181,13 +178,6 @@ const RichTextEditor = ({
     }
   };
 
-  const change = (state: EditorState, editor: LexicalEditor): void => {
-    editor.update(() => {
-      setHtmlString?.($generateHtmlFromNodes(editor, null));
-    });
-    getEditorState?.(state, editor);
-  };
-
   return (
     <LexicalComposer initialConfig={initialConfig}>
       <div className={classes.container}>
@@ -220,7 +210,6 @@ const RichTextEditor = ({
                 resetEditorToInitialStateCondition={
                   resetEditorToInitialStateCondition
                 }
-                setHtmlString={setHtmlString}
                 onBlur={onBlur}
               />
             }
@@ -229,7 +218,7 @@ const RichTextEditor = ({
           <HistoryPlugin />
           <LinkPlugin />
           <ListPlugin />
-          <OnChangePlugin onChange={change} />
+          <OnChangePlugin onChange={getEditorState} />
           <AutoCompleteLinkPlugin openLinkInNewTab={openLinkInNewTab} />
           <FloatingLinkEditorPlugin
             editable={editable}