(core) Improve the UI for ACL rules.

Summary:
- Add headers to tables.
- Change styles to reduce boxes-within-boxes.
- Add validation of table and column IDs, both in UI and on server when saving rules.
- Add autocomplete for tables/columns used for UserAttribute rules.
- Add a fancy widget to set permission bits.

Test Plan: Updated browser test for new UI, added a test case for user attributes.

Reviewers: paulfitz

Reviewed By: paulfitz

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

app/client/ui2018/icons.ts

@@ -49,6 +49,7 @@
  *   `);
  */
 
+import { colors } from 'app/client/ui2018/cssVars';
 import { dom, DomElementArg, styled } from 'grainjs';
 import { IconName } from './IconList';
 
@@ -73,3 +74,21 @@ export function icon(name: IconName, ...domArgs: DomElementArg[]): HTMLElement {
     ...domArgs
   );
 }
+
+/**
+ * Container box for an slate-colored icon to serve as a button, with a grey background on hover.
+ */
+export const cssIconButton = styled('div', `
+  flex: none;
+  height: 24px;
+  width: 24px;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 0px;
+  cursor: default;
+  --icon-color: ${colors.slate};
+  &:hover {
+    background-color: ${colors.darkGrey};
+    --icon-color: ${colors.slate};
+  }
+`);

app/client/ui2018/menus.ts

@@ -209,7 +209,7 @@ export function autocomplete(
 ) {
   return weasel.autocomplete(inputElem, choices, {
     ...defaults, ...options,
-    menuCssClass: menuCssClass + ' ' + cssSelectMenuElem.className,
+    menuCssClass: defaults.menuCssClass + ' ' + cssSelectMenuElem.className + ' ' + (options.menuCssClass || '')
   });
 }