@centreon/ui 24.4.1-MON-24235-Filter-App-token.3 → 24.4.1-SAAS-1230.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-24235-Filter-App-token.3",
+  "version": "24.4.1-SAAS-1230.1",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Dialog/Confirm/index.tsx

@@ -1,4 +1,4 @@
-import { ButtonProps, DialogContentText, Typography } from '@mui/material';
+import { DialogContentText, Typography } from '@mui/material';
 
 import Dialog, { Props as DialogProps } from '..';
 
@@ -6,23 +6,15 @@ type Props = DialogProps & {
   children?: JSX.Element;
   labelMessage?: string | null;
   labelSecondMessage?: string | null;
-  restCancelButtonProps?: ButtonProps;
-  restConfirmButtonProps?: ButtonProps;
 };
 
 const Confirm = ({
   labelMessage,
   labelSecondMessage,
   children,
-  restCancelButtonProps,
-  restConfirmButtonProps,
   ...rest
 }: Props): JSX.Element => (
-  <Dialog
-    restCancelButtonProps={restCancelButtonProps}
-    restConfirmButtonProps={restConfirmButtonProps}
-    {...rest}
-  >
+  <Dialog {...rest}>
     <DialogContentText>
       {labelMessage && <Typography>{labelMessage}</Typography>}
       {labelSecondMessage && <Typography>{labelSecondMessage}</Typography>}

package/src/Dialog/index.tsx

@@ -9,8 +9,7 @@ import {
   DialogContent,
   DialogActions,
   DialogProps,
-  CircularProgress,
-  ButtonProps
+  CircularProgress
 } from '@mui/material';
 
 import { DataTestAttributes } from '../@types/data-attributes';
@@ -49,8 +48,6 @@ export type Props = {
   onClose?: () => void;
   onConfirm: (event, value?) => void;
   open: boolean;
-  restCancelButtonProps?: ButtonProps;
-  restConfirmButtonProps?: ButtonProps;
   submitting?: boolean;
 } & DialogProps &
   DataTestAttributes;
@@ -73,8 +70,6 @@ const Dialog = ({
   dialogContentClassName,
   dialogActionsClassName,
   dialogConfirmButtonClassName,
-  restCancelButtonProps,
-  restConfirmButtonProps,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ contentWidth });
@@ -106,7 +101,6 @@ const Dialog = ({
             data-testid="Cancel"
             disabled={cancelDisabled}
             onClick={onCancel}
-            {...restCancelButtonProps}
           >
             {labelCancel}
           </Button>
@@ -119,7 +113,6 @@ const Dialog = ({
           disabled={confirmDisabled}
           endIcon={submitting && <CircularProgress size={15} />}
           onClick={onConfirm}
-          {...restConfirmButtonProps}
         >
           {labelConfirm}
         </Button>

package/src/Graph/LineChart/Legend/Legend.styles.ts

@@ -8,7 +8,7 @@ interface MakeStylesProps {
 
 export const legendWidth = 21;
 const legendItemHeight = 5.25;
-const legendItemHeightCompact = 1.75;
+const legendItemHeightCompact = 2;
 
 export const useStyles = makeStyles<MakeStylesProps>()(
   (theme, { limitLegendRows }) => ({

package/src/Graph/LineChart/Legend/LegendHeader.tsx

@@ -38,7 +38,7 @@ const LegendHeader = ({
 
   const getEndText = (): string => {
     if (value) {
-      return `${value}${hasUnit ? ` ${unit}` : ''}`;
+      return value;
     }
 
     return hasUnit ? ` ${unitName}` : '';

package/src/Graph/LineChart/Legend/useInteractiveValues.ts

@@ -5,7 +5,7 @@ import { equals, find, isNil } from 'ramda';
 
 import { mousePositionAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
 import {
-  formatMetricValue,
+  formatMetricValueWithUnit,
   getLineForMetric,
   getMetrics,
   getTimeValue
@@ -73,7 +73,7 @@ const useInteractiveValues = ({
       metric_id
     }) as Line;
 
-    const formattedValue = formatMetricValue({
+    const formattedValue = formatMetricValueWithUnit({
       base,
       unit,
       value

package/src/Graph/LineChart/index.tsx

@@ -78,7 +78,7 @@ const WrapperLineChart = ({
   return (
     <div
       ref={lineChartRef as MutableRefObject<HTMLDivElement>}
-      style={{ height: '100%', width: '100%' }}
+      style={{ height: '100%', overflowY: 'hidden', width: '100%' }}
     >
       <ParentSize>
         {({

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

@@ -1,4 +1,4 @@
-import { includes, map, prop, reject, sortBy, toLower, compose } from 'ramda';
+import { includes, map, prop, reject } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { Chip, ChipProps, Tooltip } from '@mui/material';
@@ -85,11 +85,9 @@ const MultiAutocompleteField = ({
     return includes(id, valueIds);
   };
 
-  const sortByName = sortBy(compose(toLower, prop('name')));
-
   const autocompleteOptions = disableSortedOptions
     ? options
-    : sortByName([...values, ...reject(isOptionSelected, options)]);
+    : [...values, ...reject(isOptionSelected, options)];
 
   return (
     <Autocomplete

package/src/api/useMutationQuery/index.test.ts

@@ -48,7 +48,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate(user);
+    result.current.mutate({ payload: user });
 
     await waitFor(() => {
       expect(result.current?.isError).toEqual(false);
@@ -64,7 +64,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate(user);
+    result.current.mutate({ payload: user });
 
     await waitFor(() => {
       expect(result.current?.isError).toEqual(true);
@@ -85,7 +85,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate(user);
+    result.current.mutate({ payload: user });
 
     await waitFor(() => {
       expect(result.current?.isError).toEqual(true);
@@ -109,7 +109,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate(user);
+    result.current.mutate({ payload: user });
 
     await waitFor(() => {
       expect(mockedShowErrorMessage).not.toHaveBeenCalled();

package/src/api/useMutationQuery/index.ts

@@ -22,6 +22,11 @@ export enum Method {
   PUT = 'PUT'
 }
 
+interface Variables<TMeta, T> {
+  _meta?: TMeta;
+  payload?: T;
+}
+
 export type UseMutationQueryProps<T, TMeta> = {
   baseEndpoint?: string;
   catchError?: (props: CatchErrorProps) => void;
@@ -33,30 +38,36 @@ export type UseMutationQueryProps<T, TMeta> = {
   method: Method;
   onError?: (
     error: ResponseError,
-    variables: T & { _meta: TMeta },
+    variables: Variables<TMeta, T>,
     context: unknown
   ) => unknown;
-  onMutate?: (variables: T & { _meta: TMeta }) => Promise<unknown> | unknown;
+  onMutate?: (variables: Variables<TMeta, T>) => Promise<unknown> | unknown;
   onSuccess?: (
     data: ResponseError | T,
-    variables: T & {
-      _meta: TMeta;
-    },
+    variables: Variables<TMeta, T>,
     context: unknown
   ) => unknown;
 } & Omit<
-  UseMutationOptions<T & { _meta?: TMeta }>,
-  'mutationFn' | 'onError' | 'onMutate' | 'onSuccess'
+  UseMutationOptions<{ _meta?: TMeta; payload: T }>,
+  'mutationFn' | 'onError' | 'onMutate' | 'onSuccess' | 'mutateAsync' | 'mutate'
 >;
 
 const log = anylogger('API Request');
 
-export type UseMutationQueryState<T> = Omit<
+export type UseMutationQueryState<T, TMeta> = Omit<
   UseMutationResult<T | ResponseError>,
-  'isError'
+  'isError' | 'mutate' | 'mutateAsync'
 > & {
   isError: boolean;
   isMutating: boolean;
+  mutate: (variables: Variables<TMeta, T>) => ResponseError | T;
+  mutateAsync: (
+    variables: Variables<TMeta, T>,
+    rest?: Pick<
+      UseMutationQueryProps<T, TMeta>,
+      'onError' | 'onMutate' | 'onSettled' | 'onSuccess'
+    >
+  ) => Promise<ResponseError | T>;
 };
 
 const useMutationQuery = <T extends object, TMeta>({
@@ -72,18 +83,18 @@ const useMutationQuery = <T extends object, TMeta>({
   onSuccess,
   onSettled,
   baseEndpoint
-}: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T> => {
+}: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T, TMeta> => {
   const { showErrorMessage } = useSnackbar();
 
   const queryData = useMutation<
     T | ResponseError,
     ResponseError,
-    T & { _meta: TMeta }
+    Variables<TMeta, T>
   >({
     mutationFn: (
-      _payload: T & { _meta: TMeta }
+      variables: Variables<TMeta, T>
     ): Promise<T | ResponseError> => {
-      const { _meta, ...payload } = _payload || {};
+      const { _meta, payload } = variables || {};
 
       return customFetch<T>({
         baseEndpoint,

package/src/components/List/Item/ListItem.tsx

@@ -1,10 +1,10 @@
 import { ForwardedRef, forwardRef, ReactElement, ReactNode } from 'react';
 
-import { ListItemProps, ListItem as MuiListItem } from '@mui/material';
+import { ListItem as MuiListItem } from '@mui/material';
 
 import { useStyles } from './ListItem.styles';
 
-type Props = {
+type ListItemProps = {
   action?: ReactElement;
   children: ReactNode | Array<ReactNode>;
   className?: string;
@@ -12,7 +12,7 @@ type Props = {
 
 export const ListItem = forwardRef(
   (
-    { action, children, className, ...attr }: Props & ListItemProps,
+    { action, children, className, ...attr }: ListItemProps,
     ref?: ForwardedRef<HTMLLIElement>
   ) => {
     const { classes, cx } = useStyles();