@meetreeve/ui 0.9.0 → 0.10.0

package/dist/index.js

@@ -1427,7 +1427,17 @@ var DEFAULT_GRANTS_LOAD_ERROR = "Couldn't load sharing. Please try again.";
 var DEFAULT_GRANT_ERROR = "Couldn't share. Please try again.";
 var DEFAULT_REVOKE_ERROR = "Couldn't revoke access. Please try again.";
 var DEFAULT_ORG_DISABLED_REASON = "Org-wide connections aren't available to you.";
+var DEFAULT_CREDENTIAL_ERROR = "Couldn't save that credential. Please try again.";
+var DEFAULT_CREDENTIAL_TEST_ERROR = "Couldn't test that credential. Please try again.";
+var UNVERIFIABLE_CREDENTIAL_NOTE = "We can't verify this automatically \u2014 saving it is safe, but nothing has checked it yet.";
 var SKELETON_COUNT = 3;
+var UNGROUNDED_PLACEHOLDER = /\{\{[^}]*\}\}/;
+function hasUngroundedPlaceholder(text) {
+  return UNGROUNDED_PLACEHOLDER.test(text);
+}
+function isDevEnvironment() {
+  return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+}
 function capabilityLabel(capability) {
   if (capability === "read") return "Read only";
   if (capability === "write") return "Write only";
@@ -1464,6 +1474,8 @@ function ConnectorPicker({
   const [loadError, setLoadError] = (0, import_react9.useState)(null);
   const [uiState, setUiState] = (0, import_react9.useState)({});
   const grantsSupported = typeof client.listGrants === "function" && typeof client.grant === "function" && typeof client.revokeGrant === "function";
+  const credentialsSupported = typeof client.submitCredentials === "function";
+  const credentialTestSupported = typeof client.testCredentials === "function";
   const clientRef = (0, import_react9.useRef)(client);
   clientRef.current = client;
   const purposeRef = (0, import_react9.useRef)(purpose);
@@ -1547,6 +1559,38 @@ function ConnectorPicker({
     },
     [load]
   );
+  const handleSubmitCredentials = (0, import_react9.useCallback)(
+    async (entry, values, kind) => {
+      setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "connecting" } }));
+      try {
+        await clientRef.current.submitCredentials?.(entry, values, { kind });
+        const list = await load();
+        const updated = list?.find((e) => e.slug === entry.slug) ?? null;
+        setUiState((prev) => {
+          const next = { ...prev };
+          delete next[entry.slug];
+          return next;
+        });
+        if (updated?.connection.status === "connected") {
+          onConnectedRef.current?.(updated);
+        } else {
+          throw new Error(DEFAULT_CREDENTIAL_ERROR);
+        }
+      } catch (err) {
+        setUiState((prev) => {
+          const next = { ...prev };
+          delete next[entry.slug];
+          return next;
+        });
+        throw err;
+      }
+    },
+    [load]
+  );
+  const testCredentials = (0, import_react9.useCallback)(
+    (entry, values) => clientRef.current.testCredentials?.(entry, values) ?? Promise.resolve({ valid: null }),
+    []
+  );
   const handleDisconnect = (0, import_react9.useCallback)(
     async (entry) => {
       setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "disconnecting" } }));
