@centreon/ui 25.3.2 → 25.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.3.2",
+  "version": "25.3.4",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -16,7 +16,10 @@
     "cypress:run:updateSnapshots": "cypress run --component --browser=chrome --env updateSnapshots=true",
     "cypress:run:coverage": "cypress run --component --browser=chrome --env codeCoverageTasksRegistered=true",
     "cypress:run": "cypress run --component --browser=chrome",
-    "tokens:transform": "TS_NODE_PROJECT=tsconfig.node.json ts-node style-dictionary.transform.ts"
+    "cypress:install": "cypress install",
+    "cypress:cli": "./cypress/scripts/cypress-cli.sh",
+    "tokens:transform": "TS_NODE_PROJECT=tsconfig.node.json ts-node style-dictionary.transform.ts",
+    "install:arm:binaries": "pnpm i -D @swc/core-linux-arm64-gnu@1.6.6 @rspack/binding-linux-arm64-gnu@1.1.6 -w && pnpm remove @swc/core-linux-arm64-gnu @rspack/binding-linux-arm64-gnu"
   },
   "type": "module",
   "sideEffects": false,
@@ -50,71 +53,71 @@
     "test/*"
   ],
   "devDependencies": {
-    "@cypress/react": "^8.0.2",
-    "@cypress/webpack-dev-server": "^3.11.0",
-    "@faker-js/faker": "^9.3.0",
+    "@cypress/react": "^9.0.0",
+    "@cypress/webpack-dev-server": "^4.0.1",
+    "@faker-js/faker": "^9.5.1",
     "@mdx-js/react": "^3.1.0",
     "@simonsmith/cypress-image-snapshot": "^9.1.0",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-docs": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-themes": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/manager-api": "^8.4.7",
+    "@storybook/addon-a11y": "^8.6.3",
+    "@storybook/addon-docs": "^8.6.3",
+    "@storybook/addon-essentials": "^8.6.3",
+    "@storybook/addon-interactions": "^8.6.3",
+    "@storybook/addon-themes": "^8.6.3",
+    "@storybook/blocks": "^8.6.3",
+    "@storybook/manager-api": "^8.6.3",
     "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/preview-api": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@storybook/test-runner": "^0.20.1",
-    "@storybook/theming": "^8.4.7",
-    "@testing-library/cypress": "^10.0.2",
+    "@storybook/preview-api": "^8.6.3",
+    "@storybook/react": "^8.6.3",
+    "@storybook/react-vite": "^8.6.3",
+    "@storybook/test": "^8.6.3",
+    "@storybook/test-runner": "^0.22.0",
+    "@storybook/theming": "^8.6.3",
+    "@testing-library/cypress": "^10.0.3",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
+    "@testing-library/react": "^16.2.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.14",
     "@types/mocha": "^10.0.10",
     "@types/ramda": "^0.30.2",
-    "@types/react": "^18.3.3",
+    "@types/react": "^19.0.10",
     "@types/testing-library__jest-dom": "^6.0.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitejs/plugin-react-swc": "^3.7.2",
-    "chai": "^5.1.2",
-    "cypress": "^13.16.1",
+    "@vitejs/plugin-react-swc": "^3.8.0",
+    "chai": "^5.2.0",
+    "cypress": "^14.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",
-    "msw": "2.6.8",
+    "msw": "2.7.3",
     "msw-storybook-addon": "^2.0.4",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-test-renderer": "^19.0.0",
-    "remark-gfm": "^4.0.0",
+    "remark-gfm": "^4.0.1",
     "speed-measure-vite-plugin": "^1.1.0",
-    "storybook": "^8.4.7",
+    "storybook": "^8.6.3",
     "storybook-addon-mock": "^5.0.0",
     "storybook-dark-mode": "^4.0.2",
-    "style-dictionary": "^4.3.0",
+    "style-dictionary": "^4.3.3",
     "ts-node": "^10.9.2",
     "use-resize-observer": "^9.1.0",
-    "vite": "^6.0.3",
-    "vite-plugin-istanbul": "^6.0.2",
+    "vite": "^6.2.0",
+    "vite-plugin-istanbul": "^7.0.0",
     "vite-plugin-svgr": "^4.3.0",
     "vite-plugin-turbosnap": "^1.0.3"
   },
   "peerDependencies": {
-    "@centreon/ui-context": "file:../ui-context"
+    "@centreon/ui-context": "link:../ui-context"
   },
   "dependencies": {
-    "@lexical/html": "^0.21.0",
-    "@lexical/link": "^0.21.0",
-    "@lexical/list": "^0.21.0",
-    "@lexical/react": "^0.21.0",
-    "@lexical/rich-text": "^0.21.0",
-    "@lexical/selection": "^0.21.0",
-    "@lexical/utils": "^0.21.0",
-    "@mui/material": "^6.2.0",
+    "@lexical/html": "^0.27.0",
+    "@lexical/link": "^0.27.0",
+    "@lexical/list": "^0.27.0",
+    "@lexical/react": "^0.27.0",
+    "@lexical/rich-text": "^0.27.0",
+    "@lexical/selection": "^0.27.0",
+    "@lexical/utils": "^0.27.0",
+    "@mui/material": "^6.4.6",
     "@react-spring/web": "^9.7.5",
     "@visx/clip-path": "^3.12.0",
     "@visx/curve": "^3.12.0",
@@ -133,18 +136,18 @@
     "anylogger": "^1.0.11",
     "d3-array": "3.2.4",
     "dayjs": "^1.11.13",
-    "highlight.js": "^11.10.0",
-    "html-react-parser": "^5.2.0",
+    "highlight.js": "^11.11.1",
+    "html-react-parser": "^5.2.2",
     "humanize-duration": "^3.32.1",
-    "lexical": "^0.21.0",
-    "notistack": "^3.0.1",
+    "lexical": "^0.27.0",
+    "notistack": "^3.0.2",
     "numeral": "^2.0.6",
     "ramda": "0.30.1",
     "react-grid-layout": "^1.5.0",
     "react-resizable": "^3.0.5",
     "react-router": "7",
     "react-transition-group": "^4.4.5",
-    "sanitize-html": "^2.13.1",
+    "sanitize-html": "^2.14.0",
     "ulog": "^2.0.0-beta.19"
   },
   "jest-junit": {

package/public/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.6.8'
+const PACKAGE_VERSION = '2.7.3'
 const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

package/src/ActionsList/index.tsx

@@ -59,6 +59,7 @@ const ActionsList = ({
         return (
           <MenuItem
             aria-label={label}
+            data-testid={label}
             className={classes.item}
             data-variant={variant}
             id={label}

package/src/Button/Icon/index.tsx

@@ -19,6 +19,7 @@ const useStyles = makeStyles()((theme) => ({
 
 type Props = {
   ariaLabel?: string;
+  dataTestid?: string;
   className?: string;
   onClick: (event) => void;
   title?: string | JSX.Element;
@@ -42,6 +43,7 @@ export const IconButton = ({
   title = '',
   ariaLabel,
   className,
+  dataTestid,
   tooltipPlacement,
   tooltipClassName,
   ...props
@@ -59,7 +61,7 @@ export const IconButton = ({
           aria-label={ariaLabel}
           className={cx(classes.button, className)}
           color="primary"
-          data-testid={ariaLabel}
+          data-testid={dataTestid || ariaLabel}
           id={getNormalizedId(ariaLabel || '')}
           {...props}
         />

package/src/Button/Save/index.tsx

@@ -1,13 +1,11 @@
-import { any, isEmpty, isNil, not, or, pipe } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { LoadingButton, LoadingButtonProps } from '@mui/lab';
 import { Theme, Tooltip } from '@mui/material';
 
 import { getNormalizedId } from '../../utils';
 
-import Content from './Content';
-import StartIcon from './StartIcon';
+import { Button, ButtonProps } from '../../components';
+import { useSave } from './useSave';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   loadingButton: {
@@ -15,7 +13,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   }
 }));
 
-interface Props {
+export interface Props {
   className?: string;
   labelLoading?: string;
   labelSave?: string;
@@ -28,15 +26,6 @@ interface Props {
   tooltipLabel?: string;
 }
 
-interface StartIconConfigProps {
-  hasLabel: boolean;
-  loading: boolean;
-  succeeded: boolean;
-}
-
-const isNilOrEmpty = (value): boolean => or(isNil(value), isEmpty(value));
-const hasValue = any(pipe(isNilOrEmpty, not));
-
 const SaveButton = ({
   succeeded = false,
   loading = false,
@@ -48,20 +37,22 @@ const SaveButton = ({
   className,
   startIcon = true,
   ...rest
-}: Props & LoadingButtonProps): JSX.Element => {
+}: Props & Omit<ButtonProps, 'children'>): JSX.Element => {
   const { classes, cx } = useStyles();
-  const hasLabel = hasValue([labelLoading, labelSave, labelSucceeded]);
 
-  const startIconConfig = {
-    hasLabel,
+  const { content, startIconToDisplay, hasLabel } = useSave({
+    labelLoading,
+    labelSave,
+    labelSucceeded,
     loading,
-    succeeded
-  } as StartIconConfigProps;
+    succeeded,
+    startIcon
+  });
 
   return (
     <Tooltip placement="bottom" title={tooltipLabel}>
       <div>
-        <LoadingButton
+        <Button
           aria-label="save button"
           className={cx(
             {
@@ -69,26 +60,17 @@ const SaveButton = ({
             },
             className
           )}
-          color="primary"
           data-testid={labelSave}
           id={getNormalizedId(labelSave)}
           loading={loading}
-          loadingPosition={labelLoading ? 'start' : 'center'}
+          loadingPosition={labelLoading ? 'start' : undefined}
           size={size}
-          startIcon={
-            startIcon && <StartIcon startIconConfig={startIconConfig} />
-          }
-          variant="contained"
+          startIcon={startIconToDisplay}
+          variant="primary"
           {...rest}
         >
-          {Content({
-            labelLoading,
-            labelSave,
-            labelSucceeded,
-            loading,
-            succeeded
-          })}
-        </LoadingButton>
+          {content}
+        </Button>
       </div>
     </Tooltip>
   );

package/src/Button/Save/useSave.tsx

@@ -0,0 +1,89 @@
+import CheckIcon from '@mui/icons-material/Check';
+import SaveIcon from '@mui/icons-material/Save';
+import {
+  T,
+  always,
+  any,
+  cond,
+  isEmpty,
+  isNil,
+  not,
+  or,
+  pipe,
+  propEq
+} from 'ramda';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Props } from '.';
+
+interface StartIconConfigProps {
+  hasLabel: boolean;
+  loading: boolean;
+  succeeded: boolean;
+  enabled: boolean;
+}
+
+const isNilOrEmpty = (value): boolean => or(isNil(value), isEmpty(value));
+const hasValue = any(pipe(isNilOrEmpty, not));
+
+interface UseSaveState {
+  content: string | JSX.Element;
+  startIconToDisplay: null | JSX.Element;
+  hasLabel: boolean;
+}
+
+export const useSave = ({
+  labelLoading,
+  labelSave,
+  labelSucceeded,
+  loading,
+  succeeded,
+  startIcon
+}: Pick<
+  Props,
+  | 'startIcon'
+  | 'succeeded'
+  | 'loading'
+  | 'labelSave'
+  | 'labelSucceeded'
+  | 'labelLoading'
+>): UseSaveState => {
+  const { t } = useTranslation();
+
+  const hasLabel = hasValue([labelLoading, labelSave, labelSucceeded]);
+
+  const startIconConfig = {
+    hasLabel,
+    loading,
+    succeeded,
+    enabled: startIcon
+  } as StartIconConfigProps;
+
+  const content = useMemo(() => {
+    if (loading) {
+      return t(labelLoading || 'loading');
+    }
+
+    if (succeeded) {
+      return labelSucceeded ? t(labelSucceeded) : <CheckIcon />;
+    }
+
+    return labelSave ? t(labelSave) : <SaveIcon />;
+  }, [labelLoading, labelSucceeded, labelSave, loading, succeeded]);
+
+  const startIconToDisplay = useMemo(() => {
+    return cond<Array<StartIconConfigProps>, JSX.Element | null>([
+      [propEq(true, 'enabled'), always(null)],
+      [pipe(propEq(true, 'hasLabel'), not), always(null)],
+      [propEq(true, 'succeeded'), always(<CheckIcon />)],
+      [propEq(true, 'loading'), always(<SaveIcon />)],
+      [T, always(<SaveIcon />)]
+    ])(startIconConfig);
+  }, [startIconConfig]);
+
+  return {
+    content,
+    startIconToDisplay,
+    hasLabel
+  };
+};

package/src/Form/Inputs/LoadingSkeleton.tsx

@@ -1,6 +1,6 @@
 import { always, cond, equals } from 'ramda';
 
-import { LoadingSkeleton } from '../..';
+import LoadingSkeleton from '../../LoadingSkeleton';
 
 import { InputProps, InputType } from './models';
 

package/src/Form/Inputs/Radio.tsx

@@ -80,11 +80,13 @@ const Radio = ({
                   data-testid={`${dataTestId} ${optionLabel}`}
                   disabled={disabled}
                   id={getNormalizedId(`${dataTestId}${optionLabel}`)}
-                  inputProps={{
-                    'aria-label':
-                      (equals(type(optionLabel), 'String') &&
-                        t(optionLabel as string)) ||
-                      ''
+                  slotProps={{
+                    input: {
+                      'aria-label':
+                        (equals(type(optionLabel), 'String') &&
+                          t(optionLabel as string)) ||
+                        ''
+                    }
                   }}
                 />
               }

package/src/Form/Inputs/Switch.tsx

@@ -58,8 +58,10 @@ const Switch = ({
             data-testid={dataTestId}
             disabled={disabled}
             id={getNormalizedId(dataTestId || '')}
-            inputProps={{
-              'aria-label': t(label) || ''
+            slotProps={{
+              input: {
+                'aria-label': t(label) || ''
+              }
             }}
             onChange={changeSwitchValue}
           />

package/src/Graph/Chart/Chart.cypress.spec.tsx

@@ -758,8 +758,8 @@ describe('Lines and bars', () => {
     cy.get('path[data-metric="3"]').should('be.visible');
 
     cy.contains('some text').should('be.visible');
-    cy.findByTestId('pink-3').should('be.visible');
-    cy.findByTestId('red-0.15').should('be.visible');
+    cy.findByTestId('pink-3').should('exist');
+    cy.findByTestId('red-0.15').should('exist');
 
     cy.makeSnapshot();
   });

package/src/Graph/Chart/InteractiveComponents/Annotations/Annotation/index.tsx

@@ -43,7 +43,7 @@ const Annotation = ({
 
   const setAnnotationHovered = useSetAtom(annotationHoveredAtom);
 
-  const content = `${truncate(event.content)} (${t(labelBy)} ${
+  const content = `${truncate({ content: event.content })} (${t(labelBy)} ${
     event.contact?.name
   })`;
 

package/src/Graph/Chart/helpers/index.ts

@@ -38,9 +38,10 @@ export const getXAxisTickFormat = (graphInterval: GraphInterval): string => {
   return gte(numberDays, 2) ? dateFormat : timeFormat;
 };
 
-export const truncate = (content?: string): string => {
-  const maxLength = 180;
-
+export const truncate = ({
+  content,
+  maxLength = 180
+}: { content?: string; maxLength?: number }): string => {
   if (isNil(content)) {
     return '';
   }

package/src/Graph/SingleBar/ThresholdLine.tsx

@@ -63,7 +63,7 @@ export const ThresholdLine = ({
         strokeDasharray="6, 6"
         strokeWidth={2}
         x1={scaledValue}
-        x2={scaledValue}
+        x2={scaledValue + 1}
         y1={
           isSmall
             ? groupMargin - lineMargin + 6
@@ -80,7 +80,7 @@ export const ThresholdLine = ({
         stroke="transparent"
         strokeWidth={5}
         x1={scaledValue}
-        x2={scaledValue}
+        x2={scaledValue + 1}
         y1={
           isSmall
             ? groupMargin - lineMargin + 5

package/src/Graph/common/Thresholds/ThresholdLine.tsx

@@ -45,11 +45,11 @@ export const ThresholdLine = ({
         x1: 0,
         x2: width,
         y1: scaledValue,
-        y2: scaledValue
+        y2: scaledValue + 1
       }
     : {
         x1: scaledValue,
-        x2: scaledValue,
+        x2: scaledValue + 1,
         y1: 0,
         y2: width
       };

package/src/InputField/Select/index.tsx

@@ -97,15 +97,17 @@ const SelectField = ({
       <Select
         displayEmpty
         fullWidth={fullWidth}
-        inputProps={{
-          'aria-label': ariaLabel,
-          className: cx(classes.input, {
-            [classes.noLabelInput]: !label && !compact,
-            [classes.compact]: compact
-          }),
-          'data-testid': dataTestId,
-          id: getNormalizedId(dataTestId || ''),
-          ...inputProps
+        slotProps={{
+          input: {
+            'aria-label': ariaLabel,
+            className: cx(classes.input, {
+              [classes.noLabelInput]: !label && !compact,
+              [classes.compact]: compact
+            }),
+            'data-testid': dataTestId,
+            id: getNormalizedId(dataTestId || ''),
+            ...inputProps
+          }
         }}
         label={label}
         renderValue={(id): string => {

package/src/Listing/Cell/index.tsx

@@ -25,6 +25,18 @@ interface GetBackgroundColorProps extends Omit<Props, 'isRowHighlighted'> {
   theme: Theme;
 }
 
+interface StylesProps extends Props {
+  isRowHighlighted?: boolean;
+  listingVariant?: ListingVariant;
+}
+
+interface GetRowHighlightStyleProps {
+  isRowHighlighted?: boolean;
+  theme: Theme;
+  disableRowCondition;
+  row;
+}
+
 const getBackgroundColor = ({
   isRowHovered,
   row,
@@ -51,25 +63,20 @@ const getBackgroundColor = ({
   return 'unset';
 };
 
-interface StylesProps extends Props {
-  isRowHighlighted?: boolean;
-  listingVariant?: ListingVariant;
-}
-
-interface GetRowHighlightStyleProps {
-  isRowHighlighted?: boolean;
-  theme: Theme;
-}
-
-const getRowHighlightStyle = ({
+const getRowTextColor = ({
   isRowHighlighted,
-  theme
-}: GetRowHighlightStyleProps): CSSObject | undefined =>
-  isRowHighlighted
-    ? {
-        color: theme.palette.text.primary
-      }
-    : undefined;
+  theme,
+  disableRowCondition,
+  row
+}: GetRowHighlightStyleProps): CSSObject | undefined => {
+  if (isRowHighlighted) {
+    return { color: theme.palette.text.primary };
+  }
+
+  if (disableRowCondition(row)) {
+    return { color: alpha(theme.palette.text.secondary, 0.5) };
+  }
+};
 
 const useStyles = makeStyles<StylesProps>()(
   (
@@ -112,7 +119,7 @@ const useStyles = makeStyles<StylesProps>()(
       height: '100%',
       overflow: 'hidden',
       ...getTextStyleByViewMode({ listingVariant, theme }),
-      p: getRowHighlightStyle({ isRowHighlighted, theme }),
+      p: getRowTextColor({ isRowHighlighted, disableRowCondition, row, theme }),
       padding: theme.spacing(0, 1),
       whiteSpace: 'nowrap'
     }

package/src/Listing/Listing.cypress.spec.tsx

@@ -237,35 +237,33 @@ describe('Listing', () => {
     it('selects displayed rows when a row is selected and another row is selected with the shift key', () => {
       mountListingForSubItems({ canCheckSubItems: true, isSmallListing: true });
 
-      cy.findByLabelText('Expand 0').click();
+      cy.findByLabelText('Expand 2').click();
 
-      cy.findByLabelText('Collapse 0').should('be.visible');
+      cy.findByLabelText('Collapse 2').should('be.visible');
 
-      cy.findAllByLabelText('Select row 0').eq(0).click();
+      cy.findAllByLabelText('Select row 2').eq(0).click();
       cy.get('body').type('{shift}', { release: false });
       cy.findByLabelText('Select row 50').eq(0).click();
 
-      cy.findAllByLabelText('Select row 0').eq(0).should('be.checked');
-      cy.findAllByLabelText('Select row 0').eq(1).should('be.checked');
+      cy.findAllByLabelText('Select row 2').eq(0).should('be.checked');
       cy.findByLabelText('Select row 10').should('be.checked');
       cy.findByLabelText('Select row 20').should('be.checked');
       cy.findByLabelText('Select row 30').should('be.checked');
       cy.findByLabelText('Select row 40').should('be.checked');
-      cy.findByLabelText('Select row 50').should('be.checked');
 
-      cy.findByLabelText('Collapse 0').click();
+      cy.findByLabelText('Collapse 2').click();
     });
 
     it('selects displayed rows when the corresponding checkbox is clicked', () => {
       mountListingForSubItems({ canCheckSubItems: true, isSmallListing: true });
 
-      cy.findByLabelText('Expand 0').click();
+      cy.findByLabelText('Expand 2').click();
 
-      cy.findByLabelText('Collapse 0').should('be.visible');
+      cy.findByLabelText('Collapse 2').should('be.visible');
 
       cy.findAllByLabelText('Select all').eq(0).click();
 
-      cy.findAllByLabelText('Select row 0').eq(0).should('be.checked');
+      cy.findAllByLabelText('Select row 2').eq(0).should('be.checked');
       tenElements.forEach((_, index) => {
         if (index === 0) {
           cy.findAllByLabelText('Select row 0').eq(1).should('be.checked');
@@ -277,7 +275,7 @@ describe('Listing', () => {
       cy.findByLabelText('Select row 1').should('be.checked');
       cy.findByLabelText('Select row 2').should('be.checked');
 
-      cy.findByLabelText('Collapse 0').click();
+      cy.findByLabelText('Collapse 2').click();
     });
   });
 

package/src/RichTextEditor/RichTextEditor.tsx

@@ -2,7 +2,7 @@ import { $generateHtmlFromNodes } from '@lexical/html';
 import { AutoLinkNode, LinkNode } from '@lexical/link';
 import { ListItemNode, ListNode } from '@lexical/list';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';

package/src/ThemeProvider/palettes.ts

@@ -211,7 +211,7 @@ export const lightPalette: PaletteOptions = {
           default: '#696969'
         }
       },
-      border: '#4A4A4A',
+      border: '#EDEDED',
       description: '#4A4A4A',
       title: '#000000'
     }
@@ -353,7 +353,7 @@ export const darkPalette: PaletteOptions = {
           default: '#696969'
         }
       },
-      border: '#bdbdbd',
+      border: '#666666',
       description: '#bdbdbd',
       title: '#fff'
     }

package/src/api/customFetch.ts

@@ -95,15 +95,6 @@ export const customFetch = <T>({
             };
           }
 
-          if (equals(response.status, 207)) {
-            return {
-              data: data.results,
-              isError: false,
-              message: '',
-              statusCode: response.status
-            };
-          }
-
           if (decoder) {
             return decoder.decodeToPromise(data).catch((error: string) => {
               catchError({

package/src/api/useBulkResponse.ts

@@ -0,0 +1,58 @@
+import {
+  complement,
+  includes,
+  isEmpty,
+  isNil,
+  last,
+  length,
+  prop,
+  propEq,
+  split
+} from 'ramda';
+import useSnackbar from '../Snackbar/useSnackbar';
+
+const useBulkResponse = () => {
+  const { showSuccessMessage, showErrorMessage, showWarningMessage } =
+    useSnackbar();
+
+  const handleBulkResponse = ({
+    data,
+    labelSuccess,
+    labelWarning,
+    labelFailed,
+    items
+  }) => {
+    const successfullResponses =
+      data?.filter(propEq(204, 'status')) || isNil(data);
+
+    const failedResponses = data?.filter(complement(propEq(204, 'status')));
+
+    const failedResponsesIds = failedResponses
+      ?.map(prop('href'))
+      ?.map((item: string) =>
+        Number.parseInt(last(split('/', item || '')) as string, 10)
+      );
+
+    if (isEmpty(successfullResponses)) {
+      showErrorMessage(labelFailed);
+
+      return;
+    }
+
+    if (length(successfullResponses) < length(data)) {
+      const failedResponsesNames = items
+        ?.filter((item) => includes(item.id, failedResponsesIds))
+        .map((item) => item.name);
+
+      showWarningMessage(`${labelWarning}: ${failedResponsesNames.join(', ')}`);
+
+      return;
+    }
+
+    showSuccessMessage(labelSuccess);
+  };
+
+  return handleBulkResponse;
+};
+
+export default useBulkResponse;

package/src/api/useMutationQuery/useMutationQuery.cypress.spec.tsx

@@ -2,17 +2,12 @@ import useMutationQuery, { Method } from '.';
 import SnackbarProvider from '../../Snackbar/SnackbarProvider';
 import TestQueryProvider from '../TestQueryProvider';
 
-// biome-ignore lint/suspicious/noImplicitAnyLet: <explanation>
-let spyMutation;
-
 const TestComponent = (props) => {
   const mutation = useMutationQuery({
     ...props,
     getEndpoint: () => '/endpoint'
   });
 
-  spyMutation = mutation;
-
   return (
     <button
       type="button"
@@ -46,8 +41,6 @@ const initialize = ({ mutationProps, isError = false }) => {
         </TestQueryProvider>
       </SnackbarProvider>
     )
-  }).then(() => {
-    cy.spy(spyMutation, 'mutateAsync').as('mutateAsync');
   });
 };
 
@@ -67,13 +60,6 @@ describe('useMutationQuery', () => {
       expect(request.body).to.deep.equal({ a: 'a', b: 2, c: ['arr', 'ay'] });
       expect(request.headers.get('content-type')).to.equal('application/json');
     });
-    cy.get('@mutateAsync').should('be.calledWith', {
-      payload: {
-        a: 'a',
-        b: 2,
-        c: ['arr', 'ay']
-      }
-    });
   });
 
   it("shows an error from the API via the Snackbar and inside the browser's console when posting data to an endpoint", () => {
@@ -87,8 +73,6 @@ describe('useMutationQuery', () => {
 
     cy.get('button').click();
 
-    cy.get('@mutateAsync').should('be.called');
-
     cy.contains('custom error message').should('be.visible');
   });
 
@@ -104,8 +88,6 @@ describe('useMutationQuery', () => {
 
     cy.get('button').click();
 
-    cy.get('@mutateAsync').should('be.called');
-
     cy.contains('custom error message').should('not.exist');
   });
 });

package/src/components/Button/Button.tsx

@@ -1,6 +1,9 @@
 import { ReactElement, ReactNode, useMemo } from 'react';
 
-import { Button as MuiButton } from '@mui/material';
+import {
+  Button as MuiButton,
+  ButtonProps as MuiButtonProps
+} from '@mui/material';
 
 import { AriaLabelingAttributes } from '../../@types/aria-attributes';
 import { DataTestAttributes } from '../../@types/data-attributes';
@@ -16,20 +19,21 @@ const muiVariantMap: Record<
   secondary: 'outlined'
 };
 
-export type ButtonProps = {
-  children: ReactNode;
-  className?: string;
-  disabled?: boolean;
-  icon?: string | ReactNode;
-  iconVariant?: 'none' | 'start' | 'end';
-  isDanger?: boolean;
-  onClick?: (e) => void;
-  ref?: React.Ref<HTMLButtonElement>;
-  size?: 'small' | 'medium' | 'large';
-  type?: 'button' | 'submit' | 'reset';
-  variant?: 'primary' | 'secondary' | 'ghost';
-} & AriaLabelingAttributes &
-  DataTestAttributes;
+export type ButtonProps = AriaLabelingAttributes &
+  DataTestAttributes &
+  Omit<MuiButtonProps, 'variant'> & {
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    icon?: string | ReactNode;
+    iconVariant?: 'none' | 'start' | 'end';
+    isDanger?: boolean;
+    onClick?: (e) => void;
+    ref?: React.Ref<HTMLButtonElement>;
+    size?: 'small' | 'medium' | 'large';
+    type?: 'button' | 'submit' | 'reset';
+    variant?: 'primary' | 'secondary' | 'ghost';
+  };
 
 const Button = ({
   children,

package/src/components/CollapsibleItem/CollapsibleItem.cypress.spec.tsx

@@ -16,7 +16,7 @@ describe('CollapsibleItem', () => {
 
     cy.contains(title).should('be.visible');
     cy.contains('Content').should('not.be.visible');
-    cy.get('div[aria-expanded="false"]').should('exist');
+    cy.get('button[aria-expanded="false"]').should('exist');
 
     cy.makeSnapshot();
   });
@@ -26,7 +26,7 @@ describe('CollapsibleItem', () => {
 
     cy.contains(title).should('be.visible');
     cy.contains('Content').should('be.visible');
-    cy.get('div[aria-expanded="true"]').should('exist');
+    cy.get('button[aria-expanded="true"]').should('exist');
 
     cy.makeSnapshot();
   });
@@ -35,7 +35,7 @@ describe('CollapsibleItem', () => {
     initialize({ title: customizedTitle });
 
     cy.contains('Customized title').should('be.visible');
-    cy.get('div[aria-expanded="false"]').should('exist');
+    cy.get('button[aria-expanded="false"]').should('exist');
 
     cy.makeSnapshot();
   });
@@ -44,7 +44,7 @@ describe('CollapsibleItem', () => {
     initialize({ compact: true, title });
 
     cy.contains(title).should('be.visible');
-    cy.get('div[aria-expanded="false"]').should('exist');
+    cy.get('button[aria-expanded="false"]').should('exist');
     cy.get('div[data-compact="true"]').should('exist');
 
     cy.makeSnapshot();
@@ -54,11 +54,11 @@ describe('CollapsibleItem', () => {
     initialize({ compact: true, title });
 
     cy.contains(title).should('be.visible');
-    cy.get('div[aria-expanded="false"]').should('exist');
+    cy.get('button[aria-expanded="false"]').should('exist');
 
-    cy.get('div[aria-expanded="false"]').click();
+    cy.get('button[aria-expanded="false"]').click();
 
-    cy.get('div[aria-expanded="true"]').should('exist');
+    cy.get('button[aria-expanded="true"]').should('exist');
     cy.contains('Content').should('be.visible');
 
     cy.makeSnapshot();
@@ -68,7 +68,7 @@ describe('CollapsibleItem', () => {
     initialize({ compact: true, title: customizedTitle });
 
     cy.contains('Customized title').should('be.visible');
-    cy.get('div[aria-expanded="false"]').should('exist');
+    cy.get('button[aria-expanded="false"]').should('exist');
     cy.get('div[data-compact="true"]').should('exist');
 
     cy.makeSnapshot();

package/src/components/CopyCommand/CopyCommand.cypress.spec.tsx

@@ -1,5 +1,4 @@
 import { ThemeMode, userAtom } from '@centreon/ui-context';
-import { mount } from 'cypress/react18';
 import { Provider, createStore } from 'jotai';
 import SnackbarProvider from '../../Snackbar/SnackbarProvider';
 import ThemeProvider from '../../ThemeProvider';
@@ -8,15 +7,17 @@ import CopyCommand, { CopyCommandProps } from './CopyCommand';
 const initialize = (props: CopyCommandProps & { theme?: ThemeMode }): void => {
   const store = createStore();
   store.set(userAtom, { themeMode: props.theme || ThemeMode.light });
-  mount(
-    <Provider store={store}>
-      <ThemeProvider>
-        <SnackbarProvider>
-          <CopyCommand {...props} />
-        </SnackbarProvider>
-      </ThemeProvider>
-    </Provider>
-  );
+  cy.mount({
+    Component: (
+      <Provider store={store}>
+        <ThemeProvider>
+          <SnackbarProvider>
+            <CopyCommand {...props} />
+          </SnackbarProvider>
+        </ThemeProvider>
+      </Provider>
+    )
+  });
 };
 
 describe('CopyCommand', () => {

package/src/components/CrudPage/Actions/Actions.styles.ts

@@ -2,7 +2,21 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useActionsStyles = makeStyles()((theme) => ({
   search: {
-    maxWidth: theme.spacing(50)
+    maxWidth: theme.spacing(60),
+    minWidth: theme.spacing(20),
+    width: '100%'
+  },
+  filters: {
+    width: '100%',
+    paddingInline: theme.spacing(1),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  actions: {
+    display: 'grid',
+    gridTemplateColumns: 'min-content auto',
+    gap: theme.spacing(1)
   },
   clearButton: {
     alignSelf: 'flex-start'

package/src/components/CrudPage/Actions/Actions.tsx

@@ -1,4 +1,5 @@
 import { Box } from '@mui/material';
+import { useActionsStyles } from './Actions.styles';
 import AddButton from './AddButton';
 import Search from './Search';
 
@@ -11,12 +12,14 @@ interface Props {
 }
 
 const Actions = ({ labels, filters }: Props): JSX.Element => {
+  const { classes } = useActionsStyles();
+
   return (
-    <Box
-      sx={{ display: 'grid', gridTemplateColumns: 'min-content auto', gap: 2 }}
-    >
+    <Box className={classes.actions}>
       <AddButton label={labels.add} />
-      <Search label={labels.search} filters={filters} />
+      <div className={classes.filters}>
+        <Search label={labels.search} filters={filters} />
+      </div>
     </Box>
   );
 };

package/src/components/CrudPage/Actions/Search.tsx

@@ -14,21 +14,22 @@ const Search = ({ label, filters }: Props): JSX.Element => {
   const { change } = useSearch();
 
   return (
-    <SearchField
-      className={classes.search}
-      debounced
-      fullWidth
-      dataTestId={label}
-      placeholder={label}
-      onChange={change}
-      textFieldSlotsAndSlotProps={{
-        slotProps: {
-          input: {
-            endAdornment: <Filters label="filters" filters={filters} />
+    <div className={classes.search}>
+      <SearchField
+        debounced
+        fullWidth
+        dataTestId={label}
+        placeholder={label}
+        onChange={change}
+        textFieldSlotsAndSlotProps={{
+          slotProps: {
+            input: {
+              endAdornment: <Filters label="filters" filters={filters} />
+            }
           }
-        }
-      }}
-    />
+        }}
+      />
+    </div>
   );
 };
 

package/src/components/Header/PageHeader/PageHeader.styles.ts

@@ -25,9 +25,10 @@ const useStyles = makeStyles()((theme) => ({
   },
   pageHeader: {
     alignItems: 'center',
-    borderBottom: `1px solid ${theme.palette.header.page.border}`,
+    borderBottom: `2px solid ${theme.palette.header.page.border}`,
     display: 'flex',
-    gap: theme.spacing(4)
+    gap: theme.spacing(4),
+    paddingBottom: theme.spacing(0.5)
   },
   pageHeaderActions: {
     '& > button': {
@@ -46,8 +47,7 @@ const useStyles = makeStyles()((theme) => ({
   pageHeaderMain: {
     display: 'flex',
     flexGrow: 1,
-    gap: theme.spacing(1),
-    minHeight: theme.spacing(4.5)
+    gap: theme.spacing(1)
   },
   pageHeaderMenu: {
     alignItems: 'flex-start',
@@ -96,7 +96,7 @@ const useStyles = makeStyles()((theme) => ({
     alignSelf: 'flex-start',
     h1: {
       ...theme.typography.h5,
-      fontWeight: theme.typography.fontWeightMedium,
+      fontWeight: theme.typography.fontWeightBold,
       margin: theme.spacing(0),
       lineHeight: '1'
     }

package/src/components/Layout/PageLayout/PageLayout.styles.ts

@@ -29,7 +29,7 @@ export const useStyles = makeStyles()((theme) => ({
     display: 'grid',
     gridTemplateRows: 'auto',
     overflow: 'hidden',
-    padding: theme.spacing(1.5, 3, 1.5)
+    padding: theme.spacing(0, 3, 1.5)
   },
   pageLayoutHeader: {
     '[data-variant="fixed-header"] &': {

package/src/index.ts

@@ -133,6 +133,7 @@ export {
 } from './api/useGraphQuery';
 export { WidgetResourceType as ResourceType } from './api/useGraphQuery/models';
 export { default as QueryProvider, client } from './api/QueryProvider';
+export { default as useBulkResponse } from './api/useBulkResponse';
 export {
   default as FileDropZone,
   transformFileListToArray

package/src/Button/Save/Content.tsx

@@ -1,34 +0,0 @@
-import { useTranslation } from 'react-i18next';
-
-import CheckIcon from '@mui/icons-material/Check';
-import SaveIcon from '@mui/icons-material/Save';
-
-interface Props {
-  labelLoading: string;
-  labelSave: string;
-  labelSucceeded: string;
-  loading: boolean;
-  succeeded: boolean;
-}
-
-const Content = ({
-  succeeded,
-  labelSucceeded,
-  labelSave,
-  loading,
-  labelLoading
-}: Props): JSX.Element | string | null => {
-  const { t } = useTranslation();
-
-  if (loading) {
-    return t(labelLoading);
-  }
-
-  if (succeeded) {
-    return labelSucceeded ? t(labelSucceeded) : <CheckIcon />;
-  }
-
-  return labelSave ? t(labelSave) : <SaveIcon />;
-};
-
-export default Content;

package/src/Button/Save/StartIcon.tsx

@@ -1,24 +0,0 @@
-import { T, always, cond, not, pipe, propEq } from 'ramda';
-
-import CheckIcon from '@mui/icons-material/Check';
-import SaveIcon from '@mui/icons-material/Save';
-
-interface StartIconConfigProps {
-  hasLabel: boolean;
-  loading: boolean;
-  succeeded: boolean;
-}
-
-interface Props {
-  startIconConfig: StartIconConfigProps;
-}
-
-const StartIcon = ({ startIconConfig }: Props): JSX.Element | null =>
-  cond<Array<StartIconConfigProps>, JSX.Element | null>([
-    [pipe(propEq(true, 'hasLabel'), not), always(null)],
-    [propEq(true, 'succeeded'), always(<CheckIcon />)],
-    [propEq(true, 'loading'), always(<SaveIcon />)],
-    [T, always(<SaveIcon />)]
-  ])(startIconConfig);
-
-export default StartIcon;