@centreon/ui 24.4.21 → 24.4.22

package/src/components/Form/AccessRightsV2/AccessRights.stories.tsx

@@ -0,0 +1,119 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { rest } from 'msw';
+
+import { SnackbarProvider } from '../../..';
+
+import AccessRightsForm from './AccessRights';
+import {
+  accessRightsWithStates,
+  buildResult,
+  defaultAccessRights,
+  emptyAccessRights,
+  labels,
+  roles
+} from './storiesData';
+
+const meta: Meta<typeof AccessRightsForm> = {
+  component: AccessRightsForm,
+  parameters: {
+    msw: {
+      handlers: [
+        rest.get('api/latest/contact?**', (req, res, ctx) => {
+          return res(ctx.json(buildResult(false)));
+        }),
+        rest.get('api/latest/contactGroup?**', (req, res, ctx) => {
+          return res(ctx.json(buildResult(true)));
+        })
+      ]
+    }
+  }
+};
+
+const Template = (args): JSX.Element => (
+  <SnackbarProvider>
+    <AccessRightsForm {...args} />
+  </SnackbarProvider>
+);
+
+export default meta;
+type Story = StoryObj<typeof AccessRightsForm>;
+
+export const Default: Story = {
+  args: {
+    cancel: () => undefined,
+    endpoints: {
+      contact: '/contact',
+      contactGroup: '/contactGroup'
+    },
+    initialValues: defaultAccessRights,
+    labels,
+    link: 'link',
+    roles,
+    submit: () => undefined
+  },
+  render: Template
+};
+
+export const AccessRightsWithStates: Story = {
+  args: {
+    cancel: () => undefined,
+    endpoints: {
+      contact: '/contact',
+      contactGroup: '/contactGroup'
+    },
+    initialValues: accessRightsWithStates,
+    labels,
+    link: 'link',
+    roles,
+    submit: () => undefined
+  },
+  render: Template
+};
+
+export const withEmptyState: Story = {
+  args: {
+    cancel: () => undefined,
+    endpoints: {
+      contact: '/contact',
+      contactGroup: '/contactGroup'
+    },
+    initialValues: emptyAccessRights,
+    labels,
+    link: 'link',
+    roles,
+    submit: () => undefined
+  },
+  render: Template
+};
+
+export const withoutLink: Story = {
+  args: {
+    cancel: () => undefined,
+    endpoints: {
+      contact: '/contact',
+      contactGroup: '/contactGroup'
+    },
+    initialValues: defaultAccessRights,
+    labels,
+    roles,
+    submit: () => undefined
+  },
+  render: Template
+};
+
+export const loading: Story = {
+  args: {
+    cancel: () => undefined,
+    endpoints: {
+      contact: '/contact',
+      contactGroup: '/contactGroup'
+    },
+    initialValues: emptyAccessRights,
+    labels,
+    link: 'link',
+    loading: true,
+    roles,
+    submit: () => undefined
+  },
+  render: Template
+};

package/src/components/Form/AccessRightsV2/AccessRights.styles.ts

@@ -0,0 +1,10 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useAccessRightsStyles = makeStyles()((theme) => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(3),
+    maxWidth: '520px'
+  }
+}));

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

@@ -0,0 +1,60 @@
+import { SelectEntry } from '../../..';
+
+import { useAccessRightsStyles } from './AccessRights.styles';
+import Actions from './Actions/Actions';
+import List from './List/List';
+import ListSkeleton from './List/ListSkeleton';
+import Provider from './Provider';
+import ShareInput from './ShareInput/ShareInput';
+import Stats from './Stats/Stats';
+import { AccessRightInitialValues, Endpoints, Labels } from './models';
+import { useAccessRightsInitValues } from './useAccessRightsInitValues';
+
+interface Props {
+  cancel: ({ dirty, values }) => void;
+  endpoints: Endpoints;
+  initialValues: Array<AccessRightInitialValues>;
+  isSubmitting?: boolean;
+  labels: Labels;
+  link?: string;
+  loading?: boolean;
+  roles: Array<SelectEntry>;
+  submit: (values: Array<AccessRightInitialValues>) => Promise<void>;
+}
+
+export const AccessRights = ({
+  initialValues,
+  roles,
+  endpoints,
+  submit,
+  cancel,
+  link,
+  loading,
+  labels,
+  isSubmitting
+}: Props): JSX.Element => {
+  const { classes } = useAccessRightsStyles();
+  const clear = useAccessRightsInitValues({ initialValues });
+
+  return (
+    <div className={classes.container}>
+      <ShareInput endpoints={endpoints} labels={labels.add} roles={roles} />
+      {loading ? <ListSkeleton /> : <List labels={labels.list} roles={roles} />}
+      <Stats labels={labels.list} />
+      <Actions
+        cancel={cancel}
+        clear={clear}
+        isSubmitting={isSubmitting}
+        labels={labels.actions}
+        link={link}
+        submit={submit}
+      />
+    </div>
+  );
+};
+
+export default (props: Props): JSX.Element => (
+  <Provider>
+    <AccessRights {...props} />
+  </Provider>
+);

