@centreon/ui 24.8.6 → 24.8.7

package/src/Form/Form.stories.tsx

@@ -1,14 +1,14 @@
 import { Paper } from '@mui/material';
 
+import { Form, GroupDirection } from './Form';
 import {
   BasicForm,
+  CustomButton,
   basicFormGroups,
   basicFormInitialValues,
   basicFormInputs,
-  basicFormValidationSchema,
-  CustomButton
+  basicFormValidationSchema
 } from './storiesData';
-import { Form, GroupDirection } from './Form';
 
 export default { title: 'Form' };
 

package/src/Form/Form.tsx

@@ -4,12 +4,13 @@ import {
   FormikSharedConfig,
   FormikValues
 } from 'formik';
-import * as Yup from 'yup';
 
+import { ComponentType } from 'react';
+import { Schema } from 'yup';
+import { useStyles } from './Form.styles';
 import FormButtons from './FormButtons';
 import Inputs from './Inputs';
 import { Group, InputProps } from './Inputs/models';
-import { useStyles } from './Form.styles';
 
 export enum GroupDirection {
   Horizontal = 'horizontal',
@@ -17,7 +18,7 @@ export enum GroupDirection {
 }
 
 export type FormProps<T> = {
-  Buttons?: React.ComponentType;
+  Buttons?: ComponentType;
   areGroupsOpen?: boolean;
   children?: JSX.Element;
   className?: string;
@@ -30,7 +31,7 @@ export type FormProps<T> = {
   isLoading?: boolean;
   submit: (values: T, bag: FormikHelpers<T>) => void | Promise<void>;
   validate?: (values: FormikValues) => void;
-  validationSchema: Yup.SchemaOf<T>;
+  validationSchema: Schema<T>;
 } & Omit<FormikSharedConfig<T>, 'isInitialValid'>;
 
 const Form = <T extends object>({

package/src/Form/FormButtons.tsx

@@ -1,14 +1,14 @@
 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 { useMemoComponent, getNormalizedId } from '../utils';
+import { getNormalizedId, useMemoComponent } from '../utils';
 
 import {
   labelReset,

package/src/Form/Inputs/Autocomplete.tsx

@@ -1,16 +1,16 @@
 import { useCallback, useMemo, useState } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, isNil, map, not, path, prop, type } from 'ramda';
+import { path, equals, isNil, map, not, 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 { labelPressEnterToAccept } from '../translatedLabels';
 import MultiAutocompleteField from '../../InputField/Select/Autocomplete/Multi';
 import { useMemoComponent } from '../../utils';
-import { SelectEntry } from '../../InputField/Select';
+import { labelPressEnterToAccept } from '../translatedLabels';
 
 import { InputPropsWithoutGroup, InputType } from './models';
 

package/src/Form/Inputs/Checkbox.tsx

@@ -5,8 +5,8 @@ import { path, split } from 'ramda';
 
 import { Box } from '@mui/material';
 
-import { Checkbox as CheckboxComponent } from '../../Checkbox';
 import { useMemoComponent } from '../..';
+import { Checkbox as CheckboxComponent } from '../../Checkbox';
 
 import { InputPropsWithoutGroup } from './models';
 

package/src/Form/Inputs/CheckboxGroup.tsx

@@ -1,12 +1,12 @@
 import { ChangeEvent, useEffect } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, includes, path, split } from 'ramda';
+import { path, equals, includes, split } from 'ramda';
 
 import { Box, Typography } from '@mui/material';
 
-import { CheckboxGroup as CheckboxGroupComponent } from '../../Checkbox';
 import { useMemoComponent } from '../..';
+import { CheckboxGroup as CheckboxGroupComponent } from '../../Checkbox';
 
 import { InputPropsWithoutGroup } from './models';
 

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, isEmpty, path, propEq, reject, split } from 'ramda';
+import { path, equals, isEmpty, propEq, reject, split } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {

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,
-  pick,
-  split,
-  path,
-  type,
-  not,
-  filter,
-  pipe,
   map,
+  not,
   or,
-  is,
-  clone
+  pick,
+  pipe,
+  split,
+  type
 } from 'ramda';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
-import { FormHelperText, IconButton, Typography } from '@mui/material';
 import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
+import { FormHelperText, IconButton, Typography } from '@mui/material';
 
 import { userAtom } from '@centreon/ui-context';
 
-import { DragEnd } from '../../../SortableItems';
 import { SortableItems, useMemoComponent } from '../../..';
+import { DragEnd } from '../../../SortableItems';
 import {
   InputPropsWithoutGroup,
   InputPropsWithoutGroupAndType

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

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

package/src/Form/Inputs/List/Content.tsx

@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 
 import { DraggableSyntheticListeners } from '@dnd-kit/core';
 
-import KrilinIndicatorIcon from '@mui/icons-material/DragIndicator';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import KrilinIndicatorIcon from '@mui/icons-material/DragIndicator';
 
 import { IconButton } from '../../../components';
 

package/src/Form/Inputs/List/List.tsx

@@ -4,12 +4,12 @@ import { closestCenter } from '@dnd-kit/core';
 import { verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { useTranslation } from 'react-i18next';
 
-import { InputPropsWithoutGroup } from '../models';
 import { SortableItems, Subtitle } from '../../..';
+import { InputPropsWithoutGroup } from '../models';
 
-import { useList } from './useList';
-import { useListStyles } from './List.styles';
 import Content, { ContentProps } from './Content';
+import { useListStyles } from './List.styles';
+import { useList } from './useList';
 
 const List = ({
   list,

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

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,16 +1,16 @@
 import { ChangeEvent, useCallback, useState } from 'react';
 
-import { useTranslation } from 'react-i18next';
-import { useFormikContext, FormikValues } from 'formik';
+import { FormikValues, useFormikContext } 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';
 
@@ -51,7 +51,7 @@ const Text = ({
 
     const formattedValue =
       equals(text?.type, 'number') && !isEmpty(value)
-        ? parseInt(value, 10)
+        ? Number.parseInt(value, 10)
         : value;
 
     setFieldValue(fieldName, formattedValue);

package/src/Form/Inputs/index.tsx

@@ -1,74 +1,84 @@
 import { Fragment, useMemo } from 'react';
 
-import * as R from 'ramda';
-import { makeStyles } from 'tss-react/mui';
 import { FormikValues, useFormikContext } from 'formik';
+import { makeStyles } from 'tss-react/mui';
 
 import { Divider, Typography } from '@mui/material';
 
-import CollapsibleGroup from '../CollapsibleGroup';
 import { GroupDirection } from '..';
+import CollapsibleGroup from '../CollapsibleGroup';
 
-import { Group, InputProps, InputPropsWithoutGroup, InputType } from './models';
+import {
+  T,
+  always,
+  any,
+  ascend,
+  cond,
+  equals,
+  filter,
+  find,
+  groupBy,
+  isEmpty,
+  isNil,
+  keys,
+  last,
+  not,
+  pluck,
+  prop,
+  propEq,
+  reduce,
+  sort,
+  toPairs
+} from 'ramda';
 import Autocomplete from './Autocomplete';
-import SwitchInput from './Switch';
-import RadioInput from './Radio';
-import TextInput from './Text';
+import Checkbox from './Checkbox';
+import CheckboxGroup from './CheckboxGroup';
 import ConnectedAutocomplete from './ConnectedAutocomplete';
+import Custom from './Custom';
 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';
+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 = R.cond<
+export const getInput = 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)],
   [
-    R.equals(InputType.Switch) as (b: InputType) => boolean,
-    R.always(SwitchInput)
-  ],
-  [
-    R.equals(InputType.Radio) as (b: InputType) => boolean,
-    R.always(RadioInput)
-  ],
-  [
-    R.equals(InputType.SingleAutocomplete) as (b: InputType) => boolean,
-    R.always(Autocomplete)
-  ],
-  [
-    R.equals(InputType.MultiAutocomplete) as (b: InputType) => boolean,
-    R.always(Autocomplete)
+    equals(InputType.SingleAutocomplete) as (b: InputType) => boolean,
+    always(Autocomplete)
   ],
   [
-    R.equals(InputType.MultiConnectedAutocomplete) as (b: InputType) => boolean,
-    R.always(ConnectedAutocomplete)
+    equals(InputType.MultiAutocomplete) as (b: InputType) => boolean,
+    always(Autocomplete)
   ],
   [
-    R.equals(InputType.SingleConnectedAutocomplete) as (
-      b: InputType
-    ) => boolean,
-    R.always(ConnectedAutocomplete)
+    equals(InputType.MultiConnectedAutocomplete) as (b: InputType) => boolean,
+    always(ConnectedAutocomplete)
   ],
   [
-    R.equals(InputType.FieldsTable) as (b: InputType) => boolean,
-    R.always(FieldsTable)
+    equals(InputType.SingleConnectedAutocomplete) as (b: InputType) => boolean,
+    always(ConnectedAutocomplete)
   ],
-  [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)
+    equals(InputType.FieldsTable) as (b: InputType) => boolean,
+    always(FieldsTable)
   ],
+  [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)],
   [
-    R.equals(InputType.CheckboxGroup) as (b: InputType) => boolean,
-    R.always(CheckboxGroup)
+    equals(InputType.CheckboxGroup) as (b: InputType) => boolean,
+    always(CheckboxGroup)
   ],
-  [R.equals(InputType.List) as (b: InputType) => boolean, R.always(List)],
-  [R.T, R.always(TextInput)]
+  [equals(InputType.List) as (b: InputType) => boolean, always(List)],
+  [T, always(TextInput)]
 ]);
 
 interface StylesProps {
@@ -86,13 +96,13 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
     justifyContent: 'flex-end'
   },
   divider: {
-    margin: R.equals(groupDirection, GroupDirection.Horizontal)
+    margin: equals(groupDirection, GroupDirection.Horizontal)
       ? theme.spacing(0, 2)
       : theme.spacing(2, 0)
   },
   groups: {
     display: 'flex',
-    flexDirection: R.equals(groupDirection, GroupDirection.Horizontal)
+    flexDirection: equals(groupDirection, GroupDirection.Horizontal)
       ? 'row'
       : 'column'
   },
@@ -129,9 +139,9 @@ const Inputs = ({
   const { classes, cx } = useStyles({ groupDirection });
   const formikContext = useFormikContext<FormikValues>();
 
-  const groupsName = R.pluck('name', groups);
+  const groupsName = pluck('name', groups);
 
-  const visibleInputs = R.filter(
+  const visibleInputs = filter(
     ({ hideInput }) =>
       formikContext ? !hideInput?.(formikContext?.values) || false : true,
     inputs
@@ -139,30 +149,30 @@ const Inputs = ({
 
   const inputsByGroup = useMemo(
     () =>
-      R.groupBy(
-        ({ group }) => R.find(R.equals(group), groupsName) as string,
+      groupBy(
+        ({ group }) => find(equals(group), groupsName) as string,
         visibleInputs
       ),
     [visibleInputs]
   ) as Record<string, Array<InputProps>>;
 
   const sortedGroupNames = useMemo(() => {
-    const sortedGroups = R.sort(R.ascend(R.prop('order')), groups);
+    const sortedGroups = sort(ascend(prop('order')), groups);
 
-    const usedGroups = R.filter(
-      ({ name }) => R.any(R.equals(name), R.keys(inputsByGroup)),
+    const usedGroups = filter(
+      ({ name }) => any(equals(name), keys(inputsByGroup)),
       sortedGroups
     );
 
-    return R.pluck('name', usedGroups);
+    return pluck('name', usedGroups);
   }, []);
 
   const sortedInputsByGroup = useMemo(
     () =>
-      R.reduce<string, Record<string, Array<InputProps>>>(
+      reduce<string, Record<string, Array<InputProps>>>(
         (acc, value) => ({
           ...acc,
-          [value]: R.sort(
+          [value]: sort(
             (a, b) => (b?.required ? 1 : 0) - (a?.required ? 1 : 0),
             inputsByGroup[value]
           )
@@ -173,24 +183,24 @@ const Inputs = ({
     [visibleInputs]
   );
 
-  const lastGroup = useMemo(() => R.last(sortedGroupNames), []);
+  const lastGroup = useMemo(() => last(sortedGroupNames), []);
 
   const normalizedInputsByGroup = (
-    R.isEmpty(sortedInputsByGroup)
+    isEmpty(sortedInputsByGroup)
       ? [[null, visibleInputs]]
-      : R.toPairs(sortedInputsByGroup)
+      : toPairs(sortedInputsByGroup)
   ) as Array<[string | null, Array<InputProps>]>;
 
   return (
     <div className={classes.groups}>
       {normalizedInputsByGroup.map(([groupName, groupedInputs], index) => {
-        const hasGroupTitle = R.not(R.isNil(groupName));
+        const hasGroupTitle = not(isNil(groupName));
 
         const groupProps = hasGroupTitle
-          ? R.find(R.propEq(groupName, 'name'), groups)
+          ? find(propEq(groupName, 'name'), groups)
           : ({} as Group);
 
-        const isFirstElement = areGroupsOpen || R.equals(index, 0);
+        const isFirstElement = areGroupsOpen || equals(index, 0);
 
         return (
           <Fragment key={groupName}>
@@ -240,18 +250,17 @@ const Inputs = ({
                 </div>
               </CollapsibleGroup>
             </div>
-            {hasGroupTitle &&
-              R.not(R.equals(lastGroup, groupName as string)) && (
-                <Divider
-                  flexItem
-                  className={classes.divider}
-                  orientation={
-                    R.equals(groupDirection, GroupDirection.Horizontal)
-                      ? 'vertical'
-                      : 'horizontal'
-                  }
-                />
-              )}
+            {hasGroupTitle && not(equals(lastGroup, groupName as string)) && (
+              <Divider
+                flexItem
+                className={classes.divider}
+                orientation={
+                  equals(groupDirection, GroupDirection.Horizontal)
+                    ? 'vertical'
+                    : 'horizontal'
+                }
+              />
+            )}
           </Fragment>
         );
       })}

package/src/Form/Inputs/models.ts

@@ -6,20 +6,20 @@ import { SelectEntry } from '../../InputField/Select';
 import { ConditionsSearchParameter } from '../../api/buildListingEndpoint/models';
 
 export enum InputType {
-  Switch,
-  Radio,
-  Text,
-  SingleAutocomplete,
-  MultiAutocomplete,
-  Password,
-  SingleConnectedAutocomplete,
-  MultiConnectedAutocomplete,
-  FieldsTable,
-  Grid,
-  Custom,
-  Checkbox,
-  CheckboxGroup,
-  List
+  Switch = 0,
+  Radio = 1,
+  Text = 2,
+  SingleAutocomplete = 3,
+  MultiAutocomplete = 4,
+  Password = 5,
+  SingleConnectedAutocomplete = 6,
+  MultiConnectedAutocomplete = 7,
+  FieldsTable = 8,
+  Grid = 9,
+  Custom = 10,
+  Checkbox = 11,
+  CheckboxGroup = 12,
+  List = 13
 }
 
 interface FieldsTableGetRequiredProps {