@centreon/ui 24.9.6 → 24.10.1

package/src/InputField/Search/PersistentTooltip.tsx

@@ -1,24 +1,24 @@
 import { ReactElement, useState } from 'react';
 
-import { isNil, cond, T } from 'ramda';
+import { T, cond, isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Tooltip, IconButton } from '@mui/material';
 import IconHelp from '@mui/icons-material/HelpOutline';
 import IconClose from '@mui/icons-material/HighlightOff';
+import { IconButton, Tooltip } from '@mui/material';
 
 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/RegexpHelpTooltip.tsx

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 
-import { ifElse, always, isNil } from 'ramda';
+import { always, ifElse, isNil } from 'ramda';
 
 import { Box, Link } from '@mui/material';
 

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

@@ -1,5 +1,5 @@
-import RegexpHelpTooltip from './RegexpHelpTooltip';
 import PersistentTooltip from './PersistentTooltip';
+import RegexpHelpTooltip from './RegexpHelpTooltip';
 
 import SearchInput from '.';
 

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

@@ -1,41 +1,23 @@
 import {
+  RenderResult,
   fireEvent,
   getFetchCall,
   mockResponse,
   render,
-  RenderResult,
   resetMocks,
   waitFor
-} from '../../../../../testRenderer';
-import { buildListingEndpoint } from '../../../../..';
+} from '../../../../../../test/testRenderer';
 import TestQueryProvider from '../../../../../api/TestQueryProvider';
 
-import MultiConnectedAutocompleteField from '.';
-
-const baseEndpoint = 'endpoint';
+import { baseEndpoint, getEndpoint, label, optionsData } from './utils';
 
