Fix regression from sorting ACL rules (#1768)

Author: georgegevoian

app/client/aclui/AccessRules.ts

@@ -42,7 +42,7 @@ import {
   UserAttributeRule
 } from 'app/common/GranularAccessClause';
 import {getDefaultForType, isHiddenCol} from 'app/common/gristTypes';
-import {isNonNullish, unwrap} from 'app/common/gutil';
+import {isNonNullish, localeCompare, unwrap} from 'app/common/gutil';
 import {EmptyRecordView, InfoView, RecordView} from 'app/common/RecordView';
 import {
   getPredicateFormulaProperties,
@@ -129,6 +129,7 @@ export class AccessRules extends Disposable {
 
   // Array of all per-table rules.
   private _tableRules = this.autoDispose(obsArray<TableRules>());
+  private _sortedTableRules: Computed<TableRules[]>;
 
   // The default rule set for the document (for "*:*").
   private _docDefaultRuleSet = Observable.create<DefaultObsRuleSet|null>(this, null);
@@ -184,6 +185,12 @@ export class AccessRules extends Disposable {
       );
     });
 
+    this._sortedTableRules = Computed.create(this, (use) =>
+      [...use(this._tableRules)].sort((a, b) =>
+        localeCompare(a.tableId, b.tableId)
+      )
+    );
+
     this._savingEnabled = Computed.create(this, this._ruleStatus, (use, s) =>
       (s === RuleStatus.ChangedValid));
 
@@ -253,7 +260,6 @@ export class AccessRules extends Disposable {
     this._tableRules.set(
       rules.getAllTableIds()
       .filter(tableId => (tableId !== SPECIAL_RULES_TABLE_ID))
-      .sort((a, b) => a.localeCompare(b))
       .map(tableId => TableRules.create(this._tableRules,
           tableId, this, rules.getAllColumnRuleSets(tableId), rules.getTableDefaultRuleSet(tableId)))
     );
@@ -480,7 +486,7 @@ export class AccessRules extends Disposable {
             ),
           ),
         ),
-        dom.forEach(this._tableRules, (tableRules) => tableRules.buildDom()),
+        dom.forEach(this._sortedTableRules, (tableRules) => tableRules.buildDom()),
         cssSection(
           cssSectionHeading(t("Default Rules"), testId('rule-table-header')),
           dom.maybe(this._specialRulesWithDefault, tableRules => cssSeedRule(