Custom expression: display only one error message (#15818)

It's terrifying to see lots of error messages when the expression is
invalid or not completed yet. To overcome this, we display only one, the
highest-priority and most friendly one. The rank is:
* tokenization error, e.g. mismatched parentheses
* type-checking error, e.g. incorrect count of function arguments
* syntax error (from the parser)

* Fix coding style issue

* Robust against non-Array compileError

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

@@ -78,20 +78,14 @@ const HelpText = ({ helpText, width }) =>
     </Popover>
   ) : null;
 
-const Errors = ({ compileError }) => {
-  if (!compileError) {
-    return null;
-  }
-
-  compileError = Array.isArray(compileError) ? compileError : [compileError];
-
+const ErrorMessage = ({ error }) => {
   return (
     <div>
-      {compileError.map(error => (
+      {error && (
         <div className="text-error mt1 mb1" style={{ whiteSpace: "pre-wrap" }}>
           {error.message}
         </div>
-      ))}
+      )}
     </div>
   );
 };
@@ -248,9 +242,16 @@ export default class ExpressionEditorTextfield extends React.Component {
 
   onInputBlur = () => {
     this.clearSuggestions();
+
     const { tokenizerError, compileError } = this.state;
-    const displayError =
-      tokenizerError.length > 0 ? _.first(tokenizerError) : compileError;
+    let displayError = [...tokenizerError];
+    if (compileError) {
+      if (Array.isArray(compileError)) {
+        displayError = [...displayError, ...compileError];
+      } else {
+        displayError.push(compileError);
+      }
+    }
     this.setState({ displayError });
 
     // whenever our input blurs we push the updated expression to our parent if valid
@@ -259,7 +260,7 @@ export default class ExpressionEditorTextfield extends React.Component {
         console.warn("isExpression=false", this.state.expression);
       }
       this.props.onChange(this.state.expression);
-    } else if (displayError) {
+    } else if (displayError && displayError.length > 0) {
       this.props.onError(displayError);
     } else {
       this.props.onError({ message: t`Invalid expression` });
@@ -365,19 +366,14 @@ export default class ExpressionEditorTextfield extends React.Component {
 
   render() {
     const { placeholder } = this.props;
-    const {
-      compileError,
-      displayError,
-      source,
-      suggestions,
-      syntaxTree,
-    } = this.state;
+    const { displayError, source, suggestions, syntaxTree } = this.state;
 
     const inputClassName = cx("input text-bold text-monospace", {
       "text-dark": source,
       "text-light": !source,
     });
     const inputStyle = { fontSize: 12 };
+    const priorityError = _.first(displayError);
 
     return (
       <div className={cx("relative my1")}>
@@ -395,7 +391,7 @@ export default class ExpressionEditorTextfield extends React.Component {
           ref={this.input}
           type="text"
           className={cx(inputClassName, {
-            "border-error": compileError,
+            "border-error": priorityError,
           })}
           style={{ ...inputStyle, paddingLeft: 26, whiteSpace: "pre-wrap" }}
           placeholder={placeholder}
@@ -409,7 +405,7 @@ export default class ExpressionEditorTextfield extends React.Component {
           onClick={this.onInputClick}
           autoFocus
         />
-        <Errors compileError={displayError} />
+        <ErrorMessage error={priorityError} />
         <HelpText helpText={this.state.helpText} width={this.props.width} />
         <ExpressionEditorSuggestions
           suggestions={suggestions}

frontend/test/metabase/scenarios/question/notebook.cy.spec.js

@@ -886,6 +886,18 @@ describe("scenarios > question > notebook", () => {
         cy.contains(/^Unterminated bracket identifier/i);
       });
     });
+
+    it("should catch non-existent field reference", () => {
+      openProductsTable({ mode: "notebook" });
+      cy.findByText("Custom column").click();
+      popover().within(() => {
+        cy.get("[contenteditable='true']").type("abcdef");
+        cy.findByPlaceholderText("Something nice and descriptive")
+          .click()
+          .type("Non-existent");
+        cy.contains(/^Unknown Field: abcdef/i);
+      });
+    });
   });
 });