@burdenoff/microfe-adaptercloud 2026.706.2 → 2026.706.3

package/dist/adaptercloud/pages/adapters/AdapterFormPage.js

@@ -5,12 +5,12 @@ import { DataState as i } from "../../components/DataState.js";
 import { useAdapter as a, useCreateAdapter as o, useUpdateAdapter as s } from "../../hooks/useAdapterCloudApi.js";
 import { useCallback as c, useEffect as l, useState as u } from "react";
 import { useI18n as d } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { ArrowLeft as f, Loader2 as p, Save as m } from "lucide-react";
-import { useParams as h } from "react-router-dom";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { GlassCard as v } from "@burdenoff/fe-libs/ui";
+import { ArrowLeft as f, Loader2 as p, Save as m, X as h } from "lucide-react";
+import { useParams as g } from "react-router-dom";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { GlassCard as y } from "@burdenoff/fe-libs/ui";
 //#region src/adaptercloud/pages/adapters/AdapterFormPage.tsx
-var y = (e) => e.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, ""), b = (e) => e.split(",").map((e) => e.trim()).filter(Boolean), x = {
+var b = (e) => e.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, ""), x = {
 	name: "",
 	slug: "",
 	kind: "CUSTOM",
@@ -18,14 +18,61 @@ var y = (e) => e.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-
 	vendor: "",
 	version: "1.0.0",
 	description: "",
-	capabilities: "",
-	tags: ""
+	capabilities: [],
+	tags: [],
+	configSchema: ""
 };
