@centreon/ui 24.4.48 → 24.4.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.48",
+  "version": "24.4.50",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -12,6 +12,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 +28,7 @@
   "author": {
     "name": "centreon@centreon.com"
   },
+  "baseCodeCoveragePercentage": 60,
   "license": "GPL-2.0",
   "bugs": {
     "url": "https://github.com/centreon/centreon/issues"
@@ -46,11 +48,11 @@
     "test/*"
   ],
   "devDependencies": {
-    "@cypress/react": "^7.0.2",
-    "@cypress/webpack-dev-server": "^3.2.3",
+    "@cypress/react": "^8.0.0",
+    "@cypress/webpack-dev-server": "^3.7.3",
     "@faker-js/faker": "^8.0.2",
-    "@mdx-js/react": "^2.1.4",
-    "@simonsmith/cypress-image-snapshot": "^6.1.0",
+    "@mdx-js/react": "^3.0.0",
+    "@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",
@@ -71,57 +73,62 @@
     "@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",
+    "@types/jest": "^29.5.11",
+    "@types/mocha": "^10.0.6",
+    "@types/ramda": "^0.29.9",
+    "@types/react": "^18.2.48",
+    "@types/testing-library__jest-dom": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-swc": "^3.3.0",
-    "axios-mock-adapter": "^1.21.4",
-    "cypress": "^12.8.0",
+    "axios-mock-adapter": "^1.22.0",
+    "cypress": "^13.6.2",
     "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": "^7.6.8",
     "storybook-addon-mock": "^4.0.0",
-    "storybook-dark-mode": "^3.0.0",
+    "storybook-dark-mode": "^3.0.3",
     "style-dictionary": "^3.8.0",
-    "ts-node": "^10.9.1",
+    "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/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",
+    "d3-array": "3.2.4",
     "humanize-duration": "^3.27.3",
-    "lexical": "0.11.3",
-    "msw": "0.49.1",
-    "msw-storybook-addon": "^1.10.0",
-    "notistack": "^2.0.8",
+    "lexical": "^0.12.6",
+    "notistack": "^3.0.1",
+    "numeral": "^2.0.6",
+    "ramda": "0.29.1",
     "react-grid-layout": "^1.3.4",
     "react-html-parser": "^2.0.2",
     "react-resizable": "^3.0.5",
@@ -137,7 +144,7 @@
     "@mui/icons-material": "5.x",
     "@mui/material": "5.x",
     "@mui/styles": "5.x",
-    "@tanstack/react-query": "4.x",
+    "@tanstack/react-query": "5.x",
     "axios": "0.x",
     "dayjs": "1.x",
     "formik": "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/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/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">

package/src/FileDropZone/index.tsx

@@ -98,7 +98,9 @@ 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/Form.cypress.spec.tsx

@@ -0,0 +1,133 @@
+import { object } from 'yup';
+import { faker } from '@faker-js/faker';
+import { useFormikContext } from 'formik';
+
+import { Typography } from '@mui/material';
+
+import { Button } from '../components';
+
+import { Form } from './Form';
+import { InputType } from './Inputs/models';
+
+faker.seed(42);
+
+const AddItem = ({ addItem }: { addItem: (item) => void }): JSX.Element => {
+  const { values } = useFormikContext();
+  const add = (): void => {
+    addItem({
+      alias: faker.company.name(),
+      id: values.list.length,
+      name: faker.person.firstName()
+    });
+  };
+
+  return (
+    <Button variant="ghost" onClick={add}>
+      Add item
+    </Button>
+  );
+};
+
+const SortContent = ({
+  name,
+  alias
+}: {
+  alias: string;
+  name: string;
+}): JSX.Element => (
+  <Typography>
+    {name} ({alias})
+  </Typography>
+);
+
+const initializeFormList = (): void => {
+  cy.mount({
+    Component: (
+      <Form
+        initialValues={{
+          list: []
+        }}
+        inputs={[
+          {
+            fieldName: 'list',
+            group: '',
+            label: '',
+            list: {
+              AddItem,
+              SortContent,
+              addItemLabel: 'Add an item to the list',
+              itemProps: ['id', 'name', 'alias'],
+              sortLabel: 'Sort items'
+            },
+            type: InputType.List
+          }
+        ]}
+        submit={cy.stub()}
+        validationSchema={object()}
+      />
+    )
+  });
+};
+
+describe('Form list', () => {
+  beforeEach(initializeFormList);
+
+  it('adds an element to the list', () => {
+    cy.contains('Add an item to the list').should('be.visible');
+    cy.contains('Sort items').should('be.visible');
+
+    cy.contains('Add item').click();
+
+    cy.findByLabelText('sort-0').should('be.visible');
+    cy.findByLabelText('delete-0').should('be.visible');
+    cy.contains('Christelle (Schinner - Wiegand)').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('sorts elements in the list', () => {
+    cy.contains('Add an item to the list').should('be.visible');
+    cy.contains('Sort items').should('be.visible');
+
+    cy.contains('Add item').click();
+    cy.contains('Add item').click();
+
+    cy.findByLabelText('sort-0').should('be.visible');
+    cy.findByLabelText('delete-0').should('be.visible');
+    cy.contains('Carley (Satterfield, Miller and Metz)').should('be.visible');
+    cy.findByLabelText('sort-1').should('be.visible');
+    cy.findByLabelText('delete-1').should('be.visible');
+    cy.contains('Anderson (Crist - Bradtke)').should('be.visible');
+
+    cy.moveSortableElementUsingAriaLabel({
+      ariaLabel: 'sort-0',
+      direction: 'down'
+    });
+
+    cy.contains('Carley (Satterfield, Miller and Metz)').should('be.visible');
+    cy.contains('Anderson (Crist - Bradtke)').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('removes an element from the list', () => {
+    cy.contains('Add an item to the list').should('be.visible');
+    cy.contains('Sort items').should('be.visible');
+
+    cy.contains('Add item').click();
+    cy.contains('Add item').click();
+
+    cy.findByLabelText('sort-0').should('be.visible');
+    cy.findByLabelText('delete-0').should('be.visible');
+    cy.contains('Lea (Streich - Hartmann)').should('be.visible');
+    cy.findByLabelText('sort-1').should('be.visible');
+    cy.findByLabelText('delete-1').should('be.visible');
+    cy.contains('Akeem (Quigley LLC)').should('be.visible');
+
+    cy.findByLabelText('delete-0').click();
+
+    cy.contains('Lea (Streich - Hartmann)').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Form/Inputs/List/Content.tsx

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+
+import { DraggableSyntheticListeners } from '@dnd-kit/core';
+
+import KrilinIndicatorIcon from '@mui/icons-material/DragIndicator';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+
+import { IconButton } from '../../../components';
+
+import { useListStyles } from './List.styles';
+
+export interface ContentProps {
+  attributes;
+  children: ReactNode;
+  deleteItem: (id: string) => () => void;
+  id: string;
+  isDragging: boolean;
+  isInDragOverlay?: boolean;
+  itemRef: React.RefObject<HTMLDivElement>;
+  listeners: DraggableSyntheticListeners;
+  name: string;
+  style;
+}
+
+const Content = ({
+  listeners,
+  itemRef,
+  attributes,
+  style,
+  isDragging,
+  id,
+  children,
+  deleteItem
+}: ContentProps): JSX.Element => {
+  const { classes } = useListStyles();
+
+  return (
+    <div
+      className={classes.content}
+      ref={itemRef}
+      {...attributes}
+      style={style}
+    >
+      <IconButton
+        data-dragging={isDragging}
+        size="small"
+        {...listeners}
+        aria-label={`sort-${id}`}
+        icon={<KrilinIndicatorIcon fontSize="small" />}
+      />
+      <div className={classes.innerContent}>{children}</div>
+      <IconButton
+        aria-label={`delete-${id}`}
+        icon={<DeleteOutlineIcon color="error" fontSize="small" />}
+        size="small"
+        onClick={deleteItem(id)}
+      />
+    </div>
+  );
+};
+
+export default Content;

package/src/Form/Inputs/List/List.styles.ts

@@ -0,0 +1,29 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useListStyles = makeStyles()((theme) => ({
+  content: {
+    '& [data-dragging="false"]': {
+      cursor: 'grab'
+    },
+    '& [data-dragging="true"]': {
+      cursor: 'grabbing'
+    },
+    alignItems: 'center',
+    borderBottom: `1px dashed ${theme.palette.action.disabledBackground}`,
+    display: 'flex',
+    flexDirection: 'row',
+    padding: theme.spacing(1, 0)
+  },
+  innerContent: {
+    flexGrow: 1
+  },
+  items: {
+    maxHeight: theme.spacing(16),
+    overflowY: 'auto'
+  },
+  list: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1)
+  }
+}));