(core) Add document usage banners

Summary:
This also enables the new Usage section for all sites. Currently,
it shows metrics for document row count, but only if the user
has full document read access. Otherwise, a message about
insufficient access is shown.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

Subscribers: alexmojaki

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

app/common/ActiveDocAPI.ts

@@ -153,8 +153,6 @@ export interface PermissionDataWithExtraUsers extends PermissionData {
   exampleUsers: UserAccessData[];
 }
 
-export type DataLimitStatus = null | 'approachingLimit' | 'gracePeriod' | 'deleteOnly';
-
 export interface ActiveDocAPI {
   /**
    * Closes a document, and unsubscribes from its userAction events.

app/common/DocListAPI.ts

@@ -1,8 +1,8 @@
 import {MinimalActionGroup} from 'app/common/ActionGroup';
-import {DataLimitStatus} from 'app/common/ActiveDocAPI';
 import {TableDataAction} from 'app/common/DocActions';
 import {Role} from 'app/common/roles';
 import {StringUnion} from 'app/common/StringUnion';
+import {DataLimitStatus, RowCount} from 'app/common/Usage';
 import {FullUser} from 'app/common/UserAPI';
 
 // Possible flavors of items in a list of documents.
@@ -43,9 +43,9 @@ export interface OpenLocalDocResult {
   clientId: string;  // the docFD is meaningful only in the context of this session
   doc: {[tableId: string]: TableDataAction};
   log: MinimalActionGroup[];
+  rowCount: RowCount;
   recoveryMode?: boolean;
   userOverride?: UserOverride;
-  rowCount?: number;
   dataLimitStatus?: DataLimitStatus;
 }
 

app/common/Usage.ts

@@ -0,0 +1,6 @@
+export type RowCount = number | 'hidden' | 'pending';
+
+export type DataLimitStatus = null | 'approachingLimit' | 'gracePeriod' | 'deleteOnly';
+
+// Ratio of the row/data size limit where we tell users that they're approaching the limit.
+export const APPROACHING_LIMIT_RATIO = 0.9;

app/common/gutil.ts

@@ -50,6 +50,11 @@ export function capitalize(str: string): string {
   return str.replace(/\b[a-z]/gi, c => c.toUpperCase());
 }
 
+// Capitalizes the first word in a string.
+export function capitalizeFirstWord(str: string): string {
+  return str.replace(/\b[a-z]/i, c => c.toUpperCase());
+}
+
 // Returns whether the string n represents a valid number.
 // http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric
 export function isNumber(n: string): boolean {