@centreon/ui 24.4.73 → 24.4.74

package/src/Form/{index.stories.tsx → Form.stories.tsx}

@@ -8,8 +8,7 @@ import {
   basicFormValidationSchema,
   CustomButton
 } from './storiesData';
-
-import Form, { GroupDirection } from '.';
+import { Form, GroupDirection } from './Form';
 
 export default { title: 'Form' };
 
@@ -72,7 +71,7 @@ export const basicFormWithHorizontalGroups = (): JSX.Element => (
     <Form<BasicForm>
       {...mandatoryProps}
       groupDirection={GroupDirection.Horizontal}
-      groups={basicFormGroups}
+      groups={basicFormGroups.filter((group) => group.order !== 3)}
     />
   </Paper>
 );

package/src/Form/Form.styles.ts

@@ -0,0 +1,11 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2)
+  }
+}));
+
+export { useStyles };

package/src/Form/{index.tsx → Form.tsx}

@@ -1,19 +1,29 @@
-import { Formik, FormikHelpers, FormikValues } from 'formik';
+import {
+  Formik,
+  FormikHelpers,
+  FormikSharedConfig,
+  FormikValues
+} from 'formik';
 import * as Yup from 'yup';
 
 import FormButtons from './FormButtons';
 import Inputs from './Inputs';
 import { Group, InputProps } from './Inputs/models';
+import { useStyles } from './Form.styles';
 
 export enum GroupDirection {
   Horizontal = 'horizontal',
   Vertical = 'vertical'
 }
 
