I18n: Require Trans i18nKey prop (#91399)

* I18n: Require Trans i18nKey prop

* fix lint errors

public/app/core/internationalization/index.tsx

@@ -1,5 +1,6 @@
 import i18n, { InitOptions, TFunction } from 'i18next';
 import LanguageDetector, { DetectorOptions } from 'i18next-browser-languagedetector';
+import { ReactElement } from 'react';
 import { Trans as I18NextTrans, initReactI18next } from 'react-i18next'; // eslint-disable-line no-restricted-imports
 
 import { DEFAULT_LANGUAGE, NAMESPACES, VALID_LANGUAGES } from './constants';
@@ -56,7 +57,14 @@ export function changeLanguage(locale: string) {
   return i18n.changeLanguage(validLocale);
 }
 
-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 => {
   return <I18NextTrans shouldUnescape ns={NAMESPACES} {...props} />;
 };
 

public/app/features/alerting/unified/components/Provisioning.tsx

@@ -41,7 +41,7 @@ export const ProvisioningBadge = ({
 
   if (tooltip) {
     const provenanceTooltip = (
-      <Trans i18nKey="alerting.provisioning.badge-tooltip-provenance" provenance={provenance}>
+      <Trans i18nKey="alerting.provisioning.badge-tooltip-provenance" values={{ provenance }}>
         This resource has been provisioned via {{ provenance }} and cannot be edited through the UI
       </Trans>
     );

public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx

@@ -146,7 +146,7 @@ function FolderGroupAndEvaluationInterval({
               <Stack direction="column" gap={1}>
                 {getValues('group') && getValues('evaluateEvery') && (
                   <span>
-                    <Trans i18nKey="alert-rule-form.evaluation-behaviour-group.text" evaluateEvery={evaluateEvery}>
+                    <Trans i18nKey="alert-rule-form.evaluation-behaviour-group.text" values={{ evaluateEvery }}>
                       All rules in the selected group are evaluated every {{ evaluateEvery }}.
                     </Trans>
                     {!isNewGroup && (

public/app/features/dashboard-scene/panel-edit/PanelDataPane/EmptyTransformationsMessage.tsx

@@ -10,10 +10,10 @@ export function EmptyTransformationsMessage(props: EmptyTransformationsProps) {
     <Box alignItems="center" padding={4}>
       <Stack direction="column" alignItems="center" gap={2}>
         <Text element="h3" textAlignment="center">
-          <Trans key="transformations.empty.add-transformation-header">Start transforming data</Trans>
+          <Trans i18nKey="transformations.empty.add-transformation-header">Start transforming data</Trans>
         </Text>
         <Text element="p" textAlignment="center" data-testid={selectors.components.Transforms.noTransformationsMessage}>
-          <Trans key="transformations.empty.add-transformation-body">
+          <Trans i18nKey="transformations.empty.add-transformation-body">
             Transformations allow data to be changed in various ways before your visualization is shown.
             <br />
             This includes joining data together, renaming fields, making calculations, formatting data for display, and

public/app/features/trails/ActionTabs/MetricOverviewScene.tsx

@@ -78,45 +78,39 @@ export class MetricOverviewScene extends SceneObjectBase<MetricOverviewSceneStat
           <>
             <Stack direction="column" gap={0.5}>
               <Text weight={'medium'}>
-                <Trans>Description</Trans>
+                <Trans i18nKey="trails.metric-overview.description-label">Description</Trans>
               </Text>
               <div style={{ maxWidth: 360 }}>
                 {metadata?.help ? (
                   <div>{metadata?.help}</div>
                 ) : (
                   <i>
-                    <Trans>No description available</Trans>
+                    <Trans i18nKey="trails.metric-overview.no-description">No description available</Trans>
                   </i>
                 )}
               </div>
             </Stack>
             <Stack direction="column" gap={0.5}>
               <Text weight={'medium'}>
-                <Trans>Type</Trans>
+                <Trans i18nKey="trails.metric-overview.type-label">Type</Trans>
               </Text>
               {metadata?.type ? (
                 <div>{metadata?.type}</div>
               ) : (
                 <i>
-                  <Trans>Unknown</Trans>
+                  <Trans i18nKey="trails.metric-overview.unknown-type">Unknown</Trans>
                 </i>
               )}
             </Stack>
             <Stack direction="column" gap={0.5}>
               <Text weight={'medium'}>
-                <Trans>Unit</Trans>
+                <Trans i18nKey="trails.metric-overview.unit-label">Unit</Trans>
               </Text>
-              {metadata?.unit ? (
-                <div>{metadata?.unit}</div>
-              ) : (
-                <i>
-                  <Trans>{unit}</Trans>
-                </i>
-              )}
+              {metadata?.unit ? <div>{metadata?.unit}</div> : <i>{unit}</i>}
             </Stack>
             <Stack direction="column" gap={0.5}>
               <Text weight={'medium'}>
-                <Trans>Labels</Trans>
+                <Trans i18nKey="trails.metric-overview.labels-label">Labels</Trans>
               </Text>
               {labelOptions.length === 0 && 'Unable to fetch labels.'}
               {labelOptions.map((l) => (

public/locales/en-US/grafana.json

@@ -1,6 +1,5 @@
 {
   "_comment": "The code is the source of truth for English phrases. They should be updated in the components directly, and additional plurals specified in this file.",
-  "{unit}": "{unit}",
   "access-control": {
     "add-permission": {
       "role-label": "Role",
@@ -669,7 +668,6 @@
       "message": "No data sources found"
     }
   },
-  "Description": "Description",
   "explore": {
     "add-to-dashboard": "Add to dashboard",
     "add-to-library-modal": {
@@ -940,7 +938,6 @@
       "refresh": "Refresh"
     }
   },
-  "Labels": "Labels",
   "library-panel": {
     "add-modal": {
       "cancel": "Cancel",
@@ -1541,7 +1538,6 @@
     },
     "title": "Latest from the blog"
   },
-  "No description available": "No description available",
   "notifications": {
     "empty-state": {
       "description": "Notifications you have received will appear here",
@@ -2233,15 +2229,22 @@
       "select-search-input": "Type to search (country, city, abbreviation)"
     }
   },
+  "trails": {
+    "metric-overview": {
+      "description-label": "Description",
+      "labels-label": "Labels",
+      "no-description": "No description available",
+      "type-label": "Type",
+      "unit-label": "Unit",
+      "unknown-type": "Unknown"
+    }
+  },
   "transformations": {
     "empty": {
       "add-transformation-body": "Transformations allow data to be changed in various ways before your visualization is shown.<1></1>This includes joining data together, renaming fields, making calculations, formatting data for display, and more.",
       "add-transformation-header": "Start transforming data"
     }
   },
-  "Type": "Type",
-  "Unit": "Unit",
-  "Unknown": "Unknown",
   "user-orgs": {
     "current-org-button": "Current",
     "name-column": "Name",

public/locales/pseudo-LOCALE/grafana.json

@@ -1,6 +1,5 @@
 {
   "_comment": "Ŧĥę čőđę įş ŧĥę şőūřčę őƒ ŧřūŧĥ ƒőř Ēʼnģľįşĥ pĥřäşęş. Ŧĥęy şĥőūľđ þę ūpđäŧęđ įʼn ŧĥę čőmpőʼnęʼnŧş đįřęčŧľy, äʼnđ äđđįŧįőʼnäľ pľūřäľş şpęčįƒįęđ įʼn ŧĥįş ƒįľę.",
-  "{unit}": "{ūʼnįŧ}",
   "access-control": {
     "add-permission": {
       "role-label": "Ŗőľę",
@@ -669,7 +668,6 @@
       "message": "Ńő đäŧä şőūřčęş ƒőūʼnđ"
     }
   },
-  "Description": "Đęşčřįpŧįőʼn",
   "explore": {
     "add-to-dashboard": "Åđđ ŧő đäşĥþőäřđ",
     "add-to-library-modal": {
@@ -940,7 +938,6 @@
       "refresh": "Ŗęƒřęşĥ"
     }
   },
-  "Labels": "Ŀäþęľş",
   "library-panel": {
     "add-modal": {
       "cancel": "Cäʼnčęľ",
@@ -1541,7 +1538,6 @@
     },
     "title": "Ŀäŧęşŧ ƒřőm ŧĥę þľőģ"
   },
-  "No description available": "Ńő đęşčřįpŧįőʼn äväįľäþľę",
   "notifications": {
     "empty-state": {
       "description": "Ńőŧįƒįčäŧįőʼnş yőū ĥävę řęčęįvęđ ŵįľľ äppęäř ĥęřę",
@@ -2233,15 +2229,22 @@
       "select-search-input": "Ŧypę ŧő şęäřčĥ (čőūʼnŧřy, čįŧy, äþþřęvįäŧįőʼn)"
     }
   },
+  "trails": {
+    "metric-overview": {
+      "description-label": "Đęşčřįpŧįőʼn",
+      "labels-label": "Ŀäþęľş",
+      "no-description": "Ńő đęşčřįpŧįőʼn äväįľäþľę",
+      "type-label": "Ŧypę",
+      "unit-label": "Ůʼnįŧ",
+      "unknown-type": "Ůʼnĸʼnőŵʼn"
+    }
+  },
   "transformations": {
     "empty": {
       "add-transformation-body": "Ŧřäʼnşƒőřmäŧįőʼnş äľľőŵ đäŧä ŧő þę čĥäʼnģęđ įʼn väřįőūş ŵäyş þęƒőřę yőūř vįşūäľįžäŧįőʼn įş şĥőŵʼn.<1></1>Ŧĥįş įʼnčľūđęş ĵőįʼnįʼnģ đäŧä ŧőģęŧĥęř, řęʼnämįʼnģ ƒįęľđş, mäĸįʼnģ čäľčūľäŧįőʼnş, ƒőřmäŧŧįʼnģ đäŧä ƒőř đįşpľäy, äʼnđ mőřę.",
       "add-transformation-header": "Ŝŧäřŧ ŧřäʼnşƒőřmįʼnģ đäŧä"
     }
   },
-  "Type": "Ŧypę",
-  "Unit": "Ůʼnįŧ",
-  "Unknown": "Ůʼnĸʼnőŵʼn",
   "user-orgs": {
     "current-org-button": "Cūřřęʼnŧ",
     "name-column": "Ńämę",