@centreon/ui 24.11.13 → 24.11.14

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

@@ -1,90 +0,0 @@
-import { useSetAtom } from 'jotai';
-
-import { Chip } from '@mui/material';
-
-import { SelectEntry } from '../../../..';
-import { List } from '../../../List';
-import { updateContactRoleDerivedAtom } from '../atoms';
-import RoleSelectField from '../common/RoleSelectField';
-import { AccessRight, Labels } from '../models';
-
-import { useListStyles } from './List.styles';
-import RemoveAccessRight from './RemoveAccessRight';
-import StateChip from './StateChip';
-import { useItem } from './useItem';
-
-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

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

@@ -1,52 +0,0 @@
-import { useAtomValue } from 'jotai';
-import { isEmpty } from 'ramda';
-import { useTranslation } from 'react-i18next';
-
-import { Typography } from '@mui/material';
-
-import { SelectEntry, Subtitle } from '../../../..';
-import { List as UIList } from '../../../List';
-import { valuesAtom } from '../atoms';
-import { Labels } from '../models';
-
-import Item from './Item';
-import { useListStyles } from './List.styles';
-
-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

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

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

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

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

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

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

@@ -1,50 +0,0 @@
-import { useAtom } from 'jotai';
-import { useTranslation } from 'react-i18next';
-
-import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
-
-import { Subtitle } from '../../../..';
-import { contactTypeAtom } from '../atoms';
-import { ContactType, Labels } from '../models';
-
-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

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

@@ -1,79 +0,0 @@
-import { isNil } from 'ramda';
-import { useTranslation } from 'react-i18next';
-
-import AddCircleIcon from '@mui/icons-material/AddCircle';
-
-import { IconButton } from '../../..';
-import { SelectEntry, SingleConnectedAutocompleteField } from '../../../..';
-import RoleSelectField from '../common/RoleSelectField';
-import { Endpoints, Labels } from '../models';
-
-import ContactSwitch from './ContactSwitch';
-import { useShareInputStyles } from './ShareInput.styles';
-import useShareInput from './useShareInput';
-
-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

@@ -1,113 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-
-import { useAtomValue, useSetAtom } from 'jotai';
-import { equals, includes, isNil } from 'ramda';
-
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import { ListItemText, MenuItem } from '@mui/material';
-
-import { SelectEntry, buildListingEndpoint } from '../../../..';
-import {
-  accessRightIdsDerivedAtom,
-  addAccessRightDerivedAtom,
-  contactTypeAtom
-} from '../atoms';
-import { AccessRightInitialValues, ContactType, Endpoints } from '../models';
-
-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

@@ -1,36 +0,0 @@
-import { useAtomValue } from 'jotai';
-import { identity } from 'ramda';
-import { useTranslation } from 'react-i18next';
-
-import { Typography } from '@mui/material';
-
-import { statsDerivedAtom } from '../atoms';
-import { Labels } from '../models';
-
-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;