@centreon/ui 25.3.2 → 25.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.3.2",
+  "version": "25.3.3",
   "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/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/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/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/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/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;