feat: migrate to TanStack Query

package.json

@@ -15,6 +15,7 @@
     "@patternfly/react-icons": "^6.4.0",
     "@patternfly/react-styles": "^6.4.0",
     "@patternfly/react-table": "^6.4.0",
+    "@tanstack/react-query": "^5.90.19",
     "@types/react": "^19.0.1",
     "axios": "^1.8.2",
     "cron-validate": "^1.5.3",
@@ -30,6 +31,7 @@
     "@eslint/compat": "^1.2.4",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.31.0",
+    "@tanstack/react-query-devtools": "^5.91.2",
     "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^18.19.68",
     "@typescript-eslint/eslint-plugin": "^8.18.2",

src/app/Accounts/components/AccountsTable.tsx

@@ -1,52 +1,40 @@
 import { ThProps, Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useMemo } from 'react';
 import { Link } from 'react-router-dom';
-import { api, AccountResponseApi, ProviderApi } from '@api';
+import { AccountResponseApi, ProviderApi } from '@api';
 import { LoadingSpinner } from '@app/components/common/LoadingSpinner';
 import { TablePagination } from '@app/components/common/TablesPagination';
-import { searchItems, filterByProvider, sortItems, paginateItems } from '@app/utils/tableFilters';
-import { fetchAllPages } from '@app/utils/fetchAllPages';
+import { searchItems, filterByProvider, sortItems } from '@app/utils/tableFilters';
+import { useAccounts } from '@app/hooks/useAccounts';
+import { useTablePagination } from '@app/hooks/useTablePagination';
 
 export const AccountsTable: React.FunctionComponent<{
   searchValue: string;
   providerSelections: ProviderApi[] | null;
 }> = ({ searchValue, providerSelections }) => {
-  const [page, setPage] = useState(1);
-  const [perPage, setPerPage] = useState(20);
-  const [allAccounts, setAllAccounts] = useState<AccountResponseApi[]>([]);
-  const [loading, setLoading] = useState(true);
+  const { data: allAccounts = [], isLoading } = useAccounts();
 
   const [activeSortIndex, setActiveSortIndex] = useState<number | undefined>(0);
   const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc'>('asc');
 
-  useEffect(() => {
-    const fetchData = async () => {
-      setLoading(true);
-      try {
-        const allItems = await fetchAllPages(async (page, pageSize) => {
-          const { data } = await api.accounts.accountsList({ page, page_size: pageSize });
-          return { items: data.items || [], count: data.count || 0 };
-        });
-        setAllAccounts(allItems);
-      } catch (error) {
-        console.error('Error fetching accounts:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchData();
-  }, []);
+  const filtered = useMemo(() => {
+    let result = allAccounts;
+    result = searchItems(result, searchValue, ['accountName']);
+    result = filterByProvider(result, providerSelections);
 
-  let filtered = allAccounts;
-  filtered = searchItems(filtered, searchValue, ['accountName']);
-  filtered = filterByProvider(filtered, providerSelections);
+    if (activeSortIndex !== undefined && activeSortDirection) {
+      const sortFields: (keyof AccountResponseApi)[] = ['accountName', 'provider', 'clusterCount'];
+      result = sortItems(result, sortFields[activeSortIndex], activeSortDirection);
+    }
 
-  if (activeSortIndex !== undefined && activeSortDirection) {
-    const sortFields: (keyof AccountResponseApi)[] = ['accountName', 'provider', 'clusterCount'];
-    filtered = sortItems(filtered, sortFields[activeSortIndex], activeSortDirection);
-  }
+    return result;
+  }, [allAccounts, searchValue, providerSelections, activeSortIndex, activeSortDirection]);
 
-  const paginated = paginateItems(filtered, page, perPage);
+  const { page, perPage, setPage, setPerPage, paginatedData, totalItems } = useTablePagination({
+    data: filtered,
+    initialPerPage: 20,
+    filterDeps: [searchValue, providerSelections],
+  });
 
   const getSortParams = (columnIndex: number): ThProps['sort'] => ({
     sortBy: {
@@ -69,7 +57,7 @@ export const AccountsTable: React.FunctionComponent<{
 
   return (
     <>
-      {loading ? (
+      {isLoading ? (
         <LoadingSpinner />
       ) : (
         <Table aria-label="Accounts table">
@@ -81,7 +69,7 @@ export const AccountsTable: React.FunctionComponent<{
             </Tr>
           </Thead>
           <Tbody>
-            {paginated.map(account => (
+            {paginatedData.map(account => (
               <Tr key={account.accountId}>
                 <Td dataLabel={columnNames.name}>
                   <Link to={`/accounts/${account.accountId}`}>{account.accountName}</Link>
@@ -94,7 +82,7 @@ export const AccountsTable: React.FunctionComponent<{
         </Table>
       )}
       <TablePagination
-        itemCount={filtered.length}
+        itemCount={totalItems}
         page={page}
         perPage={perPage}
         onSetPage={setPage}

src/app/Actions/AuditLogs/AuditLogsTable.tsx

@@ -1,16 +1,17 @@
 import { LoadingSpinner } from '@app/components/common/LoadingSpinner';
 import { ActionOperations, ResultStatus } from '@app/types/types';
-import { api, SystemEventResponseApi } from '@api';
+import { SystemEventResponseApi } from '@api';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import { getResultIcon, renderOperationLabel } from '@app/utils/renderUtils';
 import { useTableSort } from '@app/hooks/useTableSort.tsx';
 import { EmptyState } from '@patternfly/react-core';
 import { TablePagination } from '@app/components/common/TablesPagination';
-import { paginateItems } from '@app/utils/tableFilters';
 import { SearchIcon } from '@patternfly/react-icons';
 import { AuditLogsTableProps } from './types';
 import { Link } from 'react-router-dom';
+import { useEvents } from '@app/hooks/useEvents';
+import { useTablePagination } from '@app/hooks/useTablePagination';
 
 const columnNames = {
   action: 'Action',
@@ -34,57 +35,42 @@ export const AuditLogsTable: React.FunctionComponent<AuditLogsTableProps> = ({
   result,
   triggered_by,
 }) => {
-  // Pagination settings
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(10);
-  const [filteredCount, setFilteredCount] = useState(0);
-
-  const [data, setData] = useState<SystemEventResponseApi[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [filteredData, setFilteredData] = useState<SystemEventResponseApi[]>([]);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const { data: systemEvents } = await api.events.eventsList();
-        setData(systemEvents.items || []);
-      } catch (error) {
-        console.error('Error fetching system wide events:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  // Apply filters when data or filter props change
-  useEffect(() => {
-    let filtered = data;
+  const { data: allEvents = [], isLoading } = useEvents();
+
+  const filtered = useMemo(() => {
+    let filteredResult = allEvents;
 
     if (accountName) {
-      filtered = filtered.filter(event => event.accountId?.toLowerCase().includes(accountName.toLowerCase()));
+      filteredResult = filteredResult.filter(event =>
+        event.accountId?.toLowerCase().includes(accountName.toLowerCase())
+      );
     }
 
     if (action?.length) {
-      filtered = filtered.filter(event => action.includes(event.action as ActionOperations));
+      filteredResult = filteredResult.filter(event => action.includes(event.action as ActionOperations));
     }
 
     if (provider?.length) {
-      filtered = filtered.filter(event => event.provider && provider.some(p => p === event.provider));
+      filteredResult = filteredResult.filter(event => event.provider && provider.some(p => p === event.provider));
     }
 
     if (result?.length) {
-      filtered = filtered.filter(event => result.includes(event.result as ResultStatus));
+      filteredResult = filteredResult.filter(event => result.includes(event.result as ResultStatus));
     }
 
     if (triggered_by) {
-      filtered = filtered.filter(event => event.triggeredBy?.toLowerCase().includes(triggered_by.toLowerCase()));
+      filteredResult = filteredResult.filter(event =>
+        event.triggeredBy?.toLowerCase().includes(triggered_by.toLowerCase())
+      );
     }
 
-    setFilteredCount(filtered.length);
-    setFilteredData(paginateItems(filtered, page, perPage));
-  }, [data, accountName, action, provider, result, triggered_by, page, perPage]);
+    return filteredResult;
+  }, [allEvents, accountName, action, provider, result, triggered_by]);
+
+  const { page, perPage, setPage, setPerPage, paginatedData, totalItems } = useTablePagination({
+    data: filtered,
+    filterDeps: [accountName, action, provider, result, triggered_by],
+  });
 
   const getSortableRowValues = (event: SystemEventResponseApi): (string | number | null)[] => {
     const { action, result, resourceId, accountId, provider, triggeredBy, description, timestamp } = event;
@@ -101,14 +87,14 @@ export const AuditLogsTable: React.FunctionComponent<AuditLogsTableProps> = ({
   };
 
   const { sortedData, getSortParams } = useTableSort<SystemEventResponseApi>(
-    filteredData,
+    paginatedData,
     getSortableRowValues,
     7,
     'desc'
   );
 
-  if (loading) return <LoadingSpinner />;
-  if (filteredCount === 0) return <EmptyStateNoFound />;
+  if (isLoading) return <LoadingSpinner />;
+  if (totalItems === 0) return <EmptyStateNoFound />;
 
   return (
     <React.Fragment>
@@ -146,7 +132,6 @@ export const AuditLogsTable: React.FunctionComponent<AuditLogsTableProps> = ({
               <Td>{event.provider}</Td>
               <Td>{event.triggeredBy}</Td>
               <Td>{event.description}</Td>
-              {/*TODO. Hardcoded, adjust later if needed*/}
               <Td>
                 {getResultIcon(event.result as ResultStatus)} {event.result}
               </Td>
@@ -156,7 +141,7 @@ export const AuditLogsTable: React.FunctionComponent<AuditLogsTableProps> = ({
         </Tbody>
       </Table>
       <TablePagination
-        itemCount={filteredCount}
+        itemCount={totalItems}
         page={page}
         perPage={perPage}
         onSetPage={setPage}

src/app/Actions/Scheduler/components/AccountSelector.tsx

@@ -56,6 +56,7 @@ export const AccountTypeaheadSelect: React.FunctionComponent<AccountTypeaheadSel
       <Select
         id="account-typeahead"
         isOpen={isOpen}
+        isScrollable={true}
         onOpenChange={setIsOpen}
         onSelect={onSelect}
         selected={selectedAccount?.accountId ?? null}