@centreon/ui 24.4.59 → 24.4.61

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.59",
+  "version": "24.4.61",
   "description": "Centreon UI Components",
   "scripts": {
+    "update:deps": "pnpx npm-check-updates -i --format group",
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
     "eslint:fix": "pnpm eslint --fix",
     "storybook": "storybook dev -p 9001 -c .storybook",
@@ -12,6 +13,7 @@
     "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"
   },
@@ -27,6 +29,7 @@
   "author": {
     "name": "centreon@centreon.com"
   },
+  "baseCodeCoveragePercentage": 60,
   "license": "GPL-2.0",
   "bugs": {
     "url": "https://github.com/centreon/centreon/issues"
@@ -46,11 +49,11 @@
     "test/*"
   ],
   "devDependencies": {
-    "@cypress/react": "^7.0.2",
-    "@cypress/webpack-dev-server": "^3.2.3",
-    "@faker-js/faker": "^8.0.2",
-    "@mdx-js/react": "^2.1.4",
-    "@simonsmith/cypress-image-snapshot": "^6.1.0",
+    "@cypress/react": "^8.0.0",
+    "@cypress/webpack-dev-server": "^3.7.4",
+    "@faker-js/faker": "^8.4.1",
+    "@mdx-js/react": "^3.0.1",
+    "@simonsmith/cypress-image-snapshot": "^9.0.1",
     "@storybook/addon-a11y": "^7.0.9",
     "@storybook/addon-docs": "^7.0.9",
     "@storybook/addon-essentials": "^7.0.9",
@@ -60,73 +63,78 @@
     "@storybook/builder-vite": "^7.0.9",
     "@storybook/jest": "^0.1.0",
     "@storybook/manager-api": "^7.0.9",
-    "@storybook/mdx2-csf": "^1.0.0",
+    "@storybook/mdx2-csf": "^1.1.0",
     "@storybook/preview-api": "^7.0.9",
     "@storybook/react": "^7.0.9",
     "@storybook/react-vite": "^7.0.9",
-    "@storybook/test-runner": "^0.10.0",
+    "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.1.0",
     "@storybook/theming": "^7.0.9",
     "@testing-library/cypress": "^8.0.7",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@types/cypress": "^1.1.3",
-    "@types/jest": "^27.5.0",
-    "@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": "^12.8.0",
+    "@types/jest": "^29.5.12",
+    "@types/mocha": "^10.0.6",
+    "@types/ramda": "^0.29.9",
+    "@types/react": "^18.2.65",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react-swc": "^3.6.0",
+    "axios-mock-adapter": "^1.22.0",
+    "cypress": "^13.7.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",
     "react-test-renderer": "^18.2.0",
     "remark-gfm": "^3.0.1",
-    "sass": "^1.62.1",
     "speed-measure-vite-plugin": "^0.1.2",
-    "storybook": "^7.0.9",
-    "storybook-addon-mock": "^4.0.0",
-    "storybook-dark-mode": "^3.0.0",
-    "style-dictionary": "^3.8.0",
-    "ts-node": "^10.9.1",
+    "storybook": "^7.6.8",
+    "storybook-addon-mock": "^4.3.0",
+    "storybook-dark-mode": "^3.0.3",
+    "style-dictionary": "^3.9.2",
+    "ts-node": "^10.9.2",
     "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"
+    "vite-plugin-turbosnap": "^1.0.3"
   },
   "dependencies": {
-    "@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",
+    "@lexical/html": "^0.12.6",
+    "@lexical/link": "^0.12.6",
+    "@lexical/list": "^0.12.6",
+    "@lexical/react": "^0.12.6",
+    "@lexical/rich-text": "^0.12.6",
+    "@lexical/selection": "^0.12.6",
+    "@lexical/utils": "^0.12.6",
     "@react-spring/web": "^9.7.3",
     "@visx/curve": "^2.1.0",
     "@visx/group": "^3.3.0",
-    "@visx/pattern": "^3.0.0",
-    "@visx/scale": "^3.0.0",
+    "@visx/legend": "^3.5.0",
+    "@visx/pattern": "^3.3.0",
+    "@visx/scale": "^3.5.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.11.3",
-    "msw": "0.49.1",
-    "msw-storybook-addon": "^1.10.0",
-    "notistack": "^2.0.8",
-    "react-grid-layout": "^1.3.4",
+    "d3-array": "3.2.4",
+    "humanize-duration": "^3.31.0",
+    "lexical": "^0.12.6",
+    "notistack": "^3.0.1",
+    "numeral": "^2.0.6",
+    "ramda": "0.29.1",
+    "react-grid-layout": "^1.4.4",
     "react-html-parser": "^2.0.2",
     "react-resizable": "^3.0.5",
     "react-transition-group": "^4.4.5",
-    "sanitize-html": "^2.10.0",
+    "sanitize-html": "^2.12.1",
     "ulog": "^2.0.0-beta.19"
   },
   "peerDependencies": {
@@ -137,8 +145,8 @@
     "@mui/icons-material": "5.x",
     "@mui/material": "5.x",
     "@mui/styles": "5.x",
-    "@tanstack/react-query": "4.x",
-    "axios": "0.x",
+    "@tanstack/react-query": "5.x",
+    "axios": ">= 1.6.4",
     "dayjs": "1.x",
     "formik": "2.x",
     "jotai": "2.x",

package/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (0.49.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.

package/src/ActionsList/ActionsList.styles.ts

@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui';
 import { equals } from 'ramda';
 
-import { Theme, alpha } from '@mui/material';
+import { Theme } from '@mui/material';
 
 interface GetBackgroundAndColorProps {
   status: string;
@@ -18,96 +18,65 @@ export const useStyles = makeStyles()((theme) => ({
     '& .MuiListItemText-secondary': {
       textWrap: 'pretty'
     },
-    '&[data-variant="error"]': {
+
+    '&:hover': {
       '& .MuiListItemIcon-root': {
-        color: getColor({ status: 'error', theme })
-      },
+        color: getColor({ status: 'info', theme })
+      }
+    },
+    '&[data-variant="error"]': {
       '&:hover': {
-        background: alpha(
-          theme.palette.error.main,
-          theme.palette.action.focusOpacity
-        ),
-        color: getColor({ status: 'error', theme })
-      },
-      color: theme.palette.error.main
+        '& .MuiListItemIcon-root': {
+          color: getColor({ status: 'error', theme })
+        }
+      }
     },
     '&[data-variant="info"]': {
-      '& .MuiListItemIcon-root': {
-        color: getColor({ status: 'info', theme })
-      },
       '&:hover': {
-        background: alpha(
-          theme.palette.info.main,
-          theme.palette.action.focusOpacity
-        ),
-        color: getColor({ status: 'info', theme })
-      },
-      color: theme.palette.info.main
+        '& .MuiListItemIcon-root': {
+          color: getColor({ status: 'info', theme })
+        }
+      }
     },
+
     '&[data-variant="pending"]': {
-      '& .MuiListItemIcon-root': {
-        color: getColor({ status: 'pending', theme })
-      },
       '&:hover': {
-        background: alpha(
-          theme.palette.pending.main,
-          theme.palette.action.focusOpacity
-        ),
-        color: getColor({ status: 'pending', theme })
-      },
-      color: theme.palette.pending.main
+        '& .MuiListItemIcon-root': {
+          color: getColor({ status: 'pending', theme })
+        }
+      }
     },
+
     '&[data-variant="primary"]': {
-      '& .MuiListItemIcon-root': {
-        color: getColor({ status: 'primary', theme })
-      },
       '&:hover': {
-        background: alpha(
-          theme.palette.primary.main,
-          theme.palette.action.focusOpacity
-        ),
-        color: getColor({ status: 'primary', theme })
-      },
-      color: theme.palette.primary.main
+        '& .MuiListItemIcon-root': {
+          color: getColor({ status: 'primary', theme })
+        }
+      }
     },
+
     '&[data-variant="secondary"]': {
-      '& .MuiListItemIcon-root': {
-        color: getColor({ status: 'secondary', theme })
-      },
       '&:hover': {
-        background: alpha(
-          theme.palette.secondary.main,
-          theme.palette.action.focusOpacity
-        ),
-        color: getColor({ status: 'secondary', theme })
-      },
-      color: theme.palette.secondary.main
+        '& .MuiListItemIcon-root': {
+          color: getColor({ status: 'secondary', theme })
+        }
+      }
     },
+
     '&[data-variant="success"]': {
-      '& .MuiListItemIcon-root': {
-        color: getColor({ status: 'success', theme })
-      },
       '&:hover': {
-        background: alpha(
-          theme.palette.success.main,
-          theme.palette.action.focusOpacity
-        ),
-        color: getColor({ status: 'success', theme })
-      },
-      color: theme.palette.success.main
+        '& .MuiListItemIcon-root': {
+          color: getColor({ status: 'success', theme })
+        }
+      }
     },
