@centreon/ui 24.4.1-MON-33898.16 → 24.4.1-MON-21278-Delete-a-basic-token.13

package/src/components/Form/AccessRights/Input/ContactInputField.tsx

@@ -0,0 +1,105 @@
+import { ReactElement, useCallback, useEffect, useState } from 'react';
+
+import { useField } from 'formik';
+
+import {
+  Autocomplete as MuiAutocomplete,
+  MenuItem as MuiMenuItem,
+  TextField as MuiTextField
+} from '@mui/material';
+
+import { useAccessRightsForm } from '../useAccessRightsForm';
+import {
+  ContactGroupResource,
+  ContactResource,
+  isContactGroupResource
+} from '../AccessRights.resource';
+import { useInputStyles } from '../common/Input.styles';
+import { GroupLabel } from '../common/GroupLabel';
+
+import { useStyles } from './ContactAccessRightsInput.styles';
+
+export type ContactInputFieldProps = {
+  id: string;
+  labels: ContactInputFieldLabels;
+  name: string;
+};
+
+type ContactInputFieldLabels = {
+  group: string;
+  noOptionsText: string;
+  placeholder: string;
+};
+
+const ContactInputField = ({
+  labels,
+  ...props
+}: ContactInputFieldProps): ReactElement => {
+  const { classes } = useStyles();
+  const { classes: inputClasses } = useInputStyles();
+
+  const {
+    options: { contacts }
+  } = useAccessRightsForm();
+
+  const [field, meta, helpers] = useField(props);
+
+  const [value, setValue] = useState<
+    ContactResource | ContactGroupResource | null
+  >(meta.initialValue ?? null);
+
+  const onInputChange = useCallback(
+    (_, _value) => {
+      helpers.setValue(_value);
+    },
+    [helpers]
+  );
+
+  const renderInput = useCallback(
+    (params) => (
+      <MuiTextField
+        {...props}
+        {...params}
+        placeholder={labels.placeholder}
+        size="small"
+      />
+    ),
+    [labels, props]
+  );
+
+  useEffect(() => {
+    setValue(field.value ?? null);
+  }, [field.value]);
+
+  return (
+    <MuiAutocomplete<ContactResource | ContactGroupResource, false, false, true>
+      autoComplete
+      autoHighlight
+      openOnFocus
+      className={classes.contactInput}
+      componentsProps={{
+        popper: {
+          className: inputClasses.inputDropdown
+        }
+      }}
+      getOptionLabel={(option) =>
+        typeof option === 'string' ? option : option.name
+      }
+      noOptionsText={labels.noOptionsText}
+      options={contacts}
+      renderInput={renderInput}
+      renderOption={(attr, option) => (
+        <MuiMenuItem {...attr} key={`${option.type}--${option.name}`}>
+          {option.name}{' '}
+          {isContactGroupResource(option) && (
+            <GroupLabel label={labels.group} />
+          )}
+        </MuiMenuItem>
+      )}
+      value={value}
+      onChange={onInputChange}
+    />
+  );
+};
+
+export { ContactInputField };

package/src/components/Form/AccessRights/Input/RoleInputField.tsx

@@ -0,0 +1,29 @@
+import { ReactElement, useCallback } from 'react';
+
+import { useField } from 'formik';
+
+import { RoleInputSelect } from '../common/RoleInputSelect';
+
+type RoleFieldProps = {
+  id: string;
+  label?: string;
+  name: string;
+};
+
+const RoleInputField = ({ label, ...props }: RoleFieldProps): ReactElement => {
+  const [field, meta] = useField(props);
+
+  const onInputChange = useCallback((e) => field.onChange(e), [field]);
+
+  return (
+    <RoleInputSelect
+      defaultValue={meta.initialValue}
+      {...field}
+      {...props}
+      {...(label && { label })}
+      onChange={onInputChange}
+    />
+  );
+};
+
+export { RoleInputField };

package/src/components/Form/AccessRights/List/ContactAccessRightsList.stories.tsx

