@centreon/ui 24.4.57 → 24.4.59

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

@@ -2,15 +2,12 @@ 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 {
@@ -23,9 +20,6 @@ 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'
@@ -110,6 +104,7 @@ const PickersStartEndDate = ({
   direction = PickersStartEndDateDirection.column
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
+  const { Adapter } = useDateTimePickerAdapter();
 
   const { locale } = useAtomValue(userAtom);
   const error = useAtomValue(errorTimePeriodAtom);
@@ -131,7 +126,7 @@ const PickersStartEndDate = ({
   return (
     <LocalizationProvider
       adapterLocale={locale.substring(0, 2)}
-      dateAdapter={AdapterDayjs}
+      dateAdapter={Adapter}
     >
       <div className={styleContainer}>
         <PickerDateWithLabel

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

@@ -18,6 +18,8 @@ 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,85 +1,48 @@
-import { useCallback } from 'react';
+import dayjs from 'dayjs';
 
-import dayjs, { Dayjs } from 'dayjs';
-import { useAtomValue } from 'jotai';
-import { equals } from 'ramda';
+import { DateTimePicker } from '@mui/x-date-pickers';
 
-import {
-  DateTimePicker,
-  DateTimePickerProps,
-  LocalizationProvider
-} from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-
-import { userAtom } from '@centreon/ui-context';
+import { useDateTimePickerAdapter } from '@centreon/ui';
 
 import { CustomTimePeriodProperty } from './models';
 
-interface ChangeDateProps {
-  date: Date;
-  property: CustomTimePeriodProperty | string;
-}
-
 interface Props {
-  changeDate: (props: ChangeDateProps) => void;
+  changeDate: (props) => void;
   date: Date | null;
   desktopMediaQuery?: string;
   disabled?: boolean;
   maxDate?: Date;
   minDate?: Date;
-  minDateTime?: Date;
-  property: CustomTimePeriodProperty | string;
+  property: CustomTimePeriodProperty;
 }
 
 const DateTimePickerInput = ({
   date,
   maxDate,
   minDate,
-  minDateTime,
   property,
   changeDate,
   disabled = false,
-  desktopMediaQuery,
-  ...rest
-}: Props & DateTimePickerProps<dayjs.Dayjs>): JSX.Element => {
-  const desktopPickerMediaQuery =
-    '@media (min-width: 1024px) or (pointer: fine)';
-
-  const { timezone, locale } = useAtomValue(userAtom);
-
-  const isUTC = equals(timezone, 'UTC');
+  desktopMediaQuery
+}: Props): JSX.Element => {
+  const { desktopPickerMediaQuery } = useDateTimePickerAdapter();
 
   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 (
-    <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)}
-        minDateTime={minDateTime && formatDate(minDateTime)}
-        value={formatDate(date)}
-        onChange={changeTime}
-        {...rest}
-      />
-    </LocalizationProvider>
+    <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}
+    />
   );
 };
 

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

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import 'dayjs/locale/en';
+import 'dayjs/locale/fr';
 import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
@@ -19,18 +19,18 @@ dayjs.extend(localizedFormatPlugin);
 
 const data = [
   {
-    locale: 'en_US',
-    resolution: { height: 590, width: 500 },
+    locale: 'fr_FR',
+    resolution: { height: 720, width: 500 },
     timezone: 'Europe/Paris'
   },
   {
-    locale: 'en_US',
-    resolution: { height: 590, width: 200 },
+    locale: 'fr_FR',
+    resolution: { height: 720, width: 200 },
     timezone: 'Europe/Paris'
   },
   {
-    locale: 'en_US',
-    resolution: { height: 590, width: 1024 },
+    locale: 'fr_FR',
+    resolution: { height: 720, width: 1024 },
     timezone: 'Europe/Paris'
   }
 ];
@@ -45,7 +45,7 @@ data.forEach((item) =>
 
       store.set(userAtom, {
         ...retrievedUser,
-        locale: 'en_US',
+        locale: 'fr_FR',
         timezone: 'Europe/Paris'
       });
 
@@ -59,10 +59,7 @@ data.forEach((item) =>
     });
 
     it(`displays correctly the dates design when screen resolution is ${width}px`, () => {
-      cy.makeSnapshotWithCustomResolution({
-        resolution: { height, width },
-        title: `${width}px`
-      });
+      cy.makeSnapshot(`${width}px`);
     });
   })
 );

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

