@peers-app/peers-ui 0.0.14

package/dist/screens/events/cron.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCronErrors = getCronErrors;
+exports.getCronExplanation = getCronExplanation;
+exports.getNextCronDate = getNextCronDate;
+const cron_validate_1 = __importDefault(require("cron-validate"));
+const moment_timezone_1 = __importDefault(require("moment-timezone"));
+const cron_parser_1 = require("cron-parser");
+function getCronErrors(cronExpression) {
+    const validationResult = (0, cron_validate_1.default)(cronExpression);
+    if (validationResult.isError()) {
+        const errors = validationResult.getError();
+        const errorMarkdown = ['Validation errors:', ...errors].join('\n- ');
+        return errorMarkdown;
+    }
+    let parseError = '';
+    try {
+        (0, cron_parser_1.parseExpression)(cronExpression);
+    }
+    catch (e) {
+        parseError = e.message;
+    }
+    if (parseError) {
+        return 'Validation error: ' + parseError;
+    }
+    return false;
+}
+function getCronExplanation(cronExpression) {
+    if (!cronExpression) {
+        return '';
+    }
+    function formatDate(date) {
+        // let dtStr = moment
+        return (0, moment_timezone_1.default)(date).calendar(null, {
+            sameDay: '[Today at] LT',
+            nextDay: '[Tomorrow at] LT',
+            nextWeek: 'dddd [at] LT',
+            lastDay: '[Yesterday at] LT',
+            lastWeek: '[Last] dddd [at] LT',
+            sameElse: 'L [at] LT'
+        }) + `\n  - \`${date.toISOString().replace(':00.000Z', 'Z')}\``;
+    }
+    let parsed = (0, cron_parser_1.parseExpression)(cronExpression);
+    const strDates = [];
+    let i = 1;
+    while (true) {
+        const dt = parsed.prev().toString();
+        strDates.push(`- ${formatDate(new Date(dt))}`);
+        i++;
+        if (i > 3)
+            break;
+    }
+    strDates.push('Prior three dates:');
+    strDates.reverse();
+    strDates.push('\nNext three dates:');
+    i = 1;
+    parsed = (0, cron_parser_1.parseExpression)(cronExpression);
+    while (true) {
+        const dt = parsed.next().toString();
+        strDates.push(`- ${formatDate(new Date(dt))}`);
+        i++;
+        if (i > 3)
+            break;
+    }
+    return strDates.join('\n');
+}
+function getNextCronDate(cronExpression) {
+    const errors = getCronErrors(cronExpression);
+    if (errors) {
+        throw new Error(errors);
+    }
+    const parsed = (0, cron_parser_1.parseExpression)(cronExpression);
+    return new Date(parsed.next().toString());
+}

package/dist/screens/events/event-details.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface IProps {
+    peerEventTypeId: string;
+}
+export declare const PeerEventDetails: (props: IProps) => React.JSX.Element;
+export {};

package/dist/screens/events/event-details.js

