nucleus-core-ts 0.9.781 → 0.9.783

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

@@ -0,0 +1,204 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { useIntegrationsStore } from '../store';
+import { integrationsPageTheme } from '../theme';
+import { Badge, CodeBlock, Field, Notice, Stat } from './Primitives';
+import { pathParamNames } from './pathParams';
+import { CardSkeleton, StatGridSkeleton } from './Skeletons';
+/**
+ * One real request, shown in full.
+ *
+ * The interesting case is zero records, because that is when a configuration
+ * looks finished and imports nothing. The server already answers it — it returns
+ * the top-level keys of the body it actually received — so those keys are given
+ * their own block here rather than being folded into a generic "no data".
+ */ const theme = integrationsPageTheme;
+export function EndpointSample({ endpoint, actions }) {
+    const store = useIntegrationsStore();
+    const [values, setValues] = useState({});
+    // Kept in step with the render so an in-flight reply can ask what is selected
+    // NOW, not what was selected when it was sent.
+    const selectedRef = useRef(store.selectedEndpointId);
+    selectedRef.current = store.selectedEndpointId;
+    const params = pathParamNames(endpoint.path);
+    const sample = store.sample;
+    let unfilled = 0;
+    for (const name of params){
+        if (!(values[name] ?? '').trim()) unfilled += 1;
+    }
+    const run = ()=>{
+        // The endpoint this request is FOR. A sample can take seconds against a slow
+        // source, and an operator who clicks another endpoint meanwhile would
+        // otherwise get the first one's answer written in as the second one's field
+        // list — and then map against fields the endpoint does not have.
+        const requestedFor = endpoint.id;
+        store.setSampling(true);
+        store.setError(null);
+        actions.sampleEndpoint(requestedFor, params.length > 0 ? values : undefined).then((result)=>{
+            if (selectedRef.current !== requestedFor) return;
+            store.setSample(result);
+            if (!result.ok && result.error) store.setError(result.error);
+        }).catch((error)=>{
+            if (selectedRef.current !== requestedFor) return;
+            store.setSample(null);
+            store.setError(error instanceof Error ? error.message : 'Sampling the endpoint failed.');
+        });
+    };
+    return /*#__PURE__*/ _jsxs("section", {
+        className: theme.card.wrapper,
+        children: [
+            /*#__PURE__*/ _jsxs("header", {
+                className: theme.card.header,
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: theme.card.title,
+                        children: "Response sample"
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        className: theme.button.secondary,
+                        disabled: store.sampling || unfilled > 0,
+                        onClick: run,
+                        type: "button",
+                        children: store.sampling ? 'Sampling…' : 'Send one request'
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.card.body,
+                children: [
+                    params.length > 0 ? /*#__PURE__*/ _jsxs("fieldset", {
+                        className: "flex flex-col gap-2 border-0 p-0",
+                        children: [
+                            /*#__PURE__*/ _jsx("legend", {
+                                className: theme.field.label,
+                                children: "Example path parameter values"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: theme.field.hint,
+                                children: "Used for this one request only. During a run each parameter takes its value from the binding configured for it."
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
+                                children: params.map((name)=>/*#__PURE__*/ _jsx(Field, {
+                                        htmlFor: `sample-param-${name}`,
+                                        label: name,
+                                        children: /*#__PURE__*/ _jsx("input", {
+                                            className: theme.field.input,
+                                            id: `sample-param-${name}`,
+                                            onChange: (event)=>setValues((previous)=>({
+                                                        ...previous,
+                                                        [name]: event.target.value
+                                                    })),
+                                            placeholder: "example value",
+                                            type: "text",
+                                            value: values[name] ?? ''
+                                        })
+                                    }, name))
+                            })
+                        ]
+                    }) : null,
+                    store.sampling ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(StatGridSkeleton, {}),
+                            /*#__PURE__*/ _jsx(CardSkeleton, {})
+                        ]
+                    }) : null,
+                    !store.sampling && sample ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: theme.stat.grid,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Stat, {
+                                        label: "HTTP status",
+                                        tone: sample.ok ? 'success' : 'danger',
+                                        value: sample.status
+                                    }),
+                                    /*#__PURE__*/ _jsx(Stat, {
+                                        label: "Records read",
+                                        tone: sample.recordCount === 0 ? 'warning' : undefined,
+                                        value: sample.recordCount
+                                    }),
+                                    /*#__PURE__*/ _jsx(Stat, {
+                                        label: "Fields",
+                                        value: sample.fields.length
+                                    }),
+                                    /*#__PURE__*/ _jsx(Stat, {
+                                        label: "Body keys",
+                                        value: sample.bodyKeys.length
+                                    })
+                                ]
+                            }),
+                            sample.error ? /*#__PURE__*/ _jsx(Notice, {
+                                title: "The source answered with an error",
+                                tone: "danger",
+                                children: sample.error
+                            }) : null,
+                            sample.recordCount === 0 ? /*#__PURE__*/ _jsxs(Notice, {
+                                title: "The request succeeded and no records were read",
+                                tone: "warning",
+                                children: [
+                                    /*#__PURE__*/ _jsx("p", {
+                                        children: "These are the top-level keys of the body the source returned. Set the response root path to whichever holds the list."
+                                    }),
+                                    sample.bodyKeys.length > 0 ? /*#__PURE__*/ _jsx("ul", {
+                                        className: "mt-2 flex flex-wrap gap-1.5",
+                                        children: sample.bodyKeys.map((key)=>/*#__PURE__*/ _jsx("li", {
+                                                children: /*#__PURE__*/ _jsx(Badge, {
+                                                    tone: "info",
+                                                    children: key
+                                                })
+                                            }, key))
+                                    }) : /*#__PURE__*/ _jsx("p", {
+                                        className: "mt-2",
+                                        children: "The body has no top-level keys at all: it is empty, or it is a bare value rather than an object."
+                                    }),
+                                    sample.bodyPreview ? /*#__PURE__*/ _jsx("div", {
+                                        className: "mt-2",
+                                        children: /*#__PURE__*/ _jsx(CodeBlock, {
+                                            children: sample.bodyPreview
+                                        })
+                                    }) : null
+                                ]
+                            }) : null,
+                            sample.fields.length > 0 ? /*#__PURE__*/ _jsxs("section", {
+                                className: "flex flex-col gap-1.5",
+                                children: [
+                                    /*#__PURE__*/ _jsx("h4", {
+                                        className: theme.field.label,
+                                        children: "Fields on the first record"
+                                    }),
+                                    /*#__PURE__*/ _jsx("ul", {
+                                        className: "flex flex-wrap gap-1.5",
+                                        children: sample.fields.map((field)=>/*#__PURE__*/ _jsx("li", {
+                                                children: /*#__PURE__*/ _jsx(Badge, {
+                                                    tone: "neutral",
+                                                    children: field
+                                                })
+                                            }, field))
+                                    })
+                                ]
+                            }) : null,
+                            sample.sample.length > 0 ? /*#__PURE__*/ _jsxs("section", {
+                                className: "flex flex-col gap-1.5",
+                                children: [
+                                    /*#__PURE__*/ _jsx("h4", {
+                                        className: theme.field.label,
+                                        children: "Sample records"
+                                    }),
+                                    /*#__PURE__*/ _jsx(CodeBlock, {
+                                        children: JSON.stringify(sample.sample, null, 2)
+                                    })
+                                ]
+                            }) : null
+                        ]
+                    }) : null,
+                    !store.sampling && !sample ? /*#__PURE__*/ _jsx("p", {
+                        className: theme.field.hint,
+                        children: "Nothing has been sampled yet. One request is sent, read-only, and the shape it comes back with is what the field mapping is built from."
+                    }) : null
+                ]
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,5 @@
+import type { IntegrationsActions } from '../types';
+export type EndpointsTabProps = {
+    actions: IntegrationsActions;
+};
+export declare function EndpointsTab({ actions }: EndpointsTabProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,101 @@
+'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 { EndpointForm } from './EndpointForm';
+import { EndpointList } from './EndpointList';
+import { EndpointSample } from './EndpointSample';
+/**
+ * The endpoints section: the list on one side, the selected call on the other.
+ *
+ * The record the list hands over is the record the form edits, so opening an
+ * endpoint costs no extra request. The form is keyed by that record's id, which
+ * is what makes switching selection a fresh form rather than a merged one.
+ */ const theme = integrationsPageTheme;
+export function EndpointsTab({ actions }) {
+    const store = useIntegrationsStore();
+    const sourceId = store.selectedSourceId;
+    const [selected, setSelected] = useState(null);
+    const [creating, setCreating] = useState(false);
+    const [reloadToken, setReloadToken] = useState(0);
+    // Another connection is another set of endpoints. A form left open across the
+    // change would be editing a record this connection does not own.
+    const reset = useEffectEvent(()=>{
+        setSelected(null);
+        setCreating(false);
+    });
+    useEffect(()=>{
+        reset();
+    }, [
+        sourceId
+    ]);
+    const handleNew = ()=>{
+        setSelected(null);
+        setCreating(true);
+    };
+    const handleSelect = (endpoint)=>{
+        setSelected(endpoint);
+        setCreating(false);
+    };
+    const handleSaved = (saved)=>{
+        setSelected(saved);
+        setCreating(false);
+        // Re-selecting drops the old sample: it described the endpoint as it was
+        // configured a moment ago, and the mapping would be built from it.
+        store.selectEndpoint(saved.id);
+        setReloadToken((token)=>token + 1);
+    };
+    const handleDeleted = ()=>{
+        setSelected(null);
+        setCreating(false);
+        store.selectEndpoint(null);
+        setReloadToken((token)=>token + 1);
+    };
+    const handleCancel = ()=>{
+        setSelected(null);
+        setCreating(false);
+        store.selectEndpoint(null);
+    };
+    if (!sourceId) {
+        return /*#__PURE__*/ _jsx("p", {
+            className: theme.list.empty,
+            children: "Select a connection to see its endpoints."
+        });
+    }
+    // Guarded against the store: the selection is the store's, and a record left
+    // over from the previous one must not be what the form shows.
+    const editing = selected && selected.id === store.selectedEndpointId ? selected : null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "grid grid-cols-1 gap-4 xl:grid-cols-[minmax(0,18rem)_minmax(0,1fr)] xl:gap-5",
+        children: [
+            /*#__PURE__*/ _jsx(EndpointList, {
+                actions: actions,
+                onNewEndpoint: handleNew,
+                onSelect: handleSelect,
+                reloadToken: reloadToken,
+                sourceId: sourceId
+            }, sourceId),
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.layout.main,
+                children: [
+                    editing || creating ? /*#__PURE__*/ _jsx(EndpointForm, {
+                        actions: actions,
+                        endpoint: editing,
+                        onCancel: handleCancel,
+                        onDeleted: handleDeleted,
+                        onSaved: handleSaved,
+                        sourceId: sourceId
+                    }, editing?.id ?? 'new') : /*#__PURE__*/ _jsx("p", {
+                        className: theme.list.empty,
+                        children: "Select an endpoint to edit it, or add one. An endpoint is a single call — a method, a path, and where in the answer the records sit."
+                    }),
+                    editing ? /*#__PURE__*/ _jsx(EndpointSample, {
+                        actions: actions,
+                        endpoint: editing
+                    }, editing.id) : null
+                ]
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,17 @@
+import type { FieldMappingValue } from '../types';
+export type FieldMappingRowProps = {
+    row: FieldMappingValue;
+    /** Position in the list, from zero. Also what the labels count from. */
+    index: number;
+    /** Id of the datalist holding the sampled source field names. */
+    sourceListId: string;
+    /** Columns of the chosen target entity. Empty until an entity is chosen. */
+    targetFields: string[];
+    isFirst: boolean;
+    isLast: boolean;
+    disabled?: boolean;
+    onPatch: (patch: Partial<FieldMappingValue>) => void;
+    onMove: (delta: number) => void;
+    onRemove: () => void;
+};
+export declare function FieldMappingRow({ row, index, sourceListId, targetFields, isFirst, isLast, disabled, onPatch, onMove, onRemove, }: FieldMappingRowProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,179 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn';
+import { integrationsPageTheme } from '../theme';
+import { FIELD_MAPPING_GRID, PARENT_PREFIX, TRANSFORM_LABEL, TRANSFORMS, toTransform } from './fieldMappingOptions';
+/**
+ * One line of a field mapping: where the value comes from, what it becomes, and
+ * which column it lands in.
+ *
+ * The row owns no state. It reports a patch and the editor above decides what
+ * the list of rows now is, so ordering and validation live in one place instead
+ * of being spread across however many rows are on screen.
+ */ const theme = integrationsPageTheme;
+/** Label above each control on a phone; the header row replaces it from lg up. */ function Cell({ id, label, children }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: theme.field.wrapper,
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                className: cn(theme.field.label, 'lg:sr-only'),
+                htmlFor: id,
+                children: label
+            }),
+            children
+        ]
+    });
+}
+export function FieldMappingRow({ row, index, sourceListId, targetFields, isFirst, isLast, disabled, onPatch, onMove, onRemove }) {
+    const base = `${sourceListId}-${index}`;
+    return /*#__PURE__*/ _jsxs("li", {
+        className: cn(theme.card.wrapper, 'p-3'),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: FIELD_MAPPING_GRID,
+                children: [
+                    /*#__PURE__*/ _jsx(Cell, {
+                        id: `${base}-source`,
+                        label: "Source",
+                        children: /*#__PURE__*/ _jsx("input", {
+                            className: theme.field.input,
+                            disabled: disabled,
+                            id: `${base}-source`,
+                            list: sourceListId,
+                            onChange: (event)=>onPatch({
+                                    source: event.target.value
+                                }),
+                            placeholder: "employeeNo",
+                            value: row.source
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Cell, {
+                        id: `${base}-target`,
+                        label: "Target",
+                        children: targetFields.length > 0 ? /*#__PURE__*/ _jsxs("select", {
+                            className: theme.field.input,
+                            disabled: disabled,
+                            id: `${base}-target`,
+                            onChange: (event)=>onPatch({
+                                    target: event.target.value
+                                }),
+                            value: row.target,
+                            children: [
+                                /*#__PURE__*/ _jsx("option", {
+                                    value: "",
+                                    children: "Not set"
+                                }),
+                                targetFields.map((field)=>/*#__PURE__*/ _jsx("option", {
+                                        value: field,
+                                        children: field
+                                    }, field))
+                            ]
+                        }) : /*#__PURE__*/ _jsx("input", {
+                            className: theme.field.input,
+                            disabled: disabled,
+                            id: `${base}-target`,
+                            onChange: (event)=>onPatch({
+                                    target: event.target.value
+                                }),
+                            placeholder: "employee_no",
+                            value: row.target
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Cell, {
+                        id: `${base}-transform`,
+                        label: "Transform",
+                        children: /*#__PURE__*/ _jsx("select", {
+                            className: theme.field.input,
+                            disabled: disabled,
+                            id: `${base}-transform`,
+                            onChange: (event)=>onPatch({
+                                    transform: toTransform(event.target.value)
+                                }),
+                            value: row.transform ?? 'none',
+                            children: TRANSFORMS.map((option)=>/*#__PURE__*/ _jsx("option", {
+                                    value: option,
+                                    children: TRANSFORM_LABEL[option]
+                                }, option))
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Cell, {
+                        id: `${base}-constant`,
+                        label: "Constant",
+                        children: /*#__PURE__*/ _jsx("input", {
+                            className: theme.field.input,
+                            disabled: disabled,
+                            id: `${base}-constant`,
+                            onChange: (event)=>onPatch({
+                                    constant: event.target.value
+                                }),
+                            placeholder: "Same value on every record",
+                            value: row.constant ?? ''
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Cell, {
+                        id: `${base}-fallback`,
+                        label: "Fallback",
+                        children: /*#__PURE__*/ _jsx("input", {
+                            className: theme.field.input,
+                            disabled: disabled,
+                            id: `${base}-fallback`,
+                            onChange: (event)=>onPatch({
+                                    fallback: event.target.value
+                                }),
+                            placeholder: "Used when the source is empty",
+                            value: row.fallback ?? ''
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-end gap-1",
+                        children: [
+                            /*#__PURE__*/ _jsx("button", {
+                                "aria-label": `Move field ${index + 1} earlier`,
+                                className: theme.button.ghost,
+                                disabled: disabled || isFirst,
+                                onClick: ()=>onMove(-1),
+                                type: "button",
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    "aria-hidden": "true",
+                                    children: "↑"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                "aria-label": `Move field ${index + 1} later`,
+                                className: theme.button.ghost,
+                                disabled: disabled || isLast,
+                                onClick: ()=>onMove(1),
+                                type: "button",
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    "aria-hidden": "true",
+                                    children: "↓"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                "aria-label": `Remove field ${index + 1}`,
+                                className: theme.button.ghost,
+                                disabled: disabled,
+                                onClick: onRemove,
+                                type: "button",
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    "aria-hidden": "true",
+                                    children: "✕"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            row.source.startsWith(PARENT_PREFIX) ? /*#__PURE__*/ _jsxs("p", {
+                className: cn(theme.field.hint, 'mt-2'),
+                children: [
+                    "Reads ",
+                    /*#__PURE__*/ _jsx("strong", {
+                        children: row.source.slice(PARENT_PREFIX.length) || 'a field'
+                    }),
+                    " from the record the parent endpoint returned — the one this request was built for — not from this response."
+                ]
+            }) : null
+        ]
+    });
+}

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

@@ -0,0 +1,11 @@
+import type { FieldMappingValue } from '../types';
+export type FieldMappingRowsProps = {
+    rows: FieldMappingValue[];
+    /** Field names the endpoint sample reported. Empty until the endpoint is sampled. */
+    sourceFields: string[];
+    /** Columns of the chosen target entity. Empty until an entity is chosen. */
+    targetFields: string[];
+    disabled?: boolean;
+    onChange: (rows: FieldMappingValue[]) => void;
+};
+export declare function FieldMappingRows({ rows, sourceFields, targetFields, disabled, onChange, }: FieldMappingRowsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,115 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cn } from '../../../utils/cn';
+import { integrationsPageTheme } from '../theme';
+import { FieldMappingRow } from './FieldMappingRow';
+import { EMPTY_FIELD_MAPPING, FIELD_MAPPING_COLUMNS, FIELD_MAPPING_GRID, PARENT_PREFIX } from './fieldMappingOptions';
+import { Notice } from './Primitives';
+/**
+ * The rows that say which incoming value becomes which column.
+ *
+ * The order is kept because the writer applies the rows in it: two rows aimed at
+ * the same column mean the later one wins, and that is only predictable if the
+ * operator can see the order and change it.
+ */ const theme = integrationsPageTheme;
+export function FieldMappingRows({ rows, sourceFields, targetFields, disabled, onChange }) {
+    const uid = useId();
+    const listId = `${uid}-source-fields`;
+    const patchRow = (index, patch)=>{
+        const current = rows[index];
+        if (!current) return;
+        onChange(rows.with(index, {
+            ...current,
+            ...patch
+        }));
+    };
+    const moveRow = (index, delta)=>{
+        const target = index + delta;
+        const moving = rows[index];
+        const displaced = rows[target];
+        if (!moving || !displaced) return;
+        onChange(rows.with(index, displaced).with(target, moving));
+    };
+    return /*#__PURE__*/ _jsxs("section", {
+        className: "flex flex-col gap-3",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-wrap items-center justify-between gap-2",
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: theme.card.title,
+                        children: "Field mappings"
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        className: theme.button.secondary,
+                        disabled: disabled,
+                        onClick: ()=>onChange([
+                                ...rows,
+                                EMPTY_FIELD_MAPPING
+                            ]),
+                        type: "button",
+                        children: "Add field"
+                    })
+                ]
+            }),
+            sourceFields.length === 0 ? /*#__PURE__*/ _jsx(Notice, {
+                title: "Sample the endpoint first",
+                tone: "warning",
+                children: "No field names are known yet. Sampling the selected endpoint lists what the response really returns; until then a source has to be typed from memory, and a typo shows up only as an empty column once the import has already run."
+            }) : null,
+            /*#__PURE__*/ _jsx("datalist", {
+                id: listId,
+                children: sourceFields.map((field)=>/*#__PURE__*/ _jsx("option", {
+                        value: field
+                    }, field))
+            }),
+            rows.length === 0 ? /*#__PURE__*/ _jsx("p", {
+                className: theme.list.empty,
+                children: "Nothing is mapped yet, so a run would write empty records. Add a field to begin."
+            }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        "aria-hidden": "true",
+                        className: cn(FIELD_MAPPING_GRID, 'hidden px-3 lg:grid'),
+                        children: [
+                            FIELD_MAPPING_COLUMNS.map((column)=>/*#__PURE__*/ _jsx("span", {
+                                    className: theme.field.label,
+                                    children: column
+                                }, column)),
+                            /*#__PURE__*/ _jsx("span", {
+                                className: cn(theme.field.label, 'w-28'),
+                                children: "Order"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("ol", {
+                        className: "flex flex-col gap-2",
+                        children: rows.map((row, index)=>/*#__PURE__*/ _jsx(FieldMappingRow, {
+                                disabled: disabled,
+                                index: index,
+                                isFirst: index === 0,
+                                isLast: index === rows.length - 1,
+                                onMove: (delta)=>moveRow(index, delta),
+                                onPatch: (patch)=>patchRow(index, patch),
+                                onRemove: ()=>onChange(rows.toSpliced(index, 1)),
+                                row: row,
+                                sourceListId: listId,
+                                targetFields: targetFields
+                            }, `field-mapping-${index}`))
+                    }),
+                    /*#__PURE__*/ _jsxs("p", {
+                        className: theme.field.hint,
+                        children: [
+                            "Prefix a source with ",
+                            /*#__PURE__*/ _jsx("strong", {
+                                children: PARENT_PREFIX
+                            }),
+                            " to take the value from the parent endpoint's record instead of this one."
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,2 @@
+import type { IntegrationsPageProps } from '../types';
+export declare function IntegrationsPage({ title, subtitle, className, actions, onSubscribeProgress, }: IntegrationsPageProps): import("react/jsx-runtime").JSX.Element;