From 56483d869f9a25cc1a0736617f9f0307a1a9347f Mon Sep 17 00:00:00 2001
From: Robb Hamilton <rhamilto@redhat.com>
Date: Mon, 4 May 2026 19:06:37 -0400
Subject: [PATCH] OCPBUGS-84876: Add bottom pagination to ConsoleDataView for
 mobile responsiveness

The ConsoleDataView component was missing bottom pagination, which is
required by PatternFly design guidelines for proper mobile responsiveness.
On mobile viewports, the top pagination condenses to just an item count,
so full pagination controls must be available in the footer/bottom.

This change adds a Pagination component with variant="bottom" after the
DataViewTable to ensure pagination controls remain accessible on all
viewport sizes.

Additionally, adds complete i18n support to both top and bottom pagination
components with proper aria-labels for navigation buttons (first, previous,
next, last pages) and translated visible text (ofWord, itemsPerPage,
perPageSuffix) to ensure full accessibility and internationalization.

(cherry picked from commit 262fa861649883871fae2f7101b8ebdd8cb2b2f8)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../components/data-view/ConsoleDataView.tsx  | 35 +++++++++++++------
 frontend/public/locales/en/public.json        |  4 +++
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx b/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx
index f47b5bfc073..6998fc2e5be 100644
--- a/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx
+++ b/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx
@@ -5,7 +5,7 @@ import {
   ResponsiveActions,
   SkeletonTableBody,
 } from '@patternfly/react-component-groups';
-import { Bullseye, Pagination, Tooltip } from '@patternfly/react-core';
+import { Bullseye, Pagination, PaginationVariant, Tooltip } from '@patternfly/react-core';
 import {
   DataView,
   DataViewState,
@@ -151,6 +151,19 @@ export const ConsoleDataView = <
     return undefined;
   }, [filteredData.length, loaded]);
 
+  const paginationTitles = React.useMemo(
+    () => ({
+      ofWord: t('public~of'),
+      itemsPerPage: t('public~Items per page'),
+      perPageSuffix: t('public~per page'),
+      toFirstPageAriaLabel: t('public~Go to first page'),
+      toPreviousPageAriaLabel: t('public~Go to previous page'),
+      toNextPageAriaLabel: t('public~Go to next page'),
+      toLastPageAriaLabel: t('public~Go to last page'),
+    }),
+    [t],
+  );
+
   const dataViewFilterNodes = React.useMemo<React.ReactNode[]>(() => {
     const basicFilters: React.ReactNode[] = [];
 
@@ -225,15 +238,7 @@ export const ConsoleDataView = <
             )
           }
           pagination={
-            <Pagination
-              itemCount={filteredData.length}
-              titles={{
-                ofWord: t('public~of'),
-                itemsPerPage: t('public~Items per page'),
-                perPageSuffix: t('public~per page'),
-              }}
-              {...pagination}
-            />
+            <Pagination itemCount={filteredData.length} titles={paginationTitles} {...pagination} />
           }
         />
         <InnerScrollContainer>
@@ -247,6 +252,16 @@ export const ConsoleDataView = <
             data-test="data-view-table"
           />
         </InnerScrollContainer>
+        <DataViewToolbar
+          pagination={
+            <Pagination
+              itemCount={filteredData.length}
+              titles={paginationTitles}
+              variant={PaginationVariant.bottom}
+              {...pagination}
+            />
+          }
+        />
       </DataView>
     </StatusBox>
   );
diff --git a/frontend/public/locales/en/public.json b/frontend/public/locales/en/public.json
index 1c8c279d686..3fee354fe27 100644
--- a/frontend/public/locales/en/public.json
+++ b/frontend/public/locales/en/public.json
@@ -1754,6 +1754,10 @@
   "Admission Webhook Warning": "Admission Webhook Warning",
   "{{kind}} {{name}} violates policy {{warning}}": "{{kind}} {{name}} violates policy {{warning}}",
   "Learn more": "Learn more",
+  "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",
   "Filter by name": "Filter by name",
   "{{label}} table": "{{label}} table",
   "Filter by label": "Filter by label",