(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];

app/client/models/DocData.ts

@@ -32,6 +32,8 @@ export class DocData extends BaseDocData {
   private _lastActionNum: number|null = null;   // ActionNum of the last action in the current bundle, or null.
   private _bundleSender: BundleSender;
 
+  private _virtualTablesFunc: Map<string, Constructor<TableData>>;
+
   /**
    * Constructor for DocData.
    * @param {Object} docComm: A map of server methods available on this document.
@@ -41,10 +43,12 @@ export class DocData extends BaseDocData {
   constructor(public readonly docComm: DocComm, metaTableData: {[tableId: string]: TableDataAction}) {
     super((tableId) => docComm.fetchTable(tableId), metaTableData);
     this._bundleSender = new BundleSender(this.docComm);
+    this._virtualTablesFunc = new Map();
   }
 
   public createTableData(tableId: string, tableData: TableDataAction|null, colTypes: ColTypeMap): TableData {
-    return new TableData(this, tableId, tableData, colTypes);
+    const Cons = this._virtualTablesFunc?.get(tableId) || TableData;
+    return new Cons(this, tableId, tableData, colTypes);
   }
 
   // Version of inherited getTable() which returns the enhance TableData type.
@@ -182,8 +186,16 @@ export class DocData extends BaseDocData {
     return this.sendActions([action], optDesc).then((retValues) => retValues[0]);
   }
 
+  public registerVirtualTable(tableId: string, Cons: typeof TableData) {
+    this._virtualTablesFunc.set(tableId, Cons);
+  }
+
   // See documentation of sendActions().
   private async _sendActionsImpl(actions: UserAction[], optDesc?: string): Promise<any[]> {
+    if (this._virtualTablesFunc?.has(actions[0]?.[1] as any)) {
+      // It would be easy to pass along actions, but we don't need this functionality yet.
+      throw new Error('_sendActionsImpl needs updating to direct actions to virtual tables');
+    }
     const eventData = {actions};
     this.sendActionsEmitter.emit(eventData);
     const options = { desc: optDesc };
@@ -282,3 +294,5 @@ export interface BundlingInfo<T = unknown> {
   // Promise for when the bundle has been finalized.
   completionPromise: Promise<void>;
 }
+
+type Constructor<T> = new (...args: any[]) => T;

app/client/models/DocModel.ts

@@ -281,6 +281,7 @@ export class DocModel {
   private _createVisibleTablesArray(): KoArray<TableRec> {
     return createTablesArray(this.tables, r =>
       !isHiddenTable(this.tables.tableData, r) &&
+      !isVirtualTable(this.tables.tableData, r) &&
       (!isTutorialTable(this.tables.tableData, r) || this.showDocTutorialTable)
     );
   }
@@ -326,3 +327,11 @@ function createTablesArray(
 function isTutorialTable(tablesData: TableData, tableRef: UIRowId): boolean {
   return tablesData.getValue(tableRef, 'tableId') === 'GristDocTutorial';
 }
+
+/**
+ * Check whether a table is virtual - currently that is done
+ * by having a string rowId rather than the expected integer.
+ */
+function isVirtualTable(tablesData: TableData, tableRef: UIRowId): boolean {
+  return typeof(tableRef) === 'string';
+}

app/client/models/VirtualTable.ts

@@ -0,0 +1,242 @@
+import { reportError } from 'app/client/models/errors';
+import { GristDoc } from 'app/client/components/GristDoc';
+import { DocData } from 'app/client/models/DocData';
+import { TableData } from 'app/client/models/TableData';
+import { concatenateSummaries, summarizeStoredAndUndo } from 'app/common/ActionSummarizer';
+import { TableDelta } from 'app/common/ActionSummary';
+import { ProcessedAction } from 'app/common/AlternateActions';
+import { DisposableWithEvents } from 'app/common/DisposableWithEvents';
+import { DocAction, TableDataAction, UserAction } from 'app/common/DocActions';
+import { DocDataCache } from 'app/common/DocDataCache';
+import { ColTypeMap } from 'app/common/TableData';
+import { RowRecord } from 'app/plugin/GristData';
+import debounce = require('lodash/debounce');
+
+/**
+ * An interface for use while editing a virtual table.
+ * This is the interface passed to beforeEdit and afterEdit callbacks.
+ * The getRecord method gives access to the record prior to the edit;
+ * the getRecordNew method gives access to (an internal copy of)
+ * the record after the edit.
+ * The same interface is passed in other places, in which case
+ * actions and delta are trivial.
+ */
+export interface IEdit {
+  gristDoc: GristDoc,
+  actions: ProcessedAction[],  // UserActions plus corresponding DocActions (forward and undo).
+  delta: TableDelta,           // A summary of the effect actions would have (or had).
+
+  /**
+   * Apply a set of actions. The result is from the store backing the
+   * virtual table. Will not trigger beforeEdit or afterEdit callbacks.
+   */
+  patch(actions: UserAction[]): Promise<ProcessedAction[]>;
+
+  getRecord(rowId: number): RowRecord|undefined;     // A record in the table.
+  getRecordNew(rowId: number): RowRecord|undefined;  // A record in the table, after the edit.
+  getRowIds(): readonly number[];  // All rowIds in the table.
+}
+
+/**
+ * Interface with a back-end for a specific virtual table.
+ */
+export interface IExternalTable {
+  name: string;  // the tableId of the virtual table (e.g. GristHidden_WebhookTable)
+  initialActions: DocAction[];  // actions to create the table.
+  fetchAll(): Promise<TableDataAction>;  // get initial state of the table.
+  sync(editor: IEdit): Promise<void>;    // incorporate external changes.
+  beforeEdit(editor: IEdit): Promise<void>;  // called prior to committing a change.
+  afterEdit(editor: IEdit): Promise<void>;   // called after committing a change.
+  afterAnySchemaChange(editor: IEdit): Promise<void>;  // called after any schema change in the document.
+}
+
+// A counter to generate unique actionNums for undo actions.
+let _counterForUndoActions: number = 1;
+
+/**
+ * A flavor of TableData that is backed by external operations and local cache.
+ * This lets virtual tables "fit in" to a DocData instance.
+ */
+export class VirtualTableData extends TableData {
+
+  public gristDoc: GristDoc;
+  public ext: IExternalTable;
+  public cache: DocDataCache;
+
+  constructor(docData: DocData, tableId: string, tableData: TableDataAction|null, columnTypes: ColTypeMap) {
+    super(docData, tableId, tableData, columnTypes);
+  }
+
+  public setExt(_ext: IExternalTable) {
+    this.ext = _ext;
+    this.cache = new DocDataCache(this.ext.initialActions);
+  }
+
+  public get name() {
+    return this.ext.name;
+  }
+
+  public fetchData() {
+    return super.fetchData(async () => {
+      const data = await this.ext.fetchAll();
+      this.cache.docData.getTable(this.name)?.loadData(data);
+      return data;
+    });
+  }
+
+  public async sendTableActions(userActions: UserAction[]): Promise<any[]> {
+    const actions = await this._sendTableActionsCore(userActions,
+                                                     {isUser: true});
+    await this.ext.afterEdit(this._editor(actions));
+    return actions.map(action => action.retValues);
+  }
+
+  public sync() {
+    return this.ext.sync(this._editor());
+  }
+
+  public async sendTableAction(action: UserAction): Promise<any> {
+    const retValues = await this.sendTableActions([action]);
+    return retValues[0];
+  }
+
+  public async schemaChange() {
+    await this.ext.afterAnySchemaChange(this._editor());
+  }
+
+  private _editor(actions: ProcessedAction[] = []): IEdit {
+    const summary = concatenateSummaries(
+      actions
+        .map(action => summarizeStoredAndUndo(action.stored, action.undo)));
+    const delta = summary.tableDeltas[this.name];
+    return {
+      actions,
+      delta,
+      gristDoc: this.gristDoc,
+      getRecord: rowId => this.getRecord(rowId),
+      getRecordNew: rowId => this.getRecord(rowId),
+      getRowIds: () => this.getRowIds(),
+      patch: userActions => this._sendTableActionsCore(userActions, {
+        hasTableIds: true,
+        isUser: false,
+      })
+    };
+  }
+
+  private async _sendTableActionsCore(userActions: UserAction[], options: {
+    isUser: boolean,
+    isUndo?: boolean,
+    hasTableIds?: boolean,
+    actionNum?: any,
+  }): Promise<ProcessedAction[]> {
+    const {isUndo, isUser, hasTableIds} = options;
+    if (!hasTableIds) {
+      userActions.forEach((action) => action.splice(1, 0, this.tableId));
+    }
+    const actions = await this.cache.sendTableActions(userActions);
+    if (isUser) {
+      const newTable = await this.cache.docData.requireTable(this.name);
+      try {
+        await this.ext.beforeEdit({
+          ...this._editor(actions),
+          getRecordNew: rowId => newTable.getRecord(rowId),
+        });
+      } catch (e) {
+        actions.reverse();
+        for (const action of actions) {
+          await this.cache.sendTableActions(action.undo);
+        }
+        throw e;
+      }
+    }
+
+    for (const action of actions) {
+      for (const docAction of action.stored) {
+        this.docData.receiveAction(docAction);
+        this.cache.docData.receiveAction(docAction);
+        if (isUser) {
+          const code = `ext-${this.name}-${_counterForUndoActions}`;
+          _counterForUndoActions++;
+          this.gristDoc.getUndoStack().pushAction({
+            actionNum: code,
+            actionHash: 'hash',
+            fromSelf: true,
+            otherId: options.actionNum || 0,
+            linkId: 0,
+            rowIdHint: 0,
+            isUndo,
+            action,
+            op: this._doUndo.bind(this),
+          } as any);
+        }
+      }
+    }
+    return actions;
+  }
+
+
+  private async _doUndo(actionGroup: {
+    action: ProcessedAction,
+    actionNum: number|string,
+  }, isUndo: boolean) {
+    await this._sendTableActionsCore(
+      isUndo ? actionGroup.action.undo : actionGroup.action.stored,
+      {
+        isUndo,
+        isUser: true,
+        actionNum: actionGroup.actionNum,
+        hasTableIds: true,
+      });
+  }
+}
+
+/**
+ * Everything needed to run a virtual table. Contains a tableData instance.
+ * Subscribes to schema changes. Offers a debouncing lazySync method that
+ * will attempt to synchronize the virtual table with the external source
+ * one second after last call (or at most 2 seconds after the first
+ * call).
+ */
+export class VirtualTable {
+  public lazySync = debounce(this.sync, 1000, {
+    maxWait: 2000,
+    trailing: true,
+  });
+  public tableData: VirtualTableData;
+
+  public constructor(private _owner: DisposableWithEvents,
+                     _gristDoc: GristDoc,
+                     _ext: IExternalTable) {
+    if (!_gristDoc.docModel.docData.getTable(_ext.name)) {
+
+      // register the virtual table
+      _gristDoc.docModel.docData.registerVirtualTable(_ext.name, VirtualTableData);
+
+      // then process initial actions
+      for (const action of _ext.initialActions) {
+        _gristDoc.docData.receiveAction(action);
+      }
+
+      // pass in gristDoc and external interface
+      this.tableData = _gristDoc.docModel.docData.getTable(_ext.name)! as VirtualTableData;
+      //this.tableData.docApi = this.docApi;
+      this.tableData.gristDoc = _gristDoc;
+      this.tableData.setExt(_ext);
+
+      // subscribe to schema changes
+      this.tableData.schemaChange().catch(e => reportError(e));
+      _owner.listenTo(_gristDoc, 'schemaUpdateAction', () => this.tableData.schemaChange());
+    } else {
+      this.tableData = _gristDoc.docModel.docData.getTable(_ext.name)! as VirtualTableData;
+    }
+    // debounce is typed as returning a promise, but doesn't appear to actually do so?
+    Promise.resolve(this.lazySync()).catch(e => reportError(e));
+  }
+
+  public async sync() {
+    if (this._owner.isDisposed()) {
+      return;
+    }
+    await this.tableData.sync();
+  }
+}

app/client/models/entities/ViewSectionRec.ts

@@ -56,6 +56,7 @@ export interface ViewSectionRec extends IRowModel<"_grist_Views_section">, RuleO
   // true if this record is its table's rawViewSection, i.e. a 'raw data view'
   // in which case the UI prevents various things like hiding columns or changing the widget type.
   isRaw: ko.Computed<boolean>;
+  isVirtual: ko.Computed<boolean>;
   isCollapsed: ko.Computed<boolean>;
 
   borderWidthPx: ko.Computed<string>;
@@ -367,6 +368,8 @@ export function createViewSectionRec(this: ViewSectionRec, docModel: DocModel):
   // in which case the UI prevents various things like hiding columns or changing the widget type.
   this.isRaw = this.autoDispose(ko.pureComputed(() => this.table().rawViewSectionRef() === this.getRowId()));
 
+  this.isVirtual = this.autoDispose(ko.pureComputed(() => typeof this.id() === 'string'));
+
   this.borderWidthPx = ko.pureComputed(() => this.borderWidth() + 'px');
 
   this.layoutSpecObj = modelUtil.jsonObservable(this.layoutSpec);

app/client/ui/DocumentSettings.ts

@@ -8,9 +8,11 @@ import {ACSelectItem, buildACSelect} from 'app/client/lib/ACSelect';
 import {copyToClipboard} from 'app/client/lib/copyToClipboard';
 import {makeT} from 'app/client/lib/localization';
 import {reportError} from 'app/client/models/AppModel';
+import {urlState} from 'app/client/models/gristUrlState';
 import {KoSaveableObservable} from 'app/client/models/modelUtil';
 import {docListHeader} from 'app/client/ui/DocMenuCss';
 import {showTransientTooltip} from 'app/client/ui/tooltips';
+import {primaryButtonLink} from 'app/client/ui2018/buttons';
 import {mediaSmall, testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {select} from 'app/client/ui2018/menus';
 import {confirmModal} from 'app/client/ui2018/modals';
@@ -83,6 +85,8 @@ export class DocSettingsPage extends Disposable {
           await copyToClipboard(docPageModel.currentDocId.get()!);
         }),
       )),