+
     '&[data-variant="warning"]': {
-      '& .MuiListItemIcon-root': {
-        color: getColor({ status: 'warning', theme })
-      },
       '&:hover': {
-        background: alpha(
-          theme.palette.warning.main,
-          theme.palette.action.focusOpacity
-        ),
-        color: getColor({ status: 'warning', theme })
-      },
-      color: theme.palette.warning.main
+        '& .MuiListItemIcon-root': {
+          color: getColor({ status: 'warning', theme })
+        }
+      }
     }
   },
   list: {

package/src/Button/Icon/index.tsx

@@ -21,7 +21,7 @@ type Props = {
   ariaLabel?: string;
   className?: string;
   onClick: (event) => void;
-  title?: string;
+  title?: string | JSX.Element;
   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('hasLabel', true), not), always(null)],
-    [propEq('succeeded', true), always(<CheckIcon />)],
-    [propEq('loading', true), always(<SaveIcon />)],
+    [pipe(propEq(true, 'hasLabel'), not), always(null)],
+    [propEq(true, 'succeeded'), always(<CheckIcon />)],
+    [propEq(true, 'loading'), 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 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/Dashboard/Item.tsx

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

package/src/Dashboard/Layout.tsx

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

package/src/Dialog/Confirm/index.tsx

@@ -1,4 +1,4 @@
-import { DialogContentText, Typography } from '@mui/material';
+import { ButtonProps, DialogContentText, Typography } from '@mui/material';
 
 import Dialog, { Props as DialogProps } from '..';
 
@@ -6,15 +6,23 @@ type Props = DialogProps & {
   children?: JSX.Element;
   labelMessage?: string | null;
   labelSecondMessage?: string | null;
+  restCancelButtonProps?: ButtonProps;
+  restConfirmButtonProps?: ButtonProps;
 };
 
 const Confirm = ({
   labelMessage,
   labelSecondMessage,
   children,
+  restCancelButtonProps,
+  restConfirmButtonProps,
   ...rest
 }: Props): JSX.Element => (
-  <Dialog {...rest}>
+  <Dialog
+    restCancelButtonProps={restCancelButtonProps}
+    restConfirmButtonProps={restConfirmButtonProps}
+    {...rest}
+  >
     <DialogContentText>
       {labelMessage && <Typography>{labelMessage}</Typography>}
       {labelSecondMessage && <Typography>{labelSecondMessage}</Typography>}

package/src/Dialog/UnsavedChanges/index.tsx

@@ -1,18 +1,17 @@
 import { not } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
-import { ConfirmDialog } from '../..';
+import { Modal } from '../../components/Modal';
 
 import {
   labelDiscard,
   labelDoYouWantToQuitWithoutResolving,
-  labelDoYouWantToQuitWithoutSaving,
   labelDoYouWantToResolveErrors,
   labelDoYouWantToSaveChanges,
   labelResolve,
   labelSave,
   labelThereAreErrorsInTheForm,
-  labelYourFormHasUnsavedChanges
+  labelIfYouClickOnDiscard
 } from './translatedLabels';
 
 interface Props {
@@ -40,30 +39,32 @@ const UnsavedChangesDialog = ({
   const labelConfirm = isValidForm ? labelSave : labelResolve;
 
   const labelMessage = `${
-    isValidForm ? labelYourFormHasUnsavedChanges : labelThereAreErrorsInTheForm
-  }. ${
-    isValidForm
-      ? labelDoYouWantToQuitWithoutSaving
-      : labelDoYouWantToQuitWithoutResolving
-  }`;
+    isValidForm ? labelIfYouClickOnDiscard : labelThereAreErrorsInTheForm
+  }. ${isValidForm ? '' : labelDoYouWantToQuitWithoutResolving}`;
 
   if (not(dialogOpened)) {
     return null;
   }
 
   return (
-    <ConfirmDialog
-      confirmDisabled={isSubmitting}
-      labelCancel={t(labelDiscard)}
-      labelConfirm={t(labelConfirm)}
-      labelMessage={t(labelMessage)}
-      labelTitle={t(labelTitle)}
+    <Modal
+      hasCloseButton
       open={dialogOpened}
-      submitting={isSubmitting}
-      onBackdropClick={closeDialog}
-      onCancel={discardChanges}
-      onConfirm={isValidForm ? saveChanges : closeDialog}
-    />
+      size="medium"
+      onClose={closeDialog}
+    >
+      <Modal.Header>{t(labelTitle)}</Modal.Header>
+      <Modal.Body>{t(labelMessage)}</Modal.Body>
+      <Modal.Actions
+        disabled={isSubmitting}
+        labels={{
+          cancel: t(labelDiscard),
+          confirm: t(labelConfirm)
+        }}
+        onCancel={discardChanges}
+        onConfirm={isValidForm ? saveChanges : closeDialog}
+      />
+    </Modal>
   );
 };
 

package/src/Dialog/UnsavedChanges/translatedLabels.ts

@@ -1,9 +1,8 @@
 export const labelDiscard = 'Discard';
 export const labelResolve = 'Resolve';
-export const labelYourFormHasUnsavedChanges = 'Your form has unsaved changes';
+export const labelIfYouClickOnDiscard =
+  'If you click on Discard, your changes will not be saved.';
 export const labelThereAreErrorsInTheForm = 'There are errors in the form';
-export const labelDoYouWantToQuitWithoutSaving =
-  'Do you want to quit the form without saving the changes?';
 export const labelDoYouWantToQuitWithoutResolving =
   'Do you want to quit the form without resolving the errors?';
 export const labelDoYouWantToSaveChanges = 'Do you want to save the changes?';
@@ -14,11 +13,10 @@ export const labelSave = 'Save';
 export default {
   labelDiscard,
   labelDoYouWantToQuitWithoutResolving,
-  labelDoYouWantToQuitWithoutSaving,
   labelDoYouWantToResolveErrors,
   labelDoYouWantToSaveChanges,
+  labelIfYouClickOnDiscard,
   labelResolve,
   labelSave,
-  labelThereAreErrorsInTheForm,
-  labelYourFormHasUnsavedChanges
+  labelThereAreErrorsInTheForm
 };

package/src/Dialog/index.tsx

@@ -9,7 +9,8 @@ import {
   DialogContent,
   DialogActions,
   DialogProps,
-  CircularProgress
+  CircularProgress,
+  ButtonProps
 } from '@mui/material';
 
 import { DataTestAttributes } from '../@types/data-attributes';
@@ -43,11 +44,13 @@ export type Props = {
   dialogTitleClassName?: string;
   labelCancel?: string | null;
   labelConfirm?: string | null;
-  labelTitle?: string | null;
+  labelTitle?: ReactNode;
   onCancel?: () => void;
   onClose?: () => void;
   onConfirm: (event, value?) => void;
   open: boolean;
+  restCancelButtonProps?: ButtonProps;
+  restConfirmButtonProps?: ButtonProps;
   submitting?: boolean;
 } & DialogProps &
   DataTestAttributes;
@@ -70,6 +73,8 @@ const Dialog = ({
   dialogContentClassName,
   dialogActionsClassName,
   dialogConfirmButtonClassName,
+  restCancelButtonProps,
+  restConfirmButtonProps,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ contentWidth });
@@ -101,6 +106,7 @@ const Dialog = ({
             data-testid="Cancel"
             disabled={cancelDisabled}
             onClick={onCancel}
+            {...restCancelButtonProps}
           >
             {labelCancel}
           </Button>
@@ -113,6 +119,7 @@ const Dialog = ({
           disabled={confirmDisabled}
           endIcon={submitting && <CircularProgress size={15} />}
           onClick={onConfirm}
+          {...restConfirmButtonProps}
         >
           {labelConfirm}
         </Button>

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">