Adapt cancel button for new model pages (#25862)

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

 import { createAction } from "redux-actions";
+import { push } from "react-router-redux";
 import { merge } from "icepick";
 import { t } from "ttag";
 
@@ -19,6 +20,10 @@ export const setDatasetEditorTab = datasetEditorTab => dispatch => {
   dispatch(runDirtyQuestionQuery());
 };
 
+export const onCancelCreateNewModel = () => async dispatch => {
+  await dispatch(push("/"));
+};
+
 export const CANCEL_DATASET_CHANGES = "metabase/qb/CANCEL_DATASET_CHANGES";
 export const onCancelDatasetChanges = () => (dispatch, getState) => {
   const cardBeforeChanges = getOriginalCard(getState());

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

@@ -8,6 +8,7 @@ import { merge } from "icepick";
 import ActionButton from "metabase/components/ActionButton";
 import Button from "metabase/core/components/Button";
 import DebouncedFrame from "metabase/components/DebouncedFrame";
+import Confirm from "metabase/components/Confirm";
 
 import QueryVisualization from "metabase/query_builder/components/QueryVisualization";
 import ViewSidebar from "metabase/query_builder/components/view/ViewSidebar";
@@ -59,6 +60,7 @@ const propTypes = {
   setDatasetEditorTab: PropTypes.func.isRequired,
   setFieldMetadata: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
+  onCancelCreateNewModel: PropTypes.func.isRequired,
   onCancelDatasetChanges: PropTypes.func.isRequired,
   handleResize: PropTypes.func.isRequired,
   runQuestionQuery: PropTypes.func.isRequired,
@@ -176,6 +178,7 @@ function DatasetEditor(props) {
     setDatasetEditorTab,
     setFieldMetadata,
     onCancelDatasetChanges,
+    onCancelCreateNewModel,
     onSave,
     handleResize,
     onOpenModal,
@@ -305,7 +308,11 @@ function DatasetEditor(props) {
     [initialEditorHeight, setDatasetEditorTab],
   );
 
-  const handleCancel = useCallback(() => {
+  const handleCancelCreate = useCallback(() => {
+    onCancelCreateNewModel();
+  }, [onCancelCreateNewModel]);
+
+  const handleCancelEdit = useCallback(() => {
     onCancelDatasetChanges();
     setQueryBuilderMode("view");
   }, [setQueryBuilderMode, onCancelDatasetChanges]);
@@ -423,11 +430,21 @@ function DatasetEditor(props) {
           />
         }
         buttons={[
-          <Button
-            key="cancel"
-            onClick={handleCancel}
-            small
-          >{t`Cancel`}</Button>,
+          dataset.isSaved() ? (
+            <Button
+              key="cancel"
+              small
+              onClick={handleCancelEdit}
+            >{t`Cancel`}</Button>
+          ) : (
+            <Confirm
+              key="cancel"
+              action={handleCancelCreate}
+              title={t`Cancel creating model`}
+            >
+              <Button small>{t`Cancel`}</Button>
+            </Confirm>
+          ),
           <ActionButton
             key="save"
             disabled={!canSaveChanges}

frontend/test/metabase/scenarios/models/create.cy.spec.js

@@ -10,9 +10,14 @@ describe("scenarios > models > create", () => {
   it("creates a native query model via the New button", () => {
     cy.visit("/");
 
-    cy.findByText("New").click();
-    cy.findByText("Model").click();
-    cy.findByText("Use a native query").click();
+    goFromHomePageToNewNativeQueryModelPage();
+
+    // Cancel creation with confirmation modal
+    cy.findByText("Cancel").click();
+    cy.findByText("Yes").click();
+
+    // Now we will create a model
+    goFromHomePageToNewNativeQueryModelPage();
 
     cy.get(".ace_editor").should("be.visible").type("select * from ORDERS");
 
@@ -25,3 +30,9 @@ describe("scenarios > models > create", () => {
     cy.findByText("Saved");
   });
 });
+
+function goFromHomePageToNewNativeQueryModelPage() {
+  cy.findByText("New").click();
+  cy.findByText("Model").click();
+  cy.findByText("Use a native query").click();
+}