nucleus-core-ts 0.9.781 → 0.9.783

package/dist/fe/components/IntegrationsPage/components/IntegrationsPage.js

@@ -0,0 +1,175 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useGSAP } from '@gsap/react';
+import gsap from 'gsap';
+import { useEffect, useEffectEvent, useRef } from 'react';
+import { cn } from '../../../utils/cn';
+import { useIntegrationsStore } from '../store';
+import { integrationsPageTheme } from '../theme';
+import { ConnectionList } from './ConnectionList';
+import { ConnectionSettingsTab } from './ConnectionSettingsTab';
+import { ConnectionTabs, connectionTabId, connectionTabPanelId } from './ConnectionTabs';
+import { EndpointsTab } from './EndpointsTab';
+import { MappingsTab } from './MappingsTab';
+import { Notice } from './Primitives';
+import { RunsTab } from './RunsTab';
+/**
+ * The shell.
+ *
+ * It owns three things and nothing else: the selection rail, which section of the
+ * selected connection is on screen, and the one place an error is reported. Every
+ * call it needs arrives as an injected action, and each section fetches its own
+ * page from the server rather than being handed a list to slice.
+ */ gsap.registerPlugin(useGSAP);
+const theme = integrationsPageTheme;
+export function IntegrationsPage({ title = 'Integrations', subtitle = 'Connect an external service, describe the data you want and import it on your terms.', className, actions, onSubscribeProgress }) {
+    const store = useIntegrationsStore();
+    const containerRef = useRef(null);
+    const contentRef = useRef(null);
+    // One measured entrance. Anything longer makes an operator wait to read counts
+    // they came here to check.
+    useGSAP(()=>{
+        if (!contentRef.current) return;
+        gsap.fromTo(contentRef.current, {
+            opacity: 0,
+            y: 10
+        }, {
+            opacity: 1,
+            y: 0,
+            duration: 0.3,
+            ease: 'power2.out'
+        });
+    }, {
+        scope: containerRef
+    });
+    // Progress is pushed by the app, not polled here. The unsubscribe is returned
+    // straight back so a panel that closes mid-import stops receiving frames.
+    const subscribeProgress = useEffectEvent(()=>onSubscribeProgress?.((progress)=>{
+            store.setProgress(progress);
+        }));
+    useEffect(()=>{
+        if (!onSubscribeProgress) return;
+        return subscribeProgress();
+    }, [
+        onSubscribeProgress
+    ]);
+    const dismissError = ()=>{
+        store.setError(null);
+    };
+    const changeTab = (tab)=>{
+        store.setTab(tab);
+    };
+    const tab = store.tab;
+    const hasConnection = store.selectedSourceId !== null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn(theme.container, className),
+        ref: containerRef,
+        children: [
+            /*#__PURE__*/ _jsx("header", {
+                className: theme.header.wrapper,
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "flex min-w-0 flex-col gap-1",
+                    children: [
+                        /*#__PURE__*/ _jsx("h1", {
+                            className: theme.header.title,
+                            children: title
+                        }),
+                        subtitle ? /*#__PURE__*/ _jsx("p", {
+                            className: theme.header.subtitle,
+                            children: subtitle
+                        }) : null
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                "aria-live": "assertive",
+                className: "contents",
+                role: "alert",
+                children: store.error ? /*#__PURE__*/ _jsxs("div", {
+                    className: "relative",
+                    children: [
+                        /*#__PURE__*/ _jsx(Notice, {
+                            title: "Something went wrong",
+                            tone: "danger",
+                            children: store.error
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            "aria-label": "Dismiss error",
+                            className: cn(theme.button.ghost, 'absolute top-1.5 right-1.5 h-8 w-8 px-0 sm:h-8'),
+                            onClick: dismissError,
+                            type: "button",
+                            children: /*#__PURE__*/ _jsx("span", {
+                                "aria-hidden": "true",
+                                children: "✕"
+                            })
+                        })
+                    ]
+                }) : null
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.layout.split,
+                ref: contentRef,
+                children: [
+                    /*#__PURE__*/ _jsx("aside", {
+                        "aria-label": "Connections",
+                        className: theme.layout.aside,
+                        children: /*#__PURE__*/ _jsx(ConnectionList, {
+                            actions: actions
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("section", {
+                        "aria-label": "Connection detail",
+                        className: theme.layout.main,
+                        children: hasConnection ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx(ConnectionTabs, {
+                                    counts: {
+                                        endpoints: store.endpointsTotal,
+                                        mappings: store.mappingsTotal,
+                                        runs: store.runsTotal
+                                    },
+                                    onChange: changeTab,
+                                    value: tab
+                                }),
+                                /*#__PURE__*/ _jsxs("section", {
+                                    "aria-labelledby": connectionTabId(tab),
+                                    className: theme.layout.main,
+                                    id: connectionTabPanelId(tab),
+                                    role: "tabpanel",
+                                    children: [
+                                        tab === 'connection' ? /*#__PURE__*/ _jsx(ConnectionSettingsTab, {
+                                            actions: actions
+                                        }) : null,
+                                        tab === 'endpoints' ? /*#__PURE__*/ _jsx(EndpointsTab, {
+                                            actions: actions
+                                        }) : null,
+                                        tab === 'mappings' ? /*#__PURE__*/ _jsx(MappingsTab, {
+                                            actions: actions
+                                        }) : null,
+                                        tab === 'runs' ? /*#__PURE__*/ _jsx(RunsTab, {
+                                            actions: actions
+                                        }) : null
+                                    ]
+                                })
+                            ]
+                        }) : // Not a dead end. With nothing selected the only useful thing on this
+                        // screen is creating a connection, so that is what it shows — the
+                        // previous message told an operator to select from a list that is
+                        // empty on a fresh install, with no way to add the first one.
+                        /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: theme.list.empty,
+                                    children: "Select a connection on the left, or set up a new one here."
+                                }),
+                                /*#__PURE__*/ _jsx(ConnectionSettingsTab, {
+                                    actions: actions
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/fe/components/IntegrationsPage/components/MappingEditor.d.ts

@@ -0,0 +1,15 @@
+import { type MappingDraft, type MappingTarget } from './mappingDraft';
+export type MappingEditorProps = {
+    /** Starting values. Read once — remount with a new `key` to load another. */
+    mapping: MappingDraft;
+    targets: MappingTarget[];
+    targetsLoading: boolean;
+    /** Field names the selected endpoint's last sample reported. */
+    sourceFields: string[];
+    saving: boolean;
+    deleting: boolean;
+    onSave: (draft: MappingDraft) => void;
+    onDelete: (id: string) => void;
+    onCancel: () => void;
+};
+export declare function MappingEditor({ mapping, targets, targetsLoading, sourceFields, saving, deleting, onSave, onDelete, onCancel, }: MappingEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/fe/components/IntegrationsPage/components/MappingEditor.js

@@ -0,0 +1,193 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { integrationsPageTheme } from '../theme';
+import { FieldMappingRows } from './FieldMappingRows';
+import { MappingWriteModeFields } from './MappingWriteModeFields';
+import { mappingDraftIssues } from './mappingDraft';
+import { Field } from './Primitives';
+import { CardSkeleton } from './Skeletons';
+/**
+ * Everything about one mapping, on one screen.
+ *
+ * The draft is local until Save: an import is not a text field where a stray
+ * keystroke is harmless, and half a mapping saved between two thoughts is a
+ * mapping that could be RUN in that state.
+ *
+ * Mount it with a `key` of the mapping id so switching rows starts a fresh
+ * draft instead of pouring one mapping's edits into another.
+ */ const theme = integrationsPageTheme;
+export function MappingEditor({ mapping, targets, targetsLoading, sourceFields, saving, deleting, onSave, onDelete, onCancel }) {
+    const uid = useId();
+    const [draft, setDraft] = useState(mapping);
+    const patch = (next)=>{
+        setDraft((current)=>({
+                ...current,
+                ...next
+            }));
+    };
+    // Switching entity invalidates every column name chosen for the old one.
+    // Blanking them is louder than leaving a select pointing at a column that no
+    // longer exists, which renders empty and saves the stale name anyway.
+    const chooseTarget = (entity)=>{
+        const fields = targets.find((option)=>option.entity === entity)?.fields ?? [];
+        const keepDedup = fields.includes(draft.dedupTargetField ?? '');
+        patch({
+            targetEntity: entity,
+            dedupTargetField: keepDedup ? draft.dedupTargetField : null,
+            fieldMappings: draft.fieldMappings.map((row)=>fields.length === 0 || fields.includes(row.target) ? row : {
+                    ...row,
+                    target: ''
+                })
+        });
+    };
+    if (targetsLoading) return /*#__PURE__*/ _jsx(CardSkeleton, {});
+    const targetFields = targets.find((option)=>option.entity === draft.targetEntity)?.fields ?? [];
+    const issues = mappingDraftIssues(draft);
+    const busy = saving || deleting;
+    return /*#__PURE__*/ _jsxs("section", {
+        className: theme.card.wrapper,
+        children: [
+            /*#__PURE__*/ _jsx("header", {
+                className: theme.card.header,
+                children: /*#__PURE__*/ _jsx("h2", {
+                    className: theme.card.title,
+                    children: draft.id ? draft.name || 'Mapping' : 'New mapping'
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.card.body,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
+                        children: [
+                            /*#__PURE__*/ _jsx(Field, {
+                                htmlFor: `${uid}-name`,
+                                label: "Name",
+                                children: /*#__PURE__*/ _jsx("input", {
+                                    className: theme.field.input,
+                                    disabled: busy,
+                                    id: `${uid}-name`,
+                                    onChange: (event)=>patch({
+                                            name: event.target.value
+                                        }),
+                                    placeholder: "Staff directory import",
+                                    value: draft.name
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Field, {
+                                hint: targets.length === 0 ? 'This app exposes no writable entities.' : undefined,
+                                htmlFor: `${uid}-target`,
+                                label: "Target entity",
+                                children: /*#__PURE__*/ _jsxs("select", {
+                                    className: theme.field.input,
+                                    disabled: busy || targets.length === 0,
+                                    id: `${uid}-target`,
+                                    onChange: (event)=>chooseTarget(event.target.value),
+                                    value: draft.targetEntity,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("option", {
+                                            value: "",
+                                            children: "Not set"
+                                        }),
+                                        targets.map((option)=>/*#__PURE__*/ _jsx("option", {
+                                                value: option.entity,
+                                                children: option.label
+                                            }, option.entity))
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Field, {
+                        hint: targetFields.length === 0 ? 'Choose a target entity to list its columns.' : 'The column an incoming record is matched on. Without it nothing can be updated.',
+                        htmlFor: `${uid}-dedup`,
+                        label: "Deduplication column",
+                        children: /*#__PURE__*/ _jsxs("select", {
+                            "aria-describedby": `${uid}-dedup-hint`,
+                            className: theme.field.input,
+                            disabled: busy || targetFields.length === 0,
+                            id: `${uid}-dedup`,
+                            onChange: (event)=>patch({
+                                    dedupTargetField: event.target.value || null
+                                }),
+                            value: draft.dedupTargetField ?? '',
+                            children: [
+                                /*#__PURE__*/ _jsx("option", {
+                                    value: "",
+                                    children: "Not set"
+                                }),
+                                targetFields.map((field)=>/*#__PURE__*/ _jsx("option", {
+                                        value: field,
+                                        children: field
+                                    }, field))
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(MappingWriteModeFields, {
+                        dedupConfigured: (draft.dedupTargetField ?? '').trim() !== '',
+                        disabled: busy,
+                        idPrefix: uid,
+                        missingRecordColumn: draft.missingRecordColumn ?? '',
+                        missingRecordPolicy: draft.missingRecordPolicy,
+                        missingRecordValue: draft.missingRecordValue ?? '',
+                        onMissingRecordColumnChange: (value)=>patch({
+                                missingRecordColumn: value
+                            }),
+                        onMissingRecordPolicyChange: (policy)=>patch({
+                                missingRecordPolicy: policy
+                            }),
+                        onMissingRecordValueChange: (value)=>patch({
+                                missingRecordValue: value
+                            }),
+                        onWriteModeChange: (mode)=>patch({
+                                writeMode: mode
+                            }),
+                        writeMode: draft.writeMode
+                    }),
+                    /*#__PURE__*/ _jsx(FieldMappingRows, {
+                        disabled: busy,
+                        onChange: (rows)=>patch({
+                                fieldMappings: rows
+                            }),
+                        rows: draft.fieldMappings,
+                        sourceFields: sourceFields,
+                        targetFields: targetFields
+                    }),
+                    issues.length > 0 ? /*#__PURE__*/ _jsx("ul", {
+                        className: theme.field.error,
+                        children: issues.map((issue)=>/*#__PURE__*/ _jsx("li", {
+                                children: issue
+                            }, issue))
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("footer", {
+                className: theme.card.footer,
+                children: [
+                    draft.id ? /*#__PURE__*/ _jsx("button", {
+                        className: theme.button.danger,
+                        disabled: busy,
+                        onClick: ()=>onDelete(draft.id ?? ''),
+                        type: "button",
+                        children: deleting ? 'Deleting…' : 'Delete'
+                    }) : null,
+                    /*#__PURE__*/ _jsx("button", {
+                        className: theme.button.secondary,
+                        disabled: busy,
+                        onClick: onCancel,
+                        type: "button",
+                        children: "Cancel"
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        className: theme.button.primary,
+                        disabled: busy || issues.length > 0,
+                        onClick: ()=>onSave(draft),
+                        type: "button",
+                        children: saving ? 'Saving…' : 'Save mapping'
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/fe/components/IntegrationsPage/components/MappingList.d.ts

@@ -0,0 +1,11 @@
+import type { IntegrationMapping, IntegrationsActions } from '../types';
+export type MappingListProps = {
+    actions: IntegrationsActions;
+    /** The connection whose mappings these are. */
+    sourceId: string;
+    selectedId: string | null;
+    /** Bumped by the tab after a save or a delete so page one is fetched again. */
+    reloadToken: number;
+    onSelect: (mapping: IntegrationMapping) => void;
+};
+export declare function MappingList({ actions, sourceId, selectedId, reloadToken, onSelect, }: MappingListProps): import("react/jsx-runtime").JSX.Element;

package/dist/fe/components/IntegrationsPage/components/MappingList.js

@@ -0,0 +1,191 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useId, useState } from 'react';
+import { cn } from '../../../utils/cn';
+import { useIntegrationsStore } from '../store';
+import { integrationsPageTheme } from '../theme';
+import { Badge, Field, Notice } from './Primitives';
+import { ListSkeleton } from './Skeletons';
+import { useInfiniteList } from './useInfiniteList';
+/**
+ * The mappings of the selected connection, one page at a time.
+ *
+ * Searching and paging are the server's job; this list only shows what came
+ * back. The write mode is on the row rather than only inside the editor because
+ * `replace` is the one setting worth spotting before opening anything.
+ */ const theme = integrationsPageTheme;
+const PAGE_SIZE = 20;
+const SEARCH_DEBOUNCE_MS = 300;
+const WRITE_MODE_TONE = {
+    upsert: 'info',
+    append: 'neutral',
+    replace: 'danger'
+};
+function describeLastRun(value) {
+    if (!value) return 'Never run';
+    const when = new Date(value);
+    return Number.isNaN(when.getTime()) ? 'Never run' : `Last run ${when.toLocaleString()}`;
+}
+export function MappingList({ actions, sourceId, selectedId, reloadToken, onSelect }) {
+    const store = useIntegrationsStore();
+    const uid = useId();
+    const search = store.mappingsSearch;
+    const [term, setTerm] = useState(search);
+    // Typed characters become a request only once the typing stops; a fetch per
+    // keystroke would put page-1 answers in a race with each other.
+    const commitSearch = useEffectEvent(()=>{
+        store.setMappingsSearch(term);
+    });
+    useEffect(()=>{
+        const timer = setTimeout(commitSearch, SEARCH_DEBOUNCE_MS);
+        return ()=>clearTimeout(timer);
+    }, [
+        term
+    ]);
+    const list = useInfiniteList({
+        load: (page)=>{
+            // Without a connection there is nothing to scope by, and asking anyway
+            // would answer with every mapping in the deployment under this
+            // connection's name.
+            if (!sourceId) return Promise.resolve({
+                items: [],
+                total: 0
+            });
+            return actions.listMappings(sourceId, {
+                page,
+                limit: PAGE_SIZE,
+                search: search.length > 0 ? search : undefined,
+                sort: [
+                    {
+                        field: 'name',
+                        direction: 'asc'
+                    }
+                ]
+            }).then((result)=>({
+                    items: result.items,
+                    total: result.meta?.totalItems ?? result.items.length
+                }));
+        },
+        deps: [
+            sourceId,
+            search,
+            reloadToken
+        ],
+        pageSize: PAGE_SIZE
+    });
+    // Mirrored so the runs screen can name the selected mapping without fetching
+    // it again. The rows still come from, and only from, the server.
+    const publishItems = useEffectEvent(()=>{
+        store.setMappings(list.items, list.total);
+    });
+    const publishLoading = useEffectEvent(()=>{
+        store.setMappingsLoading(list.loading);
+    });
+    useEffect(()=>{
+        publishItems();
+    }, [
+        list.items,
+        list.total
+    ]);
+    useEffect(()=>{
+        publishLoading();
+    }, [
+        list.loading
+    ]);
+    const showSkeleton = list.loading && list.items.length === 0;
+    return /*#__PURE__*/ _jsxs("section", {
+        className: "flex flex-col gap-3",
+        children: [
+            /*#__PURE__*/ _jsx(Field, {
+                htmlFor: `${uid}-search`,
+                label: "Search mappings",
+                children: /*#__PURE__*/ _jsx("input", {
+                    className: theme.field.input,
+                    id: `${uid}-search`,
+                    onChange: (event)=>setTerm(event.target.value),
+                    placeholder: "Name or target entity",
+                    type: "search",
+                    value: term
+                })
+            }),
+            list.error ? /*#__PURE__*/ _jsxs(Notice, {
+                title: "This list could not be loaded",
+                tone: "danger",
+                children: [
+                    list.error,
+                    ' ',
+                    /*#__PURE__*/ _jsx("button", {
+                        className: theme.button.ghost,
+                        onClick: list.reload,
+                        type: "button",
+                        children: "Try again"
+                    })
+                ]
+            }) : null,
+            showSkeleton ? /*#__PURE__*/ _jsx(ListSkeleton, {
+                rows: 5
+            }) : list.items.length === 0 && !list.error ? /*#__PURE__*/ _jsx("p", {
+                className: theme.list.empty,
+                children: store.endpointsTotal === 0 ? 'No endpoints on this connection yet. A mapping reads from one, so add an endpoint first.' : 'No mappings match. A mapping is what turns a response into rows.'
+            }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsxs("p", {
+                        className: theme.list.itemMeta,
+                        children: [
+                            list.items.length,
+                            " of ",
+                            list.total,
+                            " shown"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("ul", {
+                        className: theme.list.wrapper,
+                        children: list.items.map((mapping)=>/*#__PURE__*/ _jsx("li", {
+                                children: /*#__PURE__*/ _jsxs("button", {
+                                    "aria-current": mapping.id === selectedId ? 'true' : undefined,
+                                    className: cn(theme.list.item, mapping.id === selectedId ? theme.list.itemSelected : undefined),
+                                    onClick: ()=>onSelect(mapping),
+                                    type: "button",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: theme.list.itemTitle,
+                                            children: mapping.name
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: theme.list.itemMeta,
+                                            children: mapping.targetEntity || 'No target entity'
+                                        }),
+                                        /*#__PURE__*/ _jsxs("span", {
+                                            className: "mt-1 flex flex-wrap items-center gap-1.5",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Badge, {
+                                                    tone: WRITE_MODE_TONE[mapping.writeMode],
+                                                    children: mapping.writeMode
+                                                }),
+                                                mapping.enabled === false ? /*#__PURE__*/ _jsx(Badge, {
+                                                    tone: "neutral",
+                                                    children: "disabled"
+                                                }) : null,
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    className: theme.list.itemMeta,
+                                                    children: describeLastRun(mapping.lastRunAt)
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            }, mapping.id))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.list.sentinel,
+                ref: list.sentinelRef
+            }),
+            list.loading && list.items.length > 0 ? /*#__PURE__*/ _jsx("p", {
+                className: theme.list.itemMeta,
+                children: "Loading more…"
+            }) : null
+        ]
+    });
+}

package/dist/fe/components/IntegrationsPage/components/MappingWriteModeFields.d.ts

@@ -0,0 +1,19 @@
+import type { MissingRecordPolicyValue, WriteModeValue } from '../types';
+/** Deactivate has nowhere to write its flag without both of these. */
+export declare function missingRecordFieldsIncomplete(policy: MissingRecordPolicyValue, column: string, value: string): boolean;
+export type MappingWriteModeFieldsProps = {
+    /** Namespaces the control ids so two editors on one screen cannot collide. */
+    idPrefix: string;
+    writeMode: WriteModeValue;
+    missingRecordPolicy: MissingRecordPolicyValue;
+    missingRecordColumn: string;
+    missingRecordValue: string;
+    /** Upsert is only the calmer option when there is something to match on. */
+    dedupConfigured: boolean;
+    disabled?: boolean;
+    onWriteModeChange: (mode: WriteModeValue) => void;
+    onMissingRecordPolicyChange: (policy: MissingRecordPolicyValue) => void;
+    onMissingRecordColumnChange: (value: string) => void;
+    onMissingRecordValueChange: (value: string) => void;
+};
+export declare function MappingWriteModeFields({ idPrefix, writeMode, missingRecordPolicy, missingRecordColumn, missingRecordValue, dedupConfigured, disabled, onWriteModeChange, onMissingRecordPolicyChange, onMissingRecordColumnChange, onMissingRecordValueChange, }: MappingWriteModeFieldsProps): import("react/jsx-runtime").JSX.Element;