Internationalisation: Update docs with nested variable examples (#89484)

* update i18n docs to handle interpolating variables inside inner components

* update with wrapping component example

contribute/internationalization.md

@@ -22,14 +22,40 @@ Grafana uses the [i18next](https://www.i18next.com/) framework for managing tran
 ```jsx
 import { Trans } from 'app/core/internationalization';
 
+const SearchTitle = ({ term }) => <Trans i18nKey="search-page.results-title">Results for {{ term }}</Trans>;
+```
+
+Prefer using `<Trans />` for JSX children, and `t()` for props and other JavaScript usage.
+
+There may be cases where you need to interpolate variables inside other components in the translation.
+
+If the nested component is displaying the variable only (e.g. to add emphasis or color), the best solution is to create a new wrapping component:
+
+```jsx
+import { Trans } from 'app/core/internationalization';
+import { Text } from '@grafana/ui';
+
+const SearchTerm = ({ term }) => <Text color="success">{term}</Text>;
+
 const SearchTitle = ({ term }) => (
   <Trans i18nKey="search-page.results-title">
-    Results for <em>{{ term }}</em>
+    Results for <SearchTerm term={term} />
   </Trans>
 );
 ```
 
-Prefer using `<Trans />` for JSX children, and `t()` for props and other JavaScript usage.
+However there are also cases where the nested component might be displaying additional text which also needs to be translated. In this case, you can use the `values` prop to explicitly pass variables to the translation, and reference them as templated strings in the markup. For example:
+
+```jsx
+import { Trans } from 'app/core/internationalization';
+import { Text } from '@grafana/ui';
+
+const SearchTitle = ({ term }) => (
+  <Trans i18nKey="search-page.results-title" values={{ myVariable: term }}>
+    Results for <Text color="success">{'{{ myVariable }}'} and this translated text is also in green</Text>
+  </Trans>
+);
+```
 
 When translating in `grafana-ui`, use a relative path to import `<Trans />` and `t()` from `src/utils/i18n`.
 

packages/grafana-eslint-rules/README.md

@@ -133,16 +133,23 @@ Check if strings are marked for translation.
 
 ```tsx
 // Bad ❌
-const SearchTitle = ({ term }) => (
-  <div>
-    Results for <em>{term}</em>
-  </div>
-);
+const SearchTitle = ({ term }) => <div>Results for {term}</div>;
 
 // Good ✅
+const SearchTitle = ({ term }) => <Trans i18nKey="search-page.results-title">Results for {{ term }}</Trans>;
+
+// Good ✅ (if you need to interpolate variables inside nested components)
+const SearchTerm = ({ term }) => <Text color="success">{term}</Text>;
 const SearchTitle = ({ term }) => (
   <Trans i18nKey="search-page.results-title">
-    Results for <em>{{ term }}</em>
+    Results for <SearchTerm term={term} />
+  </Trans>
+);
+
+// Good ✅ (if you need to interpolate variables and additional translated strings inside nested components)
+const SearchTitle = ({ term }) => (
+  <Trans i18nKey="search-page.results-title" values={{ myVariable: term }}>
+    Results for <Text color="success">{'{{ myVariable }}'} and this translated text is also in green</Text>
   </Trans>
 );
 ```