(core) Adds a UI panel for managing webhooks

Summary:
This adds a UI panel for managing webhooks. Work started by Cyprien Pindat. You can find the UI on a document's settings page. Main changes relative to Cyprien's demo:

  * Changed behavior of virtual table to be more consistent with the rest of Grist, by factoring out part of the implementation of on-demand tables.
  * Cell values that would create an error can now be denied and reverted (as for the rest of Grist).
  * Changes made by other users are integrated in a sane way.
  * Basic undo/redo support is added using the regular undo/redo stack.
  * The table list in the drop-down is now updated if schema changes.
  * Added a notification from back-end when webhook status is updated so constant polling isn't needed to support multi-user operation.
  *  Factored out webhook specific logic from general virtual table support.
  * Made a bunch of fixes to various broken behavior.
  * Added tests.

The code remains somewhat unpolished, and behavior in the presence of errors is imperfect in general but may be adequate for this case.

I assume that we'll soon be lifting the restriction on the set of domains that are supported for webhooks - otherwise we'd want to provide some friendly way to discover that list of supported domains rather than just throwing an error.

I don't actually know a lot about how the front-end works - it looks like tables/columns/fields/sections can be safely added if they have string ids that won't collide with bone fide numeric ids from the back end. Sneaky.

Contains a migration, so needs an extra reviewer for that.

Test Plan: added tests

Reviewers: jarek, dsagal

Reviewed By: jarek, dsagal

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

app/client/components/GristDoc.ts

@@ -46,6 +46,7 @@ import {DocTutorial} from 'app/client/ui/DocTutorial';
 import {isTourActive} from "app/client/ui/OnBoardingPopups";
 import {IPageWidget, toPageWidget} from 'app/client/ui/PageWidgetPicker';
 import {linkFromId, selectBy} from 'app/client/ui/selectBy';
+import {WebhookPage} from 'app/client/ui/WebhookPage';
 import {startWelcomeTour} from 'app/client/ui/WelcomeTour';
 import {IWidgetType} from 'app/client/ui/widgetTypes';
 import {PlayerState, YouTubePlayer} from 'app/client/ui/YouTubePlayer';
@@ -57,7 +58,7 @@ import {FieldEditor} from "app/client/widgets/FieldEditor";
 import {DiscussionPanel} from 'app/client/widgets/DiscussionEditor';
 import {MinimalActionGroup} from 'app/common/ActionGroup';
 import {ClientQuery} from "app/common/ActiveDocAPI";
-import {CommDocUsage, CommDocUserAction} from 'app/common/CommTypes';
+import {CommDocChatter, CommDocUsage, CommDocUserAction} from 'app/common/CommTypes';
 import {delay} from 'app/common/delay';
 import {DisposableWithEvents} from 'app/common/DisposableWithEvents';
 import {isSchemaAction, UserAction} from 'app/common/DocActions';
