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

frontend/src/metabase/lib/expressions/suggest.js

@@ -94,6 +94,7 @@ export function suggest({
           index: targetOffset,
           icon: dimension.icon(),
           order: 2,
+          dimension,
         })),
     );
     suggestions.push(

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>

frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions.styled.jsx

 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")};
   `})}
-`;
+`);

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