@centreon/ui 23.10.43 → 23.10.44

package/src/components/Form/AccessRights/common/Input.styles.ts

@@ -1,48 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useInputStyles = makeStyles()((theme) => ({
-  inputDropdown: {
-    '& .MuiMenuItem-root': {
-      '& > .MuiTouchRipple-root': {
-        display: 'none'
-      },
-
-      '&.Mui-disabled': {
-        opacity: 0.5
-      },
-      '&.Mui-selected, &.Mui-selected:hover, &.MuiAutocomplete-option[aria-selected="true"], &.MuiAutocomplete-option[aria-selected="true"].Mui-focused':
-        {
-          '&.Mui-disabled': {
-            opacity: 1
-          },
-          backgroundColor: theme.palette.menu.item.background.active,
-          color: theme.palette.menu.item.color.active,
-          opacity: 1
-        },
-      '&:hover, &.MuiAutocomplete-option.Mui-focused:not(&[aria-selected="true"])':
-        {
-          backgroundColor: theme.palette.menu.item.background.hover,
-          color: theme.palette.menu.item.color.hover
-        },
-      backgroundColor: theme.palette.menu.item.background.default,
-      color: theme.palette.menu.item.color.default,
-      fontSize: '0.875rem',
-
-      minHeight: 'unset',
-
-      padding: theme.spacing(0.75, 2)
-    },
-    '&.MuiAutocomplete-popper > .MuiPaper-root, &.MuiPopover-root > .MuiPaper-root':
-      {
-        '& > ul.MuiAutocomplete-listbox, & > ul.MuiList-root': {
-          padding: theme.spacing(1, 0)
-        },
-        backgroundColor: theme.palette.menu.background,
-        borderRadius: '4px',
-
-        boxShadow: theme.shadows[8]
-      }
-  }
-}));
-
-export { useInputStyles };

package/src/components/Form/AccessRights/common/RoleInputSelect.styles.ts

@@ -1,11 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()(() => ({
-  roleInputSelect: {
-    flexShrink: 0,
-    lineHeight: '1.5',
-    minWidth: '6rem'
-  }
-}));
-
-export { useStyles };

package/src/components/Form/AccessRights/common/RoleInputSelect.tsx

@@ -1,57 +0,0 @@
-import { ReactElement, useCallback } from 'react';
-
-import {
-  MenuItem as MuiMenuItem,
-  Select as MuiSelect,
-  SelectProps as MuiSelectProps
-} from '@mui/material';
-
-import { useAccessRightsForm } from '../useAccessRightsForm';
-import { RoleResource } from '../AccessRights.resource';
-
-import { useStyles } from './RoleInputSelect.styles';
-import { useInputStyles } from './Input.styles';
-
-type RoleInputSelectProps = {
-  id: string;
-  label?: string;
-  name: string;
-  onChange?: (value: RoleResource['role']) => void;
-} & Pick<MuiSelectProps, 'value' | 'defaultValue' | 'disabled'>;
-
-const RoleInputSelect = ({
-  label,
-  onChange,
-  ...props
-}: RoleInputSelectProps): ReactElement => {
-  const { classes } = useStyles();
-  const { classes: inputClasses } = useInputStyles();
-
-  const {
-    options: { roles }
-  } = useAccessRightsForm();
-
-  const onInputChange = useCallback((e) => onChange?.(e), [onChange]);
-
-  return (
-    <MuiSelect
-      size="small"
-      {...props}
-      {...(label && { label })}
-      MenuProps={{
-        className: inputClasses.inputDropdown
-      }}
-      className={classes.roleInputSelect}
-      data-testid="role-input"
-      onChange={onInputChange}
-    >
-      {roles.map(({ role }) => (
-        <MuiMenuItem key={role} value={role}>
-          {role}
-        </MuiMenuItem>
-      ))}
-    </MuiSelect>
-  );
-};
-
-export { RoleInputSelect };

package/src/components/Form/AccessRights/index.ts

@@ -1,3 +0,0 @@
-export * from './AccessRightsForm';
-export * from './AccessRights.resource';
-export * from './useAccessRightsForm.utils';

