@centreon/ui 24.4.1-MON-34407-implement-the-status-chart-widget.12 → 24.4.1-MON-24235-Filter-App-token.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-34407-implement-the-status-chart-widget.12",
+  "version": "24.4.1-MON-24235-Filter-App-token.28",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -12,7 +12,7 @@ import { Tooltip } from '../../components';
 import { LegendProps } from '../Legend/models';
 import { Legend as LegendComponent } from '../Legend';
 import { getValueByUnit } from '../common/utils';
-import { labelNoDataFound as defaultlabelNoDataFound } from '../translatedLabels';
+import { labelNoDataFound } from '../translatedLabels';
 
 import { BarStackProps } from './models';
 import { useBarStackStyles } from './BarStack.styles';
@@ -35,8 +35,7 @@ const BarStack = ({
   unit = 'number',
   displayValues,
   variant = 'vertical',
-  legendDirection = 'column',
-  labelNoDataFound = defaultlabelNoDataFound
+  legendDirection = 'column'
 }: BarStackProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
   const { classes } = useBarStackStyles();
@@ -91,7 +90,7 @@ const BarStack = ({
       >
         {title && (
           <div className={classes.title} data-testid="Title" ref={titleRef}>
-            {`${numeral(total).format('0a').toUpperCase()} `} {t(title)}
+            {`${numeral(total).format('0a').toUpperCase()} `} {title}
           </div>
         )}
         <div
@@ -145,9 +144,8 @@ const BarStack = ({
                             isVerticalBar ? 'right-start' : 'bottom-start'
                           }
                         >
-                          <g data-testid={bar.key} onClick={onClick}>
+                          <g data-testid={bar.key}>
                             <rect
-                              cursor="pointer"
                               fill={bar.color}
                               height={
                                 isVerticalBar ? bar.height - 1 : bar.height
@@ -157,6 +155,7 @@ const BarStack = ({
                               width={isVerticalBar ? bar.width : bar.width - 1}
                               x={bar.x}
                               y={bar.y}
+                              onClick={onClick}
                             />
                             {displayValues &&
                               bar.height > 10 &&

package/src/Graph/BarStack/models.ts

@@ -10,7 +10,6 @@ export type BarStackProps = {
   data: Array<BarType>;
   displayLegend?: boolean;
   displayValues?: boolean;
-  labelNoDataFound?: string;
   legendDirection?: 'row' | 'column';
   onSingleBarClick?: (barData) => void;
   size?: number;

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -13,7 +13,7 @@ import { Tooltip } from '../../components';
 import { Legend as LegendComponent } from '../Legend';
 import { LegendProps } from '../Legend/models';
 import { getValueByUnit } from '../common/utils';
-import { labelNoDataFound as defaultlabelNoDataFound } from '../translatedLabels';
+import { labelNoDataFound } from '../translatedLabels';
 
 import { PieProps } from './models';
 import { usePieStyles } from './PieChart.styles';
@@ -54,8 +54,7 @@ const ResponsivePie = ({
   onArcClick,
   displayValues,
   TooltipContent,
-  legendDirection = 'column',
-  labelNoDataFound = defaultlabelNoDataFound
+  legendDirection = 'column'
 }: PieProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -110,7 +109,7 @@ const ResponsivePie = ({
       >
         {equals(variant, 'pie') && title && (
           <div className={classes.title} data-testid="Title" ref={titleRef}>
-            {`${numeral(total).format('0a').toUpperCase()} `} {t(title)}
+            {`${numeral(total).format('0a').toUpperCase()} `} {title}
           </div>
         )}
         <div
@@ -179,7 +178,6 @@ const ResponsivePie = ({
                       >
                         <g data-testid={arc.data.label} onClick={onClick}>
                           <path
-                            cursor="pointer"
                             d={pie.path(arc) as string}
                             fill={arc.data.color}
                           />
@@ -226,7 +224,7 @@ const ResponsivePie = ({
                     fill={theme.palette.text.primary}
                     textAnchor="middle"
                   >
-                    {t(title)}
+                    {title}
                   </Text>
                 </>
               )}

package/src/Graph/PieChart/models.ts

@@ -11,7 +11,6 @@ export interface PieProps {
   displayLegend?: boolean;
   displayValues?: boolean;
   innerRadius?: number;
-  labelNoDataFound?: string;
   legendDirection?: 'row' | 'column';
   onArcClick?: (ardata) => void;
   title?: string;

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

@@ -1,4 +1,4 @@
-import { includes, map, prop, reject } from 'ramda';
+import { includes, map, prop, reject, sortBy, toLower, compose } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { Chip, ChipProps, Tooltip } from '@mui/material';
@@ -85,9 +85,11 @@ const MultiAutocompleteField = ({
     return includes(id, valueIds);
   };
 
+  const sortByName = sortBy(compose(toLower, prop(optionProperty)));
+
   const autocompleteOptions = disableSortedOptions
     ? options
-    : [...values, ...reject(isOptionSelected, options)];
+    : sortByName([...values, ...reject(isOptionSelected, options)]);
 
   return (
     <Autocomplete

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

@@ -222,7 +222,8 @@ const AutocompleteField = React.forwardRef(
           ...params.inputProps,
           'aria-label': label,
           'data-testid': dataTestId || label,
-          id: getNormalizedId(label || '')
+          id: getNormalizedId(label || ''),
+          ...autocompleteProps?.inputProps
         }}
         label={label}
         placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}

package/src/PopoverMenu/index.tsx

@@ -6,14 +6,16 @@ import {
   ClickAwayListener,
   Paper,
   Popper,
-  PopperPlacementType,
-  useTheme
+  PopperPlacementType
 } from '@mui/material';
 import { PopperProps } from '@mui/material/Popper';
 
 import { IconButton } from '..';
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()((theme) => ({
+  popover: {
+    zIndex: theme.zIndex.tooltip
+  },
   popoverIconButton: {
     padding: 0,
     width: '100%'
@@ -52,7 +54,7 @@ const PopoverMenu = ({
   getPopoverData,
   popperProps
 }: Props): JSX.Element => {
-  const theme = useTheme();
+  // const theme = useTheme();
   const { classes, cx } = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>();
   const isOpen = Boolean(anchorEl);
@@ -105,9 +107,9 @@ const PopoverMenu = ({
           <Popper
             open
             anchorEl={anchorEl}
+            className={classes.popover}
             nonce={undefined}
             placement={popperPlacement}
-            style={{ zIndex: theme.zIndex.tooltip }}
             onResize={(): undefined => undefined}
             onResizeCapture={(): undefined => undefined}
             {...popperProps}

package/src/components/List/Item/ListItem.tsx

@@ -1,10 +1,10 @@
 import { ForwardedRef, forwardRef, ReactElement, ReactNode } from 'react';
 
-import { ListItem as MuiListItem } from '@mui/material';
+import { ListItemProps, ListItem as MuiListItem } from '@mui/material';
 
 import { useStyles } from './ListItem.styles';
 
-type ListItemProps = {
+type Props = {
   action?: ReactElement;
   children: ReactNode | Array<ReactNode>;
   className?: string;
@@ -12,7 +12,7 @@ type ListItemProps = {
 
 export const ListItem = forwardRef(
   (
-    { action, children, className, ...attr }: ListItemProps,
+    { action, children, className, ...attr }: Props & ListItemProps,
     ref?: ForwardedRef<HTMLLIElement>
   ) => {
     const { classes, cx } = useStyles();