@centreon/ui 25.3.1 → 25.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.3.1",
+  "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/BarChart/BarChart.cypress.spec.tsx

@@ -83,7 +83,7 @@ describe('Bar chart', () => {
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
-      cy.findByTestId('stacked-bar-3-0-0.08644').should('be.visible');
+      cy.findByTestId('stacked-bar-3-0-0.08084').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -96,7 +96,7 @@ describe('Bar chart', () => {
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
-      cy.findByTestId('stacked-bar-3-0-0.08644').should('be.visible');
+      cy.findByTestId('stacked-bar-3-0-0.08084').should('be.visible');
 
       cy.makeSnapshot();
     });

package/src/Graph/BarChart/BarChart.stories.tsx

@@ -195,6 +195,45 @@ export const customBarStyle: Story = {
   render: Template
 };
 
+export const customBarStyleForABar: Story = {
+  args: {
+    ...defaultArgs,
+    barStyle: [
+      {
+        opacity: 0.5,
+        radius: 0.5,
+        metricId: 10
+      },
+      {
+        opacity: 0.2,
+        radius: 0.3,
+        metricId: 1
+      }
+    ]
+  },
+  render: Template
+};
+
+export const customBarStyleForABarStacked: Story = {
+  args: {
+    ...defaultArgs,
+    data: dataPingServiceStacked,
+    barStyle: [
+      {
+        opacity: 0.5,
+        radius: 0.5,
+        metricId: 10
+      },
+      {
+        opacity: 0.2,
+        radius: 0.3,
+        metricId: 1
+      }
+    ]
+  },
+  render: Template
+};
+
 export const mixedStacked: Story = {
   args: {
     ...defaultArgs,

package/src/Graph/BarChart/BarStack.tsx

@@ -5,6 +5,7 @@ import { BarRounded } from '@visx/shape';
 import { dec, equals, gt, pick } from 'ramda';
 
 import { BarGroupBar, SeriesPoint, StackKey } from '@visx/shape/lib/types';
+import { getStyle } from '../common/utils';
 import { BarStyle } from './models';
 import { UseBarStackProps, useBarStack } from './useBarStack';
 
@@ -112,6 +113,11 @@ const BarStack = ({
               [isHorizontal ? 'top' : 'right']: shouldApplyRadiusOnTop
             };
 
+            const style = getStyle({
+              style: barStyle,
+              metricId: Number(bar.key)
+            }) as BarStyle;
+
             return (
               <BarRounded
                 {...barRoundedProps}
@@ -133,8 +139,8 @@ const BarStack = ({
                   neutralValue
                 })}
                 key={`bar-stack-${barStack.index}-${bar.index}`}
-                opacity={barStyle.opacity ?? 1}
-                radius={barWidth * barStyle.radius}
+                opacity={style?.opacity || 1}
+                radius={style?.radius ? barWidth * style.radius : 0}
                 width={isHorizontal ? barWidth : Math.abs(bar.width)}
                 x={
                   isHorizontal

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -87,14 +87,15 @@ const ResponsiveBarChart = ({
       secondUnit
     });
 
-  const { legendRef, graphWidth, graphHeight } = useComputeBaseChartDimensions({
-    hasSecondUnit: Boolean(secondUnit),
-    height,
-    legendDisplay: legend?.display,
-    legendPlacement: legend?.placement,
-    width,
-    maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters
-  });
+  const { legendRef, graphWidth, graphHeight, titleRef } =
+    useComputeBaseChartDimensions({
+      hasSecondUnit: Boolean(secondUnit),
+      height,
+      legendDisplay: legend?.display,
+      legendPlacement: legend?.placement,
+      width,
+      maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters
+    });
 
   const thresholdValues = flatten([
     pluck('value', thresholds?.warning || []),
@@ -192,6 +193,7 @@ const ResponsiveBarChart = ({
       lines={linesGraph}
       setLines={setLinesGraph}
       title={title}
+      titleRef={titleRef}
     >
       <Tooltip
         classes={{

package/src/Graph/Chart/BasicComponents/Lines/StackedLines/index.tsx

@@ -1,15 +1,31 @@
 import { Shape } from '@visx/visx';
 import { ScaleLinear, ScaleTime } from 'd3-scale';
-import { path, all, equals, isNil, map, not, nth, pipe, prop } from 'ramda';
+import {
+  path,
+  all,
+  equals,
+  isNil,
+  map,
+  not,
+  nth,
+  pipe,
+  prop,
+  type
+} from 'ramda';
 
 import { getDates, getTime } from '../../../../common/timeSeries';
 import { Line, TimeValue } from '../../../../common/timeSeries/models';
-import { getPointRadius, getStrokeDashArray } from '../../../../common/utils';
+import {
+  getPointRadius,
+  getStrokeDashArray,
+  getStyle
+} from '../../../../common/utils';
 import StackedAnchorPoint, {
   getYAnchorPoint
 } from '../../../InteractiveComponents/AnchorPoint/StackedAnchorPoint';
 import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
 import { getCurveFactory, getFillColor } from '../../../common';
+import { LineStyle } from '../../../models';
 import Point from '../Point';
 
 interface Props {
@@ -26,6 +42,7 @@ interface Props {
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
+  lineStyle: LineStyle | Array<LineStyle>;
 }
 
 const StackLines = ({
@@ -34,19 +51,13 @@ const StackLines = ({
   yScale,
   xScale,
   displayAnchor,
-  curve,
-  showPoints,
-  showArea,
-  areaTransparency,
-  lineWidth,
-  dashLength,
-  dashOffset,
-  dotOffset
+  lineStyle
 }: Props): JSX.Element => {
-  const curveType = getCurveFactory(curve);
-
-  const formattedLineWidth = lineWidth ?? 2;
-
+  const curveType = getCurveFactory(
+    (equals(type(lineStyle), 'Array')
+      ? lineStyle?.[0].curve
+      : lineStyle?.curve) || 'linear'
+  );
   return (
     <Shape.AreaStack
       curve={curveType}
@@ -69,15 +80,21 @@ const StackLines = ({
           const { areaColor, transparency, lineColor, highlight, metric_id } =
             nth(index, lines) as Line;
 
-          const formattedTransparency = isNil(areaTransparency)
+          const style = getStyle({
+            style: lineStyle,
+            metricId: metric_id
+          }) as LineStyle;
+          const formattedLineWidth = style?.lineWidth ?? 2;
+
+          const formattedTransparency = isNil(style?.areaTransparency)
             ? transparency || 80
-            : areaTransparency;
+            : style.areaTransparency;
 
           return (
             <g key={`stack-${prop('key', stack)}`}>
               {displayAnchor && (
                 <StackedAnchorPoint
-                  areaColor={areaColor}
+                  areaColor={style?.areaColor}
                   lineColor={lineColor}
                   stackValues={stack as unknown as Array<StackValue>}
                   timeSeries={timeSeries}
@@ -86,13 +103,13 @@ const StackLines = ({
                   yScale={yScale}
                 />
               )}
-              {showPoints &&
+              {style?.showPoints &&
                 getDates(timeSeries).map((timeTick) => (
                   <Point
                     key={timeTick.toString()}
                     lineColor={lineColor}
                     metric_id={metric_id}
-                    radius={getPointRadius(lineWidth)}
+                    radius={getPointRadius(style?.lineWidth)}
                     timeSeries={timeSeries}
                     timeTick={timeTick}
                     xScale={xScale}
@@ -108,7 +125,7 @@ const StackLines = ({
                 d={linePath(stack) || ''}
                 data-metric={metric_id}
                 fill={
-                  equals(showArea, false)
+                  equals(style?.showArea, false)
                     ? 'transparent'
                     : getFillColor({
                         areaColor: areaColor || lineColor,
@@ -118,10 +135,10 @@ const StackLines = ({
                 opacity={highlight === false ? 0.3 : 1}
                 stroke={lineColor}
                 strokeDasharray={getStrokeDashArray({
-                  dashLength,
-                  dashOffset,
-                  dotOffset,
-                  lineWidth: formattedLineWidth
+                  dashLength: style?.dashLength,
+                  dashOffset: style?.dashOffset,
+                  dotOffset: style?.dotOffset,
+                  lineWidth: style?.lineWidth ?? 2
                 })}
                 strokeWidth={
                   highlight