Internationalization: make i18nKey required in grafana-ui as well (#93154)

make i18nKey required in grafana-ui as well

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

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} />;
 };

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>
             )}

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": {

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": {