@centreon/ui 24.4.22 → 24.4.23

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/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/useFetchQuery/index.ts

@@ -26,9 +26,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'
   >;
@@ -36,12 +34,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;
@@ -65,8 +62,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,
@@ -76,9 +74,10 @@ const useFetchQuery = <T extends object>({
         headers: new Headers(fetchHeaders),
         signal
       }),
-    queryKey: getQueryKey(),
-    ...queryOptions
-  });
+    {
+      ...queryOptions
+    }
+  );
 
   const queryClient = useQueryClient();
 
@@ -98,8 +97,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,
@@ -108,9 +108,8 @@ const useFetchQuery = <T extends object>({
           endpoint: getEndpoint(endpointParams),
           headers: new Headers(fetchHeaders),
           signal
-        }),
-      queryKey
-    });
+        })
+    );
   };
 
   const prefetchNextPage = ({ page, getPrefetchQueryKey }): void => {
@@ -140,8 +139,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,
@@ -150,9 +150,8 @@ const useFetchQuery = <T extends object>({
           endpoint: getEndpoint(),
           headers: new Headers(fetchHeaders),
           signal
-        }),
-      queryKey: getQueryKey()
-    });
+        })
+    );
   };
 
   const data = useMemo(
@@ -169,16 +168,13 @@ const useFetchQuery = <T extends object>({
 
   useEffect(() => {
     return (): void => {
-      queryClient.cancelQueries({ queryKey: getQueryKey() });
+      queryClient.cancelQueries(getQueryKey());
     };
   }, []);
 
-  useEffect(
-    () => {
-      manageError();
-    },
-    useDeepCompare([queryData.data])
-  );
+  useEffect(() => {
+    manageError();
+  }, useDeepCompare([queryData.data]));
 
   return {
     ...omit(['data', 'error'], queryData),

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, omit } from 'ramda';
+import { includes } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
@@ -31,33 +31,14 @@ export type UseMutationQueryProps<T, TMeta> = {
   getEndpoint: (_meta: TMeta) => string;
   httpCodesBypassErrorSnackbar?: Array<number>;
   method: Method;
-  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'
->;
+} & Omit<UseMutationOptions<T & { _meta?: TMeta }>, 'mutationFn'>;
 
 const log = anylogger('API Request');
 
-export type UseMutationQueryState<T> = Omit<
-  UseMutationResult<T | ResponseError>,
-  'isError'
-> & {
+export type UseMutationQueryState<T> = {
   isError: boolean;
   isMutating: boolean;
-};
+} & UseMutationResult<T | ResponseError>;
 
 const useMutationQuery = <T extends object, TMeta>({
   getEndpoint,
@@ -70,7 +51,6 @@ const useMutationQuery = <T extends object, TMeta>({
   onMutate,
   onError,
   onSuccess,
-  onSettled,
   baseEndpoint
 }: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T> => {
   const { showErrorMessage } = useSnackbar();
@@ -79,10 +59,8 @@ const useMutationQuery = <T extends object, TMeta>({
     T | ResponseError,
     ResponseError,
     T & { _meta: TMeta }
-  >({
-    mutationFn: (
-      _payload: T & { _meta: TMeta }
-    ): Promise<T | ResponseError> => {
+  >(
+    (_payload: T & { _meta: TMeta }): Promise<T | ResponseError> => {
       const { _meta, ...payload } = _payload || {};
 
       return customFetch<T>({
@@ -100,18 +78,19 @@ const useMutationQuery = <T extends object, TMeta>({
         payload
       });
     },
-    onError,
-    onMutate,
-    onSettled,
-    onSuccess: (data, variables, context) => {
-      if (data?.isError) {
-        onError?.(data, variables, context);
+    {
+      onError,
+      onMutate,
+      onSuccess: (data, variables, context) => {
+        if (data?.isError) {
+          onError?.(data, variables, context);
 
-        return;
+          return;
+        }
+        onSuccess?.(data, variables, context);
       }
-      onSuccess?.(data, variables, context);
     }
-  });
+  );
 
   const manageError = (): void => {
     const data = queryData.data as ResponseError | undefined;
@@ -128,17 +107,14 @@ const useMutationQuery = <T extends object, TMeta>({
     }
   };
 
-  useEffect(
-    () => {
-      manageError();
-    },
-    useDeepCompare([queryData.data])
-  );
+  useEffect(() => {
+    manageError();
+  }, useDeepCompare([queryData.data]));
 
   return {
-    ...omit(['isError'], queryData),
+    ...queryData,
     isError: (queryData.data as ResponseError | undefined)?.isError || false,
-    isMutating: queryData.isPending
+    isMutating: queryData.isLoading
   };
 };
 

package/src/components/Button/Icon/IconButton.tsx

@@ -1,9 +1,6 @@
 import React, { ReactElement, ReactNode } from 'react';
 
-import {
-  IconButton as MuiIconButton,
-  IconButtonProps as MuiIconButtonProps
-} from '@mui/material';
+import { IconButton as MuiIconButton } from '@mui/material';
 
 import { AriaLabelingAttributes } from '../../../@types/aria-attributes';
 import { DataTestAttributes } from '../../../@types/data-attributes';
@@ -26,8 +23,7 @@ type IconButtonProps = {
   size?: 'small' | 'medium' | 'large';
   variant?: 'primary' | 'secondary' | 'ghost';
 } & AriaLabelingAttributes &
-  DataTestAttributes &
-  MuiIconButtonProps;
+  DataTestAttributes;
 
 /**
  * @todo re-factor as `iconVariant: 'icon-only'` Button variant, and remove IconButton component (reason: code duplication)

package/src/components/DataTable/DataTable.stories.tsx

@@ -1,9 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Box } from '@mui/material';
-
-import { ColumnType } from '../../Listing/models';
-
 import { DataTable } from './index';
 
 const meta: Meta<typeof DataTable> = {
@@ -53,39 +49,3 @@ export const withFixedHeightContainer: Story = {
     </div>
   )
 };
-
-const ListingTemplate = (args): JSX.Element => (
-  <Box sx={{ height: '80vh' }}>
-    <DataTable {...args} />
-  </Box>
-);
-
-export const listing: Story = {
-  args: {
-    children: (
-      <DataTable.Listing
-        columns={[
-          {
-            getFormattedString: (row) => row.title,
-            id: 'title',
-            label: 'Title',
-            type: ColumnType.string
-          },
-          {
-            getFormattedString: (row) => row.description,
-            id: 'description',
-            label: 'Description',
-            type: ColumnType.string
-          }
-        ]}
-        rows={[...Array(5)].map((_, i) => ({
-          description: `Item description ${i}`,
-          id: i,
-          title: `Item ${i}`
-        }))}
-      />
-    ),
-    variant: 'listing'
-  },
-  render: ListingTemplate
-};

package/src/components/DataTable/DataTable.styles.ts

@@ -10,9 +10,6 @@ const useStyles = makeStyles()((theme) => ({
       gridGap: theme.spacing(2.5),
       gridTemplateColumns: `repeat(auto-fill, ${theme.spacing(45)})`
     },
-    '&[data-variant="listing"]': {
-      height: '100%'
-    },
     '&[data-variant][data-is-empty="true"]': {
       display: 'flex',
       justifyContent: 'center',

package/src/components/DataTable/DataTable.tsx

@@ -1,11 +1,11 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './DataTable.styles';
 
 type DataTableProps = {
-  children?: ReactNode | Array<ReactNode>;
+  children: ReactNode | Array<ReactNode>;
   isEmpty?: boolean;
-  variant: 'grid' | 'listing';
+  variant?: 'grid';
 };
 
 /** *

package/src/components/DataTable/Item/DataTableItem.styles.ts

@@ -1,18 +1,13 @@
 import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles()((theme) => ({
-  actions: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between'
-  },
   dataTableItem: {
     '& .MuiCardActionArea-root': {
       alignItems: 'flex-start',
       display: 'flex',
       flexDirection: 'column',
       height: '100%',
-      justifyContent: 'flex-start'
+      justifyContent: 'space-between'
     },
     '& .MuiCardActions-root': {
       '& > span': {
@@ -20,13 +15,13 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(1)
       },
       display: 'flex',
+
       justifyContent: 'space-between'
     },
     borderRadius: theme.shape.borderRadius,
     display: 'flex',
     flexDirection: 'column',
     height: '186px',
-    justifyContent: 'space-between',
     p: {
       color: theme.palette.text.secondary,
       letterSpacing: '0',

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 && labelsDelete && (
+              {onDelete && (
                 <ConfirmationTooltip
                   confirmVariant="error"
                   labels={labelsDelete}

package/src/components/DataTable/index.ts

@@ -2,11 +2,9 @@ import { DataTable as DataTableRoot } from './DataTable';
 import { DataTableItem } from './Item/DataTableItem';
 import { DataTableItemSkeleton } from './Item/DataTableItemSkeleton';
 import { DataTableEmptyState } from './EmptyState/DataTableEmptyState';
-import { DataListing } from './DataListing';
 
 export const DataTable = Object.assign(DataTableRoot, {
   EmptyState: DataTableEmptyState,
   Item: DataTableItem,
-  ItemSkeleton: DataTableItemSkeleton,
-  Listing: DataListing
+  ItemSkeleton: DataTableItemSkeleton
 });

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

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

package/src/components/Layout/PageLayout/PageLayout.tsx

@@ -14,7 +14,7 @@ export const PageLayout = ({
   const { classes } = useStyles();
 
   return (
-    <section className={classes.pageLayout} data-variant={variant} id="page">
+    <section className={classes.pageLayout} data-variant={variant}>
       {children}
     </section>
   );

package/src/components/Layout/PageLayout/PageLayoutActions.tsx

@@ -17,7 +17,6 @@ export const PageLayoutActions = ({
     <section
       className={classes.pageLayoutActions}
       data-row-reverse={rowReverse}
-      id="actions"
     >
       {children}
     </section>

package/src/components/Layout/PageLayout/PageLayoutBody.tsx

@@ -17,7 +17,6 @@ export const PageLayoutBody = ({
     <section
       className={classes.pageLayoutBody}
       data-has-background={hasBackground}
-      id="page-body"
     >
       {children}
     </section>