From 711e7704792d9a928366455a07147abc30661fe7 Mon Sep 17 00:00:00 2001
From: Dalton <daltojohnso@users.noreply.github.com>
Date: Wed, 22 Dec 2021 09:50:44 -0800
Subject: [PATCH] Add DimensionInfoPopover to Custom QB expression editor
suggestion list (#19285)
* Add DimensionInfoPopover to Custom QB Expression Editor
* add e2e test
* skip flaky test for now
---
.../src/metabase/lib/expressions/suggest.js | 1 +
.../ExpressionEditorSuggestions.jsx | 45 +++++++++++--------
.../ExpressionEditorSuggestions.styled.jsx | 6 ++-
.../scenarios/question/notebook.cy.spec.js | 23 ++++++++++
4 files changed, 55 insertions(+), 20 deletions(-)
diff --git a/frontend/src/metabase/lib/expressions/suggest.js b/frontend/src/metabase/lib/expressions/suggest.js
index 646bf26e7ec..eebfaf9d8f9 100644
--- a/frontend/src/metabase/lib/expressions/suggest.js
+++ b/frontend/src/metabase/lib/expressions/suggest.js
@@ -94,6 +94,7 @@ export function suggest({
index: targetOffset,
icon: dimension.icon(),
order: 2,
+ dimension,
})),
);
suggestions.push(
diff --git a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions.jsx b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions.jsx
index 8c15f85a160..54c189f310f 100644
--- a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions.jsx
+++ b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions.jsx
@@ -6,6 +6,8 @@ import { color } from "metabase/lib/colors";
import Icon from "metabase/components/Icon";
import Popover from "metabase/components/Popover";
+import DimensionInfoPopover from "metabase/components/MetadataInfo/DimensionInfoPopover";
+
import { ListItemStyled, UlStyled } from "./ExpressionEditorSuggestions.styled";
import { isObscured } from "metabase/lib/dom";
@@ -97,25 +99,32 @@ export default class ExpressionEditorSuggestions extends React.Component {
const { icon } = suggestion;
const { normal, highlighted } = colorForIcon(icon);
- return (
- <React.Fragment key={`suggestion-${i}`}>
- <ListItemStyled
- onMouseDownCapture={e => this.onSuggestionMouseDown(e, i)}
+ const key = `$suggstion-${i}`;
+ const listItem = (
+ <ListItemStyled
+ onMouseDownCapture={e => this.onSuggestionMouseDown(e, i)}
+ isHighlighted={isHighlighted}
+ className="flex align-center"
+ >
+ <Icon
+ name={icon}
+ color={isHighlighted ? highlighted : normal}
+ size="14"
+ className="mr1"
+ />
+ <SuggestionSpan
+ suggestion={suggestion}
isHighlighted={isHighlighted}
- className="flex align-center"
- >
- <Icon
- name={icon}
- color={isHighlighted ? highlighted : normal}
- size="14"
- className="mr1"
- />
- <SuggestionSpan
- suggestion={suggestion}
- isHighlighted={isHighlighted}
- />
- </ListItemStyled>
- </React.Fragment>
+ />
+ </ListItemStyled>
+ );
+
+ return suggestion.dimension ? (
+ <DimensionInfoPopover key={key} dimension={suggestion.dimension}>
+ {listItem}
+ </DimensionInfoPopover>
+ ) : (
+ <React.Fragment key={key}>{listItem}</React.Fragment>
);
})}
</UlStyled>
diff --git a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions.styled.jsx b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions.styled.jsx
index 9929b92f76b..56f97a7519a 100644
--- a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions.styled.jsx
+++ b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions.styled.jsx
@@ -1,4 +1,6 @@
import styled from "styled-components";
+
+import { forwardRefToInnerRef } from "metabase/styled-components/utils";
import { color } from "metabase/lib/colors";
export const UlStyled = styled.ul.attrs({ className: "pb1" })`
@@ -9,7 +11,7 @@ export const UlStyled = styled.ul.attrs({ className: "pb1" })`
const listItemStyledClassName =
"px2 cursor-pointer text-white-hover bg-brand-hover hover-parent hover--inherit";
-export const ListItemStyled = styled.li.attrs({
+export const ListItemStyled = forwardRefToInnerRef(styled.li.attrs({
className: listItemStyledClassName,
})`
padding-top: 5px;
@@ -21,4 +23,4 @@ export const ListItemStyled = styled.li.attrs({
color: ${color("white")};
background-color: ${color("brand")};
`})}
-`;
+`);
diff --git a/frontend/test/metabase/scenarios/question/notebook.cy.spec.js b/frontend/test/metabase/scenarios/question/notebook.cy.spec.js
index bd12af566d5..0eff1c51914 100644
--- a/frontend/test/metabase/scenarios/question/notebook.cy.spec.js
+++ b/frontend/test/metabase/scenarios/question/notebook.cy.spec.js
@@ -194,6 +194,29 @@ describe("scenarios > question > notebook", () => {
cy.contains("Showing first 2000 rows");
});
+ // flaky test (#19454)
+ it.skip("should show an info popover for dimensions listened by the custom expression editor", () => {
+ // start a custom question with orders
+ cy.visit("/question/new");
+ cy.contains("Custom question").click();
+ cy.contains("Sample Dataset").click();
+ cy.contains("Orders").click();
+
+ // type a dimension name
+ cy.findByText("Add filters to narrow your answer").click();
+ cy.findByText("Custom Expression").click();
+ enterCustomColumnDetails({ formula: "Total" });
+
+ // hover over option in the suggestion list
+ cy.findByTestId("expression-suggestions-list")
+ .findByText("Total")
+ .trigger("mouseenter");
+
+ // confirm that the popover is shown
+ popover().contains("The total billed amount.");
+ popover().contains("80.36");
+ });
+
describe("joins", () => {
it("should allow joins", () => {
// start a custom question with orders
--
GitLab