@centreon/ui 24.9.4 → 24.9.6

package/src/TopCounterElements/TopCounterLayout.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useState, useEffect } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import type { SvgIcon } from '@mui/material';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import { Badge, ClickAwayListener } from '@mui/material';
+import type { SvgIcon } from '@mui/material';
 
 import useCloseOnLegacyPage from './useCloseOnLegacyPage';
 
@@ -115,6 +115,7 @@ const TopCounterLayout = ({
 }: TopCounterLayoutProps): JSX.Element => {
   const { classes, cx } = useStyles();
   const [toggled, setToggled] = useState(false);
+
   const subMenuId = title.replace(/[^A-Za-z]/, '-');
   useCloseOnLegacyPage({ setToggled });
 

package/src/TopCounterElements/{useCloseOnLegacyPage.tsx → useCloseOnLegacyPage.ts}

@@ -1,6 +1,5 @@
 import { Dispatch, SetStateAction, useEffect } from 'react';
 
-import { isNil } from 'ramda';
 import { useLocation } from 'react-router-dom';
 
 interface Props {
@@ -15,11 +14,9 @@ const useCloseOnLegacyPage = ({ setToggled }: Props): void => {
   };
 
   useEffect(() => {
-    const iframe = document.getElementById(
-      'main-content'
-    ) as HTMLIFrameElement | null;
+    const iframe = document.getElementById('main-content') as HTMLIFrameElement;
 
-    if (!isLegacyRoute || isNil(iframe)) {
+    if (!isLegacyRoute) {
       return () => undefined;
     }
 

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/Typography/{story.utils.tsx → index.tsx}

@@ -1,14 +1,14 @@
-import { toPairs } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
+import { toPairs } from 'ramda';
 
 import {
+  useTheme,
+  Typography,
   Box,
-  Card,
-  CardContent,
-  CardHeader,
   Stack,
-  Typography,
-  useTheme
+  CardContent,
+  Card,
+  CardHeader
 } from '@mui/material';
 
 const useStyles = makeStyles()((theme) => ({

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/WallpaperPage/index.tsx

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 
-import { isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
+import { isNil } from 'ramda';
 
 import { Paper } from '@mui/material';
 

package/src/Wizard/ActionsBar.test.tsx

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

package/src/Wizard/ActionsBar.tsx

@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui';
 
-import { Button, CircularProgress, Grid, Typography } from '@mui/material';
+import { Grid, Button, Typography, CircularProgress } from '@mui/material';
 
 import { ActionsBarProps } from './models';
 

package/src/Wizard/StepIcon.tsx

@@ -1,8 +1,8 @@
 import { makeStyles } from 'tss-react/mui';
 
-import Check from '@mui/icons-material/Check';
 import { StepIconProps } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
+import Check from '@mui/icons-material/Check';
 
 const useStepIconStyles = makeStyles()((theme) => ({
   avatar: {

package/src/Wizard/Stepper.tsx

@@ -1,10 +1,10 @@
-import { gte, length } from 'ramda';
+import { length, gte } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { Stepper as MUIStepper, Step, StepLabel } from '@mui/material';
 
-import StepIcon from './StepIcon';
 import { Step as StepType } from './models';
+import StepIcon from './StepIcon';
 
 interface Props {
   currentStep: number;

package/src/Wizard/WizardContent.tsx

@@ -4,13 +4,14 @@ import { useFormikContext } from 'formik';
 import { equals } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import ActionsBar from './ActionsBar';
 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

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 
-import { FormikErrors, FormikValues, useFormikContext } from 'formik';
+import { useFormikContext, FormikErrors, FormikValues } from 'formik';
 
-import { TextField, Typography } from '@mui/material';
+import { Typography, TextField } from '@mui/material';
 
 import { StepComponentProps } from './models';
 
@@ -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

@@ -3,12 +3,12 @@ import { useEffect } from 'react';
 import * as Yup from 'yup';
 
 import {
-  RenderResult,
-  fireEvent,
   render,
+  fireEvent,
+  waitFor,
   screen,
-  waitFor
-} from '../../test/testRenderer';
+  RenderResult
+} from '../testRenderer';
 
 import { StepComponentProps } from './models';
 

package/src/Wizard/index.tsx

@@ -1,16 +1,16 @@
 import { useState } from 'react';
 
+import { equals, length, dec, pipe, inc, filter, isEmpty, not } from 'ramda';
 import { Formik } from 'formik';
-import { dec, equals, filter, inc, isEmpty, length, not, pipe } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { Dialog, DialogContent } from '@mui/material';
 
 import Confirm from '../Dialog/Confirm';
 
+import { WizardProps } from './models';
 import Stepper from './Stepper';
 import WizardContent from './WizardContent';
-import { WizardProps } from './models';
 
 const useStyles = makeStyles()(() => ({
   dialogContent: {
@@ -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,6 +1,4 @@
-import { FormikErrors, FormikHelpers, FormikValues } from 'formik';
-
-import { DialogProps } from '@mui/material';
+import { FormikValues, FormikErrors, FormikHelpers } from 'formik';
 
 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

@@ -1,24 +1,23 @@
-import { ReactNode } from 'react';
-
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-
-const client = new QueryClient({
-  defaultOptions: {
-    queries: {
-      gcTime: 0,
-      retry: false
-    }
-  }
-});
-
-interface TestQueryProviderProps {
-  children: ReactNode;
-}
-
-const TestQueryProvider = ({
-  children
-}: TestQueryProviderProps): JSX.Element => (
-  <QueryClientProvider client={client}>{children}</QueryClientProvider>
-);
-
-export default TestQueryProvider;
+import { ReactNode } from 'react';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const client = new QueryClient({
+  defaultOptions: {
+    queries: {
+      cacheTime: 0
+    }
+  }
+});
+
+interface TestQueryProviderProps {
+  children: ReactNode;
+}
+
+const TestQueryProvider = ({
+  children
+}: TestQueryProviderProps): JSX.Element => (
+  <QueryClientProvider client={client}>{children}</QueryClientProvider>
+);
+
+export default TestQueryProvider;

package/src/api/buildListingDecoder.ts

@@ -1,6 +1,6 @@
 import { JsonDecoder } from 'ts.data.json';
 
-import { Listing, ListingMeta } from './models';
+import { ListingMeta, Listing } from './models';
 
 const metaDecoder = JsonDecoder.object<ListingMeta>(
   {

package/src/api/buildListingEndpoint/getSearchQueryParameterValue.ts

@@ -1,28 +1,27 @@
 import {
-  equals,
-  flatten,
-  head,
   isEmpty,
   isNil,
-  pluck,
-  prop,
   reject,
+  prop,
+  head,
   toPairs,
-  uniq
+  pipe,
+  map,
+  flatten
 } from 'ramda';
 
 import {
-  ConditionsSearchParameter,
-  GetConditionsSearchQueryParameterValueState,
-  GetListsSearchQueryParameterValueProps,
+  SearchMatch,
   RegexSearchParameter,
   RegexSearchQueryParameterValue,
-  SearchMatch,
   SearchParameter,
-  SearchQueryParameterValue
+  SearchQueryParameterValue,
+  ConditionsSearchParameter,
+  GetListsSearchQueryParameterValueProps,
+  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,8 +1,8 @@
 import toRawQueryParameters from '../../queryParameters';
 import { QueryParameter } from '../../queryParameters/models';
 
-import { getSearchQueryParameterValue } from './getSearchQueryParameterValue';
-import { BuildListingEndpointParameters, Parameters } from './models';
+import getSearchQueryParameterValue from './getSearchQueryParameterValue';
+import { Parameters, BuildListingEndpointParameters } from './models';
 
 const getQueryParameters = ({
   sort,

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({