@centreon/ui 24.4.72 → 24.4.73

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(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/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 { render, fireEvent } from '../../../test/testRenderer';
+import { render, fireEvent } from '../../testRenderer';
 
 import DialogDuplicate from '.';
 

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,
   labelResolve,
   labelSave,
   labelThereAreErrorsInTheForm,
-  labelIfYouClickOnDiscard
+  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 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.tsx

@@ -9,12 +9,9 @@ import {
   DialogContent,
   DialogActions,
   DialogProps,
-  CircularProgress,
-  ButtonProps
+  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

@@ -7,8 +7,8 @@ import { Typography } from '@mui/material';
 
 import LoadingSkeleton from '../LoadingSkeleton';
 import { CentreonLogo } from '../Logo/CentreonLogo';
-import NotAuthorizedTemplateBackgroundDark from '../@assets/images/not-authorized-template-background-dark.svg';
-import NotAuthorizedTemplateBackgroundLight from '../@assets/images/not-authorized-template-background-light.svg';
+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';
@@ -17,7 +17,7 @@ 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.tsx

@@ -17,7 +17,7 @@ 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';
@@ -98,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)

package/src/Form/CollapsibleGroup.tsx

@@ -18,7 +18,6 @@ import { Group } from './Inputs/models';
 
 interface Props {
   children: React.ReactNode;
-  className?: string;
   defaultIsOpen?: boolean;
   group?: Group;
   hasGroupTitle: boolean;
@@ -51,10 +50,9 @@ const CollapsibleGroup = ({
   isCollapsible,
   group,
   hasGroupTitle,
-  defaultIsOpen = false,
-  className
+  defaultIsOpen = false
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
+  const { classes } = useStyles();
   const { t } = useTranslation();
 
   const [isOpen, setIsOpen] = useState(isCollapsible && defaultIsOpen);
@@ -63,8 +61,6 @@ const CollapsibleGroup = ({
     setIsOpen((currentIsOpen) => !currentIsOpen);
   };
 
-  const containerClassName = className || '';
-
   const CollapseIcon = isOpen ? ExpandMore : ChevronRightIcon;
   const ContainerComponent = useCallback(
     ({
@@ -76,13 +72,13 @@ const CollapsibleGroup = ({
           disableGutters
           disableRipple
           aria-label={group?.name}
-          className={cx(classes.groupTitleContainer, containerClassName)}
+          className={classes.groupTitleContainer}
           onClick={toggle}
         >
           {containerComponentChildren}
         </ListItemButton>
       ) : (
-        <Box className={cx(classes.groupTitleContainer, containerClassName)}>
+        <Box className={classes.groupTitleContainer}>
           {containerComponentChildren}
         </Box>
       ),
@@ -95,13 +91,7 @@ const CollapsibleGroup = ({
         <ContainerComponent>
           {isCollapsible && <CollapseIcon />}
           <div className={classes.groupTitleIcon}>
-            <Typography
-              className="groupText"
-              variant="h5"
-              {...group?.titleAttributes}
-            >
-              {t(group?.name as string)}
-            </Typography>
+            <Typography variant="h5">{t(group?.name as string)}</Typography>
             {group?.EndIcon && (
               <Tooltip
                 classes={{

package/src/Form/FormButtons.tsx

@@ -8,7 +8,8 @@ import { makeStyles } from 'tss-react/mui';
 import { Button } from '@mui/material';
 
 import SaveButton from '../Button/Save';
-import { useMemoComponent, getNormalizedId } from '../utils';
+import useMemoComponent from '../utils/useMemoComponent';
+import getNormalizedId from '../utils/getNormalizedId';
 
 import {
   labelReset,
@@ -23,7 +24,8 @@ const useStyles = makeStyles()((theme) => ({
     columnGap: theme.spacing(2),
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'flex-end'
+    justifyContent: 'flex-end',
+    marginTop: theme.spacing(2)
   }
 }));
 

package/src/Form/Inputs/Autocomplete.tsx

@@ -9,7 +9,7 @@ import { FormHelperText, Stack } from '@mui/material';
 import SingleAutocompleteField from '../../InputField/Select/Autocomplete';
 import { labelPressEnterToAccept } from '../translatedLabels';
 import MultiAutocompleteField from '../../InputField/Select/Autocomplete/Multi';
-import { useMemoComponent } from '../../utils';
+import useMemoComponent from '../../utils/useMemoComponent';
 import { SelectEntry } from '../../InputField/Select';
 
 import { InputPropsWithoutGroup, InputType } from './models';

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -25,8 +25,7 @@ const ConnectedAutocomplete = ({
   connectedAutocomplete,
   change,
   additionalMemoProps,
-  type,
-  disableSortedOptions = false
+  type
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
@@ -107,7 +106,6 @@ const ConnectedAutocomplete = ({
       <AutocompleteField
         dataTestId={dataTestId}
         disableClearable={false}
-        disableSortedOptions={disableSortedOptions}
         disabled={disabled}
         error={error}
         field={filterKey}

package/src/Form/Inputs/Grid.tsx

@@ -23,16 +23,14 @@ const useStyles = makeStyles<StylesProps>()(
 );
 
 const Grid = ({ grid }: InputPropsWithoutGroup): JSX.Element => {
-  const { classes, cx } = useStyles({
+  const { classes } = useStyles({
     alignItems: grid?.alignItems,
     columns: grid?.columns.length,
     gridTemplateColumns: grid?.gridTemplateColumns
   });
 
-  const className = grid?.className || '';
-
   return (
-    <div className={cx(classes.gridFields, className)}>
+    <div className={classes.gridFields}>
       {grid?.columns.map((field) => {
         const Input = getInput(field.type);
 

package/src/Form/Inputs/Radio.tsx

@@ -1,5 +1,5 @@
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, includes, path, split, type } from 'ramda';
+import { equals, includes, path, split } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 
 import { useMemoComponent } from '../..';
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 import { InputPropsWithoutGroup } from './models';
 
@@ -73,23 +73,12 @@ const Radio = ({
                   disabled={disabled}
                   id={getNormalizedId(`${dataTestId}${optionLabel}`)}
                   inputProps={{
-                    'aria-label':
-                      (equals(type(optionLabel), 'String') &&
-                        t(optionLabel as string)) ||
-                      ''
+                    'aria-label': t(optionLabel) || ''
                   }}
                 />
               }
-              key={
-                equals(type(optionLabel), 'String')
-                  ? (optionLabel as string)
-                  : `${optionValue}`
-              }
-              label={
-                equals(type(optionLabel), 'String')
-                  ? (t(optionLabel as string) as string)
-                  : optionLabel
-              }
+              key={optionLabel}
+              label={t(optionLabel) as string}
               value={optionValue}
             />
           ))}

package/src/Form/Inputs/Switch.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { FormControlLabel, Switch as MUISwitch } from '@mui/material';
 
-import { getNormalizedId } from '../../utils/getNormalizedId';
+import getNormalizedId from '../../utils/getNormalizedId';
 import { useMemoComponent } from '../..';
 
 import { InputPropsWithoutGroup } from './models';

package/src/Form/Inputs/Text.tsx

@@ -12,8 +12,6 @@ import {
   type as variableType
 } from 'ramda';
 
-import { InputAdornment } from '@mui/material';
-
 import { TextField, useMemoComponent } from '../..';
 
 import PasswordEndAdornment from './PasswordEndAdornment';
@@ -29,8 +27,7 @@ const Text = ({
   getRequired,
   change,
   additionalMemoProps,
-  text,
-  autoFocus
+  text
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
@@ -67,24 +64,16 @@ const Text = ({
     ? path(fieldNamePath, errors)
     : undefined;
 
-  const EndAdornment = useCallback((): JSX.Element | null => {
-    if (equals(type, InputType.Password)) {
-      return (
+  const passwordEndAdornment = useCallback(
+    (): JSX.Element | null =>
+      equals(type, InputType.Password) ? (
         <PasswordEndAdornment
           changeVisibility={changeVisibility}
           isVisible={isVisible}
         />
-      );
-    }
-
-    if (text?.endAdornment) {
-      return (
-        <InputAdornment position="end">{text?.endAdornment}</InputAdornment>
-      );
-    }
-
-    return null;
-  }, [isVisible]);
+      ) : null,
+    [isVisible]
+  );
 
   const getInputType = (): string => {
     if (text?.type) {
@@ -108,15 +97,13 @@ const Text = ({
     Component: (
       <TextField
         fullWidth
-        EndAdornment={EndAdornment}
+        EndAdornment={passwordEndAdornment}
         ariaLabel={t(label) || ''}
-        autoFocus={autoFocus}
         dataTestId={dataTestId || ''}
         disabled={disabled}
         error={error as string | undefined}
         label={t(label)}
         multiline={isMultiline}
-        placeholder={text?.placeholder}
         required={isRequired}
         rows={rows}
         type={getInputType()}