@centreon/ui 24.4.13 → 24.4.14

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

@@ -1,80 +0,0 @@
-import { ReactElement } from 'react';
-
-import { Link as LinkIcon } from '@mui/icons-material';
-
-import { Button } from '../../Button';
-import { useStyles } from '../Form.styles';
-import { useCopyToClipboard } from '../../../utils';
-
-import { useAccessRightsForm } from './useAccessRightsForm';
-
-export type AccessRightsFormActionsProps = {
-  labels: AccessRightsFormActionsLabels;
-  onCancel?: () => void;
-  resourceLink: string;
-};
-
-type AccessRightsFormActionsLabels = {
-  cancel: string;
-  copyLink: string;
-  copyLinkMessages: {
-    error: string;
-    success: string;
-  };
-  submit: string;
-};
-
-const AccessRightsFormActions = ({
-  labels,
-  onCancel,
-  resourceLink
-}: AccessRightsFormActionsProps): ReactElement => {
-  const { classes } = useStyles();
-  const { isDirty, submit } = useAccessRightsForm();
-  const { copy } = useCopyToClipboard({
-    errorMessage: labels.copyLinkMessages.error,
-    successMessage: labels.copyLinkMessages.success
-  });
-
-  return (
-    <div className={classes.actions}>
-      <span>
-        <Button
-          aria-label={labels.copyLink}
-          data-testid="copy-link"
-          icon={<LinkIcon />}
-          iconVariant="start"
-          size="small"
-          variant="ghost"
-          onClick={() => copy(resourceLink)}
-        >
-          {labels.copyLink}
-        </Button>
-      </span>
-      <span>
-        <Button
-          aria-label={labels.cancel}
-          data-testid="cancel"
-          size="medium"
-          variant="secondary"
-          onClick={() => onCancel?.()}
-        >
-          {labels.cancel}
-        </Button>
-        <Button
-          aria-label={labels.submit}
-          data-testid="submit"
-          disabled={!isDirty}
-          size="medium"
-          type="submit"
-          variant="primary"
-          onClick={submit}
-        >
-          {labels.submit}
-        </Button>
-      </span>
-    </div>
-  );
-};
-
-export { AccessRightsFormActions };

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

@@ -1,31 +0,0 @@
-import { ReactElement } from 'react';
-
-import { useFormikContext } from 'formik';
-
-import { Add as AddIcon } from '@mui/icons-material';
-
-import { ContactAccessRightResource } from '../AccessRights.resource';
-import { IconButton } from '../../../Button';
-
-type AddActionProps = {
-  label?: string;
-};
-
-const AddAction = ({ label }: AddActionProps): ReactElement => {
-  const { dirty, isValid, submitForm } =
-    useFormikContext<Partial<ContactAccessRightResource>>();
-
-  return (
-    <IconButton
-      aria-label={label}
-      data-testid="add"
-      disabled={!dirty || !isValid}
-      icon={<AddIcon />}
-      size="medium"
-      variant="primary"
-      onClick={submitForm}
-    />
-  );
-};
-
-export { AddAction };

package/src/components/Form/AccessRights/Input/ContactAccessRightInput.stories.tsx

@@ -1,54 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { Meta, StoryObj } from '@storybook/react';
-
-import {
-  AccessRightsFormProvider,
-  AccessRightsFormProviderProps
-} from '../useAccessRightsForm';
-import { contactsAndGroupsMock } from '../__fixtures__/contactAccessRight.mock';
-
-import { ContactAccessRightInput } from './ContactAccessRightInput';
-
-const meta: Meta<typeof ContactAccessRightInput> = {
-  component: ContactAccessRightInput,
-  title: 'components/Form/AccessRights/ContactAccessRightInput'
-};
-
-export default meta;
-type Story = StoryObj<typeof ContactAccessRightInput>;
-
-const Wrapper = ({ children }: { children: ReactNode }): ReactElement => {
-  const options: AccessRightsFormProviderProps['options'] = {
-    contacts: contactsAndGroupsMock(25),
-    roles: [{ role: 'viewer' }, { role: 'editor' }]
-  };
-
-  return (
-    <AccessRightsFormProvider options={options}>
-      {children}
-    </AccessRightsFormProvider>
-  );
-};
-
-export const Default: Story = {
-  args: {
-    labels: {
-      actions: {
-        add: 'Add'
-      },
-      fields: {
-        contact: {
-          group: 'group',
-          noOptionsText: 'No contacts found',
-          placeholder: 'Add Contact...'
-        }
-      }
-    }
-  },
-  render: (args) => (
-    <Wrapper>
-      <ContactAccessRightInput labels={args.labels} />
-    </Wrapper>
-  )
-};

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

@@ -1,72 +0,0 @@
-import { ReactElement } from 'react';
-
-import { FormikProvider, useFormik } from 'formik';
-import { mixed, object } from 'yup';
-
-import { useAccessRightsForm } from '../useAccessRightsForm';
-import { ContactAccessRightResource } from '../AccessRights.resource';
-
-import { useStyles } from './ContactAccessRightsInput.styles';
-import { ContactInputField, ContactInputFieldProps } from './ContactInputField';
-import { AddAction } from './AddAction';
-import { RoleInputField } from './RoleInputField';
-
-export type ContactAccessRightInputProps = {
-  labels: ContactAccessRightInputLabels;
-  onAddContactAccessRight?: (value: ContactAccessRightResource) => void;
-};
-
-type ContactAccessRightInputLabels = {
-  actions?: {
-    add: string;
-  };
-  fields: {
-    contact: ContactInputFieldProps['labels'];
-    role?: {
-      label: string;
-    };
-  };
-};
-
-const ContactAccessRightInput = ({
-  labels,
-  onAddContactAccessRight
-}: ContactAccessRightInputProps): ReactElement => {
-  const { classes } = useStyles();
-  const { addContactAccessRight, options } = useAccessRightsForm();
-
-  const formik = useFormik<ContactAccessRightResource>({
-    initialValues: { contact: null, role: 'viewer' },
-    onSubmit: (values, { resetForm }) => {
-      addContactAccessRight(values);
-      onAddContactAccessRight?.(values);
-      resetForm();
-    },
-    validationSchema: object({
-      contact: mixed()
-        .test(
-          'is-available-contact',
-          (d) => `${d.path} is not a contact available from the list`,
-          (value) => !!options.contacts?.find((c) => c.id === value?.id)
-        )
-        .required(),
-      role: mixed().oneOf(['viewer', 'editor']).required()
-    })
-  });
-
-  return (
-    <div className={classes.contactAccessRightsInput}>
-      <FormikProvider value={formik}>
-        <ContactInputField
-          id="contact"
-          labels={labels.fields.contact}
-          name="contact"
-        />
-        <RoleInputField id="role" name="role" {...labels?.fields?.role} />
-        <AddAction />
-      </FormikProvider>
-    </div>
-  );
-};
-
-export { ContactAccessRightInput };

package/src/components/Form/AccessRights/Input/ContactAccessRightsInput.styles.ts

@@ -1,22 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  contactAccessRightsInput: {
-    alignItems: 'center',
-    display: 'flex',
-    flexGrow: 1,
-    gap: theme.spacing(2),
-    maxWidth: '520px',
-
-    width: '100%'
-  },
-  contactInput: {
-    '& .MuiOutlinedInput-root, & .MuiInputBase-input.MuiOutlinedInput-input': {
-      height: 'unset',
-      lineHeight: '1.5'
-    },
-    flexGrow: 1
-  }
-}));
-
-export { useStyles };

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

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

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

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