@@ -0,0 +1,97 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  AccessRightsFormProvider,
+  AccessRightsFormProviderProps
+} from '../useAccessRightsForm';
+import { contactAccessRightsMock } from '../__fixtures__/contactAccessRight.mock';
+
+import { ContactAccessRightsList } from './ContactAccessRightsList';
+
+const meta: Meta<typeof ContactAccessRightsList> = {
+  component: ContactAccessRightsList,
+  title: 'components/Form/AccessRights/ContactAccessRightsList'
+};
+
+export default meta;
+type Story = StoryObj<typeof ContactAccessRightsList>;
+
+const Wrapper = ({
+  children,
+  amountOfContacts = 12
+}: {
+  amountOfContacts?: number;
+  children: ReactNode;
+}): ReactElement => {
+  const options: AccessRightsFormProviderProps['options'] = {
+    contacts: [],
+    roles: [{ role: 'viewer' }, { role: 'editor' }]
+  };
+
+  const initialValues: AccessRightsFormProviderProps['initialValues'] =
+    contactAccessRightsMock(amountOfContacts);
+
+  return (
+    <AccessRightsFormProvider initialValues={initialValues} options={options}>
+      {children}
+    </AccessRightsFormProvider>
+  );
+};
+
+export const Default: Story = {
+  args: {
+    labels: {
+      emptyState: 'No Contacts with access rights',
+      item: {
+        group: 'Group',
+        state: {
+          added: 'Add',
+          removed: 'Remove',
+          updated: 'Update'
+        }
+      }
+    }
+  },
+  render: (args) => (
+    <Wrapper>
+      <ContactAccessRightsList {...args} />
+    </Wrapper>
+  )
+};
+
+export const AsEmptyState: Story = {
+  args: Default.args,
+  render: (args) => (
+    <Wrapper amountOfContacts={0}>
+      <ContactAccessRightsList {...args} />
+    </Wrapper>
+  )
+};
+
+const LoadingWrapper = ({
+  children
+}: {
+  children: ReactNode;
+}): ReactElement => {
+  const options: AccessRightsFormProviderProps['options'] = {
+    contacts: [],
+    roles: [{ role: 'viewer' }, { role: 'editor' }]
+  };
+
+  return (
+    <AccessRightsFormProvider loadingStatus="loading" options={options}>
+      {children}
+    </AccessRightsFormProvider>
+  );
+};
+
+export const AsLoadingState: Story = {
+  args: Default.args,
+  render: (args) => (
+    <LoadingWrapper>
+      <ContactAccessRightsList {...args} />
+    </LoadingWrapper>
+  )
+};

package/src/components/Form/AccessRights/List/ContactAccessRightsList.styles.ts

@@ -0,0 +1,71 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  contactAccessRightsList: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    maxHeight: '29.5rem',
+    maxWidth: '520px',
+    overflowY: 'auto'
+  },
+  contactAccessRightsListEmpty: {
+    alignItems: 'center',
+    color: theme.palette.text.secondary,
+    fontSize: '0.75rem',
+    padding: theme.spacing(2, 8),
+    textAlign: 'center'
+  },
+  contactAccessRightsListItem: {
+    '& .MuiChip-root': {
+      '& .MuiChip-label': {
+        lineHeight: 'unset',
+        padding: theme.spacing(0, 0.75),
+        textOverflow: 'unset'
+      },
+      '&[data-state="added"]': {
+        borderColor: theme.palette.chip.color.success,
+        color: theme.palette.chip.color.success
+      },
+      '&[data-state="removed"]': {
+        borderColor: theme.palette.chip.color.error,
+        color: theme.palette.chip.color.error
+      },
+      '&[data-state="updated"]': {
+        borderColor: theme.palette.chip.color.info,
+        color: theme.palette.chip.color.info
+      },
+      borderRadius: '0.625rem',
+      flexBasis: '3.5rem',
+      flexShrink: 0,
+      fontSize: '0.6875rem',
+
+      fontWeight: 500,
+      height: 'auto',
+      lineHeight: '1.125rem',
+      minHeight: 'unset',
+      textTransform: 'lowercase'
+    },
+    '& .MuiListItemSecondaryAction-root': {
+      paddingRight: theme.spacing(0.625)
+    },
+    '& > span:first-of-type': {
+      alignItems: 'center',
+      display: 'flex',
+      flexGrow: 1,
+      gap: theme.spacing(2),
+      overflow: 'hidden'
+    },
+    '&[data-is-removed="true"]': {
+      '& > span:first-of-type': {
+        opacity: 0.3
+      }
+    },
+    gap: theme.spacing(3),
+    justifyContent: 'space-between',
+
+    maxWidth: '520px',
+    paddingRight: theme.spacing(7)
+  }
+}));
+
+export { useStyles };

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

