@centreon/ui 24.11.14 → 24.11.21

package/src/Form/Inputs/Checkbox.tsx

@@ -0,0 +1,57 @@
+import { ChangeEvent } from 'react';
+
+import { FormikValues, useFormikContext } from 'formik';
+import { path, split } from 'ramda';
+
+import { Box } from '@mui/material';
+
+import { useMemoComponent } from '../..';
+import { Checkbox as CheckboxComponent } from '../../Checkbox';
+
+import { InputPropsWithoutGroup } from './models';
+
+const Checkbox = ({
+  checkbox,
+  fieldName,
+  getDisabled,
+  hideInput,
+  dataTestId
+}: InputPropsWithoutGroup): JSX.Element => {
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
+
+  const fieldNamePath = split('.', fieldName);
+
+  const value = path(fieldNamePath, values);
+
+  const disabled = getDisabled?.(values) || false;
+  const hideCheckbox = hideInput?.(values) || false;
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    const newValue = {
+      ...value,
+      checked: event.target.checked,
+      label: event.target.id
+    };
+
+    setFieldValue(fieldName, newValue);
+  };
+
+  return useMemoComponent({
+    Component: hideCheckbox ? (
+      <Box />
+    ) : (
+      <CheckboxComponent
+        Icon={value?.Icon}
+        checked={value?.checked}
+        dataTestId={dataTestId || ''}
+        disabled={disabled}
+        label={value?.label}
+        labelPlacement={checkbox?.labelPlacement || 'end'}
+        onChange={handleChange}
+      />
+    ),
+    memoProps: [value, disabled, hideCheckbox]
+  });
+};
+
+export default Checkbox;

package/src/Form/Inputs/CheckboxGroup.tsx