@@ -0,0 +1,112 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PeerEventDetails = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const input_1 = require("../../components/input");
+const io_schema_1 = require("../../components/io-schema");
+const loading_indicator_1 = require("../../components/loading-indicator");
+const save_button_1 = require("../../components/save-button");
+const tabs_1 = require("../../components/tabs");
+const hooks_1 = require("../../hooks");
+const tabs_state_1 = require("../../tabs-layout/tabs-state");
+const event_handlers_1 = require("./event-handlers");
+const event_info_1 = require("./event-info");
+const event_schedule_1 = require("./event-schedule");
+const PeerEventDetails = (props) => {
+    const peerEventType = (0, hooks_1.usePromise)(async () => {
+        const peerEvent = await (0, peers_sdk_1.PeerEventTypes)().get(props.peerEventTypeId);
+        if (!peerEvent) {
+            throw new Error('Workflow not found');
+        }
+        const doc = (0, peers_sdk_1.PeerEventTypes)().initDoc(peerEvent);
+        (0, tabs_state_1.updateActiveTabTitle)(doc.name || "Event");
+        return doc;
+    }, undefined, [props.peerEventTypeId]);
+    const [handlers] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)([]));
+    const handlersLoaded = (0, hooks_1.usePromise)(async () => {
+        if (!peerEventType)
+            return false;
+        const _handlers = await (0, peers_sdk_1.PeerEventHandlers)().list({ peerEventTypeId: peerEventType?.peerEventTypeId });
+        handlers(_handlers);
+        return true;
+    }, false, [peerEventType]);
+    const allLoaded = !!(peerEventType && handlersLoaded);
+    if (!allLoaded) {
+        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+    }
+    async function saveChanges() {
+        if (!peerEventType)
+            return;
+        await peerEventType.save();
+        const oldHandlers = await (0, peers_sdk_1.PeerEventHandlers)().list({ peerEventTypeId: peerEventType.peerEventTypeId });
+        for (const oldHandler of oldHandlers) {
+            await (0, peers_sdk_1.PeerEventHandlers)().delete(oldHandler.peerEventHandlerId);
+        }
+        for (const handler of handlers()) {
+            (0, peers_sdk_1.PeerEventHandlers)().save(handler, { restoreIfDeleted: true });
+        }
+    }
+    return (react_1.default.createElement("div", { className: "container-fluid p-3" },
+        react_1.default.createElement("div", { className: "d-flex" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("h4", null,
+                    react_1.default.createElement("i", { className: "bi bi-lightning-charge-fill me-2" }))),
+            react_1.default.createElement("div", { className: "flex-grow-1" },
+                react_1.default.createElement("h4", null,
+                    react_1.default.createElement(input_1.Input, { key: peerEventType.peerEventTypeId, className: 'border border-0', style: { width: '100%', outline: 'none', backgroundColor: 'transparent' }, value: peerEventType.qs.name }))),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(save_button_1.SaveButton, { key: peerEventType.peerEventTypeId, onClick: saveChanges, doc: peerEventType }))),
+        react_1.default.createElement(tabs_1.Tabs, { key: peerEventType.peerEventTypeId, tabs: [
+                {
+                    name: 'Info', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
+                        react_1.default.createElement(event_info_1.PeerEventInfo, { peerEventType: peerEventType }))
+                },
+                {
+                    name: 'Schema', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
+                        react_1.default.createElement(io_schema_1.IOSchemaEditor, { ioSchema: peerEventType.qs.schema, simpleValueName: "Event" }))
+                },
+                {
+                    name: 'Triggers', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
+                        react_1.default.createElement(event_schedule_1.PeerEventSchedule, { peerEventType: peerEventType }))
+                },
+                {
+                    name: 'Handlers', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
+                        react_1.default.createElement(event_handlers_1.PeerEventHandlersUI, { peerEventType: peerEventType, handlers: handlers }))
+                },
+            ] })));
+};
+exports.PeerEventDetails = PeerEventDetails;

package/dist/screens/events/event-handlers.d.ts

@@ -0,0 +1,7 @@
+import { Observable } from "@peers-app/peers-sdk";
+import React from "react";
+import { IDoc, IPeerEventHandler, IPeerEventType } from "@peers-app/peers-sdk";
+export declare const PeerEventHandlersUI: (props: {
+    peerEventType: IDoc<IPeerEventType>;
+    handlers: Observable<IPeerEventHandler[]>;
+}) => React.JSX.Element;

package/dist/screens/events/event-handlers.js

