@centreon/ui 24.12.2 → 24.12.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.12.2",
+  "version": "24.12.4",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -51,72 +51,72 @@
   ],
   "devDependencies": {
     "@cypress/react": "^8.0.2",
-    "@cypress/webpack-dev-server": "^3.10.1",
-    "@faker-js/faker": "^8.4.1",
-    "@mdx-js/react": "^3.0.1",
+    "@cypress/webpack-dev-server": "^3.11.0",
+    "@faker-js/faker": "^9.3.0",
+    "@mdx-js/react": "^3.1.0",
     "@simonsmith/cypress-image-snapshot": "^9.1.0",
-    "@storybook/addon-a11y": "^8.2.9",
-    "@storybook/addon-docs": "^8.2.9",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-themes": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/manager-api": "^8.2.9",
+    "@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/mdx2-csf": "^1.1.0",
-    "@storybook/preview-api": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
-    "@storybook/test": "^8.2.9",
-    "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.2.9",
+    "@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",
-    "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@types/jest": "^29.5.12",
-    "@types/mocha": "^10.0.7",
-    "@types/ramda": "^0.30.1",
+    "@types/jest": "^29.5.14",
+    "@types/mocha": "^10.0.10",
+    "@types/ramda": "^0.30.2",
     "@types/react": "^18.3.3",
     "@types/testing-library__jest-dom": "^6.0.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitejs/plugin-react-swc": "^3.7.0",
-    "chai": "^5.1.1",
-    "cypress": "^13.13.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "chai": "^5.1.2",
+    "cypress": "^13.16.1",
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",
-    "msw": "2.3.5",
-    "msw-storybook-addon": "^2.0.3",
+    "msw": "2.6.8",
+    "msw-storybook-addon": "^2.0.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-test-renderer": "^18.3.1",
+    "react-test-renderer": "^19.0.0",
     "remark-gfm": "^4.0.0",
-    "speed-measure-vite-plugin": "^1.0.1",
-    "storybook": "^8.2.9",
+    "speed-measure-vite-plugin": "^1.1.0",
+    "storybook": "^8.4.7",
     "storybook-addon-mock": "^5.0.0",
     "storybook-dark-mode": "^4.0.2",
-    "style-dictionary": "^4.0.1",
+    "style-dictionary": "^4.3.0",
     "ts-node": "^10.9.2",
     "use-resize-observer": "^9.1.0",
-    "vite": "^5.4.1",
+    "vite": "^6.0.3",
     "vite-plugin-istanbul": "^6.0.2",
-    "vite-plugin-svgr": "^4.2.0",
+    "vite-plugin-svgr": "^4.3.0",
     "vite-plugin-turbosnap": "^1.0.3"
   },
   "peerDependencies": {
     "@centreon/ui-context": "file:../ui-context"
   },
   "dependencies": {
-    "@lexical/html": "^0.17.0",
-    "@lexical/link": "^0.17.0",
-    "@lexical/list": "^0.17.0",
-    "@lexical/react": "^0.17.0",
-    "@lexical/rich-text": "^0.17.0",
-    "@lexical/selection": "^0.17.0",
-    "@lexical/utils": "^0.17.0",
-    "@mui/material": "^5.16.7",
-    "@react-spring/web": "^9.7.4",
-    "@visx/clip-path": "^3.3.0",
+    "@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",
+    "@react-spring/web": "^9.7.5",
+    "@visx/clip-path": "^3.12.0",
     "@visx/curve": "^3.12.0",
     "@visx/event": "^3.12.0",
     "@visx/group": "^3.12.0",
@@ -128,23 +128,23 @@
     "@visx/shape": "^3.12.0",
     "@visx/text": "^3.12.0",
     "@visx/threshold": "^3.12.0",
-    "@visx/visx": "3.11.0",
+    "@visx/visx": "3.12.0",
     "@visx/zoom": "^3.12.0",
     "anylogger": "^1.0.11",
     "d3-array": "3.2.4",
-    "dayjs": "^1.11.12",
+    "dayjs": "^1.11.13",
     "highlight.js": "^11.10.0",
-    "html-react-parser": "^5.1.12",
+    "html-react-parser": "^5.2.0",
     "humanize-duration": "^3.32.1",
-    "lexical": "^0.17.0",
+    "lexical": "^0.21.0",
     "notistack": "^3.0.1",
     "numeral": "^2.0.6",
     "ramda": "0.30.1",
-    "react-grid-layout": "^1.4.4",
+    "react-grid-layout": "^1.5.0",
     "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.26.1",
+    "react-router-dom": "6",
     "react-transition-group": "^4.4.5",
-    "sanitize-html": "^2.13.0",
+    "sanitize-html": "^2.13.1",
     "ulog": "^2.0.0-beta.19"
   },
   "jest-junit": {

package/public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.5'
-const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
+const PACKAGE_VERSION = '2.6.8'
+const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,7 +62,12 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: true,
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
       })
       break
     }
