@centreon/ui 24.11.13 → 24.11.14

package/src/Button/Icon/index.tsx

@@ -1,19 +1,16 @@
 import { makeStyles } from 'tss-react/mui';
 
 import {
-  IconButtonProps,
   IconButton as MuiIconButton,
+  IconButtonProps,
   Tooltip
 } from '@mui/material';
 
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 const useStyles = makeStyles()((theme) => ({
   button: {
     padding: theme.spacing(0.25)
-  },
-  tooltip: {
-    background: theme.palette.background.tooltip
   }
 }));
 
@@ -21,8 +18,7 @@ type Props = {
   ariaLabel?: string;
   className?: string;
   onClick: (event) => void;
-  title?: string | JSX.Element;
-  tooltipClassName?: string;
+  title?: string;
   tooltipPlacement?:
     | 'bottom'
     | 'left'
@@ -38,22 +34,17 @@ type Props = {
     | 'top-start';
 } & IconButtonProps;
 
-export const IconButton = ({
+const IconButton = ({
   title = '',
   ariaLabel,
   className,
   tooltipPlacement,
-  tooltipClassName,
   ...props
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
 
   return (
-    <Tooltip
-      classes={{ tooltip: cx(classes.tooltip, tooltipClassName) }}
-      placement={tooltipPlacement}
-      title={title}
-    >
+    <Tooltip placement={tooltipPlacement} title={title}>
       <span aria-label={undefined}>
         <MuiIconButton
           aria-label={ariaLabel}

package/src/Button/Save/StartIcon.tsx

@@ -1,4 +1,4 @@
-import { T, always, cond, not, pipe, propEq } from 'ramda';
+import { always, cond, not, pipe, propEq, T } from 'ramda';
 
 import CheckIcon from '@mui/icons-material/Check';
 import SaveIcon from '@mui/icons-material/Save';
@@ -15,9 +15,9 @@ interface Props {
 
 const StartIcon = ({ startIconConfig }: Props): JSX.Element | null =>
   cond<Array<StartIconConfigProps>, JSX.Element | null>([
-    [pipe(propEq(true, 'hasLabel'), not), always(null)],
-    [propEq(true, 'succeeded'), always(<CheckIcon />)],
-    [propEq(true, 'loading'), always(<SaveIcon />)],
+    [pipe(propEq('hasLabel', true), not), always(null)],
+    [propEq('succeeded', true), always(<CheckIcon />)],
+    [propEq('loading', true), always(<SaveIcon />)],
     [T, always(<SaveIcon />)]
   ])(startIconConfig);
 

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

@@ -1,4 +1,4 @@
-import { ComponentStory } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { makeStyles } from 'tss-react/mui';
 
 import { Theme } from '@mui/material';
@@ -13,7 +13,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   }
 }));
 
-const meta = {
+export default {
   argTypes: {
     labelLoading: { control: 'text' },
     labelSave: { control: 'text' },
@@ -26,13 +26,8 @@ const meta = {
 
   component: ButtonSave,
 
-  parameters: {
-    chromatic: { delay: 300 }
-  },
   title: 'Button/Save'
-};
-
-export default meta;
+} as ComponentMeta<typeof ButtonSave>;
 
 const TemplateButtonSave: ComponentStory<typeof ButtonSave> = (args) => (
   <ButtonSave {...args} />
@@ -47,7 +42,7 @@ export const loading = (): JSX.Element => <ButtonSave loading />;
 export const succeeded = (): JSX.Element => <ButtonSave succeeded />;
 
 export const normalWithText = (): JSX.Element => (
-  <ButtonSave labelSave="Save" size="medium" />
+  <ButtonSave labelSave="Save" />
 );
 
 export const largeWithText = (): JSX.Element => (
@@ -55,7 +50,7 @@ export const largeWithText = (): JSX.Element => (
 );
 
 export const loadingWithTextAndMediumSize = (): JSX.Element => (
-  <ButtonSave loading labelLoading="Loading" size="medium" />
+  <ButtonSave loading labelLoading="Loading" />
 );
 
 export const succeededWithText = (): JSX.Element => (

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 getNormalizedId from '../../utils/getNormalizedId';
 
-import Content from './Content';
 import StartIcon from './StartIcon';
+import Content from './Content';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   loadingButton: {
@@ -15,14 +15,13 @@ const useStyles = makeStyles()((theme: Theme) => ({
   }
 }));
 
-interface Props {
+interface Props extends Record<string, unknown> {
   className?: string;
   labelLoading?: string;
   labelSave?: string;
   labelSucceeded?: string;
   loading?: boolean;
   size?: 'small' | 'medium' | 'large';
-  startIcon?: boolean;
   succeeded?: boolean;
   tooltip?: string;
   tooltipLabel?: string;
@@ -46,9 +45,8 @@ const SaveButton = ({
   labelSave = '',
   size = 'small',
   className,
-  startIcon = true,
   ...rest
-}: Props & LoadingButtonProps): JSX.Element => {
+}: Props): JSX.Element => {
   const { classes, cx } = useStyles();
   const hasLabel = hasValue([labelLoading, labelSave, labelSucceeded]);
 
@@ -75,9 +73,7 @@ const SaveButton = ({
           loading={loading}
           loadingPosition={labelLoading ? 'start' : 'center'}
           size={size}
-          startIcon={
-            startIcon && <StartIcon startIconConfig={startIconConfig} />
-          }
+          startIcon={<StartIcon startIconConfig={startIconConfig} />}
           variant="contained"
           {...rest}
         >

package/src/Colors/index.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import { Paper } from '@mui/material';

package/src/Colors/index.tsx

@@ -1,7 +1,7 @@
-import { includes, toPairs } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
+import { includes, toPairs } from 'ramda';
 
-import { Box, Divider, Grid, Stack, Typography, useTheme } from '@mui/material';
+import { Stack, Box, useTheme, Typography, Divider, Grid } from '@mui/material';
 
 import { ThemeMode } from '@centreon/ui-context';
 
@@ -90,11 +90,7 @@ const GroupedColorStatus = (): JSX.Element => {
             key={status}
             keyTheme={status}
           />
-          <Divider
-            className={classes.divider}
-            variant="middle"
-            key={`${status}-divider`}
-          />
+          <Divider className={classes.divider} variant="middle" />
         </>
       ))}
     </>

package/src/ContentWithCircularProgress/index.stories.tsx

@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Theme, Typography } from '@mui/material';
+import { Typography, Theme } from '@mui/material';
 
 import ContentWithCircularLoading from '.';
 

package/src/Dialog/Confirm/index.tsx

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

package/src/Dialog/Duplicate/index.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render } from '../../../test/testRenderer';
+import { render, fireEvent } from '../../testRenderer';
 
 import DialogDuplicate from '.';
 

package/src/Dialog/Duplicate/index.tsx

@@ -22,7 +22,7 @@ const Duplicate = ({
   labelInput = 'Count',
   labelConfirm = 'Duplicate',
   labelTitle = 'Duplicate',
-  limit = Number.POSITIVE_INFINITY,
+  limit = Infinity,
   onConfirm,
   ...rest
 }: Props): JSX.Element => {
@@ -37,10 +37,7 @@ const Duplicate = ({
     onConfirm(event, value);
   };
 
-  const isConfirmDisabled = or(
-    isEmpty(value),
-    Number.parseInt(value, 10) > limit
-  );
+  const isConfirmDisabled = or(isEmpty(value), parseInt(value, 10) > limit);
 
   return (
     <Dialog

package/src/Dialog/UnsavedChanges/index.tsx

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

package/src/Dialog/UnsavedChanges/translatedLabels.ts

@@ -1,8 +1,9 @@
 export const labelDiscard = 'Discard';
 export const labelResolve = 'Resolve';
-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 labelYourFormHasUnsavedChanges = 'Your form has unsaved changes';
+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?';
@@ -13,10 +14,11 @@ export const labelSave = 'Save';
 export default {
   labelDiscard,
   labelDoYouWantToQuitWithoutResolving,
+  labelDoYouWantToQuitWithoutSaving,
   labelDoYouWantToResolveErrors,
   labelDoYouWantToSaveChanges,
-  labelIfYouClickOnDiscard,
   labelResolve,
   labelSave,
-  labelThereAreErrorsInTheForm
+  labelThereAreErrorsInTheForm,
+  labelYourFormHasUnsavedChanges
 };

package/src/Dialog/index.stories.tsx

@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
-import { Theme, Typography } from '@mui/material';
+import { Typography, Theme } from '@mui/material';
 
 import Dialog from '.';
 

package/src/Dialog/index.tsx

@@ -4,17 +4,14 @@ import { makeStyles } from 'tss-react/mui';
 
 import {
   Button,
-  ButtonProps,
-  CircularProgress,
-  DialogActions,
+  Dialog as MuiDialog,
+  DialogTitle,
   DialogContent,
+  DialogActions,
   DialogProps,
-  DialogTitle,
-  Dialog as MuiDialog
+  CircularProgress
 } from '@mui/material';
 
-import { DataTestAttributes } from '../@types/data-attributes';
-
 interface StylesProps {
   contentWidth?: number;
 }
@@ -38,22 +35,18 @@ export type Props = {
   confirmDisabled?: boolean;
   contentWidth?: number;
   dialogActionsClassName?: string;
-  dialogConfirmButtonClassName?: string;
   dialogContentClassName?: string;
   dialogPaperClassName?: string;
   dialogTitleClassName?: string;
   labelCancel?: string | null;
   labelConfirm?: string | null;
-  labelTitle?: ReactNode;
+  labelTitle?: string | null;
   onCancel?: () => void;
   onClose?: () => void;
   onConfirm: (event, value?) => void;
   open: boolean;
-  restCancelButtonProps?: ButtonProps;
-  restConfirmButtonProps?: ButtonProps;
   submitting?: boolean;
-} & DialogProps &
-  DataTestAttributes;
+} & DialogProps;
 
 const Dialog = ({
   open,
@@ -72,9 +65,6 @@ const Dialog = ({
   dialogTitleClassName,
   dialogContentClassName,
   dialogActionsClassName,
-  dialogConfirmButtonClassName,
-  restCancelButtonProps,
-  restConfirmButtonProps,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ contentWidth });
@@ -101,25 +91,16 @@ const Dialog = ({
       )}
       <DialogActions className={dialogActionsClassName}>
         {onCancel && (
-          <Button
-            color="primary"
-            data-testid="Cancel"
-            disabled={cancelDisabled}
-            onClick={onCancel}
-            {...restCancelButtonProps}
-          >
+          <Button color="primary" disabled={cancelDisabled} onClick={onCancel}>
             {labelCancel}
           </Button>
         )}
         <Button
           aria-label={labelConfirm || ''}
-          className={dialogConfirmButtonClassName}
           color="primary"
-          data-testid="Confirm"
           disabled={confirmDisabled}
           endIcon={submitting && <CircularProgress size={15} />}
           onClick={onConfirm}
-          {...restConfirmButtonProps}
         >
           {labelConfirm}
         </Button>

package/src/FallbackPage/FallbackPage.tsx

@@ -5,19 +5,19 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Typography } from '@mui/material';
 
-import { Image } from '..';
-import NotAuthorizedTemplateBackgroundDark from '../@assets/images/not-authorized-template-background-dark.svg';
-import NotAuthorizedTemplateBackgroundLight from '../@assets/images/not-authorized-template-background-light.svg';
 import LoadingSkeleton from '../LoadingSkeleton';
 import { CentreonLogo } from '../Logo/CentreonLogo';
-import { typedMemo } from '../utils/typedMemo';
+import NotAuthorizedTemplateBackgroundDark from '../../assets/not-authorized-template-background-dark.svg';
+import NotAuthorizedTemplateBackgroundLight from '../../assets/not-authorized-template-background-light.svg';
+import { Image } from '..';
 import { useThemeMode } from '../utils/useThemeMode';
+import { typedMemo } from '../utils/typedMemo';
 
 const useStyles = makeStyles()((theme) => ({
   logo: {
     alignSelf: 'flex-end',
     height: theme.spacing(11),
-    width: '239px'
+    width: '22rem'
   },
   message: {
     color: theme.palette.text.primary
@@ -66,9 +66,9 @@ export const FallbackPage: FC<FallbackPageProps> = typedMemo(
 
     return (
       <div className={classes.notAuthorizedContainer}>
-        <div className={classes.logo}>
+        <section className={classes.logo}>
           <CentreonLogo />
-        </div>
+        </section>
         <section className={classes.messageBlock}>
           <header>
             <Typography color="primary" fontWeight="bold" variant="h3">

package/src/FileDropZone/index.stories.tsx

@@ -2,8 +2,8 @@ import { useState } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
+import { Button, Paper, Typography, Theme } from '@mui/material';
 import PersonIcon from '@mui/icons-material/Person';
-import { Button, Paper, Theme, Typography } from '@mui/material';
 
 import FileDropZone, {
   CustomDropZoneContentProps,

package/src/FileDropZone/index.tsx

@@ -1,23 +1,23 @@
-import { useAtomValue } from 'jotai';
+import { useTranslation } from 'react-i18next';
 import {
-  T,
   cond,
   equals,
   flatten,
   identity,
   includes,
   isNil,
-  split
+  split,
+  T
 } from 'ramda';
-import { useTranslation } from 'react-i18next';
+import { useAtomValue } from 'jotai';
 import { makeStyles } from 'tss-react/mui';
 
 import PostAddIcon from '@mui/icons-material/PostAdd';
-import { Box, FormHelperText, Typography, alpha } from '@mui/material';
+import { alpha, Box, FormHelperText, Typography } from '@mui/material';
 
 import { userAtom } from '@centreon/ui-context';
 
-import { useMemoComponent } from '../utils';
+import useMemoComponent from '../utils/useMemoComponent';
 
 import { labelDropOr, labelSelectAFile } from './translatedLabels';
 import useDropzone, { UseDropzoneState } from './useDropzone';
@@ -30,15 +30,23 @@ interface StylesProps {
 const useStyles = makeStyles<StylesProps>()(
   (theme, { hasCustomDropZoneContent, isDraggingOver }) => ({
     dropzone: {
-      '&:hover': {
-        backgroundColor: alpha(theme.palette.primary.main, 0.1),
-        boxShadow: theme.shadows[3],
-        cursor: 'pointer'
-      },
-      border: `${theme.spacing(0.3)} dashed ${theme.palette.primary.main}`,
+      '&:hover': hasCustomDropZoneContent
+        ? undefined
+        : {
+            backgroundColor: alpha(theme.palette.primary.main, 0.1),
+            border: `${theme.spacing(0.3)} dashed ${
+              theme.palette.primary.main
+            }`,
+            boxShadow: theme.shadows[3],
+            cursor: 'pointer'
+          },
+      border: `${theme.spacing(0.3)} dashed ${
+        hasCustomDropZoneContent && !isDraggingOver
+          ? 'transparent'
+          : theme.palette.primary.main
+      }`,
       boxShadow: isDraggingOver ? theme.shadows[3] : theme.shadows[0],
-      borderRadius: `${theme.shape.borderRadius}px`,
-      padding: theme.spacing(0.5, 1),
+      padding: hasCustomDropZoneContent ? undefined : theme.spacing(1),
       width: hasCustomDropZoneContent ? '100%' : theme.spacing(50)
     },
     dropzoneInfo: {
@@ -58,7 +66,7 @@ const useStyles = makeStyles<StylesProps>()(
 export type CustomDropZoneContentProps = Pick<
   UseDropzoneState,
   'openFileExplorer'
-> & { files: FileList | null; label?: string };
+>;
 
 interface Props {
   CustomDropZoneContent?: ({
@@ -71,7 +79,6 @@ interface Props {
   maxFileSize?: number;
   multiple?: boolean;
   resetFilesStatusAndUploadData: () => void;
-  label?: string;
 }
 
 const getExtensions = cond([
@@ -91,9 +98,7 @@ 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)
@@ -108,8 +113,7 @@ const Dropzone = ({
   accept,
   CustomDropZoneContent,
   maxFileSize,
-  className,
-  label
+  className
 }: Props): JSX.Element => {
   const hasCustomDropZoneContent = !isNil(CustomDropZoneContent);
   const {
@@ -139,29 +143,25 @@ const Dropzone = ({
       <div>
         <Box
           className={cx(classes.dropzone, className)}
-          onClick={openFileExplorer}
+          onClick={!hasCustomDropZoneContent ? openFileExplorer : undefined}
           onDragLeave={dragOver(false)}
           onDragOver={dragOver(true)}
           onDrop={dropFiles}
         >
           <div className={classes.dropzoneInfo}>
             {hasCustomDropZoneContent ? (
-              <CustomDropZoneContent
-                openFileExplorer={openFileExplorer}
-                files={files}
-                label={label}
-              />
+              <CustomDropZoneContent openFileExplorer={openFileExplorer} />
             ) : (
-              <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+              <>
                 <PostAddIcon color="primary" fontSize="large" />
                 <Typography>
                   {t(labelDropOr)} {t(labelSelectAFile)}
                 </Typography>
-              </Box>
+              </>
             )}
             <input
               accept={accept}
-              aria-label={t(labelSelectAFile)}
+              aria-label={t(labelSelectAFile) || ''}
               className={classes.input}
               multiple={multiple}
               ref={fileInputRef}

package/src/FileDropZone/useDropzone.test.ts

@@ -1,4 +1,4 @@
-import { RenderHookResult, act, renderHook } from '@testing-library/react';
+import { act, renderHook, RenderHookResult } from '@testing-library/react';
 
 import { labelFileTooBig, labelInvalidFileType } from './translatedLabels';
 import useDropzone, { UseDropzoneProps, UseDropzoneState } from './useDropzone';