@centreon/ui 25.10.28 → 25.10.30

package/src/InputField/Select/Autocomplete/index.tsx

@@ -13,6 +13,7 @@ import { AutocompleteSlotsAndSlotProps } from '@mui/material/Autocomplete';
 import { TextFieldSlotsAndSlotProps } from '@mui/material/TextField';
 import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
+import type { AutocompleteRenderOptionState } from '@mui/material/Autocomplete';
 import { ForwardedRef, HTMLAttributes, ReactElement, forwardRef } from 'react';
 import { SelectEntry } from '..';
 import { getNormalizedId } from '../../../utils';
@@ -33,6 +34,11 @@ export type Props = {
   error?: string;
   getOptionItemLabel?: (option) => string;
   hideInput?: boolean;
+  renderOption?: (
+    renderProps: HTMLAttributes<HTMLLIElement>,
+    option: SelectEntry,
+    state: AutocompleteRenderOptionState
+  ) => ReactElement;
   label: string;
   loading?: boolean;
   onTextChange?;
@@ -52,7 +58,7 @@ export type Props = {
 > &
   UseAutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>;
 
-const LoadingIndicator = (): JSX.Element => {
+const LoadingIndicator = (): ReactElement => {
   const { classes } = useAutoCompleteStyles({});
 
   return (
@@ -90,10 +96,11 @@ const AutocompleteField = forwardRef(
       forceInputRenderValue = false,
       textFieldSlotsAndSlotProps,
       autocompleteSlotsAndSlotProps,
+      renderOption,
       ...autocompleteProps
     }: Props,
     ref?: ForwardedRef<HTMLDivElement>
-  ): JSX.Element => {
+  ): ReactElement => {
     const { classes, cx } = useAutoCompleteStyles({ hideInput });
     const { t } = useTranslation();
     const theme = useTheme();
@@ -107,7 +114,24 @@ const AutocompleteField = forwardRef(
       );
     };
 
-    const renderInput = (params): JSX.Element => {
+    const renderOptions = renderOption
+      ? renderOption
+      : (props, option): ReactElement => {
+          return (
+            <li
+              className={classes.options}
+              {...(props as HTMLAttributes<HTMLLIElement>)}
+            >
+              <Option
+                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
+              >
+                {getOptionItemLabel(option)}
+              </Option>
+            </li>
+          );
+        };
+
+    const renderInput = (params): ReactElement => {
       return (
         <TextField
           {...params}
@@ -202,20 +226,7 @@ const AutocompleteField = forwardRef(
         options={options}
         ref={ref}
         renderInput={renderInput}
-        renderOption={(props, option): JSX.Element => {
-          return (
-            <li
-              className={classes.options}
-              {...(props as HTMLAttributes<HTMLLIElement>)}
-            >
-              <Option
-                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
-              >
-                {getOptionItemLabel(option)}
-              </Option>
-            </li>
-          );
-        }}
+        renderOption={renderOptions}
         size="small"
         slotProps={{
           ...autocompleteSlotsAndSlotProps?.slotProps,

package/src/InputField/Select/Option.tsx

@@ -1,4 +1,4 @@
-import { RefObject, forwardRef } from 'react';
+import { ReactElement, RefObject, forwardRef } from 'react';
 
 import { equals, isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
@@ -28,12 +28,12 @@ const useStyles = makeStyles()((theme) => ({
 
 interface Props {
   checkboxSelected?: boolean;
-  children: string;
+  children: string | ReactElement;
   thumbnailUrl?: string;
 }
 
 const Option = forwardRef(
-  ({ children, checkboxSelected, thumbnailUrl }: Props, ref): JSX.Element => {
+  ({ children, checkboxSelected, thumbnailUrl }: Props, ref): ReactElement => {
     const { classes } = useStyles();
 
     return (

package/src/InputField/Select/index.tsx

@@ -96,6 +96,7 @@ const SelectField = ({
       fullWidth={fullWidth}
       size="small"
       {...formControlProps}
+      
     >
       {label && <InputLabel>{label}</InputLabel>}
       <Select
@@ -150,4 +151,4 @@ const SelectField = ({
   );
 };
 
-export default SelectField;
+export default SelectField;

package/src/Listing/ActionBar/Pagination.tsx

@@ -22,7 +22,8 @@ const MemoizedPagination = memo(
     equals(prevProps.page, nextProps.page) &&
     equals(prevProps.count, nextProps.count) &&
     equals(prevProps.labelRowsPerPage, nextProps.labelRowsPerPage) &&
-    equals(prevProps.className, nextProps.className)
+    equals(prevProps.className, nextProps.className) &&
+    prevProps.labelDisplayedRows === nextProps.labelDisplayedRows
 );
 
 export default MemoizedPagination;

package/src/Listing/ActionBar/index.tsx

@@ -5,13 +5,32 @@ import { makeStyles } from 'tss-react/mui';
 
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import CircularProgress from '@mui/material/CircularProgress';
 import Divider from '@mui/material/Divider';
+import Tooltip from '@mui/material/Tooltip';
 
 import { ListingVariant, userAtom } from '@centreon/ui-context';
 
-import { IconButton, ListingProps } from '../..';
+import { useAtomValue } from 'jotai';
+import { equals, isEmpty, isNil, not, pick } from 'ramda';
+import {
+  type ChangeEvent,
+  type MouseEvent,
+  type ReactNode,
+  useCallback
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
+
+import { IconButton, type ListingProps } from '../..';
 import { useMemoComponent } from '../../utils';
-import { labelOf, labelRowsPerPage } from '../translatedLabels';
+import {
+  labelApproximateCount,
+  labelApproximateCountTooltip,
+  labelComputingExactCount,
+  labelOf,
+  labelRowsPerPage
+} from '../translatedLabels';
 
 import ColumnMultiSelect from './ColumnMultiSelect';
 import StyledPagination from './Pagination';
@@ -88,6 +107,9 @@ type Props = Pick<
   | 'customPaginationClassName'
   | 'listingVariant'
   | 'viewerModeConfiguration'
+  | 'approximateTotalRows'
+  | 'onApproximateCountClick'
+  | 'isApproximateCountLoading'
 >;
 
 const MemoListingActionBar = ({
@@ -107,7 +129,10 @@ const MemoListingActionBar = ({
   widthToMoveTablePagination = 550,
   actionsBarMemoProps = [],
   viewerModeConfiguration,
-  listingVariant
+  listingVariant,
+  approximateTotalRows = false,
+  onApproximateCountClick,
+  isApproximateCountLoading = false
 }: Props): JSX.Element => {
   const marginWidthTableListing = 30;
   const { classes, cx } = useStyles({
@@ -118,17 +143,89 @@ const MemoListingActionBar = ({
 
   const { themeMode } = useAtomValue(userAtom);
 
-  const changeRowPerPage = (event): void => {
+  const changeRowPerPage = (
+    event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+  ): void => {
     onLimitChange?.(event.target.value);
     onPaginate?.(0);
   };
 
-  const changePage = (_, value: number): void => {
+  const changePage = (
+    _: MouseEvent<HTMLButtonElement> | null,
+    value: number
+  ): void => {
     onPaginate?.(value);
   };
 
-  const labelDisplayedRows = ({ from, to, count }): string =>
-    `${from}-${to} ${t(labelOf)} ${count}`;
+  const labelDisplayedRows = useCallback(
+    ({
+      from,
+      to,
+      count
+    }: {
+      count: number;
+      from: number;
+      to: number;
+    }): ReactNode => {
+      const range = `${from}-${to} ${t(labelOf)} `;
+
+      if (!approximateTotalRows) {
+        return `${range}${count}`;
+      }
+
+      if (isApproximateCountLoading) {
+        return (
+          <span
+            style={{ alignItems: 'center', display: 'inline-flex', gap: 4 }}
+          >
+            {range}
+            <CircularProgress size={10} />
+            <span>{t(labelComputingExactCount)}</span>
+          </span>
+        );
+      }
+
+      const approximateLabel = (
+        <button
+          onClick={onApproximateCountClick}
+          style={{
+            background: 'none',
+            border: 'none',
+            color: 'inherit',
+            cursor: onApproximateCountClick ? 'pointer' : 'default',
+            font: 'inherit',
+            fontWeight: 600,
+            padding: 0,
+            textDecoration: onApproximateCountClick
+              ? 'underline dotted'
+              : 'none'
+          }}
+          type="button"
+        >
+          {t(labelApproximateCount)}
+        </button>
+      );
+
+      return (
+        <span>
+          {range}
+          {onApproximateCountClick ? (
+            <Tooltip title={t(labelApproximateCountTooltip)}>
+              {approximateLabel}
+            </Tooltip>
+          ) : (
+            approximateLabel
+          )}
+        </span>
+      );
+    },
+    [
+      approximateTotalRows,
+      isApproximateCountLoading,
+      onApproximateCountClick,
+      t
+    ]
+  );
 
   return useMemoComponent({
     Component: (
@@ -223,6 +320,8 @@ const MemoListingActionBar = ({
       ),
       columnConfiguration,
       customPaginationClassName,
+      approximateTotalRows,
+      isApproximateCountLoading,
       ...actionsBarMemoProps
     ]
   });
@@ -245,7 +344,10 @@ const ListingActionBar = ({
   widthToMoveTablePagination,
   customPaginationClassName,
   listingVariant,
-  viewerModeConfiguration
+  viewerModeConfiguration,
+  approximateTotalRows,
+  onApproximateCountClick,
+  isApproximateCountLoading
 }: Props): JSX.Element | null => {
   if (
     not(paginated) &&
@@ -259,13 +361,16 @@ const ListingActionBar = ({
     <MemoListingActionBar
       actions={actions}
       actionsBarMemoProps={actionsBarMemoProps}
+      approximateTotalRows={approximateTotalRows}
       columnConfiguration={columnConfiguration}
       columns={columns}
       currentPage={currentPage}
       customPaginationClassName={customPaginationClassName}
+      isApproximateCountLoading={isApproximateCountLoading}
       limit={limit}
       listingVariant={listingVariant}
       moveTablePagination={moveTablePagination}
+      onApproximateCountClick={onApproximateCountClick}
       paginated={paginated}
       totalRows={totalRows}
       viewerModeConfiguration={viewerModeConfiguration}

package/src/Listing/index.tsx

@@ -134,6 +134,9 @@ export interface Props<TRow> {
     labelExpand: string;
   };
   totalRows?: number;
+  approximateTotalRows?: boolean;
+  onApproximateCountClick?: () => void;
+  isApproximateCountLoading?: boolean;
   viewerModeConfiguration?: ViewerModeConfiguration;
   widthToMoveTablePagination?: number;
   isActionBarVisible: boolean;
@@ -198,7 +201,10 @@ const Listing = <
     labelExpand: 'Expand'
   },
   isActionBarVisible = true,
-  labelNoResultFound = defaultLabelNoResultFound
+  labelNoResultFound = defaultLabelNoResultFound,
+  approximateTotalRows = false,
+  onApproximateCountClick,
+  isApproximateCountLoading = false
 }: Props<TRow>): JSX.Element => {
   const currentVisibleColumns = getVisibleColumns({
     columnConfiguration,
@@ -527,13 +533,16 @@ const Listing = <
             <ListingActionBar
               actions={actions}
               actionsBarMemoProps={actionsBarMemoProps}
+              approximateTotalRows={approximateTotalRows}
               columnConfiguration={columnConfiguration}
               columns={columns}
               currentPage={currentPage}
               customPaginationClassName={customPaginationClassName}
+              isApproximateCountLoading={isApproximateCountLoading}
               limit={limit}
               listingVariant={listingVariant}
               moveTablePagination={moveTablePagination}
+              onApproximateCountClick={onApproximateCountClick}
               paginated={paginated}
               totalRows={totalRows}
               viewerModeConfiguration={viewerModeConfiguration}
@@ -748,20 +757,26 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
   widthToMoveTablePagination,
   listingVariant,
   labelNoResultFound,
+  approximateTotalRows,
+  onApproximateCountClick,
+  isApproximateCountLoading,
   ...props
 }: MemoizedListingProps<TRow>): JSX.Element =>
   useMemoComponent({
     Component: (
       <Listing
+        approximateTotalRows={approximateTotalRows}
         checkable={checkable}
         columnConfiguration={columnConfiguration}
         columns={columns}
         currentPage={currentPage}
         innerScrollDisabled={innerScrollDisabled}
+        isApproximateCountLoading={isApproximateCountLoading}
         limit={limit}
         listingVariant={listingVariant}
         loading={loading}
         moveTablePagination={moveTablePagination}
+        onApproximateCountClick={onApproximateCountClick}
         paginated={paginated}
         rowColorConditions={rowColorConditions}
         rows={rows}
@@ -794,7 +809,9 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
       sortField,
       innerScrollDisabled,
       listingVariant,
-      labelNoResultFound
+      labelNoResultFound,
+      approximateTotalRows,
+      isApproximateCountLoading
     ]
   });
 

package/src/Listing/translatedLabels.ts

@@ -1,6 +1,10 @@
 export const labelTo = 'to';
 export const labelNoResultFound = 'No result found';
 export const labelOf = 'of';
+export const labelApproximateCount = '1,000+';
+export const labelApproximateCountTooltip =
+  'More than 1,000 resources match your search. Click to continue.';
+export const labelComputingExactCount = 'Loading...';
 export const labelRowsPerPage = 'Rows per page';
 export const labelFirstPage = 'First page';
 export const labelLastPage = 'Last page';

package/src/Module/index.tsx

@@ -3,7 +3,6 @@ import { Provider as JotaiProvider, createStore } from 'jotai';
 
 import { StylesProvider, createGenerateClassName } from '@mui/styles';
 
-import { ThemeOptions } from '@mui/material';
 import { QueryProvider, ThemeProvider } from '..';
 import SnackbarProvider from '../Snackbar/SnackbarProvider';
 
@@ -13,10 +12,6 @@ export interface ModuleProps {
   queryClient?: QueryClient;
   seedName: string;
   store: ReturnType<typeof createStore>;
-  overrideTheme?: {
-    light: Partial<ThemeOptions>;
-    dark: Partial<ThemeOptions>;
-  };
 }
 
 const Module = ({
@@ -24,8 +19,7 @@ const Module = ({
   seedName,
   maxSnackbars = 3,
   store,
-  queryClient,
-  overrideTheme
+  queryClient
 }: ModuleProps): JSX.Element => {
   const generateClassName = createGenerateClassName({
     seed: seedName
@@ -35,7 +29,7 @@ const Module = ({
     <QueryProvider queryClient={queryClient}>
       <JotaiProvider store={store}>
         <StylesProvider generateClassName={generateClassName}>
-          <ThemeProvider overrideTheme={overrideTheme}>
+          <ThemeProvider>
             <SnackbarProvider maxSnackbars={maxSnackbars}>
               {children}
             </SnackbarProvider>

package/src/ThemeProvider/index.tsx

@@ -1,12 +1,11 @@
 import { useAtomValue } from 'jotai';
-import { equals, mergeDeepRight } from 'ramda';
+import { equals } from 'ramda';
 import { CSSInterpolation } from 'tss-react';
 
 import {
   ButtonProps,
   InputBaseProps,
   ThemeProvider as MuiThemeProvider,
-  PaletteOptions,
   StyledEngineProvider,
   Theme,
   createTheme
@@ -27,7 +26,7 @@ import { ReactNode, useMemo } from 'react';
 import { getPalette } from './palettes';
 
 declare module '@mui/styles/defaultTheme' {
-  interface DefaultTheme extends Theme {}
+  interface DefaultTheme extends Theme { }
 }
 
 declare module '@mui/material/TextField' {
@@ -199,14 +198,14 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
       styleOverrides: {
         root: ({ theme }) => ({
           '&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus':
-            {
-              background: equals(theme.palette.mode, ThemeMode.dark)
-                ? theme.palette.primary.dark
-                : theme.palette.primary.light,
-              color: equals(theme.palette.mode, ThemeMode.dark)
-                ? theme.palette.common.white
-                : theme.palette.primary.main
-            },
+          {
+            background: equals(theme.palette.mode, ThemeMode.dark)
+              ? theme.palette.primary.dark
+              : theme.palette.primary.light,
+            color: equals(theme.palette.mode, ThemeMode.dark)
+              ? theme.palette.common.white
+              : theme.palette.primary.main
+          },
           fontSize: theme.typography.body2.fontSize
         })
       }
@@ -223,12 +222,12 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
       styleOverrides: {
         root: ({ theme }) => ({
           [`[role="tooltip"] &, &.MuiMenu-paper, &.${autocompleteClasses.paper}`]:
-            {
-              backgroundColor: theme.palette.background.default,
-              border: 'none',
-              borderRadius: `${theme.shape.borderRadius}px`,
-              boxShadow: theme.shadows[3]
-            }
+          {
+            backgroundColor: theme.palette.background.default,
+            border: 'none',
+            borderRadius: `${theme.shape.borderRadius}px`,
+            boxShadow: theme.shadows[3]
+          }
         })
       }
     },
@@ -258,23 +257,15 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
 
 interface Props {
   children: ReactNode;
-  overrideTheme?: {
-    light: Partial<PaletteOptions>;
-    dark: Partial<PaletteOptions>;
-  };
 }
 
-const ThemeProvider = ({ children, overrideTheme }: Props): JSX.Element => {
+const ThemeProvider = ({ children }: Props): JSX.Element => {
   const { themeMode } = useAtomValue(userAtom);
 
-  const theme = useMemo(() => {
-    const overrideThemeByMode = overrideTheme?.[themeMode || 'light'];
-    return createTheme(
-      mergeDeepRight(getTheme(themeMode || ThemeMode.light), {
-        palette: overrideThemeByMode || {}
-      })
-    );
-  }, [themeMode, overrideTheme]);
+  const theme = useMemo(
+    () => createTheme(getTheme(themeMode || ThemeMode.light)),
+    [themeMode]
+  );
 
   return (
     <StyledEngineProvider injectFirst enableCssLayer>

package/src/ThemeProvider/tailwindcss.css

@@ -25,7 +25,7 @@
   /* =============
      COLOR SYSTEM
      ============= */
-
+  
   /* Action colors */
   --color-action-acknowledged: #745f35;
   --color-action-acknowledged-background: #dfd2b9;
@@ -43,7 +43,7 @@
   --color-action-in-downtime-background: #e5d8f3;
   --color-action-selected: rgba(102, 102, 102, 0.3);
   --color-action-selected-opacity: 0.3;
-
+  
   /* Background colors */
   --color-background-default: #f4f4f4;
   --color-background-listing-header: #666666;
@@ -52,18 +52,18 @@
   --color-background-paper: #ffffff;
   --color-background-tooltip: #434e58;
   --color-background-widget: #f8f8f8;
-
+  
   /* Chip colors */
   --color-chip-error: #ff6666;
   --color-chip-info: #1588d1;
   --color-chip-neutral: #6da4e4;
   --color-chip-success: #88b922;
   --color-chip-warning: #fd9b27;
-
+  
   /* Utility colors */
   --color-divider: #e3e3e3;
   --color-error-main: #ff4a4a;
-
+  
   /* Header colors */
   --color-header-page-action-background-active: #1975d10f;
   --color-header-page-action-background-default: #ffffff00;
@@ -90,18 +90,19 @@
   --color-header-menu-item-color-active: #3e85d5;
   --color-header-menu-item-color-default: #1b2127;
   --color-header-menu-item-color-hover: #101418;
-
+  
   /* State colors */
   --color-pending-main: #1ebeb3;
-
+  
   /* Primary & Secondary colors */
   --color-primary-main: #2e68aa;
   --color-primary-light: #cde7fc;
   --color-primary-dark: #255891;
+  --color-primary-contrastText: #fff;
   --color-secondary-main: #c772d6;
   --color-secondary-light: #e5a5f0;
   --color-secondary-dark: #ac28c1;
-
+  
   /* Status colors */
   --color-status-background-error: #ff6666;
   --color-status-background-none: --alpha(#2e68aa / 10%);
@@ -110,7 +111,7 @@
   --color-stauts-background-unknown: #e3e3e3;
   --color-status-background-warning: #fd9b27;
   --color-success-main: #88b922;
-
+  
   /* Text colors */
   --color-text-disabled: #999999;
   --color-text-primary: #000000;
@@ -118,7 +119,7 @@
   --color-warning-main: #fd9b27;
   --color-warning-light: #fcc481;
   --color-warning-dark: #fc7e00;
-
+  
   /* Base colors */
   --color-white: #ffffff;
   --color-black: #000000;
@@ -185,6 +186,7 @@
     --color-primary-main: #6eaff8;
     --color-primary-light: #8bbff9;
     --color-primary-dark: #4974a5;
+    --color-primary-contrastText: #000;
     --color-secondary-main: #7c1fa2;
     --color-status-background-error: #d60101;
     --color-status-background-none: --alpha(#2e68aa / 10%);

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx

@@ -95,9 +95,10 @@ const PickersStartEndDate = ({
   changeDate,
   rangeStartDate,
   rangeEndDate,
-  direction = PickersStartEndDateDirection.column,
-  className
+  direction = PickersStartEndDateDirection.column
 }: PickersStartEndDateProps): JSX.Element => {
+  const { classes } = useStyles();
+
   const locale = useLocale();
   const error = useAtomValue(errorTimePeriodAtom);
   const isError = error || isInvalidDate({ endDate, startDate });
@@ -107,14 +108,16 @@ const PickersStartEndDate = ({
   const maxEnd = rangeEndDate?.max;
   const minEnd = rangeEndDate?.min || startDate;
 
-  const isColumn = equals(direction, PickersStartEndDateDirection.column)
+  const styleContainer = equals(direction, PickersStartEndDateDirection.column)
+    ? classes.verticalDirection
+    : classes.horizontalDirection;
 
   return (
     <LocalizationProvider
       adapterLocale={locale.substring(0, 2)}
       dateAdapter={AdapterDayjs}
     >
-      <div className={`flex ${isColumn ? 'flex-col justify-center' : 'flex-row items-center py-2 px-4'} gap-2 ${className}`}>
+      <div className={styleContainer}>
         <PickerDateWithLabel
           changeDate={changeDate}
           date={startDate}
@@ -140,7 +143,7 @@ const PickersStartEndDate = ({
       {isError && (
         <ErrorText
           message="The end date must be greater than the start date"
-          style="text-center"
+          style={classes.error}
         />
       )}
     </LocalizationProvider>

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts

@@ -71,5 +71,4 @@ export interface PickersStartEndDateProps
     PickersStartEndDateModel {
   direction?: PickersStartEndDateDirection;
   disabled?: DisabledPicker;
-  className?: string;
 }