@centreon/ui 24.9.6 → 24.10.0

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

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

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

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+
+import { DraggableSyntheticListeners } from '@dnd-kit/core';
+
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import KrilinIndicatorIcon from '@mui/icons-material/DragIndicator';
+
+import { IconButton } from '../../../components';
+
+import { useListStyles } from './List.styles';
+
+export interface ContentProps {
+  attributes;
+  children: ReactNode;
+  deleteItem: (id: string) => () => void;
+  id: string;
+  isDragging: boolean;
+  isInDragOverlay?: boolean;
+  itemRef: React.RefObject<HTMLDivElement>;
+  listeners: DraggableSyntheticListeners;
+  name: string;
+  style;
+}
+
+const Content = ({
+  listeners,
+  itemRef,
+  attributes,
+  style,
+  isDragging,
+  id,
+  children,
+  deleteItem
+}: ContentProps): JSX.Element => {
+  const { classes } = useListStyles();
+
+  return (
+    <div
+      className={classes.content}
+      ref={itemRef}
+      {...attributes}
+      style={style}
+    >
+      <IconButton
+        data-dragging={isDragging}
+        size="small"
+        {...listeners}
+        aria-label={`sort-${id}`}
+        icon={<KrilinIndicatorIcon fontSize="small" />}
+      />
+      <div className={classes.innerContent}>{children}</div>
+      <IconButton
+        aria-label={`delete-${id}`}
+        icon={<DeleteOutlineIcon color="error" fontSize="small" />}
+        size="small"
+        onClick={deleteItem(id)}
+      />
+    </div>
+  );
+};
+
+export default Content;

package/src/Form/Inputs/List/List.styles.ts

@@ -0,0 +1,29 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useListStyles = makeStyles()((theme) => ({
+  content: {
+    '& [data-dragging="false"]': {
+      cursor: 'grab'
+    },
+    '& [data-dragging="true"]': {
+      cursor: 'grabbing'
+    },
+    alignItems: 'center',
+    borderBottom: `1px dashed ${theme.palette.action.disabledBackground}`,
+    display: 'flex',
+    flexDirection: 'row',
+    padding: theme.spacing(1, 0)
+  },
+  innerContent: {
+    flexGrow: 1
+  },
+  items: {
+    maxHeight: theme.spacing(16),
+    overflowY: 'auto'
+  },
+  list: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1)
+  }
+}));

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

