@centreon/ui 24.4.1-SAAS-1230.0 → 24.4.1-fix-component-tests-24-04.0

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-SAAS-1230.0",
+  "version": "24.4.1-fix-component-tests-24-04.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",
@@ -28,6 +29,7 @@
   "author": {
     "name": "centreon@centreon.com"
   },
+  "baseCodeCoveragePercentage": 60,
   "license": "GPL-2.0",
   "bugs": {
     "url": "https://github.com/centreon/centreon/issues"
@@ -47,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",
@@ -61,27 +63,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/jest": "^29.5.12",
     "@types/mocha": "^10.0.6",
-    "@types/ramda": "^0.29.6",
-    "@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",
+    "@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.1",
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",
@@ -92,46 +93,53 @@
     "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/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/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/clip-path": "^3.3.0",
     "@visx/curve": "^2.1.0",
+    "@visx/event": "^3.3.0",
     "@visx/group": "^3.3.0",
-    "@visx/pattern": "^3.0.0",
-    "@visx/scale": "^3.0.0",
-    "@visx/shape": "^2.12.2",
+    "@visx/hierarchy": "^3.3.0",
+    "@visx/legend": "^3.5.0",
+    "@visx/pattern": "^3.3.0",
+    "@visx/point": "^3.3.0",
+    "@visx/scale": "^3.5.0",
+    "@visx/shape": "^2.18.0",
+    "@visx/text": "^3.3.0",
     "@visx/threshold": "^2.12.2",
     "@visx/visx": "2.16.0",
+    "@visx/zoom": "^3.3.0",
     "anylogger": "^1.0.11",
-    "d3-array": "3.2.0",
-    "humanize-duration": "^3.27.3",
-    "lexical": "^0.12.2",
+    "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.3.4",
+    "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": {
@@ -143,7 +151,7 @@
     "@mui/material": "5.x",
     "@mui/styles": "5.x",
     "@tanstack/react-query": "5.x",
-    "axios": "0.x",
+    "axios": ">= 1.6.4",
     "dayjs": "1.x",
     "formik": "2.x",
     "jotai": "2.x",

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/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/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';
@@ -48,6 +49,8 @@ export type Props = {
   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/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/Text.tsx

@@ -29,7 +29,8 @@ const Text = ({
   getRequired,
   change,
   additionalMemoProps,
-  text
+  text,
+  autoFocus
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
@@ -109,6 +110,7 @@ const Text = ({
         fullWidth
         EndAdornment={EndAdornment}
         ariaLabel={t(label) || ''}
+        autoFocus={autoFocus}
         dataTestId={dataTestId || ''}
         disabled={disabled}
         error={error as string | undefined}

package/src/Form/Inputs/models.ts

@@ -33,6 +33,7 @@ export interface InputProps {
   additionalLabel?: string | JSX.Element;
   additionalLabelClassName?: string;
   additionalMemoProps?: Array<unknown>;
+  autoFocus?: boolean;
   autocomplete?: {
     creatable?: boolean;
     options: Array<SelectEntry>;