@@ -0,0 +1,51 @@
+import { ReactElement } from 'react';
+
+import { List } from '../../../List';
+import { useAccessRightsForm } from '../useAccessRightsForm';
+
+import {
+  ContactAccessRightsListItem,
+  ContactAccessRightsListItemProps
+} from './ContactAccessRightsListItem';
+import { useStyles } from './ContactAccessRightsList.styles';
+import { ContactAccessRightsListSkeleton } from './ContactAccessRightsListSkeleton';
+
+export type ContactAccessRightsListProps = {
+  labels: ContactAccessRightsListLabels;
+};
+
+type ContactAccessRightsListLabels = {
+  emptyState: string;
+  item: ContactAccessRightsListItemProps['labels'];
+};
+
+const ContactAccessRightsList = ({
+  labels
+}: ContactAccessRightsListProps): ReactElement => {
+  const { classes } = useStyles();
+  const { contactAccessRights, isLoading } = useAccessRightsForm();
+
+  return isLoading ? (
+    <ContactAccessRightsListSkeleton length={3} />
+  ) : (
+    <div className={classes.contactAccessRightsList}>
+      {contactAccessRights.length === 0 ? (
+        <div className={classes.contactAccessRightsListEmpty}>
+          {labels.emptyState}
+        </div>
+      ) : (
+        <List>
+          {contactAccessRights.map((resource) => (
+            <ContactAccessRightsListItem
+              key={resource.contactAccessRight.contact?.id}
+              labels={labels.item}
+              resource={resource}
+            />
+          ))}
+        </List>
+      )}
+    </div>
+  );
+};
+
+export { ContactAccessRightsList };

package/src/components/Form/AccessRights/List/ContactAccessRightsListItem.stories.tsx

@@ -0,0 +1,116 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  AccessRightsFormProvider,
+  AccessRightsFormProviderProps
+} from '../useAccessRightsForm';
+import { ContactAccessRightResource } from '../AccessRights.resource';
+
+import { ContactAccessRightsListItem } from './ContactAccessRightsListItem';
+import { ContactAccessRightsListItemSkeleton } from './ContactAccessRightsListItemSkeleton';
+
+const meta: Meta<typeof ContactAccessRightsListItem> = {
+  component: ContactAccessRightsListItem,
+  title: 'components/Form/AccessRights/ContactAccessRightsListItem'
+};
+
+export default meta;
+type Story = StoryObj<typeof ContactAccessRightsListItem>;
+
+const Wrapper = ({ children }: { children: ReactNode }): ReactElement => {
+  const options: AccessRightsFormProviderProps['options'] = {
+    contacts: [],
+    roles: [{ role: 'viewer' }, { role: 'editor' }]
+  };
+
+  return (
+    <AccessRightsFormProvider options={options}>
+      {children}
+    </AccessRightsFormProvider>
+  );
+};
+
+export const Default: Story = {
+  args: {
+    labels: {
+      group: 'Group',
+      state: {
+        added: 'Add',
+        removed: 'Remove',
+        updated: 'Update'
+      }
+    },
+    resource: {
+      contactAccessRight: {
+        contact: {
+          email: 'user@company.com',
+          id: '1',
+          name: 'User Name',
+          type: 'contact'
+        },
+        role: 'viewer'
+      },
+      state: 'unchanged',
+      stateHistory: []
+    }
+  },
+  render: (args) => (
+    <Wrapper>
+      <ContactAccessRightsListItem {...args} />
+    </Wrapper>
+  )
+};
+
+export const AsContactGroup: Story = {
+  args: {
+    labels: Default.args?.labels,
+    resource: {
+      contactAccessRight: {
+        contact: {
+          id: '1',
+          name: 'Team Name',
+          type: 'contact_group'
+        },
+        role: 'editor'
+      },
+      state: 'unchanged',
+      stateHistory: []
+    }
+  },
+  render: Default.render
+};
+
+export const WithAddedState: Story = {
+  args: {
+    labels: Default.args?.labels,
+    resource: {
+      contactAccessRight: {
+        ...Default.args?.resource?.contactAccessRight
+      } as ContactAccessRightResource,
+      state: 'added',
+      stateHistory: []
+    }
+  },
+  render: Default.render
+};
+
+export const WithRemovedState: Story = {
+  args: {
+    labels: Default.args?.labels,
+    resource: {
+      contactAccessRight: {
+        ...Default.args?.resource?.contactAccessRight
+      } as ContactAccessRightResource,
+      state: 'removed',
+      stateHistory: []
+    }
+  },
+  render: Default.render
+};
+
+export const AsLoadingState: Story = {
+  args: {},
+  render: () => <ContactAccessRightsListItemSkeleton />
+};

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

