Merge pull request #272 from aali309/pagination-release-4.18

Add Pagination in release branch 4.18

Author: keithchong

locales/en/plugin__gitops-plugin.json

@@ -352,5 +352,13 @@
   "You don't have permission to perform this action": "You don't have permission to perform this action",
   "annotations": "annotations",
   "annotation": "annotation",
-  "No owner": "No owner"
+  "No owner": "No owner",
+  "Pagination": "Pagination",
+  "Go to first page": "Go to first page",
+  "Go to previous page": "Go to previous page",
+  "Go to next page": "Go to next page",
+  "Go to last page": "Go to last page",
+  "Items per page": "Items per page",
+  "per page": "per page",
+  "of": "of"
 }

locales/ja/plugin__gitops-plugin.json

@@ -352,5 +352,13 @@
   "You don't have permission to perform this action": "You don't have permission to perform this action",
   "annotations": "annotations",
   "annotation": "annotation",
-  "No owner": "No owner"
+  "No owner": "No owner",
+  "Pagination": "Pagination",
+  "Go to first page": "Go to first page",
+  "Go to previous page": "Go to previous page",
+  "Go to next page": "Go to next page",
+  "Go to last page": "Go to last page",
+  "Items per page": "Items per page",
+  "per page": "per page",
+  "of": "of"
 }

locales/ko/plugin__gitops-plugin.json

@@ -352,5 +352,13 @@
   "You don't have permission to perform this action": "You don't have permission to perform this action",
   "annotations": "annotations",
   "annotation": "annotation",
-  "No owner": "No owner"
+  "No owner": "No owner",
+  "Pagination": "Pagination",
+  "Go to first page": "Go to first page",
+  "Go to previous page": "Go to previous page",
+  "Go to next page": "Go to next page",
+  "Go to last page": "Go to last page",
+  "Items per page": "Items per page",
+  "per page": "per page",
+  "of": "of"
 }

locales/zh/plugin__gitops-plugin.json

@@ -352,5 +352,13 @@
   "You don't have permission to perform this action": "You don't have permission to perform this action",
   "annotations": "annotations",
   "annotation": "annotation",
-  "No owner": "No owner"
+  "No owner": "No owner",
+  "Pagination": "Pagination",
+  "Go to first page": "Go to first page",
+  "Go to previous page": "Go to previous page",
+  "Go to next page": "Go to next page",
+  "Go to last page": "Go to last page",
+  "Items per page": "Items per page",
+  "per page": "per page",
+  "of": "of"
 }

src/gitops/components/imageupdater/ImageUpdaterList.tsx

@@ -38,7 +38,12 @@ import {
   ShowOperandsInAllNamespacesRadioGroup,
   useShowOperandsInAllNamespaces,
 } from '../shared/AllNamespaces';
-import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
+import {
+  GitOpsDataViewTable,
+  useGitOpsDataViewSort,
+  useGitOpsListPagePagination,
+} from '../shared/DataView';
+import { filterByConsoleNameAndLabels, parseLabelFilterParam } from '../shared/listPageTextFilters';
 import MetadataLabels from '../shared/MetadataLabels';
 
 import { useImageUpdaterActionsProvider } from './hooks/useImageUpdaterActionsProvider';
