@centreon/ui 23.10.1-sync-dev-23-10-x-develop-oss.0 → 23.10.1-sync-release-34346.0

package/src/components/Form/AccessRightsV2/storiesData.ts

@@ -0,0 +1,221 @@
+import { faker } from '@faker-js/faker';
+
+import { Listing } from '../../../api/models';
+import { SelectEntry } from '../../..';
+
+import { AccessRightInitialValues, Labels } from './models';
+
+faker.seed(42);
+
+export const defaultAccessRights: Array<AccessRightInitialValues> = Array(10)
+  .fill(0)
+  .map((_, idx) => ({
+    email: faker.internet.email(),
+    id: idx,
+    isContactGroup: idx % 5 === 0,
+    name: faker.person.fullName(),
+    role: idx % 2 === 0 ? 'viewer' : 'editor'
+  }));
+
+export const simpleAccessRights: Array<AccessRightInitialValues> = Array(6)
+  .fill(0)
+  .map((_, idx) => ({
+    email: faker.internet.email(),
+    id: idx,
+    isContactGroup: idx % 5 === 0,
+    name: faker.person.fullName(),
+    role: idx % 2 === 0 ? 'viewer' : 'editor'
+  }));
+
+export const accessRightsWithStates = [
+  {
+    email: faker.internet.email(),
+    id: 1,
+    isAdded: false,
+    isContactGroup: true,
+    isRemoved: false,
+    isUpdated: false,
+    name: faker.person.fullName(),
+    role: 'viewer'
+  },
+  {
+    email: faker.internet.email(),
+    id: 2,
+    isAdded: true,
+    isContactGroup: true,
+    isRemoved: false,
+    isUpdated: false,
+    name: faker.person.fullName(),
+    role: 'editor'
+  },
+  {
+    email: faker.internet.email(),
+    id: 3,
+    isAdded: false,
+    isContactGroup: false,
+    isRemoved: false,
+    isUpdated: true,
+    name: faker.person.fullName(),
+    role: 'viewer'
+  },
+  {
+    email: faker.internet.email(),
+    id: 4,
+    isAdded: false,
+    isContactGroup: false,
+    isRemoved: true,
+    isUpdated: false,
+    name: faker.person.fullName(),
+    role: 'editor'
+  },
+  {
+    email: faker.internet.email(),
+    id: 5,
+    isAdded: false,
+    isContactGroup: true,
+    isRemoved: true,
+    isUpdated: true,
+    name: faker.person.fullName(),
+    role: 'viewer'
+  }
+];
+
+export const emptyAccessRights = [];
+
+const buildEntities = (from, isGroup): Array<SelectEntry> => {
+  return Array(10)
+    .fill(0)
+    .map((_, index) => ({
+      email: isGroup ? undefined : faker.internet.email(),
+      id: 1000 + index,
+      name: `Entity ${isGroup ? 'Group' : ''} ${from + index}`
+    }));
+};
+
+export const buildResult = (isGroup): Listing<SelectEntry> => ({
+  meta: {
+    limit: 10,
+    page: 1,
+    total: 10
+  },
+  result: buildEntities(10, isGroup)
+});
+
+export const labels: Labels = {
+  actions: {
+    cancel: 'Cancel',
+    copyError: 'Failed to copy',
+    copyLink: 'Copy link',
+    copySuccess: 'Copied',
+    save: 'Save'
+  },
+  add: {
+    autocompleteContact: 'Add a contact',
+    autocompleteContactGroup: 'Add a contact group',
+    contact: 'Contact',
+    contactGroup: 'Contact group',
+    title: 'Share dashboard with'
+  },
+  list: {
+    added: 'Added',
+    empty: 'The contact list is empty',
+    group: 'Group',
+    removed: 'Removed',
+    title: 'User rights',
+    updated: 'Updated'
+  }
+};
+
+export const roles = [
+  {
+    id: 'viewer',
+    name: 'Viewer'
+  },
+  {
+    id: 'editor',
+    name: 'Editor'
+  }
+];
+
+export const removedAccessRights = [
+  {
+    email: 'Virgie14@yahoo.com',
+    id: 1,
+    isContactGroup: false,
+    name: 'Jody Blanda',
+    role: 'editor'
+  },
+  {
+    email: 'Wyman29@yahoo.com',
+    id: 2,
+    isContactGroup: false,
+    name: 'Susan Dooley',
+    role: 'viewer'
+  },
+  {
+    email: 'Merle.Schamberger@hotmail.com',
+    id: 3,
+    isContactGroup: false,
+    name: 'Lewis Buckridge PhD',
+    role: 'editor'
+  },
+  {
+    email: 'Rossie6@gmail.com',
+    id: 4,
+    isContactGroup: false,
+    name: 'Bertha Hane',
+    role: 'viewer'
+  },
+  {
+    email: 'Monty_Nienow47@gmail.com',
+    id: 5,
+    isContactGroup: true,
+    name: 'Mildred Ratke-Stanton',
+    role: 'editor'
+  }
+];
+
+export const updatedAccessRights = [
+  {
+    email: 'Jovani.Willms74@gmail.com',
+    id: 0,
+    isContactGroup: true,
+    name: 'Leah McGlynn',
+    role: 'editor'
+  },
+  {
+    email: 'Virgie14@yahoo.com',
+    id: 1,
+    isContactGroup: false,
+    name: 'Jody Blanda',
+    role: 'editor'
+  },
+  {
+    email: 'Wyman29@yahoo.com',
+    id: 2,
+    isContactGroup: false,
+    name: 'Susan Dooley',
+    role: 'viewer'
+  },
+  {
+    email: 'Merle.Schamberger@hotmail.com',
+    id: 3,
+    isContactGroup: false,
+    name: 'Lewis Buckridge PhD',
+    role: 'editor'
+  },
+  {
+    email: 'Rossie6@gmail.com',
+    id: 4,
+    isContactGroup: false,
+    name: 'Bertha Hane',
+    role: 'viewer'
+  },
+  {
+    email: 'Monty_Nienow47@gmail.com',
+    id: 5,
+    isContactGroup: true,
+    name: 'Mildred Ratke-Stanton',
+    role: 'editor'
+  }
+];

