@centreon/ui 24.5.12 → 24.5.13

package/src/Form/Form.cypress.spec.tsx

@@ -0,0 +1,133 @@
+import { object } from 'yup';
+import { faker } from '@faker-js/faker';
+import { useFormikContext } from 'formik';
+
+import { Typography } from '@mui/material';
+
+import { Button } from '../components';
+
+import { Form } from './Form';
+import { InputType } from './Inputs/models';
+
+faker.seed(42);
+
+const AddItem = ({ addItem }: { addItem: (item) => void }): JSX.Element => {
+  const { values } = useFormikContext();
+  const add = (): void => {
+    addItem({
+      alias: faker.company.name(),
+      id: values.list.length,
+      name: faker.person.firstName()
+    });
+  };
+
+  return (
+    <Button variant="ghost" onClick={add}>
+      Add item
+    </Button>
+  );
+};
+
+const SortContent = ({
+  name,
+  alias
+}: {
+  alias: string;
+  name: string;
+}): JSX.Element => (
+  <Typography>
+    {name} ({alias})
+  </Typography>
+);
+
+const initializeFormList = (): void => {
+  cy.mount({
+    Component: (
+      <Form
+        initialValues={{
+          list: []
+        }}
+        inputs={[
+          {
+            fieldName: 'list',
+            group: '',
+            label: '',
+            list: {
+              AddItem,
+              SortContent,
+              addItemLabel: 'Add an item to the list',
+              itemProps: ['id', 'name', 'alias'],
+              sortLabel: 'Sort items'
+            },
+            type: InputType.List
+          }
+        ]}
+        submit={cy.stub()}
+        validationSchema={object()}
+      />
+    )
+  });
+};
+
+describe('Form list', () => {
+  beforeEach(initializeFormList);
+
+  it('adds an element to the list', () => {
+    cy.contains('Add an item to the list').should('be.visible');
+    cy.contains('Sort items').should('be.visible');
+
+    cy.contains('Add item').click();
+
+    cy.findByLabelText('sort-0').should('be.visible');
+    cy.findByLabelText('delete-0').should('be.visible');
+    cy.contains('Christelle (Schinner - Wiegand)').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('sorts elements in the list', () => {
+    cy.contains('Add an item to the list').should('be.visible');
+    cy.contains('Sort items').should('be.visible');
+
+    cy.contains('Add item').click();
+    cy.contains('Add item').click();
+
+    cy.findByLabelText('sort-0').should('be.visible');
+    cy.findByLabelText('delete-0').should('be.visible');
+    cy.contains('Carley (Satterfield, Miller and Metz)').should('be.visible');
+    cy.findByLabelText('sort-1').should('be.visible');
+    cy.findByLabelText('delete-1').should('be.visible');
+    cy.contains('Anderson (Crist - Bradtke)').should('be.visible');
+
+    cy.moveSortableElementUsingAriaLabel({
+      ariaLabel: 'sort-0',
+      direction: 'down'
+    });
+
+    cy.contains('Carley (Satterfield, Miller and Metz)').should('be.visible');
+    cy.contains('Anderson (Crist - Bradtke)').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('removes an element from the list', () => {
+    cy.contains('Add an item to the list').should('be.visible');
+    cy.contains('Sort items').should('be.visible');
+
+    cy.contains('Add item').click();
+    cy.contains('Add item').click();
+
+    cy.findByLabelText('sort-0').should('be.visible');
+    cy.findByLabelText('delete-0').should('be.visible');
+    cy.contains('Lea (Streich - Hartmann)').should('be.visible');
+    cy.findByLabelText('sort-1').should('be.visible');
+    cy.findByLabelText('delete-1').should('be.visible');
+    cy.contains('Akeem (Quigley LLC)').should('be.visible');
+
+    cy.findByLabelText('delete-0').click();
+
+    cy.contains('Lea (Streich - Hartmann)').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});

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

@@ -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 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;