@centreon/ui 23.10.43 → 23.10.44

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

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

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

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

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

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

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

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

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

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

package/src/components/Form/AccessRights/__fixtures__/contactAccessRight.mock.ts

@@ -1,52 +0,0 @@
-import { faker } from '@faker-js/faker';
-
-import {
-  ContactAccessRightResource,
-  ContactGroupResource,
-  ContactResource,
-  RoleResource
-} from '../AccessRights.resource';
-
-export const rolesMock = (): Array<RoleResource> => [
-  { role: 'viewer' },
-  { role: 'editor' }
-];
-
-export const contactMock = (): ContactResource => ({
-  email: faker.internet.email(),
-  id: faker.string.uuid(),
-  name: faker.person.fullName(),
-  type: 'contact'
-});
-
-export const contactsMock = (length: number): Array<ContactResource> =>
-  [...Array(length).keys()].map(contactMock);
-
-export const contactGroupMock = (): ContactGroupResource => ({
-  id: faker.string.uuid(),
-  name: faker.company.name(),
-  type: 'contact_group'
-});
-export const contactGroupsMock = (
-  length: number
-): Array<ContactGroupResource> =>
-  [...Array(length).keys()].map(contactGroupMock);
-
-export const contactsAndGroupsMock = (
-  length: number
-): Array<ContactResource | ContactGroupResource> =>
-  [...Array(length).keys()].map(
-    () =>
-      faker.helpers.maybe(contactGroupMock, { probability: 0.2 }) ??
-      contactMock()
-  );
-
-export const contactAccessRightsMock = (
-  length: number
-): Array<ContactAccessRightResource> =>
-  [...Array(length).keys()].map(() => ({
-    contact:
-      faker.helpers.maybe(contactGroupMock, { probability: 0.2 }) ??
-      contactMock(),
-    role: faker.helpers.arrayElement(rolesMock().map(({ role }) => role))
-  }));

package/src/components/Form/AccessRights/common/GroupLabel.styles.ts

@@ -1,18 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  groupLabel: {
-    backgroundColor: theme.palette.chip.color.neutral,
-    borderRadius: '0.1875rem',
-    color: theme.palette.primary.contrastText,
-    fontSize: '0.5625rem',
-    fontWeight: 500,
-    letterSpacing: '0.05rem',
-    marginLeft: theme.spacing(1),
-    padding: theme.spacing(0.125, 0.5),
-    textTransform: 'uppercase',
-    verticalAlign: 'middle'
-  }
-}));
-
-export { useStyles };

package/src/components/Form/AccessRights/common/GroupLabel.tsx

@@ -1,15 +0,0 @@
-import { ReactElement } from 'react';
-
-import { useStyles } from './GroupLabel.styles';
-
-export type GroupLabelProps = {
-  label: string;
-};
-
-const GroupLabel = ({ label }: GroupLabelProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return <span className={classes.groupLabel}>{label}</span>;
-};
-
-export { GroupLabel };