@centreon/ui 23.10.108 → 23.10.109

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/TestQueryProvider.tsx

@@ -5,8 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 const client = new QueryClient({
   defaultOptions: {
     queries: {
-      cacheTime: 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>;

package/src/api/customFetch.ts

@@ -10,7 +10,6 @@ interface ApiErrorResponse {
 
 export interface ResponseError {
   additionalInformation?;
-  data?;
   isError: boolean;
   message: string;
   statusCode: number;
@@ -83,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.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 
 import 'ulog';
 import {
@@ -14,7 +14,6 @@ import { has, includes, not, omit } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
-import { useDeepCompare } from '../../utils';
 
 export interface UseFetchQueryProps<T> {
   catchError?: (props: CatchErrorProps) => void;
@@ -31,13 +30,14 @@ export interface UseFetchQueryProps<T> {
   >;
 }
 
-export type UseFetchQueryState<T> = {
+export interface UseFetchQueryState<T>
+  extends Omit<QueryObserverBaseResult, 'data'> {
   data?: T;
   fetchQuery: () => Promise<T | ResponseError>;
   prefetchNextPage: ({ page, getPrefetchQueryKey }) => void;
   prefetchPreviousPage: ({ page, getPrefetchQueryKey }) => void;
   prefetchQuery: ({ endpointParams, queryKey }) => void;
-} & Omit<QueryObserverBaseResult, 'data'>;
+}
 
 export interface PrefetchEndpointParams {
   page: number;
@@ -91,6 +91,14 @@ const useFetchQuery = <T extends object>({
     }
   };
 
+  useEffect(() => {
+    return (): void => {
+      queryClient.cancelQueries(getQueryKey());
+    };
+  }, []);
+
+  manageError();
+
   const prefetchQuery = ({ endpointParams, queryKey }): void => {
     queryClient.prefetchQuery(
       queryKey,
@@ -147,24 +155,12 @@ const useFetchQuery = <T extends object>({
     );
   };
 
-  const data = useMemo(
-    () =>
-      not(has('isError', queryData.data)) ? (queryData.data as T) : undefined,
-    [queryData.data]
-  );
+  const data = not(has('isError', queryData.data))
+    ? (queryData.data as T)
+    : undefined;
 
   const errorData = queryData.data as ResponseError | undefined;
 
-  useEffect(() => {
-    return (): void => {
-      queryClient.cancelQueries(getQueryKey());
-    };
-  }, []);
-
-  useEffect(() => {
-    manageError();
-  }, useDeepCompare([queryData.data]));
-
   return {
     ...omit(['data'], queryData),
     data,

package/src/api/useMutationQuery/index.ts

@@ -1,18 +1,11 @@
 import 'ulog';
-import { useEffect } from 'react';
-
-import {
-  useMutation,
-  UseMutationOptions,
-  UseMutationResult
-} from '@tanstack/react-query';
+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';
 
 export enum Method {
   DELETE = 'DELETE',
@@ -22,50 +15,43 @@ export enum Method {
   PUT = 'PUT'
 }
 
-export type UseMutationQueryProps<T, TMeta> = {
+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;
-} & Omit<UseMutationOptions<T & { _meta?: TMeta }>, 'mutationFn'>;
+}
 
 const log = anylogger('API Request');
 
-export type UseMutationQueryState<T> = {
+export interface UseMutationQueryState<T> {
   isError: boolean;
   isMutating: boolean;
-} & UseMutationResult<T | ResponseError>;
+  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
-}: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T> => {
+  method
+}: UseMutationQueryProps<T>): UseMutationQueryState<T> => {
   const { showErrorMessage } = useSnackbar();
 
-  const queryData = useMutation<
-    T | ResponseError,
-    ResponseError,
-    T & { _meta: TMeta }
-  >(
-    (_payload: T & { _meta: TMeta }): Promise<T | ResponseError> => {
-      const { _meta, ...payload } = _payload || {};
-
-      return customFetch<T>({
+  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
@@ -73,13 +59,7 @@ const useMutationQuery = <T extends object, TMeta>({
         isMutation: true,
         method,
         payload
-      });
-    },
-    {
-      onError,
-      onMutate,
-      onSuccess
-    }
+      })
   );
 
   const manageError = (): void => {
@@ -97,14 +77,13 @@ const useMutationQuery = <T extends object, TMeta>({
     }
   };
 
-  useEffect(() => {
-    manageError();
-  }, useDeepCompare([queryData.data]));
+  manageError();
 
   return {
-    ...queryData,
     isError: (queryData.data as ResponseError | undefined)?.isError || false,
-    isMutating: queryData.isLoading
+    isMutating: queryData.isLoading,
+    mutate: queryData.mutate,
+    mutateAsync: queryData.mutateAsync
   };
 };
 

package/src/api/useRequest/index.ts

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 
 import 'ulog';
 import axios from 'axios';
-import { pathOr, defaultTo, path, includes, or } from 'ramda';
+import { pathOr, defaultTo, path, includes } from 'ramda';
 import anylogger from 'anylogger';
 import { JsonDecoder } from 'ts.data.json';
 
@@ -42,15 +42,12 @@ const useRequest = <TResult>({
 
   const showRequestErrorMessage = (error): void => {
     log.error(error);
+    const message = defaultTo(
+      pathOr(defaultFailureMessage, ['response', 'data', 'message']),
+      getErrorMessage
+    )(error);
 
-    const message = or(
-      pathOr(undefined, ['response', 'data', 'message'], error),
-      pathOr(defaultFailureMessage, ['response', 'data'], error)
-    );
-
-    const errorMessage = defaultTo(message, getErrorMessage?.(error));
-
-    showErrorMessage(errorMessage as string);
+    showErrorMessage(message);
   };
 
   const sendRequest = (params): Promise<TResult> => {

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 };
 
@@ -75,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,
@@ -87,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,
@@ -98,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';
 
@@ -116,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,
@@ -126,10 +136,6 @@ 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 } from './api/QueryProvider';
 export {
   default as FileDropZone,
@@ -137,28 +143,15 @@ export {
 } 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 * from './Dashboard';
-export * from './Graph';
-export type { LineChartData } from './Graph/common/models';
-export * from './Graph/common/timeSeries';
-
-export { default as TimePeriods } from './TimePeriods';
-export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';
-export * from './ParentSize';

package/src/storyshots.test.js

@@ -0,0 +1,52 @@
+import initStoryshots from '@storybook/addon-storyshots';
+import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
+
+jest.unmock('axios');
+
+const getMatchOptions = () => {
+  return {
+    failureThreshold: 0.2,
+    failureThresholdType: 'percent'
+  };
+};
+
+const beforeScreenshot = async (page) => {
+  await page.addStyleTag({
+    content: `
+    *,
+    *::before,
+    *::after {
+      animation-delay: -1s !important;
+      animation-duration: 0s !important;
+      animation-iteration-count: 1 !important;
+      background-attachment: initial !important;
+      scroll-behavior: auto !important;
+      transition-duration: 0s !important;
+      transition: none !important;
+    }`
+  });
+
+  await page.setViewport({
+    height: 1000,
+    width: 1000
+  });
+};
+
+const getStoryKindRegex = () => {
+  const config = JSON.parse(process.env.TEST_CONFIGURATION);
+  if (!config.story) {
+    return null;
+  }
+
+  return new RegExp(`^(${config.story || ''})$`, 'g');
+};
+
+initStoryshots({
+  storyKindRegex: getStoryKindRegex(),
+  suite: 'Image StoryShots',
+  test: imageSnapshot({
+    beforeScreenshot,
+    getMatchOptions,
+    storybookUrl: `file://${__dirname}/../.out`
+  })
+});