@@ -0,0 +1,118 @@
+import { ReactElement, useMemo } from 'react';
+
+import RotateRightIcon from '@mui/icons-material/RotateRight';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import { Chip as MuiChip } from '@mui/material';
+
+import { IconButton } from '../../../Button';
+import { List } from '../../../List';
+import {
+  ContactAccessRightState,
+  ContactAccessRightStateResource,
+  isContactResource
+} from '../AccessRights.resource';
+import { useAccessRightsForm } from '../useAccessRightsForm';
+import { RoleInputSelect } from '../common/RoleInputSelect';
+import { GroupLabel } from '../common/GroupLabel';
+
+import { useStyles } from './ContactAccessRightsList.styles';
+
+export type ContactAccessRightsListItemProps = {
+  hasAvatar?: boolean;
+  labels: {
+    group: string;
+    state: Record<Exclude<ContactAccessRightState, 'unchanged'>, string>;
+  };
+  resource: ContactAccessRightStateResource;
+};
+
+const ContactAccessRightsListItem = ({
+  labels,
+  resource: { contactAccessRight, state },
+  hasAvatar = true
+}: ContactAccessRightsListItemProps): ReactElement => {
+  const { classes } = useStyles();
+  const { updateContactAccessRight, removeContactAccessRight } =
+    useAccessRightsForm();
+
+  const isRemoved = useMemo(() => state === 'removed', [state]);
+
+  const updateRole = (e): void => {
+    updateContactAccessRight({
+      ...contactAccessRight,
+      role: e.target.value
+    });
+  };
+  const toggleRemoved = (): void => {
+    removeContactAccessRight(contactAccessRight, isRemoved);
+  };
+
+  const getNameInitials = (name: string): string =>
+    name
+      .split(' ')
+      .map((n) => n.charAt(0).toUpperCase())
+      .slice(0, 2)
+      .join('');
+
+  return (
+    <List.Item
+      action={
+        <IconButton
+          data-testid={isRemoved ? 'restore_user' : 'remove_user'}
+          icon={isRemoved ? <RotateRightIcon /> : <DeleteOutlineIcon />}
+          size="small"
+          variant="primary"
+          onClick={toggleRemoved}
+        />
+      }
+      className={classes.contactAccessRightsListItem}
+      data-is-removed={isRemoved}
+      data-state={state}
+      key={contactAccessRight.contact?.id}
+    >
+      <span>
+        {hasAvatar && (
+          <List.Item.Avatar>
+            {getNameInitials(contactAccessRight.contact?.name || '')}
+          </List.Item.Avatar>
+        )}
+        <List.Item.Text
+          primaryText={
+            contactAccessRight.contact && (
+              <>
+                {contactAccessRight.contact.name}{' '}
+                {!isContactResource(contactAccessRight.contact) && (
+                  <GroupLabel label={labels.group} />
+                )}
+              </>
+            )
+          }
+          secondaryText={
+            isContactResource(contactAccessRight.contact) &&
+            contactAccessRight.contact?.email
+              ? contactAccessRight.contact?.email
+              : undefined
+          }
+        />
+      </span>
+
+      {state !== 'unchanged' && (
+        <MuiChip
+          data-state={state}
+          label={labels.state[state]}
+          size="small"
+          variant="outlined"
+        />
+      )}
+      <RoleInputSelect
+        disabled={isRemoved}
+        id={`role-${contactAccessRight.contact?.id}`}
+        name={`role-${contactAccessRight.contact?.id}`}
+        value={contactAccessRight.role}
+        onChange={updateRole}
+      />
+    </List.Item>
+  );
+};
+
+export { ContactAccessRightsListItem };

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

