@centreon/ui 24.10.31 → 24.10.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.10.31",
+  "version": "24.10.32",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

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

@@ -1,6 +1,20 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()((theme) => ({
+  // The quick access list is capped at half the screen height and scrolls,
+  // so the buttons below it stay visible with a long list.
+  quickAccessElements: {
+    maxHeight: '50vh',
+    overflowY: 'auto'
+  },
+  quickAccessLoadMore: {
+    height: 1
+  },
+  quickAccessLoading: {
+    display: 'flex',
+    justifyContent: 'center',
+    padding: theme.spacing(1, 0)
+  },
   pageLayout: {
     display: 'grid',
     gridTemplateRows: 'min-content',

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

@@ -2,9 +2,13 @@ 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 { useStyles } from './PageLayout.styles';
+import { labelLoading } from './translatedLabels';
+
 interface NamedEntity {
   id: number | string;
   name: string;
@@ -15,39 +19,58 @@ type Props = {
   elements: Array<NamedEntity>;
   goBack: () => void;
   isActive: (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,
+  isLoading,
+  loadMoreRef,
   navigateToElement,
   goBack,
   create,
   labels
 }: Props): JSX.Element => {
   const { t } = useTranslation();
+  const { classes } = useStyles();
 
   return (
     <Menu>
       <Menu.Button data-testid="quickaccess" />
       <Menu.Items>
-        {elements?.map((element) => (
-          <Menu.Item
-            key={`${element.id}`}
-            onClick={navigateToElement(element.id)}
-            {...(isActive(element.id) && {
-              isActive: true,
-              isDisabled: true
-            })}
-          >
-            {element.name}
-          </Menu.Item>
-        ))}
+        <div
+          className={classes.quickAccessElements}
+          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={classes.quickAccessLoadMore} ref={loadMoreRef} />
+          )}
+          {isLoading && (
+            <div className={classes.quickAccessLoading}>
+              <CircularProgress aria-label={t(labelLoading)} size={20} />
+            </div>
+          )}
+        </div>
         <Menu.Divider key="divider" />
         <Menu.Item key="create">
           <>

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

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

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]);