@centreon/ui 24.11.13 → 24.11.14

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

@@ -1,5 +1,6 @@
-import { RenderHookResult, renderHook, waitFor } from '@testing-library/react';
+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,53 +1,50 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect } from 'react';
 
+import 'ulog';
 import {
   QueryKey,
   QueryObserverBaseResult,
-  UseQueryOptions,
   useQuery,
-  useQueryClient
+  useQueryClient,
+  UseQueryOptions
 } 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?: {
-    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,30 +91,37 @@ 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 => {
     if (!isPaginated) {
-      return;
+      return undefined;
     }
 
     const nextPage = page + 1;
 
-    prefetchQuery({
+    return prefetchQuery({
       endpointParams: { page: nextPage },
       queryKey: getPrefetchQueryKey(nextPage)
     });
@@ -135,65 +129,41 @@ const useFetchQuery = <T extends object>({
 
   const prefetchPreviousPage = ({ page, getPrefetchQueryKey }): void => {
     if (!isPaginated) {
-      return;
+      return undefined;
     }
 
     const previousPage = page - 1;
 
-    prefetchQuery({
+    return prefetchQuery({
       endpointParams: { page: previousPage },
       queryKey: getPrefetchQueryKey(previousPage)
     });
   };
 
   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,

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

@@ -1,4 +1,4 @@
-import { RenderHookResult, renderHook, waitFor } from '@testing-library/react';
+import { renderHook, waitFor, RenderHookResult } from '@testing-library/react';
 import fetchMock from 'jest-fetch-mock';
 
 import TestQueryProvider from '../TestQueryProvider';
@@ -48,7 +48,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate({ payload: user });
+    result.current.mutate(user);
 
     await waitFor(() => {
       expect(result.current?.isError).toEqual(false);
@@ -64,7 +64,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate({ payload: user });
+    result.current.mutate(user);
 
     await waitFor(() => {
       expect(result.current?.isError).toEqual(true);
@@ -85,7 +85,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate({ payload: user });
+    result.current.mutate(user);
 
     await waitFor(() => {
       expect(result.current?.isError).toEqual(true);
@@ -109,7 +109,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate({ payload: user });
+    result.current.mutate(user);
 
     await waitFor(() => {
       expect(mockedShowErrorMessage).not.toHaveBeenCalled();

package/src/api/useMutationQuery/index.ts

@@ -1,17 +1,11 @@
-import { useEffect } from 'react';
-
-import {
-  UseMutationOptions,
-  UseMutationResult,
-  useMutation
-} from '@tanstack/react-query';
-import { includes, omit } from 'ramda';
+import 'ulog';
+import { useMutation } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
+import anylogger from 'anylogger';
+import { includes } 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 enum Method {
   DELETE = 'DELETE',
@@ -21,84 +15,43 @@ export enum Method {
   PUT = 'PUT'
 }
 
-interface Variables<TMeta, T> {
-  _meta?: TMeta;
-  payload?: T;
-}
-
-export type UseMutationQueryProps<T, TMeta> = {
-  baseEndpoint?: string;
+export interface UseMutationQueryProps<T> {
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
   fetchHeaders?: HeadersInit;
-  getEndpoint: (_meta: TMeta) => string;
+  getEndpoint: () => string;
   httpCodesBypassErrorSnackbar?: Array<number>;
   method: Method;
-  onError?: (
-    error: ResponseError,
-    variables: Variables<TMeta, T>,
-    context: unknown
-  ) => unknown;
-  onMutate?: (variables: Variables<TMeta, T>) => Promise<unknown> | unknown;
-  onSuccess?: (
-    data: ResponseError | T,
-    variables: Variables<TMeta, T>,
-    context: unknown
-  ) => unknown;
-} & Omit<
-  UseMutationOptions<{ _meta?: TMeta; payload: T }>,
-  'mutationFn' | 'onError' | 'onMutate' | 'onSuccess' | 'mutateAsync' | 'mutate'
->;
+}
 
-export type UseMutationQueryState<T, TMeta> = Omit<
-  UseMutationResult<T | ResponseError>,
-  'isError' | 'mutate' | 'mutateAsync'
-> & {
+const log = anylogger('API Request');
+
+export interface UseMutationQueryState<T> {
   isError: boolean;
   isMutating: boolean;
-  mutate: (variables: Variables<TMeta, T>) => ResponseError | T;
-  mutateAsync: (
-    variables: Variables<TMeta, T>,
-    rest?: Pick<
-      UseMutationQueryProps<T, TMeta>,
-      'onError' | 'onMutate' | 'onSettled' | 'onSuccess'
-    >
-  ) => Promise<ResponseError | T>;
-};
+  mutate: (payload) => void;
+  mutateAsync: (payload) => Promise<T | ResponseError>;
+}
 
-const useMutationQuery = <T extends object, TMeta>({
+const useMutationQuery = <T extends object>({
   getEndpoint,
   catchError,
   decoder,
   defaultFailureMessage,
   fetchHeaders,
   httpCodesBypassErrorSnackbar = [],
-  method,
-  onMutate,
-  onError,
-  onSuccess,
-  onSettled,
-  baseEndpoint
-}: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T, TMeta> => {
+  method
+}: UseMutationQueryProps<T>): UseMutationQueryState<T> => {
   const { showErrorMessage } = useSnackbar();
 
-  const queryData = useMutation<
-    T | ResponseError,
-    ResponseError,
-    Variables<TMeta, T>
-  >({
-    mutationFn: (
-      variables: Variables<TMeta, T>
-    ): Promise<T | ResponseError> => {
-      const { _meta, payload } = variables || {};
-
-      return customFetch<T>({
-        baseEndpoint,
+  const queryData = useMutation<T | ResponseError>(
+    (payload): Promise<T | ResponseError> =>
+      customFetch<T>({
         catchError,
         decoder,
         defaultFailureMessage,
-        endpoint: getEndpoint(_meta as TMeta),
+        endpoint: getEndpoint(),
         headers: new Headers({
           'Content-Type': 'application/x-www-form-urlencoded',
           ...fetchHeaders
@@ -106,25 +59,13 @@ const useMutationQuery = <T extends object, TMeta>({
         isMutation: true,
         method,
         payload
-      });
-    },
-    onError,
-    onMutate,
-    onSettled,
-    onSuccess: (data, variables, context) => {
-      if (data?.isError) {
-        onError?.(data, variables, context);
-
-        return;
-      }
-      onSuccess?.(data, variables, context);
-    }
-  });
+      })
+  );
 
   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
@@ -136,17 +77,13 @@ const useMutationQuery = <T extends object, TMeta>({
     }
   };
 
-  useEffect(
-    () => {
-      manageError();
-    },
-    useDeepCompare([queryData.data])
-  );
+  manageError();
 
   return {
-    ...omit(['isError'], queryData),
     isError: (queryData.data as ResponseError | undefined)?.isError || false,
-    isMutating: queryData.isPending
+    isMutating: queryData.isLoading,
+    mutate: queryData.mutate,
+    mutateAsync: queryData.mutateAsync
   };
 };
 

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

@@ -1,5 +1,6 @@
-import { RenderHookResult, act, renderHook } from '@testing-library/react';
 import axios from 'axios';
+import anyLogger from 'anylogger';
+import { RenderHookResult, renderHook, act } from '@testing-library/react';
 
 import useRequest, { RequestResult, RequestParams } from '.';
 
@@ -76,6 +77,8 @@ describe(useRequest, () => {
       });
     });
 
+    expect(anyLogger().error).toHaveBeenCalledWith(response);
+
     expect(mockedShowErrorMessage).toHaveBeenCalledWith('failure');
   });
 

package/src/api/useRequest/index.ts

@@ -1,12 +1,15 @@
-import { useEffect, useState } from 'react';
+import { useState, useEffect } from 'react';
 
+import 'ulog';
 import axios from 'axios';
-import { path, defaultTo, includes, or, pathOr } from 'ramda';
+import { pathOr, defaultTo, path, includes } from 'ramda';
+import anylogger from 'anylogger';
 import { JsonDecoder } from 'ts.data.json';
 
-import useSnackbar from '../../Snackbar/useSnackbar';
-import { errorLog, warnLog } from '../logger';
 import useCancelTokenSource from '../useCancelTokenSource';
+import useSnackbar from '../../Snackbar/useSnackbar';
+
+const log = anylogger('API Request');
 
 export interface RequestParams<TResult> {
   decoder?: JsonDecoder.Decoder<TResult>;
@@ -38,16 +41,13 @@ const useRequest = <TResult>({
   }, []);
 
   const showRequestErrorMessage = (error): void => {
-    errorLog(error.message);
-
-    const message = or(
-      pathOr(undefined, ['response', 'data', 'message'], error),
-      pathOr(defaultFailureMessage, ['response', 'data'], error)
-    );
-
-    const errorMessage = defaultTo(message, getErrorMessage?.(error));
+    log.error(error);
+    const message = defaultTo(
+      pathOr(defaultFailureMessage, ['response', 'data', 'message']),
+      getErrorMessage
+    )(error);
 
-    showErrorMessage(errorMessage as string);
+    showErrorMessage(message);
   };
 
   const sendRequest = (params): Promise<TResult> => {
@@ -65,7 +65,7 @@ const useRequest = <TResult>({
       .catch((error) => {
         setSending(false);
         if (axios.isCancel(error)) {
-          warnLog(error);
+          log.warn(error);
 
           throw error;
         }

package/src/index.ts

@@ -2,8 +2,6 @@ import type { Props as SingleAutocompleteFieldProps } from './InputField/Select/
 
 export { default as IconButton } from './Button/Icon';
 
-export { Checkbox, CheckboxGroup } from './Checkbox';
-
 export { default as SingleAutocompleteField } from './InputField/Select/Autocomplete';
 export type { SingleAutocompleteFieldProps };
 
@@ -23,7 +21,6 @@ export { default as RegexpHelpTooltip } from './InputField/Search/RegexpHelpTool
 
 export { default as TextField } from './InputField/Text';
 export type { Props as TextFieldProps } from './InputField/Text';
-export { default as NumberField } from './InputField/Number/Number';
 
 export type { SelectEntry } from './InputField/Select';
 export { default as SelectField } from './InputField/Select';
@@ -76,10 +73,7 @@ export { default as useCancelTokenSource } from './api/useCancelTokenSource';
 export { getData, patchData, postData, putData, deleteData } from './api';
 export { default as useRequest } from './api/useRequest';
 export { default as buildListingEndpoint } from './api/buildListingEndpoint';
-export {
-  getSearchQueryParameterValue,
-  getFoundFields
-} from './api/buildListingEndpoint/getSearchQueryParameterValue';
+export { default as getSearchQueryParameterValue } from './api/buildListingEndpoint/getSearchQueryParameterValue';
 export type {
   Parameters as ListingParameters,
   BuildListingEndpointParameters,
@@ -88,6 +82,15 @@ export type {
 } from './api/buildListingEndpoint/models';
 export { default as buildListingDecoder } from './api/buildListingDecoder';
 
+export {
+  default as useLocaleDateTimeFormat,
+  dateTimeFormat,
+  dateFormat,
+  timeFormat
+} from './utils/useLocaleDateTimeFormat';
+
+export { default as useDebounce } from './utils/useDebounce';
+export { default as useIntersectionObserver } from './utils/useIntersectionObserver';
 export { default as ContentWithCircularLoading } from './ContentWithCircularProgress';
 export {
   setUrlQueryParameters,
@@ -99,6 +102,12 @@ export type {
   ListsSearchParameter
 } from './api/buildListingEndpoint/models';
 
+export {
+  default as useMemoComponent,
+  useDeepCompare
+} from './utils/useMemoComponent';
+export { default as useCopyToClipboard } from './utils/useCopyToClipboard';
+
 export { default as MenuSkeleton } from './MenuSkeleton';
 export { default as PopoverMenu } from './PopoverMenu';
 
@@ -117,7 +126,7 @@ export { default as Module } from './Module/index';
 export { default as LicensedModule } from './Module/LicensedModule';
 export { default as SnackbarProvider } from './Snackbar/SnackbarProvider';
 export { default as PersistentTooltip } from './InputField/Search/PersistentTooltip';
-export * from './Form';
+export { default as Form, GroupDirection } from './Form';
 export { InputType } from './Form/Inputs/models';
 export type {
   InputProps,
@@ -127,42 +136,24 @@ export type {
 export { default as Responsive } from './Responsive';
 export { default as useFetchQuery } from './api/useFetchQuery';
 export { default as useMutationQuery, Method } from './api/useMutationQuery';
-export {
-  default as useGraphQuery,
-  resourceTypeQueryParameter
-} from './api/useGraphQuery';
-export { default as QueryProvider, client } from './api/QueryProvider';
+export { default as QueryProvider } from './api/QueryProvider';
 export {
   default as FileDropZone,
   transformFileListToArray
 } from './FileDropZone';
 export type { CustomDropZoneContentProps } from './FileDropZone';
 export { default as TestQueryProvider } from './api/TestQueryProvider';
+export * from './utils/useThemeMode';
+export * from './utils/typedMemo';
 export * from './FallbackPage/FallbackPage';
 export * from './Logo/CentreonLogo';
 export * from './TopCounterElements';
 export { default as Image, ImageVariant } from './Image/Image';
 export { default as WallpaperPage } from './WallpaperPage';
 export { RichTextEditor } from './RichTextEditor';
-export {
-  default as ActionsList,
-  ActionsListActionDivider
-} from './ActionsList';
-export type { ActionsListActions } from './ActionsList';
-export type { ActionVariants } from './ActionsList/models';
+export { default as ActionsList } from './ActionsList';
+export { getStatusColors, SeverityCode } from './utils/statuses';
 
 export type { ResponseError, CatchErrorProps } from './api/customFetch';
-
-export * from './utils';
-export { default as FluidTypography } from './Typography/FluidTypography';
-export { default as EllipsisTypography } from './Typography/EllipsisTypography';
-export * from './Dashboard';
-export * from './Graph';
-export { default as TimePeriods } from './TimePeriods';
-export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';
-export { default as DateTimePickerInput } from './TimePeriods/DateTimePickerInput';
-export * from './ParentSize';
-export { default as Subtitle } from './Typography/Subtitle';
 export { default as TablePagination } from './Listing/ActionBar/Pagination';
 export { default as PaginationActions } from './Listing/ActionBar/PaginationActions';
-export * from './Icon';

package/src/queryParameters/index.ts

@@ -1,4 +1,4 @@
-import { isEmpty, isNil } from 'ramda';
+import { isNil, isEmpty } from 'ramda';
 
 import { QueryParameter } from './models';
 

package/src/queryParameters/url/index.ts

@@ -1,4 +1,4 @@
-import { fromPairs, startsWith } from 'ramda';
+import { fromPairs } from 'ramda';
 
 import { QueryParameter } from '../models';
 
@@ -25,10 +25,6 @@ const getUrlQueryParameters = <
 
   const entries = [...urlParams.entries()].map<[string, string]>(
     ([key, value]) => {
-      if (startsWith('/', value)) {
-        return [key, value];
-      }
-
       return [key, JSON.parse(value)];
     }
   );