@centreon/ui 24.4.46 → 24.4.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.46",
+  "version": "24.4.48",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -12,7 +12,6 @@
     "test:ci": "jest --silent --reporter=jest-junit",
     "cypress:ui": "cypress open --component --browser=chrome",
     "cypress:cli:updateSnapshot": "pnpm cypress:cli --env updateSnapshots=true",
-    "cypress:run:coverage": "cypress run --component --browser=chrome --env codeCoverageTasksRegistered=true",
     "cypress:cli": "cypress run --component --browser=chrome",
     "tokens:transform": "TS_NODE_PROJECT=tsconfig.node.json ts-node style-dictionary.transform.ts"
   },
@@ -28,7 +27,6 @@
   "author": {
     "name": "centreon@centreon.com"
   },
-  "baseCodeCoveragePercentage": 60,
   "license": "GPL-2.0",
   "bugs": {
     "url": "https://github.com/centreon/centreon/issues"
@@ -75,19 +73,16 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@types/cypress": "^1.1.3",
     "@types/jest": "^27.5.0",
-    "@types/mocha": "^10.0.6",
-    "@types/ramda": "^0.29.6",
+    "@types/ramda": "^0.28.12",
     "@types/react": "^18.0.26",
     "@types/testing-library__jest-dom": "^5.14.6",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-swc": "^3.3.0",
     "axios-mock-adapter": "^1.21.4",
-    "cypress": "^13.3.1",
+    "cypress": "^12.8.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",
-    "msw": "1.3.2",
-    "msw-storybook-addon": "^1.10.0",
     "puppeteer": "^13.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -102,35 +97,31 @@
     "ts-node": "^10.9.1",
     "use-resize-observer": "^9.1.0",
     "vite": "^4.3.5",
-    "vite-plugin-istanbul": "^5.0.0",
     "vite-plugin-svgr": "^3.2.0",
     "vite-plugin-turbosnap": "^1.0.2"
   },
   "dependencies": {
-    "@lexical/html": "^0.12.2",
-    "@lexical/link": "^0.12.2",
-    "@lexical/list": "^0.12.2",
-    "@lexical/react": "^0.12.2",
-    "@lexical/rich-text": "^0.12.2",
-    "@lexical/selection": "^0.12.2",
-    "@lexical/utils": "^0.12.2",
+    "@lexical/link": "0.11.3",
+    "@lexical/list": "^0.11.3",
+    "@lexical/react": "0.11.3",
+    "@lexical/rich-text": "^0.11.3",
+    "@lexical/selection": "0.11.3",
+    "@lexical/utils": "0.11.3",
     "@react-spring/web": "^9.7.3",
     "@visx/curve": "^2.1.0",
     "@visx/group": "^3.3.0",
-    "@visx/legend": "^3.5.0",
     "@visx/pattern": "^3.0.0",
     "@visx/scale": "^3.0.0",
     "@visx/shape": "^2.12.2",
-    "@visx/text": "^3.3.0",
     "@visx/threshold": "^2.12.2",
     "@visx/visx": "2.16.0",
     "anylogger": "^1.0.11",
     "d3-array": "3.2.0",
     "humanize-duration": "^3.27.3",
-    "lexical": "^0.12.2",
-    "notistack": "^3.0.1",
-    "numeral": "^2.0.6",
-    "ramda": "0.29.1",
+    "lexical": "0.11.3",
+    "msw": "0.49.1",
+    "msw-storybook-addon": "^1.10.0",
+    "notistack": "^2.0.8",
     "react-grid-layout": "^1.3.4",
     "react-html-parser": "^2.0.2",
     "react-resizable": "^3.0.5",
@@ -146,7 +137,7 @@
     "@mui/icons-material": "5.x",
     "@mui/material": "5.x",
     "@mui/styles": "5.x",
-    "@tanstack/react-query": "5.x",
+    "@tanstack/react-query": "4.x",
     "axios": "0.x",
     "dayjs": "1.x",
     "formik": "2.x",

package/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.3.2).
+ * Mock Service Worker (0.49.1).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

package/src/Button/Icon/index.tsx

@@ -21,7 +21,7 @@ type Props = {
   ariaLabel?: string;
   className?: string;
   onClick: (event) => void;
-  title?: string | JSX.Element;
+  title?: string;
   tooltipClassName?: string;
   tooltipPlacement?:
     | 'bottom'

package/src/Button/Save/StartIcon.tsx

@@ -15,9 +15,9 @@ interface Props {
 
 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 />)],
