@centreon/ui 24.7.3 → 24.7.4

package/src/Typography/{Typography.stories.tsx → index.stories.tsx}

@@ -1,16 +1,16 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import TypographyStory from './story.utils';
+import TypographtStory from '.';
 
 export default {
   argTypes: {},
-  component: TypographyStory,
+  component: TypographtStory,
   title: 'Typography'
-} as ComponentMeta<typeof TypographyStory>;
+} as ComponentMeta<typeof TypographtStory>;
 
-const TemplateTypographtStory: ComponentStory<typeof TypographyStory> = (
+const TemplateTypographtStory: ComponentStory<typeof TypographtStory> = (
   args
-) => <TypographyStory {...args} />;
+) => <TypographtStory {...args} />;
 
 export const typography = (): JSX.Element => (
   <TemplateTypographtStory text="Hello world" />

package/src/WallpaperPage/index.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta } from '@storybook/react';
 
-import image from '../@assets/images/not-authorized-template-background-light.svg';
+import image from '../../assets/not-authorized-template-background-light.svg';
 
 import WallpaperPage from '.';
 

package/src/Wizard/ActionsBar.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '../../test/testRenderer';
+import { render, screen, fireEvent } from '../testRenderer';
 
 import ActionsBar from './ActionsBar';
 

package/src/Wizard/WizardContent.tsx

