@centreon/ui 25.10.28 → 25.10.30

package/src/api/useGraphQuery/index.ts

@@ -37,6 +37,7 @@ interface UseMetricsQueryProps {
     timePeriodType: number;
   };
   isEnabled?: boolean;
+  enforceIsEnabled?: boolean;
 }
 
 interface UseMetricsQueryState {
@@ -103,7 +104,8 @@ const useGraphQuery = ({
   refreshCount,
   bypassQueryParams = false,
   prefix,
-  isEnabled = true
+  isEnabled = true,
+  enforceIsEnabled
 }: UseMetricsQueryProps): UseMetricsQueryState => {
   const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
     ? {
@@ -161,9 +163,10 @@ const useGraphQuery = ({
     ],
     queryOptions: {
       enabled:
-        areResourcesFullfilled(resources) &&
-        !isEmpty(definedMetrics) &&
-        isEnabled,
+        enforceIsEnabled ??
+        (areResourcesFullfilled(resources) &&
+          !isEmpty(definedMetrics) &&
+          isEnabled),
       refetchInterval: refreshInterval,
       suspense: false
     },

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

@@ -8,6 +8,7 @@ import { SelectEntry, SingleConnectedAutocompleteField } from '../../../..';
 import RoleSelectField from '../common/RoleSelectField';
 import { Endpoints, Labels } from '../models';
 
+import { ReactElement } from 'react';
 import ContactSwitch from './ContactSwitch';
 import { useShareInputStyles } from './ShareInput.styles';
 import useShareInput from './useShareInput';
@@ -18,18 +19,18 @@ interface Props {
   roles: Array<SelectEntry>;
 }
 
-const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
+const ShareInput = ({ labels, endpoints, roles }: Props): ReactElement => {
   const { t } = useTranslation();
   const { classes } = useShareInputStyles();
 
   const {
-    renderOption,
     selectedContact,
     getOptionDisabled,
     getEndpoint,
     selectContact,
     isContactGroup,
     selectedRole,
+    getRenderedOptionText,
     setSelectedRole,
     add,
     changeIdValue
@@ -46,6 +47,7 @@ const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
           disableClearable={false}
           field="name"
           getEndpoint={getEndpoint}
+          getRenderedOptionText={getRenderedOptionText}
           getOptionDisabled={getOptionDisabled}
           label={t(
             isContactGroup
@@ -53,7 +55,6 @@ const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
               : t(labels.autocompleteContact)
           )}
           queryKey={isContactGroup ? labels.contactGroup : labels.contact}
-          renderOption={renderOption}
           value={selectedContact}
           onChange={selectContact}
         />

package/src/components/Form/AccessRights/ShareInput/useShareInput.tsx

@@ -1,10 +1,15 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import {
+  Dispatch,
+  ReactElement,
+  SetStateAction,
+  useEffect,
+  useState
+} from 'react';
 
 import { useAtomValue, useSetAtom } from 'jotai';
 import { equals, includes, isNil } from 'ramda';
 
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import { ListItemText, MenuItem } from '@mui/material';
 
 import { SelectEntry, buildListingEndpoint } from '../../../..';
 import {
@@ -20,7 +25,7 @@ interface UseShareInputState {
   getEndpoint: (parameters) => string;
   getOptionDisabled: (option) => boolean;
   isContactGroup: boolean;
-  renderOption: (attr, option) => JSX.Element;
+  getRenderedOptionText: (option: unknown) => ReactElement | string;
   selectContact: (_, entry) => void;
   selectedContact: AccessRightInitialValues | null;
   selectedRole: string;
@@ -40,7 +45,7 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
 
   const selectContact = (_, entry): void => {
     setSelectedContact(entry);
-    if (equals('editor', entry.most_permissive_role)) {
+    if (equals('editor', entry?.most_permissive_role)) {
       return;
     }
     setSelectedRole('viewer');
@@ -71,14 +76,14 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
       }
     });
 
-  const renderOption = (attr, option): JSX.Element => {
+  const getRenderedOptionText = (option): ReactElement => {
     return (
-      <MenuItem {...attr}>
-        <ListItemText>{option.name}</ListItemText>
-        {includes(option.id, accessRightIds) && (
+      <>
+        {option?.name}
+        {includes(option?.id, accessRightIds) && (
           <CheckCircleIcon color="success" />
         )}
-      </MenuItem>
+      </>
     );
   };
 
@@ -102,7 +107,7 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
     getEndpoint,
     getOptionDisabled,
     isContactGroup,
-    renderOption,
+    getRenderedOptionText,
     selectContact,
     selectedContact,
     selectedRole,

package/src/components/Layout/PageLayout/PageLayout.tsx

@@ -5,22 +5,16 @@ import { useStyles } from './PageLayout.styles';
 type PageLayoutProps = {
   children: Array<ReactNode> | ReactNode;
   variant?: 'default' | 'fixed-header';
-  className?: string;
 };
 
 export const PageLayout = ({
   children,
-  variant = 'default',
-  className
+  variant = 'default'
 }: PageLayoutProps): ReactElement => {
-  const { classes, cx } = useStyles();
+  const { classes } = useStyles();
 
   return (
-    <section
-      className={cx(classes.pageLayout, className)}
-      data-variant={variant}
-      id="page"
-    >
+    <section className={classes.pageLayout} data-variant={variant} id="page">
       {children}
     </section>
   );

package/src/components/Layout/PageLayout/PageLayoutActions.tsx

@@ -5,19 +5,17 @@ import { useStyles } from './PageLayout.styles';
 interface PageLayoutActionsProps {
   children: Array<ReactNode> | ReactNode;
   rowReverse?: boolean;
-  className?: string;
 }
 
 export const PageLayoutActions = ({
   children,
-  rowReverse,
-  className
+  rowReverse
 }: PageLayoutActionsProps): ReactElement => {
-  const { classes, cx } = useStyles();
+  const { classes } = useStyles();
 
   return (
     <section
-      className={cx(classes.pageLayoutActions, className)}
+      className={classes.pageLayoutActions}
       data-row-reverse={rowReverse}
       id="actions"
     >

package/src/components/Layout/PageLayout/PageLayoutBody.tsx

@@ -5,19 +5,17 @@ import { useStyles } from './PageLayout.styles';
 type PageLayoutBodyProps = {
   children: Array<ReactNode> | ReactNode;
   hasBackground?: boolean;
-  className?: string;
 };
 
 export const PageLayoutBody = ({
   children,
-  hasBackground = false,
-  className
+  hasBackground = false
 }: PageLayoutBodyProps): ReactElement => {
-  const { classes, cx } = useStyles();
+  const { classes } = useStyles();
 
   return (
     <section
-      className={cx(classes.pageLayoutBody, className)}
+      className={classes.pageLayoutBody}
       data-has-background={hasBackground}
       data-has-actions={!!children?.length}
       id="page-body"

package/src/components/Layout/PageLayout/PageLayoutHeader.tsx

@@ -4,17 +4,15 @@ import { useStyles } from './PageLayout.styles';
 
 type PageLayoutHeaderProps = {
   children: Array<ReactNode> | ReactNode;
-  className?: string;
 };
 
 export const PageLayoutHeader = ({
-  children,
-  className
+  children
 }: PageLayoutHeaderProps): JSX.Element => {
-  const { classes, cx } = useStyles();
+  const { classes } = useStyles();
 
   return (
-    <header className={cx(classes.pageLayoutHeader, className)} id="header">
+    <header className={classes.pageLayoutHeader} id="header">
       {children}
     </header>
   );

package/src/components/Layout/PageLayout/PageQuickAccess.tsx

@@ -2,31 +2,37 @@ import { useTranslation } from 'react-i18next';
 
 import AddIcon from '@mui/icons-material/Add';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { CircularProgress } from '@mui/material';
 
 import { Button, Menu } from '../..';
 
+import { labelLoading } from './translatedLabels';
+
 interface NamedEntity {
   id: number | string;
   name: string;
 }
 
 type Props = {
-  create?: () => void;
+  create: () => void;
   elements: Array<NamedEntity>;
   goBack: () => void;
   isActive: (id: number | string) => boolean;
-  isDisabled?: (id: number | string) => boolean;
+  isLoading?: boolean;
   labels: {
     create: string;
     goBack: string;
   };
+  // Observed at the bottom of the list to load the next page when it is reached
+  loadMoreRef?: (node: Element | null) => void;
   navigateToElement: (id: number | string) => () => void;
 };
 
 export const PageQuickAccess = ({
   elements,
   isActive,
-  isDisabled,
+  isLoading,
+  loadMoreRef,
   navigateToElement,
   goBack,
   create,
@@ -38,27 +44,40 @@ export const PageQuickAccess = ({
     <Menu>
       <Menu.Button data-testid="quickaccess" />
       <Menu.Items>
-        {elements?.map((element) => (
-          <Menu.Item
-            key={`${element.id}`}
-            onClick={navigateToElement(element.id)}
-            isActive={isActive(element.id)}
-            isDisabled={isDisabled?.(element.id)}
-          >
-            {element.name}
-          </Menu.Item>
-        ))}
+        <div
+          className="max-h-[50vh] overflow-y-auto"
+          data-testid="quickaccess-elements"
+        >
+          {elements?.map((element) => (
+            <Menu.Item
+              key={`${element.id}`}
+              onClick={navigateToElement(element.id)}
+              {...(isActive(element.id) && {
+                isActive: true,
+                isDisabled: true
+              })}
+            >
+              {element.name}
+            </Menu.Item>
+          ))}
+          {loadMoreRef && <div className="h-px" ref={loadMoreRef} />}
+          {isLoading && (
+            <div className="flex justify-center py-2">
+              <CircularProgress aria-label={t(labelLoading)} size={20} />
+            </div>
+          )}
+        </div>
         <Menu.Divider key="divider" />
-        <div className="px-2 pb-2 flex gap-4">
-          <Button
-            icon={<ArrowBackIcon />}
-            iconVariant="start"
-            variant="ghost"
-            onClick={goBack}
-          >
-            {t(labels.goBack)}
-          </Button>
-          {create && (
+        <Menu.Item key="create">
+          <>
+            <Button
+              icon={<ArrowBackIcon />}
+              iconVariant="start"
+              variant="ghost"
+              onClick={goBack}
+            >
+              {t(labels.goBack)}
+            </Button>
             <Button
               icon={<AddIcon />}
               iconVariant="start"
@@ -67,8 +86,8 @@ export const PageQuickAccess = ({
             >
               {t(labels.create)}
             </Button>
-          )}
-        </div>
+          </>
+        </Menu.Item>
       </Menu.Items>
     </Menu>
   );

package/src/components/Layout/PageLayout/translatedLabels.ts

@@ -0,0 +1 @@
+export const labelLoading = 'Loading...';

package/src/components/Menu/Button/MenuButton.styles.ts

@@ -0,0 +1,27 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  buttonIcon: {
+    '[data-is-active="true"] &': {
+      transform: 'rotate(180deg)'
+    },
+
+    fontSize: '1.25rem',
+    transition: 'transform 0.15s ease-in-out'
+  },
+  menuButton: {
+    '&:hover:not(&[data-is-active="true"])': {
+      backgroundColor: theme.palette.menu.button.background.hover,
+      color: theme.palette.menu.button.color.hover
+    },
+    '&[data-is-active="true"]': {
+      backgroundColor: theme.palette.menu.button.background.active,
+      color: theme.palette.menu.button.color.active
+    },
+    backgroundColor: theme.palette.menu.button.background.default,
+    color: theme.palette.menu.button.color.default,
+    display: 'flex',
+    height: 'unset',
+    minWidth: 'unset'
+  }
+}));

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

@@ -5,13 +5,12 @@ import {
   Menu as MenuIcon
 } from '@mui/icons-material';
 
+import { useStyles } from './MenuButton.styles';
 import { AriaLabelingAttributes } from '../../../@types/aria-attributes';
 import { DataTestAttributes } from '../../../@types/data-attributes';
 import { Button, ButtonProps } from '../../Button';
 import { useMenu } from '../useMenu';
 
-import { useStyles } from './MenuButton.styles';
-
 type MenuButtonProps = {
   ariaLabel?: string;
   children?: ReactNode;
@@ -33,6 +32,8 @@ const MenuButton = ({
   className,
   ...attr
 }: MenuButtonProps): ReactElement => {
+  const { cx, classes } = useStyles();
+
   const { isMenuOpen, setIsMenuOpen, setAnchorEl, onOpen } = useMenu();
 
   const onToggle = useCallback(
@@ -50,18 +51,14 @@ const MenuButton = ({
     <Button
       {...attr}
       aria-label={ariaLabel}
-      className={`${isMenuOpen ? 'bg-primary-main/8 text-text-primary-main' : 'text-text-secondary'} ${className}`}
+      className={cx(classes.menuButton, className)}
       data-is-active={isMenuOpen}
       size={size}
       variant={variant}
       onClick={onToggle}
     >
       {children || <MenuIcon />}
-      {hasArrow && (
-        <ArrowDropDownIcon
-          className={`transform-gpu transition-[rotate] ${isMenuOpen ? 'rotate-180' : 'rotate-0'}`}
-        />
-      )}
+      {hasArrow && <ArrowDropDownIcon className={classes.buttonIcon} />}
     </Button>
   );
 };

package/src/components/Menu/Menu.styles.ts

@@ -0,0 +1,68 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  menuDivider: {
+    '&, &.MuiDivider-root': {
+      borderColor: theme.palette.menu.divider.border
+    }
+  },
+  menuItem: {
+    '&, &.MuiMenuItem-root': {
+      '& > button': {
+        fontSize: '1rem',
+        justifyContent: 'flex-start'
+      },
+
+      '&:has(button)': {
+        '& > .MuiTouchRipple-root': {
+          display: 'none'
+        },
+        '&:hover:not(&[data-is-active="true"])': {
+          backgroundColor: 'unset'
+        },
+        padding: theme.spacing(0, 2)
+      },
+
+      '&:not(:has(button))': {
+        '&:hover:not(&[data-is-active="true"])': {
+          backgroundColor: theme.palette.menu.item.background.hover,
+          color: theme.palette.menu.item.color.hover
+        },
+        '&[data-is-active="true"], &.Mui-selected': {
+          '&[data-is-disabled="true"], &.Mui-disabled': {
+            opacity: 1
+          },
+          backgroundColor: theme.palette.menu.item.background.active,
+          color: theme.palette.menu.item.color.active,
+          opacity: 1
+        },
+        '&[data-is-disabled="true"], &.Mui-disabled': {
+          opacity: 0.5
+        },
+        backgroundColor: theme.palette.menu.item.background.default,
+        color: theme.palette.menu.item.color.default,
+        padding: theme.spacing(0.75, 2)
+      },
+
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'row',
+      fontSize: '1rem',
+      gap: theme.spacing(2),
+      justifyContent: 'space-between',
+      minHeight: 'unset'
+    }
+  },
+  menuItems: {
+    '& > .MuiPaper-root.MuiMenu-paper': {
+      backgroundColor: theme.palette.menu.background,
+      borderRadius: '4px',
+      boxShadow: theme.shadows[8],
+      minWidth: '240px',
+      transform: `translateY(${theme.spacing(0.5)}) !important`
+    },
+    '& ul, & ul.MuiMenu-list': {
+      padding: theme.spacing(1, 0)
+    }
+  }
+}));

package/src/components/Menu/MenuDivider.tsx

@@ -2,8 +2,12 @@ import { ReactElement } from 'react';
 
 import { Divider as MuiDivider } from '@mui/material';
 
+import { useStyles } from './Menu.styles';
+
 const MenuDivider = (): ReactElement => {
-  return <MuiDivider />;
+  const { classes } = useStyles();
+
+  return <MuiDivider className={classes.menuDivider} />;
 };
 
 export { MenuDivider };

package/src/components/Menu/MenuItem.tsx

@@ -2,6 +2,8 @@ import { ReactElement, ReactNode } from 'react';
 
 import { MenuItem as MuiMenuItem } from '@mui/material';
 
+import { useStyles } from './Menu.styles';
+
 type MenuItemProps = {
   children?: ReactNode;
   className?: string;
@@ -17,9 +19,11 @@ const MenuItem = ({
   isDisabled = false,
   className
 }: MenuItemProps): ReactElement => {
+  const { cx, classes } = useStyles();
+
   return (
     <MuiMenuItem
-      className={className}
+      className={cx(classes.menuItem, className)}
       data-is-active={isActive}
       data-is-disabled={isDisabled}
       disabled={isDisabled}

package/src/components/Menu/MenuItems.tsx

@@ -2,6 +2,7 @@ import { ReactElement, ReactNode } from 'react';
 
 import { Menu as MuiMenu } from '@mui/material';
 
+import { useStyles } from './Menu.styles';
 import { useMenu } from './useMenu';
 
 type MenuItemsProps = {
@@ -9,6 +10,8 @@ type MenuItemsProps = {
   className?: string;
 };
 const MenuItems = ({ children, className }: MenuItemsProps): ReactElement => {
+  const { cx, classes } = useStyles();
+
   const { isMenuOpen, setIsMenuOpen, anchorEl, onClose } = useMenu();
 
   const onCloseMenu = (): void => {
@@ -19,11 +22,7 @@ const MenuItems = ({ children, className }: MenuItemsProps): ReactElement => {
   return (
     <MuiMenu
       anchorEl={anchorEl}
-      className={className}
-      classes={{
-        paper:
-          'rounded-sm shadow-lg min-w-[240px] bg-background-paper border-1 border-divider'
-      }}
+      className={cx(classes.menuItems, className)}
       open={isMenuOpen}
       variant="menu"
       onClick={onCloseMenu}

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

@@ -72,7 +72,8 @@ const useStyles = makeStyles<{
       opacity: 0.6
     },
     top: theme.spacing(1)
-  }
+  },
+  
 }));
 
 export { useStyles };

package/src/components/Modal/ModalHeader.tsx

@@ -16,11 +16,7 @@ const ModalHeader = ({
 }: ModalHeaderProps & DialogTitleProps): ReactElement => {
   return (
     <div className={modalHeader}>
-      <MuiDialogTitle
-        className="p-0 font-bold text-2xl"
-        color="primary"
-        {...rest}
-      >
+      <MuiDialogTitle className="p-0 font-bold text-2xl" color="primary" {...rest}>
         {children}
       </MuiDialogTitle>
     </div>

package/src/utils/useInfiniteScrollListing.ts

@@ -50,6 +50,15 @@ export const useInfiniteScrollListing = <T>({
 
   const [page, setPage] = useAtom(pageAtom);
 
+  // Shared by the active query and the next page prefetch, so that the
+  // prefetched page is reused instead of being requested again
+  const getQueryKey = (queryPage: number): Array<string | number> => [
+    queryKeyName,
+    queryPage,
+    JSON.stringify(parameters),
+    JSON.stringify(customQueryParameters)
+  ];
+
   const { data, isLoading, prefetchNextPage, fetchStatus } = useFetchQuery<
     Listing<T>
   >({
@@ -60,12 +69,7 @@ export const useInfiniteScrollListing = <T>({
         customQueryParameters,
         parameters: { limit, page: params?.page || page, ...parameters }
       }),
-    getQueryKey: () => [
-      queryKeyName,
-      page,
-      JSON.stringify(parameters),
-      JSON.stringify(customQueryParameters)
-    ],
+    getQueryKey: () => getQueryKey(page),
     isPaginated: true,
     queryOptions: {
       enabled,
@@ -111,7 +115,7 @@ export const useInfiniteScrollListing = <T>({
     }
 
     prefetchNextPage({
-      getPrefetchQueryKey: (newPage) => ['dashboards', newPage],
+      getPrefetchQueryKey: getQueryKey,
       page
     });
   }, [data]);

package/src/utils/useViewportIntersection.ts

@@ -18,10 +18,9 @@ export const useViewportIntersection = (
       observer.current.disconnect();
     }
 
-    observer.current = new window.IntersectionObserver(
-      ([newEntry]) => setEntry(newEntry),
-      options
-    );
+    observer.current = new window.IntersectionObserver(([newEntry]) => {
+      setEntry(newEntry);
+    }, options);
 
     if (element) {
       observer.current.observe(element);