@centreon/ui 24.4.1-MON-24417-integrate-newman-collection-api-v2.4 → 24.4.1-MON-34691-improve-code-coverage.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-24417-integrate-newman-collection-api-v2.4",
+  "version": "24.4.1-MON-34691-improve-code-coverage.0",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -85,6 +85,8 @@
     "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",
@@ -157,5 +159,8 @@
   "jest-junit": {
     "suiteName": "jest tests",
     "output": "./junit.xml"
+  },
+  "msw": {
+    "workerDirectory": "public"
   }
 }

package/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.2.1).
+ * Mock Service Worker (1.3.2).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
@@ -300,4 +300,4 @@ function sleep(timeMs) {
 async function respondWithMock(response) {
   await sleep(response.delay)
   return new Response(response.body, response)
-}
+}

package/src/Button/Icon/index.stories.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import AccessibilityIcon from '@mui/icons-material/Accessibility';
 import { Theme } from '@mui/material';
 
-import IconButton from '.';
+import { IconButton } from '.';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   root: {

package/src/Button/Icon/index.tsx

@@ -38,7 +38,7 @@ type Props = {
     | 'top-start';
 } & IconButtonProps;
 
-const IconButton = ({
+export const IconButton = ({
   title = '',
   ariaLabel,
   className,

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 StartIcon from './StartIcon';
 import Content from './Content';
+import StartIcon from './StartIcon';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   loadingButton: {
@@ -15,13 +15,14 @@ const useStyles = makeStyles()((theme: Theme) => ({
   }
 }));
 
-interface Props extends Record<string, unknown> {
+interface Props {
   className?: string;
   labelLoading?: string;
   labelSave?: string;
   labelSucceeded?: string;
   loading?: boolean;
   size?: 'small' | 'medium' | 'large';
+  startIcon?: boolean;
   succeeded?: boolean;
   tooltip?: string;
   tooltipLabel?: string;
@@ -45,8 +46,9 @@ const SaveButton = ({
   labelSave = '',
   size = 'small',
   className,
+  startIcon = true,
   ...rest
-}: Props): JSX.Element => {
+}: Props & LoadingButtonProps): JSX.Element => {
   const { classes, cx } = useStyles();
   const hasLabel = hasValue([labelLoading, labelSave, labelSucceeded]);
 
@@ -73,7 +75,9 @@ const SaveButton = ({
           loading={loading}
           loadingPosition={labelLoading ? 'start' : 'center'}
           size={size}
-          startIcon={<StartIcon startIconConfig={startIconConfig} />}
+          startIcon={
+            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, { TypographyTypeMap } from '@mui/material/Typography';
+import Typography, { TypographyProps } 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?: TypographyTypeMap['props'];
+  labelProps?: TypographyProps;
   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 { TypographyTypeMap } from '@mui/material/Typography';
+import { TypographyProps } from '@mui/material/Typography';
 
 import Checkbox, { LabelPlacement } from '../Checkbox';
 
@@ -13,7 +13,7 @@ interface Props {
   disabled?: boolean;
   formGroupProps?: FormGroupProps;
   labelPlacement?: LabelPlacement;
-  labelProps?: TypographyTypeMap['props'];
+  labelProps?: TypographyProps;
   onChange?: (e) => void;
   options: Array<string>;
   values: Array<string>;

package/src/Dialog/index.tsx

@@ -43,7 +43,7 @@ export type Props = {
   dialogTitleClassName?: string;
   labelCancel?: string | null;
   labelConfirm?: string | null;
-  labelTitle?: string | null;
+  labelTitle?: ReactNode;
   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: '22rem'
+    width: '239px'
   },
   message: {
     color: theme.palette.text.primary
@@ -66,9 +66,9 @@ export const FallbackPage: FC<FallbackPageProps> = typedMemo(
 
     return (
       <div className={classes.notAuthorizedContainer}>
-        <section className={classes.logo}>
+        <div className={classes.logo}>
           <CentreonLogo />
-        </section>
+        </div>
         <section className={classes.messageBlock}>
           <header>
             <Typography color="primary" fontWeight="bold" variant="h3">

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

@@ -8,7 +8,7 @@ interface MakeStylesProps {
 
 export const legendWidth = 21;
 const legendItemHeight = 5.25;
-const legendItemHeightCompact = 1.75;
+const legendItemHeightCompact = 2;
 
 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}${hasUnit ? ` ${unit}` : ''}`;
+      return value;
     }
 
     return hasUnit ? ` ${unitName}` : '';

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

@@ -7,7 +7,6 @@ import { Box, alpha, useTheme } from '@mui/material';
 
 import { useMemoComponent } from '@centreon/ui';
 
-import { maxLinesDisplayedLegend } from '../common';
 import { formatMetricValue } from '../../common/timeSeries';
 import { Line, TimeValue } from '../../common/timeSeries/models';
 import { labelAvg, labelMax, labelMin } from '../translatedLabels';
@@ -24,7 +23,7 @@ import LegendContent from './LegendContent';
 interface Props {
   base: number;
   displayAnchor?: boolean;
-  limitLegendRows?: boolean;
+  limitLegend?: false | number;
   lines: Array<Line>;
   renderExtraComponent?: ReactNode;
   setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
@@ -39,14 +38,14 @@ const MainLegend = ({
   timeSeries,
   base,
   toggable = true,
-  limitLegendRows = true,
+  limitLegend = false,
   renderExtraComponent,
   displayAnchor = true,
   setLinesGraph,
   xScale,
   shouldDisplayLegendInCompactMode
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ limitLegendRows });
+  const { classes, cx } = useStyles({ limitLegendRows: Boolean(limitLegend) });
   const theme = useTheme();
 
   const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
@@ -61,8 +60,8 @@ const MainLegend = ({
 
   const sortedData = sortBy(prop('metric_id'), lines);
 
-  const displayedLines = limitLegendRows
-    ? slice(0, maxLinesDisplayedLegend, sortedData)
+  const displayedLines = limitLegend
+    ? slice(0, limitLegend, sortedData)
     : sortedData;
 
   const getMetricValue = ({ value, unit }: GetMetricValueProps): string =>
@@ -174,7 +173,7 @@ const MainLegend = ({
 const Legend = (props: Props): JSX.Element => {
   const {
     toggable,
-    limitLegendRows,
+    limitLegend,
     timeSeries,
     lines,
     base,
@@ -191,7 +190,7 @@ const Legend = (props: Props): JSX.Element => {
       lines,
       base,
       toggable,
-      limitLegendRows,
+      limitLegend,
       displayAnchor,
       shouldDisplayLegendInCompactMode
     ]

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

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

package/src/Graph/LineChart/LineChart.tsx

@@ -43,6 +43,7 @@ interface Props extends LineChartProps {
   graphInterval: GraphInterval;
   graphRef: MutableRefObject<HTMLDivElement | null>;
   legend?: LegendModel;
+  limitLegend?: false | number;
   marginBottom: number;
   shapeLines?: GlobalAreaLines;
   thresholdUnit?: string;
@@ -73,7 +74,8 @@ const LineChart = ({
   curve,
   marginBottom,
   thresholds,
-  thresholdUnit
+  thresholdUnit,
+  limitLegend
 }: Props): JSX.Element => {
   const { classes } = useStyles();
 
@@ -301,6 +303,7 @@ const LineChart = ({
           <Legend
             base={baseAxis}
             displayAnchor={displayAnchor?.displayGuidingLines ?? true}
+            limitLegend={limitLegend}
             lines={newLines}
             renderExtraComponent={legend?.renderExtraComponent}
             setLinesGraph={setLinesGraph}

package/src/Graph/LineChart/index.tsx

@@ -28,6 +28,7 @@ interface Props extends Partial<LineChartProps> {
   data?: LineChartData;
   end: string;
   legend: LegendModel;
+  limitLegend?: false | number;
   loading: boolean;
   marginBottom?: number;
   shapeLines?: GlobalAreaLines;
@@ -55,7 +56,8 @@ const WrapperLineChart = ({
   curve = Curve.curveLinear,
   marginBottom = 0,
   thresholds,
-  thresholdUnit
+  thresholdUnit,
+  limitLegend
 }: Props): JSX.Element | null => {
   const { adjustedData } = useLineChartData({ data, end, start });
   const lineChartRef = useRef<HTMLDivElement | null>(null);
@@ -76,7 +78,7 @@ const WrapperLineChart = ({
   return (
     <div
       ref={lineChartRef as MutableRefObject<HTMLDivElement>}
-      style={{ height: '100%', width: '100%' }}
+      style={{ height: '100%', overflowY: 'hidden', width: '100%' }}
     >
       <ParentSize>
         {({
@@ -95,6 +97,7 @@ const WrapperLineChart = ({
               header={header}
               height={height || responsiveHeight}
               legend={legend}
+              limitLegend={limitLegend}
               loading={loading}
               marginBottom={marginBottom}
               shapeLines={shapeLines}

package/src/Graph/index.ts

@@ -2,4 +2,5 @@ export { default as LineChart } from './LineChart';
 export { Gauge } from './Gauge';
 export { SingleBar } from './SingleBar';
 export { Text as GraphText } from './Text';
+
 export { HeatMap } from './HeatMap';

package/src/InputField/Number/Number.cypress.spec.tsx

@@ -0,0 +1,85 @@
+import NumberField, { NumberProps } from './Number';
+
+const initialize = (props: NumberProps): void => {
+  cy.mount({
+    Component: <NumberField {...props} />
+  });
+};
+
+describe('Number field', () => {
+  it('displays the placeholder when the field has no default or fallback values', () => {
+    initialize({ dataTestId: 'test', onChange: cy.stub() });
+
+    cy.get('input').should('have.value', '');
+    cy.get('input').should('have.attr', 'placeholder', '0');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the fallback value as placeholder when the field as no default value', () => {
+    initialize({ dataTestId: 'test', fallbackValue: 25, onChange: cy.stub() });
+
+    cy.get('input').should('have.value', '');
+    cy.get('input').should('have.attr', 'placeholder', '25');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the default value as placeholder when the field as default value', () => {
+    initialize({ dataTestId: 'test', defaultValue: 25, onChange: cy.stub() });
+
+    cy.get('input').should('have.value', '25');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the fallback value when the field is cleared out', () => {
+    initialize({
+      dataTestId: 'test',
+      defaultValue: 25,
+      fallbackValue: 10,
+      onChange: cy.stub()
+    });
+
+    cy.get('input').should('have.value', '25');
+    cy.get('input').clear();
+    cy.get('input').should('have.value', '');
+    cy.get('input').should('have.attr', 'placeholder', '10');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the field using auto size', () => {
+    initialize({
+      autoSize: true,
+      dataTestId: 'test',
+      defaultValue: 25,
+      onChange: cy.stub()
+    });
+
+    cy.get('input').should('have.value', '25');
+
+    cy.get('input').type('0');
+
+    cy.makeSnapshot();
+  });
+
+  it('sets the value to the minimum value configured when a value less than the minimum value is typed in the field', () => {
+    initialize({
+      dataTestId: 'test',
+      defaultValue: 25,
+      inputProps: {
+        min: 2
+      },
+      onChange: cy.stub()
+    });
+
+    cy.get('input').should('have.value', '25');
+
+    cy.get('input').clear().type('-1');
+
+    cy.get('input').should('have.value', '2');
+
+    cy.makeSnapshot();
+  });
+});

package/src/InputField/Number/Number.stories.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable no-console */
+import { Meta, StoryObj } from '@storybook/react';
+
+import NumberField from './Number';
+
+const meta: Meta<typeof NumberField> = {
+  argTypes: {
+    defaultValue: {
+      defaultValue: 0,
+      description:
+        'The initial value which will be used by the input for the first render',
+      type: 'number'
+    },
+    fallbackValue: {
+      defaultValue: 0,
+      description: 'This value will be used when the input is cleared',
+      type: 'number'
+    },
+    onChange: {
+      description:
+        'The change function with the actual value as parameter. This parameter will be the value when the input is filled but it will be the fallbackValue when the input is cleared out',
+      type: 'function'
+    }
+  },
+  component: NumberField
+};
+
+export default meta;
+type Story = StoryObj<typeof NumberField>;
+
+export const Default: Story = {
+  args: {
+    onChange: console.log
+  }
+};
+
+export const WithDefaultValue: Story = {
+  args: {
+    defaultValue: 25,
+    onChange: console.log
+  }
+};
+
+export const WithFallbackValue: Story = {
+  args: {
+    fallbackValue: 25,
+    onChange: console.log
+  }
+};
+
+export const WithFallbackValueAndDefaultValue: Story = {
+  args: {
+    defaultValue: 10,
+    fallbackValue: 25,
+    onChange: console.log
+  }
+};
+
+export const WithFallbackValueAndDefaultValueAutoSize: Story = {
+  args: {
+    autoSize: true,
+    defaultValue: 10,
+    fallbackValue: 25,
+    onChange: console.log
+  }
+};

package/src/InputField/Number/Number.tsx

@@ -0,0 +1,74 @@
+import { ChangeEvent, useState } from 'react';
+
+import { T, always, cond, isEmpty, isNil } from 'ramda';
+
+import TextField, { TextProps } from '../Text';
+
+export interface NumberProps
+  extends Omit<TextProps, 'defaultValue' | 'onChange'> {
+  /**
+   * The initial value which will be used by the input for the first render
+   */
+  defaultValue?: number;
+  /**
+   *  This value will be used when the input is cleared
+   */
+  fallbackValue?: number;
+  /**
+   * The change function with the actual value as parameter. This parameter will be the value when the input is filled but it will be the fallbackValue when the input is cleared out
+   */
+  onChange: (actualValue: number) => void;
+}
+
+const NumberField = ({
+  fallbackValue = 0,
+  defaultValue,
+  onChange,
+  ...props
+}: NumberProps): JSX.Element => {
+  const [placeholder, setPlaceholder] = useState<string | undefined>();
+  const [actualValue, setActualValue] = useState(
+    defaultValue ? `${defaultValue}` : ''
+  );
+
+  const { inputProps } = props;
+
+  const changeValue = (event: ChangeEvent<HTMLInputElement>): void => {
+    const inputValue = event.target.value;
+
+    const number = Number(inputValue);
+    const campledNumber = cond([
+      [() => isEmpty(inputValue), always(fallbackValue)],
+      [() => Number.isNaN(number), always(number)],
+      [
+        T,
+        always(
+          Math.max(
+            !isNil(inputProps?.min) ? inputProps?.min : -Infinity,
+            number
+          )
+        )
+      ]
+    ])();
+
+    onChange(campledNumber);
+    setPlaceholder(isEmpty(inputValue) ? `${fallbackValue}` : undefined);
+    setActualValue(isEmpty(inputValue) ? inputValue : `${campledNumber}`);
+  };
+
+  return (
+    <TextField
+      defaultValue={defaultValue}
+      type="number"
+      value={actualValue}
+      onChange={changeValue}
+      {...props}
+      inputProps={inputProps}
+      placeholder={
+        placeholder || (!defaultValue ? `${fallbackValue}` : undefined)
+      }
+    />
+  );
+};
+
+export default NumberField;

package/src/InputField/Search/index.tsx

@@ -1,8 +1,8 @@
 import IconSearch from '@mui/icons-material/Search';
 
-import TextField, { Props as TextFieldProps } from '../Text';
+import TextField, { TextProps } from '../Text';
 
-type Props = Omit<TextFieldProps, 'StartAdornment'>;
+type Props = Omit<TextProps, 'StartAdornment'>;
 
 const SearchAdornment = (): JSX.Element => <IconSearch />;
 

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

@@ -33,6 +33,7 @@ import useFetchQuery from '../../../../api/useFetchQuery';
 export interface ConnectedAutoCompleteFieldProps<TData> {
   allowUniqOption?: boolean;
   baseEndpoint?: string;
+  changeIdValue: (item: TData) => number | string;
   conditionField?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
@@ -62,6 +63,7 @@ const ConnectedAutocompleteField = (
     queryKey,
     allowUniqOption,
     baseEndpoint,
+    changeIdValue,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
     Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
@@ -238,17 +240,24 @@ const ConnectedAutocompleteField = (
 
         const moreOptions = page > 1 ? options : [];
 
+        const formattedList = changeIdValue
+          ? newOptions.result.map((item) => ({
+              ...item,
+              id: changeIdValue(item)
+            }))
+          : newOptions.result;
+
         if (!isEmpty(labelKey) && !isNil(labelKey)) {
-          const list = newOptions.result.map((item) =>
+          const list = formattedList.map((item) =>
             renameKey({ key: labelKey, newKey: 'name', object: item })
           );
           setOptions(moreOptions.concat(list as Array<TData>));
 
           return;
         }
-        setOptions(moreOptions.concat(newOptions.result));
+        setOptions(moreOptions.concat(formattedList));
 
-        setOptions(moreOptions.concat(newOptions.result as Array<TData>));
+        setOptions(moreOptions.concat(formattedList as Array<TData>));
 
         const total = prop('total', newOptions.meta) || 1;
         const limit = prop('limit', newOptions.meta) || 1;