@@ -0,0 +1,58 @@
+import { ComponentType } from 'react';
+
+import { closestCenter } from '@dnd-kit/core';
+import { verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { useTranslation } from 'react-i18next';
+
+import { SortableItems, Subtitle } from '../../..';
+import { InputPropsWithoutGroup } from '../models';
+
+import Content, { ContentProps } from './Content';
+import { useListStyles } from './List.styles';
+import { useList } from './useList';
+
+const List = ({
+  list,
+  fieldName
+}: InputPropsWithoutGroup): JSX.Element | null => {
+  const { t } = useTranslation();
+  const { classes } = useListStyles();
+
+  const { addItem, sortList, sortedList, deleteItem } = useList({ fieldName });
+
+  const { AddItem, addItemLabel, sortLabel, SortContent, itemProps } = list as {
+    AddItem: ComponentType<{ addItem }>;
+    SortContent: ComponentType;
+    addItemLabel?: string;
+    itemProps: Array<string>;
+    sortLabel?: string;
+  };
+
+  return (
+    <div className={classes.list}>
+      {addItemLabel && <Subtitle>{t(addItemLabel)}</Subtitle>}
+      <AddItem addItem={addItem} />
+      {sortLabel && <Subtitle>{t(sortLabel)}</Subtitle>}
+      <div className={classes.items}>
+        <SortableItems
+          updateSortableItemsOnItemsChange
+          // eslint-disable-next-line react/no-unstable-nested-components
+          Content={(props: Omit<ContentProps, 'children' | 'deleteItem'>) => (
+            <Content {...props} deleteItem={deleteItem}>
+              <SortContent {...props} />
+            </Content>
+          )}
+          collisionDetection={closestCenter}
+          itemProps={itemProps}
+          items={sortedList}
+          sortingStrategy={verticalListSortingStrategy}
+          onDragEnd={({ items }): void => {
+            sortList(items);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default List;

package/src/Form/Inputs/List/useList.ts

@@ -0,0 +1,81 @@
+import { useMemo, useRef } from 'react';
+
+import { FormikValues, useFormikContext } from 'formik';
+import {
+  append,
+  equals,
+  inc,
+  isEmpty,
+  pluck,
+  prop,
+  reject,
+  sortBy
+} from 'ramda';
+
+import { SelectEntry } from '../../..';
+
+interface UseListState {
+  addItem: (newItem: SelectEntry) => void;
+  deleteItem: (id: string) => () => void;
+  sortList: (items: Array<string>) => void;
+  sortedList: Array<unknown>;
+}
+
+export const useList = ({ fieldName }): UseListState => {
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
+  const maxOrder = useRef(0);
+
+  const list = values[fieldName];
+
+  const sortedList = useMemo(
+    () =>
+      sortBy(prop('order'), list).map(({ id, ...props }) => ({
+        id: `${id}`,
+        ...props
+      })),
+    [list]
+  );
+
+  const addItem = (newItem: SelectEntry): void => {
+    setFieldValue(
+      fieldName,
+      append(
+        {
+          ...newItem,
+          id: (newItem as SelectEntry).id as number,
+          order: inc(maxOrder.current)
+        },
+        list
+      )
+    );
+  };
+
+  const deleteItem = (id: string) => (): void => {
+    const newItems = reject((item) => equals(Number(id), item.id))(list);
+
+    setFieldValue(fieldName, newItems);
+  };
+
+  const sortList = (items: Array<string>): void => {
+    const newOrderedList = items.map((itemId, idx) => {
+      const item = sortedList.find(({ id }) => equals(id, itemId));
+
+      return {
+        ...item,
+        id: Number(item?.id),
+        order: inc(idx)
+      };
+    });
+
+    setFieldValue(fieldName, newOrderedList);
+  };
+
+  maxOrder.current = isEmpty(list) ? 0 : Math.max(...pluck('order', list));
+
+  return {
+    addItem,
+    deleteItem,
+    sortList,
+    sortedList
+  };
+};

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 { equals, includes, path, split } 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 '../..';
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 import { InputPropsWithoutGroup } from './models';
 
@@ -73,12 +73,23 @@ const Radio = ({
                   disabled={disabled}
                   id={getNormalizedId(`${dataTestId}${optionLabel}`)}
                   inputProps={{
-                    'aria-label': t(optionLabel) || ''
+                    'aria-label':
+                      (equals(type(optionLabel), 'String') &&
+                        t(optionLabel as string)) ||
+                      ''
                   }}
                 />
               }
-              key={optionLabel}
-              label={t(optionLabel) as string}
+              key={
+                equals(type(optionLabel), 'String')
+                  ? (optionLabel as string)
+                  : `${optionValue}`
+              }
+              label={
+                equals(type(optionLabel), 'String')
+                  ? (t(optionLabel as string) as string)
+                  : optionLabel
+              }
               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,16 +1,18 @@
 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';
 
 import { TextField, useMemoComponent } from '../..';
 
@@ -27,28 +29,35 @@ const Text = ({
   getRequired,
   change,
   additionalMemoProps,
-  text
+  text,
+  autoFocus
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
   const [isVisible, setIsVisible] = useState(false);
 
-  const { values, setFieldValue, touched, errors, handleBlur } =
-    useFormikContext<FormikValues>();
+  const {
+    values,
+    setFieldValue,
+    touched,
+    errors,
+    handleBlur,
+    setFieldTouched
+  } = useFormikContext<FormikValues>();
 
   const fieldNamePath = split('.', fieldName);
 
   const changeText = (event: ChangeEvent<HTMLInputElement>): void => {
     const { value } = event.target;
     if (change) {
-      change({ setFieldValue, value });
+      change({ setFieldValue, value, setFieldTouched });
 
       return;
     }
 
     const formattedValue =
       equals(text?.type, 'number') && !isEmpty(value)
-        ? parseInt(value, 10)
+        ? Number.parseInt(value, 10)
         : value;
 
     setFieldValue(fieldName, formattedValue);
@@ -64,16 +73,24 @@ const Text = ({
     ? path(fieldNamePath, errors)
     : undefined;
 
-  const passwordEndAdornment = useCallback(
-    (): JSX.Element | null =>
-      equals(type, InputType.Password) ? (
+  const EndAdornment = useCallback((): JSX.Element | null => {
+    if (equals(type, InputType.Password)) {
+      return (
         <PasswordEndAdornment
           changeVisibility={changeVisibility}
           isVisible={isVisible}
         />
-      ) : null,
-    [isVisible]
-  );
+      );
+    }
+
+    if (text?.endAdornment) {
+      return (
+        <InputAdornment position="end">{text?.endAdornment}</InputAdornment>
+      );
+    }
+
+    return null;
+  }, [isVisible]);
 
   const getInputType = (): string => {
     if (text?.type) {
@@ -97,19 +114,26 @@ const Text = ({
     Component: (
       <TextField
         fullWidth
-        EndAdornment={passwordEndAdornment}
+        EndAdornment={EndAdornment}
         ariaLabel={t(label) || ''}
-        dataTestId={dataTestId || ''}
+        autoFocus={autoFocus}
+        dataTestId={dataTestId || label}
         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: [