Migrate ExpressionEditorSuggestions to TippyPopover (#21576)

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

@@ -5,7 +5,7 @@ import cx from "classnames";
 import { color } from "metabase/lib/colors";
 
 import Icon from "metabase/components/Icon";
-import Popover from "metabase/components/Popover";
+import TippyPopover from "metabase/components/Popover/TippyPopover";
 
 import { ListItemStyled, UlStyled } from "./ExpressionEditorSuggestions.styled";
 
@@ -54,6 +54,7 @@ export default class ExpressionEditorSuggestions extends React.Component {
     suggestions: PropTypes.array,
     onSuggestionMouseDown: PropTypes.func, // signature is f(index)
     highlightedIndex: PropTypes.number.isRequired,
+    target: PropTypes.instanceOf(Element).isRequired,
   };
 
   componentDidUpdate(prevProps, prevState) {
@@ -75,53 +76,51 @@ export default class ExpressionEditorSuggestions extends React.Component {
   }
 
   render() {
-    const { suggestions, highlightedIndex } = this.props;
+    const { suggestions, highlightedIndex, target } = this.props;
 
     if (!suggestions.length) {
       return null;
     }
 
     return (
-      <Popover
+      <TippyPopover
         className="not-rounded border-dark"
-        hasArrow={false}
-        tetherOptions={{
-          attachment: "top left",
-          targetAttachment: "bottom left",
-        }}
-        targetOffsetY={0}
+        placement="bottom-start"
         sizeToFit
-      >
-        <UlStyled data-testid="expression-suggestions-list" className="pb1">
-          {suggestions.map((suggestion, i) => {
-            const isHighlighted = i === highlightedIndex;
-            const { icon } = suggestion;
-            const { normal, highlighted } = colorForIcon(icon);
-
-            const key = `$suggstion-${i}`;
-            const listItem = (
-              <ListItemStyled
-                onMouseDownCapture={e => this.onSuggestionMouseDown(e, i)}
-                isHighlighted={isHighlighted}
-                className="flex align-center px2 cursor-pointer text-white-hover bg-brand-hover hover-parent hover--inherit"
-              >
-                <Icon
-                  name={icon}
-                  color={isHighlighted ? highlighted : normal}
-                  size="14"
-                  className="mr1"
-                />
-                <SuggestionSpan
-                  suggestion={suggestion}
+        visible
+        reference={target}
+        content={
+          <UlStyled data-testid="expression-suggestions-list" className="pb1">
+            {suggestions.map((suggestion, i) => {
+              const isHighlighted = i === highlightedIndex;
+              const { icon } = suggestion;
+              const { normal, highlighted } = colorForIcon(icon);
+
+              const key = `$suggstion-${i}`;
+              const listItem = (
+                <ListItemStyled
+                  onMouseDownCapture={e => this.onSuggestionMouseDown(e, i)}
                   isHighlighted={isHighlighted}
-                />
-              </ListItemStyled>
-            );
-
-            return <React.Fragment key={key}>{listItem}</React.Fragment>;
-          })}
-        </UlStyled>
-      </Popover>
+                  className="flex align-center px2 cursor-pointer text-white-hover bg-brand-hover hover-parent hover--inherit"
+                >
+                  <Icon
+                    name={icon}
+                    color={isHighlighted ? highlighted : normal}
+                    size="14"
+                    className="mr1"
+                  />
+                  <SuggestionSpan
+                    suggestion={suggestion}
+                    isHighlighted={isHighlighted}
+                  />
+                </ListItemStyled>
+              );
+
+              return <React.Fragment key={key}>{listItem}</React.Fragment>;
+            })}
+          </UlStyled>
+        }
+      />
     );
   }
 }

frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx

@@ -48,6 +48,7 @@ export default class ExpressionEditorTextfield extends React.Component {
   constructor() {
     super();
     this.input = React.createRef();
+    this.suggestionTarget = React.createRef();
   }
 
   static propTypes = {
@@ -410,7 +411,11 @@ export default class ExpressionEditorTextfield extends React.Component {
 
     return (
       <React.Fragment>
-        <EditorContainer isFocused={isFocused} hasError={Boolean(errorMessage)}>
+        <EditorContainer
+          isFocused={isFocused}
+          hasError={Boolean(errorMessage)}
+          ref={this.suggestionTarget}
+        >
           <EditorEqualsSign>=</EditorEqualsSign>
           <AceEditor
             commands={this.commands}
@@ -440,6 +445,7 @@ export default class ExpressionEditorTextfield extends React.Component {
             width="100%"
           />
           <ExpressionEditorSuggestions
+            target={this.suggestionTarget.current}
             suggestions={suggestions}
             onSuggestionMouseDown={this.onSuggestionSelected}
             highlightedIndex={this.state.highlightedSuggestionIndex}