@centreon/ui 24.9.4 → 24.9.6

package/src/Form/FormButtons.tsx

@@ -1,14 +1,15 @@
 import { useState } from 'react';
 
+import { useTranslation } from 'react-i18next';
 import { FormikValues, useFormikContext } from 'formik';
 import { not } from 'ramda';
-import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
 import { Button } from '@mui/material';
 
 import SaveButton from '../Button/Save';
-import { getNormalizedId, useMemoComponent } 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

@@ -1,16 +1,16 @@
 import { useCallback, useMemo, useState } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { path, equals, isNil, map, not, prop, type } from 'ramda';
+import { equals, isNil, map, not, path, prop, type } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import { FormHelperText, Stack } from '@mui/material';
 
-import { SelectEntry } from '../../InputField/Select';
 import SingleAutocompleteField from '../../InputField/Select/Autocomplete';
-import MultiAutocompleteField from '../../InputField/Select/Autocomplete/Multi';
-import { useMemoComponent } from '../../utils';
 import { labelPressEnterToAccept } from '../translatedLabels';
+import MultiAutocompleteField from '../../InputField/Select/Autocomplete/Multi';
+import useMemoComponent from '../../utils/useMemoComponent';
+import { SelectEntry } from '../../InputField/Select';
 
 import { InputPropsWithoutGroup, InputType } from './models';
 

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { path, equals, isEmpty, propEq, reject, split } from 'ramda';
+import { equals, isEmpty, path, split } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -25,8 +25,7 @@ const ConnectedAutocomplete = ({
   connectedAutocomplete,
   change,
   additionalMemoProps,
-  type,
-  disableSortedOptions = false
+  type
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
@@ -102,24 +101,11 @@ const ConnectedAutocomplete = ({
     [isMultiple]
   );
 
-  const deleteItem = (_, option): void => {
-    const newValue = reject(propEq(option.id, 'id'), value);
-
-    setFieldValue(fieldName, newValue);
-  };
-
-  const chipProps = connectedAutocomplete && {
-    color: connectedAutocomplete?.chipColor || 'default',
-    onDelete: deleteItem
-  };
-
   return useMemoComponent({
     Component: (
       <AutocompleteField
-        chipProps={chipProps}
         dataTestId={dataTestId}
         disableClearable={false}
-        disableSortedOptions={disableSortedOptions}
         disabled={disabled}
         error={error}
         field={filterKey}

package/src/Form/Inputs/FieldsTable/FieldsTable.tsx

@@ -1,36 +1,36 @@
 import { useEffect, useState } from 'react';
 
-import { DraggableSyntheticListeners, rectIntersection } from '@dnd-kit/core';
-import { verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { FormikValues, useFormikContext } from 'formik';
 import { useAtomValue } from 'jotai';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
+import { verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { DraggableSyntheticListeners, rectIntersection } from '@dnd-kit/core';
 import {
-  path,
-  clone,
   dec,
   equals,
-  filter,
   inc,
-  is,
   isNil,
-  map,
-  not,
-  or,
   pick,
-  pipe,
   split,
-  type
+  path,
+  type,
+  not,
+  filter,
+  pipe,
+  map,
+  or,
+  is,
+  clone
 } from 'ramda';
-import { useTranslation } from 'react-i18next';
-import { makeStyles } from 'tss-react/mui';
 
-import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 import { FormHelperText, IconButton, Typography } from '@mui/material';
+import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 
 import { userAtom } from '@centreon/ui-context';
 
-import { SortableItems, useMemoComponent } from '../../..';
 import { DragEnd } from '../../../SortableItems';
+import { SortableItems, useMemoComponent } from '../../..';
 import {
   InputPropsWithoutGroup,
   InputPropsWithoutGroupAndType

package/src/Form/Inputs/FieldsTable/Row.tsx

@@ -1,14 +1,14 @@
 import { Children } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { path, inc, is, not, remove, split } from 'ramda';
+import { not, path, split, remove, inc, is } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
 import DeleteIcon from '@mui/icons-material/Delete';
 
-import { getInput } from '..';
 import { IconButton } from '../../..';
+import { getInput } from '..';
 import { InputPropsWithoutGroup } from '../models';
 
 interface StylesProps {

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/PasswordEndAdornment.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from 'react-i18next';
 
+import { InputAdornment } from '@mui/material';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import { InputAdornment } from '@mui/material';
 
 import { IconButton } from '../..';
 import {

package/src/Form/Inputs/Radio.tsx

@@ -1,17 +1,17 @@
 import { FormikValues, useFormikContext } from 'formik';
-import { path, equals, includes, split, type } from 'ramda';
+import { equals, includes, path, split } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {
   FormControlLabel,
   FormGroup,
   FormLabel,
-  Radio as MUIRadio,
-  RadioGroup
+  RadioGroup,
+  Radio as MUIRadio
 } 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,8 +6,8 @@ import { useTranslation } from 'react-i18next';
 
 import { FormControlLabel, Switch as MUISwitch } from '@mui/material';
 
+import getNormalizedId from '../../utils/getNormalizedId';
 import { useMemoComponent } from '../..';
-import { getNormalizedId } from '../../utils/getNormalizedId';
 
 import { InputPropsWithoutGroup } from './models';
 

package/src/Form/Inputs/Text.tsx

@@ -1,18 +1,16 @@
 import { ChangeEvent, useCallback, useState } from 'react';
 
-import { FormikValues, useFormikContext } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { useFormikContext, FormikValues } from 'formik';
 import {
-  path,
   equals,
   gt,
   isEmpty,
   not,
+  path,
   split,
   type as variableType
 } from 'ramda';
-import { useTranslation } from 'react-i18next';
-
-import { InputAdornment } from '@mui/material';
 
 import { TextField, useMemoComponent } from '../..';
 
@@ -29,35 +27,28 @@ const Text = ({
   getRequired,
   change,
   additionalMemoProps,
-  text,
-  autoFocus
+  text
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
   const [isVisible, setIsVisible] = useState(false);
 
-  const {
-    values,
-    setFieldValue,
-    touched,
-    errors,
-    handleBlur,
-    setFieldTouched
-  } = useFormikContext<FormikValues>();
+  const { values, setFieldValue, touched, errors, handleBlur } =
+    useFormikContext<FormikValues>();
 
   const fieldNamePath = split('.', fieldName);
 
   const changeText = (event: ChangeEvent<HTMLInputElement>): void => {
     const { value } = event.target;
     if (change) {
-      change({ setFieldValue, value, setFieldTouched });
+      change({ setFieldValue, value });
 
       return;
     }
 
     const formattedValue =
       equals(text?.type, 'number') && !isEmpty(value)
-        ? Number.parseInt(value, 10)
+        ? parseInt(value, 10)
         : value;
 
     setFieldValue(fieldName, formattedValue);
@@ -73,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) {
@@ -114,26 +97,19 @@ const Text = ({
     Component: (
       <TextField
         fullWidth
-        EndAdornment={EndAdornment}
+        EndAdornment={passwordEndAdornment}
         ariaLabel={t(label) || ''}
-        autoFocus={autoFocus}
-        dataTestId={dataTestId || label}
+        dataTestId={dataTestId || ''}
         disabled={disabled}
         error={error as string | undefined}
         label={t(label)}
         multiline={isMultiline}
-        placeholder={text?.placeholder}
         required={isRequired}
         rows={rows}
         type={getInputType()}
         value={value || ''}
         onBlur={handleBlur(fieldName)}
         onChange={changeText}
-        inputProps={{
-          'data-testid': dataTestId || label,
-          'aria-label': label,
-          min: text?.min
-        }}
       />
     ),
     memoProps: [

package/src/Form/Inputs/index.tsx

@@ -1,84 +1,67 @@
 import { Fragment, useMemo } from 'react';
 
-import { FormikValues, useFormikContext } from 'formik';
+import * as R from 'ramda';
+import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
+import { FormikValues, useFormikContext } from 'formik';
 
 import { Divider, Typography } from '@mui/material';
 
-import { GroupDirection } from '..';
 import CollapsibleGroup from '../CollapsibleGroup';
+import { GroupDirection } from '..';
 
-import {
-  T,
-  always,
-  any,
-  ascend,
-  cond,
-  equals,
-  filter,
-  find,
-  groupBy,
-  isEmpty,
-  isNil,
-  keys,
-  last,
-  not,
-  pluck,
-  prop,
-  propEq,
-  reduce,
-  sort,
-  toPairs
-} from 'ramda';
+import { Group, InputProps, InputPropsWithoutGroup, InputType } from './models';
 import Autocomplete from './Autocomplete';
-import Checkbox from './Checkbox';
-import CheckboxGroup from './CheckboxGroup';
+import SwitchInput from './Switch';
+import RadioInput from './Radio';
+import TextInput from './Text';
 import ConnectedAutocomplete from './ConnectedAutocomplete';
-import Custom from './Custom';
 import FieldsTable from './FieldsTable/FieldsTable';
 import Grid from './Grid';
-import List from './List/List';
+import Custom from './Custom';
 import LoadingSkeleton from './LoadingSkeleton';
-import RadioInput from './Radio';
-import SwitchInput from './Switch';
-import TextInput from './Text';
-import { Group, InputProps, InputPropsWithoutGroup, InputType } from './models';
 
-export const getInput = cond<
+export const getInput = R.cond<
   Array<InputType>,
   (props: InputPropsWithoutGroup) => JSX.Element | null
 >([
-  [equals(InputType.Switch) as (b: InputType) => boolean, always(SwitchInput)],
-  [equals(InputType.Radio) as (b: InputType) => boolean, always(RadioInput)],
   [
-    equals(InputType.SingleAutocomplete) as (b: InputType) => boolean,
-    always(Autocomplete)
+    R.equals(InputType.Switch) as (b: InputType) => boolean,
+    R.always(SwitchInput)
   ],
   [
-    equals(InputType.MultiAutocomplete) as (b: InputType) => boolean,
-    always(Autocomplete)
+    R.equals(InputType.Radio) as (b: InputType) => boolean,
+    R.always(RadioInput)
   ],
+  [R.equals(InputType.Text) as (b: InputType) => boolean, R.always(TextInput)],
   [
-    equals(InputType.MultiConnectedAutocomplete) as (b: InputType) => boolean,
-    always(ConnectedAutocomplete)
+    R.equals(InputType.SingleAutocomplete) as (b: InputType) => boolean,
+    R.always(Autocomplete)
   ],
   [
-    equals(InputType.SingleConnectedAutocomplete) as (b: InputType) => boolean,
-    always(ConnectedAutocomplete)
+    R.equals(InputType.MultiAutocomplete) as (b: InputType) => boolean,
+    R.always(Autocomplete)
   ],
   [
-    equals(InputType.FieldsTable) as (b: InputType) => boolean,
-    always(FieldsTable)
+    R.equals(InputType.Password) as (b: InputType) => boolean,
+    R.always(TextInput)
   ],
-  [equals(InputType.Grid) as (b: InputType) => boolean, always(Grid)],
-  [equals(InputType.Custom) as (b: InputType) => boolean, always(Custom)],
-  [equals(InputType.Checkbox) as (b: InputType) => boolean, always(Checkbox)],
   [
-    equals(InputType.CheckboxGroup) as (b: InputType) => boolean,
-    always(CheckboxGroup)
+    R.equals(InputType.MultiConnectedAutocomplete) as (b: InputType) => boolean,
+    R.always(ConnectedAutocomplete)
   ],
-  [equals(InputType.List) as (b: InputType) => boolean, always(List)],
-  [T, always(TextInput)]
+  [
+    R.equals(InputType.SingleConnectedAutocomplete) as (
+      b: InputType
+    ) => boolean,
+    R.always(ConnectedAutocomplete)
+  ],
+  [
+    R.equals(InputType.FieldsTable) as (b: InputType) => boolean,
+    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)]
 ]);
 
 interface StylesProps {
@@ -96,19 +79,17 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
     justifyContent: 'flex-end'
   },
   divider: {
-    margin: equals(groupDirection, GroupDirection.Horizontal)
+    margin: R.equals(groupDirection, GroupDirection.Horizontal)
       ? theme.spacing(0, 2)
       : theme.spacing(2, 0)
   },
   groups: {
     display: 'flex',
-    flexDirection: equals(groupDirection, GroupDirection.Horizontal)
+    flexDirection: R.equals(groupDirection, GroupDirection.Horizontal)
       ? 'row'
       : 'column'
   },
-  inputWrapper: {
-    width: '100%'
-  },
+  inputWrapper: { width: '100%' },
   inputs: {
     display: 'flex',
     flexDirection: 'column',
@@ -118,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;
@@ -132,16 +111,15 @@ 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 = pluck('name', groups);
+  const groupsName = R.pluck('name', groups);
 
-  const visibleInputs = filter(
+  const visibleInputs = R.filter(
     ({ hideInput }) =>
       formikContext ? !hideInput?.(formikContext?.values) || false : true,
     inputs
@@ -149,30 +127,30 @@ const Inputs = ({
 
   const inputsByGroup = useMemo(
     () =>
-      groupBy(
-        ({ group }) => find(equals(group), groupsName) as string,
+      R.groupBy(
+        ({ group }) => R.find(R.equals(group), groupsName) as string,
         visibleInputs
       ),
     [visibleInputs]
   ) as Record<string, Array<InputProps>>;
 
   const sortedGroupNames = useMemo(() => {
-    const sortedGroups = sort(ascend(prop('order')), groups);
+    const sortedGroups = R.sort(R.ascend(R.prop('order')), groups);
 
-    const usedGroups = filter(
-      ({ name }) => any(equals(name), keys(inputsByGroup)),
+    const usedGroups = R.filter(
+      ({ name }) => R.any(R.equals(name), R.keys(inputsByGroup)),
       sortedGroups
     );
 
-    return pluck('name', usedGroups);
+    return R.pluck('name', usedGroups);
   }, []);
 
   const sortedInputsByGroup = useMemo(
     () =>
-      reduce<string, Record<string, Array<InputProps>>>(
+      R.reduce<string, Record<string, Array<InputProps>>>(
         (acc, value) => ({
           ...acc,
-          [value]: sort(
+          [value]: R.sort(
             (a, b) => (b?.required ? 1 : 0) - (a?.required ? 1 : 0),
             inputsByGroup[value]
           )
@@ -183,30 +161,29 @@ const Inputs = ({
     [visibleInputs]
   );
 
-  const lastGroup = useMemo(() => last(sortedGroupNames), []);
+  const lastGroup = useMemo(() => R.last(sortedGroupNames), []);
 
   const normalizedInputsByGroup = (
-    isEmpty(sortedInputsByGroup)
+    R.isEmpty(sortedInputsByGroup)
       ? [[null, visibleInputs]]
-      : toPairs(sortedInputsByGroup)
+      : R.toPairs(sortedInputsByGroup)
   ) as Array<[string | null, Array<InputProps>]>;
 
   return (
     <div className={classes.groups}>
       {normalizedInputsByGroup.map(([groupName, groupedInputs], index) => {
-        const hasGroupTitle = not(isNil(groupName));
+        const hasGroupTitle = R.not(R.isNil(groupName));
 
         const groupProps = hasGroupTitle
-          ? find(propEq(groupName, 'name'), groups)
+          ? R.find(R.propEq('name', groupName), groups)
           : ({} as Group);
 
-        const isFirstElement = areGroupsOpen || equals(index, 0);
+        const isFirstElement = R.equals(index, 0);
 
         return (
           <Fragment key={groupName}>
             <div>
               <CollapsibleGroup
-                className={groupsClassName}
                 defaultIsOpen={isFirstElement}
                 group={groupProps}
                 hasGroupTitle={hasGroupTitle}
@@ -232,35 +209,31 @@ 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>
                     );
                   })}
                 </div>
               </CollapsibleGroup>
             </div>
-            {hasGroupTitle && not(equals(lastGroup, groupName as string)) && (
-              <Divider
-                flexItem
-                className={classes.divider}
-                orientation={
-                  equals(groupDirection, GroupDirection.Horizontal)
-                    ? 'vertical'
-                    : 'horizontal'
-                }
-              />
-            )}
+            {hasGroupTitle &&
+              R.not(R.equals(lastGroup, groupName as string)) && (
+                <Divider
+                  flexItem
+                  className={classes.divider}
+                  orientation={
+                    R.equals(groupDirection, GroupDirection.Horizontal)
+                      ? 'vertical'
+                      : 'horizontal'
+                  }
+                />
+              )}
           </Fragment>
         );
       })}