+      cssHeader(t('Webhooks'), cssBeta('Beta')),
+      cssDataRow(primaryButtonLink(t('Manage Webhooks'), urlState().setLinkUrl({docPage: 'webhook'}))),
     );
   }
 
@@ -169,6 +173,13 @@ const cssDataRow = styled('div', `
   width: 360px;
 `);
 
+const cssBeta = styled('sup', `
+  text-transform: uppercase;
+  color: ${theme.text};
+  font-size: ${vars.smallFontSize};
+  margin-left: 8px;
+`);
+
 // Check which engines can be selected in the UI, if any.
 export function getSupportedEngineChoices(): EngineCode[] {
   const gristConfig: GristLoadConfig = (window as any).gristConfig || {};

app/client/ui/WebhookPage.ts

@@ -0,0 +1,427 @@
+import { GristDoc } from 'app/client/components/GristDoc';
+import { ViewSectionHelper } from 'app/client/components/ViewLayout';
+import { makeT } from 'app/client/lib/localization';
+import { reportMessage, reportSuccess } from 'app/client/models/errors';
+import { IEdit, IExternalTable, VirtualTable } from 'app/client/models/VirtualTable';
+import { docListHeader } from 'app/client/ui/DocMenuCss';
+import { bigPrimaryButton } from 'app/client/ui2018/buttons';
+import { mediaSmall, testId } from 'app/client/ui2018/cssVars';
+import { ApiError } from 'app/common/ApiError';
+import { DisposableWithEvents } from 'app/common/DisposableWithEvents';
+import { DocAction, getColIdsFromDocAction, getColValues,
+         isDataAction, TableDataAction, UserAction } from 'app/common/DocActions';
+import { WebhookSummary } from 'app/common/Triggers';
+import { DocAPI } from 'app/common/UserAPI';
+import { GristObjCode, RowRecord } from 'app/plugin/GristData';
+import { dom, styled } from 'grainjs';
+import omit = require('lodash/omit');
+import pick = require('lodash/pick');
+import range = require('lodash/range');
+import without = require('lodash/without');
+
+const t = makeT('WebhookPage');
+
+/**
+ * A list of columns for a virtual table about webhooks.
+ * The ids need to be strings.
+ */
+const WEBHOOK_COLUMNS = [
+  {
+    id: 'vt_webhook_fc1',
+    colId: 'tableId',
+    type: 'Choice',
+    label: 'Table',
+    // widgetOptions are configured later, since the choices depend
+    // on the user tables in the document.
+  },
+  {
+    id: 'vt_webhook_fc2',
+    colId: 'url',
+    type: 'Text',
+    label: 'URL',
+  },
+  {
+    id: 'vt_webhook_fc3',
+    colId: 'eventTypes',
+    type: 'ChoiceList',
+    label: 'Event Types',
+    widgetOptions: JSON.stringify({
+      widget: 'TextBox',
+      alignment: 'left',
+      choices: ['add', 'update'],
+      choiceOptions: {},
+    }),
+  },
+  {
+    id: 'vt_webhook_fc4',
+    colId: 'enabled',
+    type: 'Bool',
+    label: 'Enabled',
+    widgetOptions: JSON.stringify({
+      widget: 'Switch',
+    }),
+  },
+  {
+    id: 'vt_webhook_fc5',
+    colId: 'isReadyColumn',
+    type: 'Text',
+    label: 'Ready Column',
+  },
+  {
+    id: 'vt_webhook_fc6',
+    colId: 'webhookId',
+    type: 'Text',
+    label: 'Webhook Id',
+  },
+  {
+    id: 'vt_webhook_fc7',
+    colId: 'name',
+    type: 'Text',
+    label: 'Name',
+  },
+  {
+    id: 'vt_webhook_fc8',
+    colId: 'memo',
+    type: 'Text',
+    label: 'Memo',
+  },
+  {
+    id: 'vt_webhook_fc9',
+    colId: 'status',
+    type: 'Text',
+    label: 'Status',
+  },
+] as const;
+
+/**
+ * Layout of fields in a view, with a specific ordering.
+ */
+const WEBHOOK_VIEW_FIELDS: Array<(typeof WEBHOOK_COLUMNS)[number]['colId']> = [
+  'name', 'memo',
+  'eventTypes', 'url',
+  'tableId', 'isReadyColumn',
+  'webhookId', 'enabled',
+  'status'
+];
+
+/**
+ *
+ * Change webhooks based on a virtual table.
+ *
+ * TODO: error handling is not rock-solid. If a set of actions are
+ * applied all together, and one fails, then state between UI and
+ * back-end may end up being inconsistent. One option would be just to
+ * resync in the case of an error. In practice, the way the virtual
+ * table is used in a card list, it would be hard to tickle this case
+ * right now, so I'm not going to worry about it.
+ *
+ */
+class WebhookExternalTable implements IExternalTable {
+  public name = 'GristHidden_WebhookTable';
+  public initialActions = _prepareWebhookInitialActions(this.name);
+  public saveableFields = [
+    'tableId', 'url', 'eventTypes', 'enabled', 'name', 'memo', 'isReadyColumn',
+  ];
+
+  public constructor(private _docApi: DocAPI) {}
+
+  public async fetchAll(): Promise<TableDataAction> {
+    const webhooks = await this._docApi.getWebhooks();
+    const indices = range(webhooks.length);
+    return ['TableData', this.name, indices.map(i => i + 1),
+          getColValues(indices.map(rowId => _mapWebhookValues(webhooks[rowId])))];
+  }
+
+  public async beforeEdit(editor: IEdit) {
+    const results = editor.actions;
+    for (const r of results) {
+      for (const d of r.stored) {
+        if (!isDataAction(d)) { continue; }
+        const colIds = new Set(getColIdsFromDocAction(d) || []);
+        if (colIds.has('webhookId') || colIds.has('status')) {
+          throw new Error(`Sorry, not all fields can be edited.`);
+        }
+      }
+    }
+    const delta = editor.delta;
+    for (const recId of delta.removeRows) {
+      const rec = editor.getRecord(recId);
+      if (!rec) { continue; }
+      await this._removeWebhook(rec);
+      reportMessage(`Removed webhook.`);
+    }
+    const updates = new Set(delta.updateRows);
+    const t2 = editor;
+    for (const recId of updates) {
+      const rec = t2.getRecordNew(recId);
+      if (rec?.webhookId) {
+        await this._updateWebhook(String(rec?.webhookId), rec);
+      }
+    }
+  }
+  public async afterEdit(editor: IEdit) {
+    const {delta} = editor;
+    const updates = new Set(delta.updateRows);
+    const addsAndUpdates = new Set([...delta.addRows, ...delta.updateRows]);
+    for (const recId of addsAndUpdates) {
+      const rec = editor.getRecord(recId);
+      if (!rec) { continue; }
+      const notes: string[] = [];
+      const values: Record<string, any> = {};
+      if (!rec.webhookId) {
+        try {
+          const webhookId = await this._addWebhook(rec);
+          values.webhookId = webhookId;
+          notes.push("Added");
+        } catch (e) {
+          notes.push("Incomplete" + ' | ' + this._getErrorString(e).replace(/^Error: /, '').replace('\n', ' | '));
+        }
+      } else {
+        notes.push("Updated");
+      }
+      if (!values.status) {
+        values.status = notes.join('\n');
+      }
+      if (!updates.has(recId)) {
+        // 'enabled' needs an initial value, otherwise it is unsettable
+        values.enabled = false;
+      }
+      await editor.patch([
+        ['UpdateRecord', this.name, recId, values],
+      ]);
+    }
+  }
+
+  public async sync(editor: IEdit): Promise<void> {
+    // Map from external webhookId to local arbitrary rowId.
+    const rowMap = new Map(editor.getRowIds().map(rowId => [editor.getRecord(rowId)!.webhookId, rowId]));
+    // Provisional list of rows to remove (we'll be trimming this down
+    // as we go).
+    const toRemove = new Set(editor.getRowIds());
+    // Synchronization is done by applying a collected list of actions.
+    const actions: UserAction[] = [];
+
+    // Prepare to add or update webhook listings stored locally. Uses
+    // brute force, on the assumption that there won't be many
+    // webhooks, or that "updating" something that hasn't actually
+    // changed is not disruptive.
+    const webhooks = await this._docApi.getWebhooks();
+    for (const webhook of webhooks) {
+      const values = _mapWebhookValues(webhook);
+      const rowId = rowMap.get(webhook.id);
+      if (rowId) {
+        toRemove.delete(rowId);
+        actions.push(
+          ['UpdateRecord', this.name, rowId, values]
+        );
+      } else {
+        actions.push(
+          ['AddRecord', this.name, null, values]
+        );
+      }
+    }
+
+    // Prepare to remove webhook rows that no longer correspond to something that
+    // exists externally.
+    for (const rowId of toRemove) {
+      if (editor.getRecord(rowId)?.webhookId) {
+        actions.push(['RemoveRecord', this.name, rowId]);
+      }
+    }
+
+    // Apply the changes.
+    await editor.patch(actions);
+  }
+
+  public async afterAnySchemaChange(editor: IEdit) {
+    // Configure the table picker, since the set of tables may have changed.
+    // TODO: should do something about the ready column picker. Right now,
+    // Grist doesn't have a good way to handle contingent choices.
+    const choices = editor.gristDoc.docModel.visibleTables.all().map(tableRec => tableRec.tableId());
+    editor.gristDoc.docData.receiveAction([
+      'UpdateRecord', '_grist_Tables_column', 'vt_webhook_fc1' as any, {
+      widgetOptions: JSON.stringify({
+        widget: 'TextBox',
+        alignment: 'left',
+        choices,
+      })
+    }]);
+  }
+
+  private _getErrorString(e: ApiError): string {
+    return e.details?.userError || e.message;
+  }
+
+  private async _addWebhook(rec: RowRecord) {
+    const fields = this._prepareFields(rec);
+    // Leave enabled at default, meaning it will enable on successful
+    // creation. It seems likely we'd get support requests asking why
+    // webhooks are not working otherwise.
+    const {webhookId} = await this._docApi.addWebhook(omit(fields, 'enabled'));
+    return webhookId;
+  }
+
+  private async _updateWebhook(id: string, rec: RowRecord) {
+    const fields = this._prepareFields(rec);
+    if (Object.keys(fields).length) {
+      await this._docApi.updateWebhook({id, fields});
+    }
+  }
+
+  private async _removeWebhook(rec: RowRecord) {
+    if (rec.webhookId) {
+      await this._docApi.removeWebhook(String(rec.webhookId), String(rec.tableId));
+    }
+  }
+
+  /**
+   * Perform some transformations for sending fields to api:
+   *   - (1) removes all non saveble props and
+   *   - (2) removes the leading 'L' from eventTypes.
+   */
+  private _prepareFields(fields: any) {
+    fields = pick(fields, ...this.saveableFields);
+    if (fields.eventTypes) {
+      fields.eventTypes = without(fields.eventTypes, 'L');
+    }
+    return fields;
+  }
+}
+
+/**
+ * Visualize webhooks. There's a button to clear the queue, and
+ * a card list of webhooks.
+ */
+export class WebhookPage extends DisposableWithEvents {
+
+  public docApi = this.gristDoc.docPageModel.appModel.api.getDocAPI(this.gristDoc.docId());
+  public sharedTable: VirtualTable;
+
+  constructor(public gristDoc: GristDoc) {
+    super();
+
+    const table = new VirtualTable(this, gristDoc, new WebhookExternalTable(this.docApi));
+    this.listenTo(gristDoc, 'webhooks', async () => {
+      await table.lazySync();
+    });
+  }
+
+  public buildDom() {
+    const viewSectionModel = this.gristDoc.docModel.viewSections.getRowModel('vt_webhook_fs1' as any);
+    ViewSectionHelper.create(this, this.gristDoc, viewSectionModel);
+    return cssContainer(
+      cssHeader(t('Webhook Settings')),
+      cssControlRow(
+        bigPrimaryButton(t("Clear Queue"),
+                         dom.on('click', () => this.reset()),
+                         testId('webhook-reset'),
+                        ),
+      ),
+      // active_section here is a bit of a hack, to allow tests to run
+      // more easily.
+      dom('div.active_section.view_data_pane_container.flexvbox', viewSectionModel.viewInstance()!.viewPane),
+    );
+  }
+
+  public async reset() {
+    await this.docApi.flushWebhooks();
+    reportSuccess('Cleared webhook queue.');
+  }
+}
+
+const cssHeader = styled(docListHeader, `
+  margin-bottom: 0;
+  &:not(:first-of-type) {
+    margin-top: 40px;
+  }
+`);
+
+const cssControlRow = styled('div', `
+  flex: none;
+  margin-bottom: 16px;
+  margin-top: 16px;
+  display: flex;
+  gap: 16px;
+`);
+
+const cssContainer = styled('div', `
+  overflow-y: auto;
+  position: relative;
+  height: 100%;
+  padding: 32px 64px 24px 64px;
+
+  display: flex;
+  flex-direction: column;
+  @media ${mediaSmall} {
+    & {
+      padding: 32px 24px 24px 24px;
+    }
+  }
+`);
+
+
+/**
+ * Actions needed to create the virtual table about webhooks, and a
+ * view for it. There are some "any" casts to place string ids where
+ * numbers are expected.
+ */
+function _prepareWebhookInitialActions(tableId: string): DocAction[] {
+  return [[
+    // Add the virtual table.
+    'AddTable', tableId,
+      WEBHOOK_COLUMNS.map(col => ({
+        isFormula: true,
+        type: 'Any',
+        formula: '',
+        id: col.colId
+      }))
+  ], [
+    // Add an entry for the virtual table.
+    'AddRecord', '_grist_Tables', 'vt_webhook_ft1' as any, { tableId, primaryViewId: 0 },
+  ], [
+    // Add entries for the columns of the virtual table.
+    'BulkAddRecord', '_grist_Tables_column',
+    WEBHOOK_COLUMNS.map(col => col.id) as any, getColValues(WEBHOOK_COLUMNS.map(rec =>
+      Object.assign({
+        isFormula: false,
+        formula: '',
+        widgetOptions: '',
+        parentId: 'vt_webhook_ft1' as any,
+      }, omit(rec, ['id']) as any))),
+  ], [
+    // Add a view section.
+    'AddRecord', '_grist_Views_section', 'vt_webhook_fs1' as any,
+      { tableRef: 'vt_webhook_ft1', parentKey: 'detail', title: '', borderWidth: 1, defaultWidth: 100, theme: 'blocks' }
+  ], [
+    // List the fields shown in the view section.
+    'BulkAddRecord', '_grist_Views_section_field', WEBHOOK_VIEW_FIELDS.map((_, i) => `vt_webhook_ff${i+1}`) as any, {
+      colRef: WEBHOOK_VIEW_FIELDS.map(colId => WEBHOOK_COLUMNS.find(r => r.colId === colId)!.id),
+      parentId: WEBHOOK_VIEW_FIELDS.map(() => 'vt_webhook_fs1'),
+      parentPos: WEBHOOK_VIEW_FIELDS.map((_, i) => i),
+    }
+  ]];
+}
+
+/**
+ * Map a webhook summary to a webhook table raw record.  The main
+ * difference is that `eventTypes` is tweaked to be in a cell format,
+ * and `status` is converted to a string.
+ */
+function _mapWebhookValues(webhookSummary: WebhookSummary): Partial<WebhookSchemaType> {
+  const fields = webhookSummary.fields;
+  const {eventTypes} = fields;
+  return {
+    ...fields,
+    webhookId: webhookSummary.id,
+    status: JSON.stringify(webhookSummary.usage),
+    eventTypes: [GristObjCode.List, ...eventTypes],
+  };
+}
+
+type WebhookSchemaType = {
+  [prop in keyof WebhookSummary['fields']]: WebhookSummary['fields'][prop]
+} & {
+  eventTypes: [GristObjCode, ...unknown[]];
+  status: string;
+  webhookId: string;
+}