From 442bb1d35f0d59bacb90d5185d2079e94ba85cb1 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 10 Sep 2024 10:20:30 +0100
Subject: [PATCH] Internationalization: make `i18nKey` required in grafana-ui
 as well (#93154)

make i18nKey required in grafana-ui as well
---
 .../src/components/Table/TableCellInspector.tsx        |  2 +-
 packages/grafana-ui/src/utils/i18n.tsx                 | 10 +++++++++-
 .../configuration-tracker/components/ConfigCard.tsx    |  4 ++--
 public/locales/en-US/grafana.json                      | 10 ++++++++--
 public/locales/pseudo-LOCALE/grafana.json              | 10 ++++++++--
 5 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/TableCellInspector.tsx b/packages/grafana-ui/src/components/Table/TableCellInspector.tsx
index 24d6bcc649a..c9a78b51d53 100644
--- a/packages/grafana-ui/src/components/Table/TableCellInspector.tsx
+++ b/packages/grafana-ui/src/components/Table/TableCellInspector.tsx
@@ -71,7 +71,7 @@ export function TableCellInspector({ value, onDismiss, mode }: TableCellInspecto
     <Drawer onClose={onDismiss} title="Inspect value" tabs={tabBar}>
       <Stack direction="column" gap={2}>
         <ClipboardButton icon="copy" getText={() => text} style={{ marginLeft: 'auto', width: '200px' }}>
-          <Trans>Copy to Clipboard</Trans>
+          <Trans i18nKey="grafana-ui.table.copy">Copy to Clipboard</Trans>
         </ClipboardButton>
         {currentMode === 'code' ? (
           <CodeEditor
diff --git a/packages/grafana-ui/src/utils/i18n.tsx b/packages/grafana-ui/src/utils/i18n.tsx
index 06b32503000..5e688f48fee 100644
--- a/packages/grafana-ui/src/utils/i18n.tsx
+++ b/packages/grafana-ui/src/utils/i18n.tsx
@@ -1,4 +1,5 @@
 import i18next from 'i18next';
+import { ReactElement } from 'react';
 import { Trans as I18NextTrans, initReactI18next } from 'react-i18next'; // eslint-disable-line no-restricted-imports
 
 // We want to translate grafana-ui without introducing any breaking changes for consumers
@@ -23,7 +24,14 @@ function initI18n() {
   }
 }
 
-export const Trans: typeof I18NextTrans = (props) => {
+type I18NextTransType = typeof I18NextTrans;
+type I18NextTransProps = Parameters<I18NextTransType>[0];
+
+interface TransProps extends I18NextTransProps {
+  i18nKey: string;
+}
+
+export const Trans = (props: TransProps): ReactElement => {
   initI18n();
   return <I18NextTrans {...props} />;
 };
diff --git a/public/app/features/gops/configuration-tracker/components/ConfigCard.tsx b/public/app/features/gops/configuration-tracker/components/ConfigCard.tsx
index 12a4a50ff5e..2463442af5f 100644
--- a/public/app/features/gops/configuration-tracker/components/ConfigCard.tsx
+++ b/public/app/features/gops/configuration-tracker/components/ConfigCard.tsx
@@ -3,7 +3,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Button, Icon, LoadingPlaceholder, Stack, useStyles2 } from '@grafana/ui';
-import { Trans } from '@grafana/ui/src/utils/i18n';
+import { Trans } from 'app/core/internationalization';
 
 import { IrmCardConfiguration } from './ConfigureIRM';
 import { ProgressBar, StepsStatus } from './ProgressBar';
@@ -33,7 +33,7 @@ export function ConfigCard({ config, handleActionClick, isLoading = false }: Con
               <div className="fs-unmask">
                 <Stack direction="row" gap={0.5}>
                   <StepsStatus stepsDone={config.stepsDone} totalStepsToDo={config.totalStepsToDo} />
-                  <Trans>complete</Trans>
+                  <Trans i18nKey="configuration-tracker.config-card.complete">complete</Trans>
                 </Stack>
               </div>
             )}
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 24973b2d129..6545ccb7118 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -366,7 +366,11 @@
     },
     "save": "Save"
   },
-  "complete": "complete",
+  "configuration-tracker": {
+    "config-card": {
+      "complete": "complete"
+    }
+  },
   "connections": {
     "connect-data": {
       "category-header-label": "Data sources",
@@ -378,7 +382,6 @@
       "placeholder": "Search all"
     }
   },
-  "Copy to Clipboard": "Copy to Clipboard",
   "correlations": {
     "add-new": "Add new",
     "alert": {
@@ -945,6 +948,9 @@
     },
     "spinner": {
       "aria-label": "Loading"
+    },
+    "table": {
+      "copy": "Copy to Clipboard"
     }
   },
   "graph": {
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index e091bb170ce..7390c89d1b8 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -366,7 +366,11 @@
     },
     "save": "Ŝävę"
   },
-  "complete": "čőmpľęŧę",
+  "configuration-tracker": {
+    "config-card": {
+      "complete": "čőmpľęŧę"
+    }
+  },
   "connections": {
     "connect-data": {
       "category-header-label": "Đäŧä şőūřčęş",
@@ -378,7 +382,6 @@
       "placeholder": "Ŝęäřčĥ äľľ"
     }
   },
-  "Copy to Clipboard": "Cőpy ŧő Cľįpþőäřđ",
   "correlations": {
     "add-new": "Åđđ ʼnęŵ",
     "alert": {
@@ -945,6 +948,9 @@
     },
     "spinner": {
       "aria-label": "Ŀőäđįʼnģ"
+    },
+    "table": {
+      "copy": "Cőpy ŧő Cľįpþőäřđ"
     }
   },
   "graph": {