@centreon/ui 24.4.19 → 24.4.21

package/src/components/DataTable/Item/DataTableItem.stories.tsx

@@ -1,25 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { DataTableItem } from './DataTableItem';
-
-const meta: Meta<typeof DataTableItem> = {
-  component: DataTableItem
-};
-
-export default meta;
-type Story = StoryObj<typeof DataTableItem>;
-
-export const Default: Story = {
-  args: {
-    description: 'DataTable item description',
-    title: 'DataTable item'
-  }
-};
-
-export const WithActions: Story = {
-  args: {
-    ...Default.args,
-    hasActions: true,
-    hasCardAction: true
-  }
-};

package/src/components/DataTable/Item/DataTableItem.styles.ts

@@ -1,33 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  dataTableItem: {
-    '& .MuiCardActionArea-root': {
-      alignItems: 'flex-start',
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      justifyContent: 'space-between'
-    },
-    '& .MuiCardActions-root': {
-      '& > span': {
-        display: 'flex',
-        gap: theme.spacing(1)
-      },
-      display: 'flex',
-
-      justifyContent: 'space-between'
-    },
-    borderRadius: theme.shape.borderRadius,
-    display: 'flex',
-    flexDirection: 'column',
-    height: '186px',
-    p: {
-      color: theme.palette.text.secondary,
-      letterSpacing: '0',
-      margin: '0'
-    }
-  }
-}));
-
-export { useStyles };

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -1,123 +0,0 @@
-import React, { forwardRef, ReactElement, RefObject, useMemo } from 'react';
-
-import {
-  Card as MuiCard,
-  CardActionArea as MuiCardActionArea,
-  CardActions as MuiCardActions,
-  CardContent as MuiCardContent,
-  Typography as MuiTypography
-} from '@mui/material';
-import {
-  Delete as DeleteIcon,
-  Settings as SettingsIcon,
-  Share as ShareIcon
-} from '@mui/icons-material';
-
-import { IconButton } from '../../Button';
-import { ConfirmationTooltip } from '../../Tooltip/ConfirmationTooltip';
-
-import { useStyles } from './DataTableItem.styles';
-
-export interface DataTableItemProps {
-  description?: string;
-  hasActions?: boolean;
-  hasCardAction?: boolean;
-  labelsDelete: {
-    cancel: string;
-    confirm: {
-      label: string;
-      secondaryLabel?: string;
-    };
-  };
-  onClick?: () => void;
-  onDelete?: () => void;
-  onEdit?: () => void;
-  onEditAccessRights?: () => void;
-  title: string;
-}
-
-const DataTableItem = forwardRef(
-  (
-    {
-      title,
-      description,
-      hasCardAction = false,
-      hasActions = false,
-      onClick,
-      onEdit,
-      onDelete,
-      onEditAccessRights,
-      labelsDelete
-    }: DataTableItemProps,
-    ref
-  ): ReactElement => {
-    const { classes } = useStyles();
-
-    const ActionArea = useMemo(
-      () => (hasCardAction ? MuiCardActionArea : React.Fragment),
-      [hasCardAction]
-    );
-
-    return (
-      <MuiCard
-        className={classes.dataTableItem}
-        data-item-title={title}
-        ref={ref as RefObject<HTMLDivElement>}
-        variant="outlined"
-      >
-        <ActionArea aria-label="view" onClick={() => onClick?.()}>
-          <MuiCardContent>
-            <MuiTypography fontWeight={500} variant="h5">
-              {title}
-            </MuiTypography>
-            {description && <MuiTypography>{description}</MuiTypography>}
-          </MuiCardContent>
-        </ActionArea>
-        {hasActions && (
-          <MuiCardActions>
-            <span>
-              {onDelete && (
-                <ConfirmationTooltip
-                  confirmVariant="error"
-                  labels={labelsDelete}
-                  onConfirm={onDelete}
-                >
-                  {(openTooltip) => (
-                    <IconButton
-                      aria-label="delete"
-                      data-testid="delete"
-                      icon={<DeleteIcon />}
-                      size="small"
-                      variant="ghost"
-                      onClick={openTooltip}
-                    />
-                  )}
-                </ConfirmationTooltip>
-              )}
-            </span>
-            <span>
-              <IconButton
-                aria-label="edit access rights"
-                data-testid="edit-access-rights"
-                icon={<ShareIcon />}
-                size="small"
-                variant="primary"
-                onClick={() => onEditAccessRights?.()}
-              />
-              <IconButton
-                aria-label="edit"
-                data-testid="edit"
-                icon={<SettingsIcon />}
-                size="small"
-                variant="primary"
-                onClick={() => onEdit?.()}
-              />
-            </span>
-          </MuiCardActions>
-        )}
-      </MuiCard>
-    );
-  }
-);
-
-export { DataTableItem };

package/src/components/DataTable/Item/DataTableItemSkeleton.tsx

@@ -1,13 +0,0 @@
-import { ReactElement } from 'react';
-
-import { LoadingSkeleton } from '../../..';
-
-import { useStyles } from './DataTableItem.styles';
-
-const DataTableItemSkeleton = (): ReactElement => {
-  const { classes } = useStyles();
-
-  return <LoadingSkeleton className={classes.dataTableItem} />;
-};
-
-export { DataTableItemSkeleton };

package/src/components/DataTable/index.ts

@@ -1,10 +0,0 @@
-import { DataTable as DataTableRoot } from './DataTable';
-import { DataTableItem } from './Item/DataTableItem';
-import { DataTableItemSkeleton } from './Item/DataTableItemSkeleton';
-import { DataTableEmptyState } from './EmptyState/DataTableEmptyState';
-
-export const DataTable = Object.assign(DataTableRoot, {
-  EmptyState: DataTableEmptyState,
-  Item: DataTableItem,
-  ItemSkeleton: DataTableItemSkeleton
-});

