@centreon/ui 23.10.121 → 24.4.0

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.121",
+  "version": "24.4.0",
   "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,85 +49,98 @@
     "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.1.0",
+    "@simonsmith/cypress-image-snapshot": "^9.1.0",
     "@storybook/addon-a11y": "^7.0.9",
     "@storybook/addon-docs": "^7.0.9",
     "@storybook/addon-essentials": "^7.0.9",
     "@storybook/addon-interactions": "^7.0.9",
-    "@storybook/addon-styling": "^1.0.6",
+    "@storybook/addon-styling": "^1.3.7",
     "@storybook/blocks": "^7.0.26",
     "@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.14",
+    "@types/mocha": "^10.0.10",
+    "@types/ramda": "^0.29.9",
+    "@types/react": "^18.2.65",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react-swc": "^3.8.0",
+    "axios-mock-adapter": "^1.22.0",
+    "cypress": "^13.7.1",
     "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",
+    "playwright": "^1.50.1",
     "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",
-    "@react-spring/web": "^9.7.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.5",
+    "@visx/clip-path": "^3.12.0",
     "@visx/curve": "^2.1.0",
-    "@visx/group": "^3.3.0",
-    "@visx/pattern": "^3.0.0",
-    "@visx/scale": "^3.0.0",
-    "@visx/shape": "^2.12.2",
+    "@visx/event": "^3.12.0",
+    "@visx/group": "^3.12.0",
+    "@visx/hierarchy": "^3.12.0",
+    "@visx/legend": "^3.12.0",
+    "@visx/pattern": "^3.12.0",
+    "@visx/point": "^3.12.0",
+    "@visx/scale": "^3.12.0",
+    "@visx/shape": "^2.18.0",
+    "@visx/text": "^3.12.0",
     "@visx/threshold": "^2.12.2",
     "@visx/visx": "2.16.0",
+    "@visx/zoom": "^3.12.0",
     "anylogger": "^1.0.11",
-    "d3-array": "3.2.0",
-    "humanize-duration": "^3.27.3",
-    "lexical": "0.11.3",
-    "notistack": "^2.0.8",
-    "react-grid-layout": "^1.3.4",
+    "d3-array": "3.2.4",
+    "humanize-duration": "^3.32.1",
+    "lexical": "^0.12.6",
+    "notistack": "^3.0.2",
+    "numeral": "^2.0.6",
+    "ramda": "0.29.1",
+    "react-grid-layout": "^1.5.0",
     "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.14.0",
     "ulog": "^2.0.0-beta.19"
   },
   "peerDependencies": {
@@ -135,8 +151,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",
@@ -152,5 +168,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/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.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

@@ -21,7 +21,7 @@ type Props = {
   ariaLabel?: string;
   className?: string;
   onClick: (event) => void;
-  title?: string;
+  title?: string | JSX.Element;
   tooltipClassName?: string;
   tooltipPlacement?:
     | 'bottom'
@@ -38,7 +38,7 @@ type Props = {
     | 'top-start';
 } & IconButtonProps;
 
-const IconButton = ({
+export const IconButton = ({
   title = '',
   ariaLabel,
   className,

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/Dashboard.styles.ts

@@ -76,11 +76,12 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       border: 'none',
       borderRadius: theme.spacing(1),
       height: '100%',
-      paddingBottom: theme.spacing(2),
       width: '100%'
     },
     widgetContent: {
-      height: '100%'
+      height: hasHeader
+        ? `calc(100% - ${theme.spacing(3.5)} - ${theme.spacing(0.5)})`
+        : `calc(100% - ${theme.spacing(3.5)})`
     },
     widgetHeader: {
       '&:hover': {
@@ -92,17 +93,17 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       '&[data-canMove="true"]': {
         cursor: 'move'
       },
-      padding: theme.spacing(0.5, 2),
+      padding: theme.spacing(0, 1.5),
       position: 'relative'
     },
     widgetHeaderDraggable: {
       height: '100%',
       position: 'absolute',
-      width: '100%'
+      width: '95%'
     },
     widgetPadding: {
       overflowX: 'auto',
-      padding: hasHeader ? theme.spacing(1, 2, 0) : theme.spacing(1, 2)
+      padding: theme.spacing(0.5, 1.5, 1.5)
     }
   })
 );

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/Dashboard/utils.ts

@@ -1,11 +1,11 @@
 import { lt } from 'ramda';
 import { Layout } from 'react-grid-layout';
 
-export const maxColumns = 12;
 const minColumns = 1;
 const breakpoint = 768;
 
 export const rowHeight = 64;
+export const maxColumns = 12;
 
 export const getIsSmallScreenSize = (): boolean =>
   lt(window.innerWidth, breakpoint);

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