@centreon/ui 24.11.14 → 24.11.21

package/src/api/buildListingEndpoint/getSearchQueryParameterValue.ts

@@ -1,27 +1,28 @@
 import {
+  equals,
+  flatten,
+  head,
   isEmpty,
   isNil,
-  reject,
+  pluck,
   prop,
-  head,
+  reject,
   toPairs,
-  pipe,
-  map,
-  flatten
+  uniq
 } from 'ramda';
 
 import {
-  SearchMatch,
+  ConditionsSearchParameter,
+  GetConditionsSearchQueryParameterValueState,
+  GetListsSearchQueryParameterValueProps,
   RegexSearchParameter,
   RegexSearchQueryParameterValue,
+  SearchMatch,
   SearchParameter,
-  SearchQueryParameterValue,
-  ConditionsSearchParameter,
-  GetListsSearchQueryParameterValueProps,
-  GetConditionsSearchQueryParameterValueState
+  SearchQueryParameterValue
 } from './models';
 
-const getFoundFields = ({
+export const getFoundFields = ({
   value,
   fields
 }: RegexSearchParameter): Array<SearchMatch> => {
@@ -83,32 +84,42 @@ const getConditionsSearchQueryParameterValue = (
     return undefined;
   }
 
-  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
-      }
-    }));
+  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
+            }
+          }));
+        })
+      )
+    };
   };
 
   return {
-    $and: pipe(map(toIndividualOperatorValues), flatten)(conditions)
+    $and: fields.map(toIndividualOperatorValues)
   };
 };
 
-const getSearchQueryParameterValue = (
+export const getSearchQueryParameterValue = (
   search: SearchParameter | undefined
 ): SearchQueryParameterValue => {
   if (search === undefined) {
@@ -134,5 +145,3 @@ 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":[{"date":{"$gt":"2020-12-01T07:00:00"}},{"date":{"$lt":"2020-12-01T11:00:00"}}]}'
+      '&search={"$and":[{"$or":[{"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":[{"is_activated":true}]}'
+      '&search={"$and":[{"$or":[{"is_activated":true}]}]}'
     );
   });
 });

package/src/api/buildListingEndpoint/index.ts

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

package/src/api/buildListingEndpoint/models.ts

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

package/src/api/customFetch.ts

@@ -1,4 +1,4 @@
-import { equals } from 'ramda';
+import { equals, isNil, startsWith } from 'ramda';
 import { JsonDecoder } from 'ts.data.json';
 
 import { Method } from './useMutationQuery';
