(core) Add a Plus button below a rule set when there is no default rule

Summary:
- If you type into the "Everyone" / "Everyone Else" rule, and it stops being
  the default rule, there will now be an extra row with a "+" button to add a
  new default rule
- Switch to ACE-supported auto-resizing (for better scrollbars handling)
- Tweak ACE padding styles for better-looking scrolling.

Test Plan: Added a test case for the extra "+" button.

Reviewers: paulfitz

Reviewed By: paulfitz

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

app/client/aclui/AccessRules.ts

@@ -726,6 +726,18 @@ abstract class ObsRuleSet extends Disposable {
       ),
       cssCell4(cssRuleBody.cls(''),
         dom.forEach(this._body, part => part.buildRulePartDom()),
+        dom.maybe(use => !this.hasDefaultCondition(use), () =>
+          cssColumnGroup(
+            {style: 'min-height: 28px'},
+            cssCellIcon(
+              cssIconButton(icon('Plus'),
+                dom.on('click', () => this.addRulePart(null)),
+                testId('rule-add'),
+              )
+            ),
+            testId('rule-extra-add'),
+          )
+        ),
       ),
       testId('rule-set'),
     );
@@ -738,8 +750,9 @@ abstract class ObsRuleSet extends Disposable {
     }
   }
 
-  public addRulePart(beforeRule: ObsRulePart) {
-    const i = this._body.get().indexOf(beforeRule);
+  public addRulePart(beforeRule: ObsRulePart|null) {
+    const body = this._body.get();
+    const i = beforeRule ? body.indexOf(beforeRule) : body.length;
     this._body.splice(i, 0, ObsRulePart.create(this._body, this, undefined));
   }
 
@@ -768,6 +781,11 @@ abstract class ObsRuleSet extends Disposable {
     return body[body.length - 1] === part;
   }
 
+  public hasDefaultCondition(use: UseCB): boolean {
+    const body = use(this._body);
+    return body.length > 0 && body[body.length - 1].hasEmptyCondition(use);
+  }
+
   /**
    * Which permission bits to allow the user to set.
    */
@@ -1127,6 +1145,10 @@ class ObsRulePart extends Disposable {
     };
   }
 
+  public hasEmptyCondition(use: UseCB): boolean {
+    return use(this._aclFormula) === '';
+  }
+
   public matches(use: UseCB, aclFormula: string, permissionsText: string): boolean {
     return (use(this._aclFormula) === aclFormula &&
             permissionSetToText(use(this._permissions)) === permissionsText);