@@ -3,10 +3,15 @@ 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 } from 'ramda';
+import { equals, inc } from 'ramda';
 import { renderHook } from '@testing-library/react';
 
-import { useLocaleDateTimeFormat } from '@centreon/ui';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+
+import {
+  useLocaleDateTimeFormat,
+  useDateTimePickerAdapter
+} from '@centreon/ui';
 import { ListingVariant, userAtom } from '@centreon/ui-context';
 
 import { CustomTimePeriodProperty } from './models';
@@ -292,6 +297,10 @@ testData.forEach((item) =>
     beforeEach(() => {
       cy.viewport('macbook-13');
 
+      const { result } = renderHook(() => useDateTimePickerAdapter());
+
+      const { Adapter } = result.current;
+
       const store = createStore();
       store.set(userAtom, {
         ...retrievedUser,
@@ -302,16 +311,31 @@ testData.forEach((item) =>
       cy.mount({
         Component: (
           <Provider store={store}>
-            <DateTimePickerInput
-              changeDate={cy.stub()}
-              date={new Date(item.initialDate)}
-              property={CustomTimePeriodProperty.start}
-            />
+            <LocalizationProvider adapterLocale="en" dateAdapter={Adapter}>
+              <DateTimePickerInput
+                changeDate={cy.stub()}
+                date={new Date(item.initialDate)}
+                desktopMediaQuery="@media (min-width: 1024px)"
+                property={CustomTimePeriodProperty.start}
+              />
+            </LocalizationProvider>
           </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) => {
@@ -365,7 +389,7 @@ testData.forEach((item) =>
 
         cy.get('[role="rowgroup"]').children().as('listWeeks');
 
-        cy.get('@listWeeks').should('have.length', numberWeeks);
+        cy.get('@listWeeks').should('have.length', inc(numberWeeks));
         cy.get('@listWeeks').eq(0).as('firstWeek');
         cy.get('@firstWeek').children().as('listDaysInFirstWeek');
 
@@ -392,7 +416,7 @@ testData.forEach((item) =>
 
         cy.get('[role="rowgroup"]').children().as('listWeeks');
 
-        cy.get('@listWeeks').should('have.length', numberWeeks);
+        cy.get('@listWeeks').should('have.length', inc(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.stories.tsx

@@ -88,27 +88,20 @@ const args = {
   ]
 };
 
-const parameters = {
-  chromatic: { diffThreshold: 0.1 }
-};
-
 export const BasicTimePeriod: Story = {
   ...Template,
-  argTypes,
-  parameters
+  argTypes
 };
 
 export const WithExtraTimePeriods: Story = {
   ...Template,
   argTypes,
-  args,
-  parameters
+  args
 };
 
 export const WithExternalComponent: Story = {
   ...TemplateWithExternalComponent,
-  argTypes,
-  parameters
+  argTypes
 };
 
 export const SimpleTimePeriod: StorySimpleTimePeriod = {
@@ -116,6 +109,5 @@ export const SimpleTimePeriod: StorySimpleTimePeriod = {
   args: {
     endDate: dayjs(Date.now()).toDate(),
     startDate: dayjs(Date.now()).subtract(29, 'day').toDate()
-  },
-  parameters
+  }
 };

package/src/TimePeriods/index.tsx

@@ -20,7 +20,7 @@ import { useStyles } from './TimePeriods.styles';
 import {
   CustomTimePeriod as CustomTimePeriodModel,
   EndStartInterval,
-  TimePeriod as TimePeriodModel
+  TimePeriod
 } 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<TimePeriodModel, 'timelineEventsLimit'>>;
+  extraTimePeriods?: Array<Omit<TimePeriod, 'timelineEventsLimit'>>;
   getIsError?: (value: boolean) => void;
   getParameters?: ({ start, end, timelineEventsLimit }: Parameters) => void;
   renderExternalComponent?: ReactNode;

package/src/Typography/FluidTypography/index.stories.tsx

@@ -40,9 +40,9 @@ basic.args = {
 
 export const with200pxWidth = FluidTypographyTemplate.bind({});
 with200pxWidth.args = {
-  height: '50%',
+  height: '200px',
   text: 'Hello world',
-  width: '50%'
+  width: '200px'
 };
 
 export const with20pxHeight = FluidTypographyTemplate.bind({});

package/src/Typography/FluidTypography/index.tsx

@@ -1,42 +1,49 @@
+import { useRef } from 'react';
+
 import { Typography, TypographyProps } from '@mui/material';
 
+import useFluidResizeObserver from './useFluidResizeObserver';
+
 type CustomTypographyProps = Pick<TypographyProps, 'variant'>;
 export interface FluidTypographyProps extends CustomTypographyProps {
   className?: string;
-  containerClassName?: string;
-  max?: string;
-  min?: string;
-  pref?: number;
   text: string;
 }
 
 const FluidTypography = ({
   text,
   variant = 'body1',
-  className,
-  containerClassName,
-  min = '10px',
-  max = '1000px',
-  pref = 19
+  className
 }: FluidTypographyProps): JSX.Element => {
+  const containerRef = useRef<HTMLElement>();
+  const parentRef = useRef<HTMLElement>();
+
+  const size = useFluidResizeObserver({ ref: containerRef });
+  const parentSize = useFluidResizeObserver({ isParent: true, ref: parentRef });
+
   return (
     <div
-      className={containerClassName}
+      ref={parentRef}
       style={{
-        containerType: 'inline-size',
-        height: `100%`,
+        height: `${parentSize.height}px`,
         width: `100%`
       }}
     >
-      <Typography
-        className={className}
-        sx={{
-          fontSize: `clamp(${min}, ${pref}cqi, ${max})`
-        }}
-        variant={variant}
-      >
-        {text}
-      </Typography>
+      <div ref={containerRef} style={{ height: '100%', width: '100%' }}>
+        <Typography
+          className={className}
+          sx={{
+            fontSize: `clamp(10px, min(${Math.floor(
+              size.width / 6
+            )}px, ${Math.floor(size.height / 6)}px), min(${size.width}px, ${
+              size.height
+            }px))`
+          }}
+          variant={variant}
+        >
+          {text}
+        </Typography>
+      </div>
     </div>
   );
 };

package/src/Typography/FluidTypography/useFluidResizeObserver.ts

@@ -0,0 +1,56 @@
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+
+interface Size {
+  height: number;
+  width: number;
+}
+
+interface UseFluidResizeObserver {
+  isParent?: boolean;
+  ref: MutableRefObject<HTMLElement | undefined>;
+}
+
+const useFluidResizeObserver = ({
+  ref,
+  isParent
+}: UseFluidResizeObserver): Size => {
+  const [size, setSize] = useState<Size>({ height: 0, width: 0 });
+
+  const observer = useRef<ResizeObserver | null>(null);
+
+  const resizeObserver = useCallback(
+    (element) => {
+      if (observer.current) {
+        observer.current.disconnect();
+      }
+
+      observer.current = new ResizeObserver(
+        ([entry]: Array<ResizeObserverEntry>) => {
+          setSize({
+            height: entry.target?.getBoundingClientRect().height || 0,
+            width: entry.target?.getBoundingClientRect().width || 0
+          });
+        }
+      );
+
+      if (element && observer.current) {
+        observer.current.observe(element);
+      }
+    },
+    [ref.current]
+  );
+
+  useEffect(() => {
+    resizeObserver(isParent ? ref.current?.parentElement : ref.current);
+  }, [ref.current]);
+
+  return size;
+};
+
+export default useFluidResizeObserver;

package/src/api/QueryProvider.tsx

@@ -7,7 +7,7 @@ const defaultCacheTime = 5 * 1_000;
 const client = new QueryClient({
   defaultOptions: {
     queries: {
-      gcTime: defaultCacheTime,
+      cacheTime: 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: {
-      gcTime: 0,
+      cacheTime: 0,
       retry: false
     }
   }

package/src/api/index.ts

@@ -30,7 +30,7 @@ const patchData =
   <TData, TResult>(cancelToken: CancelToken) =>
   ({ endpoint, data }: RequestWithData<TData>): Promise<TResult> =>
     axios
-      .patch(endpoint, JSON.stringify(data), {
+      .patch(endpoint, data, {
         cancelToken,
         headers: contentTypeHeaders
       })
@@ -40,7 +40,7 @@ const postData =
   <TData, TResult>(cancelToken: CancelToken) =>
   ({ endpoint, data }: RequestWithData<TData>): Promise<TResult> =>
     axios
-      .post(endpoint, JSON.stringify(data), {
+      .post(endpoint, data, {
         cancelToken,
         headers: contentTypeHeaders
       })
@@ -50,7 +50,7 @@ const putData =
   <TData, TResult>(cancelToken: CancelToken) =>
   ({ endpoint, data }: RequestWithData<TData>): Promise<TResult> =>
     axios
-      .put(endpoint, JSON.stringify(data), {
+      .put(endpoint, data, {
         cancelToken,
         headers: contentTypeHeaders
       })

package/src/api/useFetchQuery/index.ts

@@ -27,9 +27,7 @@ export interface UseFetchQueryProps<T> {
   getQueryKey: () => QueryKey;
   httpCodesBypassErrorSnackbar?: Array<number>;
   isPaginated?: boolean;
-  queryOptions?: {
-    suspense?: boolean;
-  } & Omit<
+  queryOptions?: Omit<
     UseQueryOptions<T | ResponseError, Error, T | ResponseError, QueryKey>,
     'queryKey' | 'queryFn'
   >;
@@ -37,12 +35,11 @@ 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' | 'error'>;
+} & Omit<QueryObserverBaseResult, 'data'>;
 
 export interface PrefetchEndpointParams {
   page: number;
@@ -67,8 +64,9 @@ const useFetchQuery = <T extends object>({
 
   const { showErrorMessage } = useSnackbar();
 
-  const queryData = useQuery<T | ResponseError, Error>({
-    queryFn: ({ signal }): Promise<T | ResponseError> =>
+  const queryData = useQuery<T | ResponseError, Error>(
+    getQueryKey(),
+    ({ signal }): Promise<T | ResponseError> =>
       customFetch<T>({
         baseEndpoint,
         catchError,
@@ -78,9 +76,10 @@ const useFetchQuery = <T extends object>({
         headers: new Headers(fetchHeaders),
         signal
       }),
-    queryKey: getQueryKey(),
-    ...queryOptions
-  });
+    {
+      ...queryOptions
+    }
+  );
 
   const queryClient = useQueryClient();
 
@@ -100,8 +99,9 @@ const useFetchQuery = <T extends object>({
   };
 
   const prefetchQuery = ({ endpointParams, queryKey }): void => {
-    queryClient.prefetchQuery({
-      queryFn: ({ signal }): Promise<T | ResponseError> =>
+    queryClient.prefetchQuery(
+      queryKey,
+      ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
           baseEndpoint,
           catchError,
@@ -110,9 +110,8 @@ const useFetchQuery = <T extends object>({
           endpoint: getEndpoint(endpointParams),
           headers: new Headers(fetchHeaders),
           signal
-        }),
-      queryKey
-    });
+        })
+    );
   };
 
   const prefetchNextPage = ({ page, getPrefetchQueryKey }): void => {
@@ -142,8 +141,9 @@ const useFetchQuery = <T extends object>({
   };
 
   const fetchQuery = (): Promise<T | ResponseError> => {
-    return queryClient.fetchQuery({
-      queryFn: ({ signal }): Promise<T | ResponseError> =>
+    return queryClient.fetchQuery(
+      getQueryKey(),
+      ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
           baseEndpoint,
           catchError,
@@ -152,9 +152,8 @@ const useFetchQuery = <T extends object>({
           endpoint: getEndpoint(),
           headers: new Headers(fetchHeaders),
           signal
-        }),
-      queryKey: getQueryKey()
-    });
+        })
+    );
   };
 
   const data = useMemo(
@@ -175,16 +174,13 @@ const useFetchQuery = <T extends object>({
         return;
       }
 
-      queryClient.cancelQueries({ queryKey: getQueryKey() });
+      queryClient.cancelQueries(getQueryKey());
     };
   }, []);
 
-  useEffect(
-    () => {
-      manageError();
-    },
-    useDeepCompare([queryData.data])
-  );
+  useEffect(() => {
+    manageError();
+  }, useDeepCompare([queryData.data]));
 
   return {
     ...omit(['data', 'error'], queryData),