@unito/integration-debugger
Version:
The Unito Integration Debugger
192 lines (191 loc) • 11.1 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const chalk_1 = __importDefault(require("chalk"));
const clipboardy_1 = __importDefault(require("clipboardy"));
const styles_1 = require("../styles");
const store_1 = require("../store");
const callsPane_1 = __importDefault(require("./debugger/callsPane"));
const goToModal_1 = __importDefault(require("./debugger/goToModal"));
const stepChecksModal_1 = __importDefault(require("./debugger/stepChecksModal"));
const outputPane_1 = __importDefault(require("./debugger/outputPane"));
const stackPane_1 = __importDefault(require("./debugger/stackPane"));
const statusPane_1 = __importDefault(require("./debugger/statusPane"));
const inspectPane_1 = __importDefault(require("./debugger/inspectPane"));
const Debugger = () => {
const windowRef = (0, react_1.useRef)(null);
const [modal, setModal] = (0, react_1.useState)(null);
const [copying, setCopying] = (0, react_1.useState)(false);
const configuration = (0, store_1.useConfigurationState)();
const debuggerState = (0, store_1.useDebuggerState)();
const closeModal = () => {
setModal(null);
windowRef.current?.focus();
};
(0, react_1.useEffect)(() => {
windowRef.current?.key(['tab'], () => {
debuggerState.nextPaneIndex();
});
windowRef.current?.key(['up', 'down', 'left', 'right', 'pageup', 'pagedown', 'home', 'end'], () => {
debuggerState.selectedPane = store_1.Pane.Calls;
});
windowRef.current?.on('element keypress', async (element, _y, key) => {
if (element.type === 'textbox') {
switch (key.name) {
case 'escape':
debuggerState.selectedPane = store_1.Pane.None;
setModal(null);
break;
}
}
else if (element.type === 'textarea') {
switch (key.name) {
case 'escape':
// do nothing
break;
}
}
else {
switch (key.name) {
case 's':
await debuggerState.stepOne();
break;
case 'o':
debuggerState.crawlWithStop();
break;
case 'p':
debuggerState.pause();
break;
case 'r':
await debuggerState.retrySelected();
break;
case 'w':
debuggerState.crawlWithoutStop();
break;
case 'g':
setModal('goto');
break;
case 'k':
setModal('checks');
break;
case 't':
await debuggerState.restart({
credentialId: configuration.current.credentialId,
integrationUrl: configuration.current.integrationUrl,
graphRelativeUrl: configuration.current.graphRelativeUrl,
credentialAccountRelativeUrl: configuration.current.credentialAccountRelativeUrl,
webhookParsingRelativeUrl: configuration.current.webhookParsingRelativeUrl,
webhookSubscriptionsRelativeUrl: configuration.current.webhookSubscriptionsRelativeUrl,
webhookAcknowledgeRelativeUrl: configuration.current.webhookAcknowledgeRelativeUrl,
credentialPayload: configuration.current.credentialPayload,
secretsPayload: configuration.current.secretsPayload,
startingPath: debuggerState.startingPath,
startingOperation: debuggerState.startingOperation,
stepCheckKeys: configuration.current.stepCheckKeys,
});
break;
case 'escape':
debuggerState.selectedPane = store_1.Pane.None;
setModal(null);
break;
case 'tab':
debuggerState.nextPaneIndex();
break;
case 'c':
if (debuggerState.selected) {
setCopying(true);
const step = JSON.stringify(debuggerState.selected, null, 2);
clipboardy_1.default.writeSync(step);
// Blink effect.
setTimeout(() => {
setCopying(false);
}, 100);
}
break;
}
}
});
return () => {
if (windowRef.current) {
windowRef.current.free();
}
};
}, [windowRef]);
// Focus the entire window.
(0, react_1.useEffect)(() => {
if (windowRef.current && debuggerState.selectedPane === store_1.Pane.None) {
windowRef.current?.focus();
}
}, [windowRef, debuggerState.selectedPane]);
// Initialize the debugger.
(0, react_1.useEffect)(() => {
if (!debuggerState.crawlerDriver) {
debuggerState.restart({
credentialId: configuration.current.credentialId,
integrationUrl: configuration.current.integrationUrl,
graphRelativeUrl: configuration.current.graphRelativeUrl,
credentialAccountRelativeUrl: configuration.current.credentialAccountRelativeUrl,
webhookParsingRelativeUrl: configuration.current.webhookParsingRelativeUrl,
webhookSubscriptionsRelativeUrl: configuration.current.webhookSubscriptionsRelativeUrl,
webhookAcknowledgeRelativeUrl: configuration.current.webhookAcknowledgeRelativeUrl,
credentialPayload: configuration.current.credentialPayload,
secretsPayload: configuration.current.secretsPayload,
startingPath: configuration.current.startingPath,
startingOperation: configuration.current.startingOperation,
stepCheckKeys: configuration.current.stepCheckKeys,
}).finally;
}
}, []);
// Execute the crawl mode.
(0, react_1.useEffect)(() => {
if (debuggerState.crawlMode !== store_1.CrawlMode.None && debuggerState.crawlModeTick > 0) {
debuggerState
.stepOne()
.then(step => {
if (!step || (debuggerState.crawlMode === store_1.CrawlMode.StopOnError && step.errors.length > 0)) {
debuggerState.crawlModeTick = 0;
}
else {
debuggerState.crawlModeTick = debuggerState.crawlModeTick + 1;
}
})
.catch(() => {
debuggerState.crawlModeTick = 0;
});
}
}, [debuggerState.crawlModeTick]);
const labels = {
step: [chalk_1.default.whiteBright('s'), chalk_1.default.blueBright('tep')].join(''),
crawlWithStop: [chalk_1.default.blueBright('c'), chalk_1.default.whiteBright('o'), chalk_1.default.blueBright('ntinue')].join(''),
crawlWithoutStop: [chalk_1.default.blueBright('cra'), chalk_1.default.whiteBright('w'), chalk_1.default.blueBright('l')].join(''),
pause: [chalk_1.default.whiteBright('p'), chalk_1.default.blueBright('ause')].join(''),
retry: [chalk_1.default.whiteBright('r'), chalk_1.default.blueBright('etry')].join(''),
go: [chalk_1.default.whiteBright('g'), chalk_1.default.blueBright('oto')].join(''),
checks: [chalk_1.default.blueBright('chec'), chalk_1.default.whiteBright('k'), chalk_1.default.blueBright('s')].join(''),
restart: [chalk_1.default.blueBright('restar'), chalk_1.default.whiteBright('t')].join(''),
copy: [chalk_1.default.whiteBright('c'), chalk_1.default.blueBright('opy')].join(''),
};
const effectiveLabels = {
step: labels.step,
crawlWithStop: debuggerState.crawlMode === store_1.CrawlMode.StopOnError && debuggerState.crawlModeTick > 0
? chalk_1.default.bgWhiteBright(labels.crawlWithStop)
: labels.crawlWithStop,
crawlWithoutStop: debuggerState.crawlMode === store_1.CrawlMode.All && debuggerState.crawlModeTick > 0
? chalk_1.default.bgWhiteBright(labels.crawlWithoutStop)
: labels.crawlWithoutStop,
pause: debuggerState.crawlMode === store_1.CrawlMode.None && debuggerState.crawlModeTick > 0
? chalk_1.default.bgWhiteBright(labels.pause)
: labels.pause,
retry: labels.retry,
go: modal === 'goto' ? chalk_1.default.bgWhiteBright(labels.go) : labels.go,
checks: modal === 'checks' ? chalk_1.default.bgWhiteBright(labels.checks) : labels.checks,
restart: labels.restart,
copy: copying ? chalk_1.default.bgWhiteBright(labels.copy) : labels.copy,
};
return ((0, jsx_runtime_1.jsxs)("box", { top: 3, ref: windowRef, children: [(0, jsx_runtime_1.jsx)(callsPane_1.default, {}), (0, jsx_runtime_1.jsx)(inspectPane_1.default, {}), (0, jsx_runtime_1.jsx)(stackPane_1.default, {}), (0, jsx_runtime_1.jsx)(statusPane_1.default, {}), (0, jsx_runtime_1.jsx)(outputPane_1.default, {}), (0, jsx_runtime_1.jsxs)("layout", { left: 0, bottom: 0, height: 3, border: styles_1.paneBorder, style: styles_1.unfocusablePane, children: [(0, jsx_runtime_1.jsx)("button", { label: effectiveLabels.step }), chalk_1.default.gray(' |'), (0, jsx_runtime_1.jsx)("button", { label: effectiveLabels.crawlWithStop }), chalk_1.default.gray(' |'), (0, jsx_runtime_1.jsx)("button", { label: effectiveLabels.pause }), chalk_1.default.gray(' |'), (0, jsx_runtime_1.jsx)("button", { label: effectiveLabels.retry }), chalk_1.default.gray(' |'), (0, jsx_runtime_1.jsx)("button", { label: effectiveLabels.checks }), chalk_1.default.gray(' |'), (0, jsx_runtime_1.jsx)("button", { label: effectiveLabels.go }), chalk_1.default.gray(' |'), (0, jsx_runtime_1.jsx)("button", { label: effectiveLabels.crawlWithoutStop }), chalk_1.default.gray(' |'), (0, jsx_runtime_1.jsx)("button", { label: effectiveLabels.restart }), chalk_1.default.gray(' |'), (0, jsx_runtime_1.jsx)("button", { label: effectiveLabels.copy })] }), modal === 'goto' && (0, jsx_runtime_1.jsx)(goToModal_1.default, { close: closeModal }), modal === 'checks' && (0, jsx_runtime_1.jsx)(stepChecksModal_1.default, { close: closeModal })] }));
};
exports.default = Debugger;