@@ -87,6 +92,8 @@ const ImageUpdaterList: React.FC<ImageUpdaterListTabProps> = ({
 
   // Get search query from URL parameters
   const searchQuery = searchParams.get('q') || '';
+  const nameQuery = searchParams.get('name') || '';
+  const labelsParam = searchParams.get('labels') || '';
 
   const { t } = useTranslation('plugin__gitops-plugin');
 
@@ -98,11 +105,16 @@ const ImageUpdaterList: React.FC<ImageUpdaterListTabProps> = ({
   const filters = getFilters(t);
   const [data, filteredData, onFilterChange] = useListPageFilter(sortedItems, filters);
 
+  const filteredByNameAndLabels = React.useMemo(
+    () => filterByConsoleNameAndLabels(filteredData, nameQuery, parseLabelFilterParam(labelsParam)),
+    [filteredData, nameQuery, labelsParam],
+  );
+
   const filteredBySearch = React.useMemo(() => {
-    if (!searchQuery) return filteredData;
+    if (!searchQuery) return filteredByNameAndLabels;
 
     const lowerQuery = searchQuery.toLowerCase();
-    return filteredData.filter((item) => {
+    return filteredByNameAndLabels.filter((item) => {
       const name = item.metadata?.name || '';
       const labels = item.metadata?.labels || {};
       return (
@@ -116,9 +128,14 @@ const ImageUpdaterList: React.FC<ImageUpdaterListTabProps> = ({
         })
       );
     });
-  }, [filteredData, searchQuery]);
+  }, [filteredByNameAndLabels, searchQuery]);
 
-  const rows = useImageUpdaterRowsDV(filteredBySearch as ImageUpdaterKind[], effectiveNamespace);
+  const { pagination, pagedItems, itemCount } = useGitOpsListPagePagination({
+    items: filteredBySearch as ImageUpdaterKind[],
+    namespace: effectiveNamespace,
+    searchParams,
+  });
+  const rows = useImageUpdaterRowsDV(pagedItems, effectiveNamespace);
 
   const hasItems = React.useMemo(() => {
     return sortedItems.length > 0;
@@ -207,6 +224,8 @@ const ImageUpdaterList: React.FC<ImageUpdaterListTabProps> = ({
           emptyState={empty}
           isError={!!loadError}
           errorState={error || undefined}
+          itemCount={itemCount}
+          pagination={pagination}
         />
       </ListPageBody>
     </div>

src/gitops/components/project/ProjectList.tsx

@@ -36,7 +36,12 @@ import {
   ShowOperandsInAllNamespacesRadioGroup,
   useShowOperandsInAllNamespaces,
 } from '../shared/AllNamespaces';
-import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
+import {
+  GitOpsDataViewTable,
+  useGitOpsDataViewSort,
+  useGitOpsListPagePagination,
+} from '../shared/DataView';
+import { filterByConsoleNameAndLabels, parseLabelFilterParam } from '../shared/listPageTextFilters';
 import { MetadataLabels } from '../shared/MetadataLabels/MetadataLabels';
 
 import { useProjectActionsProvider } from './hooks/useProjectActionsProvider';
@@ -101,6 +106,8 @@ const ProjectList: React.FC<ProjectListTabProps> = ({
 
   // Get search query from URL parameters
   const searchQuery = searchParams.get('q') || '';
+  const nameQuery = searchParams.get('name') || '';
+  const labelsParam = searchParams.get('labels') || '';
 
   const { t } = useTranslation('plugin__gitops-plugin');
 
@@ -112,11 +119,16 @@ const ProjectList: React.FC<ProjectListTabProps> = ({
   const filters = getFilters(t, applications, appsLoaded);
   const [data, filteredData, onFilterChange] = useListPageFilter(sortedProjects, filters);
 
+  const filteredByNameAndLabels = React.useMemo(
+    () => filterByConsoleNameAndLabels(filteredData, nameQuery, parseLabelFilterParam(labelsParam)),
+    [filteredData, nameQuery, labelsParam],
+  );
+
   // Filter by search query if present (after other filters)
   const filteredBySearch = React.useMemo(() => {
-    if (!searchQuery) return filteredData;
+    if (!searchQuery) return filteredByNameAndLabels;
 
-    return filteredData.filter((project) => {
+    return filteredByNameAndLabels.filter((project) => {
       const name = project.metadata?.name || '';
       const description = project.spec?.description || '';
       const labels = project.metadata?.labels || {};
@@ -136,9 +148,14 @@ const ProjectList: React.FC<ProjectListTabProps> = ({
         })
       );
     });
-  }, [filteredData, searchQuery]);
+  }, [filteredByNameAndLabels, searchQuery]);
 
-  const rows = useProjectsRowsDV(filteredBySearch, namespace, applications, appsLoaded);
+  const { pagination, pagedItems, itemCount } = useGitOpsListPagePagination({
+    items: filteredBySearch,
+    namespace,
+    searchParams,
+  });
+  const rows = useProjectsRowsDV(pagedItems, namespace, applications, appsLoaded);
   const showNamespaceColumn = !namespace || namespace === '';
 
   // Check if there are projects initially (before search)
@@ -236,6 +253,8 @@ const ProjectList: React.FC<ProjectListTabProps> = ({
             emptyState={empty}
             isError={!!loadError}
             errorState={error || undefined}
+            itemCount={itemCount}
+            pagination={pagination}
           />
         </div>
       </ListPageBody>

src/gitops/components/rollout/RolloutList.tsx

@@ -36,7 +36,16 @@ import {
   ShowOperandsInAllNamespacesRadioGroup,
   useShowOperandsInAllNamespaces,
 } from '../shared/AllNamespaces';
-import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
+import {
+  GitOpsDataViewTable,
+  useGitOpsDataViewSort,
+  useGitOpsListPagePagination,
+} from '../shared/DataView';
+import {
+  filterByConsoleNameAndLabels,
+  filterResourcesByLabelQuery,
+  parseLabelFilterParam,
+} from '../shared/listPageTextFilters';
 import { MetadataLabels } from '../shared/MetadataLabels/MetadataLabels';
 
 import { useRolloutActionsProvider } from './hooks/useRolloutActionsProvider';
@@ -112,6 +121,8 @@ const RolloutList: React.FC<RolloutListTabProps> = ({
 
   // Get search query from URL parameters
   const searchQuery = searchParams.get('q') || '';
+  const nameQuery = searchParams.get('name') || '';
+  const labelsParam = searchParams.get('labels') || '';
 
   const { t } = useGitOpsTranslation();
 
@@ -123,22 +134,22 @@ const RolloutList: React.FC<RolloutListTabProps> = ({
   const filters = getFilters(t);
   const [data, filteredData, onFilterChange] = useListPageFilter(sortedRollouts, filters);
 
-  // TODO: use alternate filter since it is deprecated. See DataTableView potentially
-  // Filter by search query if present (after other filters)
-  const filteredBySearch = React.useMemo(() => {
-    if (!searchQuery) return filteredData;
+  const filteredByNameAndLabels = React.useMemo(
+    () => filterByConsoleNameAndLabels(filteredData, nameQuery, parseLabelFilterParam(labelsParam)),
+    [filteredData, nameQuery, labelsParam],
+  );
 
-    return filteredData.filter((app) => {
-      const labels = app.metadata?.labels || {};
-      // Check if any label matches the search query
-      return Object.entries(labels).some(([key, value]) => {
-        const labelSelector = `${key}=${value}`;
-        return labelSelector.includes(searchQuery) || key.includes(searchQuery);
-      });
-    });
-  }, [filteredData, searchQuery]);
+  const filteredBySearch = React.useMemo(
+    () => filterResourcesByLabelQuery(filteredByNameAndLabels, searchQuery),
+    [filteredByNameAndLabels, searchQuery],
+  );
 
-  const rows = useRolloutsRowsDV(filteredBySearch, namespace, t);
+  const { pagination, pagedItems, itemCount } = useGitOpsListPagePagination({
+    items: filteredBySearch,
+    namespace,
+    searchParams,
+  });
+  const rows = useRolloutsRowsDV(pagedItems, namespace, t);
 
   const empty = (
     <Tbody>
@@ -206,7 +217,7 @@ const RolloutList: React.FC<RolloutListTabProps> = ({
                 onFilterChange={onFilterChange}
               />
             </span>
-            {rows.length > 0 && !loadError && (
+            {filteredBySearch.length > 0 && !loadError && (
               <span className="rollout-list-page__topology-link pf-m-mb-sm">
                 {topologyLink(topologyUrl, t)}
               </span>
@@ -220,6 +231,8 @@ const RolloutList: React.FC<RolloutListTabProps> = ({
           emptyState={empty}
           isError={!!loadError}
           errorState={error || undefined}
+          itemCount={itemCount}
+          pagination={pagination}
         />
       </ListPageBody>
     </>