(core) Broadcast doc usage updates to clients

Summary:
Introduces a new message type, docUsage, that's broadcast to all connected
clients whenever document usage is updated in ActiveDoc.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

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

app/client/ui/AppUI.ts

@@ -105,7 +105,7 @@ function pagePanelsHome(owner: IDisposableOwner, appModel: AppModel, app: App) {
     },
     headerMain: createTopBarHome(appModel),
     contentMain: createDocMenu(pageModel),
-    contentTop: dom.create(SiteUsageBanner, pageModel),
+    contentTop: dom.create(SiteUsageBanner, appModel),
   });
 }
 

app/client/ui/BillingPage.ts

@@ -1,3 +1,4 @@
+import {SiteUsageBanner} from 'app/client/components/SiteUsageBanner';
 import {beaconOpenMessage} from 'app/client/lib/helpScout';
 import {AppModel, reportError} from 'app/client/models/AppModel';
 import {BillingModel, BillingModelImpl, ISubscriptionModel} from 'app/client/models/BillingModel';
@@ -51,6 +52,8 @@ export class BillingPage extends Disposable {
 
   constructor(private _appModel: AppModel) {
     super();
+
+    this._appModel.refreshOrgUsage().catch(reportError);
   }
 
   public buildDom() {
@@ -70,7 +73,8 @@ export class BillingPage extends Disposable {
             content: leftPanelBasic(this._appModel, panelOpen),
           },
           headerMain: this._createTopBarBilling(),
-          contentMain: this.buildCurrentPageDom()
+          contentMain: this.buildCurrentPageDom(),
+          contentTop: dom.create(SiteUsageBanner, this._appModel),
         });
       }
     });

app/client/ui/setupPage.ts

@@ -1,10 +1,14 @@
+import {get as getBrowserGlobals} from 'app/client/lib/browserGlobals';
 import {AppModel, TopAppModelImpl} from 'app/client/models/AppModel';
 import {setUpErrorHandling} from 'app/client/models/errors';
 import {buildSnackbarDom} from 'app/client/ui/NotifyUI';
 import {addViewportTag} from 'app/client/ui/viewport';
 import {attachCssRootVars} from 'app/client/ui2018/cssVars';
+import {BaseAPI} from 'app/common/BaseAPI';
 import {dom, DomContents} from 'grainjs';
 
+const G = getBrowserGlobals('document', 'window');
+
 /**
  * Sets up error handling and global styles, and replaces the DOM body with
  * the result of calling `buildPage`.
@@ -14,6 +18,12 @@ export function setupPage(buildPage: (appModel: AppModel) => DomContents) {
   const topAppModel = TopAppModelImpl.create(null, {});
   attachCssRootVars(topAppModel.productFlavor);
   addViewportTag();
+
+  // Add globals needed by test utils.
+  G.window.gristApp = {
+    testNumPendingApiRequests: () => BaseAPI.numPendingRequests(),
+  };
+
   dom.update(document.body, dom.maybe(topAppModel.appObs, (appModel) => [
     buildPage(appModel),
     buildSnackbarDom(appModel.notifier, appModel),

app/client/ui/tooltips.ts

@@ -6,9 +6,10 @@
  */
 
 import {prepareForTransition} from 'app/client/ui/transitions';
-import {testId} from 'app/client/ui2018/cssVars';
+import {colors, testId} from 'app/client/ui2018/cssVars';
+import {IconName} from 'app/client/ui2018/IconList';
 import {icon} from 'app/client/ui2018/icons';
-import {dom, DomContents, DomElementMethod, styled} from 'grainjs';
+import {dom, DomContents, DomElementArg, DomElementMethod, styled} from 'grainjs';
 import Popper from 'popper.js';
 
 export interface ITipOptions {
@@ -193,6 +194,34 @@ export function tooltipCloseButton(ctl: ITooltipControl): HTMLElement {
   );
 }
 
+/**
+ * Renders an icon that shows a tooltip with the specified `tipContent` on hover.
+ */
+export function iconTooltip(
+  iconName: IconName,
+  tipContent: ITooltipContentFunc,
+  ...domArgs: DomElementArg[]
+) {
+  return cssIconTooltip(iconName,
+    hoverTooltip(tipContent, {
+      openDelay: 0,
+      closeDelay: 0,
+      openOnClick: true,
+    }),
+    ...domArgs,
+  );
+}
+
+/**
+ * Renders an info icon that shows a tooltip with the specified `tipContent` on hover.
+ */
+export function infoTooltip(tipContent: DomContents, ...domArgs: DomElementArg[]) {
+  return iconTooltip('Info',
+    () => cssInfoTooltipBody(tipContent),
+    ...domArgs,
+  );
+}
+
 const cssTooltip = styled('div', `
   position: absolute;
   z-index: 5000;      /* should be higher than a modal */
@@ -225,3 +254,15 @@ const cssTooltipCloseButton = styled('div', `
     --icon-color: black;
   }
 `);
+
+const cssIconTooltip = styled(icon, `
+  height: 12px;
+  width: 12px;
+  background-color: ${colors.slate};
+  flex-shrink: 0;
+`);
+
+const cssInfoTooltipBody = styled('div', `
+  text-align: left;
+  max-width: 200px;
+`);