+    [pipe(propEq('hasLabel', true), not), always(null)],
+    [propEq('succeeded', true), always(<CheckIcon />)],
+    [propEq('loading', true), always(<SaveIcon />)],
     [T, always(<SaveIcon />)]
   ])(startIconConfig);
 

package/src/Button/Save/index.tsx

@@ -1,13 +1,13 @@
 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 { LoadingButton } from '@mui/lab';
 
 import { getNormalizedId } from '../../utils';
 
-import Content from './Content';
 import StartIcon from './StartIcon';
+import Content from './Content';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   loadingButton: {
@@ -15,14 +15,13 @@ const useStyles = makeStyles()((theme: Theme) => ({
   }
 }));
 
-interface Props {
+interface Props extends Record<string, unknown> {
   className?: string;
   labelLoading?: string;
   labelSave?: string;
   labelSucceeded?: string;
   loading?: boolean;
   size?: 'small' | 'medium' | 'large';
-  startIcon?: boolean;
   succeeded?: boolean;
   tooltip?: string;
   tooltipLabel?: string;
@@ -46,9 +45,8 @@ const SaveButton = ({
   labelSave = '',
   size = 'small',
   className,
-  startIcon = true,
   ...rest
-}: Props & LoadingButtonProps): JSX.Element => {
+}: Props): JSX.Element => {
   const { classes, cx } = useStyles();
   const hasLabel = hasValue([labelLoading, labelSave, labelSucceeded]);
 
@@ -75,9 +73,7 @@ const SaveButton = ({
           loading={loading}
           loadingPosition={labelLoading ? 'start' : 'center'}
           size={size}
-          startIcon={
-            startIcon && <StartIcon startIconConfig={startIconConfig} />
-          }
+          startIcon={<StartIcon startIconConfig={startIconConfig} />}
           variant="contained"
           {...rest}
         >

package/src/Checkbox/Checkbox.tsx

@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
 import { T, always, cond, equals } from 'ramda';
 
 import { SvgIconComponent } from '@mui/icons-material';
-import Typography, { TypographyProps } from '@mui/material/Typography';
+import Typography, { TypographyTypeMap } from '@mui/material/Typography';
 import { FormControlLabel, Checkbox as MuiCheckbox, Box } from '@mui/material';
 
 export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
@@ -56,7 +56,7 @@ interface Props {
   disabled?: boolean;
   label: string;
   labelPlacement?: LabelPlacement;
-  labelProps?: TypographyProps;
+  labelProps?: TypographyTypeMap['props'];
   onChange?: (e) => void;
 }
 

package/src/Checkbox/CheckboxGroup/index.tsx

@@ -2,7 +2,7 @@ import { equals, includes } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import FormGroup, { FormGroupProps } from '@mui/material/FormGroup';
-import { TypographyProps } from '@mui/material/Typography';
+import { TypographyTypeMap } from '@mui/material/Typography';
 
 import Checkbox, { LabelPlacement } from '../Checkbox';
 
@@ -13,7 +13,7 @@ interface Props {
   disabled?: boolean;
   formGroupProps?: FormGroupProps;
   labelPlacement?: LabelPlacement;
-  labelProps?: TypographyProps;
+  labelProps?: TypographyTypeMap['props'];
   onChange?: (e) => void;
   options: Array<string>;
   values: Array<string>;

package/src/Dashboard/Item.tsx

@@ -27,7 +27,7 @@ interface DashboardItemProps {
   style?: CSSProperties;
 }
 
-const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
+const Item = forwardRef(
   (
     {
       children,

package/src/Dashboard/Layout.tsx

@@ -23,7 +23,7 @@ interface DashboardLayoutProps<T> {
   layout: Array<T>;
 }
 
-const DashboardLayout = <T extends Layout>({
+const Layout = <T extends Layout>({
   children,
   changeLayout,
   displayGrid,
@@ -76,4 +76,4 @@ const DashboardLayout = <T extends Layout>({
   });
 };
 
-export default DashboardLayout;
+export default Layout;

package/src/Dialog/index.tsx

@@ -43,7 +43,7 @@ export type Props = {
   dialogTitleClassName?: string;
   labelCancel?: string | null;
   labelConfirm?: string | null;
-  labelTitle?: ReactNode;
+  labelTitle?: string | null;
   onCancel?: () => void;
   onClose?: () => void;
   onConfirm: (event, value?) => void;

package/src/FallbackPage/FallbackPage.tsx

@@ -17,7 +17,7 @@ const useStyles = makeStyles()((theme) => ({
   logo: {
     alignSelf: 'flex-end',
     height: theme.spacing(11),
-    width: '239px'
+    width: '22rem'
   },
   message: {
     color: theme.palette.text.primary
@@ -66,9 +66,9 @@ export const FallbackPage: FC<FallbackPageProps> = typedMemo(
 
     return (
       <div className={classes.notAuthorizedContainer}>
-        <div className={classes.logo}>
+        <section className={classes.logo}>
           <CentreonLogo />
-        </div>
+        </section>
         <section className={classes.messageBlock}>
           <header>
             <Typography color="primary" fontWeight="bold" variant="h3">

package/src/FileDropZone/index.tsx

@@ -98,9 +98,7 @@ const getExtensions = cond([
   [T, identity]
 ]) as (accept: string) => Array<string>;
 
-export const transformFileListToArray = (
-  files: FileList | null
-): Array<File> =>
+export const transformFileListToArray = (files: FileList | null): Array<File> =>
   isNil(files)
     ? []
     : (Array(files.length)

package/src/Form/Inputs/CheckboxGroup.tsx

@@ -46,7 +46,10 @@ const CheckboxGroup = ({
       return;
     }
 
-    setFieldValue(fieldName, value?.filter((elm) => !equals(elm, label)));
+    setFieldValue(
+      fieldName,
+      value?.filter((elm) => !equals(elm, label))
+    );
   };
 
   return useMemoComponent({

package/src/Form/Inputs/index.tsx

@@ -21,7 +21,6 @@ import CheckboxGroup from './CheckboxGroup';
 import Checkbox from './Checkbox';
 import Custom from './Custom';
 import LoadingSkeleton from './LoadingSkeleton';
-import List from './List/List';
 
 export const getInput = R.cond<
   Array<InputType>,
@@ -67,7 +66,6 @@ export const getInput = R.cond<
     R.equals(InputType.CheckboxGroup) as (b: InputType) => boolean,
     R.always(CheckboxGroup)
   ],
-  [R.equals(InputType.List) as (b: InputType) => boolean, R.always(List)],
   [R.T, R.always(TextInput)]
 ]);
 
@@ -187,7 +185,7 @@ const Inputs = ({
         const hasGroupTitle = R.not(R.isNil(groupName));
 
         const groupProps = hasGroupTitle
-          ? R.find(R.propEq(groupName, 'name'), groups)
+          ? R.find(R.propEq('name', groupName), groups)
           : ({} as Group);
 
         const isFirstElement = areGroupsOpen || R.equals(index, 0);

package/src/Form/Inputs/models.ts

@@ -18,8 +18,7 @@ export enum InputType {
   Grid,
   Custom,
   Checkbox,
-  CheckboxGroup,
-  List
+  CheckboxGroup
 }
 
 interface FieldsTableGetRequiredProps {
@@ -77,13 +76,6 @@ export interface InputProps {
   hideInput?: (values: FormikValues) => boolean;
   inputClassName?: string;
   label: string;
-  list?: {
-    AddItem: React.ComponentType<{ addItem }>;
-    SortContent: React.ComponentType<object>;
-    addItemLabel?: string;
-    itemProps: Array<string>;
-    sortLabel?: string;
-  };
   radio?: {
     options?: Array<{
       label: string | JSX.Element;

package/src/Graph/Gauge/Gauge.tsx

@@ -5,7 +5,7 @@ import { Metric } from '../common/timeSeries/models';
 
 import ResponsiveGauge from './ResponsiveGauge';
 
-export interface Props {
+interface Props {
   baseColor?: string;
   data?: LineChartData;
   displayAsRaw?: boolean;

package/src/Graph/HeatMap/HeatMap.stories.tsx

@@ -3,6 +3,8 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Box, Typography } from '@mui/material';
 
+import EllipsisTypography from '../../Typography/EllipsisTypography';
+
 import heatMapData from './HeatMapData.json';
 
 import { HeatMap } from '.';
@@ -20,6 +22,29 @@ const meta: Meta<typeof HeatMap<Data>> = {
 export default meta;
 type Story = StoryObj<typeof HeatMap<Data>>;
 
+const TileContent = ({
+  isSmallestSize,
+  data
+}: {
+  data: Data;
+  isSmallestSize: boolean;
+}): JSX.Element | false =>
+  !isSmallestSize && (
+    <Box
+      sx={{
+        alignItems: 'center',
+        color: 'common.black',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%'
+      }}
+    >
+      <EllipsisTypography textAlign="center">{data.host}</EllipsisTypography>
+      <EllipsisTypography textAlign="center">{data.service}</EllipsisTypography>
+      <EllipsisTypography textAlign="center">{data.counter}</EllipsisTypography>
+    </Box>
+  );
+
 const TooltipContent = ({ data }: { data: Data }): JSX.Element => {
   return (
     <Box sx={{ backgroundColor: 'common.white', color: 'common.black' }}>

package/src/Graph/HeatMap/ResponsiveHeatMap.tsx

@@ -40,7 +40,7 @@ const ResponsiveHeatMap = <TData,>({
     const theoricalTotalTilesWidth =
       tilesLength * tileWidth + (tilesLength - 1) * gap;
 
-    if (lt(width, 680) && gt(maxTotalTilesWidth, width) && !tileSizeFixed) {
+    if (lt(width, 680) && gt(maxTotalTilesWidth, width)) {
       return smallestTileSize;
     }
 
@@ -66,19 +66,13 @@ const ResponsiveHeatMap = <TData,>({
       }}
     >
       {tiles.map(({ backgroundColor, id, data }) => (
-        <Box
-          className={classes.heatMapTile}
-          data-testid={id}
-          key={id}
-          sx={{ backgroundColor }}
-        >
+        <Box className={classes.heatMapTile} key={id} sx={{ backgroundColor }}>
           <Tooltip
             hasCaret
             classes={{
               arrow: cx(classes.heatMapTooltipArrow, arrowClassName),
               tooltip: classes.heatMapTooltip
             }}
-            data-testid={`tooltip-${data?.id}`}
             followCursor={false}
             label={
               displayTooltipCondition?.(data) &&

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/Circle.tsx

@@ -1,7 +1,7 @@
 import { Shape } from '@visx/visx';
 import { isEmpty, isNil } from 'ramda';
 
-import { Circle as CircleModel } from './models';
+import { Circle } from './models';
 import useCoordinateCircle from './useCoordinateCircle';
 
 const Circle = ({
@@ -11,7 +11,7 @@ const Circle = ({
   timeSeries,
   getX,
   getCountDisplayedCircles
-}: CircleModel): JSX.Element | null => {
+}: Circle): JSX.Element | null => {
   const coordinates = useCoordinateCircle({
     getCountDisplayedCircles,
     getX,

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/index.tsx

@@ -130,11 +130,10 @@ const WrapperThresholdLines = ({
 
   return (
     <g>
-      {filteredThresholdLines.map(
-        (element) =>
-          element?.map(({ Component, props, key }) => (
-            <Component {...props} id={key} key={key} />
-          ))
+      {filteredThresholdLines.map((element) =>
+        element?.map(({ Component, props, key }) => (
+          <Component {...props} id={key} key={key} />
+        ))
       )}
     </g>
   );

package/src/Graph/LineChart/BasicComponents/Thresholds.tsx

@@ -2,7 +2,7 @@ import { equals, isNil } from 'ramda';
 
 import { getUnits, getYScale } from '../../common/timeSeries';
 import { Line } from '../../common/timeSeries/models';
-import { Thresholds as ThresholdsModel } from '../../common/models';
+import { Thresholds } from '../../common/models';
 
 import { ThresholdLine } from './ThresholdLine';
 
@@ -13,7 +13,7 @@ interface Props {
   rightScale: (value: number) => number;
   showTooltip: (props) => void;
   thresholdUnit?: string;
-  thresholds: ThresholdsModel;
+  thresholds: Thresholds;
   width: number;
 }
 

package/src/Graph/LineChart/BasicComponents/useFilterLines.ts

@@ -28,7 +28,7 @@ const useFilterLines = ({
   linesGraph,
   setLinesGraph
 }: UseFilterLines): Result => {
-  const displayedLines = reject(propEq(false, 'display'), linesGraph ?? lines);
+  const displayedLines = reject(propEq('display', false), linesGraph ?? lines);
   const filterLines = (): Array<Line> => {
     const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
 

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/GuidingLines.tsx

@@ -2,7 +2,7 @@ import { Shape } from '@visx/visx';
 
 import { grey } from '@mui/material/colors';
 
-import { GuidingLines as GuidingLinesModel } from './models';
+import { GuidingLines } from './models';
 import useTickGraph from './useTickGraph';
 
 const GuidingLines = ({
@@ -10,7 +10,7 @@ const GuidingLines = ({
   xScale,
   graphHeight,
   graphWidth
-}: GuidingLinesModel): JSX.Element | null => {
+}: GuidingLines): JSX.Element | null => {
   const { positionX, positionY } = useTickGraph({
     timeSeries,
     xScale

package/src/Graph/LineChart/InteractiveComponents/Annotations/Annotation/index.tsx

@@ -43,8 +43,9 @@ const Annotation = ({
 
   const setAnnotationHovered = useSetAtom(annotationHoveredAtom);
 
-  const content = `${truncate(event.content)} (${t(labelBy)} ${event.contact
-    ?.name})`;
+  const content = `${truncate(event.content)} (${t(labelBy)} ${
+    event.contact?.name
+  })`;
 
   return (
     <g>

package/src/Graph/LineChart/InteractiveComponents/Annotations/EventAnnotations.tsx

@@ -26,7 +26,7 @@ const EventAnnotations = ({
   color,
   annotationHoveredId
 }: Props): JSX.Element => {
-  const events = filter(propEq(type, 'type'), data);
+  const events = filter(propEq('type', type), data);
 
   return (
     <>

package/src/Graph/LineChart/Legend/Legend.styles.ts

@@ -8,7 +8,7 @@ interface MakeStylesProps {
 
 export const legendWidth = 21;
 const legendItemHeight = 5.25;
-const legendItemHeightCompact = 2;
+const legendItemHeightCompact = 1.75;
 
 export const useStyles = makeStyles<MakeStylesProps>()(
   (theme, { limitLegendRows }) => ({

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

@@ -38,7 +38,7 @@ const LegendHeader = ({
 
   const getEndText = (): string => {
     if (value) {
-      return value;
+      return `${value}${hasUnit ? ` ${unit}` : ''}`;
     }
 
     return hasUnit ? ` ${unitName}` : '';

package/src/Graph/LineChart/Legend/useInteractiveValues.ts

@@ -5,7 +5,7 @@ import { equals, find, isNil } from 'ramda';
 
 import { mousePositionAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
 import {
-  formatMetricValueWithUnit,
+  formatMetricValue,
   getLineForMetric,
   getMetrics,
   getTimeValue
@@ -73,7 +73,7 @@ const useInteractiveValues = ({
       metric_id
     }) as Line;
 
-    const formattedValue = formatMetricValueWithUnit({
+    const formattedValue = formatMetricValue({
       base,
       unit,
       value

package/src/Graph/LineChart/Legend/useLegend.ts

@@ -27,9 +27,9 @@ interface Props {
 }
 
 const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
-  const displayedLines = reject(propEq(false, 'display'), lines);
+  const displayedLines = reject(propEq('display', false), lines);
   const getLineByMetric = (metric_id: number): Line =>
-    find(propEq(metric_id, 'metric_id'), lines) as Line;
+    find(propEq('metric_id', metric_id), lines) as Line;
 
   const toggleMetricLine = (metric_id): void => {
     const data = lines.map((line) => ({
@@ -92,7 +92,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
 
     const newLines = lines.map((line) => ({
       ...line,
-      display: find(propEq(line.metric_id, 'metric_id'), lines)?.display ?? true
+      display: find(propEq('metric_id', line.metric_id), lines)?.display ?? true
     }));
 
     setLinesGraph(newLines);

package/src/Graph/LineChart/helpers/doc.ts

@@ -69,24 +69,21 @@ export const getDescription = ({ sections }: Description): string => {
       })}<br></details>`;
     }
 
-    const formattedProps = props.reduce(
-      (accumulator, currentValue, index) => {
-        const key = Object.keys(currentValue)[0];
-        const { description, type } = currentValue[key];
-        const body = `${accumulator} ${getBodyDescription({
-          description,
-          key,
-          type
-        })}`;
+    const formattedProps = props.reduce((accumulator, currentValue, index) => {
+      const key = Object.keys(currentValue)[0];
+      const { description, type } = currentValue[key];
+      const body = `${accumulator} ${getBodyDescription({
+        description,
+        key,
+        type
+      })}`;
 
-        if (!equals(index, props.length - 1)) {
-          return body;
-        }
+      if (!equals(index, props.length - 1)) {
+        return body;
+      }
 
-        return `${body}</details>`;
-      },
-      getInitialValue({ section: name, type: item?.type })
-    );
+      return `${body}</details>`;
+    }, getInitialValue({ section: name, type: item?.type }));
 
     return formattedProps as string;
   });

package/src/Graph/LineChart/helpers/index.ts

@@ -14,7 +14,7 @@ import { LineChartData } from '../../common/models';
 export const adjustGraphData = (graphData: LineChartData): LinesData => {
   const lines = getLineData(graphData);
   const sortedLines = sortBy(prop('name'), lines);
-  const displayedLines = reject(propEq(false, 'display'), sortedLines);
+  const displayedLines = reject(propEq('display', false), sortedLines);
 
   const timeSeries = getTimeSeries(graphData);