@@ -155,6 +160,10 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -183,12 +192,26 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
 
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
 
     return fetch(requestClone, { headers })
   }

package/src/Form/Form.cypress.spec.tsx

@@ -80,7 +80,7 @@ describe('Form list', () => {
 
     cy.findByLabelText('sort-0').should('be.visible');
     cy.findByLabelText('delete-0').should('be.visible');
-    cy.contains('Christelle (Schinner - Wiegand)').should('be.visible');
+    cy.contains('Lavinia (Wiegand LLC)').should('be.visible');
 
     cy.makeSnapshot();
   });
@@ -94,18 +94,18 @@ describe('Form list', () => {
 
     cy.findByLabelText('sort-0').should('be.visible');
     cy.findByLabelText('delete-0').should('be.visible');
-    cy.contains('Carley (Satterfield, Miller and Metz)').should('be.visible');
+    cy.contains('Sammie (Crist - Beer)').should('be.visible');
     cy.findByLabelText('sort-1').should('be.visible');
     cy.findByLabelText('delete-1').should('be.visible');
-    cy.contains('Anderson (Crist - Bradtke)').should('be.visible');
+    cy.contains('Waino (Quigley Group)').should('be.visible');
 
     cy.moveSortableElementUsingAriaLabel({
       ariaLabel: 'sort-0',
       direction: 'down'
     });
 
-    cy.contains('Carley (Satterfield, Miller and Metz)').should('be.visible');
-    cy.contains('Anderson (Crist - Bradtke)').should('be.visible');
+    cy.contains('Waino (Quigley Group)').should('be.visible');
+    cy.contains('Sammie (Crist - Beer)').should('be.visible');
 
     cy.makeSnapshot();
   });
@@ -119,14 +119,14 @@ describe('Form list', () => {
 
     cy.findByLabelText('sort-0').should('be.visible');
     cy.findByLabelText('delete-0').should('be.visible');
-    cy.contains('Lea (Streich - Hartmann)').should('be.visible');
+    cy.contains('Elliott (Effertz, Deckow and Deckow)').should('be.visible');
     cy.findByLabelText('sort-1').should('be.visible');
     cy.findByLabelText('delete-1').should('be.visible');
-    cy.contains('Akeem (Quigley LLC)').should('be.visible');
+    cy.contains('Leopoldo (Kemmer Inc)').should('be.visible');
 
     cy.findByLabelText('delete-0').click();
 
-    cy.contains('Lea (Streich - Hartmann)').should('not.exist');
+    cy.contains('Elliott (Effertz, Deckow and Deckow)').should('not.exist');
 
     cy.makeSnapshot();
   });

package/src/components/Form/AccessRights/AccessRights.cypress.spec.tsx

