(core) give more detailed reasons for access denied when memos are present

Summary:
With this change, if a comment is added to an ACL formula, then that comment will be offered to the user if access is denied and that rule could potentially have granted access.

The code is factored so that when access is permitted, or when partially visible tables are being filtered, there is little overhead. Comments are gathered only when an explicit denial of access.

Test Plan: added tests, updated tests

Reviewers: dsagal

Reviewed By: dsagal

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

app/client/components/Comm.ts

@@ -156,6 +156,9 @@ export interface CommResponseError {
   error: string;
   errorCode: string;
   shouldFork?: boolean;  // if set, the server suggests forking the document.
+  details?: any;  // if set, error has extra details available. TODO - the treatment of
+                  // details could do with some harmonisation between rest API and ws API,
+                  // and between front-end and back-end types.
 }
 
 function isCommResponseError(msg: CommResponse | CommResponseError): msg is CommResponseError {
@@ -460,6 +463,9 @@ export class Comm extends dispose.Disposable implements GristServerAPI, DocListA
             code = ` [${message.errorCode}]`;
             err.code = message.errorCode;
           }
+          if (message.details) {
+            err.details = message.details;
+          }
           err.shouldFork = message.shouldFork;
           console.log(`Comm response #${reqId} ${r.methodName} ERROR:${code} ${message.error}`
                       + (message.shouldFork ? ` (should fork)` : ''));

app/client/models/NotifyModel.ts

@@ -7,6 +7,7 @@ import {timeFormat} from 'app/common/timeFormat';
 import {bundleChanges, Disposable, Holder, IDisposable, IDisposableOwner } from 'grainjs';
 import {Computed, dom, DomElementArg, MutableObsArray, obsArray, Observable} from 'grainjs';
 import clamp = require('lodash/clamp');
+import defaults = require('lodash/defaults');
 
 // When rendering app errors, we'll only show the last few.
 const maxAppErrors = 5;
@@ -45,6 +46,8 @@ export interface INotifyOptions {
   expireSec?: number;
   badgeCounter?: boolean;
 
+  memos?: string[];  // A list of relevant notes.
+
   // cssToastAction class from NotifyUI will be applied automatically to action elements.
   actions?: NotifyAction[];
 
@@ -87,12 +90,13 @@ export class Notification extends Expirable implements INotification {
     expireSec: 0,
     canUserClose: false,
     actions: [],
+    memos: [],
     key: null,
   };
 
   constructor(_opts: INotifyOptions) {
     super();
-    Object.assign(this.options, _opts);
+    this.options = defaults({}, _opts, this.options)
 
     if (this.options.expireSec > 0) {
       const expireTimer = setTimeout(() => this.expire(), 1000 * this.options.expireSec);

app/client/models/errors.ts

@@ -84,7 +84,7 @@ export function reportError(err: Error|string): void {
     } else if (err.name === 'NeedUpgradeError') {
       _notifier.createUserError(err.message, {actions: ['upgrade'], key: 'NEED_UPGRADE'});
     } else if (code === 'AUTH_NO_EDIT' || code === 'ACL_DENY') {
-      _notifier.createUserError(message, {key: code});
+      _notifier.createUserError(err.message, {key: code, memos: details?.memos});
     } else {
       // If we don't recognize it, consider it an application error (bug) that the user should be
       // able to report.

app/client/ui/NotifyUI.ts

@@ -57,6 +57,9 @@ function buildNotificationDom(item: Notification, options: IBeaconOpenOptions) {
       item.options.actions.length ? cssToastActions(
         item.options.actions.map((action) => buildAction(action, item, options))
       ) : null,
+      item.options.memos.length ? cssToastMemos(
+        item.options.memos.map(memo => cssToastMemo(memo))
+      ) : null,
     ),
     dom.maybe(item.options.canUserClose, () =>
       cssToastClose(testId('toast-close'),
@@ -300,6 +303,19 @@ const cssToastAction = styled('div', `
   }
 `);
 
+const cssToastMemos = styled('div', `
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+`);
+
+const cssToastMemo = styled('div', `
+  margin: 3px;
+  color: ${colors.dark};
+  background: ${colors.light};
+  padding: 3px;
+`);
+
 const cssProgressBarWrapper = styled('div', `
   margin-top: 18px;
   margin-bottom: 11px;