@centreon/ui 24.4.73 → 24.4.75

package/src/InputField/Number/Number.tsx

@@ -0,0 +1,74 @@
+import { ChangeEvent, useState } from 'react';
+
+import { T, always, cond, isEmpty, isNil } from 'ramda';
+
+import TextField, { TextProps } from '../Text';
+
+export interface NumberProps
+  extends Omit<TextProps, 'defaultValue' | 'onChange'> {
+  /**
+   * The initial value which will be used by the input for the first render
+   */
+  defaultValue?: number;
+  /**
+   *  This value will be used when the input is cleared
+   */
+  fallbackValue?: number;
+  /**
+   * The change function with the actual value as parameter. This parameter will be the value when the input is filled but it will be the fallbackValue when the input is cleared out
+   */
+  onChange: (actualValue: number) => void;
+}
+
+const NumberField = ({
+  fallbackValue = 0,
+  defaultValue,
+  onChange,
+  ...props
+}: NumberProps): JSX.Element => {
+  const [placeholder, setPlaceholder] = useState<string | undefined>();
+  const [actualValue, setActualValue] = useState(
+    defaultValue ? `${defaultValue}` : ''
+  );
+
+  const { inputProps } = props;
+
+  const changeValue = (event: ChangeEvent<HTMLInputElement>): void => {
+    const inputValue = event.target.value;
+
+    const number = Number(inputValue);
+    const campledNumber = cond([
+      [() => isEmpty(inputValue), always(fallbackValue)],
+      [() => Number.isNaN(number), always(number)],
+      [
+        T,
+        always(
+          Math.max(
+            !isNil(inputProps?.min) ? inputProps?.min : -Infinity,
+            number
+          )
+        )
+      ]
+    ])();
+
+    onChange(campledNumber);
+    setPlaceholder(isEmpty(inputValue) ? `${fallbackValue}` : undefined);
+    setActualValue(isEmpty(inputValue) ? inputValue : `${campledNumber}`);
+  };
+
+  return (
+    <TextField
+      defaultValue={defaultValue}
+      type="number"
+      value={actualValue}
+      onChange={changeValue}
+      {...props}
+      inputProps={inputProps}
+      placeholder={
+        placeholder || (!defaultValue ? `${fallbackValue}` : undefined)
+      }
+    />
+  );
+};
+
+export default NumberField;

package/src/InputField/Search/PersistentTooltip.tsx

@@ -10,15 +10,15 @@ import IconClose from '@mui/icons-material/HighlightOff';
 const useStyles = makeStyles()((theme) => ({
   buttonClose: {
     position: 'absolute',
-    right: theme.spacing(0.5)
+    right: theme.spacing(-0.5),
+    top: theme.spacing(-1)
   },
   tooltip: {
     backgroundColor: theme.palette.common.white,
     boxShadow: theme.shadows[3],
     color: theme.palette.text.primary,
     fontSize: theme.typography.pxToRem(12),
-    maxWidth: 500,
-    padding: theme.spacing(1, 2, 1, 1)
+    maxWidth: 500
   }
 }));
 
