(core) flesh out "View As" feature

Summary:
The users shown by the "View As" button are now drawn from more sources:
 * There are users the document is shared with. This has been rationalized, the behavior was somewhat erratic. If the user is not an owner of the document, the only user of this kind that will be listed is themselves.
 * There are users mentioned in any user attribute table keyed by Email. If name and access columns are present, those are respected, otherwise name is taken from email and access is set to "editors".
 * There are example users provided if there are not many other users available.

Test Plan: added and extended tests

Reviewers: georgegevoian

Reviewed By: georgegevoian

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

app/client/aclui/ACLUsers.ts

@@ -7,12 +7,13 @@ import {cssMemberImage, cssMemberListItem, cssMemberPrimary,
 import {basicButton, basicButtonLink} from 'app/client/ui2018/buttons';
 import {colors, testId} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
-import {menuCssClass} from 'app/client/ui2018/menus';
+import {menuCssClass, menuDivider} from 'app/client/ui2018/menus';
+import {PermissionDataWithExtraUsers} from 'app/common/ActiveDocAPI';
 import {userOverrideParams} from 'app/common/gristUrls';
 import {FullUser} from 'app/common/LoginSessionAPI';
 import * as roles from 'app/common/roles';
 import {ANONYMOUS_USER_EMAIL, EVERYONE_EMAIL} from 'app/common/UserAPI';
-import {getRealAccess, PermissionData, UserAccessData} from 'app/common/UserAPI';
+import {getRealAccess, UserAccessData} from 'app/common/UserAPI';
 import {Disposable, dom, Observable, styled} from 'grainjs';
 import {cssMenu, cssMenuWrap, defaultMenuOptions, IOpenController, setPopupToCreateDom} from 'popweasel';
 
@@ -30,7 +31,7 @@ function buildUserRow(user: UserAccessData, currentUser: FullUser|null, ctl: IOp
     ),
     cssMemberText(
       cssMemberPrimary(user.name || dom('span', user.email),
-        cssRole('(', roleNames[user.access!] || user.access, ')', testId('acl-user-access')),
+        cssRole('(', roleNames[user.access!] || user.access || 'no access', ')', testId('acl-user-access')),
       ),
       user.name ? cssMemberSecondary(user.email) : null
     ),
@@ -53,31 +54,46 @@ function isSpecialEmail(email: string) {
 
 export class ACLUsersPopup extends Disposable {
   public readonly isInitialized = Observable.create(this, false);
-  private _usersInDoc: UserAccessData[] = [];
+  private _shareUsers: UserAccessData[] = [];           // Users doc is shared with.
+  private _attributeTableUsers: UserAccessData[] = [];  // Users mentioned in attribute tables.
+  private _exampleUsers: UserAccessData[] = [];         // Example users.
   private _currentUser: FullUser|null = null;
 
-  public init(pageModel: DocPageModel, permissionData: PermissionData|null) {
+  public init(pageModel: DocPageModel, permissionData: PermissionDataWithExtraUsers|null) {
     this._currentUser = pageModel.userOverride.get()?.user || pageModel.appModel.currentValidUser;
     if (permissionData) {
-      this._usersInDoc = permissionData.users.map(user => ({
+      this._shareUsers = permissionData.users.map(user => ({
         ...user,
         access: getRealAccess(user, permissionData),
       }))
       .filter(user => user.access && !isSpecialEmail(user.email));
+      this._attributeTableUsers = permissionData.attributeTableUsers;
+      this._exampleUsers = permissionData.exampleUsers;
       this.isInitialized.set(true);
     }
   }
 
   public attachPopup(elem: Element) {
-    setPopupToCreateDom(elem, (ctl) => cssMenuWrap(cssMenu(
+    setPopupToCreateDom(elem, (ctl) => {
+      const buildRow = (user: UserAccessData) => buildUserRow(user, this._currentUser, ctl);
+      return cssMenuWrap(cssMenu(
         dom.cls(menuCssClass),
         cssUsers.cls(''),
-        dom.forEach(this._usersInDoc, user => buildUserRow(user, this._currentUser, ctl)),
+        dom.forEach(this._shareUsers, buildRow),
+        // Add a divider between users-from-shares and users from attribute tables.
+        (this._attributeTableUsers.length > 0) ? menuDivider() : null,
+        dom.forEach(this._attributeTableUsers, buildRow),
+        // Include example users only if there are not many "real" users.
+        // It might be better to have an expandable section with these users, collapsed
+        // by default, but that's beyond my UI ken.
+        (this._shareUsers.length + this._attributeTableUsers.length < 5) ? [
+          (this._exampleUsers.length > 0) ? menuDivider() : null,
+          dom.forEach(this._exampleUsers, buildRow)
+        ] : null,
         (el) => { setTimeout(() => el.focus(), 0); },
         dom.onKeyDown({Escape: () => ctl.close()}),
-      )),
-      {...defaultMenuOptions, placement: 'bottom-end'}
-    );
+      ));
+    }, {...defaultMenuOptions, placement: 'bottom-end'});
   }
 }
 

app/client/aclui/AccessRules.ts

@@ -163,8 +163,8 @@ export class AccessRules extends Disposable {
     for (const tableId of ['_grist_ACLResources', '_grist_ACLRules']) {
       const tableData = this._gristDoc.docData.getTable(tableId)!;
       this.autoDispose(tableData.tableActionEmitter.addListener(this._onChange, this));
-      this.autoDispose(this._gristDoc.docPageModel.currentDoc.addListener(this._updateDocAccessData, this));
     }
+    this.autoDispose(this._gristDoc.docPageModel.currentDoc.addListener(this._updateDocAccessData, this));
 
     this.update().catch((e) => this._errorMessage.set(e.message));
   }
@@ -336,12 +336,8 @@ export class AccessRules extends Disposable {
           ),
         ),
         bigBasicButton('Add User Attributes', dom.on('click', () => this._addUserAttributes())),
-        // Disabling "View as user" for forks for the moment. TODO Modify getDocAccess endpoint
-        // to accept forks, through the kind of manipulation that getDoc does; then can enable.
-        !this._gristDoc.docPageModel.isFork.get() ?
-          bigBasicButton('Users', cssDropdownIcon('Dropdown'), elem => this._aclUsersPopup.attachPopup(elem),
-            dom.style('visibility', use => use(this._aclUsersPopup.isInitialized) ? '' : 'hidden'),
-          ) : null,
+        bigBasicButton('Users', cssDropdownIcon('Dropdown'), elem => this._aclUsersPopup.attachPopup(elem),
+          dom.style('visibility', use => use(this._aclUsersPopup.isInitialized) ? '' : 'hidden')),
       ),
       cssConditionError({style: 'margin-left: 16px'},
         dom.maybe(this._publicEditAccess, () => dom('div',
@@ -468,8 +464,7 @@ export class AccessRules extends Disposable {
     const pageModel = this._gristDoc.docPageModel;
     const doc = pageModel.currentDoc.get();
 
-    // Note that the getDocAccess endpoint does not succeed for forks currently.
-    const permissionData = doc && !doc.isFork ? await pageModel.appModel.api.getDocAccess(doc.id) : null;
+    const permissionData = doc && await this._gristDoc.docComm.getUsersForViewAs();
     if (this.isDisposed()) { return; }
 
     this._aclUsersPopup.init(pageModel, permissionData);

app/client/components/DocComm.ts

@@ -56,6 +56,7 @@ export class DocComm extends Disposable implements ActiveDocAPI {
   public checkAclFormula = this._wrapMethod("checkAclFormula");
   public getAclResources = this._wrapMethod("getAclResources");
   public waitForInitialization = this._wrapMethod("waitForInitialization");
+  public getUsersForViewAs = this._wrapMethod("getUsersForViewAs");
 
   public changeUrlIdEmitter = this.autoDispose(new Emitter());