Use InfiniteScroller pattern for the Task Drawer

Implement InfiniteScroller based on oVirt VmPortal implementation and
use it to fetch additional tasks in the Task Drawer.
Key features:
1. fetch data using useInfiniteQuery from React Query
2. track sentinel visibility using IntersectionObserver API
3. monitor item count to prevent extra fetchMore calls

Reference-Url: https://github.com/oVirt/ovirt-web-ui/blob/dfe0c4b8c92638f6e41b9fe0b09e0d07509618ae/src/components/VmsList/index.js#L50
Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com>

client/public/locales/en/translation.json

@@ -200,6 +200,7 @@
     "issuesEffortTooltip": "This column shows the effort weight for a single issue incident.",
     "dependentQuestionTooltip": "This question is conditionally included or excluded based on tags:",
     "jiraInstanceNotConnected": "Jira instance {{name}} is not connected.",
+    "loadingTripleDot": "Loading...",
     "manageDependenciesInstructions": "Add northbound and southbound dependencies for the selected application here. Note that any selections made will be saved automatically. To undo any changes, you must manually delete the applications from the dropdowns.",
     "noDataAvailableBody": "No data available to be shown here.",
     "noDataAvailableTitle": "No data available",

client/src/app/components/InfiniteScroller/InfiniteScroller.css

@@ -0,0 +1,6 @@
+.infinite-scroll-sentinel {
+  width: 100%;
+  text-align: center;
+  font-style: italic;
+  font-weight: bold;
+}

client/src/app/components/InfiniteScroller/InfiniteScroller.tsx

@@ -0,0 +1,70 @@
+import React, { ReactNode, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useVisibilityTracker } from "./useVisibilityTracker";
+import "./InfiniteScroller.css";
+
+export interface InfiniteScrollerProps {
+  // content to display
+  children: ReactNode;
+  // function triggered if sentinel node is visible to load more items
+  // returns false if call was rejected by the scheduler
+  fetchMore: () => boolean;
+  hasMore: boolean;
+  // number of items currently displayed/known
+  itemCount: number;
+}
+
+let fetchRefHolder: any = null;
+
+export const InfiniteScroller = ({
+  children,
+  fetchMore,
+  hasMore,
+  itemCount,
+}: InfiniteScrollerProps) => {
+  const { t } = useTranslation();
+  // Track how many items were known at time of triggering the fetch.
+  // This allows to detect edge case when second(or more) fetchMore() is triggered before
+  // IntersectionObserver is able to detect out-of-view event.
+  // Initializing with zero ensures that the effect will be triggered immediately
+  // (parent is expected to display empty state until some items are available).
+  const itemCountRef = useRef(0);
+  const { visible: isSentinelVisible, nodeRef: sentinelRef } =
+    useVisibilityTracker({
+      enable: hasMore,
+    });
+
+  console.log("infinite props ", hasMore, itemCount, itemCountRef.current);
+  useEffect(
+    () => {
+      console.log(
+        `infinite [visible= >${isSentinelVisible}<] `,
+        itemCount,
+        itemCountRef.current,
+        fetchRefHolder === fetchMore
+      );
+      fetchRefHolder = fetchMore;
+      if (
+        isSentinelVisible &&
+        itemCountRef.current !== itemCount &&
+        fetchMore() // fetch may be blocked if background refresh is in progress (or other manual fetch)
+      ) {
+        // fetchMore call was triggered (it may fail but will be subject to React Query retry policy)
+        itemCountRef.current = itemCount;
+      }
+    },
+    // reference to fetchMore() changes based on query state and ensures that the effect is triggered
+    [isSentinelVisible, fetchMore, itemCount]
+  );
+
+  return (
+    <div>
+      {children}
+      {hasMore && (
+        <div ref={sentinelRef} className="infinite-scroll-sentinel">
+          {t("message.loadingTripleDot")}
+        </div>
+      )}
+    </div>
+  );
+};

client/src/app/components/InfiniteScroller/index.ts

@@ -0,0 +1 @@
+export * from "./InfiniteScroller";

