@centreon/ui 24.7.2 → 24.7.4

package/src/Image/index.stories.tsx

@@ -1,101 +1,101 @@
-import { ComponentStory } from '@storybook/react';
-
-import LoadingSkeleton from '../LoadingSkeleton';
-import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
-import NotAuthorized from '../@assets/images/not-authorized-template-background-light.svg';
-
-import Image, { ImageVariant } from './Image';
-
-export default {
-  argTypes: {
-    alt: { control: 'text' },
-    height: { control: 'number' },
-    width: { control: 'number' }
-  },
-  component: Image,
-
-  title: 'Image'
-};
-
-const Template: ComponentStory<typeof Image> = (args) => (
-  <Image
-    {...args}
-    fallback={<LoadingSkeleton />}
-    imagePath={CentreonLogoLight}
-  />
-);
-
-const size = 50;
-
-export const basic = Template.bind({});
-basic.args = {
-  alt: 'Centreon logo light'
-};
-
-export const multipleImages = (): JSX.Element => {
-  return (
-    <div
-      style={{
-        columnGap: '16px',
-        display: 'grid',
-        gridTemplateColumns: `repeat(2, ${size}px)`
-      }}
-    >
-      <Image
-        alt="Centreon logo light"
-        fallback={<LoadingSkeleton height={size} width={size} />}
-        height={size}
-        imagePath={CentreonLogoLight}
-        width={size}
-      />
-      <Image
-        alt="Not authorized"
-        fallback={<LoadingSkeleton height={size} width={size} />}
-        height={size}
-        imagePath={NotAuthorized}
-        width={size}
-      />
-      <Image
-        alt="Centreon logo light"
-        fallback={<LoadingSkeleton height={size} width={size} />}
-        height={size}
-        imagePath={CentreonLogoLight}
-        width={size}
-      />
-      <Image
-        alt="Not authorized"
-        fallback={<LoadingSkeleton height={size} width={size} />}
-        height={size}
-        imagePath={NotAuthorized}
-        width={size}
-      />
-    </div>
-  );
-};
-
-export const withWidthAndHeight = Template.bind({});
-withWidthAndHeight.args = {
-  alt: 'Centreon logo light',
-  fallback: <LoadingSkeleton height={size} width={size} />,
-  height: size,
-  imagePath: CentreonLogoLight,
-  width: size
-};
-
-export const imageNotFound = (): JSX.Element => (
-  <Image
-    alt="Not found alt text"
-    fallback={<LoadingSkeleton height={size} width={size} />}
-    height={size}
-    imagePath="not-found"
-    width={size}
-  />
-);
-
-export const variantContain = Template.bind({});
-variantContain.args = {
-  alt: 'Centreon logo light',
-  height: size,
-  variant: ImageVariant.Contain,
-  width: size
-};
+import { ComponentStory } from '@storybook/react';
+
+import LoadingSkeleton from '../LoadingSkeleton';
+import CentreonLogoLight from '../../assets/centreon-logo-one-line-light.svg';
+import NotAuthorized from '../../assets/not-authorized-template-background-light.svg';
+
+import Image, { ImageVariant } from './Image';
+
+export default {
+  argTypes: {
+    alt: { control: 'text' },
+    height: { control: 'number' },
+    width: { control: 'number' }
+  },
+  component: Image,
+
+  title: 'Image'
+};
+
+const Template: ComponentStory<typeof Image> = (args) => (
+  <Image
+    {...args}
+    fallback={<LoadingSkeleton />}
+    imagePath={CentreonLogoLight}
+  />
+);
+
+const size = 50;
+
+export const basic = Template.bind({});
+basic.args = {
+  alt: 'Centreon logo light'
+};
+
+export const multipleImages = (): JSX.Element => {
+  return (
+    <div
+      style={{
+        columnGap: '16px',
+        display: 'grid',
+        gridTemplateColumns: `repeat(2, ${size}px)`
+      }}
+    >
+      <Image
+        alt="Centreon logo light"
+        fallback={<LoadingSkeleton height={size} width={size} />}
+        height={size}
+        imagePath={CentreonLogoLight}
+        width={size}
+      />
+      <Image
+        alt="Not authorized"
+        fallback={<LoadingSkeleton height={size} width={size} />}
+        height={size}
+        imagePath={NotAuthorized}
+        width={size}
+      />
+      <Image
+        alt="Centreon logo light"
+        fallback={<LoadingSkeleton height={size} width={size} />}
+        height={size}
+        imagePath={CentreonLogoLight}
+        width={size}
+      />
+      <Image
+        alt="Not authorized"
+        fallback={<LoadingSkeleton height={size} width={size} />}
+        height={size}
+        imagePath={NotAuthorized}
+        width={size}
+      />
+    </div>
+  );
+};
+
+export const withWidthAndHeight = Template.bind({});
+withWidthAndHeight.args = {
+  alt: 'Centreon logo light',
+  fallback: <LoadingSkeleton height={size} width={size} />,
+  height: size,
+  imagePath: CentreonLogoLight,
+  width: size
+};
+
+export const imageNotFound = (): JSX.Element => (
+  <Image
+    alt="Not found alt text"
+    fallback={<LoadingSkeleton height={size} width={size} />}
+    height={size}
+    imagePath="not-found"
+    width={size}
+  />
+);
+
+export const variantContain = Template.bind({});
+variantContain.args = {
+  alt: 'Centreon logo light',
+  height: size,
+  variant: ImageVariant.Contain,
+  width: size
+};

