@centreon/ui 23.10.121 → 24.4.1-0

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

@@ -0,0 +1,81 @@
+import { useTranslation } from 'react-i18next';
+
+import LinkIcon from '@mui/icons-material/Link';
+import { CircularProgress } from '@mui/material';
+
+import { Button } from '../../..';
+import { AccessRightInitialValues, Labels } from '../models';
+
+import { useActions } from './useActions';
+import { useActionsStyles } from './Actions.styles';
+
+interface Props {
+  cancel: ({ dirty, values }) => void;
+  clear: () => void;
+  isSubmitting?: boolean;
+  labels: Labels['actions'];
+  link?: string;
+  submit: (values: Array<AccessRightInitialValues>) => Promise<void>;
+}
+
+const Actions = ({
+  labels,
+  cancel,
+  submit,
+  link,
+  isSubmitting,
+  clear
+}: Props): JSX.Element => {
+  const { t } = useTranslation();
+  const { classes } = useActionsStyles();
+
+  const { dirty, copyLink, save, formattedValues } = useActions({
+    clear,
+    labels,
+    link,
+    submit
+  });
+
+  const onCancel = (): void => {
+    cancel({ dirty, values: formattedValues });
+  };
+
+  return (
+    <div className={classes.actions}>
+      {link ? (
+        <Button
+          aria-label={t(labels.copyLink)}
+          icon={<LinkIcon />}
+          iconVariant="start"
+          variant="ghost"
+          onClick={copyLink}
+        >
+          {t(labels.copyLink)}
+        </Button>
+      ) : (
+        <div />
+      )}
+      <div className={classes.cancelAndSave}>
+        <Button
+          aria-label={t(labels.cancel)}
+          variant="secondary"
+          onClick={onCancel}
+        >
+          {t(labels.cancel)}
+        </Button>
+        <Button
+          aria-label={t(labels.save)}
+          disabled={isSubmitting || !dirty}
+          icon={isSubmitting ? <CircularProgress size={24} /> : null}
+          iconVariant={isSubmitting ? 'start' : 'none'}
+          variant="primary"
+          onClick={save}
+        >
+          {t(labels.save)}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Actions;

package/src/components/Form/AccessRights/Actions/useActions.ts

@@ -0,0 +1,79 @@
+import { useAtomValue } from 'jotai';
+import { equals, omit } from 'ramda';
+
+import { initialValuesAtom, valuesAtom } from '../atoms';
+import { AccessRight, AccessRightInitialValues, Labels } from '../models';
+import { useCopyToClipboard } from '../../../..';
+
+const formatValue = (accessRight: AccessRight): AccessRightInitialValues => {
+  return omit(['isAdded', 'isUpdated', 'isRemoved'], accessRight);
+};
+
+const formatValueForSubmition = (
+  accessRight: AccessRight
+): AccessRightInitialValues => {
+  return {
+    ...formatValue(accessRight),
+    id: Number((accessRight.id as string).split('_')[1])
+  };
+};
+
+interface Props {
+  clear: () => void;
+  labels: Labels['actions'];
+  link?: string;
+  submit: (values: Array<AccessRightInitialValues>) => Promise<void>;
+}
+
+interface UseActionsState {
+  copyLink: () => void;
+  dirty: boolean;
+  formattedValues: Array<AccessRightInitialValues>;
+  save: () => void;
+}
+
+export const useActions = ({
+  link,
+  labels,
+  submit,
+  clear
+}: Props): UseActionsState => {
+  const values = useAtomValue(valuesAtom);
+  const initialValues = useAtomValue(initialValuesAtom);
+
+  const { copy } = useCopyToClipboard({
+    errorMessage: labels.copyError,
+    successMessage: labels.copySuccess
+  });
+
+  const formattedValues = values
+    .filter(({ isRemoved }) => !isRemoved)
+    .map(formatValue);
+
+  const dirty = !equals(initialValues, formattedValues);
+
+  const copyLink = (): void => {
+    if (!link) {
+      return;
+    }
+    copy(link);
+  };
+
+  const save = (): void => {
+    submit(
+      values.filter(({ isRemoved }) => !isRemoved).map(formatValueForSubmition)
+    )?.then((isError) => {
+      if (isError) {
+        return;
+      }
+      clear();
+    });
+  };
+
+  return {
+    copyLink,
+    dirty,
+    formattedValues,
+    save
+  };
+};

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,78 @@
+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 />}
+          onClick={add}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ShareInput;