(core) add a checkbox for owner "boss mode"

Summary:
Implement a checkbox that grants owners full access to tables by default, when creating new table/column rules.
 * Checkbox appears above default rules.
 * When set, a rule giving owners full access will be inserted in any new rule set started for tables or columns.
 * The checkbox can be expanded to allow customization of the rules.

https://gristlabs.getgrist.com/doc/check-ins/p/3#a1.s7.r2251.c19

Test Plan: added tests

Reviewers: jarek

Reviewed By: jarek

Subscribers: anaisconce

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

app/client/aclui/PermissionsWidget.ts

@@ -15,6 +15,9 @@ import {makeT} from 'app/client/lib/localization';
 // One of the strings 'read', 'update', etc.
 export type PermissionKey = keyof PartialPermissionSet;
 
+// Canonical order of permission bits when rendered in a permissionsWidget.
+const PERMISSION_BIT_ORDER = 'RUCDS';
+
 const t = makeT('PermissionsWidget');
 
 /**
@@ -26,6 +29,7 @@ export function permissionsWidget(
   options: {disabled: boolean, sanityCheck?: (p: PartialPermissionSet) => void},
   ...args: DomElementArg[]
 ) {
+  availableBits = sortBits(availableBits);
   // These are the permission sets available to set via the dropdown.
   const empty: PartialPermissionSet = emptyPermissionSet();
   const allowAll: PartialPermissionSet = makePermissionSet(availableBits, () => 'allow');
@@ -125,6 +129,20 @@ function psetDescription(permissionSet: PartialPermissionSet): string {
   return parts.join(' ');
 }
 
+/**
+ * Sort the bits in a standard way for viewing, since they could be in any order
+ * in the underlying rule store. And in fact ACLPermissions.permissionSetToText
+ * uses an order (CRUDS) that is different from how things have been historically
+ * rendered in the UI (RUCDS).
+ */
+function sortBits(bits: PermissionKey[]) {
+  return bits.sort((a, b) => {
+    const aIndex = PERMISSION_BIT_ORDER.indexOf(a.slice(0, 1).toUpperCase());
+    const bIndex = PERMISSION_BIT_ORDER.indexOf(b.slice(0, 1).toUpperCase());
+    return aIndex - bIndex;
+  });
+}
+
 const cssPermissions = styled('div', `
   display: flex;
   gap: 4px;