@centreon/ui 24.4.24 → 24.4.26

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

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

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

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

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

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

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

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

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

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

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

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

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

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