nucleus-core-ts 0.9.782 → 0.9.783

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

@@ -0,0 +1,2 @@
+import { type ConnectionFieldsProps } from './connectionDraft';
+export declare function ConnectionAuthFields(props: ConnectionFieldsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { integrationsPageTheme } from '../theme';
+import { AUTH_TYPE_OPTIONS, authTypeHint, toAuthType } from './authOptions';
+import { ConnectionOauthFields } from './ConnectionOauthFields';
+import { usesHeaderName, usesQueryParam } from './connectionDraft';
+import { describedBy } from './formSupport';
+import { Field } from './Primitives';
+/**
+ * How the connection proves who it is.
+ *
+ * Only the boxes the chosen auth type reads are on screen. A form that showed
+ * all of them would invite an operator to fill in a token URL that a bearer
+ * connection never looks at, and then to spend an afternoon on why it changed
+ * nothing. The secrets themselves are not here — they live in CredentialFields,
+ * because they are written and never read back.
+ */ const theme = integrationsPageTheme;
+export function ConnectionAuthFields(props) {
+    const { draft, disabled, onChange } = props;
+    return /*#__PURE__*/ _jsxs("section", {
+        "aria-label": "Authentication",
+        className: "flex flex-col gap-3",
+        children: [
+            /*#__PURE__*/ _jsx(Field, {
+                hint: authTypeHint(draft.authType),
+                htmlFor: "connection-auth-type",
+                label: "Auth type",
+                children: /*#__PURE__*/ _jsx("select", {
+                    "aria-describedby": describedBy('connection-auth-type', true, false),
+                    className: theme.field.input,
+                    disabled: disabled,
+                    id: "connection-auth-type",
+                    onChange: (event)=>{
+                        const next = toAuthType(event.target.value);
+                        if (next) onChange({
+                            authType: next
+                        });
+                    },
+                    value: draft.authType,
+                    children: AUTH_TYPE_OPTIONS.map((option)=>/*#__PURE__*/ _jsx("option", {
+                            value: option.value,
+                            children: option.label
+                        }, option.value))
+                })
+            }),
+            usesHeaderName(draft.authType) ? /*#__PURE__*/ _jsx(Field, {
+                hint: "Empty means Authorization. Set it when the service reads the credential from a header of its own.",
+                htmlFor: "connection-auth-header",
+                label: "Header name",
+                children: /*#__PURE__*/ _jsx("input", {
+                    "aria-describedby": describedBy('connection-auth-header', true, false),
+                    className: theme.field.input,
+                    disabled: disabled,
+                    id: "connection-auth-header",
+                    onChange: (event)=>onChange({
+                            authHeaderName: event.target.value
+                        }),
+                    placeholder: "X-Api-Key",
+                    type: "text",
+                    value: draft.authHeaderName
+                })
+            }) : null,
+            usesQueryParam(draft.authType) ? /*#__PURE__*/ _jsx(Field, {
+                hint: "Use this instead of a header when the key belongs in the query string. Fill in one or the other, not both.",
+                htmlFor: "connection-auth-query",
+                label: "Query parameter",
+                children: /*#__PURE__*/ _jsx("input", {
+                    "aria-describedby": describedBy('connection-auth-query', true, false),
+                    className: theme.field.input,
+                    disabled: disabled,
+                    id: "connection-auth-query",
+                    onChange: (event)=>onChange({
+                            authQueryParam: event.target.value
+                        }),
+                    placeholder: "api_key",
+                    type: "text",
+                    value: draft.authQueryParam
+                })
+            }) : null,
+            /*#__PURE__*/ _jsx(ConnectionOauthFields, {
+                ...props
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,2 @@
+import type { ConnectionFieldsProps } from './connectionDraft';
+export declare function ConnectionBasicFields({ draft, errors, disabled, onChange, }: ConnectionFieldsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,165 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn';
+import { integrationsPageTheme } from '../theme';
+import { describedBy } from './formSupport';
+import { Field } from './Primitives';
+/**
+ * What the connection IS: its name, where it lives, and the two switches that
+ * decide whether it is used and how carefully.
+ */ const theme = integrationsPageTheme;
+const CHECKBOX = 'h-4 w-4 shrink-0 accent-sky-600 dark:accent-sky-500';
+const BASE_URL_HINT = 'The scheme is free. https:// and plain http:// are both accepted and neither is rewritten — calling a service inside the same cluster over http, for example http://hr-service:8080, is a legitimate setup.';
+export function ConnectionBasicFields({ draft, errors, disabled, onChange }) {
+    return /*#__PURE__*/ _jsxs("section", {
+        "aria-label": "Connection details",
+        className: "flex flex-col gap-3",
+        children: [
+            /*#__PURE__*/ _jsx(Field, {
+                error: errors.name,
+                htmlFor: "connection-name",
+                label: "Name",
+                children: /*#__PURE__*/ _jsx("input", {
+                    "aria-describedby": describedBy('connection-name', false, Boolean(errors.name)),
+                    className: theme.field.input,
+                    disabled: disabled,
+                    id: "connection-name",
+                    onChange: (event)=>onChange({
+                            name: event.target.value
+                        }),
+                    placeholder: "Directory service",
+                    type: "text",
+                    value: draft.name
+                })
+            }),
+            /*#__PURE__*/ _jsx(Field, {
+                error: errors.slug,
+                hint: "Used to refer to this connection elsewhere. It does not change once things point at it.",
+                htmlFor: "connection-slug",
+                label: "Slug",
+                children: /*#__PURE__*/ _jsx("input", {
+                    "aria-describedby": describedBy('connection-slug', true, Boolean(errors.slug)),
+                    className: theme.field.input,
+                    disabled: disabled,
+                    id: "connection-slug",
+                    onChange: (event)=>onChange({
+                            slug: event.target.value
+                        }),
+                    placeholder: "hr-service",
+                    type: "text",
+                    value: draft.slug
+                })
+            }),
+            /*#__PURE__*/ _jsx(Field, {
+                error: errors.baseUrl,
+                hint: BASE_URL_HINT,
+                htmlFor: "connection-base-url",
+                label: "Base URL",
+                children: /*#__PURE__*/ _jsx("input", {
+                    "aria-describedby": describedBy('connection-base-url', true, Boolean(errors.baseUrl)),
+                    className: theme.field.input,
+                    disabled: disabled,
+                    id: "connection-base-url",
+                    onChange: (event)=>onChange({
+                            baseUrl: event.target.value
+                        }),
+                    placeholder: "https://api.example.com",
+                    type: "text",
+                    value: draft.baseUrl
+                })
+            }),
+            /*#__PURE__*/ _jsx(Field, {
+                hint: "For whoever has to work out what this connection is, months from now.",
+                htmlFor: "connection-description",
+                label: "Description",
+                children: /*#__PURE__*/ _jsx("textarea", {
+                    "aria-describedby": describedBy('connection-description', true, false),
+                    className: cn(theme.field.input, 'h-20 py-2 sm:h-20'),
+                    disabled: disabled,
+                    id: "connection-description",
+                    onChange: (event)=>onChange({
+                            description: event.target.value
+                        }),
+                    placeholder: "Read-only employee directory used by the nightly import.",
+                    value: draft.description
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.field.wrapper,
+                children: [
+                    /*#__PURE__*/ _jsxs("label", {
+                        className: cn(theme.field.label, 'flex items-center gap-2'),
+                        htmlFor: "connection-enabled",
+                        children: [
+                            /*#__PURE__*/ _jsx("input", {
+                                "aria-describedby": "connection-enabled-hint",
+                                checked: draft.enabled,
+                                className: CHECKBOX,
+                                disabled: disabled,
+                                id: "connection-enabled",
+                                onChange: (event)=>onChange({
+                                        enabled: event.target.checked
+                                    }),
+                                type: "checkbox"
+                            }),
+                            "Enabled"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: theme.field.hint,
+                        id: "connection-enabled-hint",
+                        children: "Turning this off stops every endpoint and import that goes through this connection. The settings are kept."
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.field.wrapper,
+                children: [
+                    /*#__PURE__*/ _jsxs("label", {
+                        className: cn(theme.field.label, 'flex items-center gap-2'),
+                        htmlFor: "connection-tls-verify",
+                        children: [
+                            /*#__PURE__*/ _jsx("input", {
+                                "aria-describedby": "connection-tls-verify-hint",
+                                checked: draft.tlsVerify,
+                                className: CHECKBOX,
+                                disabled: disabled,
+                                id: "connection-tls-verify",
+                                onChange: (event)=>onChange({
+                                        tlsVerify: event.target.checked
+                                    }),
+                                type: "checkbox"
+                            }),
+                            "Verify TLS certificate"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: theme.field.hint,
+                        id: "connection-tls-verify-hint",
+                        children: draft.tlsVerify ? 'On. Unchecking it applies to requests made through THIS connection only — no other connection and nothing else in the app is affected.' : 'Off. Certificates are not checked for requests made through THIS connection only. Every other connection still verifies. Use it for an internal service with its own certificate authority.'
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Field, {
+                error: errors.timeoutMs,
+                hint: "How long one request may take before it is given up on. Empty means the server default.",
+                htmlFor: "connection-timeout",
+                label: "Timeout (ms)",
+                children: /*#__PURE__*/ _jsx("input", {
+                    "aria-describedby": describedBy('connection-timeout', true, Boolean(errors.timeoutMs)),
+                    className: theme.field.input,
+                    disabled: disabled,
+                    id: "connection-timeout",
+                    inputMode: "numeric",
+                    min: 1,
+                    onChange: (event)=>onChange({
+                            timeoutMs: event.target.value
+                        }),
+                    placeholder: "30000",
+                    type: "number",
+                    value: draft.timeoutMs
+                })
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,10 @@
+import type { IntegrationSource, IntegrationsActions } from '../types';
+export type ConnectionFormProps = {
+    actions: IntegrationsActions;
+    /** The connection being edited, or null for a blank form. */
+    source: IntegrationSource | null;
+    /** True while the record being edited is still on its way. */
+    loading?: boolean;
+    onSaved?: (source: IntegrationSource) => void;
+};
+export declare function ConnectionForm({ actions, source, loading, onSaved }: ConnectionFormProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,112 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useState } from 'react';
+import { useIntegrationsStore } from '../store';
+import { integrationsPageTheme } from '../theme';
+import { ConnectionAuthFields } from './ConnectionAuthFields';
+import { ConnectionBasicFields } from './ConnectionBasicFields';
+import { draftFromSource, draftToSource, emptyConnectionDraft, validateConnectionDraft } from './connectionDraft';
+import { errorText } from './formSupport';
+import { Badge } from './Primitives';
+import { CardSkeleton } from './Skeletons';
+/**
+ * Add or edit one connection.
+ *
+ * The form holds a draft rather than editing the record in place, so abandoning
+ * a half-finished change costs nothing and the saved record is never a mixture
+ * of what was stored and what is being typed.
+ */ const theme = integrationsPageTheme;
+export function ConnectionForm({ actions, source, loading = false, onSaved }) {
+    const store = useIntegrationsStore();
+    const [draft, setDraft] = useState(()=>source ? draftFromSource(source) : emptyConnectionDraft);
+    const [errors, setErrors] = useState({});
+    const [saving, setSaving] = useState(false);
+    // Only the identity resets the boxes. Re-reading the same record — which is
+    // what a save returns — would throw away anything typed since.
+    const resetDraft = useEffectEvent(()=>{
+        setDraft(source ? draftFromSource(source) : emptyConnectionDraft);
+        setErrors({});
+        setSaving(false);
+    });
+    useEffect(()=>{
+        resetDraft();
+    }, [
+        source?.id
+    ]);
+    const update = (patch)=>{
+        setDraft((current)=>({
+                ...current,
+                ...patch
+            }));
+    };
+    const handleSubmit = (event)=>{
+        event.preventDefault();
+        const found = validateConnectionDraft(draft);
+        setErrors(found);
+        if (Object.keys(found).length > 0) return;
+        setSaving(true);
+        store.setError(null);
+        actions.saveSource(draftToSource(draft, source?.id)).then((saved)=>{
+            setSaving(false);
+            if (!saved) {
+                store.setError('The connection was not saved. The server did not return the record.');
+                return;
+            }
+            // Selecting resets everything hanging off a connection, so it is only
+            // right for a NEW one — doing it on an edit would empty the endpoint,
+            // mapping and run lists the operator is working in.
+            if (!source) store.selectSource(saved.id);
+            onSaved?.(saved);
+        }).catch((reason)=>{
+            setSaving(false);
+            store.setError(errorText(reason, 'The connection could not be saved.'));
+        });
+    };
+    if (loading) return /*#__PURE__*/ _jsx(CardSkeleton, {});
+    return /*#__PURE__*/ _jsxs("form", {
+        className: theme.card.wrapper,
+        noValidate: true,
+        onSubmit: handleSubmit,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.card.header,
+                children: [
+                    /*#__PURE__*/ _jsx("h2", {
+                        className: theme.card.title,
+                        children: source ? 'Edit connection' : 'New connection'
+                    }),
+                    source ? /*#__PURE__*/ _jsx(Badge, {
+                        tone: source.enabled === false ? 'neutral' : 'success',
+                        children: source.enabled === false ? 'Disabled' : 'Enabled'
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.card.body,
+                children: [
+                    /*#__PURE__*/ _jsx(ConnectionBasicFields, {
+                        disabled: saving,
+                        draft: draft,
+                        errors: errors,
+                        onChange: update
+                    }),
+                    /*#__PURE__*/ _jsx(ConnectionAuthFields, {
+                        disabled: saving,
+                        draft: draft,
+                        errors: errors,
+                        onChange: update
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.card.footer,
+                children: /*#__PURE__*/ _jsx("button", {
+                    className: theme.button.primary,
+                    disabled: saving,
+                    type: "submit",
+                    children: saving ? 'Saving…' : source ? 'Save changes' : 'Create connection'
+                })
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,9 @@
+import type { IntegrationsActions } from '../types';
+export type ConnectionListProps = {
+    actions: IntegrationsActions;
+    /** Asked for a blank form. The selection is cleared before this runs. */
+    onNewConnection?: () => void;
+    /** Bump after a save or a delete to pull the list again. */
+    reloadToken?: number;
+};
+export declare function ConnectionList({ actions, onNewConnection, reloadToken }: ConnectionListProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,184 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, 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 rail of connections.
+ *
+ * The server owns the list: what the operator types goes back out as a `search`
+ * on the next request, and the next page arrives when the sentinel comes into
+ * view. Nothing here narrows what has already been fetched, so the rail behaves
+ * the same at four connections and at four hundred.
+ */ const theme = integrationsPageTheme;
+const PAGE_SIZE = 20;
+const SEARCH_DEBOUNCE_MS = 300;
+export function ConnectionList({ actions, onNewConnection, reloadToken = 0 }) {
+    const store = useIntegrationsStore();
+    const search = store.sourcesSearch;
+    const selectedId = store.selectedSourceId;
+    const [term, setTerm] = useState(search);
+    // Typed characters become a request only once the typing stops; every
+    // keystroke would be a page-1 fetch and the answers would race each other.
+    const commitSearch = useEffectEvent(()=>{
+        store.setSourcesSearch(term);
+    });
+    useEffect(()=>{
+        const timer = setTimeout(commitSearch, SEARCH_DEBOUNCE_MS);
+        return ()=>clearTimeout(timer);
+    }, [
+        term
+    ]);
+    const list = useInfiniteList({
+        load: (page)=>actions.listSources({
+                page,
+                limit: PAGE_SIZE,
+                search: search.length > 0 ? search : undefined
+            }).then((result)=>({
+                    items: result.items,
+                    total: result.meta?.totalItems ?? result.items.length
+                })),
+        deps: [
+            search,
+            reloadToken
+        ],
+        pageSize: PAGE_SIZE
+    });
+    // Mirrored so the form, the credential boxes and the test button can all read
+    // the selected record without any of them fetching it a second time.
+    const publishItems = useEffectEvent(()=>{
+        store.setSources(list.items, list.total);
+    });
+    const publishLoading = useEffectEvent(()=>{
+        store.setSourcesLoading(list.loading);
+    });
+    useEffect(()=>{
+        publishItems();
+    }, [
+        list.items,
+        list.total
+    ]);
+    useEffect(()=>{
+        publishLoading();
+    }, [
+        list.loading
+    ]);
+    const handleNew = ()=>{
+        store.selectSource(null);
+        onNewConnection?.();
+    };
+    const firstLoad = list.loading && list.items.length === 0;
+    return(// The shell owns the landmark and its name; naming it again here gave a
+    // screen reader two regions called "Connections" nested inside each other.
+    /*#__PURE__*/ _jsxs("div", {
+        className: theme.layout.aside,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.header.wrapper,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx("h2", {
+                                className: theme.header.title,
+                                children: "Connections"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: theme.header.subtitle,
+                                children: list.total === 1 ? '1 connection' : `${list.total} connections`
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: theme.header.actions,
+                        children: /*#__PURE__*/ _jsx("button", {
+                            className: theme.button.primary,
+                            onClick: handleNew,
+                            type: "button",
+                            children: "New connection"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Field, {
+                htmlFor: "connection-search",
+                label: "Search",
+                children: /*#__PURE__*/ _jsx("input", {
+                    className: theme.field.input,
+                    id: "connection-search",
+                    onChange: (event)=>setTerm(event.target.value),
+                    placeholder: "Name or slug",
+                    type: "search",
+                    value: term
+                })
+            }),
+            firstLoad ? /*#__PURE__*/ _jsx(ListSkeleton, {
+                rows: 6
+            }) : null,
+            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,
+            !firstLoad && list.items.length === 0 && !list.error ? /*#__PURE__*/ _jsx("p", {
+                className: theme.list.empty,
+                children: search.length > 0 ? `No connection matches “${search}”. Clear the search to see them all.` : 'No connections yet. A connection is one service this app calls — its base URL, how it authenticates and how long it may take. Start with New connection.'
+            }) : null,
+            list.items.length > 0 ? /*#__PURE__*/ _jsx("ul", {
+                className: theme.list.wrapper,
+                children: list.items.map((source)=>/*#__PURE__*/ _jsx("li", {
+                        children: /*#__PURE__*/ _jsxs("button", {
+                            "aria-current": source.id === selectedId ? 'true' : undefined,
+                            className: cn(theme.list.item, source.id === selectedId && theme.list.itemSelected),
+                            onClick: ()=>store.selectSource(source.id),
+                            type: "button",
+                            children: [
+                                /*#__PURE__*/ _jsxs("span", {
+                                    className: "flex w-full items-center gap-2",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: cn(theme.list.itemTitle, 'min-w-0 flex-1'),
+                                            children: source.name
+                                        }),
+                                        source.enabled === false ? /*#__PURE__*/ _jsx(Badge, {
+                                            tone: "neutral",
+                                            children: "Off"
+                                        }) : null
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: theme.list.itemMeta,
+                                    children: source.slug
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: theme.list.itemMeta,
+                                    children: source.baseUrl
+                                })
+                            ]
+                        })
+                    }, source.id))
+            }) : null,
+            /*#__PURE__*/ _jsx("div", {
+                "aria-hidden": "true",
+                className: theme.list.sentinel,
+                ref: list.sentinelRef
+            }),
+            list.loading && list.items.length > 0 ? /*#__PURE__*/ _jsx("p", {
+                className: theme.field.hint,
+                children: "Loading more…"
+            }) : null
+        ]
+    }));
+}

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

@@ -0,0 +1,2 @@
+import { type ConnectionFieldsProps } from './connectionDraft';
+export declare function ConnectionOauthFields({ draft, errors, disabled, onChange, }: ConnectionFieldsProps): import("react/jsx-runtime").JSX.Element | null;