@centreon/ui 26.3.4 → 26.3.6

package/src/InputField/Number/Number.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import NumberField from './Number';
 
@@ -25,26 +25,28 @@ const meta: Meta<typeof NumberField> = {
   component: NumberField
 };
 
+const { log } = console;
+
 export default meta;
 type Story = StoryObj<typeof NumberField>;
 
 export const Default: Story = {
   args: {
-    onChange: console.log
+    onChange: log
   }
 };
 
 export const WithDefaultValue: Story = {
   args: {
     defaultValue: 25,
-    onChange: console.log
+    onChange: log
   }
 };
 
 export const WithFallbackValue: Story = {
   args: {
     fallbackValue: 25,
-    onChange: console.log
+    onChange: log
   }
 };
 
@@ -52,7 +54,7 @@ export const WithFallbackValueAndDefaultValue: Story = {
   args: {
     defaultValue: 10,
     fallbackValue: 25,
-    onChange: console.log
+    onChange: log
   }
 };
 
@@ -61,6 +63,6 @@ export const WithFallbackValueAndDefaultValueAutoSize: Story = {
     autoSize: true,
     defaultValue: 10,
     fallbackValue: 25,
-    onChange: console.log
+    onChange: log
   }
 };

package/src/InputField/Number/Number.tsx

@@ -1,8 +1,7 @@
-import { ChangeEvent, useState } from 'react';
+import { always, clamp, cond, isEmpty, T } from 'ramda';
+import { type ChangeEvent, useState } from 'react';
 
