@ethisyscore/plugin-ui 1.127.2 → 1.128.0

package/dist/components/connectors/index.cjs

@@ -1608,6 +1608,205 @@ function ConnectorMappingView({
     ] }) })
   ] });
 }
+
+// src/components/connectors/requestTemplates.ts
+var PLACEHOLDER = /^\{\{([A-Za-z_][A-Za-z0-9_.-]*)\}\}$/;
+var MAX_REQUEST_TEMPLATES = 4;
+function parseRequestTemplate(text) {
+  let parsed;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return { value: null, error: "Not valid JSON.", placeholders: [] };
+  }
+  if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+    return { value: null, error: "A template must be a JSON object.", placeholders: [] };
+  }
+  const placeholders = [];
+  const embedded = [];
+  walkStrings(parsed, (value) => {
+    const match = PLACEHOLDER.exec(value);
+    if (match) {
+      if (!placeholders.includes(match[1])) placeholders.push(match[1]);
+    } else if (value.includes("{{")) {
+      embedded.push(value);
+    }
+  });
+  return {
+    value: parsed,
+    error: embedded.length > 0 ? `A placeholder must be the whole value, like "{{companyName}}": "${embedded[0]}".` : null,
+    placeholders
+  };
+}
+function walkStrings(value, onString) {
+  if (typeof value === "string") {
+    onString(value);
+  } else if (Array.isArray(value)) {
+    value.forEach((item) => walkStrings(item, onString));
+  } else if (value !== null && typeof value === "object") {
+    Object.values(value).forEach((item) => walkStrings(item, onString));
+  }
+}
+var MAX_ROW_FIELDS_PER_FIELD = 32;
+var MAX_ROW_FIELD_TEXT_LENGTH = 256;
+function rowFieldPathError(path) {
+  const trimmed = path.trim();
+  if (trimmed.length === 0) return null;
+  if (!trimmed.startsWith("$.")) return 'A path must start with "$.", e.g. $.company_domain.';
+  if (trimmed.length > MAX_ROW_FIELD_TEXT_LENGTH) return `A path can be at most ${MAX_ROW_FIELD_TEXT_LENGTH} characters.`;
+  return null;
+}
+var REQUEST_TEMPLATES_CAPTION = "The first template whose placeholders all have values is sent as the request. Leave empty to use the field map.";
+function RequestTemplatesSection({
+  rows,
+  canonicalRequestFields,
+  onChange,
+  onAdd,
+  onRemove,
+  onMove
+}) {
+  const canonicalNames = new Set(canonicalRequestFields.map((field) => field.name));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", component: "h2", className: "mb-2", children: "Request templates" }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", className: "text-text-secondary mb-3 block", children: REQUEST_TEMPLATES_CAPTION }),
+    rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", className: "text-text-disabled italic mb-3", children: "No request templates configured." }) : /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "flex flex-col gap-3 mb-3", children: rows.map((row, index) => {
+      const parsed = row.text.trim().length === 0 ? null : parseRequestTemplate(row.text);
+      return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { className: "flex flex-row items-start gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { variant: "filled", size: "medium", className: "surface mb-0 flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { children: `Template ${index + 1}` }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.FilledInput,
+              {
+                multiline: true,
+                minRows: 4,
+                value: row.text,
+                onChange: (e) => onChange(index, e.target.value),
+                inputProps: { "aria-label": `Request template ${index + 1}` },
+                sx: { fontFamily: "monospace" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.IconButton,
+              {
+                "aria-label": `Move template ${index + 1} up`,
+                color: "inherit",
+                disabled: index === 0,
+                onClick: () => onMove(index, -1),
+                children: /* @__PURE__ */ jsxRuntime.jsx(NiChevronUpSmall, { size: "small" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.IconButton,
+              {
+                "aria-label": `Move template ${index + 1} down`,
+                color: "inherit",
+                disabled: index === rows.length - 1,
+                onClick: () => onMove(index, 1),
+                children: /* @__PURE__ */ jsxRuntime.jsx(NiChevronDownSmall, { size: "small" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { "aria-label": `Remove template ${index + 1}`, color: "inherit", onClick: () => onRemove(index), children: /* @__PURE__ */ jsxRuntime.jsx(NiBinEmpty, { size: "small" }) })
+          ] })
+        ] }),
+        parsed?.error && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "error", role: "alert", children: parsed.error }),
+        parsed && parsed.placeholders.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "flex flex-wrap gap-1", children: parsed.placeholders.map(
+          (name) => canonicalNames.has(name) ? /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: `{{${name}}}`, size: "small", variant: "outlined" }, name) : /* @__PURE__ */ jsxRuntime.jsx(
+            material.Chip,
+            {
+              label: `{{${name}}} is not a request field`,
+              size: "small",
+              color: "error",
+              variant: "outlined"
+            },
+            name
+          )
+        ) })
+      ] }, row.id);
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Button,
+      {
+        variant: "outlined",
+        color: "grey",
+        size: "small",
+        onClick: onAdd,
+        disabled: rows.length >= MAX_REQUEST_TEMPLATES,
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(NiPlus, { size: "small" }),
+        sx: { alignSelf: "flex-start" },
+        children: "Add template"
+      }
+    )
+  ] });
+}
+function RowFieldsSection({ objectFields, rows, onChange, onAdd, onRemove }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: objectFields.map((field) => {
+    const fieldRows = rows[field.name] ?? [];
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { className: "flex flex-col gap-2 mb-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", component: "h2", children: `Row fields \u2014 ${field.name}` }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", className: "text-text-secondary block", children: [
+        "Rename the fields inside each row of this response. Each path is read from one row, e.g.",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { children: "$.company_domain" }),
+        "; once you list any, the fields you do not list are dropped."
+      ] }),
+      fieldRows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { className: "flex flex-row items-start gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { variant: "filled", size: "medium", className: "surface mb-0", sx: { width: 200, flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { children: "Row field" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.FilledInput,
+            {
+              value: row.key,
+              onChange: (e) => onChange(field.name, index, { key: e.target.value }),
+              inputProps: { "aria-label": `Row field name ${index + 1} for ${field.name}`, maxLength: MAX_ROW_FIELD_TEXT_LENGTH },
+              placeholder: "e.g. domain"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { variant: "filled", size: "medium", className: "surface mb-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { children: "JSON path in the row" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.FilledInput,
+            {
+              value: row.path,
+              onChange: (e) => onChange(field.name, index, { path: e.target.value }),
+              inputProps: { "aria-label": `Row field path ${index + 1} for ${field.name}`, maxLength: MAX_ROW_FIELD_TEXT_LENGTH },
+              error: rowFieldPathError(row.path) !== null,
+              placeholder: "e.g. $.company_domain"
+            }
+          ),
+          rowFieldPathError(row.path) && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "error", role: "alert", children: rowFieldPathError(row.path) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.IconButton,
+          {
+            "aria-label": `Remove row field ${index + 1} for ${field.name}`,
+            color: "inherit",
+            onClick: () => onRemove(field.name, index),
+            sx: { mt: 1 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(NiBinEmpty, { size: "small" })
+          }
+        )
+      ] }, row.id)),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Button,
+        {
+          variant: "outlined",
+          color: "grey",
+          size: "small",
+          onClick: () => onAdd(field.name),
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(NiPlus, { size: "small" }),
+          disabled: fieldRows.length >= MAX_ROW_FIELDS_PER_FIELD,
+          sx: { alignSelf: "flex-start" },
+          "aria-label": `Add row field to ${field.name}`,
+          children: "Add row field"
+        }
+      )
+    ] }, field.name);
+  }) });
+}
 var SUPPRESS_REQUEST_FIELD_VALUE = "(suppress)";
 function isSuppressed(value) {
   return value?.trim().toLowerCase() === SUPPRESS_REQUEST_FIELD_VALUE;
@@ -1625,6 +1824,8 @@ function ConnectorMappingTranslationEditorView({
   requestFieldMap,
   responseFieldPaths,
   staticRequestFields,
+  requestTemplates,
+  responseItemFieldPaths,
   onSave,
   onCancel,
   onTestMapping,
@@ -1652,6 +1853,52 @@ function ConnectorMappingTranslationEditorView({
   const [rawJsonExpanded, setRawJsonExpanded] = react.useState(false);
   const [suggestionError, setSuggestionError] = react.useState(null);
   const [isSuggesting, setIsSuggesting] = react.useState(false);
+  const showTemplates = requestTemplates !== void 0;
+  const objectResponseFields = canonicalResponseFields.filter((field) => field.kind === "Object");
+  const showRowFields = responseItemFieldPaths !== void 0 && objectResponseFields.length > 0;
+  const templateRowIdRef = react.useRef(0);
+  const [templateRows, setTemplateRows] = react.useState(
+    () => (requestTemplates ?? []).flatMap((template) => {
+      let text;
+      try {
+        text = JSON.stringify(template, null, 2);
+      } catch {
+        text = void 0;
+      }
+      return text === void 0 ? [] : [{ id: templateRowIdRef.current++, text }];
+    })
+  );
+  const rowFieldIdRef = react.useRef(0);
+  const [rowFieldRows, setRowFieldRows] = react.useState(
+    () => Object.fromEntries(
+      Object.entries(responseItemFieldPaths ?? {}).map(([field, paths]) => [
+        field,
+        Object.entries(paths).map(([key, path]) => ({ id: rowFieldIdRef.current++, key, path }))
+      ])
+    )
+  );
+  const hasInvalidTemplate = showTemplates && templateRows.some((row) => row.text.trim().length > 0 && parseRequestTemplate(row.text).error !== null) || showRowFields && objectResponseFields.some((field) => (rowFieldRows[field.name] ?? []).some((row) => rowFieldPathError(row.path) !== null));
+  const handleTemplateChange = (index, text) => setTemplateRows((prev) => prev.map((row, i) => i === index ? { ...row, text } : row));
+  const handleAddTemplate = () => setTemplateRows(
+    (prev) => prev.length >= MAX_REQUEST_TEMPLATES ? prev : [...prev, { id: templateRowIdRef.current++, text: "" }]
+  );
+  const handleRemoveTemplate = (index) => setTemplateRows((prev) => prev.filter((_, i) => i !== index));
+  const handleMoveTemplate = (index, direction) => setTemplateRows((prev) => {
+    const target = index + direction;
+    if (target < 0 || target >= prev.length) return prev;
+    const next = [...prev];
+    [next[index], next[target]] = [next[target], next[index]];
+    return next;
+  });
+  const handleRowFieldChange = (field, index, patch) => setRowFieldRows((prev) => ({
+    ...prev,
+    [field]: (prev[field] ?? []).map((row, i) => i === index ? { ...row, ...patch } : row)
+  }));
+  const handleAddRowField = (field) => setRowFieldRows((prev) => ({
+    ...prev,
+    [field]: [...prev[field] ?? [], { id: rowFieldIdRef.current++, key: "", path: "" }]
+  }));
+  const handleRemoveRowField = (field, index) => setRowFieldRows((prev) => ({ ...prev, [field]: (prev[field] ?? []).filter((_, i) => i !== index) }));
   const handleRequestChange = (canonicalName, value) => {
     setRequestValues((prev) => ({ ...prev, [canonicalName]: value }));
   };
@@ -1677,11 +1924,17 @@ function ConnectorMappingTranslationEditorView({
     const requestMap = stripEmpty(requestValues);
     const responseMap = stripEmpty(responseValues);
     const staticMap = staticRowsToMap(staticRows);
-    onSave(
-      Object.keys(requestMap).length === 0 ? null : requestMap,
-      Object.keys(responseMap).length === 0 ? null : responseMap,
-      Object.keys(staticMap).length === 0 ? null : staticMap
-    );
+    const request = Object.keys(requestMap).length === 0 ? null : requestMap;
+    const response = Object.keys(responseMap).length === 0 ? null : responseMap;
+    const statics = Object.keys(staticMap).length === 0 ? null : staticMap;
+    if (!showTemplates && !showRowFields) {
+      onSave(request, response, statics);
+      return;
+    }
+    const extras = {};
+    if (showTemplates) extras.requestTemplates = templateRowsToWire(templateRows);
+    if (showRowFields) extras.responseItemFieldPaths = rowFieldRowsToWire(rowFieldRows, objectResponseFields);
+    onSave(request, response, statics, extras);
   };
   const handleTest = async () => {
     if (!onTestMapping) return;
@@ -1857,6 +2110,33 @@ function ConnectorMappingTranslationEditorView({
           children: "Add parameter"
         }
       ),
+      showTemplates && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { className: "my-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RequestTemplatesSection,
+          {
+            rows: templateRows,
+            canonicalRequestFields,
+            onChange: handleTemplateChange,
+            onAdd: handleAddTemplate,
+            onRemove: handleRemoveTemplate,
+            onMove: handleMoveTemplate
+          }
+        )
+      ] }),
+      showRowFields && objectResponseFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { className: "my-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RowFieldsSection,
+          {
+            objectFields: objectResponseFields,
+            rows: rowFieldRows,
+            onChange: handleRowFieldChange,
+            onAdd: handleAddRowField,
+            onRemove: handleRemoveRowField
+          }
+        )
+      ] }),
       (onTestMapping || onSuggestTranslation) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { className: "my-4" }),
         /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", component: "h2", className: "mb-2", children: "Test with sample inputs" }),
