@centreon/ui 23.10.95 → 23.10.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.95",
+  "version": "23.10.97",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -107,7 +107,7 @@
     "@lexical/rich-text": "^0.11.3",
     "@lexical/selection": "0.11.3",
     "@lexical/utils": "0.11.3",
-    "@react-spring/web": "9.6.0",
+    "@react-spring/web": "^9.7.3",
     "@visx/curve": "^2.1.0",
     "@visx/group": "^3.3.0",
     "@visx/pattern": "^3.0.0",

package/src/Checkbox/Checkbox.tsx

@@ -2,12 +2,8 @@ import { makeStyles } from 'tss-react/mui';
 import { T, always, cond, equals } from 'ramda';
 
 import { SvgIconComponent } from '@mui/icons-material';
-import {
-  FormControlLabel,
-  Checkbox as MuiCheckbox,
-  Box,
-  Typography
-} from '@mui/material';
+import Typography, { TypographyTypeMap } from '@mui/material/Typography';
+import { FormControlLabel, Checkbox as MuiCheckbox, Box } from '@mui/material';
 
 export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
 
@@ -60,6 +56,7 @@ interface Props {
   disabled?: boolean;
   label: string;
   labelPlacement?: LabelPlacement;
+  labelProps?: TypographyTypeMap['props'];
   onChange?: (e) => void;
 }
 
