@centreon/ui 23.10.122 → 24.4.1-0

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;

package/src/components/Form/AccessRights/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/AccessRights/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/AccessRights/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/AccessRights/models.ts

@@ -0,0 +1,55 @@
+export interface AccessRightInitialValues {
+  email?: string;
+  id: number | string;
+  isContactGroup: boolean;
+  most_permissive_role?: 'editor' | 'viewer';
+  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'
+}

package/src/components/Form/AccessRights/storiesData.ts

@@ -0,0 +1,222 @@
+import { faker } from '@faker-js/faker';
+
+import { Listing } from '../../../api/models';
+import { SelectEntry } from '../../..';
+
+import { AccessRightInitialValues, Labels } from './models';
+
+faker.seed(42);
+
+export const defaultAccessRights: Array<AccessRightInitialValues> = Array(10)
+  .fill(0)
+  .map((_, idx) => ({
+    email: faker.internet.email(),
+    id: idx,
+    isContactGroup: idx % 5 === 0,
+    name: faker.person.fullName(),
+    role: idx % 2 === 0 ? 'viewer' : 'editor'
+  }));
+
+export const simpleAccessRights: Array<AccessRightInitialValues> = Array(6)
+  .fill(0)
+  .map((_, idx) => ({
+    email: faker.internet.email(),
+    id: idx,
+    isContactGroup: idx % 5 === 0,
+    name: faker.person.fullName(),
+    role: idx % 2 === 0 ? 'viewer' : 'editor'
+  }));
+
+export const accessRightsWithStates = [
+  {
+    email: faker.internet.email(),
+    id: 1,
+    isAdded: false,
+    isContactGroup: true,
+    isRemoved: false,
+    isUpdated: false,
+    name: faker.person.fullName(),
+    role: 'viewer'
+  },
+  {
+    email: faker.internet.email(),
+    id: 2,
+    isAdded: true,
+    isContactGroup: true,
+    isRemoved: false,
+    isUpdated: false,
+    name: faker.person.fullName(),
+    role: 'editor'
+  },
+  {
+    email: faker.internet.email(),
+    id: 3,
+    isAdded: false,
+    isContactGroup: false,
+    isRemoved: false,
+    isUpdated: true,
+    name: faker.person.fullName(),
+    role: 'viewer'
+  },
+  {
+    email: faker.internet.email(),
+    id: 4,
+    isAdded: false,
+    isContactGroup: false,
+    isRemoved: true,
+    isUpdated: false,
+    name: faker.person.fullName(),
+    role: 'editor'
+  },
+  {
+    email: faker.internet.email(),
+    id: 5,
+    isAdded: false,
+    isContactGroup: true,
+    isRemoved: true,
+    isUpdated: true,
+    name: faker.person.fullName(),
+    role: 'viewer'
+  }
+];
+
+export const emptyAccessRights = [];
+
+const buildEntities = (from, isGroup): Array<SelectEntry> => {
+  return Array(10)
+    .fill(0)
+    .map((_, index) => ({
+      email: isGroup ? undefined : faker.internet.email(),
+      id: 1000 + index,
+      most_permissive_role: index % 3 === 0 ? 'editor' : 'viewer',
+      name: `Entity ${isGroup ? 'Group' : ''} ${from + index}`
+    }));
+};
+
+export const buildResult = (isGroup): Listing<SelectEntry> => ({
+  meta: {
+    limit: 10,
+    page: 1,
+    total: 10
+  },
+  result: buildEntities(10, isGroup)
+});
+
+export const labels: Labels = {
+  actions: {
+    cancel: 'Cancel',
+    copyError: 'Failed to copy',
+    copyLink: 'Copy link',
+    copySuccess: 'Copied',
+    save: 'Save'
+  },
+  add: {
+    autocompleteContact: 'Add a contact',
+    autocompleteContactGroup: 'Add a contact group',
+    contact: 'Contact',
+    contactGroup: 'Contact group',
+    title: 'Share dashboard with'
+  },
+  list: {
+    added: 'Added',
+    empty: 'The contact list is empty',
+    group: 'Group',
+    removed: 'Removed',
+    title: 'User rights',
+    updated: 'Updated'
+  }
+};
+
+export const roles = [
+  {
+    id: 'viewer',
+    name: 'Viewer'
+  },
+  {
+    id: 'editor',
+    name: 'Editor'
+  }
+];
+
+export const removedAccessRights = [
+  {
+    email: 'Adrienne.Kassulke-Rutherford@gmail.com',
+    id: 1,
+    isContactGroup: false,
+    name: 'Linda Schultz',
+    role: 'editor'
+  },
+  {
+    email: 'Merle7@hotmail.com',
+    id: 2,
+    isContactGroup: false,
+    name: 'Lewis Buckridge PhD',
+    role: 'viewer'
+  },
+  {
+    email: 'Linda.Harris37@hotmail.com',
+    id: 3,
+    isContactGroup: false,
+    name: "Jodi O'Reilly",
+    role: 'editor'
+  },
+  {
+    email: 'Louvenia.Torphy@yahoo.com',
+    id: 4,
+    isContactGroup: false,
+    name: 'Mildred Ratke-Stanton',
+    role: 'viewer'
+  },
+  {
+    email: 'Kelli.Russel4@hotmail.com',
+    id: 5,
+    isContactGroup: true,
+    name: 'Rudolph Brown',
+    role: 'editor'
+  }
+];
+
+export const updatedAccessRights = [
+  {
+    email: 'Kylie_Wintheiser54@hotmail.com',
+    id: 0,
+    isContactGroup: true,
+    name: 'Kathy Schmitt',
+    role: 'editor'
+  },
+  {
+    email: 'Adrienne.Kassulke-Rutherford@gmail.com',
+    id: 1,
+    isContactGroup: false,
+    name: 'Linda Schultz',
+    role: 'editor'
+  },
+  {
+    email: 'Merle7@hotmail.com',
+    id: 2,
+    isContactGroup: false,
+    name: 'Lewis Buckridge PhD',
+    role: 'viewer'
+  },
+  {
+    email: 'Linda.Harris37@hotmail.com',
+    id: 3,
+    isContactGroup: false,
+    name: "Jodi O'Reilly",
+    role: 'editor'
+  },
+  {
+    email: 'Louvenia.Torphy@yahoo.com',
+    id: 4,
+    isContactGroup: false,
+    name: 'Mildred Ratke-Stanton',
+    role: 'viewer'
+  },
+  {
+    email: 'Kelli.Russel4@hotmail.com',
+    id: 5,
+    isContactGroup: true,
+    name: 'Rudolph Brown',
+    role: 'editor'
+  }
+];

