(core) Show invalid columns as an error when entering rules

Summary:
Auto-complete helps enter correct column names, and when incorrect ones are
entered, we now show an error and prevent saving the rules.

In an unrelated tweak, fix focusing of ACLFormula when clicking into scroll area.

Test Plan: Added a test case for showing invalid columns

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2815

app/client/aclui/ACLFormulaEditor.ts

@@ -71,6 +71,10 @@ export function aclFormulaEditor(options: ACLFormulaOptions) {
 
   return cssConditionInputAce(
     cssConditionInputAce.cls('-disabled', options.readOnly),
+    // ACE editor calls preventDefault on clicks into the scrollbar area, which prevents focus
+    // being set when the click happens to be into there. To ensure we can focus on such clicks
+    // anyway, listen to the mousedown event in the capture phase.
+    dom.on('mousedown', () => { editor.focus(); }, {useCapture: true}),
     dom.onDispose(() => editor.destroy()),
     editorElem,
   );

app/client/aclui/AccessRules.ts

@@ -1118,6 +1118,7 @@ class ObsRulePart extends Disposable {
     }
     this._error = Computed.create(this, (use) => {
       return use(this._formulaError) ||
+        this._warnInvalidColIds(use(this._formulaProperties).usedColIds) ||
         ( !this._ruleSet.isLastCondition(use, this) &&
           use(this._aclFormula) === '' &&
           permissionSetToText(use(this._permissions)) !== '' ?
@@ -1231,6 +1232,7 @@ class ObsRulePart extends Disposable {
     if (text === this._aclFormula.get()) { return; }
     this._aclFormula.set(text);
     this._checkPending.set(true);
+    this._formulaProperties.set({});
     this._formulaError.set('');
     try {
       this._formulaProperties.set(await this._ruleSet.accessRules.checkAclFormula(text));
@@ -1241,6 +1243,15 @@ class ObsRulePart extends Disposable {
       this._checkPending.set(false);
     }
   }
+
+  private _warnInvalidColIds(colIds?: string[]) {
+    if (!colIds || !colIds.length) { return false; }
+    const allValid = new Set(this._ruleSet.getValidColIds());
+    const invalid = colIds.filter(c => !allValid.has(c));
+    if (invalid.length > 0) {
+      return `Invalid columns: ${invalid.join(', ')}`;
+    }
+  }
 }
 
 /**