(core) Show usage banners in doc menu of free team sites

Summary:
Also fixes a minor CSS regression in UserManager where the
link to add a team member wasn't shown on a separate row.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

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

app/client/ui/AppUI.ts

@@ -1,4 +1,5 @@
 import {DocUsageBanner} from 'app/client/components/DocUsageBanner';
+import {SiteUsageBanner} from 'app/client/components/SiteUsageBanner';
 import {domAsync} from 'app/client/lib/domAsync';
 import {loadBillingPage} from 'app/client/lib/imports';
 import {createSessionObs, isBoolean, isNumber} from 'app/client/lib/sessionObs';
@@ -102,6 +103,7 @@ function pagePanelsHome(owner: IDisposableOwner, appModel: AppModel, app: App) {
     },
     headerMain: createTopBarHome(appModel),
     contentMain: createDocMenu(pageModel),
+    contentTop: dom.create(SiteUsageBanner, pageModel),
   });
 }
 

app/client/ui/Tools.ts

@@ -13,17 +13,18 @@ import {cssLink} from 'app/client/ui2018/links';
 import {menuAnnotate} from 'app/client/ui2018/menus';
 import {confirmModal} from 'app/client/ui2018/modals';
 import {userOverrideParams} from 'app/common/gristUrls';
+import {isOwner} from 'app/common/roles';
 import {Disposable, dom, makeTestId, Observable, observable, styled} from 'grainjs';
 
 const testId = makeTestId('test-tools-');
 
 export function tools(owner: Disposable, gristDoc: GristDoc, leftPanelOpen: Observable<boolean>): Element {
   const docPageModel = gristDoc.docPageModel;
-  const isOwner = docPageModel.currentDoc.get()?.access === 'owners';
+  const isDocOwner = isOwner(docPageModel.currentDoc.get());
   const isOverridden = Boolean(docPageModel.userOverride.get());
   const canViewAccessRules = observable(false);
   function updateCanViewAccessRules() {
-    canViewAccessRules.set((isOwner && !isOverridden) ||
+    canViewAccessRules.set((isDocOwner && !isOverridden) ||
                            gristDoc.docModel.rules.getNumRows() > 0);
   }
   owner.autoDispose(gristDoc.docModel.rules.tableData.tableActionEmitter.addListener(updateCanViewAccessRules));
@@ -103,7 +104,7 @@ export function tools(owner: Disposable, gristDoc: GristDoc, leftPanelOpen: Obse
             testId('doctour'),
           ),
         ),
-        !isOwner ? null : cssPageEntrySmall(
+        !isDocOwner ? null : cssPageEntrySmall(
           cssPageLink(cssPageIcon('Remove'),
             dom.on('click', () => confirmModal('Delete document tour?', 'Delete', () =>
               gristDoc.docData.sendAction(['RemoveTable', 'GristDocTour']))

app/client/ui/UserManager.ts

@@ -283,12 +283,9 @@ export class UserManager extends Disposable {
             !member.name ? null : cssMemberSecondary(
               member.email, dom.cls('member-email'), testId('um-member-email')
             ),
-            dom('span',
-              (this._model.isPersonal
-                ? this._buildSelfAnnotationDom(member)
-                : this._buildAnnotationDom(member)
-              ),
-              testId('um-member-annotation'),
+            (this._model.isPersonal
+              ? this._buildSelfAnnotationDom(member)
+              : this._buildAnnotationDom(member)
             ),
           ),
           member.isRemoved ? null : this._memberRoleSelector(member.effectiveAccess,
@@ -364,15 +361,18 @@ export class UserManager extends Disposable {
       const annotation = annotations.users.get(user.email);
       if (!annotation) { return null; }
 
+      let memberType: string;
       if (annotation.isSupport) {
-        return cssMemberType('Grist support');
+        memberType = 'Grist support';
       } else if (annotation.isMember && annotations.hasTeam) {
-        return cssMemberType('Team member');
+        memberType = 'Team member';
       } else if (annotations.hasTeam) {
-        return cssMemberType('Outside collaborator');
+        memberType = 'Outside collaborator';
       } else {
-        return cssMemberType('Collaborator');
+        memberType = 'Collaborator';
       }
+
+      return cssMemberType(memberType, testId('um-member-annotation'));
     });
   }