package/src/components/Form/AccessRightsV2/useAccessRightsInitValues.ts

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+
+import { useAtom, useSetAtom } from 'jotai';
+import { equals } from 'ramda';
+
+import { initialValuesAtom, valuesAtom } from './atoms';
+import { AccessRightInitialValues, ContactType } from './models';
+
+interface Props {
+  initialValues: Array<AccessRightInitialValues>;
+}
+
+export const useAccessRightsInitValues = ({
+  initialValues
+}: Props): (() => void) => {
+  const [currentInitialValues, setInitialValues] = useAtom(initialValuesAtom);
+  const setValues = useSetAtom(valuesAtom);
+
+  const formattedInitialValues = useMemo(
+    () =>
+      initialValues.map((value) => ({
+        ...value,
+        id: `${
+          value.isContactGroup ? ContactType.ContactGroup : ContactType.Contact
+        }_${value.id}`
+      })),
+    [initialValues]
+  );
+
+  if (!equals(formattedInitialValues, currentInitialValues)) {
+    setInitialValues(formattedInitialValues);
+    setValues(
+      initialValues.map((value) => ({
+        isAdded: false,
+        isRemoved: false,
+        isUpdated: false,
+        ...value,
+        id: `${
+          value.isContactGroup ? ContactType.ContactGroup : ContactType.Contact
+        }_${value.id}`
+      }))
+    );
+  }
+
+  const clearValues = (): void => {
+    setInitialValues([]);
+    setValues([]);
+  };
+
+  return clearValues;
+};

package/src/components/Form/index.ts

@@ -1,3 +1,4 @@
 export * from './Form.models';
 export * from './Dashboard';
 export * from './AccessRights';
+export { default as AccessRightsV2 } from './AccessRightsV2/AccessRights';

package/src/components/Header/PageHeader/PageHeader.styles.ts

@@ -1,5 +1,7 @@
 import { makeStyles } from 'tss-react/mui';
 