-const getEndpoint = (parameters): string => {
-  return buildListingEndpoint({ baseEndpoint, parameters });
-};
-
-const label = 'Multi Connected Autocomplete';
-
-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 =>
   render(
     <TestQueryProvider>
       <MultiConnectedAutocompleteField
+        baseEndpoint=""
         field="host.name"
         getEndpoint={getEndpoint}
         label={label}

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

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

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,14 +1,11 @@
-import withMock from 'storybook-addon-mock';
-
-import { buildListingEndpoint } from '../../../..';
 import { SelectEntry } from '../..';
+import { buildListingEndpoint } from '../../../..';
 import { Listing } from '../../../../api/models';
 
-import SingleConnectedAutocompleteField from './Single';
 import MultiConnectedAutocompleteField from './Multi';
+import SingleConnectedAutocompleteField from './Single';
 
 export default {
-  decorators: [withMock],
   title: 'InputField/Autocomplete/Connected'
 };
 
@@ -44,7 +41,7 @@ const mockSearch = (page: number): object => ({
   response: (request): Listing<SelectEntry> => {
     const { searchParams } = request;
 
-    return buildResult(parseInt(searchParams.page || '0', 10));
+    return buildResult(Number.parseInt(searchParams.page || '0', 10));
   },
   status: 200,
   url: `/endpoint?page=${page}&search=`
@@ -57,7 +54,7 @@ const getMockData = (): Array<object> => [
     response: (request): Listing<SelectEntry> => {
       const { searchParams } = request;
 
-      return buildResult(parseInt(searchParams.page || '0', 10));
+      return buildResult(Number.parseInt(searchParams.page || '0', 10));
     },
     status: 200,
     url: '/endpoint?page='

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

@@ -1,16 +1,16 @@
 import {
-  render,
-  fireEvent,
-  waitFor,
   RenderResult,
   act,
-  resetMocks,
+  fireEvent,
+  getFetchCall,
   mockResponse,
-  getFetchCall
-} from '../../../../testRenderer';
+  render,
+  resetMocks,
+  waitFor
+} from '../../../../../test/testRenderer';
+import TestQueryProvider from '../../../../api/TestQueryProvider';
 import buildListingEndpoint from '../../../../api/buildListingEndpoint';
 import { ConditionsSearchParameter } from '../../../../api/buildListingEndpoint/models';
-import TestQueryProvider from '../../../../api/TestQueryProvider';
 
 import SingleConnectedAutocompleteField from './Single';
 
@@ -45,6 +45,7 @@ const renderSingleConnectedAutocompleteField = (
   render(
     <TestQueryProvider>
       <SingleConnectedAutocompleteField
+        baseEndpoint=""
         field="host.name"
         getEndpoint={getEndpoint}
         label={label}
@@ -95,9 +96,7 @@ describe(SingleConnectedAutocompleteField, () => {
 
     await waitFor(() => {
       expect(getFetchCall(2)).toEqual(
-        `${baseEndpoint}?page=1&search=${encodeURIComponent(
-          '{"$and":[{"host.name":{"$lk":"%My Option 2%"}}]}'
-        )}`
+        `${baseEndpoint}?page=1&search=%7B%22%24and%22%3A%5B%7B%22%24or%22%3A%5B%7B%22host.name%22%3A%7B%22%24lk%22%3A%22%25My%20Option%202%25%22%7D%7D%5D%7D%5D%7D`
       );
     });
   });
@@ -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

@@ -1,33 +1,39 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import {
   equals,
-  prop,
-  last,
+  has,
   isEmpty,
-  map,
   isNil,
-  pipe,
+  last,
+  map,
   not,
-  has,
-  omit
+  omit,
+  pipe,
+  prop,
+  uniqBy
 } from 'ramda';
 
 import { CircularProgress, useTheme } from '@mui/material';
 
 import { Props as AutocompleteFieldProps } from '..';
-import useIntersectionObserver from '../../../../utils/useIntersectionObserver';
 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';
+import {
+  useDebounce,
+  useDeepCompare,
+  useIntersectionObserver
+} from '../../../../utils';
+import Option from '../../Option';
 
 export interface ConnectedAutoCompleteFieldProps<TData> {
+  allowUniqOption?: boolean;
+  baseEndpoint?: string;
+  changeIdValue: (item: TData) => number | string;
   conditionField?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
@@ -35,6 +41,7 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
   getRequestHeaders?: HeadersInit;
   initialPage: number;
   labelKey?: string;
+  queryKey?: string;
   searchConditions?: Array<ConditionsSearchParameter>;
 }
 
@@ -53,6 +60,10 @@ const ConnectedAutocompleteField = (
     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: {
+        cacheTime: 0,
         enabled: false,
+        staleTime: 0,
         suspense: false
       }
     });
@@ -219,17 +240,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 +292,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) {
@@ -285,8 +323,11 @@ const ConnectedAutocompleteField = (
         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/MultiConnected.tsx

@@ -1,5 +1,5 @@
-import MultiAutocompleteField from '../Multi';
 import ConnectedAutocompleteField from '../Connected';
+import MultiAutocompleteField from '../Multi';
 
 import DraggableAutocompleteField from '.';
 

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

@@ -1,6 +1,6 @@
-import { map, find, propEq } from 'ramda';
 import { rectIntersection } from '@dnd-kit/core';
 import { rectSortingStrategy } from '@dnd-kit/sortable';
+import { find, map, propEq } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { lighten } from '@mui/material';
@@ -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

@@ -1,11 +1,10 @@
-import * as React from 'react';
-
-import { findIndex, not, propEq } from 'ramda';
 import { DraggableSyntheticListeners } from '@dnd-kit/core';
 import clsx from 'clsx';
+import { findIndex, not, propEq } from 'ramda';
 
 import { Chip, Typography, useTheme } from '@mui/material';
 
+import { RefObject, useRef } from 'react';
 import { DraggableSelectEntry, SortableListProps } from './SortableList';
 
 interface ContentProps
@@ -14,7 +13,7 @@ interface ContentProps
   id: string;
   index: number;
   isDragging: boolean;
-  itemRef: React.RefObject<HTMLDivElement>;
+  itemRef: RefObject<HTMLDivElement>;
   listeners: DraggableSyntheticListeners;
   style;
 }
@@ -42,14 +41,14 @@ const SortableListContent = ({
     isDragging
   }: ContentProps): JSX.Element => {
     const theme = useTheme();
-    const labelItemRef = React.useRef<HTMLElement | null>(null);
+    const labelItemRef = useRef<HTMLElement | null>(null);
 
-    const mouseUp = (event: React.MouseEvent): void => {
+    const mouseUp = (event: MouseEvent): void => {
       if (not(event.shiftKey)) {
         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';
 
@@ -9,13 +8,12 @@ import { SelectEntry } from '../..';
 import { buildListingEndpoint } from '../../../..';
 import { Listing } from '../../../../api/models';
 
-import MultiDraggableConnectedAutocompleteField from './MultiConnected';
 import MultiDraggableAutocompleteField from './Multi';
+import MultiDraggableConnectedAutocompleteField from './MultiConnected';
 
 import { ItemActionProps } from '.';
 
 export default {
-  decorators: [withMock],
   title: 'InputField/Autocomplete/Draggable'
 };
 
@@ -51,7 +49,7 @@ const mockSearch = (page: number): object => ({
   response: (request): Listing<SelectEntry> => {
     const { searchParams } = request;
 
-    return buildResult(parseInt(searchParams.page || '0', 10));
+    return buildResult(Number.parseInt(searchParams.page || '0', 10));
   },
   status: 200,
   url: `/endpoint?page=${page}&search=`
@@ -64,7 +62,7 @@ const getMockData = (): Array<object> => [
     response: (request): Listing<SelectEntry> => {
       const { searchParams } = request;
 
-      return buildResult(parseInt(searchParams.page || '0', 10));
+      return buildResult(Number.parseInt(searchParams.page || '0', 10));
     },
     status: 200,
     url: '/endpoint?page='
@@ -76,9 +74,9 @@ const getMockData = (): Array<object> => [
 ];
 
 const options = [
-  { id: `0`, name: 'First Entity' },
-  { id: `1`, name: 'Second Entity' },
-  { id: `2`, name: 'Third Entity' }
+  { id: '0', name: 'First Entity' },
+  { id: '1', name: 'Second Entity' },
+  { id: '2', name: 'Third Entity' }
 ];
 
 const MultiDraggable = (): JSX.Element => (