From a1b294e39f3b7841f4fccff58d7473d1d2462cf9 Mon Sep 17 00:00:00 2001
From: Tom Ratcliffe <tom.ratcliffe@grafana.com>
Date: Fri, 2 May 2025 16:20:16 +0100
Subject: [PATCH] i18n: Fix incorrect interpolation in query group options
 (#104873)

---
 public/app/features/query/components/QueryGroup.test.tsx  | 8 ++++++++
 .../app/features/query/components/QueryGroupOptions.tsx   | 4 ++--
 public/locales/en-US/grafana.json                         | 4 ++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/public/app/features/query/components/QueryGroup.test.tsx b/public/app/features/query/components/QueryGroup.test.tsx
index 2c86dfe5c3d..b9147fb039e 100644
--- a/public/app/features/query/components/QueryGroup.test.tsx
+++ b/public/app/features/query/components/QueryGroup.test.tsx
@@ -121,6 +121,12 @@ describe('QueryGroup', () => {
     const addExpressionButton = screen.queryByTestId('query-tab-add-expression');
     expect(addExpressionButton).not.toBeInTheDocument();
   });
+
+  it('correctly renders query options', async () => {
+    renderScenario({});
+    expect(await screen.findByText('MD = 100')).toBeInTheDocument();
+    expect(await screen.findByText('Interval = 1m')).toBeInTheDocument();
+  });
 });
 
 function renderScenario(overrides: Partial<Props>) {
@@ -132,6 +138,8 @@ function renderScenario(overrides: Partial<Props>) {
       getTransformations: jest.fn(),
     }),
     options: {
+      maxDataPoints: 100,
+      minInterval: '1m',
       queries: [
         {
           datasource: mockDS,
diff --git a/public/app/features/query/components/QueryGroupOptions.tsx b/public/app/features/query/components/QueryGroupOptions.tsx
index 82029405597..a6a207e0198 100644
--- a/public/app/features/query/components/QueryGroupOptions.tsx
+++ b/public/app/features/query/components/QueryGroupOptions.tsx
@@ -310,12 +310,12 @@ export const QueryGroupOptionsEditor = React.memo(({ options, dataSource, data,
       <>
         {
           <span className={styles.collapsedText}>
-            <Trans i18nKey="query.query-group-options-editor.collapsed-max-data-points">MD = {mdDesc}</Trans>
+            <Trans i18nKey="query.query-group-options-editor.collapsed-max-data-points">MD = {{ mdDesc }}</Trans>
           </span>
         }
         {
           <span className={styles.collapsedText}>
-            <Trans i18nKey="query.query-group-options-editor.collapsed-interval">Interval = {intervalDesc}</Trans>
+            <Trans i18nKey="query.query-group-options-editor.collapsed-interval">Interval = {{ intervalDesc }}</Trans>
           </span>
         }
       </>
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 1bd01ff3a6d..47654e02c49 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -7830,8 +7830,8 @@
       "title-data-source-help": "Data source help"
     },
     "query-group-options-editor": {
-      "collapsed-interval": "Interval = {intervalDesc}",
-      "collapsed-max-data-points": "MD = {mdDesc}",
+      "collapsed-interval": "Interval = {{intervalDesc}}",
+      "collapsed-max-data-points": "MD = {{mdDesc}}",
       "hide-time-info": "Hide time info",
       "Query options-title-query-options": "Query options",
       "relative-time": "Relative time",