@centreon/ui 24.4.13 → 24.4.14

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

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Theme, Tooltip } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 import StartIcon from './StartIcon';
 import Content from './Content';

package/src/Dialog/Confirm/index.tsx

@@ -1,25 +1,12 @@
-import { 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;
-};
+type Props = DialogProps & { labelMessage?: string | null };
 
-const Confirm = ({
-  labelMessage,
-  labelSecondMessage,
-  children,
-  ...rest
-}: Props): JSX.Element => (
+const Confirm = ({ labelMessage, ...rest }: Props): JSX.Element => (
   <Dialog {...rest}>
-    <DialogContentText>
-      {labelMessage && <Typography>{labelMessage}</Typography>}
-      {labelSecondMessage && <Typography>{labelSecondMessage}</Typography>}
-      {children}
-    </DialogContentText>
+    {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/index.tsx

@@ -12,8 +12,6 @@ import {
   CircularProgress
 } from '@mui/material';
 
-import { DataTestAttributes } from '../@types/data-attributes';
-
 interface StylesProps {
   contentWidth?: number;
 }
@@ -37,7 +35,6 @@ export type Props = {
   confirmDisabled?: boolean;
   contentWidth?: number;
   dialogActionsClassName?: string;
-  dialogConfirmButtonClassName?: string;
   dialogContentClassName?: string;
   dialogPaperClassName?: string;
   dialogTitleClassName?: string;
@@ -49,8 +46,7 @@ export type Props = {
   onConfirm: (event, value?) => void;
   open: boolean;
   submitting?: boolean;
-} & DialogProps &
-  DataTestAttributes;
+} & DialogProps;
 
 const Dialog = ({
   open,
@@ -69,7 +65,6 @@ const Dialog = ({
   dialogTitleClassName,
   dialogContentClassName,
   dialogActionsClassName,
-  dialogConfirmButtonClassName,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ contentWidth });
@@ -96,20 +91,13 @@ const Dialog = ({
       )}
       <DialogActions className={dialogActionsClassName}>
         {onCancel && (
-          <Button
-            color="primary"
-            data-testid="Cancel"
-            disabled={cancelDisabled}
-            onClick={onCancel}
-          >
+          <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}

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';

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';
@@ -66,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) {
@@ -107,14 +97,13 @@ const Text = ({
     Component: (
       <TextField
         fullWidth
-        EndAdornment={EndAdornment}
+        EndAdornment={passwordEndAdornment}
         ariaLabel={t(label) || ''}
         dataTestId={dataTestId || ''}
         disabled={disabled}
         error={error as string | undefined}
         label={t(label)}
         multiline={isMultiline}
-        placeholder={text?.placeholder}
         required={isRequired}
         rows={rows}
         type={getInputType()}

package/src/Form/Inputs/index.tsx

@@ -1,6 +1,7 @@
 import { Fragment, useMemo } from 'react';
 
 import * as R from 'ramda';
+import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 import { FormikValues, useFormikContext } from 'formik';
 
@@ -17,11 +18,8 @@ import TextInput from './Text';
 import ConnectedAutocomplete from './ConnectedAutocomplete';
 import FieldsTable from './FieldsTable/FieldsTable';
 import Grid from './Grid';
-import CheckboxGroup from './CheckboxGroup';
-import Checkbox from './Checkbox';
 import Custom from './Custom';
 import LoadingSkeleton from './LoadingSkeleton';
-import List from './List/List';
 
 export const getInput = R.cond<
   Array<InputType>,
@@ -35,6 +33,7 @@ export const getInput = R.cond<
     R.equals(InputType.Radio) as (b: InputType) => boolean,
     R.always(RadioInput)
   ],
+  [R.equals(InputType.Text) as (b: InputType) => boolean, R.always(TextInput)],
   [
     R.equals(InputType.SingleAutocomplete) as (b: InputType) => boolean,
     R.always(Autocomplete)
@@ -43,6 +42,10 @@ export const getInput = R.cond<
     R.equals(InputType.MultiAutocomplete) as (b: InputType) => boolean,
     R.always(Autocomplete)
   ],
+  [
+    R.equals(InputType.Password) as (b: InputType) => boolean,
+    R.always(TextInput)
+  ],
   [
     R.equals(InputType.MultiConnectedAutocomplete) as (b: InputType) => boolean,
     R.always(ConnectedAutocomplete)
@@ -58,17 +61,7 @@ export const getInput = R.cond<
     R.always(FieldsTable)
   ],
   [R.equals(InputType.Grid) as (b: InputType) => boolean, R.always(Grid)],
-  [R.equals(InputType.Custom) as (b: InputType) => boolean, R.always(Custom)],
-  [
-    R.equals(InputType.Checkbox) as (b: InputType) => boolean,
-    R.always(Checkbox)
-  ],
-  [
-    R.equals(InputType.CheckboxGroup) as (b: InputType) => boolean,
-    R.always(CheckboxGroup)
-  ],
-  [R.equals(InputType.List) as (b: InputType) => boolean, R.always(List)],
-  [R.T, R.always(TextInput)]
+  [R.equals(InputType.Custom) as (b: InputType) => boolean, R.always(Custom)]
 ]);
 
 interface StylesProps {
@@ -96,9 +89,7 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
       ? 'row'
       : 'column'
   },
-  inputWrapper: {
-    width: '100%'
-  },
+  inputWrapper: { width: '100%' },
   inputs: {
     display: 'flex',
     flexDirection: 'column',
@@ -108,10 +99,8 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
 }));
 
 interface Props {
-  areGroupsOpen?: boolean;
   groupDirection?: GroupDirection;
   groups?: Array<Group>;
-  groupsClassName?: string;
   inputs: Array<InputProps>;
   isCollapsible: boolean;
   isLoading?: boolean;
@@ -122,11 +111,10 @@ const Inputs = ({
   groups = [],
   isLoading = false,
   isCollapsible,
-  groupDirection,
-  groupsClassName,
-  areGroupsOpen
+  groupDirection
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ groupDirection });
+  const { classes } = useStyles({ groupDirection });
+  const { t } = useTranslation();
   const formikContext = useFormikContext<FormikValues>();
 
   const groupsName = R.pluck('name', groups);
@@ -187,16 +175,15 @@ const Inputs = ({
         const hasGroupTitle = R.not(R.isNil(groupName));
 
         const groupProps = hasGroupTitle
-          ? R.find(R.propEq(groupName, 'name'), groups)
+          ? R.find(R.propEq('name', groupName), groups)
           : ({} as Group);
 
-        const isFirstElement = areGroupsOpen || R.equals(index, 0);
+        const isFirstElement = R.equals(index, 0);
 
         return (
           <Fragment key={groupName}>
             <div>
               <CollapsibleGroup
-                className={groupsClassName}
                 defaultIsOpen={isFirstElement}
                 group={groupProps}
                 hasGroupTitle={hasGroupTitle}
@@ -222,18 +209,13 @@ const Inputs = ({
                       >
                         {inputProps.additionalLabel && (
                           <Typography
-                            className={cx(
-                              classes.additionalLabel,
-                              inputProps?.additionalLabelClassName
-                            )}
+                            className={classes.additionalLabel}
                             variant="body1"
                           >
-                            {inputProps.additionalLabel}
+                            {t(inputProps.additionalLabel)}
                           </Typography>
                         )}
-                        <div className={inputProps?.inputClassName || ''}>
-                          <Input {...inputProps} />
-                        </div>
+                        <Input {...inputProps} />
                       </div>
                     );
                   })}

package/src/Form/Inputs/models.ts

@@ -1,6 +1,6 @@
 import { FormikValues } from 'formik';
 
-import { SvgIconProps, TypographyProps } from '@mui/material';
+import { SvgIconProps } from '@mui/material';
 
 import { SelectEntry } from '../../InputField/Select';
 import { ConditionsSearchParameter } from '../../api/buildListingEndpoint/models';
@@ -16,10 +16,7 @@ export enum InputType {
   MultiConnectedAutocomplete,
   FieldsTable,
   Grid,
-  Custom,
-  Checkbox,
-  CheckboxGroup,
-  List
+  Custom
 }
 
 interface FieldsTableGetRequiredProps {
@@ -27,22 +24,14 @@ interface FieldsTableGetRequiredProps {
   values: FormikValues;
 }
 
-export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
-
 export interface InputProps {
-  additionalLabel?: string | JSX.Element;
-  additionalLabelClassName?: string;
+  additionalLabel?: string;
   additionalMemoProps?: Array<unknown>;
   autocomplete?: {
     creatable?: boolean;
     options: Array<SelectEntry>;
   };
   change?: ({ setFieldValue, value }) => void;
-  checkbox?: {
-    direction?: 'horizontal' | 'vertical';
-    labelPlacement?: LabelPlacement;
-    options?: Array<string>;
-  };
   connectedAutocomplete?: {
     additionalConditionParameters: Array<ConditionsSearchParameter>;
     endpoint?: string;
@@ -53,7 +42,6 @@ export interface InputProps {
     Component: React.ComponentType<InputPropsWithoutGroup>;
   };
   dataTestId?: string;
-  disableSortedOptions?: boolean;
   fieldName: string;
   fieldsTable?: {
     additionalFieldsToMemoize?: Array<string>;
@@ -69,24 +57,15 @@ export interface InputProps {
   getRequired?: (values: FormikValues) => boolean;
   grid?: {
     alignItems?: string;
-    className?: string;
     columns: Array<Omit<InputProps, 'group'>>;
     gridTemplateColumns?: string;
   };
   group: string;
   hideInput?: (values: FormikValues) => boolean;
-  inputClassName?: string;
   label: string;
-  list?: {
-    AddItem: React.ComponentType<{ addItem }>;
-    SortContent: React.ComponentType<object>;
-    addItemLabel?: string;
-    itemProps: Array<string>;
-    sortLabel?: string;
-  };
   radio?: {
     options?: Array<{
-      label: string | JSX.Element;
+      label: string;
       value: boolean | string;
     }>;
     row?: boolean;
@@ -96,9 +75,7 @@ export interface InputProps {
     getChecked?: (value) => boolean;
   };
   text?: {
-    endAdornment?: JSX.Element;
     multilineRows?: number;
-    placeholder?: string;
     type?: string;
   };
   type: InputType;
@@ -113,5 +90,4 @@ export interface Group {
   TooltipContent?: () => JSX.Element;
   name: string;
   order: number;
-  titleAttributes?: TypographyProps;
 }

package/src/Form/{Form.stories.tsx → index.stories.tsx}

@@ -8,7 +8,8 @@ import {
   basicFormValidationSchema,
   CustomButton
 } from './storiesData';
-import { Form, GroupDirection } from './Form';
+
+import Form, { GroupDirection } from '.';
 
 export default { title: 'Form' };
 
@@ -71,7 +72,7 @@ export const basicFormWithHorizontalGroups = (): JSX.Element => (
     <Form<BasicForm>
       {...mandatoryProps}
       groupDirection={GroupDirection.Horizontal}
-      groups={basicFormGroups.filter((group) => group.order !== 3)}
+      groups={basicFormGroups}
     />
   </Paper>
 );