(core) annotate shares listed in UserManager for documents

Summary:
This gives more guidance to users when editing document shares in the UserManager dialog.

  * For a document on a team site, any shares with team members are marked `Team member`.
  * Shares that count as external collaborators are marked for documents on a team or personal site as `collaborator` (personal site) or `outside collaborator` (team site).
  * Collaborators are marked `1 of 2`, `2 of 2`, and then `limit exceeded`.
  * On a team site, links are offered for each collaborator to add them to the team. The links lead to a prefilled dialog for managing team membership which can be confirmed immediately, allowing the user to continue without interruption.
  * On a personal site, for the last collaborator and beyond, a link is added for creating a team. This isn't seamless since creating a team involves billing etc.

There's a small unrelated tweak in tests to remove a confusing import from `test/browser` in `test/server`.

One thing I didn't get to is checking if owner of doc is owner of site. If they aren't, they may try to add a member and be denied at that point - it would be more polite to change messaging earlier for them.

Test Plan: added and updated tests

Reviewers: georgegevoian

Reviewed By: georgegevoian

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

app/client/ui/UserItem.ts

@@ -13,13 +13,14 @@ import {cssMenuItem} from 'popweasel';
 //     cssMemberText(
 //       cssMemberPrimary(NAME),
 //       cssMemberSecondary(EMAIL),
+//       cssMemberType(DESCRIPTION),
 //     )
 //   )
 
 export const cssMemberListItem = styled('div', `
   display: flex;
   width: 460px;
-  height: 64px;
+  min-height: 64px;
   margin: 0 auto;
   padding: 12px 0;
 `);
@@ -74,6 +75,32 @@ export const cssMemberSecondary = styled('span', `
   }
 `);
 
+export const cssMemberType = styled('span', `
+  color: ${colors.slate};
+  /* the following just undo annoying bootstrap styles that apply to all labels */
+  margin: 0px;
+  font-weight: normal;
+  padding: 2px 0;
+  white-space: nowrap;
+
+  .${cssMenuItem.className}-sel & {
+    color: white;
+  }
+`);
+
+export const cssMemberTypeProblem = styled('span', `
+  color: ${colors.error};
+  /* the following just undo annoying bootstrap styles that apply to all labels */
+  margin: 0px;
+  font-weight: normal;
+  padding: 2px 0;
+  white-space: nowrap;
+
+  .${cssMenuItem.className}-sel & {
+    color: white;
+  }
+`);
+
 export const cssMemberBtn = styled('div', `
   width: 16px;
   height: 16px;