@centreon/ui 24.5.12 → 24.5.13

package/src/components/Form/AccessRights/List/Item.tsx

@@ -0,0 +1,90 @@
+import { useSetAtom } from 'jotai';
+
+import { Chip } from '@mui/material';
+
+import { AccessRight, Labels } from '../models';
+import { List } from '../../../List';
+import RoleSelectField from '../common/RoleSelectField';
+import { SelectEntry } from '../../../..';
+import { updateContactRoleDerivedAtom } from '../atoms';
+
+import { useItem } from './useItem';
+import { useListStyles } from './List.styles';
+import StateChip from './StateChip';
+import RemoveAccessRight from './RemoveAccessRight';
+
+interface Props extends AccessRight {
+  index: number;
+  labels: Labels['list'];
+  roles: Array<SelectEntry>;
+}
+
+const Item = ({
+  index,
+  id,
+  isAdded,
+  isContactGroup,
+  isRemoved,
+  isUpdated,
+  role,
+  name,
+  email,
+  labels,
+  roles
+}: Props): JSX.Element => {
+  const { classes } = useListStyles();
+  const { initials, groupLabel, getState } = useItem({
+    isAdded,
+    isContactGroup,
+    isRemoved,
+    isUpdated,
+    list: labels,
+    name
+  });
+  const updateContactRole = useSetAtom(updateContactRoleDerivedAtom);
+
+  const state = getState();
+
+  const changeRole = (newRole: string): void => {
+    updateContactRole({ id, index, newRole });
+  };
+
+  return (
+    <List.Item
+      action={
+        <>
+          {state && <StateChip {...state} />}
+          <RoleSelectField
+            disabled={isRemoved}
+            roles={roles}
+            testId={`role-${name}`}
+            value={role}
+            onChange={changeRole}
+          />
+          <RemoveAccessRight index={index} isRemoved={isRemoved} name={name} />
+        </>
+      }
+      className={classes.item}
+      data-isRemoved={isRemoved}
+    >
+      <List.Item.Avatar>{initials}</List.Item.Avatar>
+      <div className={classes.itemNameAndGroup}>
+        <List.Item.Text
+          className={classes.name}
+          primaryText={name}
+          secondaryText={email}
+        />
+        {groupLabel && (
+          <Chip
+            data-groupChip={name}
+            data-type="group-chip"
+            label={groupLabel}
+            size="small"
+          />
+        )}
+      </div>
+    </List.Item>
+  );
+};
+
+export default Item;

package/src/components/Form/AccessRights/List/List.styles.tsx

@@ -0,0 +1,45 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useListStyles = makeStyles()((theme) => ({
+  item: {
+    '&[data-isRemoved="true"]': {
+      '& .MuiAvatar-root,.MuiListItemText-root,[data-type="group-chip"]': {
+        filter: 'opacity(0.5)'
+      }
+    }
+  },
+  itemNameAndGroup: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(3),
+    width: '100%'
+  },
+  list: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    maxHeight: '35vw',
+    overflowY: 'auto',
+    width: '100%'
+  },
+  name: {
+    flexGrow: 0,
+    maxWidth: '200px',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+  stateChip: {
+    '&[data-state="added"]': {
+      borderColor: theme.palette.success.main,
+      color: theme.palette.success.main
+    },
+    '&[data-state="removed"]': {
+      borderColor: theme.palette.error.main,
+      color: theme.palette.error.main
+    },
+    '&[data-state="updated"]': {
+      borderColor: theme.palette.info.main,
+      color: theme.palette.info.main
+    }
+  }
+}));

package/src/components/Form/AccessRights/List/List.tsx