@@ -0,0 +1,76 @@
+import { ChangeEvent, useEffect } from 'react';
+
+import { FormikValues, useFormikContext } from 'formik';
+import { path, equals, includes, split } from 'ramda';
+
+import { Box, Typography } from '@mui/material';
+
+import { useMemoComponent } from '../..';
+import { CheckboxGroup as CheckboxGroupComponent } from '../../Checkbox';
+
+import { InputPropsWithoutGroup } from './models';
+
+const CheckboxGroup = ({
+  checkbox,
+  fieldName,
+  additionalLabel,
+  getDisabled,
+  hideInput,
+  dataTestId
+}: InputPropsWithoutGroup): JSX.Element => {
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
+
+  const fieldNamePath = split('.', fieldName);
+
+  const value = path(fieldNamePath, values);
+
+  const disabled = getDisabled?.(values) || false;
+  const hideCheckbox = hideInput?.(values) || false;
+
+  useEffect(() => {
+    if (!disabled && !hideCheckbox) {
+      return;
+    }
+    const resetedValue = value?.map((element) => ({
+      ...element,
+      checked: false
+    }));
+    setFieldValue(fieldName, resetedValue);
+  }, [disabled, hideCheckbox]);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    const label = event.target.id;
+    if (!includes(label, value)) {
+      setFieldValue(fieldName, [...value, label]);
+
+      return;
+    }
+
+    setFieldValue(
+      fieldName,
+      value?.filter((elm) => !equals(elm, label))
+    );
+  };
+
+  return useMemoComponent({
+    Component: hideCheckbox ? (
+      <Box />
+    ) : (
+      <Box>
+        {additionalLabel && <Typography>{additionalLabel}</Typography>}
+        <CheckboxGroupComponent
+          dataTestId={dataTestId || ''}
+          direction={checkbox?.direction}
+          disabled={disabled}
+          labelPlacement={checkbox?.labelPlacement || 'end'}
+          options={checkbox?.options as Array<string>}
+          values={value}
+          onChange={handleChange}
+        />
+      </Box>
+    ),
+    memoProps: [value, disabled, hideCheckbox]
+  });
+};
+
+export default CheckboxGroup;

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, isEmpty, path, split } from 'ramda';
+import { path, equals, isEmpty, propEq, reject, split } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -25,12 +25,20 @@ const ConnectedAutocomplete = ({
   connectedAutocomplete,
   change,
   additionalMemoProps,
-  type
+  type,
+  disableSortedOptions = false
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
-  const { values, touched, errors, setFieldValue, setFieldTouched } =
-    useFormikContext<FormikValues>();
+  const {
+    values,
+    touched,
+    errors,
+    setFieldValue,
+    setFieldTouched,
+    setValues,
+    setTouched
+  } = useFormikContext<FormikValues>();
 
   const filterKey = connectedAutocomplete?.filterKey || defaultFilterKey;
 
@@ -57,18 +65,20 @@ const ConnectedAutocomplete = ({
   const changeAutocomplete = useCallback(
     (_, value): void => {
       if (change) {
-        change({ setFieldValue, value });
+        change({
+          setFieldValue,
+          value,
+          setFieldTouched,
+          setValues,
+          values,
+          setTouched
+        });
 
         return;
       }
 
+      setFieldTouched(fieldName, true, false);
       setFieldValue(fieldName, value);
-
-      if (path(fieldNamePath, touched)) {
-        return;
-      }
-
-      setFieldTouched(fieldName, true);
     },
     [fieldName, touched, additionalMemoProps]
   );
@@ -101,11 +111,25 @@ 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,
-  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/File.tsx

@@ -0,0 +1,69 @@
+import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
+import { Box, Typography } from '@mui/material';
+import { FormikValues, useFormikContext } from 'formik';
+import { path, split } from 'ramda';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import FileDropZone, { transformFileListToArray } from '../../FileDropZone';
+import { InputPropsWithoutGroup } from './models';
+
+const File = ({
+  fieldName,
+  file,
+  change,
+  dataTestId,
+  label
+}: InputPropsWithoutGroup): JSX.Element => {
+  const { t } = useTranslation();
+
+  const { values, setFieldValue, setFieldTouched } =
+    useFormikContext<FormikValues>();
+
+  const fieldNamePath = split('.', fieldName);
+
+  const files = useMemo(
+    () => path(fieldNamePath, values),
+    [values]
+  ) as FileList;
+
+  const filesArray = transformFileListToArray(files);
+
+  const changeFiles = (newFiles: FileList | null): void => {
+    if (change) {
+      change({ setFieldValue, setFieldTouched, value: newFiles });
+
+      return;
+    }
+
+    setFieldValue(fieldName, newFiles);
+  };
+
+  return (
+    <Box data-testid={dataTestId} aria-label={t(label)}>
+      <Typography variant="h6">{t(label)}</Typography>
+      <Box sx={{ display: 'flex', gap: 1, flexDirection: 'column' }}>
+        <FileDropZone
+          {...file}
+          accept={file?.accept || '*'}
+          files={files || null}
+          changeFiles={changeFiles}
+          resetFilesStatusAndUploadData={() => undefined}
+          label={label}
+        />
+        <Box sx={{ display: 'flex', gap: 1, flexDirection: 'column' }}>
+          {filesArray.map((file) => (
+            <Box
+              key={file.name}
+              sx={{ display: 'flex', gap: 1, flexDirection: 'row' }}
+            >
+              <DescriptionOutlinedIcon color="success" fontSize="small" />
+              <Typography>{file.name}</Typography>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default File;

package/src/Form/Inputs/Grid.tsx

@@ -2,6 +2,8 @@ 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 {
@@ -22,19 +24,47 @@ const useStyles = makeStyles<StylesProps>()(
   })
 );
 
-const Grid = ({ grid }: InputPropsWithoutGroup): JSX.Element => {
-  const { classes } = useStyles({
+const Grid = ({
+  grid,
+  hideInput
+}: InputPropsWithoutGroup): JSX.Element | null => {
+  const { classes, cx } = 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={classes.gridFields}>
+    <div className={cx(classes.gridFields, className)}>
       {grid?.columns.map((field) => {
         const Input = getInput(field.type);
 
-        return <Input key={field.fieldName} {...field} />;
+        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>
+        );
       })}
     </div>
   );

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 {