@centreon/ui 25.11.4 → 25.11.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.11.4",
+  "version": "25.11.5",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -75,7 +75,7 @@
     "@storybook/test": "^8.6.3",
     "@storybook/test-runner": "^0.22.0",
     "@storybook/theming": "^8.6.3",
-    "@tailwindcss/cli": "^4.1.7",
+    "@tailwindcss/cli": "^4.1.17",
     "@tailwindcss/postcss": "^4.1.7",
     "@tailwindcss/vite": "^4.1.7",
     "@testing-library/cypress": "^10.0.3",
@@ -106,7 +106,7 @@
     "storybook-dark-mode": "^4.0.2",
     "storybook-react-rsbuild": "^1.0.1",
     "style-dictionary": "^4.3.3",
-    "tailwindcss": "^4.1.7",
+    "tailwindcss": "^4.1.17",
     "ts-node": "^10.9.2",
     "use-resize-observer": "^9.1.0",
     "vite": "^6.3.5",

package/public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.7.3'
-const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
+const PACKAGE_VERSION = '2.2.14'
+const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,12 +62,7 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: {
-          client: {
-            id: client.id,
-            frameType: client.frameType,
-          },
-        },
+        payload: true,
       })
       break
     }
@@ -160,10 +155,6 @@ 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
   }
@@ -192,26 +183,12 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    // 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',
-      )
+    const headers = Object.fromEntries(requestClone.headers.entries())
 