+import { alpha } from '@mui/system';
+
 const useStyles = makeStyles()((theme) => ({
   header: {
     alignItems: 'flex-start',
@@ -22,7 +24,7 @@ const useStyles = makeStyles()((theme) => ({
     padding: theme.spacing(0, 0, 1.5, 0)
   },
   pageHeader: {
-    alignItems: 'flex-start',
+    alignItems: 'center',
     borderBottom: `1px solid ${theme.palette.header.page.border}`,
     display: 'flex',
     gap: theme.spacing(4),
@@ -53,6 +55,31 @@ const useStyles = makeStyles()((theme) => ({
     position: 'relative',
     transform: `translateY(-${theme.spacing(0.25)})`
   },
+  pageHeaderMessage: {
+    alignItems: 'center',
+    color: theme.palette.warning.main,
+    display: 'flex',
+    gap: theme.spacing(1)
+  },
+  pageHeaderMessageIcon: {
+    alignItems: 'center',
+    background: theme.palette.warning.main,
+    borderRadius: '50%',
+    color: theme.palette.common.white,
+    display: 'flex',
+    height: theme.spacing(2.5),
+    justifyContent: 'center',
+    width: theme.spacing(2.5)
+  },
+  pageHeaderMessageIconWrapper: {
+    alignItems: 'center',
+    backgroundColor: alpha(theme.palette.warning.main, 0.7),
+    borderRadius: '50%',
+    display: 'flex',
+    height: theme.spacing(3.5),
+    justifyContent: 'center',
+    width: theme.spacing(3.5)
+  },
   pageHeaderTitle: {
     '& > *': {
       display: 'grid'

package/src/components/Header/PageHeader/PageHeaderMessage.tsx

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+
+import { Box, Typography } from '@mui/material';
+
+import { useStyles } from './PageHeader.styles';
+
+type PageHeaderMessageProps = {
+  message: string;
+};
+
+const PageHeaderMessage = ({
+  message
+}: PageHeaderMessageProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <Box className={classes.pageHeaderMessage}>
+      {message && (
+        <>
+          <Box className={classes.pageHeaderMessageIconWrapper}>
+            <Box className={classes.pageHeaderMessageIcon}>!</Box>
+          </Box>
+          <Typography aria-label="page header message" variant="h6">
+            {message}
+          </Typography>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export { PageHeaderMessage };

package/src/components/Header/PageHeader/index.ts

@@ -3,10 +3,12 @@ import { PageHeaderMain } from './PageHeaderMain';
 import { PageHeaderMenu } from './PageHeaderMenu';
 import { PageHeaderTitle } from './PageHeaderTitle';
 import { PageHeaderActions } from './PageHeaderActions';
+import { PageHeaderMessage } from './PageHeaderMessage';
 
 export const PageHeader = Object.assign(PageHeaderRoot, {
   Actions: PageHeaderActions,
   Main: PageHeaderMain,
   Menu: PageHeaderMenu,
+  Message: PageHeaderMessage,
   Title: PageHeaderTitle
 });

package/src/components/ItemComposition/Item.tsx

@@ -26,7 +26,7 @@ export const Item = ({
   return (
     <div className={classes.itemContainer}>
       <div className={cx(classes.itemContent, className)}>{children}</div>
-      {!deleteButtonHidden && (
+      <div className={cx({ [classes.visibilityHiden]: deleteButtonHidden })}>
         <IconButton
           aria-label={labelDelete}
           data-testid={labelDelete}
@@ -35,7 +35,7 @@ export const Item = ({
           variant="ghost"
           onClick={onDeleteItem}
         />
-      )}
+      </div>
     </div>
   );
 };

package/src/components/ItemComposition/ItemComposition.styles.ts

@@ -22,5 +22,8 @@ export const useItemStyles = makeStyles()((theme) => ({
     display: 'flex',
     flexDirection: 'row',
     width: '100%'
+  },
+  visibilityHiden: {
+    visibility: 'hidden'
   }
 }));

package/src/components/ItemComposition/ItemComposition.tsx

@@ -7,6 +7,7 @@ import { Button } from '..';
 import { useItemCompositionStyles } from './ItemComposition.styles';
 
 type Props = {
+  IconAdd?;
   addButtonHidden?: boolean;
   addbuttonDisabled?: boolean;
   children: Array<ReactElement>;
@@ -19,7 +20,8 @@ export const ItemComposition = ({
   children,
   labelAdd,
   addbuttonDisabled,
-  addButtonHidden
+  addButtonHidden,
+  IconAdd
 }: Props): JSX.Element => {
   const { classes } = useItemCompositionStyles();
 
@@ -31,7 +33,7 @@ export const ItemComposition = ({
           aria-label={labelAdd}
           data-testid={labelAdd}
           disabled={addbuttonDisabled}
-          icon={<AddIcon />}
+          icon={IconAdd || <AddIcon />}
           iconVariant="start"
           size="small"
           variant="ghost"

package/src/components/List/Item/ListItem.styles.ts

@@ -23,6 +23,12 @@ export const useStyles = makeStyles()((theme) => ({
     paddingBottom: theme.spacing(1),
     paddingTop: theme.spacing(1)
   },
+  secondary: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(1)
+  },
   text: {
     '&, &.MuiListItemText-root': {
       '& .MuiListItemText-primary': {

package/src/components/List/Item/ListItem.tsx

@@ -22,7 +22,9 @@ export const ListItem = forwardRef(
         disableGutters
         className={cx(classes.listItem, className)}
         ref={ref}
-        secondaryAction={action}
+        secondaryAction={
+          action && <div className={classes.secondary}>{action}</div>
+        }
         {...attr}
       >
         {children}

package/src/components/List/Item/Text.tsx

@@ -5,19 +5,21 @@ import { ListItemText as MuiListItemText } from '@mui/material';
 import { useStyles } from './ListItem.styles';
 
 type TextProps = {
+  className?: string;
   primaryText: ReactNode;
   secondaryText?: ReactNode;
 };
 
 export const Text = ({
   primaryText,
-  secondaryText
+  secondaryText,
+  className
 }: TextProps): ReactElement => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   return (
     <MuiListItemText
-      className={classes.text}
+      className={cx(classes.text, className)}
       primary={primaryText}
       secondary={secondaryText}
     />

package/src/components/Menu/Button/MenuButton.tsx

@@ -15,6 +15,7 @@ import { useStyles } from './MenuButton.styles';
 type MenuButtonProps = {
   ariaLabel?: string;
   children?: ReactNode;
+  className?: string;
   hasArrow?: boolean;
   isOpen?: boolean;
   onClick?: (args: { isOpen: boolean }) => void;
@@ -29,9 +30,10 @@ const MenuButton = ({
   size = 'small',
   variant = 'ghost',
   ariaLabel,
+  className,
   ...attr
 }: MenuButtonProps): ReactElement => {
-  const { classes } = useStyles();
+  const { cx, classes } = useStyles();
 
   const { isMenuOpen, setIsMenuOpen, setAnchorEl, onOpen } = useMenu();
 
@@ -50,7 +52,7 @@ const MenuButton = ({
     <Button
       {...attr}
       aria-label={ariaLabel}
-      className={classes.menuButton}
+      className={cx(classes.menuButton, className)}
       data-is-active={isMenuOpen}
       size={size}
       variant={variant}

package/src/components/Menu/MenuItem.tsx

@@ -6,6 +6,7 @@ import { useStyles } from './Menu.styles';
 
 type MenuItemProps = {
   children?: ReactNode;
+  className?: string;
   isActive?: boolean;
   isDisabled?: boolean;
   onClick?: () => void;
@@ -15,13 +16,14 @@ const MenuItem = ({
   children,
   onClick,
   isActive = false,
-  isDisabled = false
+  isDisabled = false,
+  className
 }: MenuItemProps): ReactElement => {
-  const { classes } = useStyles();
+  const { cx, classes } = useStyles();
 
   return (
     <MuiMenuItem
-      className={classes.menuItem}
+      className={cx(classes.menuItem, className)}
       data-is-active={isActive}
       data-is-disabled={isDisabled}
       disabled={isDisabled}

package/src/components/Menu/MenuItems.tsx

@@ -7,9 +7,10 @@ import { useMenu } from './useMenu';
 
 type MenuItemsProps = {
   children?: ReactNode | Array<ReactNode>;
+  className?: string;
 };
-const MenuItems = ({ children }: MenuItemsProps): ReactElement => {
-  const { classes } = useStyles();
+const MenuItems = ({ children, className }: MenuItemsProps): ReactElement => {
+  const { cx, classes } = useStyles();
 
   const { isMenuOpen, setIsMenuOpen, anchorEl, onClose } = useMenu();
 
@@ -21,7 +22,7 @@ const MenuItems = ({ children }: MenuItemsProps): ReactElement => {
   return (
     <MuiMenu
       anchorEl={anchorEl}
-      className={classes.menuItems}
+      className={cx(classes.menuItems, className)}
       open={isMenuOpen}
       variant="menu"
       onClick={onCloseMenu}

package/src/components/Modal/Modal.styles.ts

@@ -24,9 +24,9 @@ const useStyles = makeStyles<{
     },
     '&[data-size="fullscreen"] .MuiDialog-paper': {
       bottom: props?.bottom ?? 0,
+      height: 'calc(100vh - 90px)',
       left: props?.left ?? 0,
       margin: 0,
-      maxHeight: 'unset',
       maxWidth: 'unset',
       position: 'absolute',
       right: props?.right ?? 0,
@@ -50,11 +50,13 @@ const useStyles = makeStyles<{
   },
   modalActions: {
     bottom: 0,
+    bottom: theme.spacing(2),
     display: 'flex',
     flexDirection: 'row',
     gap: theme.spacing(2),
     justifyContent: 'flex-end',
-    position: 'sticky'
+    position: 'fixed',
+    right: theme.spacing(2)
   },
   modalBody: {
     '& > p': {

package/src/index.ts

@@ -154,6 +154,7 @@ export type { ResponseError, CatchErrorProps } from './api/customFetch';
 
 export * from './utils';
 export { default as FluidTypography } from './Typography/FluidTypography';
+export { default as EllipsisTypography } from './Typography/EllipsisTypography';
 export * from './Dashboard';
 export * from './Graph';
 export type { LineChartData } from './Graph/common/models';
@@ -162,3 +163,7 @@ export * from './Graph/common/timeSeries';
 export { default as TimePeriods } from './TimePeriods';
 export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';
 export * from './ParentSize';
+
+export { default as TablePagination } from './Listing/ActionBar/Pagination';
+export { default as PaginationActions } from './Listing/ActionBar/PaginationActions';
+export { default as Subtitle } from './Typography/Subtitle';

package/src/utils/useInfiniteScrollListing.ts

@@ -5,33 +5,42 @@ import { PrimitiveAtom, useAtom } from 'jotai';
 import { JsonDecoder } from 'ts.data.json';
 
 import {
+  QueryParameter,
   buildListingEndpoint,
   useFetchQuery,
   useIntersectionObserver
 } from '@centreon/ui';
 
 import type { Listing } from '../api/models';
-
-const limit = 100;
+import { Parameters } from '../api/buildListingEndpoint/models';
 
 interface UseInfiniteScrollListing<T> {
   elementRef: (node) => void;
   elements: Array<T>;
   isLoading: boolean;
+  total?: number;
 }
 
 interface UseInfiniteScrollListingProps<T> {
-  decoder: JsonDecoder.Decoder<Listing<T>>;
+  customQueryParameters?: Array<QueryParameter>;
+  decoder?: JsonDecoder.Decoder<Listing<T>>;
   endpoint: string;
+  limit?: number;
   pageAtom: PrimitiveAtom<number>;
+  parameters?: Parameters;
   queryKeyName: string;
+  suspense?: boolean;
 }
 
 export const useInfiniteScrollListing = <T>({
   queryKeyName,
   endpoint,
   decoder,
-  pageAtom
+  pageAtom,
+  suspense = true,
+  parameters,
+  customQueryParameters,
+  limit = 100
 }: UseInfiniteScrollListingProps<T>): UseInfiniteScrollListing<T> => {
   const [maxPage, setMaxPage] = useState(1);
 
@@ -46,14 +55,15 @@ export const useInfiniteScrollListing = <T>({
     getEndpoint: (params) =>
       buildListingEndpoint({
         baseEndpoint: endpoint,
-        parameters: { limit, page: params?.page || page }
+        customQueryParameters,
+        parameters: { limit, page: params?.page || page, ...parameters }
       }),
     getQueryKey: () => [queryKeyName, page],
     isPaginated: true,
     queryOptions: {
       refetchOnMount: false,
       refetchOnWindowFocus: false,
-      suspense: equals(page, 1)
+      suspense: suspense && equals(page, 1)
     }
   });
 
@@ -98,9 +108,14 @@ export const useInfiniteScrollListing = <T>({
     });
   }, [data]);
 
+  useEffect(() => {
+    return () => setPage(1);
+  }, []);
+
   return {
     elementRef,
     elements: elements.current || [],
-    isLoading
+    isLoading,
+    total: data?.meta.total
   };
 };