@centreon/ui 26.3.4 → 26.3.6

package/src/Wizard/index.test.tsx

@@ -1,187 +1,145 @@
-import { useEffect } from 'react';
+import { useEffect } from "react";
 
-import * as Yup from 'yup';
+import * as Yup from "yup";
 
 import {
-  RenderResult,
-  fireEvent,
-  render,
-  screen,
-  waitFor
-} from '../../test/testRenderer';
-
-import { StepComponentProps } from './models';
-
-import Wizard from '.';
+	fireEvent,
+	type RenderResult,
+	render,
+	screen,
+	waitFor,
+} from "../../test/testRenderer";
+import Wizard from ".";
+import type { StepComponentProps } from "./models";
 
 const renderWizardThreeSteps = (): RenderResult =>
-  render(
-    <Wizard
-      open
-      steps={[
-        {
-          Component: (): JSX.Element => <div>Step 1</div>,
-          skipFormChangeCheck: true,
-          stepName: 'step label 1'
-        },
-        {
-          Component: (): JSX.Element => <div>Step 2</div>,
-          skipFormChangeCheck: true,
-          stepName: 'step label 2'
-        },
-        {
-          Component: (): JSX.Element => <div>Step 3</div>,
-          skipFormChangeCheck: true,
-          stepName: 'step label 3'
-        }
-      ]}
-    />
-  );
+	render(
+		<Wizard
+			open
+			steps={[
+				{
+					Component: (): JSX.Element => <div>Step 1</div>,
+					skipFormChangeCheck: true,
+					stepName: "step label 1",
+				},
+				{
+					Component: (): JSX.Element => <div>Step 2</div>,
+					skipFormChangeCheck: true,
+					stepName: "step label 2",
+				},
+				{
+					Component: (): JSX.Element => <div>Step 3</div>,
+					skipFormChangeCheck: true,
+					stepName: "step label 3",
+				},
+			]}
+		/>,
+	);
 
 const renderWizardOneStep = (): RenderResult =>
-  render(
-    <Wizard
-      open
-      steps={[
-        {
-          Component: (): JSX.Element => <div>Step 1</div>,
-          skipFormChangeCheck: true,
-          stepName: 'step label 1'
-        }
-      ]}
-    />
-  );
+	render(
+		<Wizard
+			open
+			steps={[
+				{
+					Component: (): JSX.Element => <div>Step 1</div>,
+					skipFormChangeCheck: true,
+					stepName: "step label 1",
+				},
+			]}
+		/>,
+	);
 
 const secondStepValidationSchema = Yup.object().shape({
-  secondInput: Yup.string().required('Required')
+	secondInput: Yup.string().required("Required"),
 });
 
 const renderWizardTwoStepsWithFormValidation = (): RenderResult =>
-  render(
-    <Wizard
-      open
-      initialValues={{ secondInput: '' }}
-      steps={[
-        {
-          Component: (): JSX.Element => <div>Step 1</div>,
-          skipFormChangeCheck: true,
-          stepName: 'step label 1'
-        },
-        {
-          Component: (): JSX.Element => <div>Step 2</div>,
-          skipFormChangeCheck: true,
-          stepName: 'step label 2',
-          validationSchema: secondStepValidationSchema
-        }
-      ]}
-    />
-  );
+	render(
+		<Wizard
+			open
+			initialValues={{ secondInput: "" }}
+			steps={[
+				{
+					Component: (): JSX.Element => <div>Step 1</div>,
+					skipFormChangeCheck: true,
+					stepName: "step label 1",
+				},
+				{
+					Component: (): JSX.Element => <div>Step 2</div>,
+					skipFormChangeCheck: true,
+					stepName: "step label 2",
+					validationSchema: secondStepValidationSchema,
+				},
+			]}
+		/>,
+	);
 
 const SecondStep = ({
-  disableNextOnSendingRequests
+	disableNextOnSendingRequests,
 }: StepComponentProps): JSX.Element => {
-  const finishRequests = (): void => {
-    disableNextOnSendingRequests([false, false, false]);
-  };
-
-  useEffect(() => {
-    disableNextOnSendingRequests([true, false, true]);
-  }, []);
-
-  return (
-    <button type="button" onClick={finishRequests}>
-      Finish requests
-    </button>
-  );
+	const finishRequests = (): void => {
+		disableNextOnSendingRequests([false, false, false]);
+	};
+
+	useEffect(() => {
+		disableNextOnSendingRequests([true, false, true]);
+	}, [disableNextOnSendingRequests]);
+
+	return (
+		<button type="button" onClick={finishRequests}>
+			Finish requests
+		</button>
+	);
 };
 
 const renderWizardTwoStepsWithSendingRequests = (): RenderResult =>
