@centreon/ui 23.10.96 → 23.10.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.96",
+  "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/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/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 {
@@ -83,28 +84,38 @@ 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)
   };
 };
 

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/models.ts

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