@centreon/ui 26.11.13 → 26.11.14

package/package.json

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

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

@@ -1,9 +1,11 @@
 import AddIcon from '@mui/icons-material/Add';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { CircularProgress } from '@mui/material';
 
 import { useTranslation } from 'react-i18next';
 
 import { Button, Menu } from '../..';
+import { labelLoading } from './translatedLabels';
 
 interface NamedEntity {
   id: number | string;
@@ -16,10 +18,13 @@ type Props = {
   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;
 };
 
@@ -27,6 +32,8 @@ export const PageQuickAccess = ({
   elements,
   isActive,
   isDisabled,
+  isLoading,
+  loadMoreRef,
   navigateToElement,
   goBack,
   create,
@@ -38,16 +45,27 @@ export const PageQuickAccess = ({
     <Menu>
       <Menu.Button data-testid="quickaccess" />
       <Menu.Items>
-        {elements?.map((element) => (
-          <Menu.Item
-            isActive={isActive(element.id)}
-            isDisabled={isDisabled?.(element.id)}
-            key={`${element.id}`}
-            onClick={navigateToElement(element.id)}
-          >
-            {element.name}
-          </Menu.Item>
-        ))}
+        <div
+          className="max-h-[50vh] overflow-y-auto"
+          data-testid="quickaccess-elements"
+        >
+          {elements?.map((element) => (
+            <Menu.Item
+              isActive={isActive(element.id)}
+              isDisabled={isDisabled?.(element.id)}
+              key={`${element.id}`}
+              onClick={navigateToElement(element.id)}
+            >
+              {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

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

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

package/src/utils/useInfiniteScrollListing.ts

@@ -49,6 +49,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>
   >({
@@ -59,12 +68,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,
@@ -110,7 +114,7 @@ export const useInfiniteScrollListing = <T>({
     }
 
     prefetchNextPage({
-      getPrefetchQueryKey: (newPage: number) => ['dashboards', newPage],
+      getPrefetchQueryKey: getQueryKey,
       page
     });
   }, [data, limit, page, prefetchNextPage]);