@@ -0,0 +1,52 @@
+import { useAtomValue } from 'jotai';
+import { useTranslation } from 'react-i18next';
+import { isEmpty } from 'ramda';
+
+import { Typography } from '@mui/material';
+
+import { valuesAtom } from '../atoms';
+import { List as UIList } from '../../../List';
+import { Labels } from '../models';
+import { SelectEntry, Subtitle } from '../../../..';
+
+import { useListStyles } from './List.styles';
+import Item from './Item';
+
+interface Props {
+  labels: Labels['list'];
+  roles: Array<SelectEntry>;
+}
+
+const List = ({ labels, roles }: Props): JSX.Element => {
+  const { t } = useTranslation();
+  const { classes } = useListStyles();
+  const values = useAtomValue(valuesAtom);
+
+  return (
+    <div>
+      <Subtitle>{t(labels.title)}</Subtitle>
+      <div className={classes.list}>
+        {isEmpty(values) ? (
+          <Typography sx={{ py: 2 }} textAlign="center">
+            {t(labels.empty)}
+          </Typography>
+        ) : (
+          <UIList>
+            {values.map(({ id, ...rest }, index) => (
+              <Item
+                id={id}
+                key={id}
+                labels={labels}
+                {...rest}
+                index={index}
+                roles={roles}
+              />
+            ))}
+          </UIList>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default List;

package/src/components/Form/AccessRights/List/ListItemSkeleton.tsx

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+
+import { List } from '../../../List';
+
+import { useListStyles } from './List.styles';
+
+const ListItemSkeleton = (): ReactElement => {
+  const { classes } = useListStyles();
+
+  return (
+    <List.Item className={classes.item}>
+      <List.Item.Avatar.Skeleton />
+      <List.Item.Text.Skeleton secondaryText />
+    </List.Item>
+  );
+};
+
+export default ListItemSkeleton;

package/src/components/Form/AccessRights/List/ListSkeleton.tsx

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+
+import { List } from '../../../List';
+
+import { useListStyles } from './List.styles';
+import ListItemSkeleton from './ListItemSkeleton';
+
+const ListSkeleton = (): ReactElement => {
+  const { classes } = useListStyles();
+
+  return (
+    <div className={classes.list}>
+      <List>
+        {[...Array(3).keys()].map((key) => (
+          <ListItemSkeleton key={key} />
+        ))}
+      </List>
+    </div>
+  );
+};
+
+export default ListSkeleton;

package/src/components/Form/AccessRights/List/RemoveAccessRight.tsx

@@ -0,0 +1,38 @@
+import { useSetAtom } from 'jotai';
+
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import RotateLeftIcon from '@mui/icons-material/RotateLeft';
+
+import { IconButton } from '../../..';
+import { removeAccessRightDerivedAtom } from '../atoms';
+
+interface Props {
+  index: number;
+  isRemoved: boolean;
+  name: string;
+}
+
+const RemoveAccessRight = ({ index, isRemoved, name }: Props): JSX.Element => {
+  const removeAccessRight = useSetAtom(removeAccessRightDerivedAtom);
+
+  const remove = (): void => removeAccessRight({ index });
+  const recover = (): void => removeAccessRight({ index, recover: true });
+
+  const icon = isRemoved ? (
+    <RotateLeftIcon fontSize="small" />
+  ) : (
+    <DeleteOutlineIcon color="error" fontSize="small" />
+  );
+
+  return (
+    <IconButton
+      data-removed={isRemoved}
+      data-testid={`remove-${name}`}
+      icon={icon}
+      size="small"
+      onClick={isRemoved ? recover : remove}
+    />
+  );
+};
+
+export default RemoveAccessRight;

package/src/components/Form/AccessRights/List/StateChip.tsx

@@ -0,0 +1,28 @@
+import { Chip } from '@mui/material';
+
+import { ItemState } from '../models';
+
+import { useListStyles } from './List.styles';
+
+interface Props {
+  label: string;
+  state: ItemState;
+}
+
+const StateChip = ({ label, state }: Props): JSX.Element => {
+  const { classes, cx } = useListStyles();
+
+  return (
+    <div className={cx(classes.state)}>
+      <Chip
+        className={classes.stateChip}
+        data-state={state}
+        label={label}
+        size="small"
+        variant="outlined"
+      />
+    </div>
+  );
+};
+
+export default StateChip;

package/src/components/Form/AccessRights/List/useItem.ts

@@ -0,0 +1,64 @@
+import { useCallback, useMemo } from 'react';
+
+import { AccessRight, ItemState, Labels } from '../models';
+
+interface UseItemState {
+  getState: () => { label: string; state: ItemState } | null;
+  groupLabel: string | null;
+  initials: string;
+}
+
+export const useItem = ({
+  name,
+  isAdded,
+  isRemoved,
+  isUpdated,
+  list,
+  isContactGroup
+}: Pick<
+  AccessRight,
+  'name' | 'isAdded' | 'isRemoved' | 'isUpdated' | 'isContactGroup'
+> &
+  Pick<Labels, 'list'>): UseItemState => {
+  const initials = useMemo(
+    () =>
+      name
+        .split(' ')
+        .map((n) => n.charAt(0).toUpperCase())
+        .slice(0, 2)
+        .join(''),
+    [name]
+  );
+
+  const getState = useCallback((): {
+    label: string;
+    state: ItemState;
+  } | null => {
+    if (isRemoved) {
+      return {
+        label: list.removed,
+        state: ItemState.removed
+      };
+    }
+    if (isAdded) {
+      return {
+        label: list.added,
+        state: ItemState.added
+      };
+    }
+    if (isUpdated) {
+      return {
+        label: list.updated,
+        state: ItemState.updated
+      };
+    }
+
+    return null;
+  }, [isRemoved, isUpdated, isAdded]);
+
+  return {
+    getState,
+    groupLabel: isContactGroup ? list.group : null,
+    initials
+  };
+};

package/src/components/Form/AccessRights/Provider.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+import { Provider as JotaiProvider, createStore } from 'jotai';
+
+interface Props {
+  children: ReactNode;
+}
+
+const store = createStore();
+
+const Provider = ({ children }: Props): JSX.Element => (
+  <JotaiProvider store={store}>{children}</JotaiProvider>
+);
+
+export default Provider;

package/src/components/Form/AccessRights/ShareInput/ContactSwitch.tsx

@@ -0,0 +1,50 @@
+import { useAtom } from 'jotai';
+import { useTranslation } from 'react-i18next';
+
+import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
+
+import { ContactType, Labels } from '../models';
+import { contactTypeAtom } from '../atoms';
+import { Subtitle } from '../../../..';
+
+import { useContactSwitchStyles } from './ShareInput.styles';
+
+interface Props {
+  labels: Labels['add'];
+}
+
+const ContactSwitch = ({ labels }: Props): JSX.Element => {
+  const { classes } = useContactSwitchStyles();
+  const { t } = useTranslation();
+
+  const [contactType, setContactType] = useAtom(contactTypeAtom);
+
+  const change = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    setContactType(event.target.value as ContactType);
+  };
+
+  return (
+    <>
+      <Subtitle>{t(labels.title)}</Subtitle>
+      <RadioGroup
+        row
+        className={classes.inputs}
+        value={contactType}
+        onChange={change}
+      >
+        <FormControlLabel
+          control={<Radio />}
+          label={labels.contact}
+          value={ContactType.Contact}
+        />
+        <FormControlLabel
+          control={<Radio />}
+          label={labels.contactGroup}
+          value={ContactType.ContactGroup}
+        />
+      </RadioGroup>
+    </>
+  );
+};
+
+export default ContactSwitch;

package/src/components/Form/AccessRights/ShareInput/ShareInput.styles.ts

@@ -0,0 +1,17 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useShareInputStyles = makeStyles()((theme) => ({
+  inputs: {
+    display: 'grid',
+    gap: theme.spacing(1),
+    gridTemplateColumns: `1fr min-content min-content`
+  }
+}));
+
+export const useContactSwitchStyles = makeStyles()((theme) => ({
+  inputs: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2)
+  }
+}));

package/src/components/Form/AccessRights/ShareInput/ShareInput.tsx

@@ -0,0 +1,79 @@
+import { useTranslation } from 'react-i18next';
+import { isNil } from 'ramda';
+
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+
+import { IconButton } from '../../..';
+import { Endpoints, Labels } from '../models';
+import { SelectEntry, SingleConnectedAutocompleteField } from '../../../..';
+import RoleSelectField from '../common/RoleSelectField';
+
+import ContactSwitch from './ContactSwitch';
+import useShareInput from './useShareInput';
+import { useShareInputStyles } from './ShareInput.styles';
+
+interface Props {
+  endpoints: Endpoints;
+  labels: Labels['add'];
+  roles: Array<SelectEntry>;
+}
+
+const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
+  const { t } = useTranslation();
+  const { classes } = useShareInputStyles();
+
+  const {
+    renderOption,
+    selectedContact,
+    getOptionDisabled,
+    getEndpoint,
+    selectContact,
+    isContactGroup,
+    selectedRole,
+    setSelectedRole,
+    add,
+    changeIdValue
+  } = useShareInput(endpoints);
+
+  return (
+    <div>
+      <ContactSwitch labels={labels} />
+      <div className={classes.inputs}>
+        <SingleConnectedAutocompleteField
+          clearable
+          fullWidth
+          changeIdValue={changeIdValue}
+          disableClearable={false}
+          field="name"
+          getEndpoint={getEndpoint}
+          getOptionDisabled={getOptionDisabled}
+          label={t(
+            isContactGroup
+              ? t(labels.autocompleteContactGroup)
+              : t(labels.autocompleteContact)
+          )}
+          queryKey={isContactGroup ? labels.contactGroup : labels.contact}
+          renderOption={renderOption}
+          value={selectedContact}
+          onChange={selectContact}
+        />
+        <RoleSelectField
+          disabled={isNil(selectedContact)}
+          roles={roles}
+          testId="add_role"
+          value={selectedRole}
+          onChange={setSelectedRole}
+        />
+        <IconButton
+          data-testid="add"
+          disabled={isNil(selectedContact)}
+          icon={<AddCircleIcon />}
+          size="small"
+          onClick={add}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ShareInput;

package/src/components/Form/AccessRights/ShareInput/useShareInput.tsx

@@ -0,0 +1,113 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
+import { useAtomValue, useSetAtom } from 'jotai';
+import { equals, includes, isNil } from 'ramda';
+
+import { ListItemText, MenuItem } from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+
+import {
+  accessRightIdsDerivedAtom,
+  addAccessRightDerivedAtom,
+  contactTypeAtom
+} from '../atoms';
+import { AccessRightInitialValues, ContactType, Endpoints } from '../models';
+import { SelectEntry, buildListingEndpoint } from '../../../..';
+
+interface UseShareInputState {
+  add: () => void;
+  changeIdValue: (entry: SelectEntry) => void;
+  getEndpoint: (parameters) => string;
+  getOptionDisabled: (option) => boolean;
+  isContactGroup: boolean;
+  renderOption: (attr, option) => JSX.Element;
+  selectContact: (_, entry) => void;
+  selectedContact: AccessRightInitialValues | null;
+  selectedRole: string;
+  setSelectedRole: Dispatch<SetStateAction<string>>;
+}
+
+const useShareInput = (endpoints: Endpoints): UseShareInputState => {
+  const [selectedContact, setSelectedContact] =
+    useState<AccessRightInitialValues | null>(null);
+  const [selectedRole, setSelectedRole] = useState('viewer');
+
+  const accessRightIds = useAtomValue(accessRightIdsDerivedAtom);
+  const contactType = useAtomValue(contactTypeAtom);
+  const addAccessRight = useSetAtom(addAccessRightDerivedAtom);
+
+  const isContactGroup = equals(contactType, ContactType.ContactGroup);
+
+  const selectContact = (_, entry): void => {
+    setSelectedContact(entry);
+    if (equals('editor', entry.most_permissive_role)) {
+      return;
+    }
+    setSelectedRole('viewer');
+  };
+
+  const add = (): void => {
+    if (isNil(selectedContact)) {
+      return;
+    }
+
+    addAccessRight({
+      email: selectedContact.email,
+      id: selectedContact.id,
+      isContactGroup,
+      name: selectedContact.name,
+      role: selectedRole
+    });
+
+    setSelectedContact(null);
+  };
+
+  const getEndpoint = (parameters): string =>
+    buildListingEndpoint({
+      baseEndpoint: isContactGroup ? endpoints.contactGroup : endpoints.contact,
+      parameters: {
+        ...parameters,
+        sort: { name: 'ASC' }
+      }
+    });
+
+  const renderOption = (attr, option): JSX.Element => {
+    return (
+      <MenuItem {...attr}>
+        <ListItemText>{option.name}</ListItemText>
+        {includes(option.id, accessRightIds) && (
+          <CheckCircleIcon color="success" />
+        )}
+      </MenuItem>
+    );
+  };
+
+  const getOptionDisabled = (option): boolean => {
+    return includes(option.id, accessRightIds);
+  };
+
+  const changeIdValue = (item: SelectEntry): string => {
+    return `${
+      isContactGroup ? ContactType.ContactGroup : ContactType.Contact
+    }_${item.id}`;
+  };
+
+  useEffect(() => {
+    setSelectedContact(null);
+  }, [contactType]);
+
+  return {
+    add,
+    changeIdValue,
+    getEndpoint,
+    getOptionDisabled,
+    isContactGroup,
+    renderOption,
+    selectContact,
+    selectedContact,
+    selectedRole,
+    setSelectedRole
+  };
+};
+
+export default useShareInput;

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

@@ -0,0 +1,36 @@
+import { useTranslation } from 'react-i18next';
+import { useAtomValue } from 'jotai';
+import { identity } from 'ramda';
+
+import { Typography } from '@mui/material';
+
+import { Labels } from '../models';
+import { statsDerivedAtom } from '../atoms';
+
+interface Props {
+  labels: Labels['list'];
+}
+
+const Stats = ({ labels }: Props): JSX.Element => {
+  const { t } = useTranslation();
+  const { hasStats, addedItems, updatedItems, removedItems } =
+    useAtomValue(statsDerivedAtom);
+
+  if (!hasStats) {
+    return null;
+  }
+
+  const statsLabels = [
+    addedItems && `${addedItems} ${t(labels.added).toLocaleLowerCase()}`,
+    updatedItems && `${updatedItems} ${t(labels.updated).toLocaleLowerCase()}`,
+    removedItems && `${removedItems} ${t(labels.removed).toLocaleLowerCase()}`
+  ].filter(identity);
+
+  return (
+    <Typography textAlign="right">
+      <strong>{statsLabels.join(' | ')}</strong>
+    </Typography>
+  );
+};
+
+export default Stats;