@centreon/ui 24.4.21 → 24.4.22

package/src/components/Form/AccessRightsV2/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/AccessRightsV2/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/AccessRightsV2/ShareInput/ContactSwitch.tsx

@@ -0,0 +1,42 @@
+import { useSetAtom } 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 '../../../..';
+
+interface Props {
+  labels: Labels['add'];
+}
+
+const ContactSwitch = ({ labels }: Props): JSX.Element => {
+  const { t } = useTranslation();
+
+  const setContactType = useSetAtom(contactTypeAtom);
+
+  const change = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    setContactType(event.target.value as ContactType);
+  };
+
+  return (
+    <>
+      <Subtitle>{t(labels.title)}</Subtitle>
+      <RadioGroup row defaultValue={ContactType.Contact} 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/AccessRightsV2/ShareInput/ShareInput.styles.ts

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

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

@@ -0,0 +1,77 @@
+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)
+          )}
+          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;

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

@@ -0,0 +1,109 @@
+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);
+  };
+
+  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/AccessRightsV2/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;

package/src/components/Form/AccessRightsV2/atoms.ts

@@ -0,0 +1,97 @@
+import { atom } from 'jotai';
+import { equals, pluck, prop, remove, update } from 'ramda';
+
+import { AccessRightInitialValues, AccessRight, ContactType } from './models';
+
+export const valuesAtom = atom<Array<AccessRight>>([]);
+export const initialValuesAtom = atom<Array<AccessRightInitialValues>>([]);
+export const contactTypeAtom = atom<ContactType>(ContactType.Contact);
+
+export const accessRightIdsDerivedAtom = atom((get) => {
+  const values = get(valuesAtom);
+
+  return pluck('id', values);
+});
+
+export const addAccessRightDerivedAtom = atom(
+  null,
+  (get, set, share: AccessRightInitialValues) => {
+    const values = get(valuesAtom);
+
+    set(valuesAtom, [
+      {
+        ...share,
+        isAdded: true,
+        isRemoved: false,
+        isUpdated: false
+      },
+      ...values
+    ]);
+  }
+);
+
+export const updateContactRoleDerivedAtom = atom(
+  null,
+  (get, set, { id, index, newRole }) => {
+    const values = get(valuesAtom);
+    const initialValues = get(initialValuesAtom);
+
+    const initialAccesRight = initialValues.find((value) =>
+      equals(id, value.id)
+    ) as AccessRightInitialValues;
+    const accessRight = values.find((value) =>
+      equals(id, value.id)
+    ) as AccessRight;
+
+    set(
+      valuesAtom,
+      update(
+        index,
+        {
+          ...accessRight,
+          isUpdated: !equals(initialAccesRight?.role, newRole),
+          role: newRole
+        },
+        values
+      )
+    );
+  }
+);
+
+export const removeAccessRightDerivedAtom = atom(
+  null,
+  (get, set, { index, recover = false }) => {
+    const values = get(valuesAtom);
+
+    const accessRight = values[index];
+
+    if (accessRight.isAdded) {
+      set(valuesAtom, remove(index, 1, values));
+
+      return;
+    }
+
+    set(
+      valuesAtom,
+      update(index, {
+        ...accessRight,
+        isRemoved: !recover
+      })
+    );
+  }
+);
+
+export const statsDerivedAtom = atom((get) => {
+  const values = get(valuesAtom);
+
+  const addedItems = values.filter(prop('isAdded')).length;
+  const updatedItems = values.filter(prop('isUpdated')).length;
+  const removedItems = values.filter(prop('isRemoved')).length;
+
+  return {
+    addedItems,
+    hasStats: Boolean(addedItems || updatedItems || removedItems),
+    removedItems,
+    updatedItems
+  };
+});

package/src/components/Form/AccessRightsV2/common/RoleSelectField.styles.tsx

@@ -0,0 +1,7 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useRoleSelectField = makeStyles()((theme) => ({
+  roleContainer: {
+    width: theme.spacing(12)
+  }
+}));

package/src/components/Form/AccessRightsV2/common/RoleSelectField.tsx

@@ -0,0 +1,45 @@
+import { SelectChangeEvent } from '@mui/material';
+
+import SelectField, { SelectEntry } from '../../../../InputField/Select';
+
+import { useRoleSelectField } from './RoleSelectField.styles';
+
+interface Props {
+  disabled?: boolean;
+  label?: string;
+  onChange: (newValue: string) => void;
+  roles: Array<SelectEntry>;
+  testId: string;
+  value: string;
+}
+
+const RoleSelectField = ({
+  roles,
+  value,
+  onChange,
+  testId,
+  label,
+  disabled
+}: Props): JSX.Element => {
+  const { classes } = useRoleSelectField();
+  const change = (event: SelectChangeEvent): void => {
+    onChange(event.target.value as string);
+  };
+
+  return (
+    <div className={classes.roleContainer}>
+      <SelectField
+        fullWidth
+        dataTestId={testId}
+        disabled={disabled}
+        label={label}
+        options={roles}
+        selectedOptionId={value}
+        size="small"
+        onChange={change}
+      />
+    </div>
+  );
+};
+
+export default RoleSelectField;

package/src/components/Form/AccessRightsV2/models.ts

@@ -0,0 +1,54 @@
+export interface AccessRightInitialValues {
+  email?: string;
+  id: number | string;
+  isContactGroup: boolean;
+  name: string;
+  role: string;
+}
+
+export interface AccessRight extends AccessRightInitialValues {
+  isAdded: boolean;
+  isRemoved: boolean;
+  isUpdated: boolean;
+}
+
+export interface Labels {
+  actions: {
+    cancel: string;
+    copyError: string;
+    copyLink: string;
+    copySuccess: string;
+    save: string;
+  };
+  add: {
+    autocompleteContact: string;
+    autocompleteContactGroup: string;
+    contact: string;
+    contactGroup: string;
+    title: string;
+  };
+  list: {
+    added: string;
+    empty: string;
+    group: string;
+    removed: string;
+    title: string;
+    updated: string;
+  };
+}
+
+export interface Endpoints {
+  contact: string;
+  contactGroup: string;
+}
+
+export enum ItemState {
+  added = 'added',
+  removed = 'removed',
+  updated = 'updated'
+}
+
+export enum ContactType {
+  Contact = 'contact',
+  ContactGroup = 'contactGroup'
+}