-      if (filteredValues.length > 0) {
-        headers.set('accept', filteredValues.join(', '))
-      } else {
-        headers.delete('accept')
-      }
-    }
+    // 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']
 
     return fetch(requestClone, { headers })
   }

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -244,6 +244,7 @@ const ResponsiveBarChart = ({
       setLines={setLinesGraph}
       title={title}
       titleRef={titleRef}
+      graphHeight={graphHeight}
     >
       <Tooltip
         classes={{

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

@@ -154,7 +154,7 @@ const initializeCustomUnits = ({
 const checkGraphWidth = (): void => {
   cy.findByTestId('graph-interaction-zone')
     .should('have.attr', 'height')
-    .and('equal', '389');
+    .and('equal', '387');
 
   cy.findByTestId('graph-interaction-zone').then((graph) => {
     expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1170);
@@ -452,7 +452,7 @@ describe('Line chart', () => {
 
       cy.contains(':00 AM').should('be.visible');
 
-      cy.get('text[transform="rotate(-35, -2, 205.66612100897808)"]').should(
+      cy.get('text[transform="rotate(-35, -2, 204.60871164646406)"]').should(
         'be.visible'
       );
 
@@ -534,7 +534,7 @@ describe('Line chart', () => {
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
       cy.get('circle[cx="248.33333333333334"]').should('be.visible');
-      cy.get('circle[cy="257.3178022124914"]').should('be.visible');
+      cy.get('circle[cy="225.07536552649066"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -748,10 +748,10 @@ describe('Lines and bars', () => {
     checkGraphWidth();
 
     cy.get(
-      'path[d="M7.501377410468319,287.7051801494232 h56.51239669421488 h1v1 v99.2948198505768 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-99.2948198505768 v-1h1z"]'
+      'path[d="M7.501377410468319,286.2259761383722 h56.51239669421488 h1v1 v98.77402386162782 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-98.77402386162782 v-1h1z"]'
     ).should('be.visible');
     cy.get(
-      'path[d="M24.05509641873278,233.5659996490948 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v19.03174248379947 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-19.03174248379947 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
+      'path[d="M24.05509641873278,232.36514618046195 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v18.753391941381302 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-18.753391941381302 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
     ).should('be.visible');
 
     cy.makeSnapshot();

package/src/Graph/Chart/Chart.tsx

@@ -288,6 +288,7 @@ const Chart = ({
           setLines={setLinesGraph}
           title={title}
           titleRef={titleRef}
+          graphHeight={graphHeight}
         >
           <GraphValueTooltip
             baseAxis={baseAxis}

package/src/Graph/Chart/Legend/LegendHeader.tsx

@@ -64,7 +64,7 @@ const LegendHeader = ({
       >
         <div className="flex items-center gap-1">
           <EllipsisTypography
-            className="text-xs leading-none font-medium"
+            className="text-xs leading-[1.2] font-medium"
             containerClassname={`w-auto ${(!isListMode || (isListMode && isDisplayedOnSide)) && 'max-w-[166px]'}`}
             data-mode={
               value ? LegendDisplayMode.Compact : LegendDisplayMode.Normal

package/src/Graph/Chart/Legend/index.tsx

@@ -38,6 +38,7 @@ interface Props
     metricId: number | string;
     position: [number, number];
   }) => void;
+  graphHeight: number;
 }
 
 const MainLegend = ({
@@ -55,7 +56,8 @@ const MainLegend = ({
     max: true,
     avg: true
   },
-  secondaryClick
+  secondaryClick,
+  graphHeight
 }: Props): ReactElement => {
   const theme = useTheme();
 
@@ -122,7 +124,10 @@ const MainLegend = ({
       data-display-side={!equals(placement, 'bottom')}
     >
       <ul
-        className={`list-none flex gap-3 w-full ${!isListMode && equals(placement, 'bottom') && 'flex-wrap'} ${(isListMode || !equals(placement, 'bottom')) && 'flex-col h-full w-fit'} ${equals(placement, 'bottom') ? 'max-h-[67px]' : 'max-h-0'}`}
+        className={`list-none flex gap-3 w-full ${!isListMode && equals(placement, 'bottom') && 'flex-wrap'} ${isListMode || !equals(placement, 'bottom') ? 'flex-col h-full w-fit' : ''} ${equals(placement, 'bottom') ? 'max-h-17' : 'max-h-0'}`}
+        style={{
+          height: equals(placement, 'bottom') ? 'auto' : `${graphHeight}px`
+        }}
         data-as-list={isListMode || !equals(placement, 'bottom')}
         data-mode={itemMode}
       >
@@ -161,7 +166,7 @@ const MainLegend = ({
               onContextMenu={contextMenuClick(metric_id)}
             >
               <div
-                className="h-full rounded-sm w-1"
+                className="h-full rounded-sm w-1 min-h-5"
                 style={{ backgroundColor: markerColor }}
                 data-icon
               />

package/src/Graph/common/BaseChart/BaseChart.tsx

@@ -35,9 +35,10 @@ interface Props {
   limitLegend?: number | false;
   lines: Array<Line>;
   setLines:
-    | Dispatch<SetStateAction<Array<Line> | null>>
-    | Dispatch<SetStateAction<Array<Line>>>;
+  | Dispatch<SetStateAction<Array<Line> | null>>
+  | Dispatch<SetStateAction<Array<Line>>>;
   title: string;
+  graphHeight: number;
 }
 
 const BaseChart = ({
@@ -53,7 +54,8 @@ const BaseChart = ({
   titleRef,
   title,
   header,
-  isHorizontal = true
+  isHorizontal = true,
+  graphHeight
 }: Props): JSX.Element => {
   const { classes, cx } = useBaseChartStyles();
 
@@ -91,8 +93,8 @@ const BaseChart = ({
                 className={cx(
                   classes.legendContainer,
                   equals(legend?.placement, 'right') &&
-                    !isHorizontal &&
-                    classes.legendContainerVerticalSide
+                  !isHorizontal &&
+                  classes.legendContainerVerticalSide
                 )}
                 ref={legendRef}
               >
@@ -110,6 +112,7 @@ const BaseChart = ({
                   }
                   showCalculations={legend?.showCalculations}
                   secondaryClick={legend?.secondaryClick}
+                  graphHeight={graphHeight}
                 />
               </div>
             )}
@@ -133,6 +136,7 @@ const BaseChart = ({
             shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
             secondaryClick={legend?.secondaryClick}
             showCalculations={legend?.showCalculations}
+            graphHeight={graphHeight}
           />
         </div>
       )}