@unito/integration-debugger
Version:
The Unito Integration Debugger
53 lines (52 loc) • 3.3 kB
JavaScript
;
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 configuration_1 = require("../resources/configuration");
const styles_1 = require("../styles");
function generateHelp(tick) {
return [
'',
'Welcome to the wonderful world of the'.padEnd(80),
(0, styles_1.generateLogo)(tick),
'This tool has many purposes:',
'',
'* Use it while developing to quickly iterate on your integration.',
'* Debug an existing integration, even on staging & production!',
'* Explore the schemas, items, fields, etc. emit by an integration.',
'',
`To get started, hop in the ${chalk_1.default.yellow('config')} section by simply pressing ${chalk_1.default.yellowBright('c')}.`,
'From there, you will be able to set:',
'',
`* The ${chalk_1.default.cyanBright('environment')}. Choose ${chalk_1.default.cyanBright('none')} to speak to your integration directly!`,
`* Your ${chalk_1.default.cyanBright('API key')}, necessary for the environments ${chalk_1.default.cyanBright(configuration_1.Environment.Local)}, ${chalk_1.default.cyanBright(configuration_1.Environment.Staging)} and ${chalk_1.default.cyanBright(configuration_1.Environment.Production)}.`,
`* An ${chalk_1.default.cyanBright('integration')} in the platform or a direct URL (environment ${chalk_1.default.cyanBright(configuration_1.Environment.None)} only).`,
`* A ${chalk_1.default.cyanBright('credential')} in the platform or a direct payload (environment ${chalk_1.default.cyanBright(configuration_1.Environment.None)} only).`,
'',
'',
styles_1.gradientStyles[(tick + 2) % styles_1.gradientStyles.length]('Have a wonderful debugging session!'.padStart(75)),
].join('\n');
}
const Help = () => {
const [help, setHelp] = (0, react_1.useState)(generateHelp(0));
const windowRef = (0, react_1.useRef)(null);
(0, react_1.useEffect)(() => {
windowRef.current?.focus();
}, [windowRef]);
(0, react_1.useEffect)(() => {
let tick = 0;
const interval = setInterval(() => {
tick += 1;
setHelp(generateHelp(tick));
}, 500);
return () => {
clearInterval(interval);
};
}, []);
return ((0, jsx_runtime_1.jsxs)("box", { top: 3, ref: windowRef, children: [(0, jsx_runtime_1.jsx)("box", { top: 0, left: 0, width: "100%", height: "100%-3", border: styles_1.paneBorder, style: styles_1.unfocusablePane, focusable: false, children: (0, jsx_runtime_1.jsx)("box", { left: "50%-40", top: 0, children: help }) }), (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: [chalk_1.default.blueBright('conf'), chalk_1.default.whiteBright('i'), chalk_1.default.blueBright('g')].join('') }), ' <- ', "Main actions in each section are displayed here."] })] }));
};
exports.default = Help;