Add pagination to the other tables under details tabs

src/gitops/components/application/ApplicationResourcesView.tsx

@@ -25,7 +25,11 @@ import { DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/esm/Dat
 import { CubesIcon } from '@patternfly/react-icons';
 import { Tbody, Td, Tr } from '@patternfly/react-table';
 
-import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
+import {
+  GitOpsDataViewTable,
+  useGitOpsDataViewSort,
+  useGitOpsListPagePagination,
+} from '../shared/DataView';
 import ResourceActionsCell from '../shared/ResourceActionsCell/ResourceActionsCell';
 
 import { ApplicationGraphView } from './graph/ApplicationGraphView';
@@ -57,7 +61,8 @@ const ApplicationResourcesView: React.FC<ApplicationResourcesViewProps> = ({
     [],
   );
 
-  const { sortBy, direction, getSortParams } = useGitOpsDataViewSort(columnSortConfig);
+  const { searchParams, sortBy, direction, getSortParams } =
+    useGitOpsDataViewSort(columnSortConfig);
   const columnsDV = useResourceColumnsDV(getSortParams);
   const sortedResources = React.useMemo(
     () => sortData(resources, sortBy, direction),
@@ -79,8 +84,18 @@ const ApplicationResourcesView: React.FC<ApplicationResourcesViewProps> = ({
     resourceFilters,
   );
 
+  const {
+    pagination,
+    pagedItems: pagedResources,
+    itemCount,
+  } = useGitOpsListPagePagination({
+    items: filteredResources,
+    namespace: application?.metadata?.namespace,
+    searchParams,
+  });
+
   const isEmptyResources = filteredResources.length === 0;
-  const rows = useResourceRowsDV(filteredResources, application, argoBaseURL);
+  const rows = useResourceRowsDV(pagedResources, application, argoBaseURL);
   const isListView = viewType === ApplicationResourcesViewType.list;
 
   const empty = (
@@ -141,6 +156,8 @@ const ApplicationResourcesView: React.FC<ApplicationResourcesViewProps> = ({
                 emptyState={empty}
                 isEmpty={isEmptyResources}
                 activeState={isEmptyResources ? DataViewState.empty : null}
+                itemCount={itemCount}
+                pagination={pagination}
               />
             ) : (
               <div className="gitops-graph-list-view__graph">

src/gitops/components/application/ApplicationSourcesTab.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
+import { useSearchParams } from 'react-router-dom-v5-compat';
 
 import { useArgoServer } from '@gitops/hooks/useArgoServer';
 import { ApplicationKind, ApplicationSource } from '@gitops/models/ApplicationModel';
@@ -23,7 +24,7 @@ import { CubesIcon, GithubIcon } from '@patternfly/react-icons';
 import { Tbody, Td, Tr } from '@patternfly/react-table';
 
 import ArgoCDLink from '../shared/ArgoCDLink/ArgoCDLink';
-import { GitOpsDataViewTable } from '../shared/DataView';
+import { GitOpsDataViewTable, useGitOpsListPagePagination } from '../shared/DataView';
 
 type ApplicationDetailsTabProps = RouteComponentProps<{
   ns: string;
@@ -181,7 +182,17 @@ export const useRowsDV = (sources: ApplicationSource[]): DataViewTr[] => {
 
 export const SourceList: React.FC<SourceListProps> = ({ sources, obj, argoServer }) => {
   const columns = useColumnsDV();
-  const rows = useRowsDV(sources);
+  const [searchParams] = useSearchParams();
+  const {
+    pagination,
+    pagedItems: pagedSources,
+    itemCount,
+  } = useGitOpsListPagePagination({
+    items: sources,
+    namespace: obj?.metadata?.namespace,
+    searchParams,
+  });
+  const rows = useRowsDV(pagedSources);
   const argoUrl = getApplicationArgoUrl(argoServer, obj);
   const empty = (
     <Tbody>
@@ -215,7 +226,9 @@ export const SourceList: React.FC<SourceListProps> = ({ sources, obj, argoServer
         rows={rows}
         columns={columns}
         emptyState={empty}
-        isEmpty={rows.length === 0}
+        isEmpty={sources.length === 0}
+        itemCount={itemCount}
+        pagination={pagination}
       />
     </>
   );

src/gitops/components/application/ApplicationSyncStatusTab.tsx

@@ -34,7 +34,11 @@ import { CubesIcon } from '@patternfly/react-icons';
 import { Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
 
 import { DetailsDescriptionGroup } from '../shared/BaseDetailsSummary/BaseDetailsSummary';
-import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
+import {
+  GitOpsDataViewTable,
+  useGitOpsDataViewSort,
+  useGitOpsListPagePagination,
+} from '../shared/DataView';
 import ResourceActionsCell from '../shared/ResourceActionsCell/ResourceActionsCell';
 
 import { ConditionsPopover } from './Conditions/ConditionsPopover';
@@ -62,13 +66,24 @@ const ApplicationSyncStatusTab: React.FC<ApplicationSyncStatusTabProps> = ({ obj
     [],
   );
 
-  const { sortBy, direction, getSortParams } = useGitOpsDataViewSort(columnSortConfig);
+  const { searchParams, sortBy, direction, getSortParams } =
+    useGitOpsDataViewSort(columnSortConfig);
   const columnsDV = useResourceColumnsDV(getSortParams);
   const sortedResources = React.useMemo(() => {
     return sortData(resources, sortBy, direction);
   }, [resources, sortBy, direction]);
 
-  const rows = useResourceRowsDV(sortedResources, obj, argoUrl);
+  const {
+    pagination,
+    pagedItems: pagedResources,
+    itemCount,
+  } = useGitOpsListPagePagination({
+    items: sortedResources,
+    namespace: obj?.metadata?.namespace,
+    searchParams,
+  });
+
+  const rows = useResourceRowsDV(pagedResources, obj, argoUrl);
 
   const empty = (
     <Tbody>
@@ -247,6 +262,8 @@ const ApplicationSyncStatusTab: React.FC<ApplicationSyncStatusTabProps> = ({ obj
           emptyState={empty}
           isEmpty={sortedResources.length === 0}
           activeState={resources.length === 0 ? DataViewState.empty : null}
+          itemCount={itemCount}
+          pagination={pagination}
         />
       </PageSection>
     </div>

src/gitops/components/application/History/History.tsx

@@ -14,7 +14,11 @@ import { DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/esm/Dat
 import { CubesIcon } from '@patternfly/react-icons';
 import { Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
 
-import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../../shared/DataView';
+import {
+  GitOpsDataViewTable,
+  useGitOpsDataViewSort,
+  useGitOpsListPagePagination,
+} from '../../shared/DataView';
 
 import './History.scss';
 
@@ -30,14 +34,26 @@ const HistoryList: React.FC<HistoryListProps> = ({ history, obj }) => {
     [],
   );
 
-  const { sortBy, direction, getSortParams } = useGitOpsDataViewSort(columnSortConfig);
+  const { searchParams, sortBy, direction, getSortParams } =
+    useGitOpsDataViewSort(columnSortConfig);
   const columnsDV = useColumnsDV(getSortParams);
 
-  const sortedHistory = React.useMemo(() => {
-    return sortData(history, sortBy, direction);
-  }, [history, sortBy, direction]);
+  const displayHistory = React.useMemo(
+    () => sortData([...history].reverse(), sortBy, direction),
+    [history, sortBy, direction],
+  );
+
+  const {
+    pagination,
+    pagedItems: pagedHistory,
+    itemCount,
+  } = useGitOpsListPagePagination({
+    items: displayHistory,
+    namespace: obj?.metadata?.namespace,
+    searchParams,
+  });
 
-  const rows = useRowsDV(sortedHistory, obj);
+  const rows = useRowsDV(pagedHistory, obj);
 
   const argoServer = useArgoServer(obj);
   const argoUrl = getApplicationArgoUrl(argoServer, obj);
@@ -75,7 +91,9 @@ const HistoryList: React.FC<HistoryListProps> = ({ history, obj }) => {
         rows={rows}
         columns={columnsDV}
         emptyState={empty}
-        isEmpty={rows.length === 0}
+        isEmpty={displayHistory.length === 0}
+        itemCount={itemCount}
+        pagination={pagination}
       />
     </div>
   );
@@ -177,7 +195,7 @@ const useRowsDV = (history: ApplicationHistory[], app: ApplicationKind): DataVie
       },
     ]);
   });
-  return rows.reverse();
+  return rows;
 };
 
 const useColumnsDV = (getSortParams: (columnIndex: number) => ThProps['sort']) => {

src/gitops/components/imageupdater/ImageUpdaterRecentUpdatesTab.tsx

@@ -15,7 +15,11 @@ import { Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
 
 import { ImageUpdaterKind, ImageUpdaterRecentUpdate } from '../../models/ImageUpdaterModel';
 import { useGitOpsTranslation } from '../../utils/hooks/useGitOpsTranslation';
-import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
+import {
+  GitOpsDataViewTable,
+  useGitOpsDataViewSort,
+  useGitOpsListPagePagination,
+} from '../shared/DataView';
 
 type ImageUpdaterRecentUpdatesTabProps = RouteComponentProps<{ ns: string; name: string }> & {
   obj?: ImageUpdaterKind;
@@ -32,7 +36,8 @@ const ImageUpdaterRecentUpdatesTab: React.FC<ImageUpdaterRecentUpdatesTabProps>
     [],
   );
 
-  const { sortBy, direction, getSortParams } = useGitOpsDataViewSort(columnSortConfig);
+  const { searchParams, sortBy, direction, getSortParams } =
+    useGitOpsDataViewSort(columnSortConfig);
 
   const columnsDV = useColumnsDV(getSortParams, t);
 
@@ -41,7 +46,17 @@ const ImageUpdaterRecentUpdatesTab: React.FC<ImageUpdaterRecentUpdatesTabProps>
     return sortData(updates, sortBy, direction);
   }, [obj, sortBy, direction]);
 
-  const rows = useRowsDV(sortedUpdates);
+  const {
+    pagination,
+    pagedItems: pagedUpdates,
+    itemCount,
+  } = useGitOpsListPagePagination({
+    items: sortedUpdates,
+    namespace: obj?.metadata?.namespace,
+    searchParams,
+  });
+
+  const rows = useRowsDV(pagedUpdates);
 
   if (!obj) {
     return null;
@@ -74,7 +89,9 @@ const ImageUpdaterRecentUpdatesTab: React.FC<ImageUpdaterRecentUpdatesTabProps>
           rows={rows}
           columns={columnsDV}
           emptyState={empty}
-          isEmpty={rows.length === 0}
+          isEmpty={sortedUpdates.length === 0}
+          itemCount={itemCount}
+          pagination={pagination}
         />
       </PageSection>
     </div>

src/gitops/components/project/ProjectRolesTab.tsx

@@ -19,7 +19,11 @@ import { AppProjectKind, Role } from '../../models/AppProjectModel';
 import { ArgoServer, getArgoServerForProject } from '../../utils/gitops';
 import { useGitOpsTranslation } from '../../utils/hooks/useGitOpsTranslation';
 import { ArgoCDLink } from '../shared/ArgoCDLink/ArgoCDLink';
-import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
+import {
+  GitOpsDataViewTable,
+  useGitOpsDataViewSort,
+  useGitOpsListPagePagination,
+} from '../shared/DataView';
 
 /**
  * Parses an Argo CD policy string and returns a formatted React element for tooltip
@@ -102,13 +106,24 @@ const ProjectRolesTab: React.FC<ProjectRolesTabProps> = ({ obj }) => {
     [],
   );
 
-  const { sortBy, direction, getSortParams } = useGitOpsDataViewSort(columnSortConfig);
+  const { searchParams, sortBy, direction, getSortParams } =
+    useGitOpsDataViewSort(columnSortConfig);
   const columnsDV = useRolesColumnsDV(getSortParams, t);
   const sortedRoles = React.useMemo(() => {
     return sortRolesData(roles, sortBy, direction);
   }, [roles, sortBy, direction]);
 
-  const rows = useRolesRowsDV(sortedRoles, t);
+  const {
+    pagination,
+    pagedItems: pagedRoles,
+    itemCount,
+  } = useGitOpsListPagePagination({
+    items: sortedRoles,
+    namespace: obj?.metadata?.namespace,
+    searchParams,
+  });
+
+  const rows = useRolesRowsDV(pagedRoles, t);
 
   if (!obj) return null;
 
@@ -142,6 +157,8 @@ const ProjectRolesTab: React.FC<ProjectRolesTabProps> = ({ obj }) => {
         rows={rows}
         isEmpty={roles.length === 0}
         emptyState={empty}
+        itemCount={itemCount}
+        pagination={pagination}
       />
     </PageSection>
   );

src/gitops/components/project/ProjectSyncWindowsTab.tsx

@@ -12,7 +12,11 @@ import { AppProjectKind, SyncWindow } from '../../models/AppProjectModel';
 import { ArgoServer, getArgoServerForProject } from '../../utils/gitops';
 import { useGitOpsTranslation } from '../../utils/hooks/useGitOpsTranslation';
 import { ArgoCDLink } from '../shared/ArgoCDLink/ArgoCDLink';
-import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
+import {
+  GitOpsDataViewTable,
+  useGitOpsDataViewSort,
+  useGitOpsListPagePagination,
+} from '../shared/DataView';
 
 type ProjectSyncWindowsTabProps = RouteComponentProps<{ ns: string; name: string }> & {
   obj?: AppProjectKind;
@@ -52,13 +56,24 @@ const ProjectSyncWindowsTab: React.FC<ProjectSyncWindowsTabProps> = ({ obj }) =>
     [],
   );
 
-  const { sortBy, direction, getSortParams } = useGitOpsDataViewSort(columnSortConfig);
+  const { searchParams, sortBy, direction, getSortParams } =
+    useGitOpsDataViewSort(columnSortConfig);
   const columnsDV = useSyncWindowsColumnsDV(getSortParams, t);
   const sortedSyncWindows = React.useMemo(() => {
     return sortSyncWindowsData(syncWindows, sortBy, direction);
   }, [syncWindows, sortBy, direction]);
 
-  const rows = useSyncWindowsRowsDV(sortedSyncWindows, t);
+  const {
+    pagination,
+    pagedItems: pagedSyncWindows,
+    itemCount,
+  } = useGitOpsListPagePagination({
+    items: sortedSyncWindows,
+    namespace: obj?.metadata?.namespace,
+    searchParams,
+  });
+
+  const rows = useSyncWindowsRowsDV(pagedSyncWindows, t);
 
   if (!obj) return null;
 
@@ -96,6 +111,8 @@ const ProjectSyncWindowsTab: React.FC<ProjectSyncWindowsTabProps> = ({ obj }) =>
         rows={rows}
         isEmpty={syncWindows.length === 0}
         emptyState={empty}
+        itemCount={itemCount}
+        pagination={pagination}
       />
     </PageSection>
   );