(core) Adds dots menu to access rules page item

Summary: In Access rules page item, adds “…” buttons that shows a menu of users to view-as:

Test Plan: Include new nbrowser test

Reviewers: jarek

Reviewed By: jarek

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

app/client/ui/HomeLeftPane.ts

@@ -7,7 +7,9 @@ import {HomeModel} from 'app/client/models/HomeModel';
 import {getWorkspaceInfo, workspaceName} from 'app/client/models/WorkspaceInfo';
 import {addNewButton, cssAddNewButton} from 'app/client/ui/AddNewButton';
 import {docImport, importFromPlugin} from 'app/client/ui/HomeImports';
-import {cssLinkText, cssPageEntry, cssPageIcon, cssPageLink, cssSpacer} from 'app/client/ui/LeftPanelCommon';
+import {
+  cssLinkText, cssMenuTrigger, cssPageEntry, cssPageIcon, cssPageLink, cssSpacer
+} from 'app/client/ui/LeftPanelCommon';
 import {createVideoTourToolsButton} from 'app/client/ui/OpenVideoTour';
 import {transientInput} from 'app/client/ui/transientInput';
 import {testId, theme} from 'app/client/ui2018/cssVars';
@@ -255,23 +257,3 @@ export const cssEditorInput = styled(transientInput, `
   margin-right: 16px;
   font-size: inherit;
 `);
-
-const cssMenuTrigger = styled('div', `
-  margin: 0 4px 0 auto;
-  height: 24px;
-  width: 24px;
-  padding: 4px;
-  line-height: 0px;
-  border-radius: 3px;
-  cursor: default;
-  display: none;
-  .${cssPageLink.className}:hover > &, &.weasel-popup-open {
-    display: block;
-  }
-  &:hover, &.weasel-popup-open {
-    background-color: ${theme.pageOptionsHoverBg};
-  }
-  .${cssPageEntry.className}-selected &:hover, .${cssPageEntry.className}-selected &.weasel-popup-open {
-    background-color: ${theme.pageOptionsSelectedHoverBg};
-  }
-`);

app/client/ui/LeftPanelCommon.ts

@@ -185,3 +185,23 @@ export const cssPageEntrySmall = styled(cssPageEntry, `
     display: none;
   }
 `);
+
+export const cssMenuTrigger = styled('div', `
+  margin: 0 4px 0 auto;
+  height: 24px;
+  width: 24px;
+  padding: 4px;
+  line-height: 0px;
+  border-radius: 3px;
+  cursor: default;
+  display: none;
+  .${cssPageLink.className}:hover > &, &.weasel-popup-open {
+    display: block;
+  }
+  &:hover, &.weasel-popup-open {
+    background-color: ${theme.pageOptionsHoverBg};
+  }
+  .${cssPageEntry.className}-selected &:hover, .${cssPageEntry.className}-selected &.weasel-popup-open {
+    background-color: ${theme.pageOptionsSelectedHoverBg};
+  }
+`);

app/client/ui/Tools.ts

@@ -1,10 +1,11 @@
+import {ACLUsersPopup} from 'app/client/aclui/ACLUsers';
 import {makeT} from 'app/client/lib/localization';
 import {GristDoc} from 'app/client/components/GristDoc';
 import {urlState} from 'app/client/models/gristUrlState';
 import {getUserOrgPrefObs, markAsSeen} from 'app/client/models/UserPrefs';
 import {showExampleCard} from 'app/client/ui/ExampleCard';
 import {buildExamples} from 'app/client/ui/ExampleInfo';
-import {createHelpTools, cssLinkText, cssPageEntry, cssPageEntryMain, cssPageEntrySmall,
+import {createHelpTools, cssLinkText, cssMenuTrigger, cssPageEntry, cssPageEntryMain, cssPageEntrySmall,
         cssPageIcon, cssPageLink, cssSectionHeader, cssSpacer, cssSplitPageEntry,
         cssTools} from 'app/client/ui/LeftPanelCommon';
 import {theme} from 'app/client/ui2018/cssVars';
@@ -12,6 +13,7 @@ import {icon} from 'app/client/ui2018/icons';
 import {confirmModal} from 'app/client/ui2018/modals';
 import {isOwner} from 'app/common/roles';
 import {Disposable, dom, makeTestId, Observable, observable, styled} from 'grainjs';
+import noop from 'lodash/noop';
 
 const testId = makeTestId('test-tools-');
 const t = makeT('Tools');
@@ -33,11 +35,31 @@ export function tools(owner: Disposable, gristDoc: GristDoc, leftPanelOpen: Obse
     cssPageEntry(
       cssPageEntry.cls('-selected', (use) => use(gristDoc.activeViewId) === 'acl'),
       cssPageEntry.cls('-disabled', (use) => !use(canViewAccessRules)),
-      dom.domComputed(canViewAccessRules, (_canViewAccessRules) => {
+      dom.domComputedOwned(canViewAccessRules, (computedOwner, _canViewAccessRules) => {
+        const aclUsers = ACLUsersPopup.create(computedOwner, docPageModel);
+        if (_canViewAccessRules) {
+          aclUsers.load()
+          // getUsersForViewAs() could fail for couple good reasons (access deny to anon user,
+          // `document not found` when anon creates a new empty document, ...), users can have more
+          // info by opening acl page, so let's silently fail here.
+            .catch(noop);
+        }
         return cssPageLink(
           cssPageIcon('EyeShow'),
           cssLinkText(t("Access Rules")),
           _canViewAccessRules ? urlState().setLinkUrl({docPage: 'acl'}) : null,
+          cssMenuTrigger(
+            icon('Dots'),
+            aclUsers.menu({
+              placement: 'bottom-start',
+              parentSelectorToMark: '.' + cssPageEntry.className
+            }),
+
+            // Clicks on the menu trigger shouldn't follow the link that it's contained in.
+            dom.on('click', (ev) => { ev.stopPropagation(); ev.preventDefault(); }),
+            testId('access-rules-trigger'),
+            dom.show(use => use(aclUsers.isInitialized) && _canViewAccessRules),
+          ),
         );
       }),
       testId('access-rules'),