-function S() {
-	let { id: S } = h(), C = !!S, { navigateTo: w } = e(), { t: T } = d(), E = c((e, t) => {
+function S({ id: e, label: t, values: n, onChange: r, placeholder: i, chipClass: a }) {
+	let [o, s] = u(""), l = c((e) => {
+		let t = e.trim();
+		!t || n.includes(t) || r([...n, t]);
+	}, [n, r]), d = c(() => {
+		o.trim() && (l(o), s(""));
+	}, [o, l]), f = c((e) => {
+		if (e.includes(",")) {
+			let t = e.split(",");
+			t.slice(0, -1).forEach((e) => l(e)), s(t[t.length - 1] ?? "");
+		} else s(e);
+	}, [l]), p = c((e) => {
+		e.key === "Enter" || e.key === "," ? (e.preventDefault(), d()) : e.key === "Backspace" && !o && n.length > 0 && r(n.slice(0, -1));
+	}, [
+		d,
+		o,
+		n,
+		r
+	]);
+	return /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+		htmlFor: e,
+		className: "mb-1.5 block text-sm font-medium text-text-primary",
+		children: t
+	}), /* @__PURE__ */ v("div", {
+		className: "flex w-full flex-wrap items-center gap-1.5 rounded-lg border border-border-subtle bg-bg-surface px-2 py-1.5 focus-within:ring-2 focus-within:ring-[var(--color-focus-ring)]",
+		children: [n.map((e) => /* @__PURE__ */ v("span", {
+			className: `inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ${a}`,
+			children: [e, /* @__PURE__ */ _("button", {
+				type: "button",
+				onClick: () => r(n.filter((t) => t !== e)),
+				className: "rounded-full p-0.5 transition-opacity hover:opacity-70 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
+				"aria-label": `Remove ${e}`,
+				children: /* @__PURE__ */ _(h, { className: "h-3 w-3" })
+			})]
+		}, e)), /* @__PURE__ */ _("input", {
+			id: e,
+			type: "text",
+			value: o,
+			onChange: (e) => f(e.target.value),
+			onKeyDown: p,
+			onBlur: d,
+			className: "min-w-[8rem] flex-1 bg-transparent px-1 py-1 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none",
+			placeholder: n.length === 0 ? i : ""
+		})]
+	})] });
+}
+function C() {
+	let { id: h } = g(), C = !!h, { navigateTo: w } = e(), { t: T } = d(), E = c((e, t) => {
 		let n = T(e);
 		return n === e ? t : n;
-	}, [T]), D = a(C ? S : void 0), O = o(), k = s(), [A, j] = u(x), [M, N] = u(!1), [P, F] = u(null);
+	}, [T]), D = a(C ? h : void 0), O = o(), k = s(), [A, j] = u(x), [M, N] = u(!1), [P, F] = u(null), [I, L] = u(null);
 	l(() => {
 		let e = D.data;
 		C && e && (j({
@@ -36,22 +83,34 @@ function S() {
 			vendor: e.vendor ?? "",
 			version: e.version,
 			description: e.description ?? "",
-			capabilities: e.capabilities.join(", "),
-			tags: e.tags.join(", ")
+			capabilities: e.capabilities,
+			tags: e.tags,
+			configSchema: e.configSchema == null ? "" : JSON.stringify(e.configSchema, null, 2)
 		}), N(!0));
 	}, [C, D.data]);
-	let I = c((e, t) => {
+	let R = c((e, t) => {
 		j((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, []), L = c((e) => {
+	}, []), z = c((e) => {
 		j((t) => ({
 			...t,
 			name: e,
-			slug: M ? t.slug : y(e)
+			slug: M ? t.slug : b(e)
 		}));
-	}, [M]), R = O.isPending || k.isPending, z = c((e) => {
+	}, [M]), B = c(() => {
+		let e = A.configSchema.trim();
+		if (!e) {
+			L(null);
+			return;
+		}
+		try {
+			JSON.parse(e), L(null);
+		} catch {
+			L(E("adaptercloud.adapters.form.configSchemaInvalid", "Config schema must be valid JSON."));
+		}
+	}, [A.configSchema, E]), V = O.isPending || k.isPending, H = c((e) => {
 		if (e.preventDefault(), F(null), !A.name.trim()) {
 			F(E("adaptercloud.adapters.form.nameRequired", "Name is required."));
 			return;
@@ -60,212 +119,235 @@ function S() {
 			F(E("adaptercloud.adapters.form.slugRequired", "Slug is required."));
 			return;
 		}
-		let t = {
+		let t = A.configSchema.trim(), n;
+		if (t) try {
+			n = JSON.parse(t);
+		} catch {
+			let e = E("adaptercloud.adapters.form.configSchemaInvalid", "Config schema must be valid JSON.");
+			L(e), F(e);
+			return;
+		}
+		L(null);
+		let r = {
 			name: A.name.trim(),
 			kind: A.kind,
 			status: A.status,
 			vendor: A.vendor.trim() || void 0,
 			version: A.version.trim() || void 0,
 			description: A.description.trim() || void 0,
-			capabilities: b(A.capabilities),
-			tags: b(A.tags)
-		}, n = (e) => F(e instanceof Error ? e.message : "Failed to save adapter.");
-		C && S ? k.mutate({
-			id: S,
-			input: t
+			capabilities: A.capabilities,
+			tags: A.tags,
+			configSchema: t ? n : void 0
+		}, i = (e) => F(e instanceof Error ? e.message : "Failed to save adapter.");
+		C && h ? k.mutate({
+			id: h,
+			input: r
 		}, {
 			onSuccess: (e) => w(`/adapters/${e.id}`),
-			onError: n
+			onError: i
 		}) : O.mutate({
-			...t,
+			...r,
 			slug: A.slug.trim()
 		}, {
 			onSuccess: (e) => w(`/adapters/${e.id}`),
-			onError: n
+			onError: i
 		});
 	}, [
 		O,
 		k,
 		A,
-		S,
+		h,
 		C,
 		w,
 		E
-	]), B = "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]", V = "mb-1.5 block text-sm font-medium text-text-primary";
-	return /* @__PURE__ */ g(t, {
+	]), U = "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]", W = "mb-1.5 block text-sm font-medium text-text-primary";
+	return /* @__PURE__ */ _(t, {
 		title: C ? E("adaptercloud.adapters.editTitle", "Edit Adapter") : E("adaptercloud.adapters.newTitle", "New Adapter"),
 		description: E("adaptercloud.adapters.formSubtitle", "Define how AdapterCloud connects to a class of system."),
-		actions: /* @__PURE__ */ _("button", {
+		actions: /* @__PURE__ */ v("button", {
 			type: "button",
-			onClick: () => w(C && S ? `/adapters/${S}` : "/adapters"),
+			onClick: () => w(C && h ? `/adapters/${h}` : "/adapters"),
 			className: "inline-flex items-center gap-2 rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-accent",
-			children: [/* @__PURE__ */ g(f, { className: "h-4 w-4" }), E("adaptercloud.common.cancel", "Cancel")]
+			children: [/* @__PURE__ */ _(f, { className: "h-4 w-4" }), E("adaptercloud.common.cancel", "Cancel")]
 		}),
-		children: /* @__PURE__ */ g(i, {
+		children: /* @__PURE__ */ _(i, {
 			isLoading: C && D.isLoading,
 			isError: C && D.isError,
 			isEmpty: C && !D.isLoading && !D.data,
 			error: D.error,
 			onRetry: () => void D.refetch(),
 			emptyTitle: E("adaptercloud.adapters.notFound", "Adapter not found"),
-			children: /* @__PURE__ */ g("form", {
-				onSubmit: z,
-				className: "max-w-2xl",
-				children: /* @__PURE__ */ _(v, {
+			children: /* @__PURE__ */ _("form", {
+				onSubmit: H,
+				className: "max-w-5xl",
+				children: /* @__PURE__ */ v(y, {
 					className: "space-y-5 p-6",
 					children: [
-						/* @__PURE__ */ _("div", {
-							className: "grid grid-cols-1 gap-5 sm:grid-cols-2",
-							children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
-								htmlFor: "ada-name",
-								className: V,
-								children: [E("adaptercloud.adapters.form.name", "Name"), " *"]
-							}), /* @__PURE__ */ g("input", {
-								id: "ada-name",
-								type: "text",
-								value: A.name,
-								onChange: (e) => L(e.target.value),
-								className: B,
-								placeholder: "AWS Production"
-							})] }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
-								htmlFor: "ada-slug",
-								className: V,
+						/* @__PURE__ */ v("div", {
+							className: "grid grid-cols-1 gap-6 lg:grid-cols-2",
+							children: [/* @__PURE__ */ v("div", {
+								className: "space-y-5",
 								children: [
-									E("adaptercloud.adapters.form.slug", "Slug"),
-									" ",
-									C ? "" : "*"
+									/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ v("label", {
+										htmlFor: "ada-name",
+										className: W,
+										children: [E("adaptercloud.adapters.form.name", "Name"), " *"]
+									}), /* @__PURE__ */ _("input", {
+										id: "ada-name",
+										type: "text",
+										value: A.name,
+										onChange: (e) => z(e.target.value),
+										className: U,
+										placeholder: "AWS Production"
+									})] }),
+									/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ v("label", {
+										htmlFor: "ada-slug",
+										className: W,
+										children: [
+											E("adaptercloud.adapters.form.slug", "Slug"),
+											" ",
+											C ? "" : "*"
+										]
+									}), /* @__PURE__ */ _("input", {
+										id: "ada-slug",
+										type: "text",
+										value: A.slug,
+										disabled: C,
+										onChange: (e) => {
+											N(!0), R("slug", b(e.target.value));
+										},
+										className: `${U} disabled:cursor-not-allowed disabled:opacity-60`,
+										placeholder: "aws-production"
+									})] }),
+									/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+										htmlFor: "ada-vendor",
+										className: W,
+										children: E("adaptercloud.adapters.form.vendor", "Vendor")
+									}), /* @__PURE__ */ _("input", {
+										id: "ada-vendor",
+										type: "text",
+										value: A.vendor,
+										onChange: (e) => R("vendor", e.target.value),
+										className: U,
+										placeholder: "Amazon Web Services"
+									})] }),
+									/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+										htmlFor: "ada-version",
+										className: W,
+										children: E("adaptercloud.adapters.form.version", "Version")
+									}), /* @__PURE__ */ _("input", {
+										id: "ada-version",
+										type: "text",
+										value: A.version,
+										onChange: (e) => R("version", e.target.value),
+										className: U,
+										placeholder: "1.0.0"
+									})] }),
+									/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+										htmlFor: "ada-description",
+										className: W,
+										children: E("adaptercloud.adapters.form.description", "Description")
+									}), /* @__PURE__ */ _("textarea", {
+										id: "ada-description",
+										value: A.description,
+										onChange: (e) => R("description", e.target.value),
+										rows: 3,
+										className: U,
+										placeholder: E("adaptercloud.adapters.form.descriptionPlaceholder", "What this adapter connects to and how.")
+									})] }),
+									/* @__PURE__ */ v("div", { children: [
+										/* @__PURE__ */ _("label", {
+											htmlFor: "ada-config-schema",
+											className: W,
+											children: E("adaptercloud.adapters.form.configSchema", "Config schema")
+										}),
+										/* @__PURE__ */ _("textarea", {
+											id: "ada-config-schema",
+											value: A.configSchema,
+											onChange: (e) => {
+												R("configSchema", e.target.value), I && L(null);
+											},
+											onBlur: B,
+											rows: 10,
+											spellCheck: !1,
+											"aria-invalid": I ? !0 : void 0,
+											className: "w-full rounded-lg border border-border-subtle bg-bg-sunken px-3 py-2 font-mono text-xs leading-relaxed text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+											placeholder: "{\n  \"type\": \"object\",\n  \"properties\": {}\n}"
+										}),
+										I ? /* @__PURE__ */ _("p", {
+											role: "alert",
+											"aria-live": "polite",
+											className: "mt-1 text-xs text-status-error-text",
+											children: I
+										}) : /* @__PURE__ */ _("p", {
+											className: "mt-1 text-xs text-text-secondary",
+											children: E("adaptercloud.adapters.form.configSchemaHint", "Optional JSON schema describing this adapter’s configuration.")
+										})
+									] })
 								]
-							}), /* @__PURE__ */ g("input", {
-								id: "ada-slug",
-								type: "text",
-								value: A.slug,
-								disabled: C,
-								onChange: (e) => {
-									N(!0), I("slug", y(e.target.value));
-								},
-								className: `${B} disabled:cursor-not-allowed disabled:opacity-60`,
-								placeholder: "aws-production"
-							})] })]
-						}),
-						/* @__PURE__ */ _("div", {
-							className: "grid grid-cols-1 gap-5 sm:grid-cols-2",
-							children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
-								htmlFor: "ada-kind",
-								className: V,
-								children: E("adaptercloud.adapters.form.kind", "Kind")
-							}), /* @__PURE__ */ g("select", {
-								id: "ada-kind",
-								value: A.kind,
-								onChange: (e) => I("kind", e.target.value),
-								className: B,
-								children: Object.keys(n).map((e) => /* @__PURE__ */ g("option", {
-									value: e,
-									children: n[e]
-								}, e))
-							})] }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
-								htmlFor: "ada-status",
-								className: V,
-								children: E("adaptercloud.adapters.form.status", "Status")
-							}), /* @__PURE__ */ g("select", {
-								id: "ada-status",
-								value: A.status,
-								onChange: (e) => I("status", e.target.value),
-								className: B,
-								children: Object.keys(r).map((e) => /* @__PURE__ */ g("option", {
-									value: e,
-									children: r[e]
-								}, e))
-							})] })]
-						}),
-						/* @__PURE__ */ _("div", {
-							className: "grid grid-cols-1 gap-5 sm:grid-cols-2",
-							children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
-								htmlFor: "ada-vendor",
-								className: V,
-								children: E("adaptercloud.adapters.form.vendor", "Vendor")
-							}), /* @__PURE__ */ g("input", {
-								id: "ada-vendor",
-								type: "text",
-								value: A.vendor,
-								onChange: (e) => I("vendor", e.target.value),
-								className: B,
-								placeholder: "Amazon Web Services"
-							})] }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
-								htmlFor: "ada-version",
-								className: V,
-								children: E("adaptercloud.adapters.form.version", "Version")
-							}), /* @__PURE__ */ g("input", {
-								id: "ada-version",
-								type: "text",
-								value: A.version,
-								onChange: (e) => I("version", e.target.value),
-								className: B,
-								placeholder: "1.0.0"
-							})] })]
+							}), /* @__PURE__ */ v("div", {
+								className: "space-y-5",
+								children: [
+									/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+										htmlFor: "ada-kind",
+										className: W,
+										children: E("adaptercloud.adapters.form.kind", "Kind")
+									}), /* @__PURE__ */ _("select", {
+										id: "ada-kind",
+										value: A.kind,
+										onChange: (e) => R("kind", e.target.value),
+										className: U,
+										children: Object.keys(n).map((e) => /* @__PURE__ */ _("option", {
+											value: e,
+											children: n[e]
+										}, e))
+									})] }),
+									/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+										htmlFor: "ada-status",
+										className: W,
+										children: E("adaptercloud.adapters.form.status", "Status")
+									}), /* @__PURE__ */ _("select", {
+										id: "ada-status",
+										value: A.status,
+										onChange: (e) => R("status", e.target.value),
+										className: U,
+										children: Object.keys(r).map((e) => /* @__PURE__ */ _("option", {
+											value: e,
+											children: r[e]
+										}, e))
+									})] }),
+									/* @__PURE__ */ _(S, {
+										id: "ada-capabilities",
+										label: E("adaptercloud.adapters.form.capabilities", "Capabilities"),
+										values: A.capabilities,
+										onChange: (e) => R("capabilities", e),
+										placeholder: E("adaptercloud.adapters.form.capabilitiesPlaceholder", "Add a capability and press Enter"),
+										chipClass: "bg-accent-blue-subtle text-accent-blue"
+									}),
+									/* @__PURE__ */ _(S, {
+										id: "ada-tags",
+										label: E("adaptercloud.common.tags", "Tags"),
+										values: A.tags,
+										onChange: (e) => R("tags", e),
+										placeholder: E("adaptercloud.adapters.form.tagsPlaceholder", "Add a tag and press Enter"),
+										chipClass: "bg-bg-sunken text-text-secondary"
+									})
+								]
+							})]
 						}),
