@centreon/ui 23.10.39 → 23.10.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.39",
+  "version": "23.10.40",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -48,6 +48,7 @@
   "devDependencies": {
     "@cypress/react": "^7.0.2",
     "@cypress/webpack-dev-server": "^3.2.3",
+    "@faker-js/faker": "^8.0.2",
     "@mdx-js/react": "^2.1.4",
     "@simonsmith/cypress-image-snapshot": "^6.1.0",
     "@storybook/addon-a11y": "^7.0.9",

package/src/ThemeProvider/index.tsx

@@ -148,30 +148,6 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     MuiCssBaseline: {
       styleOverrides: (theme) => `
-        ::-webkit-scrollbar {
-          height: ${theme.spacing(1)};
-          width: ${theme.spacing(1)};
-          background-color: ${theme.palette.background.default};
-        }
-        ::-webkit-scrollbar-thumb {
-          background-color: ${
-            equals(mode, 'dark')
-              ? theme.palette.divider
-              : theme.palette.text.disabled
-          };
-          border-radius: ${theme.spacing(0.5)};
-        }
-        ::-webkit-scrollbar-thumb:hover {
-          background-color: ${theme.palette.primary.main};
-        }
-        * {
-          scrollbar-color: ${
-            equals(mode, 'dark')
-              ? theme.palette.divider
-              : theme.palette.text.disabled
-          } ${theme.palette.background.default};
-          scrollbar-width: thin;
-        }
         html {
           margin: 0;
           padding: 0;

package/src/ThemeProvider/palettes.ts

@@ -18,6 +18,7 @@ declare module '@mui/material/styles/createPalette' {
 declare module '@mui/material/styles' {
   interface Palette {
     background: TypeBackground;
+    chip: TypeChip;
     header: TypeHeader;
     layout: TypeLayout;
     menu: TypeMenu;
@@ -36,6 +37,7 @@ declare module '@mui/material/styles' {
     warning: string;
   }
   interface PaletteOptions {
+    chip: TypeChip;
     header: TypeHeader;
     layout: TypeLayout;
     menu: TypeMenu;
@@ -113,6 +115,16 @@ declare module '@mui/material/styles' {
       };
     };
   }
+
+  interface TypeChip {
+    color: {
+      error: string;
+      info: string;
+      neutral: string;
+      success: string;
+      warning: string;
+    };
+  }
 }
 
 declare module '@mui/material/Button' {
@@ -152,6 +164,15 @@ export const lightPalette: PaletteOptions = {
     paper: '#FFFFFF',
     tooltip: '#434E5B'
   },
+  chip: {
+    color: {
+      error: '#FF6666',
+      info: '#1588D1',
+      neutral: BaseTokens.colorGrey300,
+      success: '#88B922',
+      warning: '#FD9B27'
+    }
+  },
   divider: '#E3E3E3',
   error: {
     contrastText: '#000',
@@ -193,7 +214,7 @@ export const lightPalette: PaletteOptions = {
       background: {
         active: BaseTokens.colorBlue50,
         default: 'transparent',
-        hover: BaseTokens.colorGrey50
+        hover: BaseTokens.colorGrey100
       },
       color: {
         active: BaseTokens.colorBlue400,
@@ -208,7 +229,7 @@ export const lightPalette: PaletteOptions = {
       background: {
         active: BaseTokens.colorBlue50,
         default: 'transparent',
-        hover: BaseTokens.colorGrey50
+        hover: BaseTokens.colorGrey100
       },
       color: {
         active: BaseTokens.colorBlue400,
@@ -282,6 +303,15 @@ export const darkPalette: PaletteOptions = {
     paper: '#212121',
     tooltip: '#AAB4C0'
   },
+  chip: {
+    color: {
+      error: '#D60101',
+      info: '#1CA9F4',
+      neutral: BaseTokens.colorGrey700,
+      success: '#5F8118',
+      warning: '#C55400'
+    }
+  },
   divider: '#666666',
   error: {
     contrastText: '#fff',
@@ -321,9 +351,9 @@ export const darkPalette: PaletteOptions = {
     background: BaseTokens.colorGrey950,
     button: {
       background: {
-        active: BaseTokens.colorBlue950,
+        active: BaseTokens.colorBlue900,
         default: 'transparent',
-        hover: BaseTokens.colorGrey950
+        hover: BaseTokens.colorGrey900
       },
       color: {
         active: BaseTokens.colorBlue600,
@@ -336,9 +366,9 @@ export const darkPalette: PaletteOptions = {
     },
     item: {
       background: {
-        active: BaseTokens.colorBlue950,
+        active: BaseTokens.colorBlue900,
         default: 'transparent',
-        hover: BaseTokens.colorGrey950
+        hover: BaseTokens.colorGrey900
       },
       color: {
         active: BaseTokens.colorBlue400,

package/src/api/useMutationQuery/index.ts

@@ -26,7 +26,7 @@ export type UseMutationQueryProps<T> = {
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
   fetchHeaders?: HeadersInit;
-  getEndpoint: (payload) => string;
+  getEndpoint: (_meta?: Record<string, unknown> | unknown) => string;
   httpCodesBypassErrorSnackbar?: Array<number>;
   method: Method;
 } & Omit<UseMutationOptions<T>, 'mutationFn'>;
@@ -45,17 +45,22 @@ const useMutationQuery = <T extends object>({
   defaultFailureMessage,
   fetchHeaders,
   httpCodesBypassErrorSnackbar = [],
-  method
+  method,
+  onMutate,
+  onError
 }: UseMutationQueryProps<T>): UseMutationQueryState<T> => {
   const { showErrorMessage } = useSnackbar();
 
   const queryData = useMutation<T | ResponseError>(
-    (payload): Promise<T | ResponseError> =>
-      customFetch<T>({
+    // @ts-expect-error useMutation / useMutationQuery is not typed correctly
+    (_payload: Record<string, unknown> | null): Promise<T | ResponseError> => {
+      const { _meta, ...payload } = _payload || {};
+
+      return customFetch<T>({
         catchError,
         decoder,
         defaultFailureMessage,
-        endpoint: getEndpoint(payload),
+        endpoint: getEndpoint(_meta),
         headers: new Headers({
           'Content-Type': 'application/x-www-form-urlencoded',
           ...fetchHeaders
@@ -63,7 +68,12 @@ const useMutationQuery = <T extends object>({
         isMutation: true,
         method,
         payload
-      })
+      });
+    },
+    {
+      onError,
+      onMutate
+    }
   );
 
   const manageError = (): void => {

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

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

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

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

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

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

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

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

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

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