Add custom warning message when leaving creating an SQL question (#34696

)

* Update isNavigationAllowed logic to prevent new model creation

* Add simple model creation test

* Remove identifier

* Update comment

* Add a test case for saving a new model

* Avoid using fetchMock directly in QueryBuilder unit tests

* Remove setupCollectionsEndpointsByIds in favor of setupCollectionByIdEndpoint

* Add native question test base

* Update isNavigationAllowed tests

* Make isNavigationAllowed tests pass

* Update shouldShowUnsavedChangesWarningForSqlQuery logic to account for new questions

* Add a test case to run new native question

* Update mock to include individual collection GET endpoint

* Add DataSourceSelectors to MockNativeQueryEditor

* Update test beforeunload event to reflect new behavior

* Use setupCollectionByIdEndpoint instead of modifying setupCollectionsEndpoints

* Update failing test

* Use serializeCardForUrl

* Add a test for native query editing

* Do not trigger warning when leaving empty question

* Add beforeunload tests for creating new questions

* Remove redundant div

* Make assertions consistent

* Use single resetAllMocks()

* Fix post-rebase conflict

* Work around Cypress not handling beforeunload-related prompts

* Our app registers beforeunload event listener e.g. when editing a native SQL question.
* Cypress does not automatically close the browser prompt and does not allow manually
* interacting with it (unlike with window.confirm). The test will hang forever with
* the prompt displayed and will eventually time out. We need to work around this by
* monkey-patching window.addEventListener to ignore beforeunload event handlers.
*
* @see cypress-io/cypress#2118

e2e/test/scenarios/visualizations/pivot_tables.cy.spec.js

@@ -32,6 +32,27 @@ const TEST_CASES = [
   { case: "dashboard", subject: DASHBOARD_NAME },
 ];
 
+/**
+ * Our app registers beforeunload event listener e.g. when editing a native SQL question.
+ * Cypress does not automatically close the browser prompt and does not allow manually
+ * interacting with it (unlike with window.confirm). The test will hang forever with
+ * the prompt displayed and will eventually time out. We need to work around this by
+ * monkey-patching window.addEventListener to ignore beforeunload event handlers.
+ *
+ * @see https://github.com/cypress-io/cypress/issues/2118
+ */
+Cypress.on("window:load", window => {
+  const addEventListener = window.addEventListener;
+
+  window.addEventListener = function (event) {
+    if (event === "beforeunload") {
+      return;
+    }
+
+    return addEventListener.apply(this, arguments);
+  };
+});
+
 describe("scenarios > visualizations > pivot tables", { tags: "@slow" }, () => {
   beforeEach(() => {
     restore();

frontend/src/metabase/actions/containers/ActionCreator/tests/ActionCreator-QueryActions.unit.spec.ts

@@ -38,7 +38,9 @@ describe("ActionCreator > Query Actions", () => {
       userEvent.click(getIcon("reference"));
 
       expect(screen.getAllByText("Data Reference")).toHaveLength(2);
-      expect(screen.getByText("Database")).toBeInTheDocument();
+      expect(
+        within(screen.getByTestId("sidebar-content")).getByText("Database"),
+      ).toBeInTheDocument();
     });
 
     it("should show action settings button", async () => {

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

@@ -1,14 +1,46 @@
 /* eslint-disable react/prop-types */
 import SyncedParametersList from "metabase/parameters/components/SyncedParametersList/SyncedParametersList";
 import { ACE_ELEMENT_ID } from "metabase/query_builder/components/NativeQueryEditor/constants";
+import DataSourceSelectors from "metabase/query_builder/components/NativeQueryEditor/DataSourceSelectors";
 
-const MockNativeQueryEditor = ({ query, setParameterValue, ...props }) => {
+const MockNativeQueryEditor = ({
+  canChangeDatabase = true,
+  editorContext = "question",
+  isNativeEditorOpen,
+  query,
+  readOnly,
+  setDatasetQuery,
+  setParameterValue,
+}) => {
   const onChange = evt => {
-    props.setDatasetQuery(query.setQueryText(evt.target.value));
+    setDatasetQuery(query.setQueryText(evt.target.value));
+  };
+
+  const onDatabaseIdChange = databaseId => {
+    if (query.databaseId() !== databaseId) {
+      setDatasetQuery(query.setDatabaseId(databaseId).setDefaultCollection());
+    }
+  };
+
+  const onTableIdChange = tableId => {
+    const table = query.metadata().table(tableId);
+    if (table && table.name !== query.collection()) {
+      setDatasetQuery(query.setCollectionName(table.name));
+    }
   };
 
   return (
     <div data-testid="mock-native-query-editor" id={ACE_ELEMENT_ID}>
+      {canChangeDatabase && (
+        <DataSourceSelectors
+          isNativeEditorOpen={isNativeEditorOpen}
+          query={query}
+          readOnly={readOnly}
+          setDatabaseId={onDatabaseIdChange}
+          setTableId={onTableIdChange}
+          editorContext={editorContext}
+        />
+      )}
       {query.queryText && (
         <textarea value={query.queryText()} onChange={onChange} />
       )}