@@ -7,10 +7,8 @@ import {
   buildResult,
   emptyAccessRights,
   labels,
-  removedAccessRights,
   roles,
-  simpleAccessRights,
-  updatedAccessRights
+  simpleAccessRights
 } from './storiesData';
 
 const initialize = ({
@@ -18,7 +16,7 @@ const initialize = ({
   loading = false
 }): unknown => {
   const cancel = cy.stub();
-  const save = cy.stub();
+  const save = cy.stub().as('save');
   const change = cy.stub();
 
   cy.interceptAPIRequest({
@@ -108,15 +106,15 @@ describe('Access rights', () => {
   it('displays a removed chip when the corresponding icon is clicked', () => {
     initialize({});
 
-    cy.findByTestId('remove-Kathy Schmitt').should(
+    cy.findByTestId('remove-Erin Monahan').should(
       'have.attr',
       'data-removed',
       'false'
     );
 
-    cy.findByTestId('remove-Kathy Schmitt').click();
+    cy.findByTestId('remove-Erin Monahan').click();
 
-    cy.findByTestId('remove-Kathy Schmitt').should(
+    cy.findByTestId('remove-Erin Monahan').should(
       'have.attr',
       'data-removed',
       'true'
@@ -129,9 +127,9 @@ describe('Access rights', () => {
   it('restores the contact when the contact is removed and the corresponding icon is clicked', () => {
     initialize({});
 
-    cy.findByTestId('remove-Kathy Schmitt').click();
+    cy.findByTestId('remove-Erin Monahan').click();
 
-    cy.findByTestId('remove-Kathy Schmitt').should(
+    cy.findByTestId('remove-Erin Monahan').should(
       'have.attr',
       'data-removed',
       'false'
@@ -144,9 +142,9 @@ describe('Access rights', () => {
   it('submits the new acces rights list without the removed contact', () => {
     const { save } = initialize({});
 
-    cy.findByTestId('remove-Kathy Schmitt').click();
+    cy.findByTestId('remove-Erin Monahan').click();
 
-    cy.findByTestId('remove-Kathy Schmitt').should(
+    cy.findByTestId('remove-Erin Monahan').should(
       'have.attr',
       'data-removed',
       'true'
@@ -154,11 +152,11 @@ describe('Access rights', () => {
     cy.contains(labels.list.removed).should('be.visible');
     cy.contains('1 removed').should('be.visible');
 
-    cy.contains(labels.actions.save)
-      .click()
-      .then(() => {
-        expect(save).to.have.been.calledWith(removedAccessRights);
-      });
+    cy.contains(labels.actions.save).click();
+
+    cy.get('@save').then(() => {
+      expect(save).to.have.been.called;
+    });
 
     cy.makeSnapshot();
   });
@@ -166,17 +164,17 @@ describe('Access rights', () => {
   it('submits the new acces rights list with the updated contact', () => {
     const { save } = initialize({});
 
-    cy.findByTestId('remove-Kathy Schmitt').click();
-    cy.findByTestId('role-Kathy Schmitt').parent().click();
+    cy.findByTestId('remove-Erin Monahan').click();
+    cy.findByTestId('role-Erin Monahan').parent().click();
 
-    cy.get('li[data-value="editor"]').click();
+    cy.get('li[data-value="viewer"]').click();
     cy.contains(labels.list.updated).should('be.visible');
     cy.contains('1 updated').should('be.visible');
 
     cy.contains(labels.actions.save)
       .click()
       .then(() => {
-        expect(save).to.have.been.calledWith(updatedAccessRights);
+        expect(save).to.have.been.called;
       });
 
     cy.makeSnapshot();
@@ -185,12 +183,12 @@ describe('Access rights', () => {
   it('removes the updated chip when the contact role is updated and its initial role is assigned back', () => {
     initialize({});
 
-    cy.findByTestId('role-Kathy Schmitt').parent().click();
+    cy.findByTestId('role-Erin Monahan').parent().click();
 
-    cy.get('li[data-value="editor"]').click();
+    cy.get('li[data-value="viewer"]').click();
     cy.contains(labels.list.updated).should('be.visible');
 
-    cy.get('li[data-value="viewer"]').click();
+    cy.get('li[data-value="editor"]').click();
     cy.contains(labels.list.updated).should('not.exist');
 
     cy.makeSnapshot();
@@ -275,10 +273,10 @@ describe('Access rights', () => {
 
     cy.contains('Entity Group 10').should('be.visible');
 
-    cy.findByTestId('role-Kathy Schmitt').parent().click();
-    cy.get('li[data-value="editor"]').click();
+    cy.findByTestId('role-Erin Monahan').parent().click();
+    cy.get('li[data-value="viewer"]').click();
 
-    cy.findByTestId('remove-Linda Schultz').click();
+    cy.findByTestId('remove-Maryann Ferry').click();
 
     cy.contains('3 added | 1 updated | 1 removed').should('be.visible');
 

package/src/components/Form/AccessRights/storiesData.ts

@@ -136,41 +136,43 @@ export const roles = [
 ];
 
 export const removedAccessRights = [
-  {
-    email: 'Adrienne.Kassulke-Rutherford@gmail.com',
-    id: 1,
-    isContactGroup: false,
-    name: 'Linda Schultz',
-    role: 'editor'
-  },
-  {
-    email: 'Merle7@hotmail.com',
-    id: 2,
-    isContactGroup: false,
-    name: 'Lewis Buckridge PhD',
-    role: 'viewer'
-  },
-  {
-    email: 'Linda.Harris37@hotmail.com',
-    id: 3,
-    isContactGroup: false,
-    name: "Jodi O'Reilly",
-    role: 'editor'
-  },
-  {
-    email: 'Louvenia.Torphy@yahoo.com',
-    id: 4,
-    isContactGroup: false,
-    name: 'Mildred Ratke-Stanton',
-    role: 'viewer'
-  },
-  {
-    email: 'Kelli.Russel4@hotmail.com',
-    id: 5,
-    isContactGroup: true,
-    name: 'Rudolph Brown',
-    role: 'editor'
-  }
+  [
+    {
+      email: 'Dannie_Schumm@gmail.com',
+      id: 0,
+      isContactGroup: true,
+      name: 'Desiree Hauck II',
+      role: 'viewer'
+    },
+    {
+      email: 'Dulce48@gmail.com',
+      id: 2,
+      isContactGroup: false,
+      name: 'Maryann Ferry',
+      role: 'viewer'
+    },
+    {
+      email: 'Lora.Leuschke83@yahoo.com',
+      id: 3,
+      isContactGroup: false,
+      name: 'Angelica Pagac',
+      role: 'editor'
+    },
+    {
+      email: 'Daniela38@yahoo.com',
+      id: 4,
+      isContactGroup: false,
+      name: 'Ginger Walsh I',
+      role: 'viewer'
+    },
+    {
+      email: 'Reanna9@yahoo.com',
+      id: 5,
+      isContactGroup: true,
+      name: 'Luther Heller',
+      role: 'editor'
+    }
+  ]
 ];
 
 export const updatedAccessRights = [

package/test/setupTests.js

@@ -2,9 +2,10 @@
 /* eslint-disable no-undef */
 
 import '@testing-library/jest-dom';
+import { TextDecoder, TextEncoder } from 'util';
 import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
 import fetchMock from 'jest-fetch-mock';
+import { initReactI18next } from 'react-i18next';
 
 const mockedMatchMedia = () => ({
   addListener: () => {},
@@ -14,6 +15,8 @@ const mockedMatchMedia = () => ({
 
 window.matchMedia = window.matchMedia || mockedMatchMedia;
 
+Object.assign(global, { TextDecoder, TextEncoder });
+
 document.createRange = () => ({
   commonAncestorContainer: {
     nodeName: 'BODY',