From 8cdc687abf96617f241407efecf8ee310a85992e Mon Sep 17 00:00:00 2001
From: Collin Fingar <collin.fingar@grafana.com>
Date: Fri, 7 Mar 2025 11:12:07 -0500
Subject: [PATCH] i18n: Marking up Pagination and PageToolbar in Grafana-UI for
 translation (#101738)

* Grafana-UI: Pagination + PageToolbar i18n

* betterer results update for i18n fix

* Linting fix w/ import order
---
 .betterer.results                              | 10 ----------
 .../src/components/PageLayout/PageToolbar.tsx  | 18 ++++++++++++++----
 .../src/components/Pagination/Pagination.tsx   |  8 ++++++--
 public/locales/en-US/grafana.json              | 10 ++++++++++
 public/locales/pseudo-LOCALE/grafana.json      | 10 ++++++++++
 5 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index e26bf7cb08e..98094fcc972 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -615,16 +615,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"],
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "1"]
     ],
-    "packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx:5381": [
-      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"],
-      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "1"],
-      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "2"],
-      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "3"]
-    ],
-    "packages/grafana-ui/src/components/Pagination/Pagination.tsx:5381": [
-      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"],
-      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "1"]
-    ],
     "packages/grafana-ui/src/components/PanelChrome/PanelContext.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
index fa9a77c9d12..521b059ea8e 100644
--- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
+++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
@@ -7,6 +7,7 @@ import { selectors } from '@grafana/e2e-selectors';
 import { useStyles2 } from '../../themes/ThemeContext';
 import { getFocusStyles } from '../../themes/mixins';
 import { IconName } from '../../types';
+import { t } from '../../utils/i18n';
 import { Icon } from '../Icon/Icon';
 import { IconButton } from '../IconButton/IconButton';
 import { Link } from '../Link/Link';
@@ -82,6 +83,15 @@ export const PageToolbar = memo(
       </>
     );
 
+    const goBackLabel = t('grafana-ui.page-toolbar.go-back', 'Go back (Esc)');
+    const searchParentFolderLabel = t(
+      'grafana-ui.page-toolbar.search-parent-folder',
+      'Search dashboard in the {{parent}} folder',
+      { parent }
+    );
+    const searchDashboardNameLabel = t('grafana-ui.page-toolbar.search-dashboard-name', 'Search dashboard by name');
+    const searchLinksLabel = t('grafana-ui.page-toolbar.search-links', 'Search links');
+
     return (
       <nav className={mainStyle} aria-label={ariaLabel}>
         <div className={styles.leftWrapper}>
@@ -94,7 +104,7 @@ export const PageToolbar = memo(
             <div className={styles.pageIcon}>
               <IconButton
                 name="arrow-left"
-                tooltip="Go back (Esc)"
+                tooltip={goBackLabel}
                 tooltipPlacement="bottom"
                 size="xxl"
                 data-testid={selectors.components.BackButton.backArrow}
@@ -102,11 +112,11 @@ export const PageToolbar = memo(
               />
             </div>
           )}
-          <nav aria-label="Search links" className={styles.navElement}>
+          <nav aria-label={searchLinksLabel} className={styles.navElement}>
             {parent && parentHref && (
               <>
                 <Link
-                  aria-label={`Search dashboard in the ${parent} folder`}
+                  aria-label={searchParentFolderLabel}
                   className={cx(styles.titleText, styles.parentLink, styles.titleLink, styles.truncateText)}
                   href={parentHref}
                 >
@@ -126,7 +136,7 @@ export const PageToolbar = memo(
                   <h1 className={styles.h1Styles}>
                     {titleHref ? (
                       <Link
-                        aria-label="Search dashboard by name"
+                        aria-label={searchDashboardNameLabel}
                         className={cx(styles.titleText, styles.titleLink)}
                         href={titleHref}
                       >
diff --git a/packages/grafana-ui/src/components/Pagination/Pagination.tsx b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
index 5917185f2bb..901e5f68420 100644
--- a/packages/grafana-ui/src/components/Pagination/Pagination.tsx
+++ b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
@@ -2,6 +2,7 @@ import { css, cx } from '@emotion/css';
 import { useMemo } from 'react';
 
 import { useStyles2 } from '../../themes';
+import { t } from '../../utils/i18n';
 import { Button, ButtonVariant } from '../Button';
 import { Icon } from '../Icon/Icon';
 
@@ -97,12 +98,15 @@ export const Pagination = ({
     return null;
   }
 
+  const previousPageLabel = t('grafana-ui.pagination.previous-page', 'previous page');
+  const nextPageLabel = t('grafana-ui.pagination.next-page', 'next page');
+
   return (
     <div className={cx(styles.container, className)}>
       <ol>
         <li className={styles.item}>
           <Button
-            aria-label={`previous page`}
+            aria-label={previousPageLabel}
             size="sm"
             variant="secondary"
             onClick={() => onNavigate(currentPage - 1)}
@@ -114,7 +118,7 @@ export const Pagination = ({
         {pageButtons}
         <li className={styles.item}>
           <Button
-            aria-label={`next page`}
+            aria-label={nextPageLabel}
             size="sm"
             variant="secondary"
             onClick={() => onNavigate(currentPage + 1)}
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 0260c17611f..025e79c6e97 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -1914,6 +1914,16 @@
       "text-color-swatch": "Text color",
       "transparent-swatch": "Transparent"
     },
+    "page-toolbar": {
+      "go-back": "Go back (Esc)",
+      "search-dashboard-name": "Search dashboard by name",
+      "search-links": "Search links",
+      "search-parent-folder": "Search dashboard in the {{parent}} folder"
+    },
+    "pagination": {
+      "next-page": "next page",
+      "previous-page": "previous page"
+    },
     "secret-form-field": {
       "reset": "Reset"
     },
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index a0ac4afec8c..63bb823a2d0 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -1914,6 +1914,16 @@
       "text-color-swatch": "Ŧęχŧ čőľőř",
       "transparent-swatch": "Ŧřäʼnşpäřęʼnŧ"
     },
+    "page-toolbar": {
+      "go-back": "Ğő þäčĸ (Ēşč)",
+      "search-dashboard-name": "Ŝęäřčĥ đäşĥþőäřđ þy ʼnämę",
+      "search-links": "Ŝęäřčĥ ľįʼnĸş",
+      "search-parent-folder": "Ŝęäřčĥ đäşĥþőäřđ įʼn ŧĥę {{parent}} ƒőľđęř"
+    },
+    "pagination": {
+      "next-page": "ʼnęχŧ päģę",
+      "previous-page": "přęvįőūş päģę"
+    },
     "secret-form-field": {
       "reset": "Ŗęşęŧ"
     },