From 8d7f175310b3f327bd6f0e6a9acba901dcf16a4e Mon Sep 17 00:00:00 2001
From: Cal Herries <39073188+calherries@users.noreply.github.com>
Date: Fri, 21 Oct 2022 18:06:48 +0100
Subject: [PATCH] Fix back navigation (#26049)
---
.../metabase/query_builder/actions/native.js | 20 +++++++++++++++++--
.../SidebarHeader/SidebarHeader.tsx | 6 +++++-
.../src/metabase/query_builder/reducers.js | 13 +++---------
.../scenarios/native/data_ref.cy.spec.js | 10 ++++++++++
4 files changed, 36 insertions(+), 13 deletions(-)
diff --git a/frontend/src/metabase/query_builder/actions/native.js b/frontend/src/metabase/query_builder/actions/native.js
index b1c62b2a12c..270587cd3b2 100644
--- a/frontend/src/metabase/query_builder/actions/native.js
+++ b/frontend/src/metabase/query_builder/actions/native.js
@@ -13,6 +13,7 @@ import {
getTemplateTagParameters,
} from "metabase-lib/lib/parameters/utils/template-tags";
import {
+ getDataReferenceStack,
getNativeEditorCursorOffset,
getNativeEditorSelectedText,
getQuestion,
@@ -27,12 +28,27 @@ export const toggleDataReference = createAction(TOGGLE_DATA_REFERENCE, () => {
MetabaseAnalytics.trackStructEvent("QueryBuilder", "Toggle Data Reference");
});
+export const SET_DATA_REFERENCE_STACK = "metabase/qb/SET_DATA_REFERENCE_STACK";
+export const setDataReferenceStack = createAction(SET_DATA_REFERENCE_STACK);
+
export const POP_DATA_REFERENCE_STACK = "metabase/qb/POP_DATA_REFERENCE_STACK";
-export const popDataReferenceStack = createAction(POP_DATA_REFERENCE_STACK);
+export const popDataReferenceStack = createThunkAction(
+ POP_DATA_REFERENCE_STACK,
+ () => (dispatch, getState) => {
+ const stack = getDataReferenceStack(getState());
+ dispatch(setDataReferenceStack(stack.slice(0, -1)));
+ },
+);
export const PUSH_DATA_REFERENCE_STACK =
"metabase/qb/PUSH_DATA_REFERENCE_STACK";
-export const pushDataReferenceStack = createAction(PUSH_DATA_REFERENCE_STACK);
+export const pushDataReferenceStack = createThunkAction(
+ PUSH_DATA_REFERENCE_STACK,
+ item => (dispatch, getState) => {
+ const stack = getDataReferenceStack(getState());
+ dispatch(setDataReferenceStack(stack.concat([item])));
+ },
+);
export const OPEN_DATA_REFERENCE_AT_QUESTION =
"metabase/qb/OPEN_DATA_REFERENCE_AT_QUESTION";
diff --git a/frontend/src/metabase/query_builder/components/SidebarHeader/SidebarHeader.tsx b/frontend/src/metabase/query_builder/components/SidebarHeader/SidebarHeader.tsx
index 78856feb093..107885b6be8 100644
--- a/frontend/src/metabase/query_builder/components/SidebarHeader/SidebarHeader.tsx
+++ b/frontend/src/metabase/query_builder/components/SidebarHeader/SidebarHeader.tsx
@@ -43,7 +43,11 @@ function SidebarHeader({ className, title, icon, onBack, onClose }: Props) {
return (
<HeaderRoot className={className}>
- <HeaderTitleContainer variant={headerVariant} onClick={onBack}>
+ <HeaderTitleContainer
+ variant={headerVariant}
+ onClick={onBack}
+ data-testid="sidebar-header-title"
+ >
{onBack && <HeaderIcon name="chevronleft" />}
{icon && <HeaderIcon name={icon} />}
{hasDefaultBackButton ? t`Back` : title}
diff --git a/frontend/src/metabase/query_builder/reducers.js b/frontend/src/metabase/query_builder/reducers.js
index 7906ced9cd2..a984f7e1221 100644
--- a/frontend/src/metabase/query_builder/reducers.js
+++ b/frontend/src/metabase/query_builder/reducers.js
@@ -6,8 +6,7 @@ import Utils from "metabase/lib/utils";
import {
RESET_QB,
INITIALIZE_QB,
- POP_DATA_REFERENCE_STACK,
- PUSH_DATA_REFERENCE_STACK,
+ SET_DATA_REFERENCE_STACK,
OPEN_DATA_REFERENCE_AT_QUESTION,
TOGGLE_DATA_REFERENCE,
TOGGLE_TEMPLATE_TAGS_EDITOR,
@@ -161,16 +160,10 @@ export const uiControls = handleActions(
isShowingDataReference: !state.isShowingDataReference,
}),
},
- [POP_DATA_REFERENCE_STACK]: {
+ [SET_DATA_REFERENCE_STACK]: {
next: (state, { payload }) => ({
...state,
- dataReferenceStack: state.dataReferenceStack.slice(0, -1),
- }),
- },
- [PUSH_DATA_REFERENCE_STACK]: {
- next: (state, { payload }) => ({
- ...state,
- dataReferenceStack: (state.dataReferenceStack || []).concat([payload]),
+ dataReferenceStack: payload,
}),
},
[OPEN_DATA_REFERENCE_AT_QUESTION]: {
diff --git a/frontend/test/metabase/scenarios/native/data_ref.cy.spec.js b/frontend/test/metabase/scenarios/native/data_ref.cy.spec.js
index 8792490e338..864be043f66 100644
--- a/frontend/test/metabase/scenarios/native/data_ref.cy.spec.js
+++ b/frontend/test/metabase/scenarios/native/data_ref.cy.spec.js
@@ -9,6 +9,9 @@ describe("scenarios > native question > data reference sidebar", () => {
it("should show tables", () => {
openNativeEditor();
cy.icon("reference").click();
+ cy.get("[data-testid='sidebar-header-title']").findByText(
+ "Sample Database",
+ );
cy.findByText("ORDERS").click();
cy.findByText(
"Confirmed Sample Company orders for a product, from a user.",
@@ -16,6 +19,13 @@ describe("scenarios > native question > data reference sidebar", () => {
cy.findByText("9 columns");
cy.findByText("QUANTITY").click();
cy.findByText("Number of products bought.");
+ // clicking the title should navigate back
+ cy.findByText("QUANTITY").click();
+ cy.findByText("ORDERS").click();
+ cy.get("[data-testid='sidebar-header-title']")
+ .findByText("Sample Database")
+ .click();
+ cy.findByText("Data Reference");
});
it("should show models", () => {
--
GitLab