@@ -1619,8 +1663,12 @@ function ConnectorPicker({
           ui: uiState[entry.slug],
           layout,
           grantsSupported,
+          credentialsSupported,
+          credentialTestSupported,
           onConnect: handleConnect,
           onDisconnect: handleDisconnect,
+          onSubmitCredentials: handleSubmitCredentials,
+          onTestCredentials: testCredentials,
           listGrants,
           addGrant,
           revokeGrant
@@ -1638,8 +1686,12 @@ function ConnectorPicker({
           layout,
           shared: true,
           grantsSupported,
+          credentialsSupported,
+          credentialTestSupported,
           onConnect: handleConnect,
           onDisconnect: handleDisconnect,
+          onSubmitCredentials: handleSubmitCredentials,
+          onTestCredentials: testCredentials,
           listGrants,
           addGrant,
           revokeGrant
@@ -1655,8 +1707,12 @@ function ConnectorTile({
   layout,
   shared = false,
   grantsSupported,
+  credentialsSupported,
+  credentialTestSupported,
   onConnect,
   onDisconnect,
+  onSubmitCredentials,
+  onTestCredentials,
   listGrants,
   addGrant,
   revokeGrant
@@ -1667,6 +1723,11 @@ function ConnectorTile({
   const errorMessage = ui?.kind === "error" ? ui.message : null;
   const [kind, setKind] = (0, import_react9.useState)("personal");
   const [sharingOpen, setSharingOpen] = (0, import_react9.useState)(false);
+  const [setupOpen, setSetupOpen] = (0, import_react9.useState)(false);
+  const credentialFields = entry.credential_fields ?? [];
+  const pasteSupported = credentialsSupported && credentialFields.length > 0;
+  const guide = entry.guide ?? null;
+  const canSetUp = !isConnected && (pasteSupported || guide !== null);
   const orgPermitted = entry.org_connect?.permitted === true;
   const orgDisabledReason = entry.org_connect?.reason || DEFAULT_ORG_DISABLED_REASON;
   const attribution = ownerLabel(entry);
@@ -1793,18 +1854,55 @@ function ConnectorTile({
                 children: sharingOpen ? "Hide sharing" : "Manage sharing"
               }
             )
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "button",
-            {
-              type: "button",
-              "data-testid": `connector-connect-${entry.slug}`,
-              onClick: () => onConnect(entry, kind),
-              disabled: isConnecting,
-              className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
-              children: isConnecting ? "Connecting\u2026" : "Connect"
-            }
-          )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                type: "button",
+                "data-testid": `connector-connect-${entry.slug}`,
+                onClick: () => onConnect(entry, kind),
+                disabled: isConnecting,
+                className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
+                children: isConnecting ? "Connecting\u2026" : "Connect"
+              }
+            ),
+            canSetUp && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                type: "button",
+                "data-testid": `connector-setup-toggle-${entry.slug}`,
+                "aria-expanded": setupOpen,
+                "aria-controls": `connector-setup-panel-${entry.slug}`,
+                onClick: () => setSetupOpen((open) => !open),
+                className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground hover:bg-foreground/10",
+                children: setupOpen ? "Hide setup" : pasteSupported ? "Use a token instead" : "Setup guide"
+              }
+            )
+          ] })
         ] }),
+        canSetUp && setupOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "div",
+          {
+            id: `connector-setup-panel-${entry.slug}`,
+            "data-testid": `connector-setup-panel-${entry.slug}`,
+            className: "mt-2 flex flex-col gap-3 rounded-md border border-border bg-foreground/5 p-2",
+            children: [
+              guide && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SetupGuidePanel, { entry, guide, showVerify: !pasteSupported }),
+              pasteSupported && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                CredentialForm,
+                {
+                  entry,
+                  fields: credentialFields,
+                  kind,
+                  verify: guide?.verify ?? null,
+                  testSupported: credentialTestSupported,
+                  onSubmitCredentials,
+                  onTestCredentials
+                }
+              )
+            ]
+          }
+        ),
         canManageSharing && sharingOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ManageSharing,
           {
@@ -1818,6 +1916,333 @@ function ConnectorTile({
     }
   );
 }