@@ -59,7 +59,7 @@ const PersistentTooltip = ({
   };
 
   const title = (
-    <>
+    <div style={{ position: 'relative' }}>
       <IconButton
         className={classes.buttonClose}
         size="small"
@@ -68,11 +68,15 @@ const PersistentTooltip = ({
         <IconClose fontSize="small" />
       </IconButton>
       {children}
-    </>
+    </div>
   );
 
   return (
-    <Tooltip classes={{ tooltip: classes.tooltip }} open={open} title={title}>
+    <Tooltip
+      classes={{ tooltip: classes.tooltip }}
+      open={openTooltip || open}
+      title={title}
+    >
       <IconButton
         aria-label={labelSearchHelp}
         size="small"

package/src/InputField/Search/index.tsx

@@ -1,8 +1,8 @@
 import IconSearch from '@mui/icons-material/Search';
 
-import TextField, { Props as TextFieldProps } from '../Text';
+import TextField, { TextProps } from '../Text';
 
-type Props = Omit<TextFieldProps, 'StartAdornment'>;
+type Props = Omit<TextProps, 'StartAdornment'>;
 
 const SearchAdornment = (): JSX.Element => <IconSearch />;
 

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

@@ -0,0 +1,127 @@
+import {
+  Method,
+  MultiConnectedAutocompleteField,
+  TestQueryProvider
+} from '@centreon/ui';
+
+import { baseEndpoint, getEndpoint, label, placeholder } from './utils';
+
+const optionOne = 'My Option 1';
+
+describe('Multi connected autocomplete', () => {
+  beforeEach(() => {
+    cy.fixture('inputField/listOptions').then((optionsData) => {
+      cy.interceptAPIRequest({
+        alias: 'getListOptions',
+        method: Method.GET,
+        path: `${baseEndpoint}**`,
+        response: optionsData
+      });
+    });
+
+    cy.fixture('inputField/searchedOption').then((optionData) => {
+      cy.interceptAPIRequest({
+        alias: 'getSearchedOption',
+        method: Method.GET,
+        path: `${baseEndpoint}**`,
+        query: {
+          name: 'search',
+          value: JSON.stringify({
+            $and: [{ 'host.name': { $lk: `%${optionOne}%` } }]
+          })
+        },
+        response: optionData
+      });
+    });
+
+    cy.mount({
+      Component: (
+        <TestQueryProvider>
+          <div style={{ paddingTop: 20 }}>
+            <MultiConnectedAutocompleteField
+              field="host.name"
+              getEndpoint={getEndpoint}
+              label={label}
+              placeholder={placeholder}
+            />
+          </div>
+        </TestQueryProvider>
+      )
+    });
+  });
+
+  it('displays and hides the list when the user double-clicks on the input', () => {
+    cy.contains(label).should('be.visible');
+
+    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
+
+    cy.get('@input').click();
+
+    cy.waitForRequest('@getListOptions');
+
+    cy.get('@input').invoke('attr', 'placeholder').should('equal', placeholder);
+
+    cy.findByRole('presentation').as('listOptions');
+
+    cy.get('@listOptions').should('be.visible');
+
+    cy.fixture('inputField/listOptions').then((optionsData) => {
+      cy.get('@listOptions').within(() => {
+        optionsData.result.forEach((option) => {
+          cy.contains(option.name);
+        });
+      });
+    });
+
+    cy.makeSnapshot('displays the list when the user clicks on the input');
+
+    cy.get('@input').click();
+
+    cy.get('@listOptions').should('not.exist');
+
+    cy.makeSnapshot('hides the list when the user clicks on the input');
+  });
+
+  it('displays all options on the list when the user searches for and selects an option', () => {
+    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
+
+    cy.get('@input').click();
+
+    cy.waitForRequest('@getListOptions');
+
+    cy.findByRole('presentation').as('listOptions');
+
+    cy.get('@listOptions').should('be.visible');
+
+    cy.get('@input').type(optionOne);
+
+    cy.waitForRequest('@getSearchedOption');
+
+    cy.fixture('inputField/searchedOption').then(() => {
+      cy.get('@listOptions').find('li').should('have.length', 5);
+    });
+
+    cy.get('[type="checkbox"]').eq(0).check();
+    cy.get('@input')
+      .parent()
+      .within(() => {
+        cy.contains(optionOne).should('be.visible');
+
+        cy.get('[data-testid="CancelIcon"]').should('be.visible');
+      });
+
+    cy.waitForRequest('@getListOptions');
+
+    cy.fixture('inputField/listOptions').then((optionsData) => {
+      cy.get('@listOptions')
+        .find('li')
+        .should('have.length', optionsData.result.length);
+
+      cy.get('@listOptions').within(() => {
+        optionsData.result.forEach((option) => {
+          cy.contains(option.name);
+        });
+      });
+    });
+  });
+});

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

@@ -6,36 +6,19 @@ import {
   RenderResult,
   resetMocks,
   waitFor
-} from '../../../../../testRenderer';
-import { buildListingEndpoint } from '../../../../..';
+} from '../../../../../../test/testRenderer';
 import TestQueryProvider from '../../../../../api/TestQueryProvider';
 
-import MultiConnectedAutocompleteField from '.';
-
-const baseEndpoint = 'endpoint';
-
-const getEndpoint = (parameters): string => {
-  return buildListingEndpoint({ baseEndpoint, parameters });
-};
-
-const label = 'Multi Connected Autocomplete';
+import { baseEndpoint, getEndpoint, label, optionsData } from './utils';
 
-const optionsData = {
-  meta: {
-    limit: 2,
-    page: 1,
-    total: 20
-  },
-  result: [
-    { id: 0, name: 'My Option 1' },
-    { id: 1, name: 'My Option 2' }
-  ]
-};
+import MultiConnectedAutocompleteField from '.';
 
-const renderMultiAutocompleteField = (): RenderResult =>
+const renderMultiAutocompleteField = (customRenderTags?): RenderResult =>
   render(
     <TestQueryProvider>
       <MultiConnectedAutocompleteField
+        baseEndpoint=""
+        customRenderTags={customRenderTags}
         field="host.name"
         getEndpoint={getEndpoint}
         label={label}
@@ -60,4 +43,23 @@ describe(MultiConnectedAutocompleteField, () => {
       expect(getFetchCall(0)).toEqual(`${baseEndpoint}?page=1`);
     });
   });
+
+  it('display tags when customTagsRender is defined', async () => {
+    const customRender = (tags: React.ReactNode): React.ReactNode => (
+      <div data-testid="custom-tags-wrapper">{tags}</div>
+    );
+
+    const { getByLabelText, getByTestId } =
+      renderMultiAutocompleteField(customRender);
+
+    fireEvent.click(getByLabelText('Open'));
+
+    await waitFor(() => {
+      const tagChip = getByTestId(
+        `tag-option-chip-${optionsData.result[0].id}`
+      );
+      expect(tagChip).toBeVisible();
+      expect(tagChip).toHaveTextContent(optionsData.result[0].name);
+    });
+  });
 });