package/src/components/Form/AccessRightsV2/Actions/Actions.styles.ts

@@ -0,0 +1,14 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useActionsStyles = makeStyles()((theme) => ({
+  actions: {
+    backgroundColor: theme.palette.background.paper,
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
+  cancelAndSave: {
+    display: 'flex',
+    flex: 'row',
+    gap: theme.spacing(2)
+  }
+}));

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

@@ -0,0 +1,81 @@
+import { useTranslation } from 'react-i18next';
+
+import LinkIcon from '@mui/icons-material/Link';
+import { CircularProgress } from '@mui/material';
+
+import { Button } from '../../..';
+import { AccessRightInitialValues, Labels } from '../models';
+
+import { useActions } from './useActions';
+import { useActionsStyles } from './Actions.styles';
+
+interface Props {
+  cancel: ({ dirty, values }) => void;
+  clear: () => void;
+  isSubmitting?: boolean;
+  labels: Labels['actions'];
+  link?: string;
+  submit: (values: Array<AccessRightInitialValues>) => Promise<void>;
+}
+
+const Actions = ({
+  labels,
+  cancel,
+  submit,
+  link,
+  isSubmitting,
+  clear
+}: Props): JSX.Element => {
+  const { t } = useTranslation();
+  const { classes } = useActionsStyles();
+
+  const { dirty, copyLink, save, formattedValues } = useActions({
+    clear,
+    labels,
+    link,
+    submit
+  });
+
+  const onCancel = (): void => {
+    cancel({ dirty, values: formattedValues });
+  };
+
+  return (
+    <div className={classes.actions}>
+      {link ? (
+        <Button
+          aria-label={t(labels.copyLink)}
+          icon={<LinkIcon />}
+          iconVariant="start"
+          variant="ghost"
+          onClick={copyLink}
+        >
+          {t(labels.copyLink)}
+        </Button>
+      ) : (
+        <div />
+      )}
+      <div className={classes.cancelAndSave}>
+        <Button
+          aria-label={t(labels.cancel)}
+          variant="secondary"
+          onClick={onCancel}
+        >
+          {t(labels.cancel)}
+        </Button>
+        <Button
+          aria-label={t(labels.save)}
+          disabled={isSubmitting || !dirty}
+          icon={isSubmitting ? <CircularProgress size={24} /> : null}
+          iconVariant={isSubmitting ? 'start' : 'none'}
+          variant="primary"
+          onClick={save}
+        >
+          {t(labels.save)}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Actions;

package/src/components/Form/AccessRightsV2/Actions/useActions.ts

@@ -0,0 +1,79 @@
+import { useAtomValue } from 'jotai';
+import { equals, omit } from 'ramda';
+
+import { initialValuesAtom, valuesAtom } from '../atoms';
+import { AccessRight, AccessRightInitialValues, Labels } from '../models';
+import { useCopyToClipboard } from '../../../..';
+
+const formatValue = (accessRight: AccessRight): AccessRightInitialValues => {
+  return omit(['isAdded', 'isUpdated', 'isRemoved'], accessRight);
+};
+
+const formatValueForSubmition = (
+  accessRight: AccessRight
+): AccessRightInitialValues => {
+  return {
+    ...formatValue(accessRight),
+    id: Number((accessRight.id as string).split('_')[1])
+  };
+};
+
+interface Props {
+  clear: () => void;
+  labels: Labels['actions'];
+  link?: string;
+  submit: (values: Array<AccessRightInitialValues>) => Promise<void>;
+}
+
+interface UseActionsState {
+  copyLink: () => void;
+  dirty: boolean;
+  formattedValues: Array<AccessRightInitialValues>;
+  save: () => void;
+}
+
+export const useActions = ({
+  link,
+  labels,
+  submit,
+  clear
+}: Props): UseActionsState => {
+  const values = useAtomValue(valuesAtom);
+  const initialValues = useAtomValue(initialValuesAtom);
+
+  const { copy } = useCopyToClipboard({
+    errorMessage: labels.copyError,
+    successMessage: labels.copySuccess
+  });
+
+  const formattedValues = values
+    .filter(({ isRemoved }) => !isRemoved)
+    .map(formatValue);
+
+  const dirty = !equals(initialValues, formattedValues);
+
+  const copyLink = (): void => {
+    if (!link) {
+      return;
+    }
+    copy(link);
+  };
+
+  const save = (): void => {
+    submit(
+      values.filter(({ isRemoved }) => !isRemoved).map(formatValueForSubmition)
+    )?.then((isError) => {
+      if (isError) {
+        return;
+      }
+      clear();
+    });
+  };
+
+  return {
+    copyLink,
+    dirty,
+    formattedValues,
+    save
+  };
+};

package/src/components/Form/AccessRightsV2/List/Item.tsx

@@ -0,0 +1,90 @@
+import { useSetAtom } from 'jotai';
+
+import { Chip } from '@mui/material';
+
+import { AccessRight, Labels } from '../models';
+import { List } from '../../../List';
+import RoleSelectField from '../common/RoleSelectField';
+import { SelectEntry } from '../../../..';
+import { updateContactRoleDerivedAtom } from '../atoms';
+
+import { useItem } from './useItem';
+import { useListStyles } from './List.styles';
+import StateChip from './StateChip';
+import RemoveAccessRight from './RemoveAccessRight';
+
+interface Props extends AccessRight {
+  index: number;
+  labels: Labels['list'];
+  roles: Array<SelectEntry>;
+}
+
+const Item = ({
+  index,
+  id,
+  isAdded,
+  isContactGroup,
+  isRemoved,
+  isUpdated,
+  role,
+  name,
+  email,
+  labels,
+  roles
+}: Props): JSX.Element => {
+  const { classes } = useListStyles();
+  const { initials, groupLabel, getState } = useItem({
+    isAdded,
+    isContactGroup,
+    isRemoved,
+    isUpdated,
+    list: labels,
+    name
+  });
+  const updateContactRole = useSetAtom(updateContactRoleDerivedAtom);
+
+  const state = getState();
+
+  const changeRole = (newRole: string): void => {
+    updateContactRole({ id, index, newRole });
+  };
+
+  return (
+    <List.Item
+      action={
+        <>
+          {state && <StateChip {...state} />}
+          <RoleSelectField
+            disabled={isRemoved}
+            roles={roles}
+            testId={`role-${name}`}
+            value={role}
+            onChange={changeRole}
+          />
+          <RemoveAccessRight index={index} isRemoved={isRemoved} name={name} />
+        </>
+      }
+      className={classes.item}
+      data-isRemoved={isRemoved}
+    >
+      <List.Item.Avatar>{initials}</List.Item.Avatar>
+      <div className={classes.itemNameAndGroup}>
+        <List.Item.Text
+          className={classes.name}
+          primaryText={name}
+          secondaryText={email}
+        />
+        {groupLabel && (
+          <Chip
+            data-groupChip={name}
+            data-type="group-chip"
+            label={groupLabel}
+            size="small"
+          />
+        )}
+      </div>
+    </List.Item>
+  );
+};
+
+export default Item;

package/src/components/Form/AccessRightsV2/List/List.styles.tsx

@@ -0,0 +1,45 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useListStyles = makeStyles()((theme) => ({
+  item: {
+    '&[data-isRemoved="true"]': {
+      '& .MuiAvatar-root,.MuiListItemText-root,[data-type="group-chip"]': {
+        filter: 'opacity(0.5)'
+      }
+    }
+  },
+  itemNameAndGroup: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(3),
+    width: '100%'
+  },
+  list: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    maxHeight: '35vw',
+    overflowY: 'auto',
+    width: '100%'
+  },
+  name: {
+    flexGrow: 0,
+    maxWidth: '200px',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+  stateChip: {
+    '&[data-state="added"]': {
+      borderColor: theme.palette.success.main,
+      color: theme.palette.success.main
+    },
+    '&[data-state="removed"]': {
+      borderColor: theme.palette.error.main,
+      color: theme.palette.error.main
+    },
+    '&[data-state="updated"]': {
+      borderColor: theme.palette.info.main,
+      color: theme.palette.info.main
+    }
+  }
+}));

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

@@ -0,0 +1,52 @@
+import { useAtomValue } from 'jotai';
+import { useTranslation } from 'react-i18next';
+import { isEmpty } from 'ramda';
+
+import { Typography } from '@mui/material';
+
+import { valuesAtom } from '../atoms';
+import { List as UIList } from '../../../List';
+import { Labels } from '../models';
+import { SelectEntry, Subtitle } from '../../../..';
+
+import { useListStyles } from './List.styles';
+import Item from './Item';
+
+interface Props {
+  labels: Labels['list'];
+  roles: Array<SelectEntry>;
+}
+
+const List = ({ labels, roles }: Props): JSX.Element => {
+  const { t } = useTranslation();
+  const { classes } = useListStyles();
+  const values = useAtomValue(valuesAtom);
+
+  return (
+    <div>
+      <Subtitle>{t(labels.title)}</Subtitle>
+      <div className={classes.list}>
+        {isEmpty(values) ? (
+          <Typography sx={{ py: 2 }} textAlign="center">
+            {t(labels.empty)}
+          </Typography>
+        ) : (
+          <UIList>
+            {values.map(({ id, ...rest }, index) => (
+              <Item
+                id={id}
+                key={id}
+                labels={labels}
+                {...rest}
+                index={index}
+                roles={roles}
+              />
+            ))}
+          </UIList>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default List;

package/src/components/Form/AccessRightsV2/List/ListItemSkeleton.tsx

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+
+import { List } from '../../../List';
+
+import { useListStyles } from './List.styles';
+
+const ListItemSkeleton = (): ReactElement => {
+  const { classes } = useListStyles();
+
+  return (
+    <List.Item className={classes.item}>
+      <List.Item.Avatar.Skeleton />
+      <List.Item.Text.Skeleton secondaryText />
+    </List.Item>
+  );
+};
+
+export default ListItemSkeleton;

package/src/components/Form/AccessRightsV2/List/ListSkeleton.tsx

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+
+import { List } from '../../../List';
+
+import { useListStyles } from './List.styles';
+import ListItemSkeleton from './ListItemSkeleton';
+
+const ListSkeleton = (): ReactElement => {
+  const { classes } = useListStyles();
+
+  return (
+    <div className={classes.list}>
+      <List>
+        {[...Array(3).keys()].map((key) => (
+          <ListItemSkeleton key={key} />
+        ))}
+      </List>
+    </div>
+  );
+};
+
+export default ListSkeleton;

package/src/components/Form/AccessRightsV2/List/RemoveAccessRight.tsx

@@ -0,0 +1,38 @@
+import { useSetAtom } from 'jotai';
+
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import RotateLeftIcon from '@mui/icons-material/RotateLeft';
+
+import { IconButton } from '../../..';
+import { removeAccessRightDerivedAtom } from '../atoms';
+
+interface Props {
+  index: number;
+  isRemoved: boolean;
+  name: string;
+}
+
+const RemoveAccessRight = ({ index, isRemoved, name }: Props): JSX.Element => {
+  const removeAccessRight = useSetAtom(removeAccessRightDerivedAtom);
+
+  const remove = (): void => removeAccessRight({ index });
+  const recover = (): void => removeAccessRight({ index, recover: true });
+
+  const icon = isRemoved ? (
+    <RotateLeftIcon fontSize="small" />
+  ) : (
+    <DeleteOutlineIcon color="error" fontSize="small" />
+  );
+
+  return (
+    <IconButton
+      data-removed={isRemoved}
+      data-testid={`remove-${name}`}
+      icon={icon}
+      size="small"
+      onClick={isRemoved ? recover : remove}
+    />
+  );
+};
+
+export default RemoveAccessRight;

package/src/components/Form/AccessRightsV2/List/StateChip.tsx

@@ -0,0 +1,28 @@
+import { Chip } from '@mui/material';
+
+import { ItemState } from '../models';
+
+import { useListStyles } from './List.styles';
+
+interface Props {
+  label: string;
+  state: ItemState;
+}
+
+const StateChip = ({ label, state }: Props): JSX.Element => {
+  const { classes, cx } = useListStyles();
+
+  return (
+    <div className={cx(classes.state)}>
+      <Chip
+        className={classes.stateChip}
+        data-state={state}
+        label={label}
+        size="small"
+        variant="outlined"
+      />
+    </div>
+  );
+};
+
+export default StateChip;