@@ -0,0 +1,26 @@
+import { ReactElement } from 'react';
+
+import { List } from '../../../List';
+
+import { useStyles } from './ContactAccessRightsList.styles';
+
+export type ContactAccessRightsListItemSkeletonProps = {
+  hasAvatar?: boolean;
+};
+
+const ContactAccessRightsListItemSkeleton = ({
+  hasAvatar = true
+}: ContactAccessRightsListItemSkeletonProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <List.Item className={classes.contactAccessRightsListItem}>
+      <span>
+        {hasAvatar && <List.Item.Avatar.Skeleton />}
+        <List.Item.Text.Skeleton secondaryText />
+      </span>
+    </List.Item>
+  );
+};
+
+export { ContactAccessRightsListItemSkeleton };

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

@@ -0,0 +1,28 @@
+import { ReactElement } from 'react';
+
+import { List } from '../../../List';
+
+import { useStyles } from './ContactAccessRightsList.styles';
+import { ContactAccessRightsListItemSkeleton } from './ContactAccessRightsListItemSkeleton';
+
+export type ContactAccessRightsListSkeletonProps = {
+  length?: number;
+};
+
+const ContactAccessRightsListSkeleton = ({
+  length = 3
+}: ContactAccessRightsListSkeletonProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <div className={classes.contactAccessRightsList}>
+      <List>
+        {[...Array(length).keys()].map((key) => (
+          <ContactAccessRightsListItemSkeleton key={key} />
+        ))}
+      </List>
+    </div>
+  );
+};
+
+export { ContactAccessRightsListSkeleton };

package/src/components/Form/AccessRights/Stats/AccessRightsStats.styles.ts

@@ -0,0 +1,18 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  accessRightsStats: {
+    '& > span:not(:last-child)::after': {
+      content: '", "'
+    },
+    alignSelf: 'flex-end',
+    color: theme.palette.text.secondary,
+    fontSize: '0.75rem',
+    height: '1.5rem',
+    lineHeight: '1.5rem',
+
+    padding: theme.spacing(1, 0)
+  }
+}));
+
+export { useStyles };

package/src/components/Form/AccessRights/Stats/AccessRightsStats.tsx

@@ -0,0 +1,41 @@
+import { ReactElement, useMemo } from 'react';
+
+import { useAccessRightsForm } from '../useAccessRightsForm';
+import { ContactAccessRightState } from '../AccessRights.resource';
+
+import { useStyles } from './AccessRightsStats.styles';
+
+export type AccessRightsStatsProps = {
+  labels: Record<Exclude<ContactAccessRightState, 'unchanged'>, string>;
+};
+
+const AccessRightsStats = ({
+  labels
+}: AccessRightsStatsProps): ReactElement => {
+  const { classes } = useStyles();
+
+  const { stats } = useAccessRightsForm();
+
+  const statsElements = useMemo(() => {
+    const elements: Array<ReactElement> = [];
+
+    ['added', 'updated', 'removed'].forEach((state) => {
+      if (stats?.[state] > 0)
+        elements.push(
+          <span key={state}>
+            <strong>{stats[state]}</strong> {labels[state]}
+          </span>
+        );
+    });
+
+    return elements;
+  }, [stats]);
+
+  return (
+    <div className={classes.accessRightsStats}>
+      {statsElements.length !== 0 && statsElements.map((el) => el)}
+    </div>
+  );
+};
+
+export { AccessRightsStats };