package/src/InputField/Select/Autocomplete/Connected/Multi/utils/index.ts

@@ -0,0 +1,22 @@
+import { buildListingEndpoint } from '../../../../../..';
+
+export const baseEndpoint = './endpoint';
+
+export const getEndpoint = (parameters): string => {
+  return buildListingEndpoint({ baseEndpoint, parameters });
+};
+
+export const label = 'Multi Connected Autocomplete';
+export const placeholder = 'Type here...';
+
+export const optionsData = {
+  meta: {
+    limit: 2,
+    page: 1,
+    total: 20
+  },
+  result: [
+    { id: 0, name: 'My Option 1' },
+    { id: 1, name: 'My Option 2' }
+  ]
+};

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

@@ -1,5 +1,3 @@
-import withMock from 'storybook-addon-mock';
-
 import { buildListingEndpoint } from '../../../..';
 import { SelectEntry } from '../..';
 import { Listing } from '../../../../api/models';
@@ -8,7 +6,6 @@ import SingleConnectedAutocompleteField from './Single';
 import MultiConnectedAutocompleteField from './Multi';
 
 export default {
-  decorators: [withMock],
   title: 'InputField/Autocomplete/Connected'
 };
 

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

@@ -7,7 +7,7 @@ import {
   resetMocks,
   mockResponse,
   getFetchCall
-} from '../../../../testRenderer';
+} from '../../../../../test/testRenderer';
 import buildListingEndpoint from '../../../../api/buildListingEndpoint';
 import { ConditionsSearchParameter } from '../../../../api/buildListingEndpoint/models';
 import TestQueryProvider from '../../../../api/TestQueryProvider';