@@ -7,10 +7,11 @@ import { makeStyles } from 'tss-react/mui';
 import { WizardContentProps } from './models';
 import ActionsBar from './ActionsBar';
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()((theme) => ({
   content: {
     height: '100%',
-    overflow: 'auto'
+    overflow: 'auto',
+    padding: theme.spacing(2, 3, 1, 3)
   },
   form: {
     display: 'flex',

package/src/Wizard/index.stories.tsx

@@ -201,16 +201,29 @@ export const threeStepsWithCustomConfirmDialogLabels = (): JSX.Element => (
   />
 );
 
+const FirstStep = ({
+  disableNextOnSendingRequests
+}: StepComponentProps): JSX.Element => {
+  useEffect(() => {
+    disableNextOnSendingRequests([true, false, true]);
+    setTimeout(() => {
+      disableNextOnSendingRequests([false, false, false]);
+    }, 1500);
+  }, []);
+
+  return (
+    <Typography align="center" variant="h5">
+      Sending request...
+    </Typography>
+  );
+};
+
 export const twoStepsWithSendingRequest = (): JSX.Element => (
   <Wizard
     open
     steps={[
       {
-        Component: (): JSX.Element => (
-          <Typography align="center" variant="h5">
-            Sending request...
-          </Typography>
-        ),
+        Component: FirstStep,
         skipFormChangeCheck: true,
         stepName: 'First step'
       },

package/src/Wizard/index.test.tsx

@@ -8,7 +8,7 @@ import {
   waitFor,
   screen,
   RenderResult
-} from '../../test/testRenderer';
+} from '../testRenderer';
 
 import { StepComponentProps } from './models';
 

package/src/Wizard/index.tsx

@@ -29,7 +29,6 @@ const actionsBarLabelsDefaultValues = {
 };
 
 const Wizard = ({
-  classNameDialogContent,
   steps,
   onSubmit = undefined,
   initialValues = {},
@@ -38,11 +37,9 @@ const Wizard = ({
   open,
   onClose = undefined,
   confirmDialogLabels = undefined,
-  actionsBarLabels = actionsBarLabelsDefaultValues,
-  displayConfirmDialog,
-  ...rest
+  actionsBarLabels = actionsBarLabelsDefaultValues
 }: WizardProps): JSX.Element => {
-  const { classes, cx } = useStyles();
+  const { classes } = useStyles();
   const [currentStep, setCurrentStep] = useState(0);
   const [sendingRequest, setSendingRequest] = useState(false);
   const [openConfirm, setOpenConfirm] = useState(false);
@@ -81,18 +78,9 @@ const Wizard = ({
     bag.setSubmitting(false);
   };
 
-  const controlDisplayConfirmationDialog = (): void => {
-    if (!equals(displayConfirmDialog, false)) {
-      setOpenConfirm(displayConfirmDialog ?? true);
-
-      return;
-    }
-    onClose?.();
-  };
-
   const handleClose = (_, reason): void => {
     if (equals(reason, 'backdropClick')) {
-      controlDisplayConfirmationDialog();
+      setOpenConfirm(true);
 
       return;
     }
@@ -101,6 +89,7 @@ const Wizard = ({
 
   const handleCloseConfirm = (confirm): void => {
     setOpenConfirm(false);
+
     if (!confirm) {
       return;
     }
@@ -117,11 +106,9 @@ const Wizard = ({
         classes={{
           paper: fullHeight ? classes.fullHeight : undefined
         }}
-        data-testid="Dialog"
         maxWidth={width}
         open={open}
         onClose={handleClose}
-        {...rest}
       >
         <Stepper currentStep={currentStep} steps={steps} />
         <Formik
@@ -132,9 +119,7 @@ const Wizard = ({
           validationSchema={validationSchema}
           onSubmit={submit}
         >
-          <DialogContent
-            className={cx(classes.dialogContent, classNameDialogContent)}
-          >
+          <DialogContent className={classes.dialogContent}>
             <WizardContent
               actionsBarLabels={actionsBarLabels}
               currentStep={currentStep}

package/src/Wizard/models.ts

@@ -1,7 +1,5 @@
 import { FormikValues, FormikErrors, FormikHelpers } from 'formik';
 
-import { DialogProps } from '@mui/material';
-
 export interface StepComponentProps {
   disableNextOnSendingRequests: (sendingRequests: Array<boolean>) => void;
 }
@@ -40,14 +38,9 @@ interface ConfirmDialogLabels {
   labelTitle: string;
 }
 
-type ValueOf<T> = T[keyof T];
-
 export interface WizardProps {
-  [key: string]: ValueOf<DialogProps>;
   actionsBarLabels?: ActionsBarLabels;
-  classNameDialogContent?: string;
   confirmDialogLabels?: ConfirmDialogLabels;
-  displayConfirmDialog?: boolean;
   fullHeight?: boolean;
   initialValues?: FormikValues;
   onClose?: () => void;

package/src/api/QueryProvider.tsx

@@ -4,10 +4,10 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const defaultCacheTime = 5 * 1_000;
 
-export const client = new QueryClient({
+const client = new QueryClient({
   defaultOptions: {
     queries: {
-      gcTime: defaultCacheTime,
+      cacheTime: defaultCacheTime,
       refetchOnWindowFocus: false,
       staleTime: defaultCacheTime,
       suspense: true
@@ -17,13 +17,10 @@ export const client = new QueryClient({
 
 interface Props {
   children: ReactNode;
-  queryClient?: QueryClient;
 }
 
-const QueryProvider = ({ children, queryClient }: Props): JSX.Element => (
-  <QueryClientProvider client={queryClient || client}>
-    {children}
-  </QueryClientProvider>
+const QueryProvider = ({ children }: Props): JSX.Element => (
+  <QueryClientProvider client={client}>{children}</QueryClientProvider>
 );
 
 export default QueryProvider;

package/src/api/TestQueryProvider.tsx

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

package/src/api/buildListingEndpoint/getSearchQueryParameterValue.ts

@@ -5,10 +5,9 @@ import {
   prop,
   head,
   toPairs,
-  flatten,
-  pluck,
-  uniq,
-  equals
+  pipe,
+  map,
+  flatten
 } from 'ramda';
 
 import {
@@ -22,7 +21,7 @@ import {
   GetConditionsSearchQueryParameterValueState
 } from './models';
 
-export const getFoundFields = ({
+const getFoundFields = ({
   value,
   fields
 }: RegexSearchParameter): Array<SearchMatch> => {
@@ -84,42 +83,32 @@ const getConditionsSearchQueryParameterValue = (
     return undefined;
   }
 
-  const fields = uniq(pluck('field', conditions));
-
-  const toIndividualOperatorValues = (
-    listField: string
-  ): { $or: Array<Record<string, unknown>> } => {
-    const filteredItems = conditions.filter(({ field }) =>
-      equals(listField, field)
-    );
-
-    return {
-      $or: flatten(
-        filteredItems.map(({ value, values }) => {
-          if (!isNil(value)) {
-            return [
-              {
-                [listField]: value
-              }
-            ];
-          }
-
-          return toPairs(values || {}).map(([operator, operatorValue]) => ({
-            [listField]: {
-              [operator]: operatorValue
-            }
-          }));
-        })
-      )
-    };
+  const toIndividualOperatorValues = ({
+    field,
+    values,
+    value
+  }: ConditionsSearchParameter): Array<Record<string, unknown>> => {
+    if (!isNil(value)) {
+      return [
+        {
+          [field]: value
+        }
+      ];
+    }
+
+    return toPairs(values || {}).map(([operator, operatorValue]) => ({
+      [field]: {
+        [operator]: operatorValue
+      }
+    }));
   };
 
   return {
-    $and: fields.map(toIndividualOperatorValues)
+    $and: pipe(map(toIndividualOperatorValues), flatten)(conditions)
   };
 };
 
-export const getSearchQueryParameterValue = (
+const getSearchQueryParameterValue = (
   search: SearchParameter | undefined
 ): SearchQueryParameterValue => {
   if (search === undefined) {
@@ -145,3 +134,5 @@ export const getSearchQueryParameterValue = (
 
   return { $and: result };
 };
+
+export default getSearchQueryParameterValue;

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

@@ -115,7 +115,7 @@ describe(buildListingEndpoint, () => {
     });
 
     expect(decodeURIComponent(endpointWithValues)).toContain(
-      '&search={"$and":[{"$or":[{"date":{"$gt":"2020-12-01T07:00:00"}},{"date":{"$lt":"2020-12-01T11:00:00"}}]}]}'
+      '&search={"$and":[{"date":{"$gt":"2020-12-01T07:00:00"}},{"date":{"$lt":"2020-12-01T11:00:00"}}]}'
     );
 
     const endpointWithValue = buildListingEndpoint({
@@ -134,7 +134,7 @@ describe(buildListingEndpoint, () => {
     });
 
     expect(decodeURIComponent(endpointWithValue)).toContain(
-      '&search={"$and":[{"$or":[{"is_activated":true}]}]}'
+      '&search={"$and":[{"is_activated":true}]}'
     );
   });
 });

package/src/api/buildListingEndpoint/index.ts

@@ -1,7 +1,7 @@
 import toRawQueryParameters from '../../queryParameters';
 import { QueryParameter } from '../../queryParameters/models';
 
-import { getSearchQueryParameterValue } from './getSearchQueryParameterValue';
+import getSearchQueryParameterValue from './getSearchQueryParameterValue';
 import { Parameters, BuildListingEndpointParameters } from './models';
 
 const getQueryParameters = ({

package/src/api/buildListingEndpoint/models.ts

@@ -18,6 +18,7 @@ export interface Parameters {
   search?: SearchParameter;
   sort?: SortQueryParameterValue;
 }
+
 export interface SearchParameter {
   conditions?: Array<ConditionsSearchParameter>;
   lists?: Array<ListsSearchParameter>;
@@ -52,8 +53,7 @@ export type Operator =
   | '$lk'
   | '$nk'
   | '$in'
-  | '$ni'
-  | '$rg';
+  | '$ni';
 
 export type ConditionValue = {
   [value in Operator]?: string | Array<string>;

package/src/api/customFetch.ts

@@ -1,4 +1,4 @@
-import { equals, isNil, startsWith } from 'ramda';
+import { equals } from 'ramda';
 import { JsonDecoder } from 'ts.data.json';
 
 import { Method } from './useMutationQuery';
@@ -10,7 +10,6 @@ interface ApiErrorResponse {
 
 export interface ResponseError {
   additionalInformation?;
-  data?;
   isError: boolean;
   message: string;
   statusCode: number;
@@ -22,7 +21,6 @@ export interface CatchErrorProps {
 }
 
 interface CustomFetchProps<T> {
-  baseEndpoint?: string;
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
@@ -43,18 +41,10 @@ export const customFetch = <T>({
   defaultFailureMessage = 'Something went wrong',
   isMutation = false,
   payload,
-  method = 'GET',
-  baseEndpoint = './api/latest'
+  method = 'GET'
 }: CustomFetchProps<T>): Promise<T | ResponseError> => {
   const defaultOptions = { headers, method, signal };
 
-  const formattedEndpoint =
-    !isNil(baseEndpoint) &&
-    !startsWith(baseEndpoint, endpoint) &&
-    !startsWith('./api/internal.php', endpoint)
-      ? `${baseEndpoint}${endpoint}`
-      : endpoint;
-
   const options = isMutation
     ? {
         ...defaultOptions,
@@ -62,7 +52,7 @@ export const customFetch = <T>({
       }
     : defaultOptions;
 
-  return fetch(formattedEndpoint, options)
+  return fetch(endpoint, options)
     .then((response) => {
       if (equals(response.status, 204)) {
         return {
@@ -92,15 +82,6 @@ export const customFetch = <T>({
             };
           }
 
-          if (equals(response.status, 207)) {
-            return {
-              data: data.results,
-              isError: false,
-              message: '',
-              statusCode: response.status
-            };
-          }
-
           if (decoder) {
             return decoder.decodeToPromise(data).catch((error: string) => {
               catchError({

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

@@ -1,5 +1,6 @@
 import { renderHook, waitFor, RenderHookResult } from '@testing-library/react';
 import fetchMock from 'jest-fetch-mock';
+import anyLogger from 'anylogger';
 
 import TestQueryProvider from '../TestQueryProvider';
 
@@ -76,6 +77,8 @@ describe('useFetchQuery', () => {
       expect(mockedShowErrorMessage).toHaveBeenCalledWith('custom message');
     });
 
+    expect(anyLogger().error).toHaveBeenCalledWith('custom message');
+
     await waitFor(() => {
       expect(result.current.error).toStrictEqual({
         additionalInformation: {
@@ -99,6 +102,8 @@ describe('useFetchQuery', () => {
     await waitFor(() => {
       expect(mockedShowErrorMessage).toHaveBeenCalledWith('error');
     });
+
+    expect(anyLogger().error).toHaveBeenCalledWith('error');
   });
 
   it('shows a default failure message via the Snackbar as fallback', async () => {

package/src/api/useFetchQuery/index.ts

@@ -1,5 +1,6 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect } from 'react';
 
+import 'ulog';
 import {
   QueryKey,
   QueryObserverBaseResult,
@@ -8,46 +9,42 @@ import {
   UseQueryOptions
 } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
-import { equals, has, includes, isNil, not, omit } from 'ramda';
+import anylogger from 'anylogger';
+import { has, includes, not, omit } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
-import { useDeepCompare } from '../../utils';
-import { errorLog } from '../logger';
 
 export interface UseFetchQueryProps<T> {
-  baseEndpoint?: string;
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
-  doNotCancelCallsOnUnmount?: boolean;
   fetchHeaders?: HeadersInit;
   getEndpoint: (params?: PrefetchEndpointParams) => string;
   getQueryKey: () => QueryKey;
   httpCodesBypassErrorSnackbar?: Array<number>;
   isPaginated?: boolean;
-  queryOptions?: {
-    suspense?: boolean;
-  } & Omit<
+  queryOptions?: Omit<
     UseQueryOptions<T | ResponseError, Error, T | ResponseError, QueryKey>,
     'queryKey' | 'queryFn'
   >;
-  useLongCache?: boolean;
 }
 
-export type UseFetchQueryState<T> = {
+export interface UseFetchQueryState<T>
+  extends Omit<QueryObserverBaseResult, 'data'> {
   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'>;
+}
 
 export interface PrefetchEndpointParams {
   page: number;
 }
 
+const log = anylogger('API Request');
+
 const useFetchQuery = <T extends object>({
   getEndpoint,
   getQueryKey,
@@ -57,24 +54,14 @@ const useFetchQuery = <T extends object>({
   fetchHeaders,
   isPaginated,
   queryOptions,
-  httpCodesBypassErrorSnackbar = [],
-  baseEndpoint,
-  doNotCancelCallsOnUnmount = false,
-  useLongCache
+  httpCodesBypassErrorSnackbar = []
 }: UseFetchQueryProps<T>): UseFetchQueryState<T> => {
-  const dataRef = useRef<T | undefined>(undefined);
-
   const { showErrorMessage } = useSnackbar();
 
-  const isCypressTest = equals(window.Cypress?.testingType, 'component');
-
-  const cacheOptions =
-    !isCypressTest && useLongCache ? { gcTime: 60 * 1000 } : {};
-
-  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,
         decoder,
         defaultFailureMessage,
@@ -82,17 +69,17 @@ const useFetchQuery = <T extends object>({
         headers: new Headers(fetchHeaders),
         signal
       }),
-    queryKey: getQueryKey(),
-    ...cacheOptions,
-    ...queryOptions
-  });
+    {
+      ...queryOptions
+    }
+  );
 
   const queryClient = useQueryClient();
 
   const manageError = (): void => {
     const data = queryData.data as ResponseError | undefined;
     if (data?.isError) {
-      errorLog(data.message);
+      log.error(data.message);
       const hasACorrespondingHttpCode = includes(
         data?.statusCode || 0,
         httpCodesBypassErrorSnackbar
@@ -104,20 +91,27 @@ const useFetchQuery = <T extends object>({
     }
   };
 
+  useEffect(() => {
+    return (): void => {
+      queryClient.cancelQueries(getQueryKey());
+    };
+  }, []);
+
+  manageError();
+
   const prefetchQuery = ({ endpointParams, queryKey }): void => {
-    queryClient.prefetchQuery({
-      queryFn: ({ signal }): Promise<T | ResponseError> =>
+    queryClient.prefetchQuery(
+      queryKey,
+      ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
-          baseEndpoint,
           catchError,
           decoder,
           defaultFailureMessage,
           endpoint: getEndpoint(endpointParams),
           headers: new Headers(fetchHeaders),
           signal
-        }),
-      queryKey
-    });
+        })
+    );
   };
 
   const prefetchNextPage = ({ page, getPrefetchQueryKey }): void => {
@@ -147,53 +141,29 @@ 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,
           decoder,
           defaultFailureMessage,
           endpoint: getEndpoint(),
           headers: new Headers(fetchHeaders),
           signal
-        }),
-      queryKey: getQueryKey()
-    });
+        })
+    );
   };
 
-  const data = useMemo(
-    () =>
-      not(has('isError', queryData.data)) ? (queryData.data as T) : undefined,
-    [queryData.data]
-  );
-
-  if (!isNil(data)) {
-    dataRef.current = data;
-  }
+  const data = not(has('isError', queryData.data))
+    ? (queryData.data as T)
+    : undefined;
 
   const errorData = queryData.data as ResponseError | undefined;
 
-  useEffect(() => {
-    return (): void => {
-      if (doNotCancelCallsOnUnmount) {
-        return;
-      }
-
-      queryClient.cancelQueries({ queryKey: getQueryKey() });
-    };
-  }, []);
-
-  useEffect(
-    () => {
-      manageError();
-    },
-    useDeepCompare([queryData.data])
-  );
-
   return {
-    ...omit(['data', 'error'], queryData),
-    data: dataRef.current,
+    ...omit(['data'], queryData),
+    data,
     error: errorData?.isError ? omit(['isError'], errorData) : null,
     fetchQuery,
     prefetchNextPage,