Fix text card parameter mapping bug (#31626)

* fix parameter mapping bug

* add regression test for text card variable content

---------

Co-authored-by: Ryan Laurie <iethree@gmail.com>

e2e/test/scenarios/dashboard/text-parameters.cy.spec.js

@@ -3,6 +3,7 @@ import {
   editDashboard,
   saveDashboard,
   visitDashboard,
+  getDashboardCard,
   setFilter,
   filterWidget,
   addTextBox,
@@ -65,6 +66,30 @@ describe("scenarios > dashboard > parameters in text cards", () => {
     cy.findByText("foo").should("exist");
   });
 
+  it("should not transform text variables to plain text (metabase#31626)", () => {
+    const textContent = "Variable: {{foo}}";
+    addTextBox(textContent, { parseSpecialCharSequences: false });
+    setFilter("Number", "Equal to");
+
+    // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
+    cy.findByText("Select…").click();
+    // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
+    cy.findByText("foo").click();
+    saveDashboard();
+
+    filterWidget().click();
+    cy.findByPlaceholderText("Enter a number").type(`1{enter}`);
+    cy.button("Add filter").click();
+
+    // view mode
+    getDashboardCard(0).click().findByText("Variable: 1").should("be.visible");
+
+    editDashboard();
+
+    // edit mode
+    getDashboardCard(0).click().findByText(textContent).should("be.visible");
+  });
+
   it("should translate parameter values into the instance language", () => {
     // Set user locale to English explicitly so that we can change the site locale separately, without the user
     // locale following it (by default, user locale matches site locale)

frontend/src/metabase/visualizations/visualizations/Text/Text.jsx

@@ -75,7 +75,7 @@ export function Text({
     }, {});
   }
 
-  let content = settings["text"];
+  let content = settings.text;
   if (!_.isEmpty(parametersByTag)) {
     // Temporarily override language to use site language, so that all viewers of a dashboard see parameter values
     // translated the same way.
@@ -84,7 +84,7 @@ export function Text({
     );
   }
 
-  const hasContent = !isEmpty(content);
+  const hasContent = !isEmpty(settings.text);
   const placeholder = t`You can use Markdown here, and include variables {{like_this}}`;
 
   if (isEditing) {
@@ -120,7 +120,7 @@ export function Text({
             data-testid="editing-dashboard-text-input"
             name="text"
             placeholder={placeholder}
-            value={content}
+            value={settings.text}
             autoFocus={justAdded || isFocused}
             onChange={e => handleTextChange(e.target.value)}
             onMouseDown={preventDragging}