@centreon/ui 24.5.12 → 24.5.13

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,52 @@
+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;
+    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,219 @@
+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',
+    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/useAccessRightsChange.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+import { useAtomValue } from 'jotai';
+
+import { useDeepCompare } from '../../../utils';
+
+import { valuesAtom } from './atoms';
+import { formatValueForSubmition } from './utils';
+import { AccessRightInitialValues } from './models';
+
+export const useAccessRightsChange = (
+  onChange?: (values: Array<AccessRightInitialValues>) => void
+): void => {
+  const values = useAtomValue(valuesAtom);
+
+  useEffect(
+    () => {
+      if (!onChange) {
+        return;
+      }
+
+      onChange(
+        values
+          .filter(({ isRemoved }) => !isRemoved)
+          .map(formatValueForSubmition)
+      );
+    },
+    useDeepCompare([values])
+  );
+};

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/AccessRights/utils.ts

@@ -0,0 +1,18 @@
+import { omit } from 'ramda';
+
+import { AccessRight, AccessRightInitialValues } from './models';
+
+export const formatValue = (
+  accessRight: AccessRight
+): AccessRightInitialValues => {
+  return omit(['isAdded', 'isUpdated', 'isRemoved'], accessRight);
+};
+
+export const formatValueForSubmition = (
+  accessRight: AccessRight
+): AccessRightInitialValues => {
+  return {
+    ...formatValue(accessRight),
+    id: Number((accessRight.id as string).split('_')[1])
+  };
+};

package/src/components/Form/Dashboard/Dashboard.resource.ts

@@ -0,0 +1,9 @@
+export type DashboardResource = {
+  description?: string | null;
+  globalRefreshInterval?: {
+    global: string;
+    manual: string;
+    title: string;
+  };
+  name: string;
+};

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 };

package/src/components/Form/Dashboard/DashboardForm.styles.ts

@@ -0,0 +1,21 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()(() => ({
+  dashboardForm: {
+    display: 'flex',
+    flexDirection: 'column',
+    maxWidth: '480px',
+    width: '100%'
+  }
+}));
+
+const useGlobalRefreshIntervalStyles = makeStyles()((theme) => ({
+  globalRefreshInterval: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(1)
+  }
+}));
+
+export { useStyles, useGlobalRefreshIntervalStyles };