@@ -71,7 +68,8 @@ const Checkbox = ({
   className,
   disabled = false,
   labelPlacement = 'end',
-  dataTestId
+  dataTestId,
+  labelProps
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({
     hasIcon: !!Icon,
@@ -96,7 +94,11 @@ const Checkbox = ({
         }
         data-testid={dataTestId || ''}
         key={label}
-        label={<Typography className={classes.label}>{label}</Typography>}
+        label={
+          <Typography classes={{ root: classes.label }} {...labelProps}>
+            {label}
+          </Typography>
+        }
         labelPlacement={labelPlacement}
         sx={{ margin: 0, padding: 0 }}
       />

package/src/Checkbox/CheckboxGroup/index.tsx

@@ -1,15 +1,19 @@
 import { equals, includes } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { FormGroup } from '@mui/material';
+import FormGroup, { FormGroupProps } from '@mui/material/FormGroup';
+import { TypographyTypeMap } from '@mui/material/Typography';
 
 import Checkbox, { LabelPlacement } from '../Checkbox';
 
 interface Props {
+  className?: string;
   dataTestId?: string;
   direction?: 'horizontal' | 'vertical';
   disabled?: boolean;
+  formGroupProps?: FormGroupProps;
   labelPlacement?: LabelPlacement;
+  labelProps?: TypographyTypeMap['props'];
   onChange?: (e) => void;
   options: Array<string>;
   values: Array<string>;
@@ -34,27 +38,32 @@ const CheckboxGroup = ({
   onChange,
   labelPlacement = 'end',
   disabled = false,
-  dataTestId
+  dataTestId,
+  className,
+  labelProps,
+  formGroupProps
 }: Props): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   const row = !equals(direction, 'vertical');
 
   return (
     <FormGroup
-      className={classes.container}
+      classes={{ root: classes.container }}
       data-testid={dataTestId || ''}
       row={row}
+      {...formGroupProps}
     >
       {options.map((value) => {
         return (
           <Checkbox
             checked={includes(value, values)}
-            className={classes.checkbox}
+            className={cx(classes.checkbox, className)}
             disabled={disabled}
             key={value}
             label={value}
             labelPlacement={labelPlacement}
+            labelProps={labelProps}
             onChange={onChange}
           />
         );

package/src/Dashboard/Dashboard.styles.ts

@@ -92,7 +92,13 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       '&[data-canMove="true"]': {
         cursor: 'move'
       },
-      padding: theme.spacing(0.5, 2)
+      padding: theme.spacing(0.5, 2),
+      position: 'relative'
+    },
+    widgetHeaderDraggable: {
+      height: '100%',
+      position: 'absolute',
+      width: '100%'
     },
     widgetPadding: {
       overflowX: 'auto',

package/src/Dashboard/Item.tsx

@@ -72,12 +72,12 @@ const Item = forwardRef(
             data-padding={!disablePadding}
           >
             {header && (
-              <div
-                {...listeners}
-                className={classes.widgetHeader}
-                data-canMove={canMove}
-                data-testid={`${id}_move_panel`}
-              >
+              <div className={classes.widgetHeader} data-canMove={canMove}>
+                <div
+                  {...listeners}
+                  className={classes.widgetHeaderDraggable}
+                  data-testid={`${id}_move_panel`}
+                />
                 {header}
               </div>
             )}

package/src/InputField/Search/PersistentTooltip.tsx

@@ -10,16 +10,15 @@ import IconClose from '@mui/icons-material/HighlightOff';
 const useStyles = makeStyles()((theme) => ({
   buttonClose: {
     position: 'absolute',
-    right: theme.spacing(0.5),
-    top: '40%'
+    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
   }
 }));
 
@@ -60,7 +59,7 @@ const PersistentTooltip = ({
   };
 
   const title = (
-    <>
+    <div style={{ position: 'relative' }}>
       <IconButton
         className={classes.buttonClose}
         size="small"
@@ -69,7 +68,7 @@ const PersistentTooltip = ({
         <IconClose fontSize="small" />
       </IconButton>
       {children}
-    </>
+    </div>
   );
 
   return (

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

@@ -82,34 +82,6 @@ describe('Multi connected autocomplete', () => {
     cy.makeSnapshot('hides the list when the user clicks on the input');
   });
 
-  it('displays exactly one option on the list when the user types that 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((optionData) => {
-      cy.get('@listOptions')
-        .find('li')
-        .should('have.length', optionData.result.length);
-    });
-
-    cy.get('@listOptions').within(() => {
-      cy.contains(optionOne).should('be.visible');
-    });
-
-    cy.makeSnapshot();
-  });
-
   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');
 
@@ -125,13 +97,11 @@ describe('Multi connected autocomplete', () => {
 
     cy.waitForRequest('@getSearchedOption');
 
-    cy.fixture('inputField/searchedOption').then((optionData) => {
-      cy.get('@listOptions')
-        .find('li')
-        .should('have.length', optionData.result.length);
+    cy.fixture('inputField/searchedOption').then(() => {
+      cy.get('@listOptions').find('li').should('have.length', 5);
     });
 
-    cy.get('[type="checkbox"]').check();
+    cy.get('[type="checkbox"]').eq(0).check();
     cy.get('@input')
       .parent()
       .within(() => {
@@ -153,7 +123,5 @@ describe('Multi connected autocomplete', () => {
         });
       });
     });
-
-    cy.makeSnapshot();
   });
 });

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

@@ -95,9 +95,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 +116,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/Multi/index.tsx

@@ -53,24 +53,27 @@ const MultiAutocompleteField = ({
   const { classes } = useStyles();
 
   const renderTags = (renderedValue, getTagProps): Array<JSX.Element> =>
-    renderedValue.map((option, index) => (
-      <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}
-        />
-      </Tooltip>
-    ));
+    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>
+      );
+    });
 
   const getLimitTagsText = (more): JSX.Element => <Option>{`+${more}`}</Option>;
 

package/src/PopoverMenu/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
@@ -9,6 +9,7 @@ import {
   PopperPlacementType,
   useTheme
 } from '@mui/material';
+import { PopperProps } from '@mui/material/Popper';
 
 import { IconButton } from '..';
 
@@ -19,15 +20,22 @@ const useStyles = makeStyles()(() => ({
   }
 }));
 
+interface PopoverData {
+  anchorEl: HTMLElement | undefined;
+  setAnchorEl: Dispatch<SetStateAction<HTMLElement | undefined>>;
+}
+
 interface Props {
   canOpen?: boolean;
   children: (props?) => JSX.Element;
   className?: string;
   dataTestId?: string;
+  getPopoverData?: (data: PopoverData) => void;
   icon: JSX.Element;
   onClose?: () => void;
   onOpen?: () => void;
   popperPlacement?: PopperPlacementType;
+  popperProps?: Partial<PopperProps>;
   title?: string;
 }
 
@@ -40,20 +48,21 @@ const PopoverMenu = ({
   onClose,
   canOpen = true,
   className,
-  dataTestId
+  dataTestId,
+  getPopoverData,
+  popperProps
 }: Props): JSX.Element => {
   const theme = useTheme();
   const { classes, cx } = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>();
-
   const isOpen = Boolean(anchorEl);
 
   const close = (reason?): void => {
     const isClosedByInputClick = reason?.type === 'mousedown';
-
     if (isClosedByInputClick) {
       return;
     }
+
     onClose?.();
     setAnchorEl(undefined);
   };
@@ -75,6 +84,10 @@ const PopoverMenu = ({
     }
   }, [canOpen]);
 
+  useEffect(() => {
+    getPopoverData?.({ anchorEl, setAnchorEl });
+  }, [anchorEl]);
+
   return (
     <>
       <IconButton
@@ -97,6 +110,7 @@ const PopoverMenu = ({
             style={{ zIndex: theme.zIndex.tooltip }}
             onResize={(): undefined => undefined}
             onResizeCapture={(): undefined => undefined}
+            {...popperProps}
           >
             <Paper>{children({ close })}</Paper>
           </Popper>

package/src/RichTextEditor/RichTextEditor.tsx

@@ -38,6 +38,7 @@ export interface RichTextEditorProps {
   openLinkInNewTab?: boolean;
   placeholder?: string;
   resetEditorToInitialStateCondition?: () => boolean;
+  toolbarClassName?: string;
   toolbarPositions?: 'start' | 'end';
 }
 
@@ -136,7 +137,8 @@ const RichTextEditor = ({
   disabled = false,
   openLinkInNewTab = true,
   initialize,
-  displayBlockButtons = true
+  displayBlockButtons = true,
+  toolbarClassName
 }: RichTextEditorProps): JSX.Element => {
   const { classes } = useStyles({ toolbarPositions });
 
@@ -175,6 +177,7 @@ const RichTextEditor = ({
       <div className={classes.container}>
         <div className={classes.toolbar}>
           <ToolbarPlugin
+            className={toolbarClassName}
             disabled={disabled}
             displayBlockButtons={displayBlockButtons}
             displayMacrosButton={displayMacrosButton}

package/src/RichTextEditor/plugins/ToolbarPlugin/index.tsx

@@ -9,6 +9,7 @@ import BlockButtons from './BlockButtons';
 import AlignPicker from './AlignPicker';
 
 interface Props {
+  className?: string;
   disabled: boolean;
   displayBlockButtons: boolean;
   displayMacrosButton?: boolean;
@@ -36,12 +37,13 @@ const ToolbarPlugin = ({
   editable,
   displayMacrosButton,
   disabled,
-  displayBlockButtons
+  displayBlockButtons,
+  className
 }: Props): JSX.Element | null => {
-  const { classes } = useStyles();
+  const { cx, classes } = useStyles();
 
   return editable ? (
-    <div className={classes.container}>
+    <div className={cx(classes.container, className)}>
       <UndoRedoButtons disabled={disabled} />
       {displayBlockButtons && (
         <>
@@ -51,13 +53,13 @@ const ToolbarPlugin = ({
       )}
       <Divider flexItem orientation="vertical" />
       <FormatButtons disabled={disabled} />
+      <AlignPicker disabled={disabled} />
       {displayMacrosButton && (
         <>
           <Divider flexItem orientation="vertical" />
           <MacrosButton disabled={disabled} />
         </>
       )}
-      <AlignPicker disabled={disabled} />
     </div>
   ) : null;
 };

package/src/Wizard/index.tsx

@@ -29,6 +29,7 @@ const actionsBarLabelsDefaultValues = {
 };
 
 const Wizard = ({
+  classNameDialogContent,
   steps,
   onSubmit = undefined,
   initialValues = {},
@@ -41,7 +42,7 @@ const Wizard = ({
   displayConfirmDialog,
   ...rest
 }: WizardProps): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
   const [currentStep, setCurrentStep] = useState(0);
   const [sendingRequest, setSendingRequest] = useState(false);
   const [openConfirm, setOpenConfirm] = useState(false);
@@ -131,7 +132,9 @@ const Wizard = ({
           validationSchema={validationSchema}
           onSubmit={submit}
         >
-          <DialogContent className={classes.dialogContent}>
+          <DialogContent
+            className={cx(classes.dialogContent, classNameDialogContent)}
+          >
             <WizardContent
               actionsBarLabels={actionsBarLabels}
               currentStep={currentStep}

package/src/Wizard/models.ts

@@ -45,6 +45,7 @@ type ValueOf<T> = T[keyof T];
 export interface WizardProps {
   [key: string]: ValueOf<DialogProps>;
   actionsBarLabels?: ActionsBarLabels;
+  classNameDialogContent?: string;
   confirmDialogLabels?: ConfirmDialogLabels;
   displayConfirmDialog?: boolean;
   fullHeight?: boolean;

package/src/api/buildListingEndpoint/getSearchQueryParameterValue.ts

@@ -5,9 +5,10 @@ import {
   prop,
   head,
   toPairs,
-  pipe,
-  map,
-  flatten
+  flatten,
+  pluck,
+  uniq,
+  equals
 } from 'ramda';
 
 import {
@@ -21,7 +22,7 @@ import {
   GetConditionsSearchQueryParameterValueState
 } from './models';
 
-const getFoundFields = ({
+export const getFoundFields = ({
   value,
   fields
 }: RegexSearchParameter): Array<SearchMatch> => {
@@ -83,32 +84,42 @@ const getConditionsSearchQueryParameterValue = (
     return undefined;
   }
 
-  const toIndividualOperatorValues = ({
-    field,
-    values,
-    value
-  }: ConditionsSearchParameter): Array<Record<string, unknown>> => {
-    if (!isNil(value)) {
-      return [
-        {
-          [field]: value
-        }
-      ];
-    }
-
-    return toPairs(values || {}).map(([operator, operatorValue]) => ({
-      [field]: {
-        [operator]: operatorValue
-      }
-    }));
+  const fields = uniq(pluck('field', conditions));
+
+  const toIndividualOperatorValues = (
+    listField: string
+  ): { $or: Array<Record<string, unknown>> } => {
+    const filteredItems = conditions.filter(({ field }) =>
+      equals(listField, field)
+    );
+
+    return {
+      $or: flatten(
+        filteredItems.map(({ value, values }) => {
+          if (!isNil(value)) {
+            return [
+              {
+                [listField]: value
+              }
+            ];
+          }
+
+          return toPairs(values || {}).map(([operator, operatorValue]) => ({
+            [listField]: {
+              [operator]: operatorValue
+            }
+          }));
+        })
+      )
+    };
   };
 
   return {
-    $and: pipe(map(toIndividualOperatorValues), flatten)(conditions)
+    $and: fields.map(toIndividualOperatorValues)
   };
 };
 
-const getSearchQueryParameterValue = (
+export const getSearchQueryParameterValue = (
   search: SearchParameter | undefined
 ): SearchQueryParameterValue => {
   if (search === undefined) {
@@ -134,5 +145,3 @@ const getSearchQueryParameterValue = (
 
   return { $and: result };
 };
-
-export default getSearchQueryParameterValue;

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

@@ -115,7 +115,7 @@ describe(buildListingEndpoint, () => {
     });
 
     expect(decodeURIComponent(endpointWithValues)).toContain(
-      '&search={"$and":[{"date":{"$gt":"2020-12-01T07:00:00"}},{"date":{"$lt":"2020-12-01T11:00:00"}}]}'
+      '&search={"$and":[{"$or":[{"date":{"$gt":"2020-12-01T07:00:00"}},{"date":{"$lt":"2020-12-01T11:00:00"}}]}]}'
     );
 
     const endpointWithValue = buildListingEndpoint({
@@ -134,7 +134,7 @@ describe(buildListingEndpoint, () => {
     });
 
     expect(decodeURIComponent(endpointWithValue)).toContain(
-      '&search={"$and":[{"is_activated":true}]}'
+      '&search={"$and":[{"$or":[{"is_activated":true}]}]}'
     );
   });
 });

package/src/api/buildListingEndpoint/index.ts

@@ -1,7 +1,7 @@
 import toRawQueryParameters from '../../queryParameters';
 import { QueryParameter } from '../../queryParameters/models';
 
-import getSearchQueryParameterValue from './getSearchQueryParameterValue';
+import { getSearchQueryParameterValue } from './getSearchQueryParameterValue';
 import { Parameters, BuildListingEndpointParameters } from './models';
 
 const getQueryParameters = ({

package/src/api/buildListingEndpoint/models.ts

@@ -18,7 +18,6 @@ export interface Parameters {
   search?: SearchParameter;
   sort?: SortQueryParameterValue;
 }
-
 export interface SearchParameter {
   conditions?: Array<ConditionsSearchParameter>;
   lists?: Array<ListsSearchParameter>;

package/src/index.ts

@@ -75,7 +75,10 @@ export { default as useCancelTokenSource } from './api/useCancelTokenSource';
 export { getData, patchData, postData, putData, deleteData } from './api';
 export { default as useRequest } from './api/useRequest';
 export { default as buildListingEndpoint } from './api/buildListingEndpoint';
-export { default as getSearchQueryParameterValue } from './api/buildListingEndpoint/getSearchQueryParameterValue';
+export {
+  getSearchQueryParameterValue,
+  getFoundFields
+} from './api/buildListingEndpoint/getSearchQueryParameterValue';
 export type {
   Parameters as ListingParameters,
   BuildListingEndpointParameters,

package/src/utils/useDebounce.ts

@@ -1,4 +1,4 @@
-import { useRef, useCallback } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 
 interface Props {
   functionToDebounce: (...args) => void;
@@ -12,6 +12,11 @@ export const useDebounce = ({
   memoProps = []
 }: Props): ((...args) => void) => {
   const timeoutRef = useRef<number | null>(null);
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = functionToDebounce;
+  }, [functionToDebounce]);
 
   return useCallback((...args): void => {
     if (timeoutRef.current) {
@@ -19,7 +24,7 @@ export const useDebounce = ({
     }
 
     timeoutRef.current = setTimeout(() => {
-      functionToDebounce(...args);
+      ref.current?.(...args);
     }, wait);
   }, memoProps);
 };