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/D3856pull/518/head
parent
5e9f2e06ea
commit
603238e966
@ -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();
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
@ -0,0 +1,200 @@
|
|||||||
|
import { BulkColValues, ColValues, DocAction, isSchemaAction,
|
||||||
|
TableDataAction, UserAction } from 'app/common/DocActions';
|
||||||
|
|
||||||
|
const ACTION_TYPES = new Set([
|
||||||
|
'AddRecord', 'BulkAddRecord', 'UpdateRecord', 'BulkUpdateRecord',
|
||||||
|
'RemoveRecord', 'BulkRemoveRecord'
|
||||||
|
]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The result of processing a UserAction.
|
||||||
|
*/
|
||||||
|
export interface ProcessedAction {
|
||||||
|
stored: DocAction[];
|
||||||
|
undo: DocAction[];
|
||||||
|
retValues: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A minimal interface for interpreting UserActions in the context of
|
||||||
|
* some current state. We need to know the next free rowId for each
|
||||||
|
* table, and also the current state of cells. This interface was
|
||||||
|
* abstracted from the initial implementation of on-demand tables.
|
||||||
|
*/
|
||||||
|
export interface AlternateStorage {
|
||||||
|
getNextRowId(tableId: string): Promise<number>;
|
||||||
|
fetchActionData(tableId: string, rowIds: number[],
|
||||||
|
colIds?: string[]): Promise<TableDataAction>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle converting UserActions to DocActions for tables stored
|
||||||
|
* in some way that is not handled by the regular data engine.
|
||||||
|
*/
|
||||||
|
export class AlternateActions {
|
||||||
|
|
||||||
|
constructor(private _storage: AlternateStorage) {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This may be overridden to allow mixing two different storage mechanisms.
|
||||||
|
* The implementation of on-demand tables does this.
|
||||||
|
*/
|
||||||
|
public usesAlternateStorage(tableId: string): boolean {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert a UserAction into stored and undo DocActions as well as return values.
|
||||||
|
*/
|
||||||
|
public processUserAction(action: UserAction): Promise<ProcessedAction> {
|
||||||
|
const a = action.map(item => item as any);
|
||||||
|
switch (a[0]) {
|
||||||
|
case "ApplyUndoActions": return this._doApplyUndoActions(a[1]);
|
||||||
|
case "AddRecord": return this._doAddRecord (a[1], a[2], a[3]);
|
||||||
|
case "BulkAddRecord": return this._doBulkAddRecord (a[1], a[2], a[3]);
|
||||||
|
case "UpdateRecord": return this._doUpdateRecord (a[1], a[2], a[3]);
|
||||||
|
case "BulkUpdateRecord": return this._doBulkUpdateRecord(a[1], a[2], a[3]);
|
||||||
|
case "RemoveRecord": return this._doRemoveRecord (a[1], a[2]);
|
||||||
|
case "BulkRemoveRecord": return this._doBulkRemoveRecord(a[1], a[2]);
|
||||||
|
default: throw new Error(`Received unknown action ${action[0]}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Splits an array of UserActions into two separate arrays of normal and onDemand actions.
|
||||||
|
*/
|
||||||
|
public splitByStorage(actions: UserAction[]): [UserAction[], UserAction[]] {
|
||||||
|
const normal: UserAction[] = [];
|
||||||
|
const onDemand: UserAction[] = [];
|
||||||
|
actions.forEach(a => {
|
||||||
|
// Check that the actionType can be applied without the sandbox and also that the action
|
||||||
|
// is on a data table.
|
||||||
|
const isOnDemandAction = ACTION_TYPES.has(a[0] as string);
|
||||||
|
const isDataTableAction = typeof a[1] === 'string' && !a[1].startsWith('_grist_');
|
||||||
|
if (a[0] === 'ApplyUndoActions') {
|
||||||
|
// Split actions inside the undo action array.
|
||||||
|
const [undoNormal, undoOnDemand] = this.splitByStorage(a[1] as UserAction[]);
|
||||||
|
if (undoNormal.length > 0) {
|
||||||
|
normal.push(['ApplyUndoActions', undoNormal]);
|
||||||
|
}
|
||||||
|
if (undoOnDemand.length > 0) {
|
||||||
|
onDemand.push(['ApplyUndoActions', undoOnDemand]);
|
||||||
|
}
|
||||||
|
} else if (isDataTableAction && isOnDemandAction && this.usesAlternateStorage(a[1] as string)) {
|
||||||
|
// Check whether the tableId belongs to an onDemand table.
|
||||||
|
onDemand.push(a);
|
||||||
|
} else {
|
||||||
|
normal.push(a);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return [normal, onDemand];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if an action represents a schema change on an onDemand table.
|
||||||
|
*/
|
||||||
|
public isSchemaAction(docAction: DocAction): boolean {
|
||||||
|
return isSchemaAction(docAction) && this.usesAlternateStorage(docAction[1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async _doApplyUndoActions(actions: DocAction[]) {
|
||||||
|
const undo: DocAction[] = [];
|
||||||
|
for (const a of actions) {
|
||||||
|
const converted = await this.processUserAction(a);
|
||||||
|
undo.concat(converted.undo);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
stored: actions,
|
||||||
|
undo,
|
||||||
|
retValues: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private async _doAddRecord(
|
||||||
|
tableId: string,
|
||||||
|
rowId: number|null,
|
||||||
|
colValues: ColValues
|
||||||
|
): Promise<ProcessedAction> {
|
||||||
|
if (rowId === null) {
|
||||||
|
rowId = await this._storage.getNextRowId(tableId);
|
||||||
|
}
|
||||||
|
// Set the manualSort to be the same as the rowId. This forces new rows to always be added
|
||||||
|
// at the end of the table.
|
||||||
|
colValues.manualSort = rowId;
|
||||||
|
return {
|
||||||
|
stored: [['AddRecord', tableId, rowId, colValues]],
|
||||||
|
undo: [['RemoveRecord', tableId, rowId]],
|
||||||
|
retValues: rowId
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private async _doBulkAddRecord(
|
||||||
|
tableId: string,
|
||||||
|
rowIds: Array<number|null>,
|
||||||
|
colValues: BulkColValues
|
||||||
|
): Promise<ProcessedAction> {
|
||||||
|
|
||||||
|
// When unset, we will set the rowId values to count up from the greatest
|
||||||
|
// values already in the table.
|
||||||
|
if (rowIds[0] === null) {
|
||||||
|
const nextRowId = await this._storage.getNextRowId(tableId);
|
||||||
|
for (let i = 0; i < rowIds.length; i++) {
|
||||||
|
rowIds[i] = nextRowId + i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Set the manualSort values to be the same as the rowIds. This forces new rows to always be
|
||||||
|
// added at the end of the table.
|
||||||
|
colValues.manualSort = rowIds;
|
||||||
|
return {
|
||||||
|
stored: [['BulkAddRecord', tableId, rowIds as number[], colValues]],
|
||||||
|
undo: [['BulkRemoveRecord', tableId, rowIds as number[]]],
|
||||||
|
retValues: rowIds
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private async _doUpdateRecord(
|
||||||
|
tableId: string,
|
||||||
|
rowId: number,
|
||||||
|
colValues: ColValues
|
||||||
|
): Promise<ProcessedAction> {
|
||||||
|
const [, , oldRowIds, oldColValues] =
|
||||||
|
await this._storage.fetchActionData(tableId, [rowId], Object.keys(colValues));
|
||||||
|
return {
|
||||||
|
stored: [['UpdateRecord', tableId, rowId, colValues]],
|
||||||
|
undo: [['BulkUpdateRecord', tableId, oldRowIds, oldColValues]],
|
||||||
|
retValues: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private async _doBulkUpdateRecord(
|
||||||
|
tableId: string,
|
||||||
|
rowIds: number[],
|
||||||
|
colValues: BulkColValues
|
||||||
|
): Promise<ProcessedAction> {
|
||||||
|
const [, , oldRowIds, oldColValues] =
|
||||||
|
await this._storage.fetchActionData(tableId, rowIds, Object.keys(colValues));
|
||||||
|
return {
|
||||||
|
stored: [['BulkUpdateRecord', tableId, rowIds, colValues]],
|
||||||
|
undo: [['BulkUpdateRecord', tableId, oldRowIds, oldColValues]],
|
||||||
|
retValues: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private async _doRemoveRecord(tableId: string, rowId: number): Promise<ProcessedAction> {
|
||||||
|
const [, , oldRowIds, oldColValues] = await this._storage.fetchActionData(tableId, [rowId]);
|
||||||
|
return {
|
||||||
|
stored: [['RemoveRecord', tableId, rowId]],
|
||||||
|
undo: [['BulkAddRecord', tableId, oldRowIds, oldColValues]],
|
||||||
|
retValues: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private async _doBulkRemoveRecord(tableId: string, rowIds: number[]): Promise<ProcessedAction> {
|
||||||
|
const [, , oldRowIds, oldColValues] = await this._storage.fetchActionData(tableId, rowIds);
|
||||||
|
return {
|
||||||
|
stored: [['BulkRemoveRecord', tableId, rowIds]],
|
||||||
|
undo: [['BulkAddRecord', tableId, oldRowIds, oldColValues]],
|
||||||
|
retValues: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,51 @@
|
|||||||
|
import { AlternateActions, AlternateStorage, ProcessedAction} from 'app/common/AlternateActions';
|
||||||
|
import { DocAction, UserAction } from 'app/common/DocActions';
|
||||||
|
import { DocData } from 'app/common/DocData';
|
||||||
|
import max from 'lodash/max';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* An implementation of an in-memory storage that can handle UserActions,
|
||||||
|
* generating DocActions and retValues that work as for regular storage.
|
||||||
|
* It shares an implementation with on-demand tables.
|
||||||
|
*/
|
||||||
|
export class DocDataCache implements AlternateStorage {
|
||||||
|
public docData: DocData;
|
||||||
|
private _altActions: AlternateActions;
|
||||||
|
constructor(actions?: DocAction[]) {
|
||||||
|
this.docData = new DocData(
|
||||||
|
async (tableId) => {
|
||||||
|
throw new Error(`no ${tableId}`);
|
||||||
|
},
|
||||||
|
null,
|
||||||
|
);
|
||||||
|
this._altActions = new AlternateActions(this);
|
||||||
|
for (const action of actions || []) {
|
||||||
|
this.docData.receiveAction(action);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public async sendTableActions(actions: UserAction[]): Promise<ProcessedAction[]> {
|
||||||
|
const results: ProcessedAction[] = [];
|
||||||
|
for (const userAction of actions) {
|
||||||
|
const processedAction = await this._altActions.processUserAction(userAction);
|
||||||
|
results.push(processedAction);
|
||||||
|
for (const storedAction of processedAction.stored) {
|
||||||
|
this.docData.receiveAction(storedAction);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
public async fetchActionData(tableId: string, rowIds: number[], colIds?: string[]) {
|
||||||
|
const table = await this.docData.requireTable(tableId);
|
||||||
|
return table.getTableDataAction(
|
||||||
|
rowIds,
|
||||||
|
colIds,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
public async getNextRowId(tableId: string): Promise<number> {
|
||||||
|
const table = await this.docData.requireTable(tableId);
|
||||||
|
return (max(table.getRowIds()) || 0) + 1;
|
||||||
|
}
|
||||||
|
}
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,275 @@
|
|||||||
|
import { DocCreationInfo } from 'app/common/DocListAPI';
|
||||||
|
import { DocAPI } from 'app/common/UserAPI';
|
||||||
|
import { assert, driver, Key } from 'mocha-webdriver';
|
||||||
|
import * as gu from 'test/nbrowser/gristUtils';
|
||||||
|
import { setupTestSuite } from 'test/nbrowser/testUtils';
|
||||||
|
import { EnvironmentSnapshot } from 'test/server/testUtils';
|
||||||
|
import { server } from 'test/nbrowser/testUtils';
|
||||||
|
//import { Deps as TriggersDeps } from 'app/server/lib/Triggers';
|
||||||
|
|
||||||
|
describe('WebhookPage', function () {
|
||||||
|
this.timeout(30000);
|
||||||
|
const cleanup = setupTestSuite();
|
||||||
|
|
||||||
|
let session: gu.Session;
|
||||||
|
let oldEnv: EnvironmentSnapshot;
|
||||||
|
let docApi: DocAPI;
|
||||||
|
let doc: DocCreationInfo;
|
||||||
|
let host: string;
|
||||||
|
|
||||||
|
before(async function () {
|
||||||
|
oldEnv = new EnvironmentSnapshot();
|
||||||
|
host = new URL(server.getHost()).host;
|
||||||
|
process.env.ALLOWED_WEBHOOK_DOMAINS = host;
|
||||||
|
await server.restart();
|
||||||
|
session = await gu.session().teamSite.login();
|
||||||
|
const api = session.createHomeApi();
|
||||||
|
doc = await session.tempDoc(cleanup, 'Hello.grist');
|
||||||
|
docApi = api.getDocAPI(doc.id);
|
||||||
|
await api.applyUserActions(doc.id, [
|
||||||
|
['AddTable', 'Table2', [{id: 'A'}, {id: 'B'}, {id: 'C'}, {id: 'D'}, {id: 'E'}]],
|
||||||
|
]);
|
||||||
|
await api.applyUserActions(doc.id, [
|
||||||
|
['AddTable', 'Table3', [{id: 'A'}, {id: 'B'}, {id: 'C'}, {id: 'D'}, {id: 'E'}]],
|
||||||
|
]);
|
||||||
|
await api.updateDocPermissions(doc.id, {
|
||||||
|
users: {
|
||||||
|
// for convenience, we'll be sending payloads to the document itself.
|
||||||
|
'anon@getgrist.com': 'editors',
|
||||||
|
// check another owner's perspective.
|
||||||
|
[gu.session().user('user2').email]: 'owners',
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
after(async function () {
|
||||||
|
oldEnv.restore();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('starts with an empty card', async function () {
|
||||||
|
await openWebhookPage();
|
||||||
|
assert.equal(await gu.getCardListCount(), 1); // includes empty card
|
||||||
|
assert.sameDeepMembers(await gu.getCardFieldLabels(), [
|
||||||
|
'Name',
|
||||||
|
'Memo',
|
||||||
|
'Event Types',
|
||||||
|
'URL',
|
||||||
|
'Table',
|
||||||
|
'Ready Column',
|
||||||
|
'Webhook Id',
|
||||||
|
'Enabled',
|
||||||
|
'Status',
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('can create a persistent webhook', async function () {
|
||||||
|
// Set up a webhook for Table1, and send it to Table2 (for ease of testing).
|
||||||
|
await openWebhookPage();
|
||||||
|
await setField(1, 'Event Types', 'add\nupdate\n');
|
||||||
|
await setField(1, 'URL', `http://${host}/api/docs/${doc.id}/tables/Table2/records?flat=1`);
|
||||||
|
await setField(1, 'Table', 'Table1');
|
||||||
|
// Once event types, URL, and table are set, the webhook is created.
|
||||||
|
// Up until that point, nothing we've entered is actually persisted,
|
||||||
|
// there is no back end for it.
|
||||||
|
await gu.waitToPass(async () => {
|
||||||
|
assert.include(await getField(1, 'Webhook Id'), '-');
|
||||||
|
});
|
||||||
|
const id = await getField(1, 'Webhook Id');
|
||||||
|
// Reload and make sure the webhook id is still there.
|
||||||
|
await driver.navigate().refresh();
|
||||||
|
await waitForWebhookPage();
|
||||||
|
await gu.waitToPass(async () => {
|
||||||
|
assert.equal(await getField(1, 'Webhook Id'), id);
|
||||||
|
});
|
||||||
|
// Now other fields like name and memo are persisted.
|
||||||
|
await setField(1, 'Name', 'Test Webhook');
|
||||||
|
await setField(1, 'Memo', 'Test Memo');
|
||||||
|
await gu.waitForServer();
|
||||||
|
await driver.navigate().refresh();
|
||||||
|
await waitForWebhookPage();
|
||||||
|
await gu.waitToPass(async () => {
|
||||||
|
assert.equal(await getField(1, 'Name'), 'Test Webhook');
|
||||||
|
assert.equal(await getField(1, 'Memo'), 'Test Memo');
|
||||||
|
});
|
||||||
|
// Make sure the webhook is actually working.
|
||||||
|
await docApi.addRows('Table1', {A: ['zig'], B: ['zag']});
|
||||||
|
// Make sure the data gets delivered, and that the webhook status is updated.
|
||||||
|
await gu.waitToPass(async () => {
|
||||||
|
assert.lengthOf((await docApi.getRows('Table2')).A, 1);
|
||||||
|
assert.equal((await docApi.getRows('Table2')).A[0], 'zig');
|
||||||
|
assert.match(await getField(1, 'Status'), /status...success/);
|
||||||
|
});
|
||||||
|
// Remove the webhook and make sure it is no longer listed.
|
||||||
|
assert.equal(await gu.getCardListCount(), 2);
|
||||||
|
await gu.getDetailCell({col: 'Name', rowNum: 1}).click();
|
||||||
|
await gu.sendKeys(Key.chord(await gu.modKey(), Key.DELETE));
|
||||||
|
await gu.confirm(true, true);
|
||||||
|
await gu.waitForServer();
|
||||||
|
assert.equal(await gu.getCardListCount(), 1);
|
||||||
|
await driver.navigate().refresh();
|
||||||
|
await waitForWebhookPage();
|
||||||
|
assert.equal(await gu.getCardListCount(), 1);
|
||||||
|
await docApi.removeRows('Table2', [1]);
|
||||||
|
assert.lengthOf((await docApi.getRows('Table2')).A, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('can create two webhooks', async function () {
|
||||||
|
await openWebhookPage();
|
||||||
|
await setField(1, 'Event Types', 'add\nupdate\n');
|
||||||
|
await setField(1, 'URL', `http://${host}/api/docs/${doc.id}/tables/Table2/records?flat=1`);
|
||||||
|
await setField(1, 'Table', 'Table1');
|
||||||
|
await gu.waitForServer();
|
||||||
|
await setField(2, 'Event Types', 'add\n');
|
||||||
|
await setField(2, 'URL', `http://${host}/api/docs/${doc.id}/tables/Table3/records?flat=1`);
|
||||||
|
await setField(2, 'Table', 'Table1');
|
||||||
|
await gu.waitForServer();
|
||||||
|
await docApi.addRows('Table1', {A: ['zig2'], B: ['zag2']});
|
||||||
|
await gu.waitToPass(async () => {
|
||||||
|
assert.lengthOf((await docApi.getRows('Table2')).A, 1);
|
||||||
|
assert.lengthOf((await docApi.getRows('Table3')).A, 1);
|
||||||
|
assert.match(await getField(1, 'Status'), /status...success/);
|
||||||
|
assert.match(await getField(2, 'Status'), /status...success/);
|
||||||
|
});
|
||||||
|
await docApi.updateRows('Table1', {id: [1], A: ['zig3'], B: ['zag3']});
|
||||||
|
await gu.waitToPass(async () => {
|
||||||
|
assert.lengthOf((await docApi.getRows('Table2')).A, 2);
|
||||||
|
assert.lengthOf((await docApi.getRows('Table3')).A, 1);
|
||||||
|
assert.match(await getField(1, 'Status'), /status...success/);
|
||||||
|
});
|
||||||
|
await driver.sleep(100);
|
||||||
|
// confirm that nothing shows up to Table3.
|
||||||
|
assert.lengthOf((await docApi.getRows('Table3')).A, 1);
|
||||||
|
// Break everything down.
|
||||||
|
await gu.getDetailCell({col: 'Name', rowNum: 1}).click();
|
||||||
|
await gu.sendKeys(Key.chord(await gu.modKey(), Key.DELETE));
|
||||||
|
await gu.confirm(true, true);
|
||||||
|
await gu.waitForServer();
|
||||||
|
await gu.getDetailCell({col: 'Memo', rowNum: 1}).click();
|
||||||
|
await gu.sendKeys(Key.chord(await gu.modKey(), Key.DELETE));
|
||||||
|
await gu.waitForServer();
|
||||||
|
assert.equal(await gu.getCardListCount(), 1);
|
||||||
|
await driver.navigate().refresh();
|
||||||
|
await waitForWebhookPage();
|
||||||
|
assert.equal(await gu.getCardListCount(), 1);
|
||||||
|
await docApi.removeRows('Table2', [1, 2]);
|
||||||
|
await docApi.removeRows('Table3', [1]);
|
||||||
|
assert.lengthOf((await docApi.getRows('Table2')).A, 0);
|
||||||
|
assert.lengthOf((await docApi.getRows('Table3')).A, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('can create and repair a dud webhook', async function () {
|
||||||
|
await openWebhookPage();
|
||||||
|
await setField(1, 'Event Types', 'add\nupdate\n');
|
||||||
|
await setField(1, 'URL', `http://${host}/notathing`);
|
||||||
|
await setField(1, 'Table', 'Table1');
|
||||||
|
await gu.waitForServer();
|
||||||
|
await docApi.addRows('Table1', {A: ['dud1']});
|
||||||
|
await gu.waitToPass(async () => {
|
||||||
|
assert.match(await getField(1, 'Status'), /status...failure/);
|
||||||
|
assert.match(await getField(1, 'Status'), /numWaiting..1/);
|
||||||
|
});
|
||||||
|
await setField(1, 'URL', `http://${host}/api/docs/${doc.id}/tables/Table2/records?flat=1`);
|
||||||
|
await driver.findContent('button', /Clear Queue/).click();
|
||||||
|
await gu.waitForServer();
|
||||||
|
await gu.waitToPass(async () => {
|
||||||
|
assert.match(await getField(1, 'Status'), /numWaiting..0/);
|
||||||
|
});
|
||||||
|
assert.lengthOf((await docApi.getRows('Table2')).A, 0);
|
||||||
|
await docApi.addRows('Table1', {A: ['dud2']});
|
||||||
|
await gu.waitToPass(async () => {
|
||||||
|
assert.lengthOf((await docApi.getRows('Table2')).A, 1);
|
||||||
|
assert.match(await getField(1, 'Status'), /status...success/);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Break everything down.
|
||||||
|
await gu.getDetailCell({col: 'Name', rowNum: 1}).click();
|
||||||
|
await gu.sendKeys(Key.chord(await gu.modKey(), Key.DELETE));
|
||||||
|
await gu.confirm(true, true);
|
||||||
|
await gu.waitForServer();
|
||||||
|
await docApi.removeRows('Table2', [1]);
|
||||||
|
assert.lengthOf((await docApi.getRows('Table2')).A, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('can keep multiple sessions in sync', async function () {
|
||||||
|
await openWebhookPage();
|
||||||
|
|
||||||
|
// Open another tab.
|
||||||
|
await driver.executeScript("return window.open('about:blank', '_blank')");
|
||||||
|
const [ownerTab, owner2Tab] = await driver.getAllWindowHandles();
|
||||||
|
|
||||||
|
await driver.switchTo().window(owner2Tab);
|
||||||
|
const otherSession = await gu.session().teamSite.user('user2').login();
|
||||||
|
await otherSession.loadDoc(`/doc/${doc.id}`);
|
||||||
|
await openWebhookPage();
|
||||||
|
await setField(1, 'Event Types', 'add\nupdate\n');
|
||||||
|
await setField(1, 'URL', `http://${host}/multiple`);
|
||||||
|
await setField(1, 'Table', 'Table1');
|
||||||
|
await gu.waitForServer();
|
||||||
|
await driver.switchTo().window(ownerTab);
|
||||||
|
await gu.waitToPass(async () => {
|
||||||
|
assert.match(await getField(1, 'URL'), /multiple/);
|
||||||
|
});
|
||||||
|
assert.equal(await gu.getCardListCount(), 2);
|
||||||
|
await setField(1, 'Memo', 'multiple memo');
|
||||||
|
await driver.switchTo().window(owner2Tab);
|
||||||
|
await gu.waitToPass(async () => {
|
||||||
|
assert.match(await getField(1, 'Memo'), /multiple memo/);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Basic undo support.
|
||||||
|
await driver.switchTo().window(ownerTab);
|
||||||
|
await gu.undo();
|
||||||
|
await gu.waitToPass(async () => {
|
||||||
|
assert.equal(await getField(1, 'Memo'), '');
|
||||||
|
});
|
||||||
|
await driver.switchTo().window(owner2Tab);
|
||||||
|
await gu.waitToPass(async () => {
|
||||||
|
assert.equal(await getField(1, 'Memo'), '');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Basic redo support.
|
||||||
|
await driver.switchTo().window(ownerTab);
|
||||||
|
await gu.redo();
|
||||||
|
await gu.waitToPass(async () => {
|
||||||
|
assert.match(await getField(1, 'Memo'), /multiple memo/);
|
||||||
|
});
|
||||||
|
await driver.switchTo().window(owner2Tab);
|
||||||
|
await gu.waitToPass(async () => {
|
||||||
|
assert.match(await getField(1, 'Memo'), /multiple memo/);
|
||||||
|
});
|
||||||
|
|
||||||
|
await gu.getDetailCell({col: 'Name', rowNum: 1}).click();
|
||||||
|
await gu.sendKeys(Key.chord(await gu.modKey(), Key.DELETE));
|
||||||
|
await gu.confirm(true, true);
|
||||||
|
await driver.switchTo().window(ownerTab);
|
||||||
|
await gu.waitToPass(async () => {
|
||||||
|
assert.equal(await gu.getCardListCount(), 1);
|
||||||
|
});
|
||||||
|
await driver.switchTo().window(owner2Tab);
|
||||||
|
await driver.close();
|
||||||
|
await driver.switchTo().window(ownerTab);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
async function setField(rowNum: number, col: string, text: string) {
|
||||||
|
await gu.getDetailCell({col, rowNum}).click();
|
||||||
|
await gu.enterCell(text);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getField(rowNum: number, col: string) {
|
||||||
|
const cell = await gu.getDetailCell({col, rowNum});
|
||||||
|
return cell.getText();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function openWebhookPage() {
|
||||||
|
await gu.openDocumentSettings();
|
||||||
|
const button = await driver.findContentWait('a', /Manage Webhooks/, 3000);
|
||||||
|
await gu.scrollIntoView(button).click();
|
||||||
|
await waitForWebhookPage();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function waitForWebhookPage() {
|
||||||
|
await driver.findContentWait('button', /Clear Queue/, 3000);
|
||||||
|
// No section, so no easy utility for setting focus. Click on a random cell.
|
||||||
|
await gu.getDetailCell({col: 'Webhook Id', rowNum: 1}).click();
|
||||||
|
}
|
Loading…
Reference in new issue