@powerhousedao/workflow 6.2.3-dev.11

package/dist/browser/editor-DJX9NpD5.js

@@ -0,0 +1,134 @@
+import { E as packageFromConnectorId, s as fetchPieceCatalog } from "./runtime-api-DQa04P3e.js";
+import { i as useSelectedConnectionDocument } from "./connection-DEe5aDuU.js";
+import { n as DocumentErrorBoundary, t as useSyncWorkflowRuntimeUrl } from "./use-runtime-url-DzYskFkw.js";
+import { r as connectionCallbacks, t as ConnectionForm } from "./connection-form-B_3_LFlh.js";
+import { t as CONNECTION_STATUS_STYLES } from "./status-kpDX5CIA.js";
+import { showDeleteNodeModal, useSelectedDocumentId } from "@powerhousedao/reactor-browser";
+import { useEffect, useState } from "react";
+import { DocumentToolbar } from "@powerhousedao/design-system/connect";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region editors/connection-editor/ConnectionToolbar.tsx
+function ConnectionToolbar(props) {
+	const { state } = props;
+	const [catalog, setCatalog] = useState(null);
+	useEffect(() => {
+		let cancelled = false;
+		fetchPieceCatalog().then((pieces) => {
+			if (!cancelled) setCatalog(pieces);
+		}, () => {
+			if (!cancelled) setCatalog([]);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, []);
+	const packageName = packageFromConnectorId(state.connectorId);
+	const piece = catalog?.find((entry) => entry.name === packageName);
+	const revoked = state.status === "REVOKED";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-solid border-slate-200 px-4 py-2",
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				className: "min-w-0 max-w-72 rounded border border-transparent px-1 py-0.5 text-sm font-semibold text-slate-800 hover:border-slate-200 focus:border-slate-300 focus:outline-none",
+				defaultValue: state.name,
+				placeholder: "Untitled connection",
+				spellCheck: false,
+				"aria-label": "Connection name",
+				onKeyDown: (event) => {
+					if (event.key === "Enter") event.currentTarget.blur();
+				},
+				onBlur: (event) => {
+					const name = event.target.value.trim();
+					if (name && name !== state.name) props.onRename(name);
+				}
+			}, state.name),
+			piece ? /* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx("img", {
+					src: piece.logoUrl,
+					alt: "",
+					className: "h-4 w-4 shrink-0 object-contain"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate text-xs text-slate-600",
+					children: piece.displayName
+				})]
+			}) : packageName ? /* @__PURE__ */ jsx("span", {
+				className: "truncate text-xs text-slate-400",
+				children: packageName
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-slate-400",
+				children: "No connector picked"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: `rounded px-2 py-0.5 text-[11px] font-semibold ${CONNECTION_STATUS_STYLES[state.status]}`,
+				children: state.status
+			}),
+			state.accountLabel ? /* @__PURE__ */ jsx("span", {
+				className: "truncate text-xs text-slate-500",
+				children: state.accountLabel
+			}) : null,
+			/* @__PURE__ */ jsxs("span", {
+				className: "ml-auto flex items-center gap-3",
+				children: [
+					state.lastCheckedAt ? /* @__PURE__ */ jsxs("span", {
+						className: "text-[11px] text-slate-400",
+						title: new Date(state.lastCheckedAt).toLocaleString(),
+						children: ["Checked ", new Date(state.lastCheckedAt).toLocaleDateString()]
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "text-[11px] text-slate-400",
+						children: "Never checked"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "rounded border border-solid border-slate-300 bg-white px-2 py-1 text-xs font-medium text-slate-700 hover:border-slate-400 hover:bg-slate-50",
+						onClick: () => props.onSetStatus(revoked ? "OK" : "REVOKED"),
+						children: revoked ? "Reactivate" : "Revoke"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "rounded border border-solid border-red-200 bg-white px-2 py-1 text-xs font-medium text-red-600 hover:border-red-300 hover:bg-red-50",
+						onClick: props.onDelete,
+						children: "Delete"
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region editors/connection-editor/editor.tsx
+function ConnectionEditor() {
+	useSyncWorkflowRuntimeUrl();
+	const [document, dispatch] = useSelectedConnectionDocument();
+	const state = document.state.global;
+	const callbacks = connectionCallbacks(state, dispatch);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-0 flex-col bg-background",
+		children: [
+			/* @__PURE__ */ jsx(DocumentToolbar, {}),
+			/* @__PURE__ */ jsx(ConnectionToolbar, {
+				state,
+				onRename: callbacks.setName,
+				onSetStatus: callbacks.setStatus,
+				onDelete: () => showDeleteNodeModal(document.header.id)
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "mx-auto w-full max-w-2xl p-6",
+				children: /* @__PURE__ */ jsx(ConnectionForm, {
+					state,
+					callbacks
+				})
+			})
+		]
+	});
+}
+function Editor() {
+	return /* @__PURE__ */ jsx(DocumentErrorBoundary, {
+		documentId: useSelectedDocumentId(),
+		children: /* @__PURE__ */ jsx(ConnectionEditor, {})
+	});
+}
+//#endregion
+export { Editor as default };
+
+//# sourceMappingURL=editor-DJX9NpD5.js.map

package/dist/browser/editor-DJX9NpD5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-DJX9NpD5.js","names":[],"sources":["../../editors/connection-editor/ConnectionToolbar.tsx","../../editors/connection-editor/editor.tsx"],"sourcesContent":["// Connection identity and state, in the same shape as the workflow editor's\n// toolbar: name, connector, status, and the one destructive action.\nimport { useEffect, useState } from \"react\";\nimport type { ConnectionState } from \"document-models/connection\";\nimport {\n  fetchPieceCatalog,\n  type PieceSummary,\n} from \"../workflow-editor/runtime-api.js\";\nimport { packageFromConnectorId } from \"./piece-auth.js\";\nimport { CONNECTION_STATUS_STYLES } from \"./status.js\";\n\nexport function ConnectionToolbar(props: {\n  state: ConnectionState;\n  onRename: (name: string) => void;\n  onSetStatus: (status: \"OK\" | \"REVOKED\") => void;\n  onDelete: () => void;\n}) {\n  const { state } = props;\n  const [catalog, setCatalog] = useState<PieceSummary[] | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    // Cached in the runtime client, so this costs nothing the form hasn't paid.\n    fetchPieceCatalog().then(\n      (pieces) => {\n        if (!cancelled) setCatalog(pieces);\n      },\n      () => {\n        if (!cancelled) setCatalog([]);\n      },\n    );\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  const packageName = packageFromConnectorId(state.connectorId);\n  const piece = catalog?.find((entry) => entry.name === packageName);\n  const revoked = state.status === \"REVOKED\";\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-solid border-slate-200 px-4 py-2\">\n      <input\n        key={state.name}\n        className=\"min-w-0 max-w-72 rounded border border-transparent px-1 py-0.5 text-sm font-semibold text-slate-800 hover:border-slate-200 focus:border-slate-300 focus:outline-none\"\n        defaultValue={state.name}\n        placeholder=\"Untitled connection\"\n        spellCheck={false}\n        aria-label=\"Connection name\"\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\") event.currentTarget.blur();\n        }}\n        onBlur={(event) => {\n          const name = event.target.value.trim();\n          if (name && name !== state.name) props.onRename(name);\n        }}\n      />\n      {piece ? (\n        <span className=\"flex min-w-0 items-center gap-1.5\">\n          <img\n            src={piece.logoUrl}\n            alt=\"\"\n            className=\"h-4 w-4 shrink-0 object-contain\"\n          />\n          <span className=\"truncate text-xs text-slate-600\">\n            {piece.displayName}\n          </span>\n        </span>\n      ) : packageName ? (\n        <span className=\"truncate text-xs text-slate-400\">{packageName}</span>\n      ) : (\n        <span className=\"text-xs text-slate-400\">No connector picked</span>\n      )}\n      <span\n        className={`rounded px-2 py-0.5 text-[11px] font-semibold ${CONNECTION_STATUS_STYLES[state.status]}`}\n      >\n        {state.status}\n      </span>\n      {state.accountLabel ? (\n        <span className=\"truncate text-xs text-slate-500\">\n          {state.accountLabel}\n        </span>\n      ) : null}\n      <span className=\"ml-auto flex items-center gap-3\">\n        {state.lastCheckedAt ? (\n          <span\n            className=\"text-[11px] text-slate-400\"\n            title={new Date(state.lastCheckedAt).toLocaleString()}\n          >\n            Checked {new Date(state.lastCheckedAt).toLocaleDateString()}\n          </span>\n        ) : (\n          <span className=\"text-[11px] text-slate-400\">Never checked</span>\n        )}\n        <button\n          type=\"button\"\n          className=\"rounded border border-solid border-slate-300 bg-white px-2 py-1 text-xs font-medium text-slate-700 hover:border-slate-400 hover:bg-slate-50\"\n          onClick={() => props.onSetStatus(revoked ? \"OK\" : \"REVOKED\")}\n        >\n          {revoked ? \"Reactivate\" : \"Revoke\"}\n        </button>\n        <button\n          type=\"button\"\n          className=\"rounded border border-solid border-red-200 bg-white px-2 py-1 text-xs font-medium text-red-600 hover:border-red-300 hover:bg-red-50\"\n          onClick={props.onDelete}\n        >\n          Delete\n        </button>\n      </span>\n    </div>\n  );\n}\n","import { DocumentToolbar } from \"@powerhousedao/design-system/connect\";\nimport {\n  showDeleteNodeModal,\n  useSelectedDocumentId,\n} from \"@powerhousedao/reactor-browser\";\nimport { useSelectedConnectionDocument } from \"document-models/connection\";\nimport { DocumentErrorBoundary } from \"../shared/DocumentErrorBoundary.js\";\nimport { useSyncWorkflowRuntimeUrl } from \"../workflow-editor/use-runtime-url.js\";\nimport { connectionCallbacks } from \"./connection-callbacks.js\";\nimport { ConnectionForm } from \"./connection-form.js\";\nimport { ConnectionToolbar } from \"./ConnectionToolbar.js\";\n\nfunction ConnectionEditor() {\n  useSyncWorkflowRuntimeUrl();\n  const [document, dispatch] = useSelectedConnectionDocument();\n  const state = document.state.global;\n\n  const callbacks = connectionCallbacks(state, dispatch);\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col bg-background\">\n      <DocumentToolbar />\n      <ConnectionToolbar\n        state={state}\n        onRename={callbacks.setName}\n        onSetStatus={callbacks.setStatus}\n        onDelete={() => showDeleteNodeModal(document.header.id)}\n      />\n      <div className=\"mx-auto w-full max-w-2xl p-6\">\n        <ConnectionForm state={state} callbacks={callbacks} />\n      </div>\n    </div>\n  );\n}\n\n// A drive node can point at a document the reactor cannot serve; the document\n// hooks throw for it. The boundary keeps that failure inside the editor pane.\nexport default function Editor() {\n  const documentId = useSelectedDocumentId();\n  return (\n    <DocumentErrorBoundary documentId={documentId}>\n      <ConnectionEditor />\n    </DocumentErrorBoundary>\n  );\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,kBAAkB,OAK/B;CACD,MAAM,EAAE,UAAU;CAClB,MAAM,CAAC,SAAS,cAAc,SAAgC,KAAK;AAEnE,iBAAgB;EACd,IAAI,YAAY;AAEhB,qBAAmB,CAAC,MACjB,WAAW;AACV,OAAI,CAAC,UAAW,YAAW,OAAO;WAE9B;AACJ,OAAI,CAAC,UAAW,YAAW,EAAE,CAAC;IAEjC;AACD,eAAa;AACX,eAAY;;IAEb,EAAE,CAAC;CAEN,MAAM,cAAc,uBAAuB,MAAM,YAAY;CAC7D,MAAM,QAAQ,SAAS,MAAM,UAAU,MAAM,SAAS,YAAY;CAClE,MAAM,UAAU,MAAM,WAAW;AAEjC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,SAAD;IAEE,WAAU;IACV,cAAc,MAAM;IACpB,aAAY;IACZ,YAAY;IACZ,cAAW;IACX,YAAY,UAAU;AACpB,SAAI,MAAM,QAAQ,QAAS,OAAM,cAAc,MAAM;;IAEvD,SAAS,UAAU;KACjB,MAAM,OAAO,MAAM,OAAO,MAAM,MAAM;AACtC,SAAI,QAAQ,SAAS,MAAM,KAAM,OAAM,SAAS,KAAK;;IAEvD,EAbK,MAAM,KAaX;GACD,QACC,qBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,oBAAC,OAAD;KACE,KAAK,MAAM;KACX,KAAI;KACJ,WAAU;KACV,CAAA,EACF,oBAAC,QAAD;KAAM,WAAU;eACb,MAAM;KACF,CAAA,CACF;QACL,cACF,oBAAC,QAAD;IAAM,WAAU;cAAmC;IAAmB,CAAA,GAEtE,oBAAC,QAAD;IAAM,WAAU;cAAyB;IAA0B,CAAA;GAErE,oBAAC,QAAD;IACE,WAAW,iDAAiD,yBAAyB,MAAM;cAE1F,MAAM;IACF,CAAA;GACN,MAAM,eACL,oBAAC,QAAD;IAAM,WAAU;cACb,MAAM;IACF,CAAA,GACL;GACJ,qBAAC,QAAD;IAAM,WAAU;cAAhB;KACG,MAAM,gBACL,qBAAC,QAAD;MACE,WAAU;MACV,OAAO,IAAI,KAAK,MAAM,cAAc,CAAC,gBAAgB;gBAFvD,CAGC,YACU,IAAI,KAAK,MAAM,cAAc,CAAC,oBAAoB,CACtD;UAEP,oBAAC,QAAD;MAAM,WAAU;gBAA6B;MAAoB,CAAA;KAEnE,oBAAC,UAAD;MACE,MAAK;MACL,WAAU;MACV,eAAe,MAAM,YAAY,UAAU,OAAO,UAAU;gBAE3D,UAAU,eAAe;MACnB,CAAA;KACT,oBAAC,UAAD;MACE,MAAK;MACL,WAAU;MACV,SAAS,MAAM;gBAChB;MAEQ,CAAA;KACJ;;GACH;;;;;ACjGV,SAAS,mBAAmB;AAC1B,4BAA2B;CAC3B,MAAM,CAAC,UAAU,YAAY,+BAA+B;CAC5D,MAAM,QAAQ,SAAS,MAAM;CAE7B,MAAM,YAAY,oBAAoB,OAAO,SAAS;AAEtD,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,iBAAD,EAAmB,CAAA;GACnB,oBAAC,mBAAD;IACS;IACP,UAAU,UAAU;IACpB,aAAa,UAAU;IACvB,gBAAgB,oBAAoB,SAAS,OAAO,GAAG;IACvD,CAAA;GACF,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,gBAAD;KAAuB;KAAkB;KAAa,CAAA;IAClD,CAAA;GACF;;;AAMV,SAAwB,SAAS;AAE/B,QACE,oBAAC,uBAAD;EAAuB,YAFN,uBAAuB;YAGtC,oBAAC,kBAAD,EAAoB,CAAA;EACE,CAAA"}