Fix "Try it" button and clearing out variable defaults (#11511)

frontend/src/metabase/query_builder/actions.js

@@ -632,8 +632,12 @@ export const updateTemplateTag = createThunkAction(
       // using updateIn instead of assocIn due to not preserving order of keys
       return updateIn(
         updatedCard,
-        ["dataset_query", "native", "template-tags"],
-        tags => ({ ...tags, [templateTag.name]: templateTag }),
+        ["dataset_query", "native", "template-tags", templateTag.name],
+        tag =>
+          // when we switch type, null out any default
+          tag.type !== templateTag.type
+            ? { ...templateTag, default: null }
+            : templateTag,
       );
     };
   },

frontend/src/metabase/query_builder/components/template_tags/TagEditorHelp.jsx

@@ -118,7 +118,11 @@ const TagExample = ({ datasetQuery, setDatasetQuery }) => (
   </div>
 );
 
-const TagEditorHelp = ({ setDatasetQuery, sampleDatasetId }) => {
+const TagEditorHelp = ({
+  setDatasetQuery,
+  sampleDatasetId,
+  switchToSettings,
+}) => {
   let setQueryWithSampleDatasetId = null;
   if (sampleDatasetId != null) {
     setQueryWithSampleDatasetId = (dataset_query, run) => {
@@ -129,6 +133,7 @@ const TagEditorHelp = ({ setDatasetQuery, sampleDatasetId }) => {
         },
         run,
       );
+      switchToSettings();
     };
   }
   return (

frontend/src/metabase/query_builder/components/template_tags/TagEditorSidebar.jsx

@@ -110,6 +110,7 @@ export default class TagEditorSidebar extends React.Component {
             <TagEditorHelp
               sampleDatasetId={sampleDatasetId}
               setDatasetQuery={setDatasetQuery}
+              switchToSettings={() => this.setSection("settings")}
             />
           )}
         </div>

frontend/test/metabase/query_builder/components/NativeQueryEditor.cy.spec.js

@@ -39,4 +39,39 @@ describe("NativeQueryEditor", () => {
     cy.get(".NativeQueryEditor .Icon-play").click();
     cy.contains('Table "ORD" not found');
   });
+
+  it("clears a template tag's default when the type changes", () => {
+    cy.visit("/question/new");
+    cy.contains("Native query").click();
+
+    // Write a query with parameter x. It defaults to a text parameter.
+    cy.get(".ace_content").type("select * from orders where total = {{x}}", {
+      parseSpecialCharSequences: false,
+    });
+
+    // Mark field as required and add a default text value.
+    cy.contains("Required?")
+      .next()
+      .click();
+    cy.contains("Default filter widget value")
+      .next()
+      .find("input")
+      .type("some text");
+
+    // Run the query and see an error.
+    cy.get(".NativeQueryEditor .Icon-play").click();
+    cy.contains(`Data conversion error converting "some text"`);
+
+    // Oh wait! That doesn't match the total column, so we'll change the parameter to a number.
+    cy.contains("Variable type")
+      .next()
+      .click();
+    cy.contains("Number").click();
+
+    // When we run it again, the default has been cleared out so we get the right error.
+    cy.get(".NativeQueryEditor .Icon-play").click();
+    cy.contains(
+      "You'll need to pick a value for 'X' before this query can run.",
+    );
+  });
 });