Native query: update parameters upon tags/variables modification (#23269)

frontend/src/metabase/query_builder/actions/native.js

@@ -160,6 +160,10 @@ export const setTemplateTag = createThunkAction(
             parameters[index] = getTemplateTagParameter(templateTag);
           }
         }
+      } else {
+        const tags = getTemplateTagsForParameters(updatedTagsCard);
+        const newParameters = getTemplateTagParameters(tags);
+        return assoc(updatedTagsCard, "parameters", newParameters);
       }
 
       return updatedTagsCard;

frontend/test/metabase/scenarios/native/native.cy.spec.js

@@ -13,6 +13,7 @@ import { SAMPLE_DB_ID } from "__support__/e2e/cypress_data";
 describe("scenarios > question > native", () => {
   beforeEach(() => {
     cy.intercept("POST", "api/dataset").as("dataset");
+    cy.intercept("POST", "api/card").as("card");
     restore();
     cy.signInAsNormalUser();
   });
@@ -88,6 +89,36 @@ describe("scenarios > question > native", () => {
     cy.contains("Showing 168 rows");
   });
 
+  it("should modify parameters accordingly when tags are modified", () => {
+    openNativeEditor().type("select * from PRODUCTS where CATEGORY = {{cat}}", {
+      parseSpecialCharSequences: false,
+    });
+    cy.findByTestId("sidebar-right")
+      .findByText("Required?")
+      .parent()
+      .find("input")
+      .click();
+    cy.get("input[placeholder*='Enter a default value']").type("Gizmo");
+    cy.get(".NativeQueryEditor .Icon-play").click();
+    cy.wait("@dataset");
+
+    cy.contains("Save").click();
+
+    modal().within(() => {
+      cy.findByLabelText("Name").type("Products on Category");
+      cy.findByText("Save").click();
+
+      cy.wait("@card").should(xhr => {
+        const requestBody = xhr.request?.body;
+        expect(requestBody?.parameters?.length).to.equal(1);
+        const parameter = requestBody.parameters[0];
+        expect(parameter.default).to.equal("Gizmo");
+      });
+    });
+
+    cy.findByText("Not now").click();
+  });
+
   it("can save a question with no rows", () => {
     openNativeEditor().type("select * from people where false");
     cy.get(".NativeQueryEditor .Icon-play").click();