@centreon/ui 24.10.15 → 24.10.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.10.15",
+  "version": "24.10.17",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

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

@@ -60,15 +60,17 @@ const checkWidth = (orientation): void => {
   if (orientation === 'vertical') {
     cy.get('g[class*="visx-rows"] > line')
       .eq(0)
-      .should('have.attr', 'x2')
-      .and('equal', '1145');
+      .then((graph) => {
+        expect(Number(graph[0].attributes.x2.value)).to.be.greaterThan(1140);
+      });
 
     return;
   }
   cy.get('g[class*="visx-rows"] > line')
     .eq(0)
-    .should('have.attr', 'x2')
-    .and('equal', '1180');
+    .then((graph) => {
+      expect(Number(graph[0].attributes.x2.value)).to.be.greaterThan(1177);
+    });
 };
 
 describe('Bar chart', () => {

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -92,7 +92,10 @@ const ResponsiveBarChart = ({
     legendDisplay: legend?.display,
     legendPlacement: legend?.placement,
     width,
-    maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters
+    maxRightAxisCharacters,
+    maxLeftAxisCharacters,
+    title,
+    units: allUnits
   });
 
   const thresholdValues = flatten([

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

@@ -131,10 +131,10 @@ const initializeCustomUnits = ({
 const checkGraphWidth = (): void => {
   cy.findByTestId('graph-interaction-zone')
     .should('have.attr', 'height')
-    .and('equal', '393');
+    .and('equal', '398');
 
   cy.findByTestId('graph-interaction-zone').then((graph) => {
-    expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1170);
+    expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1150);
   });
 };
 
@@ -158,7 +158,7 @@ describe('Line chart', () => {
       cy.contains('06/18/2023').should('be.visible');
 
       cy.contains('0.45 s').should('be.visible');
-      cy.contains('73.65%').should('be.visible');
+      cy.contains('75.19%').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -443,7 +443,7 @@ describe('Line chart', () => {
 
       cy.contains(':00 AM').should('be.visible');
 
-      cy.get('text[transform="rotate(-35, -2, 227.55748987831032)"]').should(
+      cy.get('text[transform="rotate(-35, -2, 290.537103928414)"]').should(
         'be.visible'
       );
 
@@ -521,7 +521,7 @@ describe('Line chart', () => {
 
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
-      cy.get('circle[cx="37.625"]').should('be.visible');
+      cy.get('circle[cx="37.375"]').should('be.visible');
 
       cy.makeSnapshot();
     });

package/src/Graph/Chart/Chart.tsx

@@ -137,6 +137,8 @@ const Chart = ({
       secondUnit
     });
 
+  const allUnits = getUnits(linesGraph);
+
   const { legendRef, graphWidth, graphHeight } = useComputeBaseChartDimensions({
     hasSecondUnit: Boolean(secondUnit),
     height,
@@ -144,7 +146,10 @@ const Chart = ({
     legendHeight: legend?.height,
     legendPlacement: legend?.placement,
     width,
-    maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters
+    maxLeftAxisCharacters,
+    maxRightAxisCharacters,
+    title,
+    units: allUnits
   });
 
   const xScale = useMemo(
@@ -205,8 +210,6 @@ const Chart = ({
     [displayedLines]
   );
 
-  const allUnits = getUnits(linesGraph);
-
   useEffect(
     () => {
       setLinesGraph(

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

@@ -4,7 +4,7 @@ import { equals, isNil } from 'ramda';
 
 import useResizeObserver from 'use-resize-observer';
 import { margin } from '../../Chart/common';
-import { margins } from '../margins';
+import { useMarginTop } from '../useMarginTop';
 
 export const extraMargin = 10;
 
@@ -15,7 +15,10 @@ interface UseComputeBaseChartDimensionsProps {
   legendHeight?: number;
   legendPlacement?: string;
   width: number;
-  maxAxisCharacters: number;
+  maxLeftAxisCharacters: number;
+  maxRightAxisCharacters: number;
+  title?: string;
+  units: Array<string>;
 }
 
 interface UseComputeBaseChartDimensionsState {
@@ -32,17 +35,22 @@ export const useComputeBaseChartDimensions = ({
   legendPlacement,
   hasSecondUnit,
   legendHeight,
-  maxAxisCharacters
+  maxLeftAxisCharacters,
+  maxRightAxisCharacters,
+  units,
+  title
 }: UseComputeBaseChartDimensionsProps): UseComputeBaseChartDimensionsState => {
   const {
     ref: legendRef,
     width: legendRefWidth,
     height: legendRefHeight
   } = useResizeObserver();
-  const { height: titleRefHeight } = useResizeObserver();
+  const { ref: titleRef, height: titleRefHeight } = useResizeObserver();
 
   const currentLegendHeight = legendHeight ?? (legendRefHeight || 0);
 
+  const marginTop = useMarginTop({ title, units });
+
   const legendBoundingHeight =
     !equals(legendDisplay, false) &&
     (isNil(legendPlacement) || equals(legendPlacement, 'bottom'))
@@ -57,22 +65,19 @@ export const useComputeBaseChartDimensions = ({
   const graphWidth =
     width > 0
       ? width -
-        (hasSecondUnit ? maxAxisCharacters * 2 : maxAxisCharacters) * 6 -
-        (hasSecondUnit ? margins.left * 0.8 : margin.left) -
+        (hasSecondUnit ? maxRightAxisCharacters * 2 : maxRightAxisCharacters) *
+          6 -
+        (hasSecondUnit ? maxLeftAxisCharacters * 6 : margin.left) -
         legendBoundingWidth
       : 0;
   const graphHeight =
     (height || 0) > 0
-      ? (height || 0) -
-        margin.top -
-        legendBoundingHeight -
-        (titleRefHeight || 0) -
-        5
+      ? (height || 0) - marginTop - legendBoundingHeight - (titleRefHeight || 0)
       : 0;
-
   return {
     graphHeight,
     graphWidth,
-    legendRef
+    legendRef,
+    titleRef
   };
 };

package/src/Graph/common/useMarginTop.ts

@@ -0,0 +1,17 @@
+import { identity } from 'ramda';
+import { useMemo } from 'react';
+import { margin } from '../Chart/common';
+
+export const useMarginTop = ({
+  title,
+  units
+}: { title?: string; units: Array<string> }): number => {
+  const hasUnits = useMemo(() => units.some(identity), [units]);
+
+  const marginTop = useMemo(
+    () => (title || hasUnits ? margin.top : 4),
+    [title, hasUnits]
+  );
+
+  return marginTop;
+};

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { ReactElement, useCallback, useEffect, useState } from 'react';
 
 import {
   equals,
@@ -44,7 +44,7 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
   field: string;
   getEndpoint: ({ search, page }) => string;
   decoder?;
-  getRenderedOptionText: (option: TData) => string;
+  getRenderedOptionText?: (option: TData) => ReactElement | string;
   getRequestHeaders?: HeadersInit;
   initialPage: number;
   labelKey?: string;
@@ -53,9 +53,9 @@ export interface ConnectedAutoCompleteFieldProps<TData> {
 }
 
 const ConnectedAutocompleteField = (
-  AutocompleteField: (props) => JSX.Element,
+  AutocompleteField: (props) => ReactElement,
   multiple: boolean
-): ((props) => JSX.Element) => {
+): ((props) => ReactElement) => {
   const InnerConnectedAutocompleteField = <TData extends { name: string }>({
     initialPage = 1,
     getEndpoint,
@@ -74,7 +74,7 @@ const ConnectedAutocompleteField = (
     changeIdValue,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
-    Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
+    Omit<AutocompleteFieldProps, 'options'>): ReactElement => {
     const [options, setOptions] = useState<Array<TData>>([]);
     const [page, setPage] = useState(1);
     const [maxPage, setMaxPage] = useState(initialPage);
@@ -221,7 +221,7 @@ const ConnectedAutocompleteField = (
       debounce(event.target.value);
     };
 
-    const renderOptions = (renderProps, option, { selected }): JSX.Element => {
+    const renderOptions = (renderProps, option, { selected }): ReactElement => {
       const { value } = props;
 
       const lastValue = Array.isArray(value) ? last(value) : value;

package/src/InputField/Select/Autocomplete/index.tsx

@@ -14,6 +14,7 @@ import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
 import { ThemeMode } from '@centreon/ui-context';
 
+import type { AutocompleteRenderOptionState } from '@mui/material/Autocomplete';
 import { ForwardedRef, HTMLAttributes, ReactElement, forwardRef } from 'react';
 import { SelectEntry } from '..';
 import { getNormalizedId } from '../../../utils';
@@ -33,6 +34,11 @@ export type Props = {
   error?: string;
   getOptionItemLabel?: (option) => string;
   hideInput?: boolean;
+  renderOption?: (
+    renderProps: HTMLAttributes<HTMLLIElement>,
+    option: SelectEntry,
+    state: AutocompleteRenderOptionState
+  ) => ReactElement;
   label: string;
   loading?: boolean;
   onTextChange?;
@@ -163,6 +169,7 @@ const AutocompleteField = forwardRef(
       autoSizeCustomPadding,
       getOptionItemLabel = (option) => option?.name,
       forceInputRenderValue = false,
+      renderOption,
       ...autocompleteProps
     }: Props,
     ref?: ForwardedRef<HTMLDivElement>
@@ -180,7 +187,24 @@ const AutocompleteField = forwardRef(
       );
     };
 
-    const renderInput = (params): JSX.Element => {
+    const renderOptions = renderOption
+      ? renderOption
+      : (props, option): ReactElement => {
+          return (
+            <li
+              className={classes.options}
+              {...(props as HTMLAttributes<HTMLLIElement>)}
+            >
+              <Option
+                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
+              >
+                {getOptionItemLabel(option)}
+              </Option>
+            </li>
+          );
+        };
+
+    const renderInput = (params): ReactElement => {
       return (
         <TextField
           {...params}
@@ -271,20 +295,7 @@ const AutocompleteField = forwardRef(
         options={options}
         ref={ref}
         renderInput={renderInput}
-        renderOption={(props, option): JSX.Element => {
-          return (
-            <li
-              className={classes.options}
-              {...(props as HTMLAttributes<HTMLLIElement>)}
-            >
-              <Option
-                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
-              >
-                {getOptionItemLabel(option)}
-              </Option>
-            </li>
-          );
-        }}
+        renderOption={renderOptions}
         size="small"
         slotProps={{
           clearIndicator: {

package/src/InputField/Select/Option.tsx

@@ -1,4 +1,4 @@
-import { RefObject, forwardRef } from 'react';
+import { ReactElement, RefObject, forwardRef } from 'react';
 
 import { equals, isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
@@ -28,12 +28,12 @@ const useStyles = makeStyles()((theme) => ({
 
 interface Props {
   checkboxSelected?: boolean;
-  children: string;
+  children: string | ReactElement;
   thumbnailUrl?: string;
 }
 
 const Option = forwardRef(
-  ({ children, checkboxSelected, thumbnailUrl }: Props, ref): JSX.Element => {
+  ({ children, checkboxSelected, thumbnailUrl }: Props, ref): ReactElement => {
     const { classes } = useStyles();
 
     return (

package/src/components/Form/AccessRights/ShareInput/ShareInput.tsx

@@ -8,6 +8,7 @@ import { SelectEntry, SingleConnectedAutocompleteField } from '../../../..';
 import RoleSelectField from '../common/RoleSelectField';
 import { Endpoints, Labels } from '../models';
 
+import { ReactElement } from 'react';
 import ContactSwitch from './ContactSwitch';
 import { useShareInputStyles } from './ShareInput.styles';
 import useShareInput from './useShareInput';
@@ -18,18 +19,18 @@ interface Props {
   roles: Array<SelectEntry>;
 }
 
-const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
+const ShareInput = ({ labels, endpoints, roles }: Props): ReactElement => {
   const { t } = useTranslation();
   const { classes } = useShareInputStyles();
 
   const {
-    renderOption,
     selectedContact,
     getOptionDisabled,
     getEndpoint,
     selectContact,
     isContactGroup,
     selectedRole,
+    getRenderedOptionText,
     setSelectedRole,
     add,
     changeIdValue
@@ -46,6 +47,7 @@ const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
           disableClearable={false}
           field="name"
           getEndpoint={getEndpoint}
+          getRenderedOptionText={getRenderedOptionText}
           getOptionDisabled={getOptionDisabled}
           label={t(
             isContactGroup
@@ -53,7 +55,6 @@ const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
               : t(labels.autocompleteContact)
           )}
           queryKey={isContactGroup ? labels.contactGroup : labels.contact}
-          renderOption={renderOption}
           value={selectedContact}
           onChange={selectContact}
         />

package/src/components/Form/AccessRights/ShareInput/useShareInput.tsx

@@ -1,10 +1,15 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import {
+  Dispatch,
+  ReactElement,
+  SetStateAction,
+  useEffect,
+  useState
+} from 'react';
 
 import { useAtomValue, useSetAtom } from 'jotai';
 import { equals, includes, isNil } from 'ramda';
 
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import { ListItemText, MenuItem } from '@mui/material';
 
 import { SelectEntry, buildListingEndpoint } from '../../../..';
 import {
@@ -20,7 +25,7 @@ interface UseShareInputState {
   getEndpoint: (parameters) => string;
   getOptionDisabled: (option) => boolean;
   isContactGroup: boolean;
-  renderOption: (attr, option) => JSX.Element;
+  getRenderedOptionText: (option: unknown) => ReactElement | string;
   selectContact: (_, entry) => void;
   selectedContact: AccessRightInitialValues | null;
   selectedRole: string;
@@ -40,7 +45,7 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
 
   const selectContact = (_, entry): void => {
     setSelectedContact(entry);
-    if (equals('editor', entry.most_permissive_role)) {
+    if (equals('editor', entry?.most_permissive_role)) {
       return;
     }
     setSelectedRole('viewer');
@@ -71,14 +76,14 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
       }
     });
 
-  const renderOption = (attr, option): JSX.Element => {
+  const getRenderedOptionText = (option): ReactElement => {
     return (
-      <MenuItem {...attr}>
-        <ListItemText>{option.name}</ListItemText>
-        {includes(option.id, accessRightIds) && (
+      <>
+        {option?.name}
+        {includes(option?.id, accessRightIds) && (
           <CheckCircleIcon color="success" />
         )}
-      </MenuItem>
+      </>
     );
   };
 
@@ -102,7 +107,7 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
     getEndpoint,
     getOptionDisabled,
     isContactGroup,
-    renderOption,
+    getRenderedOptionText,
     selectContact,
     selectedContact,
     selectedRole,

package/src/components/Menu/Button/MenuButton.tsx

@@ -4,14 +4,13 @@ import {
   ArrowDropDown as ArrowDropDownIcon,
   Menu as MenuIcon
 } from '@mui/icons-material';
+import { useStyles } from './MenuButton.styles';
 
 import { AriaLabelingAttributes } from '../../../@types/aria-attributes';
 import { DataTestAttributes } from '../../../@types/data-attributes';
 import { Button, ButtonProps } from '../../Button';
 import { useMenu } from '../useMenu';
 
-import { useStyles } from './MenuButton.styles';
-
 type MenuButtonProps = {
   ariaLabel?: string;
   children?: ReactNode;