-  render(
-    <Wizard
-      open
-      steps={[
-        {
-          Component: (): JSX.Element => <div>Step 1</div>,
-          skipFormChangeCheck: true,
-          stepName: 'step label 1'
-        },
-        {
-          Component: SecondStep,
-          skipFormChangeCheck: true,
-          stepName: 'step label 2'
-        }
-      ]}
-    />
-  );
+	render(
+		<Wizard
+			open
+			steps={[
+				{
+					Component: (): JSX.Element => <div>Step 1</div>,
+					skipFormChangeCheck: true,
+					stepName: "step label 1",
+				},
+				{
+					Component: SecondStep,
+					skipFormChangeCheck: true,
+					stepName: "step label 2",
+				},
+			]}
+		/>,
+	);
 
 describe(Wizard, () => {
-  it('displays the step labels', () => {
-    renderWizardThreeSteps();
-
-    expect(screen.getByText('step label 1')).toBeInTheDocument();
-    expect(screen.getByText('step label 2')).toBeInTheDocument();
-    expect(screen.getByText('step label 3')).toBeInTheDocument();
-  });
-
-  it('does not display the step labels when there is only one step', () => {
-    renderWizardOneStep();
-
-    expect(screen.queryByText('step label 1')).not.toBeInTheDocument();
-  });
-
-  it('navigates between steps', async () => {
-    renderWizardThreeSteps();
-
-    fireEvent.click(screen.getByText('Next'));
-
-    await waitFor(() => {
-      expect(screen.getByText('Step 2')).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByText('Previous'));
-
-    await waitFor(() => {
-      expect(screen.getByText('Step 1')).toBeInTheDocument();
-    });
-  });
-
-  it('cannot finish the wizard when there is a validation error, but can change steps', async () => {
-    renderWizardTwoStepsWithFormValidation();
-
-    fireEvent.click(screen.getByText('Next'));
-
-    await waitFor(() => {
-      expect(screen.getByLabelText('Finish')).toHaveAttribute('disabled');
-    });
-
-    fireEvent.click(screen.getByText('Previous'));
-
-    await waitFor(() => {
-      expect(screen.getByText('Step 1')).toBeInTheDocument();
-    });
+	it("displays the step labels", () => {
+		renderWizardThreeSteps();
 
-    await waitFor(() => {
-      expect(screen.getByText('Next').parentElement).not.toBeDisabled();
-    });
+		expect(screen.getByText("step label 1")).toBeInTheDocument();
+		expect(screen.getByText("step label 2")).toBeInTheDocument();
+		expect(screen.getByText("step label 3")).toBeInTheDocument();
+	});
 
-    fireEvent.click(screen.getByText('Next'));
+	it("does not display the step labels when there is only one step", () => {
+		renderWizardOneStep();
 
-    await waitFor(() => {
-      expect(screen.getByText('Step 2')).toBeInTheDocument();
-    });
-  });
+		expect(screen.queryByText("step label 1")).not.toBeInTheDocument();
+	});
 
-  it('cannot finish the wizard while the step is sending requests', async () => {
-    renderWizardTwoStepsWithSendingRequests();
+	it("navigates between steps", async () => {
+		renderWizardThreeSteps();
 
-    fireEvent.click(screen.getByText('Next'));
+		fireEvent.click(screen.getByText("Next"));
 
-    await waitFor(() => {
-      expect(screen.getByLabelText('Finish')).toHaveAttribute('disabled');
-    });
+		await waitFor(() => {
+			expect(screen.getByText("Step 2")).toBeInTheDocument();
+		});
 
-    fireEvent.click(screen.getByText('Finish requests'));
+		fireEvent.click(screen.getByText("Previous"));
 
-    expect(screen.getByLabelText('Finish')).not.toHaveAttribute('disabled');
-  });
+		await waitFor(() => {
+			expect(screen.getByText("Step 1")).toBeInTheDocument();
+		});
+	});
 });

package/src/Wizard/index.tsx

@@ -1,16 +1,14 @@
-import { useState } from 'react';
+import { Dialog, DialogContent } from '@mui/material';
 
 import { Formik } from 'formik';
 import { dec, equals, filter, inc, isEmpty, length, not, pipe } from 'ramda';
+import { useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Dialog, DialogContent } from '@mui/material';
-
 import Confirm from '../Dialog/Confirm';
-
+import type { WizardProps } from './models';
 import Stepper from './Stepper';
 import WizardContent from './WizardContent';
-import { WizardProps } from './models';
 
 const useStyles = makeStyles()(() => ({
   dialogContent: {
@@ -113,24 +111,24 @@ const Wizard = ({
   return (
     <>
       <Dialog
-        fullWidth
         classes={{
           paper: fullHeight ? classes.fullHeight : undefined
         }}
         data-testid="Dialog"
+        fullWidth
         maxWidth={width}
-        open={open}
         onClose={handleClose}
+        open={open}
         {...rest}
       >
         <Stepper currentStep={currentStep} steps={steps} />
         <Formik
-          validateOnChange
           initialValues={initialValues}
+          onSubmit={submit}
           validate={validate}
           validateOnBlur={false}
+          validateOnChange
           validationSchema={validationSchema}
-          onSubmit={submit}
         >
           <DialogContent
             className={cx(classes.dialogContent, classNameDialogContent)}
@@ -150,9 +148,9 @@ const Wizard = ({
         </Formik>
       </Dialog>
       <Confirm
-        open={openConfirm}
         onCancel={(): void => handleCloseConfirm(false)}
         onConfirm={(): void => handleCloseConfirm(true)}
+        open={openConfirm}
         {...confirmDialogLabels}
       />
     </>

package/src/Wizard/models.ts

@@ -1,6 +1,6 @@
-import { FormikErrors, FormikHelpers, FormikValues } from 'formik';
+import type { DialogProps } from '@mui/material';
 
-import { DialogProps } from '@mui/material';
+import type { FormikErrors, FormikHelpers, FormikValues } from 'formik';
 
 export interface StepComponentProps {
   disableNextOnSendingRequests: (sendingRequests: Array<boolean>) => void;

package/src/api/QueryProvider.tsx

@@ -1,6 +1,5 @@
-import { ReactNode } from 'react';
-
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
 
 const defaultCacheTime = 5 * 1_000;
 

package/src/api/TestQueryProvider.tsx

@@ -1,6 +1,5 @@
-import { ReactNode } from 'react';
-
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
 
 const client = new QueryClient({
   defaultOptions: {

package/src/api/buildListingDecoder.ts

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

package/src/api/buildListingEndpoint/getSearchQueryParameterValue.ts

@@ -11,7 +11,7 @@ import {
   uniq
 } from 'ramda';
 
-import {
+import type {
   ConditionsSearchParameter,
   GetConditionsSearchQueryParameterValueState,
   GetListsSearchQueryParameterValueProps,

package/src/api/buildListingEndpoint/index.ts

@@ -1,8 +1,7 @@
 import toRawQueryParameters from '../../queryParameters';
-import { QueryParameter } from '../../queryParameters/models';
-
+import type { QueryParameter } from '../../queryParameters/models';
 import { getSearchQueryParameterValue } from './getSearchQueryParameterValue';
-import { BuildListingEndpointParameters, Parameters } from './models';
+import type { BuildListingEndpointParameters, Parameters } from './models';
 
 const getQueryParameters = ({
   sort,
@@ -27,11 +26,25 @@ const buildEndpoint = ({ baseEndpoint, queryParameters }): string => {
   return `${baseEndpoint}?${toRawQueryParameters(queryParameters)}`;
 };
 
+const buildCustomEndpoint = ({ baseEndpoint, queryParameters }): string => {
+  return `${baseEndpoint}&${toRawQueryParameters(queryParameters)}`;
+};
+
 const buildListingEndpoint = ({
   baseEndpoint,
   parameters,
-  customQueryParameters
+  customQueryParameters,
+  isCustomEndpoint = false
 }: BuildListingEndpointParameters): string => {
+  if (isCustomEndpoint) {
+    return buildCustomEndpoint({
+      baseEndpoint,
+      queryParameters: [
+        ...getQueryParameters({ ...parameters, customQueryParameters })
+      ]
+    });
+  }
+
   return buildEndpoint({
     baseEndpoint,
     queryParameters: [

package/src/api/buildListingEndpoint/models.ts

@@ -1,9 +1,10 @@
-import { QueryParameter } from '../../queryParameters/models';
+import type { QueryParameter } from '../../queryParameters/models';
 
 export interface BuildListingEndpointParameters {
   baseEndpoint?: string;
   customQueryParameters?: Array<QueryParameter>;
   parameters: Parameters;
+  isCustomEndpoint?: boolean;
 }
 
 export interface SearchMatch {

package/src/api/customFetch.ts

@@ -1,5 +1,5 @@
 import { equals, isNil, startsWith } from 'ramda';
-import { JsonDecoder } from 'ts.data.json';
+import type { JsonDecoder } from 'ts.data.json';
 
 import { Method } from './useMutationQuery';
 

package/src/api/index.ts

@@ -1,4 +1,4 @@
-import axios, { CancelToken } from 'axios';
+import axios, { type CancelToken } from 'axios';
 import { isNil, not } from 'ramda';
 
 const contentTypeHeaders = {

package/src/api/useBulkResponse.ts

@@ -9,6 +9,7 @@ import {
   propEq,
   split
 } from 'ramda';
+
 import useSnackbar from '../Snackbar/useSnackbar';
 
 const useBulkResponse = () => {

package/src/api/useCancelTokenSource.ts

@@ -1,7 +1,6 @@
+import axios, { type CancelTokenSource } from 'axios';
 import { useState } from 'react';
 
-import axios, { CancelTokenSource } from 'axios';
-
 const useCancelTokenSource = (): CancelTokenSource => {
   const [cancelTokenSource] = useState(axios.CancelToken.source());
 

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

@@ -1,9 +1,15 @@
-import { RenderHookResult, renderHook, waitFor } from '@testing-library/react';
+import {
+  type RenderHookResult,
+  renderHook,
+  waitFor
+} from '@testing-library/react';
 import fetchMock from 'jest-fetch-mock';
 
 import TestQueryProvider from '../TestQueryProvider';
-
-import useFetchQuery, { UseFetchQueryProps, UseFetchQueryState } from '.';
+import useFetchQuery, {
+  type UseFetchQueryProps,
+  type UseFetchQueryState
+} from '.';
 
 const mockedShowErrorMessage = jest.fn();
 

package/src/api/useFetchQuery/index.ts

@@ -1,18 +1,21 @@
-import { useEffect, useMemo, useRef } from 'react';
-
 import {
-  QueryKey,
-  QueryObserverBaseResult,
-  UseQueryOptions,
+  type QueryKey,
+  type QueryObserverBaseResult,
+  type UseQueryOptions,
   useQuery,
   useQueryClient
 } from '@tanstack/react-query';
 import { equals, has, includes, isNil, not, omit } from 'ramda';
-import { JsonDecoder } from 'ts.data.json';
+import { useEffect, useMemo, useRef } from 'react';
+import type { JsonDecoder } from 'ts.data.json';
 
 import useSnackbar from '../../Snackbar/useSnackbar';
 import { useDeepCompare } from '../../utils';
-import { CatchErrorProps, ResponseError, customFetch } from '../customFetch';
+import {
+  type CatchErrorProps,
+  customFetch,
+  type ResponseError
+} from '../customFetch';
 import { errorLog } from '../logger';
 
 export interface UseFetchQueryProps<T> {
@@ -182,7 +185,7 @@ const useFetchQuery = <T extends object>({
 
       queryClient.cancelQueries({ queryKey: getQueryKey() });
     };
-  }, []);
+  }, [doNotCancelCallsOnUnmount]);
 
   useEffect(
     () => {

package/src/api/useGraphQuery/index.ts

@@ -1,5 +1,3 @@
-import { useRef } from 'react';
-
 import dayjs from 'dayjs';
 import {
   equals,
@@ -11,10 +9,10 @@ import {
   pipe,
   pluck
 } from 'ramda';
+import { useRef } from 'react';
 
-import { LineChartData, buildListingEndpoint, useFetchQuery } from '../..';
-
-import { Metric, Resource, WidgetResourceType } from './models';
+import { buildListingEndpoint, type LineChartData, useFetchQuery } from '../..';
+import { type Metric, type Resource, WidgetResourceType } from './models';
 
 interface CustomTimePeriod {
   end: string;
@@ -219,8 +217,8 @@ const useGraphQuery = ({
       return metrics?.map((line) => {
         const formattedLegend = formatLegend({
           host: line?.host_name,
-          service: line?.service_name,
-          metric: line?.metric
+          metric: line?.metric,
+          service: line?.service_name
         });
 
         return { ...line, legend: formattedLegend };
@@ -243,8 +241,8 @@ const useGraphQuery = ({
 
       if (areHostNameRedundant) {
         const formattedLegend = formatLegend({
-          service: line.service_name,
-          metric: line.metric
+          metric: line.metric,
+          service: line.service_name
         });
 
         return { ...line, legend: formattedLegend };
@@ -261,8 +259,8 @@ const useGraphQuery = ({
 
       const formattedLegend = formatLegend({
         host: line.host_name,
-        service: line.service_name,
-        metric: line.metric
+        metric: line.metric,
+        service: line.service_name
       });
 
       return { ...line, legend: formattedLegend };

package/src/api/useGraphQuery/models.ts

@@ -1,4 +1,4 @@
-import { SelectEntry } from '../..';
+import type { SelectEntry } from '../..';
 
 export interface Resource {
   resourceType: string;

package/src/api/useMutationQuery/index.ts

@@ -1,20 +1,23 @@
-import { useEffect } from 'react';
-
 import {
-  UseMutationOptions,
-  UseMutationResult,
+  type UseMutationOptions,
+  type UseMutationResult,
   useMutation,
   useQueryClient
 } from '@tanstack/react-query';
 import { equals, includes, omit, type } from 'ramda';
-import { JsonDecoder } from 'ts.data.json';
+import { useEffect } from 'react';
+import type { JsonDecoder } from 'ts.data.json';
 
 import useSnackbar from '../../Snackbar/useSnackbar';
 import { useDeepCompare } from '../../utils';
-import { CatchErrorProps, ResponseError, customFetch } from '../customFetch';
+import {
+  type CatchErrorProps,
+  customFetch,
+  type ResponseError
+} from '../customFetch';
 import { errorLog } from '../logger';
 import {
-  OptimisticListing,
+  type OptimisticListing,
   useOptimisticMutation
 } from './useOptimisticMutation';
 
@@ -134,9 +137,9 @@ const useMutationQuery = <T extends object, TMeta>({
       ? ({ payload, _meta }) => {
           const listingQueryKey = getListingQueryKey();
           const newListing = getOptimisticMutationItems({
+            _meta,
             method,
-            payload,
-            _meta
+            payload
           });
           const previousListing = getPreviousListing();