package/src/Image/index.test.tsx

@@ -1,12 +1,12 @@
 import { RenderResult, screen, waitFor } from '@testing-library/react';
 import { Provider } from 'jotai';
 
-import { render } from '../../test/testRenderer';
-import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
+import { render } from '../testRenderer';
+import CentreonLogoLight from '../../assets/centreon-logo-one-line-light.svg';
 
 import Image from './Image';
 
-jest.mock('../../@assets/centreon-logo-one-line-light.svg');
+jest.mock('../../assets/centreon-logo-one-line-light.svg');
 
 const renderImage = (): RenderResult =>
   render(

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),
-    top: theme.spacing(-1)
+    right: theme.spacing(0.5)
   },
   tooltip: {
     backgroundColor: theme.palette.common.white,
     boxShadow: theme.shadows[3],
     color: theme.palette.text.primary,
     fontSize: theme.typography.pxToRem(12),
-    maxWidth: 500
+    maxWidth: 500,
+    padding: theme.spacing(1, 2, 1, 1)
   }
 }));
 
@@ -59,7 +59,7 @@ const PersistentTooltip = ({
   };
 
   const title = (
-    <div style={{ position: 'relative' }}>
+    <>
       <IconButton
         className={classes.buttonClose}
         size="small"
@@ -68,15 +68,11 @@ const PersistentTooltip = ({
         <IconClose fontSize="small" />
       </IconButton>
       {children}
-    </div>
+    </>
   );
 
   return (
-    <Tooltip
-      classes={{ tooltip: classes.tooltip }}
-      open={openTooltip || open}
-      title={title}
-    >
+    <Tooltip classes={{ tooltip: classes.tooltip }} open={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, { TextProps } from '../Text';
+import TextField, { Props as TextFieldProps } from '../Text';
 
-type Props = Omit<TextProps, 'StartAdornment'>;
+type Props = Omit<TextFieldProps, 'StartAdornment'>;
 
 const SearchAdornment = (): JSX.Element => <IconSearch />;
 

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

@@ -6,18 +6,36 @@ import {
   RenderResult,
   resetMocks,
   waitFor
-} from '../../../../../../test/testRenderer';
+} from '../../../../../testRenderer';
+import { buildListingEndpoint } from '../../../../..';
 import TestQueryProvider from '../../../../../api/TestQueryProvider';
 
-import { baseEndpoint, getEndpoint, label, optionsData } from './utils';
-
 import MultiConnectedAutocompleteField from '.';
 
+const baseEndpoint = 'endpoint';
+
+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' }
+  ]
+};
+
 const renderMultiAutocompleteField = (): RenderResult =>
   render(
     <TestQueryProvider>
       <MultiConnectedAutocompleteField
-        baseEndpoint=""
         field="host.name"
         getEndpoint={getEndpoint}
         label={label}

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

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

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

@@ -10,30 +10,24 @@ import {
   pipe,
   not,
   has,
-  omit,
-  uniqBy
+  omit
 } from 'ramda';
 
 import { CircularProgress, useTheme } from '@mui/material';
 
 import { Props as AutocompleteFieldProps } from '..';
-import {
-  useDebounce,
-  useIntersectionObserver,
-  useDeepCompare
-} from '../../../../utils';
+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';
 
 export interface ConnectedAutoCompleteFieldProps<TData> {
-  allowUniqOption?: boolean;
-  baseEndpoint?: string;
-  changeIdValue: (item: TData) => number | string;
   conditionField?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
@@ -41,7 +35,6 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
   getRequestHeaders?: HeadersInit;
   initialPage: number;
   labelKey?: string;
-  queryKey?: string;
   searchConditions?: Array<ConditionsSearchParameter>;
 }
 
@@ -60,10 +53,6 @@ const ConnectedAutocompleteField = (
     getRenderedOptionText = (option): string => option.name?.toString(),
     getRequestHeaders,
     displayOptionThumbnail,
-    queryKey,
-    allowUniqOption,
-    baseEndpoint,
-    changeIdValue,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
     Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
@@ -74,9 +63,6 @@ const ConnectedAutocompleteField = (
     const [searchParameter, setSearchParameter] = useState<
       SearchParameter | undefined
     >(undefined);
-
-    const [autocompleteChangedValue, setAutocompleteChangedValue] =
-      useState<Array<SelectEntry>>();
     const debounce = useDebounce({
       functionToDebounce: (value): void => {
         setSearchParameter(getSearchParameter(value));
@@ -91,7 +77,6 @@ const ConnectedAutocompleteField = (
     const { fetchQuery, isFetching, prefetchNextPage } = useFetchQuery<
       ListingModel<TData>
     >({
-      baseEndpoint,
       fetchHeaders: getRequestHeaders,
       getEndpoint: (params) => {
         return getEndpoint({
@@ -99,16 +84,10 @@ const ConnectedAutocompleteField = (
           search: searchParameter
         });
       },
-      getQueryKey: () => [
-        `autocomplete-${queryKey || props.label}`,
-        page,
-        searchParameter
-      ],
+      getQueryKey: () => [`autocomplete-${props.label}`, page, searchParameter],
       isPaginated: true,
       queryOptions: {
-        cacheTime: 0,
         enabled: false,
-        staleTime: 0,
         suspense: false
       }
     });
@@ -240,24 +219,17 @@ 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 = formattedList.map((item) =>
+          const list = newOptions.result.map((item) =>
             renameKey({ key: labelKey, newKey: 'name', object: item })
           );
           setOptions(moreOptions.concat(list as Array<TData>));
 
           return;
         }
-        setOptions(moreOptions.concat(formattedList));
+        setOptions(moreOptions.concat(newOptions.result));
 
-        setOptions(moreOptions.concat(formattedList as Array<TData>));
+        setOptions(moreOptions.concat(newOptions.result as Array<TData>));
 
         const total = prop('total', newOptions.meta) || 1;
         const limit = prop('limit', newOptions.meta) || 1;
@@ -292,23 +264,13 @@ const ConnectedAutocompleteField = (
       }
     }, [optionsOpen]);
 
-    useEffect(
-      () => {
-        setSearchParameter(
-          !isEmpty(searchConditions)
-            ? { conditions: searchConditions }
-            : undefined
-        );
-      },
-      useDeepCompare([searchConditions])
-    );
-
     useEffect(() => {
-      if (!autocompleteChangedValue && !props?.value) {
-        return;
-      }
-      setSearchParameter(undefined);
-    }, [autocompleteChangedValue, props?.value]);
+      setSearchParameter(
+        !isEmpty(searchConditions)
+          ? { conditions: searchConditions }
+          : undefined
+      );
+    }, useDeepCompare([searchConditions]));
 
     useEffect(() => {
       if (!optionsOpen) {
@@ -323,11 +285,8 @@ const ConnectedAutocompleteField = (
         filterOptions={(opt): SelectEntry => opt}
         loading={isFetching}
         open={optionsOpen}
-        options={
-          allowUniqOption ? uniqBy(getRenderedOptionText, options) : options
-        }
+        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(item, 'id'), items),
+        (item) => find(propEq('id', item), 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,6 +1,7 @@
 import { useState } from 'react';
 
 import { isNil, not } from 'ramda';
+import withMock from 'storybook-addon-mock';
 
 import { Tooltip, Typography } from '@mui/material';
 
@@ -14,6 +15,7 @@ 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.tsx

@@ -1,7 +1,7 @@
-import { includes, map, prop, reject, sortBy, toLower, compose } from 'ramda';
+import { includes, map, prop, reject } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Chip, ChipProps, Tooltip } from '@mui/material';
+import { Chip } from '@mui/material';
 import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
 import Autocomplete, { Props as AutocompleteProps } from '..';
@@ -18,6 +18,7 @@ const useStyles = makeStyles()((theme) => ({
     width: theme.spacing(1.5)
   },
   tag: {
+    backgroundColor: theme.palette.divider,
     fontSize: theme.typography.caption.fontSize
   }
 }));
@@ -32,48 +33,30 @@ export interface Props
       UseAutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>,
       'multiple'
     > {
-  chipProps?: ChipProps;
   disableSortedOptions?: boolean;
-  getOptionTooltipLabel?: (option) => string;
-  getTagLabel?: (option) => string;
-  optionProperty?: string;
 }
 
 const MultiAutocompleteField = ({
   value,
   options,
   disableSortedOptions = false,
-  optionProperty = 'name',
-  getOptionLabel = (option): string => option.name,
-  getTagLabel = (option): string => option[optionProperty],
-  getOptionTooltipLabel,
-  chipProps,
   ...props
 }: Props): JSX.Element => {
   const { classes } = useStyles();
 
   const renderTags = (renderedValue, getTagProps): Array<JSX.Element> =>
-    renderedValue.map((option, index) => {
-      return (
-        <Tooltip
-          key={option.id}
-          placement="top"
-          title={getOptionTooltipLabel?.(option)}
-        >
-          <Chip
-            classes={{
-              deleteIcon: classes.deleteIcon,
-              root: classes.tag
-            }}
-            label={getTagLabel(option)}
-            size="medium"
-            {...getTagProps({ index })}
-            {...chipProps}
-            onDelete={(event) => chipProps?.onDelete?.(event, option)}
-          />
-        </Tooltip>
-      );
-    });
+    renderedValue.map((option, index) => (
+      <Chip
+        classes={{
+          deleteIcon: classes.deleteIcon,
+          root: classes.tag
+        }}
+        key={option.id}
+        label={option.name}
+        size="medium"
+        {...getTagProps({ index })}
+      />
+    ));
 
   const getLimitTagsText = (more): JSX.Element => <Option>{`+${more}`}</Option>;
 
@@ -85,11 +68,9 @@ const MultiAutocompleteField = ({
     return includes(id, valueIds);
   };
 
-  const sortByName = sortBy(compose(toLower, prop(optionProperty)));
-
   const autocompleteOptions = disableSortedOptions
     ? options
-    : sortByName([...values, ...reject(isOptionSelected, options)]);
+    : [...values, ...reject(isOptionSelected, options)];
 
   return (
     <Autocomplete
@@ -103,7 +84,7 @@ const MultiAutocompleteField = ({
           key={option.id}
           {...(renderProps as React.HTMLAttributes<HTMLLIElement>)}
         >
-          <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
+          <Option checkboxSelected={selected}>{option.name}</Option>
         </li>
       )}
       renderTags={renderTags}