@@ -2012,6 +2292,7 @@ function ConnectorMappingTranslationEditorView({
           color: "primary",
           onClick: handleSave,
           "data-testid": "save-translation-button",
+          disabled: hasInvalidTemplate,
           children: "Save"
         }
       )
@@ -2071,22 +2352,27 @@ function FieldRow({
   ] });
 }
 function stripEmpty(values) {
-  const out = {};
-  for (const [key, value] of Object.entries(values)) {
-    if (value.trim().length > 0) {
-      out[key] = value.trim();
-    }
-  }
-  return out;
+  return Object.fromEntries(
+    Object.entries(values).filter(([, value]) => value.trim().length > 0).map(([key, value]) => [key, value.trim()])
+  );
 }
 function staticRowsToMap(rows) {
-  const out = {};
-  for (const { key, value } of rows) {
-    if (key.trim().length > 0) {
-      out[key.trim()] = value;
-    }
-  }
-  return out;
+  return Object.fromEntries(rows.filter(({ key }) => key.trim().length > 0).map(({ key, value }) => [key.trim(), value]));
+}
+function templateRowsToWire(rows) {
+  const templates = rows.filter((row) => row.text.trim().length > 0).map((row) => parseRequestTemplate(row.text).value).filter((value) => value !== null);
+  return templates.length === 0 ? null : templates;
+}
+function rowFieldRowsToWire(rows, objectFields) {
+  const out = Object.fromEntries(
+    objectFields.map((field) => {
+      const paths = Object.fromEntries(
+        (rows[field.name] ?? []).filter(({ key, path }) => key.trim().length > 0 && path.trim().length > 0).map(({ key, path }) => [key.trim(), path.trim()])
+      );
+      return [field.name, paths];
+    }).filter(([, paths]) => Object.keys(paths).length > 0)
+  );
+  return Object.keys(out).length === 0 ? null : out;
 }
 
 // src/components/connectors/mappingQueryKeys.ts