@@ -0,0 +1,84 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PeerEventHandlersUI = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const lodash_1 = require("lodash");
+const react_1 = __importStar(require("react"));
+const peers_sdk_2 = require("@peers-app/peers-sdk");
+const tooltip_1 = require("../../components/tooltip");
+const editor_inline_1 = require("../../components/markdown-editor/editor-inline");
+const loading_indicator_1 = require("../../components/loading-indicator");
+const peers_sdk_3 = require("@peers-app/peers-sdk");
+const hooks_1 = require("../../hooks");
+const PeerEventHandlersUI = (props) => {
+    const { peerEventType, handlers } = props;
+    const [handlersMarkdown] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(''));
+    const markdownInitialized = (0, hooks_1.usePromise)(async () => {
+        const workflowIds = handlers().map(h => h.handlerWorkflowId);
+        const handlerWorkflows = await (0, peers_sdk_2.Workflows)().list({ workflowId: { $in: workflowIds } });
+        const workflowTitles = handlerWorkflows.reduce((acc, wf) => ({ ...acc, [wf.workflowId]: wf.name }), {});
+        const mentions = workflowIds.map(workflowId => '- ' + (0, peers_sdk_3.formatMention)({ kind: 'workflow', id: workflowId, name: workflowTitles[workflowId] ?? workflowId }));
+        const markdown = `${mentions.join('\n') || '- '}`;
+        handlersMarkdown(markdown);
+        return true;
+    });
+    (0, hooks_1.useSubscription)(handlersMarkdown, () => {
+        if (!markdownInitialized)
+            return;
+        const startWorkflowIds = handlers().map(h => h.handlerWorkflowId);
+        const workflowIds = (0, peers_sdk_3.getAllMentions)(handlersMarkdown()).filter(m => m.kind === 'workflow').map(m => m.id);
+        if ((0, lodash_1.isEqual)(startWorkflowIds, workflowIds))
+            return;
+        const newHandlers = workflowIds.map(workflowId => ({
+            peerEventHandlerId: (0, peers_sdk_2.newid)(),
+            peerEventTypeId: peerEventType.peerEventTypeId,
+            handlerWorkflowId: workflowId,
+        }));
+        handlers(newHandlers);
+        peerEventType.q(peerEventType.q() + 1);
+        console.log('new handlers', newHandlers.map(h => h.handlerWorkflowId));
+    });
+    if (!markdownInitialized) {
+        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+    }
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { className: 'mt-2' },
+            react_1.default.createElement("small", null, "Mention workflows this event should trigger:"),
+            react_1.default.createElement("small", null,
+                react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: `The mentions will be reformatted as a bulleted list regardless of how they are entered.  All other content except for workflow mentions will be discarded.` })),
+            react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: handlersMarkdown }))));
+};
+exports.PeerEventHandlersUI = PeerEventHandlersUI;

package/dist/screens/events/event-info.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { IDoc, IPeerEventType } from "@peers-app/peers-sdk";
+export declare const PeerEventInfo: (props: {
+    peerEventType: IDoc<IPeerEventType>;
+}) => React.JSX.Element;

package/dist/screens/events/event-info.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PeerEventInfo = void 0;
+const react_1 = __importDefault(require("react"));
+const editor_inline_1 = require("../../components/markdown-editor/editor-inline");
+const input_1 = require("../../components/input");
+const PeerEventInfo = (props) => {
+    const { peerEventType } = props;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("small", null, "Name:"),
+        react_1.default.createElement(input_1.Input, { value: peerEventType.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Event name", title: "Event name" }),
+        react_1.default.createElement("div", { className: 'mt-2' },
+            react_1.default.createElement("small", null, "Description:"),
+            react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: peerEventType.qs.description }))));
+};
+exports.PeerEventInfo = PeerEventInfo;

package/dist/screens/events/event-list.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function PeerEventList(): React.JSX.Element;

package/dist/screens/events/event-list.js

