@centreon/ui 23.10.119 → 23.10.120

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

@@ -2,12 +2,15 @@ import { useAtomValue } from 'jotai';
 import { makeStyles } from 'tss-react/mui';
 import { equals } from 'ramda';
 import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
 
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { Typography } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 
 import { userAtom } from '@centreon/ui-context';
-import { useDateTimePickerAdapter } from '@centreon/ui';
 
 import DateTimePickerInput from '../../DateTimePickerInput';
 import {
@@ -20,6 +23,9 @@ import ErrorText from './ErrorText';
 import { PickersData, PickersStartEndDateDirection } from './models';
 import { PickersStartEndDateModel } from './usePickersStartEndDate';
 
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
 const useStyles = makeStyles()((theme) => ({
   error: {
     textAlign: 'center'
@@ -104,7 +110,6 @@ const PickersStartEndDate = ({
   direction = PickersStartEndDateDirection.column
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
-  const { Adapter } = useDateTimePickerAdapter();
 
   const { locale } = useAtomValue(userAtom);
   const error = useAtomValue(errorTimePeriodAtom);
@@ -126,7 +131,7 @@ const PickersStartEndDate = ({
   return (
     <LocalizationProvider
       adapterLocale={locale.substring(0, 2)}
-      dateAdapter={Adapter}
+      dateAdapter={AdapterDayjs}
     >
       <div className={styleContainer}>
         <PickerDateWithLabel

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

@@ -18,8 +18,6 @@ export interface PickersData {
   getError?: (value: boolean) => void;
   isDisabledEndPicker?: boolean;
   isDisabledStartPicker?: boolean;
-  onCloseEndPicker?: (isClosed: boolean) => void;
-  onCloseStartPicker?: (isClosed: boolean) => void;
   rangeEndDate?: RangeDate;
   rangeStartDate?: RangeDate;
 }

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -1,19 +1,29 @@
-import dayjs from 'dayjs';
+import { useCallback } from 'react';
 
-import { DateTimePicker } from '@mui/x-date-pickers';
+import dayjs, { Dayjs } from 'dayjs';
+import { useAtomValue } from 'jotai';
+import { equals } from 'ramda';
 
-import { useDateTimePickerAdapter } from '@centreon/ui';
+import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import { userAtom } from '@centreon/ui-context';
 
 import { CustomTimePeriodProperty } from './models';
 
+interface ChangeDateProps {
+  date: Date;
+  property: CustomTimePeriodProperty | string;
+}
+
 interface Props {
-  changeDate: (props) => void;
+  changeDate: (props: ChangeDateProps) => void;
   date: Date | null;
   desktopMediaQuery?: string;
   disabled?: boolean;
   maxDate?: Date;
   minDate?: Date;
-  property: CustomTimePeriodProperty;
+  property: CustomTimePeriodProperty | string;
 }
 
 const DateTimePickerInput = ({
@@ -25,24 +35,42 @@ const DateTimePickerInput = ({
   disabled = false,
   desktopMediaQuery
 }: Props): JSX.Element => {
-  const { desktopPickerMediaQuery } = useDateTimePickerAdapter();
+  const desktopPickerMediaQuery =
+    '@media (min-width: 1024px) or (pointer: fine)';
+
+  const { timezone, locale } = useAtomValue(userAtom);
+
+  const isUTC = equals(timezone, 'UTC');
 
   const changeTime = (newValue: dayjs.Dayjs | null): void => {
     changeDate({ date: dayjs(newValue).toDate(), property });
   };
 
+  const formatDate = useCallback(
+    (currentDate: Date | null): Dayjs => {
+      return isUTC ? dayjs.utc(currentDate) : dayjs.tz(currentDate, timezone);
+    },
+    [isUTC, timezone]
+  );
+
   return (
-    <DateTimePicker<dayjs.Dayjs>
-      dayOfWeekFormatter={(day: string): string =>
-        day.substring(0, 2).toUpperCase()
-      }
-      desktopModeMediaQuery={desktopMediaQuery ?? desktopPickerMediaQuery}
-      disabled={disabled}
-      maxDate={maxDate && dayjs(maxDate)}
-      minDate={minDate && dayjs(minDate)}
-      value={dayjs(date)}
-      onChange={changeTime}
-    />
+    <LocalizationProvider
+      adapterLocale={locale.substring(0, 2)}
+      dateAdapter={AdapterDayjs}
+      dateLibInstance={dayjs}
+    >
+      <DateTimePicker<dayjs.Dayjs>
+        dayOfWeekFormatter={(dayOfWeek) =>
+          dayOfWeek.substring(0, 2).toLocaleUpperCase()
+        }
+        desktopModeMediaQuery={desktopMediaQuery ?? desktopPickerMediaQuery}
+        disabled={disabled}
+        maxDate={maxDate && formatDate(maxDate)}
+        minDate={minDate && formatDate(minDate)}
+        value={formatDate(date)}
+        onChange={changeTime}
+      />
+    </LocalizationProvider>
   );
 };
 

package/src/TimePeriods/TimePeriods.cypress.spec.tsx

@@ -3,15 +3,10 @@ import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
 import { Provider, createStore } from 'jotai';
-import { equals, inc } from 'ramda';
+import { equals } from 'ramda';
 import { renderHook } from '@testing-library/react';
 
-import { LocalizationProvider } from '@mui/x-date-pickers';
-
-import {
-  useLocaleDateTimeFormat,
-  useDateTimePickerAdapter
-} from '@centreon/ui';
+import { useLocaleDateTimeFormat } from '@centreon/ui';
 import { ListingVariant, userAtom } from '@centreon/ui-context';
 
 import { CustomTimePeriodProperty } from './models';
@@ -297,10 +292,6 @@ testData.forEach((item) =>
     beforeEach(() => {
       cy.viewport('macbook-13');
 
-      const { result } = renderHook(() => useDateTimePickerAdapter());
-
-      const { Adapter } = result.current;
-
       const store = createStore();
       store.set(userAtom, {
         ...retrievedUser,
@@ -311,31 +302,16 @@ testData.forEach((item) =>
       cy.mount({
         Component: (
           <Provider store={store}>
-            <LocalizationProvider adapterLocale="en" dateAdapter={Adapter}>
-              <DateTimePickerInput
-                changeDate={cy.stub()}
-                date={new Date(item.initialDate)}
-                desktopMediaQuery="@media (min-width: 1024px)"
-                property={CustomTimePeriodProperty.start}
-              />
-            </LocalizationProvider>
+            <DateTimePickerInput
+              changeDate={cy.stub()}
+              date={new Date(item.initialDate)}
+              property={CustomTimePeriodProperty.start}
+            />
           </Provider>
         )
       });
     });
 
-    it('checks input calendar value contains correct date', () => {
-      const { result } = renderHook(() => useLocaleDateTimeFormat());
-      const { format } = result.current;
-
-      const dateInput = format({
-        date: dayjs(item.initialDate).tz(item.timezone),
-        formatString: 'L hh:mm A'
-      });
-
-      cy.get('input').should('have.value', dateInput);
-    });
-
     it(`displays the correct number of days for the current month when the ${item.button} button is clicked`, () => {
       cy.get('button').click();
       item.data.forEach((element) => {
@@ -389,7 +365,7 @@ testData.forEach((item) =>
 
         cy.get('[role="rowgroup"]').children().as('listWeeks');
 
-        cy.get('@listWeeks').should('have.length', inc(numberWeeks));
+        cy.get('@listWeeks').should('have.length', numberWeeks);
         cy.get('@listWeeks').eq(0).as('firstWeek');
         cy.get('@firstWeek').children().as('listDaysInFirstWeek');
 
@@ -416,7 +392,7 @@ testData.forEach((item) =>
 
         cy.get('[role="rowgroup"]').children().as('listWeeks');
 
-        cy.get('@listWeeks').should('have.length', inc(numberWeeks));
+        cy.get('@listWeeks').should('have.length', numberWeeks);
 
         cy.get('@listWeeks')
           .eq(numberWeeks - 1)

package/src/TimePeriods/helpers/index.ts

@@ -23,4 +23,4 @@ export const getTimePeriodById = ({
   id,
   timePeriods
 }: TimePeriodById): TimePeriod =>
-  find<TimePeriod>(propEq('id', id))(timePeriods) as TimePeriod;
+  find<TimePeriod>(propEq(id, 'id'))(timePeriods) as TimePeriod;

package/src/TimePeriods/index.tsx

@@ -20,7 +20,7 @@ import { useStyles } from './TimePeriods.styles';
 import {
   CustomTimePeriod as CustomTimePeriodModel,
   EndStartInterval,
-  TimePeriod
+  TimePeriod as TimePeriodModel
 } from './models';
 import useTimePeriod from './useTimePeriod';
 
@@ -34,7 +34,7 @@ interface Parameters extends EndStartInterval {
 export interface Props {
   adjustTimePeriodData?: Omit<CustomTimePeriodModel, 'timelineEventsLimit'>;
   disabled?: boolean;
-  extraTimePeriods?: Array<Omit<TimePeriod, 'timelineEventsLimit'>>;
+  extraTimePeriods?: Array<Omit<TimePeriodModel, 'timelineEventsLimit'>>;
   getIsError?: (value: boolean) => void;
   getParameters?: ({ start, end, timelineEventsLimit }: Parameters) => void;
   renderExternalComponent?: ReactNode;

package/src/api/QueryProvider.tsx

@@ -7,7 +7,7 @@ const defaultCacheTime = 5 * 1_000;
 const client = new QueryClient({
   defaultOptions: {
     queries: {
-      cacheTime: defaultCacheTime,
+      gcTime: defaultCacheTime,
       refetchOnWindowFocus: false,
       staleTime: defaultCacheTime,
       suspense: true

package/src/api/TestQueryProvider.tsx

@@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 const client = new QueryClient({
   defaultOptions: {
     queries: {
-      cacheTime: 0,
+      gcTime: 0,
       retry: false
     }
   }

package/src/api/useFetchQuery/index.ts

@@ -25,7 +25,9 @@ export interface UseFetchQueryProps<T> {
   getQueryKey: () => QueryKey;
   httpCodesBypassErrorSnackbar?: Array<number>;
   isPaginated?: boolean;
-  queryOptions?: Omit<
+  queryOptions?: {
+    suspense?: boolean;
+  } & Omit<
     UseQueryOptions<T | ResponseError, Error, T | ResponseError, QueryKey>,
     'queryKey' | 'queryFn'
   >;
@@ -33,11 +35,12 @@ export interface UseFetchQueryProps<T> {
 
 export type UseFetchQueryState<T> = {
   data?: T;
+  error: Omit<ResponseError, 'isError'> | null;
   fetchQuery: () => Promise<T | ResponseError>;
   prefetchNextPage: ({ page, getPrefetchQueryKey }) => void;
   prefetchPreviousPage: ({ page, getPrefetchQueryKey }) => void;
   prefetchQuery: ({ endpointParams, queryKey }) => void;
-} & Omit<QueryObserverBaseResult, 'data'>;
+} & Omit<QueryObserverBaseResult, 'data' | 'error'>;
 
 export interface PrefetchEndpointParams {
   page: number;
@@ -58,9 +61,8 @@ const useFetchQuery = <T extends object>({
 }: UseFetchQueryProps<T>): UseFetchQueryState<T> => {
   const { showErrorMessage } = useSnackbar();
 
-  const queryData = useQuery<T | ResponseError, Error>(
-    getQueryKey(),
-    ({ signal }): Promise<T | ResponseError> =>
+  const queryData = useQuery<T | ResponseError, Error>({
+    queryFn: ({ signal }): Promise<T | ResponseError> =>
       customFetch<T>({
         catchError,
         decoder,
@@ -69,10 +71,9 @@ const useFetchQuery = <T extends object>({
         headers: new Headers(fetchHeaders),
         signal
       }),
-    {
-      ...queryOptions
-    }
-  );
+    queryKey: getQueryKey(),
+    ...queryOptions
+  });
 
   const queryClient = useQueryClient();
 
@@ -92,9 +93,8 @@ const useFetchQuery = <T extends object>({
   };
 
   const prefetchQuery = ({ endpointParams, queryKey }): void => {
-    queryClient.prefetchQuery(
-      queryKey,
-      ({ signal }): Promise<T | ResponseError> =>
+    queryClient.prefetchQuery({
+      queryFn: ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
           catchError,
           decoder,
@@ -102,8 +102,9 @@ const useFetchQuery = <T extends object>({
           endpoint: getEndpoint(endpointParams),
           headers: new Headers(fetchHeaders),
           signal
-        })
-    );
+        }),
+      queryKey
+    });
   };
 
   const prefetchNextPage = ({ page, getPrefetchQueryKey }): void => {
@@ -133,9 +134,8 @@ const useFetchQuery = <T extends object>({
   };
 
   const fetchQuery = (): Promise<T | ResponseError> => {
-    return queryClient.fetchQuery(
-      getQueryKey(),
-      ({ signal }): Promise<T | ResponseError> =>
+    return queryClient.fetchQuery({
+      queryFn: ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
           catchError,
           decoder,
@@ -143,8 +143,9 @@ const useFetchQuery = <T extends object>({
           endpoint: getEndpoint(),
           headers: new Headers(fetchHeaders),
           signal
-        })
-    );
+        }),
+      queryKey: getQueryKey()
+    });
   };
 
   const data = useMemo(
@@ -157,16 +158,19 @@ const useFetchQuery = <T extends object>({
 
   useEffect(() => {
     return (): void => {
-      queryClient.cancelQueries(getQueryKey());
+      queryClient.cancelQueries({ queryKey: getQueryKey() });
     };
   }, []);
 
-  useEffect(() => {
-    manageError();
-  }, useDeepCompare([queryData.data]));
+  useEffect(
+    () => {
+      manageError();
+    },
+    useDeepCompare([queryData.data])
+  );
 
   return {
-    ...omit(['data'], queryData),
+    ...omit(['data', 'error'], queryData),
     data,
     error: errorData?.isError ? omit(['isError'], errorData) : null,
     fetchQuery,

package/src/api/useMutationQuery/index.ts

@@ -8,7 +8,7 @@ import {
 } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
 import anylogger from 'anylogger';
-import { includes } from 'ramda';
+import { includes, omit } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
@@ -30,14 +30,33 @@ export type UseMutationQueryProps<T, TMeta> = {
   getEndpoint: (_meta: TMeta) => string;
   httpCodesBypassErrorSnackbar?: Array<number>;
   method: Method;
-} & Omit<UseMutationOptions<T & { _meta?: TMeta }>, 'mutationFn'>;
+  onError?: (
+    error: ResponseError,
+    variables: T & { _meta: TMeta },
+    context: unknown
+  ) => unknown;
+  onMutate?: (variables: T & { _meta: TMeta }) => Promise<unknown> | unknown;
+  onSuccess?: (
+    data: ResponseError | T,
+    variables: T & {
+      _meta: TMeta;
+    },
+    context: unknown
+  ) => unknown;
+} & Omit<
+  UseMutationOptions<T & { _meta?: TMeta }>,
+  'mutationFn' | 'onError' | 'onMutate' | 'onSuccess'
+>;
 
 const log = anylogger('API Request');
 
-export type UseMutationQueryState<T> = {
+export type UseMutationQueryState<T> = Omit<
+  UseMutationResult<T | ResponseError>,
+  'isError'
+> & {
   isError: boolean;
   isMutating: boolean;
-} & UseMutationResult<T | ResponseError>;
+};
 
 const useMutationQuery = <T extends object, TMeta>({
   getEndpoint,
@@ -57,8 +76,10 @@ const useMutationQuery = <T extends object, TMeta>({
     T | ResponseError,
     ResponseError,
     T & { _meta: TMeta }
-  >(
-    (_payload: T & { _meta: TMeta }): Promise<T | ResponseError> => {
+  >({
+    mutationFn: (
+      _payload: T & { _meta: TMeta }
+    ): Promise<T | ResponseError> => {
       const { _meta, ...payload } = _payload || {};
 
       return customFetch<T>({
@@ -75,12 +96,10 @@ const useMutationQuery = <T extends object, TMeta>({
         payload
       });
     },
-    {
-      onError,
-      onMutate,
-      onSuccess
-    }
-  );
+    onError,
+    onMutate,
+    onSuccess
+  });
 
   const manageError = (): void => {
     const data = queryData.data as ResponseError | undefined;
@@ -97,14 +116,17 @@ const useMutationQuery = <T extends object, TMeta>({
     }
   };
 
-  useEffect(() => {
-    manageError();
-  }, useDeepCompare([queryData.data]));
+  useEffect(
+    () => {
+      manageError();
+    },
+    useDeepCompare([queryData.data])
+  );
 
   return {
-    ...queryData,
+    ...omit(['isError'], queryData),
     isError: (queryData.data as ResponseError | undefined)?.isError || false,
-    isMutating: queryData.isLoading
+    isMutating: queryData.isPending
   };
 };
 

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -22,7 +22,7 @@ export interface DataTableItemProps {
   description?: string;
   hasActions?: boolean;
   hasCardAction?: boolean;
-  labelsDelete: {
+  labelsDelete?: {
     cancel: string;
     confirm: {
       label: string;
@@ -76,7 +76,7 @@ const DataTableItem = forwardRef(
         {hasActions && (
           <MuiCardActions>
             <span>
-              {onDelete && (
+              {onDelete && labelsDelete && (
                 <ConfirmationTooltip
                   confirmVariant="error"
                   labels={labelsDelete}

package/src/components/Form/AccessRights/__fixtures__/contactAccessRight.mock.ts

@@ -7,6 +7,8 @@ import {
   RoleResource
 } from '../AccessRights.resource';
 
+faker.seed(42);
+
 export const rolesMock = (): Array<RoleResource> => [
   { role: 'viewer' },
   { role: 'editor' }

package/src/components/Form/AccessRights/useAccessRightsForm.utils.ts

@@ -36,6 +36,6 @@ export const createInitialState = (
           contactAccessRight,
           state: 'unchanged',
           stateHistory: []
-        } as ContactAccessRightStateResource)
+        }) as ContactAccessRightStateResource
     )
     .sort(sortOnAddedStateFirstAndContactName);

package/src/components/Form/Dashboard/DashboardForm.tsx

@@ -1,7 +1,8 @@
 import { ReactElement, useCallback, useMemo } from 'react';
 
-import * as Yup from 'yup';
+import { string, number, object } from 'yup';
 import { useTranslation } from 'react-i18next';
+import { equals } from 'ramda';
 
 import { InputType } from '../../../Form/Inputs/models';
 import { Form, FormProps } from '../../../Form';
@@ -84,8 +85,8 @@ const DashboardForm = ({
         }
       ],
       submit: (values, bag) => onSubmit?.(values, bag),
-      validationSchema: Yup.object().shape({
-        description: Yup.string()
+      validationSchema: object({
+        description: string()
           .label(labels?.entity?.description || '')
           .max(
             180,
@@ -93,17 +94,19 @@ const DashboardForm = ({
               `${p.label} ${t(labelMustBeMost)} ${p.max} ${t(labelCharacters)}`
           )
           .nullable(),
-        globalRefreshInterval: Yup.object().shape({
-          interval: Yup.number().when('type', {
-            is: 'global',
-            otherwise: Yup.number().nullable(),
-            then: Yup.number()
-              .min(1, ({ min }) => t(labelMustBeAtLeast, { min }))
-              .required(t(labelRequired) as string)
+        globalRefreshInterval: object({
+          interval: number().when('type', ([type], schema) => {
+            if (equals(type, 'manual')) {
+              schema
+                .min(1, ({ min }) => t(labelMustBeAtLeast, { min }))
+                .required(t(labelRequired) as string);
+            }
+
+            return schema.nullable();
           }),
-          type: Yup.string()
+          type: string()
         }),
-        name: Yup.string()
+        name: string()
           .label(labels?.entity?.name)
           .min(3, ({ min, label }) => t(labelMustBeAtLeast, { label, min }))
           .max(50, ({ max, label }) => t(labelMustBeMost, { label, max }))

package/src/components/ItemComposition/ItemComposition.tsx

@@ -7,6 +7,7 @@ import { Button } from '..';
 import { useItemCompositionStyles } from './ItemComposition.styles';
 
 type Props = {
+  IconAdd?;
   addButtonHidden?: boolean;
   addbuttonDisabled?: boolean;
   children: Array<ReactElement>;
@@ -19,7 +20,8 @@ export const ItemComposition = ({
   children,
   labelAdd,
   addbuttonDisabled,
-  addButtonHidden
+  addButtonHidden,
+  IconAdd
 }: Props): JSX.Element => {
   const { classes } = useItemCompositionStyles();
 
@@ -31,7 +33,7 @@ export const ItemComposition = ({
           aria-label={labelAdd}
           data-testid={labelAdd}
           disabled={addbuttonDisabled}
-          icon={<AddIcon />}
+          icon={IconAdd || <AddIcon />}
           iconVariant="start"
           size="small"
           variant="ghost"

package/src/components/Menu/Button/MenuButton.tsx

@@ -15,6 +15,7 @@ import { useStyles } from './MenuButton.styles';
 type MenuButtonProps = {
   ariaLabel?: string;
   children?: ReactNode;
+  className?: string;
   hasArrow?: boolean;
   isOpen?: boolean;
   onClick?: (args: { isOpen: boolean }) => void;
@@ -29,9 +30,10 @@ const MenuButton = ({
   size = 'small',
   variant = 'ghost',
   ariaLabel,
+  className,
   ...attr
 }: MenuButtonProps): ReactElement => {
-  const { classes } = useStyles();
+  const { cx, classes } = useStyles();
 
   const { isMenuOpen, setIsMenuOpen, setAnchorEl, onOpen } = useMenu();
 
@@ -50,7 +52,7 @@ const MenuButton = ({
     <Button
       {...attr}
       aria-label={ariaLabel}
-      className={classes.menuButton}
+      className={cx(classes.menuButton, className)}
       data-is-active={isMenuOpen}
       size={size}
       variant={variant}

package/src/components/Menu/MenuItem.tsx

@@ -6,6 +6,7 @@ import { useStyles } from './Menu.styles';
 
 type MenuItemProps = {
   children?: ReactNode;
+  className?: string;
   isActive?: boolean;
   isDisabled?: boolean;
   onClick?: () => void;
@@ -15,13 +16,14 @@ const MenuItem = ({
   children,
   onClick,
   isActive = false,
-  isDisabled = false
+  isDisabled = false,
+  className
 }: MenuItemProps): ReactElement => {
-  const { classes } = useStyles();
+  const { cx, classes } = useStyles();
 
   return (
     <MuiMenuItem
-      className={classes.menuItem}
+      className={cx(classes.menuItem, className)}
       data-is-active={isActive}
       data-is-disabled={isDisabled}
       disabled={isDisabled}