From 262fa861649883871fae2f7101b8ebdd8cb2b2f8 Mon Sep 17 00:00:00 2001
From: Robb Hamilton <rhamilto@redhat.com>
Date: Fri, 1 May 2026 13:46:46 -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.

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 c4f8473b336..13c130923f3 100644
--- a/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx
+++ b/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx
@@ -6,7 +6,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,
   DataViewFilters,
@@ -134,6 +134,19 @@ export const ConsoleDataView = <
     return undefined;
   }, [filteredData.length, loaded]);
 
+  const paginationTitles = 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 = useMemo<React.ReactNode[]>(() => {
     const basicFilters: ReactNode[] = [];
 
@@ -221,15 +234,7 @@ export const ConsoleDataView = <
             </ResponsiveActions>
           }
           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>
@@ -246,6 +251,16 @@ export const ConsoleDataView = <
             isResizable={isResizable}
           />
         </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 73c8b8e9660..a18d1d572c4 100644
--- a/frontend/public/locales/en/public.json
+++ b/frontend/public/locales/en/public.json
@@ -1766,6 +1766,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",
   "Reset column widths": "Reset column widths",
   "{{label}} table": "{{label}} table",