package/src/components/Form/AccessRights/useAccessRightsInitValues.ts

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+
+import { useAtom, useSetAtom } from 'jotai';
+import { equals } from 'ramda';
+
+import { initialValuesAtom, valuesAtom } from './atoms';
+import { AccessRightInitialValues, ContactType } from './models';
+
+interface Props {
+  initialValues: Array<AccessRightInitialValues>;
+}
+
+export const useAccessRightsInitValues = ({
+  initialValues
+}: Props): (() => void) => {
+  const [currentInitialValues, setInitialValues] = useAtom(initialValuesAtom);
+  const setValues = useSetAtom(valuesAtom);
+
+  const formattedInitialValues = useMemo(
+    () =>
+      initialValues.map((value) => ({
+        ...value,
+        id: `${
+          value.isContactGroup ? ContactType.ContactGroup : ContactType.Contact
+        }_${value.id}`
+      })),
+    [initialValues]
+  );
+
+  if (!equals(formattedInitialValues, currentInitialValues)) {
+    setInitialValues(formattedInitialValues);
+    setValues(
+      initialValues.map((value) => ({
+        isAdded: false,
+        isRemoved: false,
+        isUpdated: false,
+        ...value,
+        id: `${
+          value.isContactGroup ? ContactType.ContactGroup : ContactType.Contact
+        }_${value.id}`
+      }))
+    );
+  }
+
+  const clearValues = (): void => {
+    setInitialValues([]);
+    setValues([]);
+  };
+
+  return clearValues;
+};

package/src/components/Form/Dashboard/DashboardDuplicationForm.tsx

@@ -0,0 +1,85 @@
+import { ReactElement, useCallback, useMemo } from 'react';
+
+import { string, object } from 'yup';
+import { useTranslation } from 'react-i18next';
+
+import { InputType } from '../../../Form/Inputs/models';
+import { Form, FormProps } from '../../../Form';
+import { FormVariant } from '../Form.models';
+import { FormActions, FormActionsProps } from '../FormActions';
+
+import { useStyles } from './DashboardForm.styles';
+import {
+  labelMustBeAtLeast,
+  labelMustBeMost,
+  labelRequired
+} from './translatedLabels';
+import { DashboardResource } from './Dashboard.resource';
+
+type DashboardFormProps = {
+  labels: DashboardFormLabels;
+  name: string;
+  onSubmit?: FormProps<DashboardResource>['submit'];
+  variant?: FormVariant;
+} & Pick<FormActionsProps, 'onCancel'>;
+
+type DashboardFormLabels = {
+  actions: FormActionsProps['labels'];
+  entity: Required<DashboardResource>;
+};
+
+const DashboardDuplicationForm = ({
+  variant = 'create',
+  labels,
+  onSubmit,
+  onCancel,
+  name
+}: DashboardFormProps): ReactElement => {
+  const { classes } = useStyles();
+  const { t } = useTranslation();
+
+  const formProps = useMemo<FormProps<DashboardResource>>(
+    () => ({
+      initialValues: { name },
+      inputs: [
+        {
+          autoFocus: true,
+          fieldName: 'name',
+          group: 'main',
+          label: labels?.entity?.name,
+          required: true,
+          type: InputType.Text
+        }
+      ],
+      submit: (values, bag) => onSubmit?.(values, bag),
+      validationSchema: object({
+        name: string()
+          .label(labels?.entity?.name)
+          .min(3, ({ min, label }) => t(labelMustBeAtLeast, { label, min }))
+          .max(50, ({ max, label }) => t(labelMustBeMost, { label, max }))
+          .required(t(labelRequired) as string)
+      })
+    }),
+    [labels, onSubmit]
+  );
+
+  const Actions = useCallback(
+    () => (
+      <FormActions<DashboardResource>
+        enableSubmitWhenNotDirty
+        labels={labels?.actions}
+        variant={variant}
+        onCancel={onCancel}
+      />
+    ),
+    [labels, onCancel, variant]
+  );
+
+  return (
+    <div className={classes.dashboardForm}>
+      <Form<DashboardResource> {...formProps} Buttons={Actions} />
+    </div>
+  );
+};
+
+export { DashboardDuplicationForm };