client/src/app/components/InfiniteScroller/useVisibilityTracker.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from "react";
+
+export function useVisibilityTracker({ enable }: { enable: boolean }) {
+  const nodeRef = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+  const node = nodeRef.current;
+
+  useEffect(() => {
+    if (!enable || !node) {
+      console.log("useVisibilityTracker - disabled");
+      return undefined;
+    }
+
+    // Observer with default options - the whole view port used.
+    // Note that if root element is used then it needs to be the ancestor of the target.
+    // In case of infinite scroller the target is always withing the (scrollable!)parent
+    // even if the node is technically hidden from the user.
+    // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root
+    const observer = new IntersectionObserver(
+      (entries: IntersectionObserverEntry[]) =>
+        entries.forEach(({ isIntersecting, ...rest }) => {
+          if (isIntersecting) {
+            setVisible(true);
+            console.log("useVisibilityTracker - intersection", rest);
+          } else {
+            setVisible(false);
+            console.log("useVisibilityTracker - out-of-box", rest);
+          }
+        })
+    );
+    observer.observe(node);
+
+    console.log("useVisibilityTracker - observe");
+
+    return () => {
+      observer.disconnect();
+      setVisible(false);
+      console.log("useVisibilityTracker - disconnect");
+    };
+  }, [enable, node]);
+
+  return { visible, nodeRef };
+}

client/src/app/components/task-manager/TaskManagerDrawer.tsx