package/src/components/Form/AccessRights/useAccessRightsForm.test.tsx

@@ -1,531 +0,0 @@
-import { ReactElement } from 'react';
-
-import { renderHook } from '@testing-library/react-hooks';
-import { act } from '@testing-library/react';
-
-import {
-  AccessRightsFormProvider,
-  AccessRightsFormProviderProps,
-  useAccessRightsForm
-} from './useAccessRightsForm';
-import {
-  contactAccessRightsMock,
-  contactsMock,
-  rolesMock
-} from './__fixtures__/contactAccessRight.mock';
-
-const contextWrapper = (
-  contextProps: AccessRightsFormProviderProps
-): ReactElement => <AccessRightsFormProvider {...contextProps} />;
-
-describe('useAccessRightsForm', () => {
-  const baseContextProps: AccessRightsFormProviderProps = {
-    children: null,
-    options: {
-      contacts: contactsMock(25),
-      roles: rolesMock()
-    }
-  };
-
-  const initialValues: AccessRightsFormProviderProps['initialValues'] =
-    contactAccessRightsMock(30);
-
-  it('should render the hook', () => {
-    const contextProps = { ...baseContextProps };
-
-    const { result } = renderHook(() => useAccessRightsForm(), {
-      initialProps: contextProps,
-      wrapper: contextWrapper
-    });
-
-    expect(result.current).toBeDefined();
-  });
-
-  describe('Provider', () => {
-    it('should persist the `options`', () => {
-      const contextProps = { ...baseContextProps };
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: contextProps,
-        wrapper: contextWrapper
-      });
-
-      expect(result.current.options).toBeDefined();
-      expect(result.current.options).toEqual(contextProps.options);
-    });
-
-    it('should persist the `initialValues` as `contactAccessRights`', () => {
-      const contextProps = { ...baseContextProps, initialValues };
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: contextProps,
-        wrapper: contextWrapper
-      });
-
-      expect(result.current.contactAccessRights).toBeDefined();
-      expect(result.current.contactAccessRights).toHaveLength(
-        initialValues.length
-      );
-      initialValues.forEach((initialValue) => {
-        expect(
-          result.current.contactAccessRights.find(
-            ({ contactAccessRight: { contact } }) =>
-              contact?.id === initialValue.contact?.id
-          )
-        ).toBeDefined();
-      });
-    });
-  });
-
-  describe('addContactAccessRight', () => {
-    it('should add a contact access right', () => {
-      const contextProps = { ...baseContextProps };
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: contextProps,
-        wrapper: contextWrapper
-      });
-
-      const contactAccessRight = contactAccessRightsMock(1)[0];
-      act(() => result.current.addContactAccessRight(contactAccessRight));
-
-      expect(result.current.contactAccessRights).toHaveLength(1);
-      expect(
-        result.current.contactAccessRights.find(
-          ({ contactAccessRight: { contact } }) =>
-            contact?.id === contactAccessRight.contact?.id
-        )
-      ).toBeDefined();
-    });
-    it('should not add a contact access right if it already exists', () => {
-      const contextProps = { ...baseContextProps, initialValues };
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: contextProps,
-        wrapper: contextWrapper
-      });
-
-      const { contactAccessRight } = result.current.contactAccessRights[0];
-      act(() => result.current.addContactAccessRight(contactAccessRight));
-
-      expect(result.current.contactAccessRights).toHaveLength(
-        initialValues.length
-      );
-    });
-  });
-
-  describe('removeContactAccessRight', () => {
-    it('should remove a contact access right of a pre-existing', () => {
-      const contextProps = { ...baseContextProps, initialValues };
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: contextProps,
-        wrapper: contextWrapper
-      });
-
-      const { contactAccessRight } = result.current.contactAccessRights[0];
-      act(() => result.current.removeContactAccessRight(contactAccessRight));
-
-      expect(result.current.contactAccessRights).toHaveLength(
-        initialValues.length
-      );
-
-      expect(
-        result.current.contactAccessRights.find(
-          ({ contactAccessRight: { contact }, state }) =>
-            contact?.id === contactAccessRight.contact?.id &&
-            state === 'removed'
-        )
-      ).toBeDefined();
-    });
-    it('should restore a contact access right if it was pre-existing', () => {
-      const contextProps = { ...baseContextProps, initialValues };
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: contextProps,
-        wrapper: contextWrapper
-      });
-
-      const { contactAccessRight } = result.current.contactAccessRights[0];
-      act(() => result.current.removeContactAccessRight(contactAccessRight));
-      act(() =>
-        result.current.removeContactAccessRight(contactAccessRight, true)
-      );
-
-      expect(
-        result.current.contactAccessRights.find(
-          ({ contactAccessRight: { contact }, state }) =>
-            contact?.id === contactAccessRight.contact?.id &&
-            state === 'unchanged'
-        )
-      ).toBeDefined();
-    });
-    it('should completely remove a contact access right if it was newly added', () => {
-      const contextProps = { ...baseContextProps };
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: contextProps,
-        wrapper: contextWrapper
-      });
-
-      const contactAccessRight = contactAccessRightsMock(1)[0];
-      act(() => result.current.addContactAccessRight(contactAccessRight));
-      act(() => result.current.removeContactAccessRight(contactAccessRight));
-
-      expect(result.current.contactAccessRights).toHaveLength(0);
-    });
-    it('should restore a contact access right to it previous state', () => {
-      const contextProps = { ...baseContextProps, initialValues };
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: contextProps,
-        wrapper: contextWrapper
-      });
-
-      const { contactAccessRight } = result.current.contactAccessRights[0];
-      const updatedContactAccessRight = {
-        ...contactAccessRight,
-        role:
-          contactAccessRight.role === rolesMock()[0].role
-            ? rolesMock()[1].role
-            : rolesMock()[0].role
-      };
-
-      act(() =>
-        result.current.updateContactAccessRight(updatedContactAccessRight)
-      );
-      act(() =>
-        result.current.removeContactAccessRight(updatedContactAccessRight)
-      );
-      act(() =>
-        result.current.removeContactAccessRight(updatedContactAccessRight, true)
-      );
-
-      const updatedContactAccessRightState =
-        result.current.contactAccessRights.find(
-          ({ contactAccessRight: { contact } }) =>
-            contact?.id === updatedContactAccessRight.contact?.id
-        );
-
-      expect(updatedContactAccessRightState).toBeDefined();
-      expect(updatedContactAccessRightState?.state).toEqual('updated');
-    });
-  });
-
-  describe('updateContactAccessRight', () => {
-    it('should update a contact access right', () => {
-      const contextProps = { ...baseContextProps, initialValues };
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: contextProps,
-        wrapper: contextWrapper
-      });
-
-      const { contactAccessRight } = result.current.contactAccessRights[0];
-      const updatedContactAccessRight = {
-        ...contactAccessRight,
-        role:
-          contactAccessRight.role === rolesMock()[0].role
-            ? rolesMock()[1].role
-            : rolesMock()[0].role
-      };
-
-      act(() =>
-        result.current.updateContactAccessRight(updatedContactAccessRight)
-      );
-
-      const updatedContactAccessRightState =
-        result.current.contactAccessRights.find(
-          ({ contactAccessRight: { contact } }) =>
-            contact?.id === updatedContactAccessRight.contact?.id
-        );
-
-      expect(updatedContactAccessRightState).toBeDefined();
-
-      expect(updatedContactAccessRightState?.state).toEqual('updated');
-
-      expect(
-        updatedContactAccessRightState?.contactAccessRight.role ===
-          updatedContactAccessRight.role
-      ).toBeTruthy();
-    });
-
-    it('should update a contact access right to its previous state', () => {
-      const contextProps = {
-        ...baseContextProps,
-        initialValues
-      };
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: contextProps,
-        wrapper: contextWrapper
-      });
-
-      const { contactAccessRight } = result.current.contactAccessRights[0];
-      const updatedContactAccessRight = {
-        ...contactAccessRight,
-        role:
-          contactAccessRight.role === rolesMock()[0].role
-            ? rolesMock()[1].role
-            : rolesMock()[0].role
-      };
-
-      act(() =>
-        result.current.updateContactAccessRight(updatedContactAccessRight)
-      );
-
-      updatedContactAccessRight.role =
-        updatedContactAccessRight.role === rolesMock()[0].role
-          ? rolesMock()[1].role
-          : rolesMock()[0].role;
-
-      act(() =>
-        result.current.updateContactAccessRight(updatedContactAccessRight)
-      );
-
-      const updatedContactAccessRightState =
-        result.current.contactAccessRights.find(
-          ({ contactAccessRight: { contact } }) =>
-            contact?.id === updatedContactAccessRight.contact?.id
-        );
-
-      expect(updatedContactAccessRightState).toBeDefined();
-      expect(updatedContactAccessRightState?.state).toEqual('unchanged');
-    });
-
-    it('should update a contact access right to `unchanged` state if it is updated to its original value', () => {
-      const contextProps = { ...baseContextProps, initialValues };
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: contextProps,
-        wrapper: contextWrapper
-      });
-
-      const { contactAccessRight } = result.current.contactAccessRights[0];
-      const updatedContactAccessRight = {
-        ...contactAccessRight,
-        role:
-          contactAccessRight.role === rolesMock()[0].role
-            ? rolesMock()[1].role
-            : rolesMock()[0].role
-      };
-
-      act(() =>
-        result.current.updateContactAccessRight(updatedContactAccessRight)
-      );
-      act(() =>
-        result.current.removeContactAccessRight(updatedContactAccessRight)
-      );
-      act(() =>
-        result.current.removeContactAccessRight(updatedContactAccessRight, true)
-      );
-
-      updatedContactAccessRight.role =
-        updatedContactAccessRight.role === rolesMock()[0].role
-          ? rolesMock()[1].role
-          : rolesMock()[0].role;
-
-      act(() =>
-        result.current.updateContactAccessRight(updatedContactAccessRight)
-      );
-
-      const updatedContactAccessRightState =
-        result.current.contactAccessRights.find(
-          ({ contactAccessRight: { contact } }) =>
-            contact?.id === updatedContactAccessRight.contact?.id
-        );
-
-      expect(updatedContactAccessRightState).toBeDefined();
-      expect(updatedContactAccessRightState?.state).toEqual('unchanged');
-    });
-
-    it('should update a contact access right to `updated` state if it is updated subsequently', () => {
-      const contextProps = { ...baseContextProps, initialValues };
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: contextProps,
-        wrapper: contextWrapper
-      });
-
-      const { contactAccessRight } = result.current.contactAccessRights[0];
-      const updatedContactAccessRight = {
-        ...contactAccessRight,
-        role:
-          contactAccessRight.role === rolesMock()[0].role
-            ? rolesMock()[1].role
-            : rolesMock()[0].role
-      };
-
-      act(() =>
-        result.current.updateContactAccessRight(updatedContactAccessRight)
-      );
-      act(() => result.current.updateContactAccessRight(contactAccessRight));
-      act(() =>
-        result.current.updateContactAccessRight(updatedContactAccessRight)
-      );
-
-      const updatedContactAccessRightState =
-        result.current.contactAccessRights.find(
-          ({ contactAccessRight: { contact } }) =>
-            contact?.id === updatedContactAccessRight.contact?.id
-        );
-
-      expect(updatedContactAccessRightState).toBeDefined();
-      expect(updatedContactAccessRightState?.state).toEqual('updated');
-    });
-
-    it('should keep a new contact access right in `added` state if it is updated', () => {
-      const contextProps = { ...baseContextProps };
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: contextProps,
-        wrapper: contextWrapper
-      });
-
-      const contactAccessRight = contactAccessRightsMock(1)[0];
-      act(() => result.current.addContactAccessRight(contactAccessRight));
-
-      const updatedContactAccessRight = {
-        ...contactAccessRight,
-        role:
-          contactAccessRight.role === rolesMock()[0].role
-            ? rolesMock()[1].role
-            : rolesMock()[0].role
-      };
-
-      act(() =>
-        result.current.updateContactAccessRight(updatedContactAccessRight)
-      );
-
-      const updatedContactAccessRightState =
-        result.current.contactAccessRights.find(
-          ({ contactAccessRight: { contact } }) =>
-            contact?.id === updatedContactAccessRight.contact?.id
-        );
-
-      expect(updatedContactAccessRightState).toBeDefined();
-      expect(updatedContactAccessRightState?.state).toEqual('added');
-    });
-  });
-
-  describe('onSubmit', () => {
-    it('should call the `onSubmit` callback with the correct payload', () => {
-      const contextProps = { ...baseContextProps, initialValues };
-      const onSubmit = jest.fn();
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: { ...contextProps, onSubmit },
-        wrapper: contextWrapper
-      });
-
-      act(() => result.current.submit());
-
-      expect(onSubmit).toHaveBeenCalledWith(result.current.contactAccessRights);
-    });
-  });
-
-  describe('state', () => {
-    it('should have `isDirty` flag set on changes', () => {
-      const contextProps = { ...baseContextProps, initialValues };
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: contextProps,
-        wrapper: contextWrapper
-      });
-
-      const { contactAccessRight } = result.current.contactAccessRights[0];
-      const updatedContactAccessRight = {
-        ...contactAccessRight,
-        role:
-          contactAccessRight.role === rolesMock()[0].role
-            ? rolesMock()[1].role
-            : rolesMock()[0].role
-      };
-
-      expect(result.current.isDirty).toBeFalsy();
-
-      act(() =>
-        result.current.updateContactAccessRight(updatedContactAccessRight)
-      );
-
-      expect(result.current.isDirty).toBeTruthy();
-    });
-
-    it('should have `isDirty` flag cleared on reverted changes', () => {
-      const contextProps = { ...baseContextProps, initialValues };
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: contextProps,
-        wrapper: contextWrapper
-      });
-
-      const { contactAccessRight } = result.current.contactAccessRights[0];
-      act(() => result.current.removeContactAccessRight(contactAccessRight));
-      act(() =>
-        result.current.removeContactAccessRight(contactAccessRight, true)
-      );
-
-      expect(result.current.isDirty).toBeFalsy();
-    });
-
-    it('should have stats updated on changes', () => {
-      const contextProps = { ...baseContextProps, initialValues };
-
-      const { result } = renderHook(() => useAccessRightsForm(), {
-        initialProps: contextProps,
-        wrapper: contextWrapper
-      });
-
-      expect(result.current.stats).toEqual({
-        added: 0,
-        removed: 0,
-        updated: 0
-      });
-
-      // update contact access right
-      const { contactAccessRight: contactAccessRightToUpdate } =
-        result.current.contactAccessRights[1];
-      const updatedContactAccessRight = {
-        ...contactAccessRightToUpdate,
-        role:
-          contactAccessRightToUpdate.role === rolesMock()[0].role
-            ? rolesMock()[1].role
-            : rolesMock()[0].role
-      };
-
-      act(() =>
-        result.current.updateContactAccessRight(updatedContactAccessRight)
-      );
-
-      expect(result.current.stats).toEqual({
-        added: 0,
-        removed: 0,
-        updated: 1
-      });
-
-      // remove contact access right
-      const { contactAccessRight: contactAccessRightToRemove } =
-        result.current.contactAccessRights[2];
-
-      act(() =>
-        result.current.removeContactAccessRight(contactAccessRightToRemove)
-      );
-
-      expect(result.current.stats).toEqual({
-        added: 0,
-        removed: 1,
-        updated: 1
-      });
-
-      // add contact access right
-      const contactAccessRight = contactAccessRightsMock(1)[0];
-      act(() => result.current.addContactAccessRight(contactAccessRight));
-
-      expect(result.current.stats).toEqual({
-        added: 1,
-        removed: 1,
-        updated: 1
-      });
-    });
-  });
-});