package/src/components/Form/AccessRights/AccessRights.resource.ts

@@ -1,45 +0,0 @@
-export type ContactAccessRightState =
-  | 'added'
-  | 'updated'
-  | 'removed'
-  | 'unchanged';
-
-export type ContactAccessRightStateResource = {
-  contactAccessRight: ContactAccessRightResource;
-  state: ContactAccessRightState;
-  stateHistory: Array<ContactAccessRightState>;
-};
-
-export type ContactAccessRightResource = {
-  contact: ContactResource | ContactGroupResource | null;
-  role: RoleResource['role'];
-};
-
-export type ContactResource = {
-  email?: string;
-  id?: number | string;
-  name: string;
-  type: 'contact';
-};
-
-export const isContactResource = (
-  resource: ContactResource | ContactGroupResource | null
-): resource is ContactResource => {
-  return resource?.type === 'contact';
-};
-
-export type ContactGroupResource = {
-  id?: number | string;
-  name: string;
-  type: 'contact_group';
-};
-
-export const isContactGroupResource = (
-  resource: ContactResource | ContactGroupResource | null
-): resource is ContactResource => {
-  return resource?.type === 'contact_group';
-};
-
-export type RoleResource = {
-  role: 'viewer' | 'editor' | string;
-};

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

@@ -1,59 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { AccessRightsForm } from './AccessRightsForm';
-import { Default as DefaultContactAccessRightsListStory } from './List/ContactAccessRightsList.stories';
-import { Default as DefaultContactAccessRightInputStory } from './Input/ContactAccessRightInput.stories';
-import { ContactAccessRightsListProps } from './List/ContactAccessRightsList';
-import { ContactAccessRightInputProps } from './Input/ContactAccessRightInput';
-import {
-  contactAccessRightsMock,
-  contactsAndGroupsMock
-} from './__fixtures__/contactAccessRight.mock';
-
-const meta: Meta<typeof AccessRightsForm> = {
-  component: AccessRightsForm
-};
-
-export default meta;
-type Story = StoryObj<typeof AccessRightsForm>;
-
-export const Default: Story = {
-  args: {
-    initialValues: contactAccessRightsMock(12),
-    labels: {
-      actions: {
-        cancel: 'Cancel',
-        copyLink: 'Copy link',
-        copyLinkMessages: {
-          error: 'Unable to copy link',
-          success: 'Link copied'
-        },
-        submit: 'Update'
-      },
-      input: {
-        ...DefaultContactAccessRightInputStory.args?.labels
-      } as ContactAccessRightInputProps['labels'],
-      list: {
-        ...DefaultContactAccessRightsListStory.args?.labels
-      } as ContactAccessRightsListProps['labels'],
-      stats: {
-        added: 'added',
-        removed: 'removed',
-        updated: 'updated'
-      }
-    },
-    options: {
-      contacts: contactsAndGroupsMock(25),
-      roles: [{ role: 'viewer' }, { role: 'editor' }]
-    },
-    resourceLink: 'https://app.centreon.com/resource/1'
-  }
-};
-
-export const AsEmptyState: Story = {
-  args: {
-    labels: Default.args?.labels,
-    options: Default.args?.options,
-    resourceLink: Default.args?.resourceLink
-  }
-};

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

@@ -1,21 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  accessRightsForm: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(6),
-
-    maxWidth: '520px',
-    paddingTop: theme.spacing(3),
-
-    width: '100%'
-  },
-  accessRightsFormList: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1)
-  }
-}));
-
-export { useStyles };

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

@@ -1,67 +0,0 @@
-import { ReactElement } from 'react';
-
-import { useStyles } from './AccessRightsForm.styles';
-import {
-  AccessRightsFormProvider,
-  AccessRightsFormProviderProps
-} from './useAccessRightsForm';
-import {
-  ContactAccessRightInput,
-  ContactAccessRightInputProps
-} from './Input/ContactAccessRightInput';
-import {
-  ContactAccessRightsList,
-  ContactAccessRightsListProps
-} from './List/ContactAccessRightsList';
-import {
-  AccessRightsFormActions,
-  AccessRightsFormActionsProps
-} from './AccessRightsFormActions';
-import {
-  AccessRightsStats,
-  AccessRightsStatsProps
-} from './Stats/AccessRightsStats';
-
-export type AccessRightsFormProps = {
-  labels: AccessRightsFormLabels;
-  onCancel?: AccessRightsFormActionsProps['onCancel'];
-  resourceLink: string;
-} & Pick<
-  AccessRightsFormProviderProps,
-  'initialValues' | 'onSubmit' | 'options' | 'loadingStatus'
->;
-
-export type AccessRightsFormLabels = {
-  actions: AccessRightsFormActionsProps['labels'];
-  input: ContactAccessRightInputProps['labels'];
-  list: ContactAccessRightsListProps['labels'];
-  stats: AccessRightsStatsProps['labels'];
-};
-
-const AccessRightsForm = ({
-  labels,
-  onCancel,
-  resourceLink,
-  ...providerProps
-}: AccessRightsFormProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <AccessRightsFormProvider {...providerProps}>
-      <div className={classes.accessRightsForm}>
-        <ContactAccessRightInput labels={labels.input} />
-        <span className={classes.accessRightsFormList}>
-          <ContactAccessRightsList labels={labels.list} />
-          <AccessRightsStats labels={labels.stats} />
-        </span>
-        <AccessRightsFormActions
-          labels={labels.actions}
-          resourceLink={resourceLink}
-          onCancel={onCancel}
-        />
-      </div>
-    </AccessRightsFormProvider>
-  );
-};
-
-export { AccessRightsForm };

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