@centreon/ui 23.10.38 → 23.10.40

package/src/components/Form/AccessRights/Stats/AccessRightsStats.tsx

@@ -0,0 +1,41 @@
+import { ReactElement, useMemo } from 'react';
+
+import { useAccessRightsForm } from '../useAccessRightsForm';
+import { ContactAccessRightState } from '../AccessRights.resource';
+
+import { useStyles } from './AccessRightsStats.styles';
+
+export type AccessRightsStatsProps = {
+  labels: Record<Exclude<ContactAccessRightState, 'unchanged'>, string>;
+};
+
+const AccessRightsStats = ({
+  labels
+}: AccessRightsStatsProps): ReactElement => {
+  const { classes } = useStyles();
+
+  const { stats } = useAccessRightsForm();
+
+  const statsElements = useMemo(() => {
+    const elements: Array<ReactElement> = [];
+
+    ['added', 'updated', 'removed'].forEach((state) => {
+      if (stats?.[state] > 0)
+        elements.push(
+          <span key={state}>
+            <strong>{stats[state]}</strong> {labels[state]}
+          </span>
+        );
+    });
+
+    return elements;
+  }, [stats]);
+
+  return (
+    <div className={classes.accessRightsStats}>
+      {statsElements.length !== 0 && statsElements.map((el) => el)}
+    </div>
+  );
+};
+
+export { AccessRightsStats };

package/src/components/Form/AccessRights/__fixtures__/contactAccessRight.mock.ts

@@ -0,0 +1,52 @@
+import { faker } from '@faker-js/faker';
+
+import {
+  ContactAccessRightResource,
+  ContactGroupResource,
+  ContactResource,
+  RoleResource
+} from '../AccessRights.resource';
+
+export const rolesMock = (): Array<RoleResource> => [
+  { role: 'viewer' },
+  { role: 'editor' }
+];
+
+export const contactMock = (): ContactResource => ({
+  email: faker.internet.email(),
+  id: faker.string.uuid(),
+  name: faker.person.fullName(),
+  type: 'contact'
+});
+
+export const contactsMock = (length: number): Array<ContactResource> =>
+  [...Array(length).keys()].map(contactMock);
+
+export const contactGroupMock = (): ContactGroupResource => ({
+  id: faker.string.uuid(),
+  name: faker.company.name(),
+  type: 'contact_group'
+});
+export const contactGroupsMock = (
+  length: number
+): Array<ContactGroupResource> =>
+  [...Array(length).keys()].map(contactGroupMock);
+
+export const contactsAndGroupsMock = (
+  length: number
+): Array<ContactResource | ContactGroupResource> =>
+  [...Array(length).keys()].map(
+    () =>
+      faker.helpers.maybe(contactGroupMock, { probability: 0.2 }) ??
+      contactMock()
+  );
+
+export const contactAccessRightsMock = (
+  length: number
+): Array<ContactAccessRightResource> =>
+  [...Array(length).keys()].map(() => ({
+    contact:
+      faker.helpers.maybe(contactGroupMock, { probability: 0.2 }) ??
+      contactMock(),
+    role: faker.helpers.arrayElement(rolesMock().map(({ role }) => role))
+  }));

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

@@ -0,0 +1,18 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  groupLabel: {
+    backgroundColor: theme.palette.chip.color.neutral,
+    borderRadius: '0.1875rem',
+    color: theme.palette.primary.contrastText,
+    fontSize: '0.5625rem',
+    fontWeight: 500,
+    letterSpacing: '0.05rem',
+    marginLeft: theme.spacing(1),
+    padding: theme.spacing(0.125, 0.5),
+    textTransform: 'uppercase',
+    verticalAlign: 'middle'
+  }
+}));
+
+export { useStyles };

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

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+
+import { useStyles } from './GroupLabel.styles';
+
+export type GroupLabelProps = {
+  label: string;
+};
+
+const GroupLabel = ({ label }: GroupLabelProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return <span className={classes.groupLabel}>{label}</span>;
+};
+
+export { GroupLabel };

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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,57 @@
+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

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