@centreon/ui 23.10.121 → 24.4.1-0

package/src/Dialog/UnsavedChanges/index.tsx

@@ -1,18 +1,17 @@
 import { not } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
-import { ConfirmDialog } from '../..';
+import { Modal } from '../../components/Modal';
 
 import {
   labelDiscard,
   labelDoYouWantToQuitWithoutResolving,
-  labelDoYouWantToQuitWithoutSaving,
   labelDoYouWantToResolveErrors,
   labelDoYouWantToSaveChanges,
   labelResolve,
   labelSave,
   labelThereAreErrorsInTheForm,
-  labelYourFormHasUnsavedChanges
+  labelIfYouClickOnDiscard
 } from './translatedLabels';
 
 interface Props {
@@ -40,30 +39,32 @@ const UnsavedChangesDialog = ({
   const labelConfirm = isValidForm ? labelSave : labelResolve;
 
   const labelMessage = `${
-    isValidForm ? labelYourFormHasUnsavedChanges : labelThereAreErrorsInTheForm
-  }. ${
-    isValidForm
-      ? labelDoYouWantToQuitWithoutSaving
-      : labelDoYouWantToQuitWithoutResolving
-  }`;
+    isValidForm ? labelIfYouClickOnDiscard : labelThereAreErrorsInTheForm
+  }. ${isValidForm ? '' : labelDoYouWantToQuitWithoutResolving}`;
 
   if (not(dialogOpened)) {
     return null;
   }
 
   return (
-    <ConfirmDialog
-      confirmDisabled={isSubmitting}
-      labelCancel={t(labelDiscard)}
-      labelConfirm={t(labelConfirm)}
-      labelMessage={t(labelMessage)}
-      labelTitle={t(labelTitle)}
+    <Modal
+      hasCloseButton
       open={dialogOpened}
-      submitting={isSubmitting}
-      onBackdropClick={closeDialog}
-      onCancel={discardChanges}
-      onConfirm={isValidForm ? saveChanges : closeDialog}
-    />
+      size="medium"
+      onClose={closeDialog}
+    >
+      <Modal.Header>{t(labelTitle)}</Modal.Header>
+      <Modal.Body>{t(labelMessage)}</Modal.Body>
+      <Modal.Actions
+        disabled={isSubmitting}
+        labels={{
+          cancel: t(labelDiscard),
+          confirm: t(labelConfirm)
+        }}
+        onCancel={discardChanges}
+        onConfirm={isValidForm ? saveChanges : closeDialog}
+      />
+    </Modal>
   );
 };
 

package/src/Dialog/UnsavedChanges/translatedLabels.ts

@@ -1,9 +1,8 @@
 export const labelDiscard = 'Discard';
 export const labelResolve = 'Resolve';
-export const labelYourFormHasUnsavedChanges = 'Your form has unsaved changes';
+export const labelIfYouClickOnDiscard =
+  'If you click on Discard, your changes will not be saved.';
 export const labelThereAreErrorsInTheForm = 'There are errors in the form';
-export const labelDoYouWantToQuitWithoutSaving =
-  'Do you want to quit the form without saving the changes?';
 export const labelDoYouWantToQuitWithoutResolving =
   'Do you want to quit the form without resolving the errors?';
 export const labelDoYouWantToSaveChanges = 'Do you want to save the changes?';
@@ -14,11 +13,10 @@ export const labelSave = 'Save';
 export default {
   labelDiscard,
   labelDoYouWantToQuitWithoutResolving,
-  labelDoYouWantToQuitWithoutSaving,
   labelDoYouWantToResolveErrors,
   labelDoYouWantToSaveChanges,
+  labelIfYouClickOnDiscard,
   labelResolve,
   labelSave,
-  labelThereAreErrorsInTheForm,
-  labelYourFormHasUnsavedChanges
+  labelThereAreErrorsInTheForm
 };

package/src/Dialog/index.tsx

@@ -9,7 +9,8 @@ import {
   DialogContent,
   DialogActions,
   DialogProps,
-  CircularProgress
+  CircularProgress,
+  ButtonProps
 } from '@mui/material';
 
 import { DataTestAttributes } from '../@types/data-attributes';
@@ -43,11 +44,13 @@ export type Props = {
   dialogTitleClassName?: string;
   labelCancel?: string | null;
   labelConfirm?: string | null;
-  labelTitle?: string | null;
+  labelTitle?: ReactNode;
   onCancel?: () => void;
   onClose?: () => void;
   onConfirm: (event, value?) => void;
   open: boolean;
+  restCancelButtonProps?: ButtonProps;
+  restConfirmButtonProps?: ButtonProps;
   submitting?: boolean;
 } & DialogProps &
   DataTestAttributes;
@@ -70,6 +73,8 @@ const Dialog = ({
   dialogContentClassName,
   dialogActionsClassName,
   dialogConfirmButtonClassName,
+  restCancelButtonProps,
+  restConfirmButtonProps,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ contentWidth });
@@ -101,6 +106,7 @@ const Dialog = ({
             data-testid="Cancel"
             disabled={cancelDisabled}
             onClick={onCancel}
+            {...restCancelButtonProps}
           >
             {labelCancel}
           </Button>
@@ -113,6 +119,7 @@ const Dialog = ({
           disabled={confirmDisabled}
           endIcon={submitting && <CircularProgress size={15} />}
           onClick={onConfirm}
+          {...restConfirmButtonProps}
         >
           {labelConfirm}
         </Button>

package/src/FallbackPage/FallbackPage.tsx

@@ -17,7 +17,7 @@ const useStyles = makeStyles()((theme) => ({
   logo: {
     alignSelf: 'flex-end',
     height: theme.spacing(11),
-    width: '22rem'
+    width: '239px'
   },
   message: {
     color: theme.palette.text.primary
@@ -66,9 +66,9 @@ export const FallbackPage: FC<FallbackPageProps> = typedMemo(
 
     return (
       <div className={classes.notAuthorizedContainer}>
-        <section className={classes.logo}>
+        <div className={classes.logo}>
           <CentreonLogo />
-        </section>
+        </div>
         <section className={classes.messageBlock}>
           <header>
             <Typography color="primary" fontWeight="bold" variant="h3">

package/src/FileDropZone/index.tsx

@@ -98,7 +98,9 @@ const getExtensions = cond([
   [T, identity]
 ]) as (accept: string) => Array<string>;
 
-export const transformFileListToArray = (files: FileList | null): Array<File> =>
+export const transformFileListToArray = (
+  files: FileList | null
+): Array<File> =>
   isNil(files)
     ? []
     : (Array(files.length)

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

@@ -8,15 +8,18 @@ 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)
     }
   })
@@ -26,7 +29,8 @@ const Grid = ({ grid }: InputPropsWithoutGroup): JSX.Element => {
   const { classes, cx } = useStyles({
     alignItems: grid?.alignItems,
     columns: grid?.columns.length,
-    gridTemplateColumns: grid?.gridTemplateColumns
+    gridTemplateColumns: grid?.gridTemplateColumns,
+    isColumnDirection: grid?.isColumnDirection
   });
 
   const className = grid?.className || '';

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

@@ -29,7 +29,8 @@ const Text = ({
   getRequired,
   change,
   additionalMemoProps,
-  text
+  text,
+  autoFocus
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
@@ -109,6 +110,7 @@ const Text = ({
         fullWidth
         EndAdornment={EndAdornment}
         ariaLabel={t(label) || ''}
+        autoFocus={autoFocus}
         dataTestId={dataTestId || ''}
         disabled={disabled}
         error={error as string | undefined}

package/src/Form/Inputs/index.tsx

@@ -21,6 +21,7 @@ import CheckboxGroup from './CheckboxGroup';
 import Checkbox from './Checkbox';
 import Custom from './Custom';
 import LoadingSkeleton from './LoadingSkeleton';
+import List from './List/List';
 
 export const getInput = R.cond<
   Array<InputType>,
@@ -66,6 +67,7 @@ export const getInput = R.cond<
     R.equals(InputType.CheckboxGroup) as (b: InputType) => boolean,
     R.always(CheckboxGroup)
   ],
+  [R.equals(InputType.List) as (b: InputType) => boolean, R.always(List)],
   [R.T, R.always(TextInput)]
 ]);
 
@@ -185,7 +187,7 @@ const Inputs = ({
         const hasGroupTitle = R.not(R.isNil(groupName));
 
         const groupProps = hasGroupTitle
-          ? R.find(R.propEq('name', groupName), groups)
+          ? R.find(R.propEq(groupName, 'name'), groups)
           : ({} as Group);
 
         const isFirstElement = areGroupsOpen || R.equals(index, 0);

package/src/Form/Inputs/models.ts

@@ -6,19 +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
+  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 {
@@ -32,6 +33,7 @@ export interface InputProps {
   additionalLabel?: string | JSX.Element;
   additionalLabelClassName?: string;
   additionalMemoProps?: Array<unknown>;
+  autoFocus?: boolean;
   autocomplete?: {
     creatable?: boolean;
     options: Array<SelectEntry>;
@@ -71,11 +73,19 @@ export interface InputProps {
     className?: string;
     columns: Array<Omit<InputProps, 'group'>>;
     gridTemplateColumns?: string;
+    isColumnDirection?: boolean;
   };
   group: string;
   hideInput?: (values: FormikValues) => boolean;
   inputClassName?: string;
   label: string;
+  list?: {
+    AddItem: React.ComponentType<{ addItem }>;
+    SortContent: React.ComponentType<object>;
+    addItemLabel?: string;
+    itemProps: Array<string>;
+    sortLabel?: string;
+  };
   radio?: {
     options?: Array<{
       label: string | JSX.Element;