Fix cancelling the native query via shortcut (#22415)

frontend/src/metabase/query_builder/components/NativeQueryEditor.jsx

@@ -177,9 +177,14 @@ export default class NativeQueryEditor extends Component {
   }, 100);
 
   handleKeyDown = e => {
-    const ENTER_KEY = 13;
-    if (e.keyCode === ENTER_KEY && (e.metaKey || e.ctrlKey)) {
-      this.runQuery();
+    const { isRunning, cancelQuery } = this.props;
+
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      if (isRunning) {
+        cancelQuery();
+      } else {
+        this.runQuery();
+      }
     }
   };
 

frontend/test/metabase/scenarios/visualizations/reproductions/11727-cancel-native-query-shortcut.cy.spec.js

+import {
+  restore,
+  withDatabase,
+  adhocQuestionHash,
+} from "__support__/e2e/cypress";
+
+const PG_DB_ID = 2;
+
+const questionDetails = {
+  dataset_query: {
+    type: "native",
+    database: PG_DB_ID,
+    native: {
+      query: "SELECT pg_sleep(10)",
+    },
+  },
+};
+
+describe("issue 11727", () => {
+  beforeEach(() => {
+    restore("postgres-12");
+    cy.signInAsAdmin();
+    cy.intercept("GET", "/api/database").as("getDatabases");
+  });
+
+  it("should cancel the native query via the keyboard shortcut (metabase#11727)", () => {
+    withDatabase(PG_DB_ID, () => {
+      cy.visit(`/question#` + adhocQuestionHash(questionDetails));
+      cy.wait("@getDatabases");
+
+      cy.findByText("Doing science...").should("be.visible");
+      cy.get("body").type("{cmd}{enter}");
+      cy.findByText("Here's where your results will appear").should(
+        "be.visible",
+      );
+    });
+  });
+});