@@ -45,6 +45,7 @@ const renderSingleConnectedAutocompleteField = (
   render(
     <TestQueryProvider>
       <SingleConnectedAutocompleteField
+        baseEndpoint=""
         field="host.name"
         getEndpoint={getEndpoint}
         label={label}
@@ -94,10 +95,8 @@ describe(SingleConnectedAutocompleteField, () => {
     });
 
     await waitFor(() => {
-      expect(getFetchCall(2)).toEqual(
-        `${baseEndpoint}?page=1&search=${encodeURIComponent(
-          '{"$and":[{"host.name":{"$lk":"%My Option 2%"}}]}'
-        )}`
+      expect(decodeURIComponent(getFetchCall(2))).toEqual(
+        'endpoint?page=1&search={"$and":[{"$and":[{"host.name":{"$lk":"%My Option 2%"}}]}]}'
       );
     });
   });
@@ -118,9 +117,7 @@ describe(SingleConnectedAutocompleteField, () => {
 
     await waitFor(() => {
       expect(getFetchCall(0)).toEqual(
-        `${baseEndpoint}?page=1&search=${encodeURIComponent(
-          '{"$and":[{"parent_name":{"$eq":"Centreon-Server"}}]}'
-        )}`
+        `${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

@@ -10,31 +10,38 @@ import {
   pipe,
   not,
   has,
-  omit
+  omit,
+  uniqBy
 } from 'ramda';
 
 import { CircularProgress, useTheme } from '@mui/material';
 
 import { Props as AutocompleteFieldProps } from '..';
-import useIntersectionObserver from '../../../../utils/useIntersectionObserver';
+import {
+  useDebounce,
+  useIntersectionObserver,
+  useDeepCompare
+} from '../../../../utils';
 import { ListingModel, SelectEntry } from '../../../..';
 import Option from '../../Option';
 import {
   ConditionsSearchParameter,
   SearchParameter
 } from '../../../../api/buildListingEndpoint/models';
-import useDebounce from '../../../../utils/useDebounce';
 import useFetchQuery from '../../../../api/useFetchQuery';
-import { useDeepCompare } from '../../../../utils/useMemoComponent';
 
 export interface ConnectedAutoCompleteFieldProps<TData> {
-  conditionField?: keyof SelectEntry;
+  allowUniqOption?: boolean;
+  baseEndpoint?: string;
+  changeIdValue: (item: TData) => number | string;
+  exclusionOptionProperty?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
   getRenderedOptionText: (option: TData) => string;
   getRequestHeaders?: HeadersInit;
   initialPage: number;
   labelKey?: string;
+  queryKey?: string;
   searchConditions?: Array<ConditionsSearchParameter>;
 }
 
@@ -48,11 +55,15 @@ const ConnectedAutocompleteField = (
     field,
     labelKey,
     open,
-    conditionField = 'id',
+    exclusionOptionProperty = 'id',
     searchConditions = [],
     getRenderedOptionText = (option): string => option.name?.toString(),
     getRequestHeaders,
     displayOptionThumbnail,
+    queryKey,
+    allowUniqOption,
+    baseEndpoint,
+    changeIdValue,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
     Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
@@ -63,6 +74,9 @@ const ConnectedAutocompleteField = (
     const [searchParameter, setSearchParameter] = useState<
       SearchParameter | undefined
     >(undefined);
+
+    const [autocompleteChangedValue, setAutocompleteChangedValue] =
+      useState<Array<SelectEntry>>();
     const debounce = useDebounce({
       functionToDebounce: (value): void => {
         setSearchParameter(getSearchParameter(value));
@@ -77,6 +91,7 @@ const ConnectedAutocompleteField = (
     const { fetchQuery, isFetching, prefetchNextPage } = useFetchQuery<
       ListingModel<TData>
     >({
+      baseEndpoint,
       fetchHeaders: getRequestHeaders,
       getEndpoint: (params) => {
         return getEndpoint({
@@ -84,10 +99,16 @@ const ConnectedAutocompleteField = (
           search: searchParameter
         });
       },
-      getQueryKey: () => [`autocomplete-${props.label}`, page, searchParameter],
+      getQueryKey: () => [
+        `autocomplete-${queryKey || props.label}`,
+        page,
+        searchParameter
+      ],
       isPaginated: true,
       queryOptions: {
         enabled: false,
+        gcTime: 0,
+        staleTime: 0,
         suspense: false
       }
     });
@@ -113,10 +134,11 @@ const ConnectedAutocompleteField = (
         : [selectedValue];
 
       return {
-        field: conditionField,
+        field,
+        operator: '$and',
         values: {
           $ni: map(
-            prop(conditionField),
+            prop(exclusionOptionProperty),
             selectedValues as Array<
               Record<keyof SelectEntry, string | undefined>
             >
@@ -134,6 +156,7 @@ const ConnectedAutocompleteField = (
 
       return {
         field,
+        operator: '$and',
         values: {
           $lk: `%${searchedValue}%`
         }
@@ -219,17 +242,24 @@ const ConnectedAutocompleteField = (
 
         const moreOptions = page > 1 ? options : [];
 
+        const formattedList = changeIdValue
+          ? newOptions.result.map((item) => ({
+              ...item,
+              id: changeIdValue(item)
+            }))
+          : newOptions.result;
+
         if (!isEmpty(labelKey) && !isNil(labelKey)) {
-          const list = newOptions.result.map((item) =>
+          const list = formattedList.map((item) =>
             renameKey({ key: labelKey, newKey: 'name', object: item })
           );
           setOptions(moreOptions.concat(list as Array<TData>));
 
           return;
         }
-        setOptions(moreOptions.concat(newOptions.result));
+        setOptions(moreOptions.concat(formattedList));
 
-        setOptions(moreOptions.concat(newOptions.result as Array<TData>));
+        setOptions(moreOptions.concat(formattedList as Array<TData>));
 
         const total = prop('total', newOptions.meta) || 1;
         const limit = prop('limit', newOptions.meta) || 1;
@@ -264,13 +294,23 @@ const ConnectedAutocompleteField = (
       }
     }, [optionsOpen]);
 
+    useEffect(
+      () => {
+        setSearchParameter(
+          !isEmpty(searchConditions)
+            ? { conditions: searchConditions }
+            : undefined
+        );
+      },
+      useDeepCompare([searchConditions])
+    );
+
     useEffect(() => {
-      setSearchParameter(
-        !isEmpty(searchConditions)
-          ? { conditions: searchConditions }
-          : undefined
-      );
-    }, useDeepCompare([searchConditions]));
+      if (!autocompleteChangedValue && !props?.value) {
+        return;
+      }
+      setSearchParameter(undefined);
+    }, [autocompleteChangedValue, props?.value]);
 
     useEffect(() => {
       if (!optionsOpen) {
@@ -284,9 +324,13 @@ const ConnectedAutocompleteField = (
       <AutocompleteField
         filterOptions={(opt): SelectEntry => opt}
         loading={isFetching}
-        open={optionsOpen}
-        options={options}
+        options={
+          allowUniqOption ? uniqBy(getRenderedOptionText, options) : options
+        }
         renderOption={renderOptions}
+        onChange={(_, value) => {
+          setAutocompleteChangedValue(value);
+        }}
         onClose={(): void => setOptionsOpen(false)}
         onOpen={(): void => setOptionsOpen(true)}
         onTextChange={changeText}

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

@@ -49,7 +49,7 @@ const SortableList = ({
   const dragEnd = ({ items: newItems }): void =>
     changeItemsOrder(
       map(
-        (item) => find(propEq('id', item), items),
+        (item) => find(propEq(item, 'id'), items),
         newItems
       ) as Array<DraggableSelectEntry>
     );

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

@@ -49,7 +49,7 @@ const SortableListContent = ({
         return;
       }
 
-      const itemIndex = findIndex(propEq('id', id), items);
+      const itemIndex = findIndex(propEq(id, 'id'), items);
 
       itemHover?.(null);
       itemClick?.({ index: itemIndex, item: { createOption, id, name } });

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

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 
 import { isNil, not } from 'ramda';
-import withMock from 'storybook-addon-mock';
 
 import { Tooltip, Typography } from '@mui/material';
 
@@ -15,7 +14,6 @@ import MultiDraggableAutocompleteField from './Multi';
 import { ItemActionProps } from '.';
 
 export default {
-  decorators: [withMock],
   title: 'InputField/Autocomplete/Draggable'
 };
 

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

@@ -77,7 +77,7 @@ const DraggableAutocomplete = (
     const deleteValue = (id): void => {
       itemHover?.(null);
       setSelectedValues((values: Array<DraggableSelectEntry>) => {
-        const index = findIndex(propEq('id', id), values);
+        const index = findIndex(propEq(id, 'id'), values);
 
         const newSelectedValues = remove(index, 1, values);
 

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

@@ -58,3 +58,22 @@ export const popoverWithoutInput = (): JSX.Element => {
     />
   );
 };
+
+export const customRenderedTags = (): JSX.Element => {
+  const customRender = (tags: React.ReactNode): React.ReactNode => (
+    <div style={{ display: 'flex' }}>
+      {tags}
+      <span style={{ color: '#999' }}>Custom wrapper</span>
+    </div>
+  );
+
+  return (
+    <MultiAutocompleteField
+      customRenderTags={customRender}
+      label="Custom Tags Render"
+      options={options}
+      placeholder="Type here..."
+      value={[options[0], options[1]]}
+    />
+  );
+};