Merge pull request #6736 from metabase/issue-6616

Make expression editor field popover expandable

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

@@ -233,16 +233,22 @@ export default class ExpressionEditorTextfield extends Component {
             expressionErrorMessage,
             expressionString,
             parsedExpression,
-            suggestions
+            suggestions,
+            showAll: false
         });
     }
 
+    onShowMoreMouseDown (e) {
+        e.preventDefault()
+        this.setState({ showAll: true })
+    }
+
     render() {
         let errorMessage = this.state.expressionErrorMessage;
         if (errorMessage && !errorMessage.length) errorMessage = t`unknown error`;
 
         const { placeholder } = this.props;
-        const { suggestions } = this.state;
+        const { suggestions, showAll } = this.state;
 
         return (
             <div className={cx(S.editor, "relative")}>
@@ -271,7 +277,7 @@ export default class ExpressionEditorTextfield extends Component {
                         }}
                     >
                         <ul style={{minWidth: 150, overflow: "hidden"}}>
-                            {suggestions.slice(0,MAX_SUGGESTIONS).map((suggestion, i) =>
+                            {(showAll ? suggestions : suggestions.slice(0,MAX_SUGGESTIONS)).map((suggestion, i) =>
                                 // insert section title. assumes they're sorted by type
                                 [(i === 0 || suggestion.type !== suggestions[i - 1].type) &&
                                     <li  ref={"header-" + i} className="mx2 h6 text-uppercase text-bold text-grey-3 py1 pt2">
@@ -293,8 +299,8 @@ export default class ExpressionEditorTextfield extends Component {
                                     </li>
                                 ]
                             )}
-                            { suggestions.length >= MAX_SUGGESTIONS &&
-                                <li style={{ paddingTop: 5, paddingBottom: 5 }} className="px2 text-italic text-grey-3">and {suggestions.length - MAX_SUGGESTIONS} more</li>
+                            { !showAll && suggestions.length >= MAX_SUGGESTIONS &&
+                                <li style={{ paddingTop: 5, paddingBottom: 5 }} onMouseDownCapture={(e) => this.onShowMoreMouseDown(e)} className="px2 text-italic text-grey-3 cursor-pointer text-brand-hover">and {suggestions.length - MAX_SUGGESTIONS} more</li>
                             }
                         </ul>
                     </Popover>

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

@@ -83,7 +83,7 @@ export default class ExpressionWidget extends Component {
                     </div>
                     <div>
                         {this.props.expression ?
-                         <a className="pr2 text-warning link" onClick={() => this.props.onRemoveExpression(this.props.name)}>{t`Remove`}</a>
+                         <a className="pr2 ml2 text-warning link" onClick={() => this.props.onRemoveExpression(this.props.name)}>{t`Remove`}</a>
                          : null }
                     </div>
                 </div>