-						/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
-							htmlFor: "ada-description",
-							className: V,
-							children: E("adaptercloud.adapters.form.description", "Description")
-						}), /* @__PURE__ */ g("textarea", {
-							id: "ada-description",
-							value: A.description,
-							onChange: (e) => I("description", e.target.value),
-							rows: 3,
-							className: B,
-							placeholder: E("adaptercloud.adapters.form.descriptionPlaceholder", "What this adapter connects to and how.")
-						})] }),
-						/* @__PURE__ */ _("div", { children: [
-							/* @__PURE__ */ g("label", {
-								htmlFor: "ada-capabilities",
-								className: V,
-								children: E("adaptercloud.adapters.form.capabilities", "Capabilities")
-							}),
-							/* @__PURE__ */ g("input", {
-								id: "ada-capabilities",
-								type: "text",
-								value: A.capabilities,
-								onChange: (e) => I("capabilities", e.target.value),
-								className: B,
-								placeholder: "discovery, cost, reconcile"
-							}),
-							/* @__PURE__ */ g("p", {
-								className: "mt-1 text-xs text-text-secondary",
-								children: E("adaptercloud.common.commaSeparated", "Comma-separated.")
-							})
-						] }),
-						/* @__PURE__ */ _("div", { children: [
-							/* @__PURE__ */ g("label", {
-								htmlFor: "ada-tags",
-								className: V,
-								children: E("adaptercloud.common.tags", "Tags")
-							}),
-							/* @__PURE__ */ g("input", {
-								id: "ada-tags",
-								type: "text",
-								value: A.tags,
-								onChange: (e) => I("tags", e.target.value),
-								className: B,
-								placeholder: "production, cloud"
-							}),
-							/* @__PURE__ */ g("p", {
-								className: "mt-1 text-xs text-text-secondary",
-								children: E("adaptercloud.common.commaSeparated", "Comma-separated.")
-							})
-						] }),
-						P && /* @__PURE__ */ g("p", {
+						P && /* @__PURE__ */ _("p", {
 							role: "alert",
 							"aria-live": "polite",
 							className: "rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
 							children: P
 						}),
-						/* @__PURE__ */ g("div", {
+						/* @__PURE__ */ _("div", {
 							className: "flex justify-end gap-3 pt-2",
-							children: /* @__PURE__ */ _("button", {
+							children: /* @__PURE__ */ v("button", {
 								type: "submit",
-								disabled: R,
+								disabled: V,
 								className: "inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:opacity-90 disabled:opacity-50",
-								children: [R ? /* @__PURE__ */ g(p, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ g(m, { className: "h-4 w-4" }), C ? E("adaptercloud.common.saveChanges", "Save changes") : E("adaptercloud.adapters.create", "Create adapter")]
+								children: [V ? /* @__PURE__ */ _(p, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ _(m, { className: "h-4 w-4" }), C ? E("adaptercloud.common.saveChanges", "Save changes") : E("adaptercloud.adapters.create", "Create adapter")]
 							})
 						})
 					]
@@ -275,6 +357,6 @@ function S() {
 	});
 }
 //#endregion
-export { S as AdapterFormPage };
+export { C as AdapterFormPage };
 
 //# sourceMappingURL=AdapterFormPage.js.map