@@ -0,0 +1,107 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PeerEventList = PeerEventList;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const input_1 = require("../../components/input");
+const lazy_list_1 = require("../../components/lazy-list");
+const loading_indicator_1 = require("../../components/loading-indicator");
+const markdown_with_mentions_1 = require("../../components/markdown-with-mentions");
+const globals_1 = require("../../globals");
+const hooks_1 = require("../../hooks");
+function PeerEventList() {
+    const [searchTextObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(''));
+    const [searchText] = (0, hooks_1.useObservable)(searchTextObs);
+    const [cursorObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)());
+    const [cursorId] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)((0, peers_sdk_1.newid)()));
+    async function newCursor() {
+        const cursor = await (0, peers_sdk_1.PeerEventTypes)().cursor({ name: { $matchWords: searchText } }, { sortBy: ['-createdAt'] });
+        cursorObs(cursor);
+        cursorId((0, peers_sdk_1.newid)());
+        return cursor;
+    }
+    (0, react_1.useEffect)(() => {
+        newCursor();
+    }, [searchText]);
+    async function searchSubmit(evt) {
+        if (evt.key !== "Enter")
+            return;
+        if (!searchText.trim())
+            return;
+        const peerEventName = searchText.trim();
+        const event = await (0, peers_sdk_1.PeerEventTypes)().initRecord({
+            name: peerEventName,
+            description: '',
+            schema: {
+                type: peers_sdk_1.IOSchemaType.none,
+                fields: []
+            }
+        });
+        await (0, peers_sdk_1.PeerEventTypes)().insert(event);
+        (0, globals_1.mainContentPath)(`events/${event.peerEventTypeId}`);
+    }
+    async function loadMore(events) {
+        let moreMatches = [];
+        let cursor = cursorObs() || await newCursor();
+        for await (const event of cursor) {
+            if (events.find(e => e.peerEventTypeId === event.peerEventTypeId))
+                continue;
+            moreMatches.push(event);
+            if (searchText.length && moreMatches.length > 5)
+                break;
+            if (moreMatches.length >= 50)
+                break;
+        }
+        if (moreMatches.length === 0) {
+            cursorObs(undefined);
+        }
+        return moreMatches;
+    }
+    return (react_1.default.createElement("div", { className: 'container-fluid' },
+        react_1.default.createElement(input_1.Input, { value: searchTextObs, className: "form-control mt-3", style: { marginBottom: "10px" }, placeholder: "Search or create new event", autoFocus: (0, globals_1.isDesktop)() ? true : false, onKeyUp: evt => searchSubmit(evt) }),
+        react_1.default.createElement("div", { className: "peers-list-container" },
+            react_1.default.createElement(lazy_list_1.LazyList, { key: cursorId(), loadMore: loadMore, scrollThreshold: 0.6, renderItems: (events) => {
+                    return events.map(event => {
+                        return (react_1.default.createElement("div", { key: event.peerEventTypeId, className: 'container-fluid pb-4' },
+                            react_1.default.createElement("i", { className: "bi bi-lightning-charge-fill" }),
+                            "\u00A0",
+                            react_1.default.createElement("a", { href: `#events/${event.peerEventTypeId}` }, event.name),
+                            react_1.default.createElement("div", { style: { paddingLeft: '20px' } },
+                                react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: event.description }))));
+                    });
+                }, loadingIndicator: react_1.default.createElement("div", { className: "d-flex justify-content-center", style: { height: 200 } },
+                    react_1.default.createElement(loading_indicator_1.LoadingIndicator, null)), endOfList: react_1.default.createElement("div", { className: "d-flex justify-content-center", style: { height: 200 } }) }))));
+}

package/dist/screens/events/event-schedule.d.ts

@@ -0,0 +1,5 @@
+import { IDoc, IPeerEventType } from "@peers-app/peers-sdk";
+import React from "react";
+export declare const PeerEventSchedule: (props: {
+    peerEventType: IDoc<IPeerEventType>;
+}) => React.JSX.Element;

package/dist/screens/events/event-schedule.js