+function groundGuide(guide) {
+  const ungrounded = [];
+  const keep = (text) => {
+    if (!hasUngroundedPlaceholder(text)) return true;
+    ungrounded.push(text);
+    return false;
+  };
+  const prerequisites = guide.prerequisites.filter(keep);
+  const steps = guide.steps.filter(
+    (step) => keep(step.text) && (!step.copyable || keep(step.copyable))
+  );
+  const scopeNote = keep(guide.scope_note) ? guide.scope_note : null;
+  const verify = keep(guide.verify) ? guide.verify : null;
+  return { prerequisites, steps, scopeNote, verify, ungrounded };
+}
+function CopyableValue({ value, testId }) {
+  const [copied, setCopied] = (0, import_react9.useState)(false);
+  const timer = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  const copy = (0, import_react9.useCallback)(async () => {
+    try {
+      if (typeof navigator.clipboard?.writeText !== "function") {
+        throw new Error("clipboard unavailable");
+      }
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), 1500);
+    } catch {
+      setCopied(false);
+    }
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "mt-1 flex items-center gap-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "code",
+      {
+        "data-testid": `${testId}-value`,
+        className: "min-w-0 flex-1 truncate rounded bg-foreground/10 px-1.5 py-0.5 text-[11px]",
+        children: value
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        type: "button",
+        "data-testid": testId,
+        onClick: () => void copy(),
+        className: "shrink-0 rounded-md px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground hover:bg-foreground/10",
+        children: copied ? "Copied" : "Copy"
+      }
+    )
+  ] });
+}
+function SetupGuidePanel({
+  entry,
+  guide,
+  showVerify
+}) {
+  const { prerequisites, steps, scopeNote, verify, ungrounded } = groundGuide(guide);
+  const leaked = ungrounded.length > 0;
+  (0, import_react9.useEffect)(() => {
+    if (!leaked) return;
+    console.error(
+      `[ConnectorPicker] setup guide for "${entry.slug}" arrived with ungrounded placeholders:`,
+      ungrounded
+    );
+  }, [entry.slug, guide, leaked]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-testid": `connector-guide-${entry.slug}`, className: "flex flex-col gap-2", children: [
+    leaked && isDevEnvironment() && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "p",
+      {
+        role: "alert",
+        "data-testid": `connector-guide-ungrounded-${entry.slug}`,
+        className: "rounded-md border border-destructive/30 bg-destructive/5 px-2 py-1 text-xs text-destructive",
+        children: [
+          "Setup guide arrived with unresolved placeholders and those lines were dropped: ",
+          ungrounded.join(" \xB7 ")
+        ]
+      }
+    ),
+    prerequisites.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h4", { className: "text-xs font-medium", children: "Before you start" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "ul",
+        {
+          "data-testid": `connector-guide-prerequisites-${entry.slug}`,
+          className: "mt-1 list-disc pl-4 text-xs text-muted-foreground",
+          children: prerequisites.map((item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { children: item }, item))
+        }
+      )
+    ] }),
+    steps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "ol",
+      {
+        "data-testid": `connector-guide-steps-${entry.slug}`,
+        className: "list-decimal pl-4 text-xs",
+        children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { className: "mt-1 first:mt-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: step.text }),
+          step.copyable && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            CopyableValue,
+            {
+              value: step.copyable,
+              testId: `connector-guide-copy-${entry.slug}-${index}`
+            }
+          )
+        ] }, step.text))
+      }
+    ),
+    scopeNote && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "p",
+      {
+        "data-testid": `connector-guide-scope-note-${entry.slug}`,
+        className: "rounded-md border border-primary/30 bg-primary/5 px-2 py-1 text-xs font-medium",
+        children: scopeNote
+      }
+    ),
+    showVerify && verify && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "p",
+      {
+        "data-testid": `connector-guide-verify-${entry.slug}`,
+        className: "text-xs text-muted-foreground",
+        children: verify
+      }
+    )
+  ] });
+}
+function CredentialForm({
+  entry,
+  fields,
+  kind,
+  verify,
+  testSupported,
+  onSubmitCredentials,
+  onTestCredentials
+}) {
+  const [values, setValues] = (0, import_react9.useState)(() => {
+    const initial = {};
+    for (const field of fields) {
+      if (field.defaultValue) initial[field.key] = field.defaultValue;
+    }
+    return initial;
+  });
+  const [busy, setBusy] = (0, import_react9.useState)(false);
+  const [testing, setTesting] = (0, import_react9.useState)(false);
+  const [error, setError] = (0, import_react9.useState)(null);
+  const [result, setResult] = (0, import_react9.useState)(null);
+  const entryRef = (0, import_react9.useRef)(entry);
+  entryRef.current = entry;
+  const updateField = (0, import_react9.useCallback)((key, value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    setError(null);
+    setResult(null);
+  }, []);
+  const missingRequired = fields.filter((field) => field.required !== false).some((field) => !values[field.key]?.trim());
+  const failedTest = result?.valid === false;
+  const untested = testSupported && result === null;
+  const fieldErrors = result?.field_errors ?? null;
+  const handleTest = (0, import_react9.useCallback)(async () => {
+    setTesting(true);
+    setError(null);
+    setResult(null);
+    try {
+      setResult(await onTestCredentials(entryRef.current, values));
+    } catch (err) {
+      setError(errorMessageFrom(err, DEFAULT_CREDENTIAL_TEST_ERROR));
+    } finally {
+      setTesting(false);
+    }
+  }, [onTestCredentials, values]);
+  const handleSubmit = (0, import_react9.useCallback)(async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      await onSubmitCredentials(entryRef.current, values, kind);
+    } catch (err) {
+      setError(errorMessageFrom(err, DEFAULT_CREDENTIAL_ERROR));
+    } finally {
+      setBusy(false);
+    }
+  }, [kind, onSubmitCredentials, values]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "form",
+    {
+      "data-testid": `connector-credential-form-${entry.slug}`,
+      onSubmit: (event) => {
+        event.preventDefault();
+        if (missingRequired || busy || testing || failedTest || untested) return;
+        void handleSubmit();
+      },
+      className: "flex flex-col gap-2",
+      children: [
+        fields.map((field) => {
+          const inputId = `connector-credential-${entry.slug}-${field.key}`;
+          const fieldError = fieldErrors?.[field.key] ?? null;
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { htmlFor: inputId, className: "text-xs font-medium", children: [
+              field.label,
+              field.required !== false && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "input",
+              {
+                id: inputId,
+                "data-testid": `connector-credential-input-${entry.slug}-${field.key}`,
+                type: field.type ?? "text",
+                value: values[field.key] ?? "",
+                onChange: (event) => updateField(field.key, event.target.value),
+                placeholder: field.placeholder ?? void 0,
+                required: field.required !== false,
+                disabled: busy || testing,
+                autoComplete: "off",
+                "aria-invalid": fieldError ? true : void 0,
+                "aria-describedby": fieldError ? `${inputId}-error` : void 0,
+                className: cn(
+                  "rounded-md border bg-transparent px-1.5 py-1 text-xs disabled:opacity-50",
+                  fieldError ? "border-destructive" : "border-border"
+                )
+              }
+            ),
+            fieldError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "p",
+              {
+                id: `${inputId}-error`,
+                "data-testid": `connector-credential-field-error-${entry.slug}-${field.key}`,
+                className: "text-xs text-destructive",
+                children: fieldError
+              }
+            )
+          ] }, field.key);
+        }),
+        verify && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "p",
+          {
+            "data-testid": `connector-guide-verify-${entry.slug}`,
+            className: "text-xs text-muted-foreground",
+            children: verify
+          }
+        ),
+        result && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CredentialTestResult, { entry, result }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "p",
+          {
+            role: "alert",
+            "data-testid": `connector-credential-error-${entry.slug}`,
+            className: "text-xs text-destructive",
+            children: error
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-end gap-1.5", children: [
+          testSupported && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              type: "button",
+              "data-testid": `connector-credential-test-${entry.slug}`,
+              onClick: () => void handleTest(),
+              disabled: missingRequired || busy || testing,
+              className: "rounded-md border border-border px-2.5 py-1 text-xs font-medium disabled:opacity-50",
+              children: testing ? "Testing\u2026" : "Test connection"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              type: "submit",
+              "data-testid": `connector-credential-save-${entry.slug}`,
+              disabled: missingRequired || busy || testing || failedTest || untested,
+              title: failedTest ? "That credential failed its own check \u2014 fix it and test again." : untested ? "Test the credential before saving it." : void 0,
+              className: "rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
+              children: busy ? "Saving\u2026" : "Save credential"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function CredentialTestResult({
+  entry,
+  result
+}) {
+  if (result.valid === true) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        role: "status",
+        "data-testid": `connector-credential-test-pass-${entry.slug}`,
+        className: "rounded-md border border-primary/30 bg-primary/5 px-2 py-1 text-xs",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: result.account_name ? `Verified \u2014 connected as ${result.account_name}.` : "Verified \u2014 these credentials work." }),
+          result.permissions_note && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "p",
+            {
+              "data-testid": `connector-credential-permissions-${entry.slug}`,
+              className: "mt-0.5 font-medium",
+              children: result.permissions_note
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (result.valid === false) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "p",
+      {
+        role: "alert",
+        "data-testid": `connector-credential-test-fail-${entry.slug}`,
+        className: "rounded-md border border-destructive/30 bg-destructive/5 px-2 py-1 text-xs text-destructive",
+        children: result.error || "That credential didn't pass its check."
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "p",
+    {
+      role: "status",
+      "data-testid": `connector-credential-test-unverified-${entry.slug}`,
+      className: "rounded-md border border-border px-2 py-1 text-xs text-muted-foreground",
+      children: UNVERIFIABLE_CREDENTIAL_NOTE
+    }
+  );
+}
 function ManageSharing({
   entry,
   listGrants,