Fix #44754: qbnewq modal can't be dismissed with keyboard (#45148)

* Use Mantine Modal for QB Newb disclaimer

* Add repro for #44754

* Use theme spacing units

* Tweak the design slightly

* Fix E2E test

e2e/test/scenarios/onboarding/home/homepage.cy.spec.js

@@ -2,6 +2,7 @@ import { USERS } from "e2e/support/cypress_data";
 import {
   ADMIN_PERSONAL_COLLECTION_ID,
   ORDERS_DASHBOARD_ID,
+  ORDERS_BY_YEAR_QUESTION_ID,
 } from "e2e/support/cypress_sample_instance_data";
 import {
   describeEE,
@@ -23,6 +24,7 @@ import {
   entityPickerModal,
   dashboardGrid,
   entityPickerModalTab,
+  visitQuestion,
 } from "e2e/support/helpers";
 
 const { admin } = USERS;
@@ -129,6 +131,33 @@ describe("scenarios > home > homepage", () => {
       cy.findByText("Orders");
     });
 
+    it("should be able to dismiss qbnewq modal using keyboard (metabase#44754)", () => {
+      const randomUser = {
+        email: "random@metabase.test",
+        password: "12341234",
+      };
+
+      // We've already dismissed qbnewq modal for all existing users.
+      cy.log("Create a new admin user and log in as that user");
+      cy.request("POST", "/api/user", randomUser).then(({ body: { id } }) => {
+        cy.request("PUT", `/api/user/${id}`, { is_superuser: true });
+        cy.request("POST", "/api/session", {
+          username: randomUser.email,
+          password: randomUser.password,
+        });
+      });
+
+      cy.intercept("PUT", "/api/user/*/modal/qbnewb").as("modalDismiss");
+      visitQuestion(ORDERS_BY_YEAR_QUESTION_ID);
+      modal()
+        .should("be.visible")
+        .and("contain", "It's okay to play around with saved questions");
+
+      cy.realPress("Escape");
+      cy.wait("@modalDismiss");
+      modal().should("not.exist");
+    });
+
     // TODO: popular items endpoint is currently broken in OSS. Re-enable test once endpoint has been fixed.
     describeEE("EE", () => {
       it("should display popular items for a new user", () => {

frontend/src/metabase/query_builder/components/SavedQuestionIntroModal.tsx

-import cx from "classnames";
 import { t } from "ttag";
 
-import Modal from "metabase/components/Modal";
-import ModalContent from "metabase/components/ModalContent";
-import ButtonsS from "metabase/css/components/buttons.module.css";
-import CS from "metabase/css/core/index.css";
+import { Modal, Button, Text } from "metabase/ui";
 import type Question from "metabase-lib/v1/Question";
 
 interface Props {
@@ -48,18 +44,19 @@ export const SavedQuestionIntroModal = ({
   const { title, message } = getLabels(question);
 
   return (
-    <Modal isOpen={isShowingNewbModal}>
-      <ModalContent title={title} className={cx(CS.textCentered, CS.py2)}>
-        <div className={cx(CS.px2, CS.pb2, CS.textParagraph)}>{message}</div>
-        <div className={cx("Form-actions", CS.flex, CS.justifyCenter, CS.py1)}>
-          <button
-            className={cx(ButtonsS.Button, ButtonsS.ButtonPrimary)}
-            onClick={onClose}
-          >
-            {t`Okay`}
-          </button>
-        </div>
-      </ModalContent>
-    </Modal>
+    <Modal.Root opened={isShowingNewbModal} onClose={onClose} size={500}>
+      <Modal.Overlay />
+      <Modal.Content p="md">
+        <Modal.Header mb="md">
+          <Modal.Title>{title}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body ta="center">
+          <Text mb="lg" align="left">
+            {message}
+          </Text>
+          <Button variant="filled" onClick={onClose}>{t`Okay`}</Button>
+        </Modal.Body>
+      </Modal.Content>
+    </Modal.Root>
   );
 };