@centreon/ui 24.11.13 → 24.11.14

package/src/FileDropZone/useDropzone.ts

@@ -7,7 +7,7 @@ import {
   useState
 } from 'react';
 
-import { path, all, isNil, lte, not, pluck } from 'ramda';
+import { all, isNil, lte, not, path, pluck } from 'ramda';
 
 import { labelFileTooBig, labelInvalidFileType } from './translatedLabels';
 

package/src/Form/CollapsibleGroup.tsx

@@ -3,22 +3,21 @@ import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import ExpandMore from '@mui/icons-material/ExpandMore';
 import {
-  Box,
   Collapse,
-  ListItemButton,
-  IconButton as MuiIconButton,
   Tooltip,
-  Typography
+  IconButton as MuiIconButton,
+  Typography,
+  ListItemButton,
+  Box
 } from '@mui/material';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import ExpandMore from '@mui/icons-material/ExpandMore';
 
 import { Group } from './Inputs/models';
 
 interface Props {
   children: React.ReactNode;
-  className?: string;
   defaultIsOpen?: boolean;
   group?: Group;
   hasGroupTitle: boolean;
@@ -43,8 +42,7 @@ const useStyles = makeStyles()((theme) => ({
   },
   tooltip: {
     maxWidth: theme.spacing(60)
-  },
-  title: {}
+  }
 }));
 
 const CollapsibleGroup = ({
@@ -52,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);
@@ -64,8 +61,6 @@ const CollapsibleGroup = ({
     setIsOpen((currentIsOpen) => !currentIsOpen);
   };
 
-  const containerClassName = className || '';
-
   const CollapseIcon = isOpen ? ExpandMore : ChevronRightIcon;
   const ContainerComponent = useCallback(
     ({
@@ -77,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>
       ),
@@ -96,13 +91,7 @@ const CollapsibleGroup = ({
         <ContainerComponent>
           {isCollapsible && <CollapseIcon />}
           <div className={classes.groupTitleIcon}>
-            <Typography
-              className="groupText"
-              variant="h6"
-              {...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

@@ -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';
 
@@ -53,15 +53,7 @@ const Autocomplete = ({
 
   const [inputText, setInputText] = useState('');
 
-  const {
-    values,
-    setFieldValue,
-    setFieldTouched,
-    errors,
-    touched,
-    setValues,
-    setTouched
-  } = useFormikContext<FormikValues>();
+  const { values, setFieldValue, errors } = useFormikContext<FormikValues>();
 
   const isMultiple = equals(inputType, InputType.MultiAutocomplete);
 
@@ -75,20 +67,11 @@ const Autocomplete = ({
     setInputText('');
 
     if (change) {
-      setFieldTouched(fieldName, true, false);
-      change({
-        setFieldValue,
-        value: normalizedNewValues,
-        setFieldTouched,
-        setValues,
-        values,
-        setTouched
-      });
+      change({ setFieldValue, value: normalizedNewValues });
 
       return;
     }
 
-    setFieldTouched(fieldName, true, false);
     setFieldValue(fieldName, normalizedNewValues);
   };
 
@@ -100,10 +83,6 @@ const Autocomplete = ({
   );
 
   const getError = useCallback((): Array<string> | undefined => {
-    if (!path([...fieldName.split('.')], touched)) {
-      return undefined;
-    }
-
     const error = path([...fieldName.split('.')], errors) as
       | Array<string>
       | string
@@ -132,7 +111,7 @@ const Autocomplete = ({
     const filteredError = formattedError?.filter(Boolean);
 
     return (filteredError as Array<string>) || undefined;
-  }, [errors, fieldName, isMultiple, selectedValues, touched]);
+  }, [errors, fieldName, isMultiple, selectedValues]);
 
   const textChange = useCallback(
     (event): void => setInputText(event.target.value),
@@ -188,9 +167,6 @@ const Autocomplete = ({
           value={getValues() ?? null}
           onChange={changeValues}
           onTextChange={textChange}
-          style={{
-            width: (autocomplete?.fullWidth ?? true) ? 'auto' : '180px'
-          }}
         />
         {inputErrors && (
           <Stack>
@@ -204,7 +180,6 @@ const Autocomplete = ({
       </div>
     ),
     memoProps: [
-      values,
       getValues(),
       inputErrors,
       additionalLabel,

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,20 +25,12 @@ const ConnectedAutocomplete = ({
   connectedAutocomplete,
   change,
   additionalMemoProps,
-  type,
-  disableSortedOptions = false
+  type
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
-  const {
-    values,
-    touched,
-    errors,
-    setFieldValue,
-    setFieldTouched,
-    setValues,
-    setTouched
-  } = useFormikContext<FormikValues>();
+  const { values, touched, errors, setFieldValue, setFieldTouched } =
+    useFormikContext<FormikValues>();
 
   const filterKey = connectedAutocomplete?.filterKey || defaultFilterKey;
 
@@ -65,20 +57,18 @@ const ConnectedAutocomplete = ({
   const changeAutocomplete = useCallback(
     (_, value): void => {
       if (change) {
-        change({
-          setFieldValue,
-          value,
-          setFieldTouched,
-          setValues,
-          values,
-          setTouched
-        });
+        change({ setFieldValue, value });
 
         return;
       }
 
-      setFieldTouched(fieldName, true, false);
       setFieldValue(fieldName, value);
+
+      if (path(fieldNamePath, touched)) {
+        return;
+      }
+
+      setFieldTouched(fieldName, true);
     },
     [fieldName, touched, additionalMemoProps]
   );
@@ -111,25 +101,11 @@ const ConnectedAutocomplete = ({
     [isMultiple]
   );
 
-  const deleteItem = (_, option): void => {
-    const newValue = reject(propEq(option.id, 'id'), value);
-
-    setFieldTouched(fieldName, true, false);
-    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

@@ -2,8 +2,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import { InputPropsWithoutGroup } from './models';
 
-import { Box, Typography } from '@mui/material';
-import { FormikValues, useFormikContext } from 'formik';
 import { getInput } from '.';
 
 interface StylesProps {
@@ -24,47 +22,19 @@ const useStyles = makeStyles<StylesProps>()(
   })
 );
 
-const Grid = ({
-  grid,
-  hideInput
-}: InputPropsWithoutGroup): JSX.Element | null => {
-  const { classes, cx } = useStyles({
+const Grid = ({ grid }: InputPropsWithoutGroup): JSX.Element => {
+  const { classes } = useStyles({
     alignItems: grid?.alignItems,
     columns: grid?.columns.length,
     gridTemplateColumns: grid?.gridTemplateColumns
   });
 
-  const { values } = useFormikContext<FormikValues>();
-
-  if (hideInput?.(values) ?? false) {
-    return null;
-  }
-
-  const className = grid?.className || '';
-
   return (
-    <div className={cx(classes.gridFields, className)}>
+    <div className={classes.gridFields}>
       {grid?.columns.map((field) => {
         const Input = getInput(field.type);
 
-        if (field.hideInput?.(values) ?? false) {
-          return null;
-        }
-
-        return (
-          <Box sx={{ width: '100%' }} key={field.fieldName}>
-            {field.additionalLabel && (
-              <Typography
-                sx={{ marginBottom: 0.5, color: 'primary.main' }}
-                className={cx(field?.additionalLabelClassName)}
-                variant="h6"
-              >
-                {field.additionalLabel}
-              </Typography>
-            )}
-            <Input {...field} />
-          </Box>
-        );
+        return <Input key={field.fieldName} {...field} />;
       })}
     </div>
   );

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';
 
@@ -26,20 +26,12 @@ const Radio = ({
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
-  const { values, setFieldValue, setFieldTouched, setValues, setTouched } =
-    useFormikContext<FormikValues>();
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
 
   const changeRadio = (_, value): void => {
     if (includes(value, ['true', 'false'])) {
       if (change) {
-        change({
-          setFieldValue,
-          value: equals(value, 'true'),
-          values,
-          setFieldTouched,
-          setValues,
-          setTouched
-        });
+        change({ setFieldValue, value: equals(value, 'true') });
 
         return;
       }
@@ -50,7 +42,7 @@ const Radio = ({
     }
 
     if (change) {
-      change({ setFieldValue, value, values, setFieldTouched, setValues });
+      change({ setFieldValue, value });
 
       return;
     }
@@ -81,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';
 
@@ -22,19 +22,11 @@ const Switch = ({
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
-  const { values, setFieldValue, setFieldTouched, setValues, setTouched } =
-    useFormikContext<FormikValues>();
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
 
   const changeSwitchValue = (event: ChangeEvent<HTMLInputElement>): void => {
     if (change) {
-      change({
-        setFieldValue,
-        value: event.target.checked,
-        values,
-        setFieldTouched,
-        setValues,
-        setTouched
-      });
+      change({ setFieldValue, value: event.target.checked });
 
       return;
     }
@@ -67,7 +59,7 @@ const Switch = ({
         label={t(label) as string}
       />
     ),
-    memoProps: [value, disabled, additionalMemoProps, values]
+    memoProps: [value, disabled, additionalMemoProps]
   });
 };