@@ -10,6 +10,7 @@ interface ApiErrorResponse {
 
 export interface ResponseError {
   additionalInformation?;
+  data?;
   isError: boolean;
   message: string;
   statusCode: number;
@@ -21,6 +22,7 @@ export interface CatchErrorProps {
 }
 
 interface CustomFetchProps<T> {
+  baseEndpoint?: string;
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
@@ -41,18 +43,29 @@ export const customFetch = <T>({
   defaultFailureMessage = 'Something went wrong',
   isMutation = false,
   payload,
-  method = 'GET'
+  method = 'GET',
+  baseEndpoint = './api/latest'
 }: 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 isFormData = payload instanceof FormData;
+
   const options = isMutation
     ? {
         ...defaultOptions,
-        body: payload instanceof FormData ? payload : JSON.stringify(payload)
+        body: isFormData ? payload : JSON.stringify(payload),
+        headers: isFormData ? undefined : headers
       }
     : defaultOptions;
 
-  return fetch(endpoint, options)
+  return fetch(formattedEndpoint, options)
     .then((response) => {
       if (equals(response.status, 204)) {
         return {
@@ -82,6 +95,15 @@ 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/logger.ts

@@ -0,0 +1,11 @@
+export const errorLog = (text: string): void => {
+  const { error: log } = console;
+
+  log(`API Request: ${text}`);
+};
+
+export const warnLog = (text: string): void => {
+  const { warn: log } = console;
+
+  log(`API Request: ${text}`);
+};

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

@@ -1,6 +1,5 @@
-import { renderHook, waitFor, RenderHookResult } from '@testing-library/react';
+import { RenderHookResult, renderHook, waitFor } from '@testing-library/react';
 import fetchMock from 'jest-fetch-mock';
-import anyLogger from 'anylogger';
 
 import TestQueryProvider from '../TestQueryProvider';
 
@@ -77,8 +76,6 @@ describe('useFetchQuery', () => {
       expect(mockedShowErrorMessage).toHaveBeenCalledWith('custom message');
     });
 
-    expect(anyLogger().error).toHaveBeenCalledWith('custom message');
-
     await waitFor(() => {
       expect(result.current.error).toStrictEqual({
         additionalInformation: {
@@ -102,8 +99,6 @@ 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,50 +1,53 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
-import 'ulog';
 import {
   QueryKey,
   QueryObserverBaseResult,
+  UseQueryOptions,
   useQuery,
-  useQueryClient,
-  UseQueryOptions
+  useQueryClient
 } from '@tanstack/react-query';
+import { equals, has, includes, isNil, not, omit } from 'ramda';
 import { JsonDecoder } from 'ts.data.json';
-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 { CatchErrorProps, ResponseError, customFetch } from '../customFetch';
+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?: Omit<
+  queryOptions?: {
+    suspense?: boolean;
+  } & Omit<
     UseQueryOptions<T | ResponseError, Error, T | ResponseError, QueryKey>,
     'queryKey' | 'queryFn'
   >;
+  useLongCache?: boolean;
 }
 
-export interface UseFetchQueryState<T>
-  extends Omit<QueryObserverBaseResult, 'data'> {
+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'>;
 
 export interface PrefetchEndpointParams {
   page: number;
 }
 
-const log = anylogger('API Request');
-
 const useFetchQuery = <T extends object>({
   getEndpoint,
   getQueryKey,
@@ -54,14 +57,24 @@ const useFetchQuery = <T extends object>({
   fetchHeaders,
   isPaginated,
   queryOptions,
-  httpCodesBypassErrorSnackbar = []
+  httpCodesBypassErrorSnackbar = [],
+  baseEndpoint,
+  doNotCancelCallsOnUnmount = false,
+  useLongCache
 }: UseFetchQueryProps<T>): UseFetchQueryState<T> => {
+  const dataRef = useRef<T | undefined>(undefined);
+
   const { showErrorMessage } = useSnackbar();
 
-  const queryData = useQuery<T | ResponseError, Error>(
-    getQueryKey(),
-    ({ signal }): Promise<T | ResponseError> =>
+  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> =>
       customFetch<T>({
+        baseEndpoint,
         catchError,
         decoder,
         defaultFailureMessage,
@@ -69,17 +82,17 @@ const useFetchQuery = <T extends object>({
         headers: new Headers(fetchHeaders),
         signal
       }),
-    {
-      ...queryOptions
-    }
-  );
+    queryKey: getQueryKey(),
+    ...cacheOptions,
+    ...queryOptions
+  });
 
   const queryClient = useQueryClient();
 
   const manageError = (): void => {
     const data = queryData.data as ResponseError | undefined;
     if (data?.isError) {
-      log.error(data.message);
+      errorLog(data.message);
       const hasACorrespondingHttpCode = includes(
         data?.statusCode || 0,
         httpCodesBypassErrorSnackbar
@@ -91,37 +104,30 @@ const useFetchQuery = <T extends object>({
     }
   };
 
-  useEffect(() => {
-    return (): void => {
-      queryClient.cancelQueries(getQueryKey());
-    };
-  }, []);
-
-  manageError();
-
   const prefetchQuery = ({ endpointParams, queryKey }): void => {
-    queryClient.prefetchQuery(
-      queryKey,
-      ({ signal }): Promise<T | ResponseError> =>
+    queryClient.prefetchQuery({
+      queryFn: ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
+          baseEndpoint,
           catchError,
           decoder,
           defaultFailureMessage,
           endpoint: getEndpoint(endpointParams),
           headers: new Headers(fetchHeaders),
           signal
-        })
-    );
+        }),
+      queryKey
+    });
   };
 
   const prefetchNextPage = ({ page, getPrefetchQueryKey }): void => {
     if (!isPaginated) {
-      return undefined;
+      return;
     }
 
     const nextPage = page + 1;
 
-    return prefetchQuery({
+    prefetchQuery({
       endpointParams: { page: nextPage },
       queryKey: getPrefetchQueryKey(nextPage)
     });
@@ -129,41 +135,65 @@ const useFetchQuery = <T extends object>({
 
   const prefetchPreviousPage = ({ page, getPrefetchQueryKey }): void => {
     if (!isPaginated) {
-      return undefined;
+      return;
     }
 
     const previousPage = page - 1;
 
-    return prefetchQuery({
+    prefetchQuery({
       endpointParams: { page: previousPage },
       queryKey: getPrefetchQueryKey(previousPage)
     });
   };
 
   const fetchQuery = (): Promise<T | ResponseError> => {
-    return queryClient.fetchQuery(
-      getQueryKey(),
-      ({ signal }): Promise<T | ResponseError> =>
+    return queryClient.fetchQuery({
+      queryFn: ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
+          baseEndpoint,
           catchError,
           decoder,
           defaultFailureMessage,
           endpoint: getEndpoint(),
           headers: new Headers(fetchHeaders),
           signal
-        })
-    );
+        }),
+      queryKey: getQueryKey()
+    });
   };
 
-  const data = not(has('isError', queryData.data))
-    ? (queryData.data as T)
-    : undefined;
+  const data = useMemo(
+    () =>
+      not(has('isError', queryData.data)) ? (queryData.data as T) : undefined,
+    [queryData.data]
+  );
+
+  if (!isNil(data)) {
+    dataRef.current = data;
+  }
 
   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'], queryData),
-    data,
+    ...omit(['data', 'error'], queryData),
+    data: dataRef.current,
     error: errorData?.isError ? omit(['isError'], errorData) : null,
     fetchQuery,
     prefetchNextPage,