@@ -1,17 +1,10 @@
-import React, { forwardRef, useMemo, useState } from "react";
+import React, { forwardRef, useCallback, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import dayjs from "dayjs";
 import {
   Dropdown,
   DropdownItem,
   DropdownList,
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateBody,
-  EmptyStateFooter,
-  EmptyStateHeader,
-  EmptyStateIcon,
-  EmptyStateVariant,
   MenuToggle,
   MenuToggleElement,
   NotificationDrawer,
@@ -22,17 +15,25 @@ import {
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
   Tooltip,
+  EmptyState,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateVariant,
+  EmptyStateFooter,
+  EmptyStateActions,
 } from "@patternfly/react-core";
-import { CubesIcon, EllipsisVIcon } from "@patternfly/react-icons";
+import { EllipsisVIcon, CubesIcon } from "@patternfly/react-icons";
 import { css } from "@patternfly/react-styles";
 
 import { Task, TaskState } from "@app/api/models";
 import { useTaskManagerContext } from "./TaskManagerContext";
-import { useServerTasks } from "@app/queries/tasks";
+import { useInfiniteServerTasks } from "@app/queries/tasks";
 
 import "./TaskManagerDrawer.css";
 import { TaskStateIcon } from "../Icons";
 import { useTaskActions } from "@app/pages/tasks/useTaskActions";
+import { InfiniteScroller } from "../InfiniteScroller";
 
 /** A version of `Task` specific for the task manager drawer components */
 interface TaskManagerTask {
@@ -58,7 +59,7 @@ interface TaskManagerTask {
   _: Task;
 }
 
-const PAGE_SIZE = 20;
+const PAGE_SIZE = 2;
 
 interface TaskManagerDrawerProps {
   ref?: React.ForwardedRef<HTMLElement>;
@@ -67,7 +68,8 @@ interface TaskManagerDrawerProps {
 export const TaskManagerDrawer: React.FC<TaskManagerDrawerProps> = forwardRef(
   (_props, ref) => {
     const { isExpanded, setIsExpanded, queuedCount } = useTaskManagerContext();
-    const { tasks } = useTaskManagerData();
+    const { tasks, hasNextPage, fetchNextPage, isReadyToFetch } =
+      useTaskManagerData();
 
     const [expandedItems, setExpandedItems] = useState<number[]>([]);
     const [taskWithExpandedActions, setTaskWithExpandedAction] = useState<
@@ -79,6 +81,7 @@ export const TaskManagerDrawer: React.FC<TaskManagerDrawerProps> = forwardRef(
       setExpandedItems([]);
     };
 
+    console.log("tasks", tasks?.length);
     return (
       <NotificationDrawer ref={ref}>
         <NotificationDrawerHeader
@@ -108,26 +111,32 @@ export const TaskManagerDrawer: React.FC<TaskManagerDrawerProps> = forwardRef(
               </EmptyStateFooter>
             </EmptyState>
           ) : (
-            <NotificationDrawerList>
-              {tasks.map((task) => (
-                <TaskItem
-                  key={task.id}
-                  task={task}
-                  expanded={expandedItems.includes(task.id)}
-                  onExpandToggle={(expand) => {
-                    setExpandedItems(
-                      expand
-                        ? [...expandedItems, task.id]
-                        : expandedItems.filter((i) => i !== task.id)
-                    );
-                  }}
-                  actionsExpanded={task.id === taskWithExpandedActions}
-                  onActionsExpandToggle={(flag: boolean) =>
-                    setTaskWithExpandedAction(flag && task.id)
-                  }
-                />
-              ))}
-            </NotificationDrawerList>
+            <InfiniteScroller
+              fetchMore={fetchNextPage}
+              hasMore={hasNextPage}
+              itemCount={tasks?.length ?? 0}
+            >
+              <NotificationDrawerList>
+                {tasks.map((task) => (
+                  <TaskItem
+                    key={task.id}
+                    task={task}
+                    expanded={expandedItems.includes(task.id)}
+                    onExpandToggle={(expand) => {
+                      setExpandedItems(
+                        expand
+                          ? [...expandedItems, task.id]
+                          : expandedItems.filter((i) => i !== task.id)
+                      );
+                    }}
+                    actionsExpanded={task.id === taskWithExpandedActions}
+                    onActionsExpandToggle={(flag: boolean) =>
+                      setTaskWithExpandedAction(flag && task.id)
+                    }
+                  />
+                ))}
+              </NotificationDrawerList>
+            </InfiniteScroller>
           )}
         </NotificationDrawerBody>
       </NotificationDrawer>
@@ -228,12 +237,13 @@ const TaskItem: React.FC<{
 };
 
 const useTaskManagerData = () => {
-  const [pageSize, setPageSize] = useState(PAGE_SIZE);
-  const increasePageSize = () => {
-    setPageSize(pageSize + PAGE_SIZE);
-  };
-
-  const { result, isFetching } = useServerTasks(
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage = false,
+    isFetching,
+    isFetchingNextPage,
+  } = useInfiniteServerTasks(
     {
       filters: [{ field: "state", operator: "=", value: "queued" }],
       sort: {
@@ -242,48 +252,62 @@ const useTaskManagerData = () => {
       },
       page: {
         pageNumber: 1,
-        itemsPerPage: pageSize,
+        itemsPerPage: PAGE_SIZE,
       },
     },
     5000
   );
 
   const tasks: TaskManagerTask[] = useMemo(
     () =>
-      !result.data
-        ? []
-        : result.data.map(
-            (task) =>
-              ({
-                id: task.id ?? -1,
-                createUser: task.createUser ?? "",
-                updateUser: task.updateUser ?? "",
-                createTime: task.createTime ?? "",
-                started: task.started ?? "",
-                terminated: task.terminated ?? "",
-                name: task.name,
-                kind: task.kind,
-                addon: task.addon,
-                extensions: task.extensions,
-                state: task.state ?? "",
-                priority: task.priority ?? 0,
-                applicationId: task.application.id,
-                applicationName: task.application.name,
-                preemptEnabled: task?.policy?.preemptEnabled ?? false,
+      data?.pages
+        ?.flatMap((data) => data?.data ?? [])
+        ?.map(
+          (task) =>
+            ({
+              id: task.id ?? -1,
+              createUser: task.createUser ?? "",
+              updateUser: task.updateUser ?? "",
+              createTime: task.createTime ?? "",
+              started: task.started ?? "",
+              terminated: task.terminated ?? "",
+              name: task.name,
+              kind: task.kind,
+              addon: task.addon,
+              extensions: task.extensions,
+              state: task.state ?? "",
+              priority: task.priority ?? 0,
+              applicationId: task.application.id,
+              applicationName: task.application.name,
+              preemptEnabled: task?.policy?.preemptEnabled ?? false,
 
-                _: task,
+              _: task,
 
-                // TODO: Add any checks that could be needed later...
-                //  - isCancelable (does the current user own the task? other things to check?)
-                //  - isPreemptionToggleAllowed
-              }) as TaskManagerTask
-          ),
-    [result.data]
+              // TODO: Add any checks that could be needed later...
+              //  - isCancelable (does the current user own the task? other things to check?)
+              //  - isPreemptionToggleAllowed
+            }) as TaskManagerTask
+        ) ?? [],
+    [data]
   );
 
+  const fetchMore = useCallback(() => {
+    // forced fetch is not allowed when background fetch or other forced fetch is in progress
+    if (!isFetching && !isFetchingNextPage) {
+      fetchNextPage();
+      console.log("fetchMore - started");
+      return true;
+    } else {
+      console.log("fetchMore - blocked");
+      return false;
+    }
+  }, [isFetching, isFetchingNextPage, fetchNextPage]);
+
   return {
     tasks,
-    increasePageSize,
     isFetching,
+    hasNextPage,
+    fetchNextPage: fetchMore,
+    isReadyToFetch: !isFetching && !isFetchingNextPage,
   };
 };