-import { T, always, clamp, cond, isEmpty } from 'ramda';
-
-import TextField, { TextProps } from '../Text';
+import TextField, { type TextProps } from '../Text';
 
 export interface NumberProps
   extends Omit<TextProps, 'defaultValue' | 'onChange'> {
@@ -61,18 +60,18 @@ const NumberField = ({
 
   return (
     <TextField
+      onChange={changeValue}
       type="number"
       value={actualValue}
-      onChange={changeValue}
       {...props}
+      placeholder={
+        placeholder || (!defaultValue ? `${fallbackValue}` : undefined)
+      }
       textFieldSlotsAndSlotProps={{
         slotProps: {
           htmlInput: { ...textFieldSlotsAndSlotProps?.slotProps?.htmlInput }
         }
       }}
-      placeholder={
-        placeholder || (!defaultValue ? `${fallbackValue}` : undefined)
-      }
     />
   );
 };

package/src/InputField/Search/PersistentTooltip.tsx

@@ -1,12 +1,11 @@
-import { ReactElement, useState } from 'react';
-
-import { T, cond, isNil } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
 import IconHelp from '@mui/icons-material/HelpOutline';
 import IconClose from '@mui/icons-material/HighlightOff';
 import { IconButton, Tooltip } from '@mui/material';
 
+import { cond, isNil, T } from 'ramda';
+import { type ReactElement, useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
 const useStyles = makeStyles()((theme) => ({
   buttonClose: {
     position: 'absolute',
@@ -62,8 +61,8 @@ const PersistentTooltip = ({
     <div style={{ position: 'relative' }}>
       <IconButton
         className={classes.buttonClose}
-        size="small"
         onClick={closeTooltip}
+        size="small"
       >
         <IconClose fontSize="small" />
       </IconButton>
@@ -79,8 +78,8 @@ const PersistentTooltip = ({
     >
       <IconButton
         aria-label={labelSearchHelp}
-        size="small"
         onClick={toggleTooltip}
+        size="small"
       >
         <IconHelp />
       </IconButton>

package/src/InputField/Search/RegexpHelpTooltip.tsx

@@ -1,8 +1,7 @@
-import { ReactElement } from 'react';
+import { Box, Link } from '@mui/material';
 
 import { always, ifElse, isNil } from 'ramda';
-
-import { Box, Link } from '@mui/material';
+import type { ReactElement } from 'react';
 
 import PersistentTooltip from './PersistentTooltip';
 

package/src/InputField/Search/index.stories.tsx

@@ -1,8 +1,7 @@
+import SearchInput from '.';
 import PersistentTooltip from './PersistentTooltip';
 import RegexpHelpTooltip from './RegexpHelpTooltip';
 
-import SearchInput from '.';
-
 export default { title: 'InputField/Search' };
 
 export const normal = (): JSX.Element => <SearchInput />;

package/src/InputField/Search/index.tsx

@@ -1,6 +1,6 @@
 import IconSearch from '@mui/icons-material/Search';
 
-import TextField, { TextProps } from '../Text';
+import TextField, { type TextProps } from '../Text';
 
 type Props = Omit<TextProps, 'StartAdornment'>;
 

package/src/InputField/Select/Autocomplete/Connected/Multi/MultiConnectedAutocompleteField.cypress.spec.tsx

@@ -7,6 +7,7 @@ import {
 import i18next from 'i18next';
 import { useState } from 'react';
 import { initReactI18next } from 'react-i18next';
+
 import { labelSelectAll, labelUnSelectAll } from '../../../../translatedLabels';
 import { baseEndpoint, getEndpoint, label, placeholder } from './utils';
 
@@ -18,13 +19,13 @@ const Component = () => {
     <TestQueryProvider>
       <div style={{ paddingTop: 20 }}>
         <MultiConnectedAutocompleteField
+          disableSelectAll={false}
           field="host.name"
           getEndpoint={getEndpoint}
           label={label}
+          onChange={(_, item) => setValues(item)}
           placeholder={placeholder}
           value={values}
-          onChange={(_, item) => setValues(item)}
-          disableSelectAll={false}
         />
       </div>
     </TestQueryProvider>

package/src/InputField/Select/Autocomplete/Connected/Multi/Popover.tsx

@@ -1,5 +1,4 @@
 import PopoverAutocomplete from '../../Popover';
-
 import MultiConnectedAutocompleteField from './index';
 
 const PopoverMultiConnectedAutocompleteField = PopoverAutocomplete(

package/src/InputField/Select/Autocomplete/Connected/Multi/index.tsx

@@ -1,5 +1,5 @@
-import ConnectedAutocompleteField from '..';
 import MultiAutocompleteField from '../../Multi';
+import ConnectedAutocompleteField from '..';
 
 const MultiConnectedAutocompleteField = ConnectedAutocompleteField(
   MultiAutocompleteField,

package/src/InputField/Select/Autocomplete/Connected/Single.tsx

@@ -1,5 +1,4 @@
 import AutocompleteField from '..';
-
 import ConnectedAutocompleteField from '.';
 
 const SingleConnectedAutocompleteField = ConnectedAutocompleteField(

package/src/InputField/Select/Autocomplete/Connected/index.stories.tsx

@@ -1,7 +1,6 @@
-import { SelectEntry } from '../..';
 import { buildListingEndpoint } from '../../../..';
-import { Listing } from '../../../../api/models';
-
+import type { Listing } from '../../../../api/models';
+import type { SelectEntry } from '../..';
 import MultiConnectedAutocompleteField from './Multi';
 import SingleConnectedAutocompleteField from './Single';
 

package/src/InputField/Select/Autocomplete/Connected/index.test.tsx

@@ -1,124 +1,124 @@
 import {
-  RenderResult,
-  act,
-  fireEvent,
-  getFetchCall,
-  mockResponse,
-  render,
-  resetMocks,
-  waitFor
-} from '../../../../../test/testRenderer';
-import TestQueryProvider from '../../../../api/TestQueryProvider';
-import buildListingEndpoint from '../../../../api/buildListingEndpoint';
-import { ConditionsSearchParameter } from '../../../../api/buildListingEndpoint/models';
-
-import SingleConnectedAutocompleteField from './Single';
-
-const label = 'Connected Autocomplete';
-const placeholder = 'Type here...';
+	act,
+	fireEvent,
+	getFetchCall,
+	mockResponse,
+	type RenderResult,
+	render,
+	resetMocks,
+	waitFor,
+} from "../../../../../test/testRenderer";
+import buildListingEndpoint from "../../../../api/buildListingEndpoint";
+import type { ConditionsSearchParameter } from "../../../../api/buildListingEndpoint/models";
+import TestQueryProvider from "../../../../api/TestQueryProvider";
+
+import SingleConnectedAutocompleteField from "./Single";
+
+const label = "Connected Autocomplete";
+const placeholder = "Type here...";
 
 const optionsData = {
-  meta: {
-    limit: 2,
-    page: 1,
-    total: 20
-  },
-  result: [
-    { id: 0, name: 'My Option 1' },
-    { id: 1, name: 'My Option 2' }
-  ]
+	meta: {
+		limit: 2,
+		page: 1,
+		total: 20,
+	},
+	result: [
+		{ id: 0, name: "My Option 1" },
+		{ id: 1, name: "My Option 2" },
+	],
 };
 
-const baseEndpoint = 'endpoint';
+const baseEndpoint = "endpoint";
 
 const getEndpoint = (parameters): string => {
-  return buildListingEndpoint({ baseEndpoint, parameters });
+	return buildListingEndpoint({ baseEndpoint, parameters });
 };
 
 interface Props {
-  searchConditions?: Array<ConditionsSearchParameter>;
+	searchConditions?: Array<ConditionsSearchParameter>;
 }
 
 const renderSingleConnectedAutocompleteField = (
-  { searchConditions }: Props = { searchConditions: undefined }
+	{ searchConditions }: Props = { searchConditions: undefined },
 ): RenderResult =>
-  render(
-    <TestQueryProvider>
-      <SingleConnectedAutocompleteField
-        baseEndpoint=""
-        field="host.name"
-        getEndpoint={getEndpoint}
-        label={label}
-        placeholder="Type here..."
-        searchConditions={searchConditions}
-      />
-    </TestQueryProvider>
-  );
+	render(
+		<TestQueryProvider>
+			<SingleConnectedAutocompleteField
+				baseEndpoint=""
+				field="host.name"
+				getEndpoint={getEndpoint}
+				label={label}
+				placeholder="Type here..."
+				searchConditions={searchConditions}
+			/>
+		</TestQueryProvider>,
+	);
 
 describe(SingleConnectedAutocompleteField, () => {
-  beforeEach(() => {
-    resetMocks();
-    mockResponse({ data: optionsData });
-  });
-
-  it('populates options with the first page result from the endpoint request', async () => {
-    const { getByLabelText, getByText } =
-      renderSingleConnectedAutocompleteField();
-
-    fireEvent.click(getByLabelText('Open'));
-
-    expect(getFetchCall(0)).toEqual(`${baseEndpoint}?page=1`);
-
-    await waitFor(() => {
-      expect(getByText('My Option 1')).toBeInTheDocument();
-    });
-  });
-
-  it('populates options with the first page result from the endpoint request after typing something in input field', async () => {
-    const { getByLabelText, getByPlaceholderText } =
-      renderSingleConnectedAutocompleteField();
-
-    act(() => {
-      fireEvent.click(getByLabelText('Open'));
-    });
-
-    await waitFor(() => {
-      expect(getFetchCall(0)).toEqual(`${baseEndpoint}?page=1`);
-    });
-
-    await waitFor(() => {
-      expect(getFetchCall(1)).toEqual(`${baseEndpoint}?page=2`);
-    });
-
-    fireEvent.change(getByPlaceholderText(placeholder), {
-      target: { value: 'My Option 2' }
-    });
-
-    await waitFor(() => {
-      expect(decodeURIComponent(getFetchCall(2))).toEqual(
-        'endpoint?page=1&search={"$and":[{"$and":[{"host.name":{"$lk":"%My Option 2%"}}]}]}'
-      );
-    });
-  });
-
-  it('adds search conditions to the endpoint request when the corresponding prop is passed', async () => {
-    const { getByLabelText } = renderSingleConnectedAutocompleteField({
-      searchConditions: [
-        {
-          field: 'parent_name',
-          value: {
-            $eq: 'Centreon-Server'
-          }
-        }
-      ]
-    });
-
-    fireEvent.click(getByLabelText('Open'));
-
-    await waitFor(() => {
-      expect(getFetchCall(0)).toEqual(
-        `${baseEndpoint}?page=1&search=%7B%22%24and%22%3A%5B%7B%22%24or%22%3A%5B%7B%22parent_name%22%3A%7B%22%24eq%22%3A%22Centreon-Server%22%7D%7D%5D%7D%5D%7D`
-      );
-    });
-  });
+	beforeEach(() => {
+		resetMocks();
+		mockResponse({ data: optionsData });
+	});
+
+	it("populates options with the first page result from the endpoint request", async () => {
+		const { getByLabelText, getByText } =
+			renderSingleConnectedAutocompleteField();
+
+		fireEvent.click(getByLabelText("Open"));
+
+		expect(getFetchCall(0)).toEqual(`${baseEndpoint}?page=1`);
+
+		await waitFor(() => {
+			expect(getByText("My Option 1")).toBeInTheDocument();
+		});
+	});
+
+	it("populates options with the first page result from the endpoint request after typing something in input field", async () => {
+		const { getByLabelText, getByPlaceholderText } =
+			renderSingleConnectedAutocompleteField();
+
+		act(() => {
+			fireEvent.click(getByLabelText("Open"));
+		});
+
+		await waitFor(() => {
+			expect(getFetchCall(0)).toEqual(`${baseEndpoint}?page=1`);
+		});
+
+		await waitFor(() => {
+			expect(getFetchCall(1)).toEqual(`${baseEndpoint}?page=2`);
+		});
+
+		fireEvent.change(getByPlaceholderText(placeholder), {
+			target: { value: "My Option 2" },
+		});
+
+		await waitFor(() => {
+			expect(decodeURIComponent(getFetchCall(2))).toEqual(
+				'endpoint?page=1&search={"$and":[{"$and":[{"host.name":{"$lk":"%My Option 2%"}}]}]}',
+			);
+		});
+	});
+
+	it("adds search conditions to the endpoint request when the corresponding prop is passed", async () => {
+		const { getByLabelText } = renderSingleConnectedAutocompleteField({
+			searchConditions: [
+				{
+					field: "parent_name",
+					value: {
+						$eq: "Centreon-Server",
+					},
+				},
+			],
+		});
+
+		fireEvent.click(getByLabelText("Open"));
+
+		await waitFor(() => {
+			expect(getFetchCall(0)).toEqual(
+				`${baseEndpoint}?page=1&search=%7B%22%24and%22%3A%5B%7B%22%24or%22%3A%5B%7B%22parent_name%22%3A%7B%22%24eq%22%3A%22Centreon-Server%22%7D%7D%5D%7D%5D%7D`,
+			);
+		});
+	});
 });

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useCallback, useEffect, useState } from 'react';
+import { CircularProgress, useTheme } from '@mui/material';
 
 import {
   equals,
@@ -13,12 +13,10 @@ import {
   prop,
   uniqBy
 } from 'ramda';
+import { type ReactElement, useCallback, useEffect, useState } from 'react';
 
-import { CircularProgress, useTheme } from '@mui/material';
-
-import { Props as AutocompleteFieldProps } from '..';
-import { ListingMapModel, ListingModel, SelectEntry } from '../../../..';
-import {
+import type { ListingMapModel, ListingModel, SelectEntry } from '../../../..';
+import type {
   ConditionsSearchParameter,
   SearchParameter
 } from '../../../../api/buildListingEndpoint/models';
@@ -29,6 +27,7 @@ import {
   useIntersectionObserver
 } from '../../../../utils';
 import Option from '../../Option';
+import type { Props as AutocompleteFieldProps } from '..';
 
 interface OptionResult<T> {
   result: Array<T>;
@@ -99,8 +98,8 @@ const ConnectedAutocompleteField = (
     const { fetchQuery, isFetching, prefetchNextPage, data } = useFetchQuery<
       ListingModel<TData> | ListingMapModel<TData>
     >({
-      decoder,
       baseEndpoint,
+      decoder,
       fetchHeaders: getRequestHeaders,
       getEndpoint: (params) => {
         return getEndpoint({
@@ -115,8 +114,8 @@ const ConnectedAutocompleteField = (
       ],
       isPaginated: true,
       queryOptions: {
-        gcTime: 0,
         enabled: false,
+        gcTime: 0,
         staleTime: 0,
         suspense: false
       }
@@ -128,21 +127,21 @@ const ConnectedAutocompleteField = (
       ): OptionResult<TData> => {
         if ('result' in newOptions)
           return {
+            limit: newOptions.meta.limit || 1,
             result: newOptions.result || [],
-            total: newOptions.meta.total || 1,
-            limit: newOptions.meta.limit || 1
+            total: newOptions.meta.total || 1
           };
         if ('content' in newOptions)
           return {
+            limit: newOptions.size || 1,
             result: newOptions.content || [],
-            total: newOptions.totalElements || 1,
-            limit: newOptions.size || 1
+            total: newOptions.totalElements || 1
           };
 
         return {
+          limit: 1,
           result: [],
-          total: 1,
-          limit: 1
+          total: 1
         };
       },
       []
@@ -169,8 +168,8 @@ const ConnectedAutocompleteField = (
         : [selectedValue];
 
       return {
-        operator: '$and',
         field,
+        operator: '$and',
         values: {
           $ni: map(
             prop(exclusionOptionProperty),
@@ -190,8 +189,8 @@ const ConnectedAutocompleteField = (
       }
 
       return {
-        operator: '$and',
         field,
+        operator: '$and',
         values: {
           $lk: `%${searchedValue}%`
         }
@@ -260,14 +259,14 @@ const ConnectedAutocompleteField = (
       );
     };
 
-    const renameKey = ({ object, key, newKey }): Partial<TData> => {
+    const renameKey = useCallback(({ object, key, newKey }): Partial<TData> => {
       const oldKeyValue = object[key];
       const newObject = { ...object, [newKey]: oldKeyValue };
 
       return omit([key], newObject);
-    };
+    }, []);
 
-    const fetchOptionsAndPrefetchNextOptions = (): void => {
+    const fetchOptionsAndPrefetchNextOptions = useCallback((): void => {
       fetchQuery().then((newOptions) => {
         const isError = has('isError', newOptions);
 
@@ -314,7 +313,18 @@ const ConnectedAutocompleteField = (
           page
         });
       });
-    };
+    }, [
+      changeIdValue,
+      fetchQuery,
+      getOptionResult,
+      labelKey,
+      options,
+      page,
+      prefetchNextPage,
+      props.label,
+      renameKey,
+      searchParameter
+    ]);
 
     useEffect(() => {
       if (!optionsOpen) {
@@ -326,18 +336,15 @@ const ConnectedAutocompleteField = (
             : undefined
         );
       }
-    }, [optionsOpen]);
+    }, [optionsOpen, initialPage, JSON.stringify(searchConditions)]);
 
-    useEffect(
-      () => {
-        setSearchParameter(
-          !isEmpty(searchConditions)
-            ? { conditions: searchConditions }
-            : undefined
-        );
-      },
-      useDeepCompare([searchConditions])
-    );
+    useEffect(() => {
+      setSearchParameter(
+        !isEmpty(searchConditions)
+          ? { conditions: searchConditions }
+          : undefined
+      );
+    }, [...useDeepCompare([searchConditions])]);
 
     useEffect(() => {
       if (!autocompleteChangedValue && !props?.value) {
@@ -356,19 +363,19 @@ const ConnectedAutocompleteField = (
 
     return (
       <AutocompleteField
-        total={data?.meta?.total || data?.totalElements || 1}
         filterOptions={(opt): SelectEntry => opt}
         loading={isFetching}
-        options={
-          allowUniqOption ? uniqBy(getRenderedOptionText, options) : options
-        }
-        renderOption={renderOptions}
         onChange={(_, value) => {
           setAutocompleteChangedValue(value);
         }}
         onClose={(): void => setOptionsOpen(false)}
         onOpen={(): void => setOptionsOpen(true)}
         onTextChange={changeText}
+        options={
+          allowUniqOption ? uniqBy(getRenderedOptionText, options) : options
+        }
+        renderOption={renderOptions}
+        total={data?.meta?.total || data?.totalElements || 1}
         {...props}
       />
     );

package/src/InputField/Select/Autocomplete/Draggable/Multi.tsx

@@ -1,5 +1,4 @@
 import MultiAutocompleteField from '../Multi';
-
 import DraggableAutocompleteField from '.';
 
 const MultiDraggableAutocompleteField = DraggableAutocompleteField(

package/src/InputField/Select/Autocomplete/Draggable/MultiConnected.tsx

@@ -1,6 +1,5 @@
 import ConnectedAutocompleteField from '../Connected';
 import MultiAutocompleteField from '../Multi';
-
 import DraggableAutocompleteField from '.';
 
 const MultiConnectedAutocompleteField = ConnectedAutocompleteField(