From a1e98eb38fe0d7399e4ed11b4db24c7e14fb1a96 Mon Sep 17 00:00:00 2001
From: Gustavo Saiani <gus@metabase.com>
Date: Tue, 11 Oct 2022 11:23:55 -0300
Subject: [PATCH] Adapt cancel button for new model pages (#25862)
---
.../metabase/query_builder/actions/models.js | 5 ++++
.../DatasetEditor/DatasetEditor.jsx | 29 +++++++++++++++----
.../scenarios/models/create.cy.spec.js | 17 +++++++++--
3 files changed, 42 insertions(+), 9 deletions(-)
diff --git a/frontend/src/metabase/query_builder/actions/models.js b/frontend/src/metabase/query_builder/actions/models.js
index 73ec6f11918..dd7d7304ab7 100644
--- a/frontend/src/metabase/query_builder/actions/models.js
+++ b/frontend/src/metabase/query_builder/actions/models.js
@@ -1,4 +1,5 @@
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());
diff --git a/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.jsx b/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.jsx
index 6cc2c8f15a1..72298f8ce4b 100644
--- a/frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.jsx
+++ b/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}
diff --git a/frontend/test/metabase/scenarios/models/create.cy.spec.js b/frontend/test/metabase/scenarios/models/create.cy.spec.js
index 58eb415ed21..dcac6a4467d 100644
--- a/frontend/test/metabase/scenarios/models/create.cy.spec.js
+++ b/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();
+}
--
GitLab