@@ -0,0 +1,124 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PeerEventSchedule = void 0;
+const react_1 = __importStar(require("react"));
+const input_1 = require("../../components/input");
+const markdown_with_mentions_1 = require("../../components/markdown-with-mentions");
+const tooltip_1 = require("../../components/tooltip");
+const hooks_1 = require("../../hooks");
+const cron_1 = require("./cron");
+const PeerEventSchedule = (props) => {
+    const { peerEventType } = props;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { className: "mt-3" }),
+        react_1.default.createElement("small", null, "Chron Schedule"),
+        react_1.default.createElement(CronScheduleEditor, { cronSchedule: peerEventType.qs.cronSchedule, q: peerEventType.q })));
+};
+exports.PeerEventSchedule = PeerEventSchedule;
+const CronScheduleEditor = (props) => {
+    const { cronSchedule } = props;
+    const tempSchedule = (0, hooks_1.useObservableState)(props.cronSchedule() ?? '');
+    const cronError = (0, hooks_1.useObservableState)('');
+    const cronExplanation = (0, hooks_1.useObservableState)('');
+    const emptyCronMessage = [
+        'Enter a valid cron schedule to have this workflow automatically run.',
+        'For detailed information, see [Cron Schedule Syntax](https://en.wikipedia.org/wiki/Cron#CRON_expression)',
+        'and [CronTab.Guru](https://crontab.guru/)\n',
+        'The format is:',
+        '- `minute hour day-of-month month day-of-week`. ',
+        '  - `*` means every',
+        '  - `1-5` means 1 through 5',
+        '  - `1,4` means 1 and 4',
+        '',
+        'Examples:',
+        '- run every day at 3am:\n  - `0 3 * * *`',
+        '- run every Monday at 3am:\n  - `0 3 * * 1`',
+        '- run every Monday and Thursday at 3am:\n  - `0 3 * * 1,4`',
+        '- run every weekday at 3am:\n  - `0 3 * * 1-5`',
+    ].join('\n');
+    (0, react_1.useEffect)(() => {
+        function updateExplanation() {
+            if (cronError()) {
+                cronExplanation('');
+            }
+            else if (!tempSchedule()) {
+                cronExplanation(emptyCronMessage);
+            }
+            else {
+                cronExplanation((0, cron_1.getCronExplanation)(tempSchedule()));
+            }
+        }
+        cronExplanation((0, cron_1.getCronExplanation)(tempSchedule()));
+        const sub = tempSchedule.subscribe(() => {
+            // validate and format cron schedule
+            let schedule = tempSchedule() || '';
+            schedule = schedule.trim();
+            cronExplanation('');
+            cronError('');
+            cronSchedule(undefined);
+            if (!schedule) {
+                updateExplanation();
+                return;
+            }
+            const errors = (0, cron_1.getCronErrors)(schedule);
+            if (errors) {
+                cronError(errors);
+                return;
+            }
+            cronSchedule(schedule);
+            updateExplanation();
+        });
+        const sub2 = props.q.subscribe(() => {
+            if (props.q() === 0) {
+                tempSchedule(cronSchedule() || '');
+                cronError('');
+                cronExplanation((0, cron_1.getCronExplanation)(tempSchedule()));
+            }
+        });
+        return () => {
+            sub.dispose();
+            sub2.dispose();
+        };
+    }, [cronSchedule, tempSchedule]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: emptyCronMessage, handleClassName: `p-2 small` }),
+        react_1.default.createElement(input_1.Input, { value: tempSchedule, className: `form-control mb-3 p-0 p-2 ` + (cronError() ? 'border-danger' : ''), placeholder: "minute hour day(of month) month day(of week)", title: "Cron Schedule", style: { fontFamily: 'monospace' } }),
+        cronError()
+            ? (react_1.default.createElement("div", { className: "text-danger" },
+                react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: cronError() })))
+            : (react_1.default.createElement("div", null,
+                react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: cronExplanation() })))));
+};

package/dist/screens/groups/group-details.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface IProps {
+    groupId: string;
+}
+export declare const GroupDetails: (props: IProps) => React.JSX.Element;
+export {};