-interface Props<T> {
+export type FormProps<T> = {
   Buttons?: React.ComponentType;
+  areGroupsOpen?: boolean;
+  children?: JSX.Element;
+  className?: string;
   groupDirection?: GroupDirection;
   groups?: Array<Group>;
+  groupsClassName?: string;
   initialValues: T;
   inputs: Array<InputProps>;
   isCollapsible?: boolean;
@@ -21,9 +31,13 @@ interface Props<T> {
   submit: (values: T, bag: FormikHelpers<T>) => void | Promise<void>;
   validate?: (values: FormikValues) => void;
   validationSchema: Yup.SchemaOf<T>;
-}
+} & Omit<FormikSharedConfig<T>, 'isInitialValid'>;
 
 const Form = <T extends object>({
+  children,
+  className,
+  groupsClassName,
+  areGroupsOpen,
   initialValues,
   validate,
   validationSchema,
@@ -33,13 +47,18 @@ const Form = <T extends object>({
   Buttons = FormButtons,
   isLoading = false,
   isCollapsible = false,
-  groupDirection = GroupDirection.Vertical
-}: Props<T>): JSX.Element => {
+  groupDirection = GroupDirection.Vertical,
+  ...formikSharedConfig
+}: FormProps<T>): JSX.Element => {
+  const { cx, classes } = useStyles();
+
   if (isLoading) {
     return (
       <Inputs
         isLoading
+        areGroupsOpen={areGroupsOpen}
         groups={groups}
+        groupsClassName={groupsClassName}
         inputs={inputs}
         isCollapsible={isCollapsible}
       />
@@ -48,25 +67,28 @@ const Form = <T extends object>({
 
   return (
     <Formik<T>
-      enableReinitialize
-      validateOnBlur
-      validateOnMount
       initialValues={initialValues}
       validate={validate}
       validationSchema={validationSchema}
       onSubmit={submit}
+      {...formikSharedConfig}
     >
       <div>
-        <Inputs
-          groupDirection={groupDirection}
-          groups={groups}
-          inputs={inputs}
-          isCollapsible={isCollapsible}
-        />
-        <Buttons />
+        {children}
+        <div className={cx(className, classes.form)}>
+          <Inputs
+            areGroupsOpen={areGroupsOpen}
+            groupDirection={groupDirection}
+            groups={groups}
+            groupsClassName={groupsClassName}
+            inputs={inputs}
+            isCollapsible={isCollapsible}
+          />
+          <Buttons />
+        </div>
       </div>
     </Formik>
   );
 };
 
-export default Form;
+export { Form };

package/src/Form/FormButtons.tsx

@@ -8,8 +8,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Button } from '@mui/material';
 
 import SaveButton from '../Button/Save';
-import useMemoComponent from '../utils/useMemoComponent';
-import getNormalizedId from '../utils/getNormalizedId';
+import { useMemoComponent, getNormalizedId } from '../utils';
 
 import {
   labelReset,
@@ -24,8 +23,7 @@ const useStyles = makeStyles()((theme) => ({
     columnGap: theme.spacing(2),
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'flex-end',
-    marginTop: theme.spacing(2)
+    justifyContent: 'flex-end'
   }
 }));
 

package/src/Form/Inputs/Autocomplete.tsx

@@ -9,7 +9,7 @@ import { FormHelperText, Stack } from '@mui/material';
 import SingleAutocompleteField from '../../InputField/Select/Autocomplete';
 import { labelPressEnterToAccept } from '../translatedLabels';
 import MultiAutocompleteField from '../../InputField/Select/Autocomplete/Multi';
-import useMemoComponent from '../../utils/useMemoComponent';
+import { useMemoComponent } from '../../utils';
 import { SelectEntry } from '../../InputField/Select';
 
 import { InputPropsWithoutGroup, InputType } from './models';

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 { Checkbox as CheckboxComponent } from '../../Checkbox';
+import { useMemoComponent } from '../..';
+
+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 { equals, includes, path, split } from 'ramda';
+
+import { Box, Typography } from '@mui/material';
+
+import { CheckboxGroup as CheckboxGroupComponent } from '../../Checkbox';
+import { useMemoComponent } from '../..';
+
+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

@@ -25,7 +25,8 @@ const ConnectedAutocomplete = ({
   connectedAutocomplete,
   change,
   additionalMemoProps,
-  type
+  type,
+  disableSortedOptions = false
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
@@ -106,6 +107,7 @@ const ConnectedAutocomplete = ({
       <AutocompleteField
         dataTestId={dataTestId}
         disableClearable={false}
+        disableSortedOptions={disableSortedOptions}
         disabled={disabled}
         error={error}
         field={filterKey}

package/src/Form/Inputs/Grid.tsx

@@ -8,29 +8,35 @@ interface StylesProps {
   alignItems?: string;
   columns?: number;
   gridTemplateColumns?: string;
+  isColumnDirection?: boolean;
 }
 
 const useStyles = makeStyles<StylesProps>()(
-  (theme, { columns, gridTemplateColumns, alignItems }) => ({
+  (theme, { columns, gridTemplateColumns, alignItems, isColumnDirection }) => ({
     gridFields: {
       alignItems: alignItems || 'flex-start',
       columnGap: theme.spacing(4),
-      display: 'grid',
-      gridTemplateColumns: gridTemplateColumns || `repeat(${columns}, 1fr)`,
+      display: isColumnDirection ? 'flex' : 'grid',
+      gridTemplateColumns: isColumnDirection
+        ? undefined
+        : gridTemplateColumns || `repeat(${columns}, 1fr)`,
       rowGap: theme.spacing(2)
     }
   })
 );
 
 const Grid = ({ grid }: InputPropsWithoutGroup): JSX.Element => {
-  const { classes } = useStyles({
+  const { classes, cx } = useStyles({
     alignItems: grid?.alignItems,
     columns: grid?.columns.length,
-    gridTemplateColumns: grid?.gridTemplateColumns
+    gridTemplateColumns: grid?.gridTemplateColumns,
+    isColumnDirection: grid?.isColumnDirection
   });
 
+  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 KrilinIndicatorIcon from '@mui/icons-material/DragIndicator';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+
+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 { InputPropsWithoutGroup } from '../models';
+import { SortableItems, Subtitle } from '../../..';
+
+import { useList } from './useList';
+import { useListStyles } from './List.styles';
+import Content, { ContentProps } from './Content';
+
+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/Radio.tsx

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