@centreon/ui 25.3.1 → 25.3.3

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

@@ -19,13 +19,11 @@ const Header = ({ title, header }: Props): JSX.Element => {
     Component: (
       <div className={classes.header}>
         <div />
-        <div>
-          {displayTitle && (
-            <Typography align="center" variant="body1">
-              {title}
-            </Typography>
-          )}
-        </div>
+        {displayTitle && (
+          <Typography align="center" variant="body1" className={classes.title}>
+            {title}
+          </Typography>
+        )}
         {header?.extraComponent}
       </div>
     ),

package/src/Graph/common/BaseChart/Header/useHeaderStyles.ts

@@ -3,7 +3,11 @@ import { makeStyles } from 'tss-react/mui';
 export const ussHeaderChartStyles = makeStyles()({
   header: {
     display: 'grid',
-    gridTemplateColumns: '0.4fr 1fr 0.4fr',
+    gridTemplateColumns: 'auto 1fr auto',
     width: '100%'
+  },
+  title: {
+    whiteSpace: 'pre-wrap',
+    lineHeight: '1.2'
   }
 });

package/src/Graph/common/BaseChart/useComputeBaseChartDimensions.ts

@@ -21,6 +21,7 @@ interface UseComputeBaseChartDimensionsState {
   graphHeight: number;
   graphWidth: number;
   legendRef: MutableRefObject<HTMLDivElement | null>;
+  titleRef: MutableRefObject<HTMLDivElement | null>;
 }
 
 export const useComputeBaseChartDimensions = ({
@@ -33,6 +34,7 @@ export const useComputeBaseChartDimensions = ({
   maxAxisCharacters
 }: UseComputeBaseChartDimensionsProps): UseComputeBaseChartDimensionsState => {
   const legendRef = useRef<HTMLDivElement | null>(null);
+  const titleRef = useRef<HTMLDivElement | null>(null);
 
   const currentLegendHeight =
     legendHeight ?? (legendRef.current?.getBoundingClientRect().height || 0);
@@ -57,12 +59,17 @@ export const useComputeBaseChartDimensions = ({
       : 0;
   const graphHeight =
     (height || 0) > 0
-      ? (height || 0) - margin.top - 5 - legendBoundingHeight
+      ? (height || 0) -
+        margin.top -
+        legendBoundingHeight -
+        (titleRef.current?.getBoundingClientRect().height || 0) -
+        5
       : 0;
 
   return {
     graphHeight,
     graphWidth,
-    legendRef
+    legendRef,
+    titleRef
   };
 };

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/Graph/common/models.ts

@@ -16,3 +16,10 @@ export interface Thresholds {
   enabled: boolean;
   warning: Array<Threshold>;
 }
+
+export interface AdditionalLineProps {
+  yValue: number;
+  text?: string;
+  color: string;
+  unit: string;
+}

package/src/Graph/common/timeSeries/index.ts

@@ -581,7 +581,7 @@ const formatMetricValue = ({
 
   const formattedMetricValue = numeral(Math.abs(value))
     .format(`0.[00]${formatSuffix}`)
-    .replace(/iB/g, unit);
+    .replace(/(iB|B)/g, unit);
 
   if (lt(value, 0)) {
     return `-${formattedMetricValue}`;

package/src/Graph/common/utils.ts

@@ -12,11 +12,14 @@ import {
   length,
   lt,
   lte,
-  pluck
+  pluck,
+  type
 } from 'ramda';
 
 import { Theme, darken, getLuminance, lighten } from '@mui/material';
 
+import { BarStyle } from '../BarChart/models';
+import { LineStyle } from '../Chart/models';
 import { Threshold, Thresholds } from './models';
 import { formatMetricValue } from './timeSeries';
 import { Line, TimeValue } from './timeSeries/models';
@@ -182,6 +185,24 @@ export const commonTickLabelProps = {
   textAnchor: 'middle'
 };
 
+interface GetStyleProps {
+  metricId?: number;
+  style:
+    | LineStyle
+    | BarStyle
+    | Array<LineStyle & { metricId: number }>
+    | Array<BarStyle & { metricId: number }>;
+}
+
+export const getStyle = ({
+  style,
+  metricId
+}: GetStyleProps): BarStyle | LineStyle => {
+  return equals(type(style), 'Array')
+    ? style.find((metricStyle) => equals(metricId, metricStyle.metricId))
+    : style;
+};
+
 interface GetFormattedAxisValuesProps {
   thresholdUnit?: string;
   axisUnit: string;

package/src/Graph/mockedData/lastDayWithNullValues.json

@@ -329,20 +329,7 @@
         0.32339333333,
         null
       ],
-      "prints": [
-        [
-          "Last:0.32"
-        ],
-        [
-          "Min:0.03"
-        ],
-        [
-          "Max:0.97"
-        ],
-        [
-          "Average:0.51"
-        ]
-      ],
+      "prints": [["Last:0.32"], ["Min:0.03"], ["Max:0.97"], ["Average:0.51"]],
       "last_value": 0.32,
       "minimum_value": 0.03,
       "maximum_value": 0.97,
@@ -667,18 +654,10 @@
         null
       ],
       "prints": [
-        [
-          "Last:87.27"
-        ],
-        [
-          "Min:70.31"
-        ],
-        [
-          "Max:88.03"
-        ],
-        [
-          "Average:78.07"
-        ]
+        ["Last:87.27"],
+        ["Min:70.31"],
+        ["Max:88.03"],
+        ["Average:78.07"]
       ],
       "last_value": 87.27,
       "minimum_value": 70.31,
@@ -1003,20 +982,7 @@
         null,
         null
       ],
-      "prints": [
-        [
-          "Last:0.65"
-        ],
-        [
-          "Min:0.03"
-        ],
-        [
-          "Max:0.98"
-        ],
-        [
-          "Average:0.50"
-        ]
-      ],
+      "prints": [["Last:0.65"], ["Min:0.03"], ["Max:0.98"], ["Average:0.50"]],
       "last_value": 0.65,
       "minimum_value": 0.03,
       "maximum_value": 0.98,

package/src/Graph/mockedData/pingService.json

@@ -62,7 +62,7 @@
         "ds_filled": true,
         "ds_invert": false,
         "ds_legend": null,
-        "ds_stack": false,
+        "ds_stack": true,
         "ds_order": 1,
         "ds_transparency": 80.0,
         "ds_color_line_mode": 0
@@ -99,7 +99,7 @@
         "ds_filled": true,
         "ds_invert": false,
         "ds_legend": null,
-        "ds_stack": false,
+        "ds_stack": true,
         "ds_order": 1,
         "ds_transparency": 80.0,
         "ds_color_line_mode": 0
@@ -144,7 +144,7 @@
         "ds_filled": false,
         "ds_invert": false,
         "ds_legend": null,
-        "ds_stack": false,
+        "ds_stack": true,
         "ds_order": 2,
         "ds_transparency": 80.0,
         "ds_color_line_mode": 0

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;