@@ -452,6 +453,8 @@ export class GristDoc extends DisposableWithEvents {
 
     this.listenTo(app.comm, 'docUsage', this.onDocUsageMessage);
 
+    this.listenTo(app.comm, 'docChatter', this.onDocChatter);
+
     this.autoDispose(DocConfigTab.create({gristDoc: this}));
 
     this.rightPanelTool = Computed.create(this, (use) => this._getToolContent(use(this._rightPanelTool)));
@@ -565,6 +568,7 @@ export class GristDoc extends DisposableWithEvents {
           content === 'acl' ? dom.create(AccessRules, this) :
           content === 'data' ? dom.create(RawDataPage, this) :
           content === 'settings' ? dom.create(DocSettingsPage, this) :
+          content === 'webhook' ? dom.create(WebhookPage, this) :
           content === 'GristDocTour' ? null :
           (typeof content === 'object') ? dom.create(owner => {
             // In case user changes a page, close the popup.
@@ -706,6 +710,10 @@ export class GristDoc extends DisposableWithEvents {
     }
   }
 
+  public getUndoStack() {
+    return this._undoStack;
+  }
+
   /**
    * Process usage and product received from the server by updating their respective
    * observables.
@@ -719,6 +727,13 @@ export class GristDoc extends DisposableWithEvents {
     });
   }
 
+  public onDocChatter(message: CommDocChatter) {
+    if (!this.docComm.isActionFromThisDoc(message)) { return; }
+    if (message.data.webhooks) {
+      this.trigger('webhooks', message.data.webhooks);
+    }
+  }
+
   public getTableModel(tableId: string): DataTableModel {
     return this.docModel.dataTables[tableId];
   }
@@ -1440,6 +1455,11 @@ export class GristDoc extends DisposableWithEvents {
       // This is raw data view
       await urlState().pushUrl({docPage: 'data'});
       this.viewModel.activeSectionId(sectionId);
+    } else if (section.isVirtual.peek()) {
+      // this is a virtual table, and therefore a webhook page (that is the only
+      // place virtual tables are used so far)
+      await urlState().pushUrl({docPage: 'webhook'});
+      this.viewModel.activeSectionId(sectionId);
     } else {
       const view: ViewRec = section.view.peek();
       await this.openDocPage(view.getRowId());

app/client/components/RecordLayout.js

@@ -94,9 +94,10 @@ RecordLayout.prototype.resizeCallback = function() {
 };
 
 RecordLayout.prototype.getField = function(fieldRowId) {
-  // If fieldRowId is a string, then it's actually "colRef:label:value" placeholder that we use
-  // when adding a new field. If so, return a special object with the fields available.
-  if (typeof fieldRowId === 'string') {
+  // If fieldRowId is a string which includes ":", then it's actually "colRef:label:value"
+  // placeholder that we use when adding a new field. If so, return a special object with the fields
+  // available. Note that virtual tables also produces string fieldRowId but they have no ":".
+  if (typeof fieldRowId === 'string' && fieldRowId.includes(':')) {
     var parts = gutil.maxsplit(fieldRowId, ":", 2);
     return {
       isNewField: true,        // To make it easy to distinguish from a ViewField MetaRowModel

app/client/components/UndoStack.ts

@@ -9,6 +9,9 @@ import sortBy = require('lodash/sortBy');
 
 export interface ActionGroupWithCursorPos extends MinimalActionGroup {
   cursorPos?: CursorPos;
+  // For operations not done by the server, we supply a function to
+  // handle them.
+  op?: (ag: MinimalActionGroup, isUndo: boolean) => Promise<void>;
 }
 
 // Provides observables indicating disabled state for undo/redo.
@@ -28,7 +31,7 @@ export class UndoStack extends dispose.Disposable {
   private _gristDoc: GristDoc;
   private _stack: ActionGroupWithCursorPos[];
   private _pointer: number;
-  private _linkMap: Map<number, MinimalActionGroup[]>;
+  private _linkMap: Map<number, ActionGroupWithCursorPos[]>;
 
   // Chain of promises which send undo actions to the server. This delays the execution of the
   // next action until the current one has been received and moved the pointer index.
@@ -119,11 +122,17 @@ export class UndoStack extends dispose.Disposable {
       // responsive, then again when the action is done. The second jump matters more for most
       // changes, but the first is the important one when Undoing an AddRecord.
       this._gristDoc.moveToCursorPos(ag.cursorPos, ag).catch(() => { /* do nothing */ });
-      await this._gristDoc.docComm.applyUserActionsById(
-        actionGroups.map(a => a.actionNum),
-        actionGroups.map(a => a.actionHash),
-        isUndo,
-        { otherId: ag.actionNum });
+      if (actionGroups.length === 1 && actionGroups[0].op) {
+        // this is an internal operation, rather than one done by the server,
+        // so we can't ask the server to undo it.
+        await actionGroups[0].op(actionGroups[0], isUndo);
+      } else {
+        await this._gristDoc.docComm.applyUserActionsById(
+          actionGroups.map(a => a.actionNum),
+          actionGroups.map(a => a.actionHash),
+          isUndo,
+          { otherId: ag.actionNum });
+      }
       this._gristDoc.moveToCursorPos(ag.cursorPos, ag).catch(() => { /* do nothing */ });
     } catch (err) {
       err.message = `Failed to apply ${isUndo ? 'undo' : 'redo'} action: ${err.message}`;
@@ -134,7 +143,7 @@ export class UndoStack extends dispose.Disposable {
   /**
    * Find all actionGroups in the bundle that starts with the given action group.
    */
-  private _findActionBundle(ag: MinimalActionGroup) {
+  private _findActionBundle(ag: ActionGroupWithCursorPos) {
     const prevNums = new Set();
     const actionGroups = [];
     const queue = [ag];