@meetreeve/ui 0.8.1 → 0.9.0

package/dist/index.js

@@ -1423,6 +1423,10 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_CONNECT_ERROR = "Couldn't start the connection. Please try again.";
 var DEFAULT_DISCONNECT_ERROR = "Couldn't disconnect. Please try again.";
 var DEFAULT_LOAD_ERROR = "Couldn't load connections. Please try again.";
+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 SKELETON_COUNT = 3;
 function capabilityLabel(capability) {
   if (capability === "read") return "Read only";
@@ -1437,6 +1441,17 @@ function formatSince(since) {
 function errorMessageFrom(err, fallback) {
   return err instanceof Error && err.message ? err.message : fallback;
 }
+function ownerLabel(entry) {
+  const connection = entry.connection;
+  if (connection.status !== "connected") return null;
+  if (connection.kind === "org") return "Org";
+  if (connection.owned_by_viewer) return "Yours";
+  if (connection.shared_by) return `Shared by ${connection.shared_by.name}`;
+  return null;
+}
+function isSharedWithViewer(entry) {
+  return entry.connection.status === "connected" && Boolean(entry.connection.shared_by) && !entry.connection.owned_by_viewer;
+}
 function ConnectorPicker({
   client,
   purpose,
@@ -1448,6 +1463,7 @@ function ConnectorPicker({
   const [entries, setEntries] = (0, import_react9.useState)(null);
   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 clientRef = (0, import_react9.useRef)(client);
   clientRef.current = client;
   const purposeRef = (0, import_react9.useRef)(purpose);
@@ -1506,10 +1522,10 @@ function ConnectorPicker({
     };
   }, [gated, refreshAfterReturn]);
   const handleConnect = (0, import_react9.useCallback)(
-    async (entry) => {
+    async (entry, kind) => {
       setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "connecting" } }));
       try {
-        const result = await clientRef.current.connect(entry);
+        const result = await clientRef.current.connect(entry, { kind });
         if (result?.connect_url) {
           window.open(result.connect_url, "_blank", "noopener,noreferrer");
           return;
@@ -1549,121 +1565,429 @@ function ConnectorPicker({
     },
     [load]
   );
+  const listGrants = (0, import_react9.useCallback)(
+    (entry) => clientRef.current.listGrants?.(entry) ?? Promise.resolve([]),
+    []
+  );
+  const addGrant = (0, import_react9.useCallback)(
+    (entry, input) => clientRef.current.grant?.(entry, input) ?? Promise.resolve(),
+    []
+  );
+  const revokeGrant = (0, import_react9.useCallback)(
+    (entry, grantId) => clientRef.current.revokeGrant?.(entry, grantId) ?? Promise.resolve(),
+    []
+  );
   if (gated) return null;
   const containerClassName = cn(
     "flex flex-col",
     layout === "tiles" ? "gap-3 sm:grid sm:grid-cols-2 lg:grid-cols-3" : "divide-y divide-border"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-testid": "connector-picker", "data-layout": layout, className: containerClassName, children: [
-    entries === null && !loadError && Array.from({ length: SKELETON_COUNT }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-      "div",
-      {
-        "data-testid": "connector-picker-skeleton-item",
-        "aria-hidden": "true",
-        className: "flex items-center gap-3 rounded-lg border border-border p-3",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "h-8 w-8 shrink-0 animate-pulse rounded bg-foreground/10" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "h-3 flex-1 animate-pulse rounded bg-foreground/10" })
-        ]
-      },
-      i
-    )),
-    loadError && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-      "div",
-      {
-        role: "alert",
-        "data-testid": "connector-picker-load-error",
-        className: "flex items-center justify-between gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: loadError }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => void load(), className: "shrink-0 underline", children: "Retry" })
-        ]
-      }
-    ),
-    entries !== null && entries.length === 0 && !loadError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { "data-testid": "connector-picker-empty", className: "text-sm text-muted-foreground", children: "No connections available." }),
-    entries?.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      ConnectorTile,
-      {
-        entry,
-        ui: uiState[entry.slug],
-        layout,
-        onConnect: handleConnect,
-        onDisconnect: handleDisconnect
-      },
-      entry.slug
-    ))
+  const ownEntries = entries?.filter((entry) => !isSharedWithViewer(entry)) ?? null;
+  const sharedEntries = entries?.filter(isSharedWithViewer) ?? [];
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-testid": "connector-picker", "data-layout": layout, className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: containerClassName, children: [
+      entries === null && !loadError && Array.from({ length: SKELETON_COUNT }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "div",
+        {
+          "data-testid": "connector-picker-skeleton-item",
+          "aria-hidden": "true",
+          className: "flex items-center gap-3 rounded-lg border border-border p-3",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "h-8 w-8 shrink-0 animate-pulse rounded bg-foreground/10" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "h-3 flex-1 animate-pulse rounded bg-foreground/10" })
+          ]
+        },
+        i
+      )),
+      loadError && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "div",
+        {
+          role: "alert",
+          "data-testid": "connector-picker-load-error",
+          className: "flex items-center justify-between gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: loadError }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => void load(), className: "shrink-0 underline", children: "Retry" })
+          ]
+        }
+      ),
+      entries !== null && entries.length === 0 && !loadError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { "data-testid": "connector-picker-empty", className: "text-sm text-muted-foreground", children: "No connections available." }),
+      ownEntries?.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        ConnectorTile,
+        {
+          entry,
+          ui: uiState[entry.slug],
+          layout,
+          grantsSupported,
+          onConnect: handleConnect,
+          onDisconnect: handleDisconnect,
+          listGrants,
+          addGrant,
+          revokeGrant
+        },
+        entry.slug
+      ))
+    ] }),
+    sharedEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { "data-testid": "connector-picker-shared-with-me", className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Shared with me" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: containerClassName, children: sharedEntries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        ConnectorTile,
+        {
+          entry,
+          ui: uiState[entry.slug],
+          layout,
+          shared: true,
+          grantsSupported,
+          onConnect: handleConnect,
+          onDisconnect: handleDisconnect,
+          listGrants,
+          addGrant,
+          revokeGrant
+        },
+        entry.slug
+      )) })
+    ] })
   ] });
 }
 function ConnectorTile({
   entry,
   ui,
   layout,
+  shared = false,
+  grantsSupported,
   onConnect,
-  onDisconnect
+  onDisconnect,
+  listGrants,
+  addGrant,
+  revokeGrant
 }) {
   const isConnected = entry.connection.status === "connected";
   const isConnecting = ui?.kind === "connecting";
   const isDisconnecting = ui?.kind === "disconnecting";
   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 orgPermitted = entry.org_connect?.permitted === true;
+  const orgDisabledReason = entry.org_connect?.reason || DEFAULT_ORG_DISABLED_REASON;
+  const attribution = ownerLabel(entry);
+  const canDisconnect = isConnected && !shared;
+  const canManageSharing = isConnected && entry.connection.owned_by_viewer === true && grantsSupported;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       "data-testid": `connector-tile-${entry.slug}`,
       "data-connected": isConnected || void 0,
       "data-deprecated": entry.deprecated || void 0,
-      className: cn("flex items-center gap-3 p-3", layout === "tiles" && "rounded-lg border border-border"),
+      className: cn("flex flex-col p-3", layout === "tiles" && "rounded-lg border border-border"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BrandGlyph, { brand: { name: entry.name, logo: entry.logo }, size: "lg" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "truncate text-sm font-medium", children: entry.name }),
-            entry.deprecated && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "span",
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BrandGlyph, { brand: { name: entry.name, logo: entry.logo }, size: "lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "truncate text-sm font-medium", children: entry.name }),
+              entry.deprecated && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "span",
+                {
+                  "data-testid": `connector-deprecated-${entry.slug}`,
+                  className: "shrink-0 rounded-full bg-foreground/10 px-2 py-0.5 text-[11px] text-muted-foreground",
+                  children: "No longer available"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "data-testid": `connector-capability-${entry.slug}`, children: capabilityLabel(entry.capability) }),
+              entry.category && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", children: "\xB7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate", children: entry.category })
+              ] })
+            ] }),
+            isConnected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "p",
               {
-                "data-testid": `connector-deprecated-${entry.slug}`,
-                className: "shrink-0 rounded-full bg-foreground/10 px-2 py-0.5 text-[11px] text-muted-foreground",
-                children: "No longer available"
+                "data-testid": `connector-connected-since-${entry.slug}`,
+                className: "text-xs text-muted-foreground",
+                children: entry.connection.since ? `Connected since ${formatSince(entry.connection.since)}` : "Connected"
               }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "data-testid": `connector-capability-${entry.slug}`, children: capabilityLabel(entry.capability) }),
-            entry.category && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", children: "\xB7" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate", children: entry.category })
-            ] })
+            ),
+            attribution && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "p",
+              {
+                "data-testid": `connector-owner-${entry.slug}`,
+                className: "text-xs text-muted-foreground",
+                children: attribution
+              }
+            ),
+            !isConnected && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              "div",
+              {
+                "data-testid": `connector-kind-toggle-${entry.slug}`,
+                role: "group",
+                "aria-label": "Connect as",
+                className: "mt-1 flex items-center gap-1",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      "data-testid": `connector-kind-personal-${entry.slug}`,
+                      "aria-pressed": kind === "personal",
+                      disabled: isConnecting,
+                      onClick: () => setKind("personal"),
+                      className: cn(
+                        "rounded-full border px-2 py-0.5 text-[11px]",
+                        kind === "personal" ? "border-primary bg-primary/10 font-medium" : "border-border text-muted-foreground",
+                        "disabled:opacity-50"
+                      ),
+                      children: "Personal"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      "data-testid": `connector-kind-org-${entry.slug}`,
+                      "aria-pressed": kind === "org",
+                      disabled: isConnecting || !orgPermitted,
+                      title: orgPermitted ? void 0 : orgDisabledReason,
+                      onClick: () => setKind("org"),
+                      className: cn(
+                        "rounded-full border px-2 py-0.5 text-[11px]",
+                        kind === "org" ? "border-primary bg-primary/10 font-medium" : "border-border text-muted-foreground",
+                        "disabled:opacity-50"
+                      ),
+                      children: [
+                        "Org",
+                        !orgPermitted && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "sr-only", children: [
+                          " (",
+                          orgDisabledReason,
+                          ")"
+                        ] })
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { role: "alert", "data-testid": `connector-error-${entry.slug}`, className: "text-xs text-destructive", children: errorMessage })
           ] }),
-          isConnected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "p",
+          isConnected ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
+            canDisconnect && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                type: "button",
+                "data-testid": `connector-disconnect-${entry.slug}`,
+                onClick: () => onDisconnect(entry),
+                disabled: isDisconnecting,
+                className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-destructive hover:bg-destructive/10 disabled:opacity-50",
+                children: isDisconnecting ? "Disconnecting\u2026" : "Disconnect"
+              }
+            ),
+            canManageSharing && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                type: "button",
+                "data-testid": `connector-manage-sharing-${entry.slug}`,
+                "aria-expanded": sharingOpen,
+                onClick: () => setSharingOpen((open) => !open),
+                className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground hover:bg-foreground/10",
+                children: sharingOpen ? "Hide sharing" : "Manage sharing"
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
             {
-              "data-testid": `connector-connected-since-${entry.slug}`,
-              className: "text-xs text-muted-foreground",
-              children: entry.connection.since ? `Connected since ${formatSince(entry.connection.since)}` : "Connected"
+              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"
             }
-          ),
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { role: "alert", "data-testid": `connector-error-${entry.slug}`, className: "text-xs text-destructive", children: errorMessage })
+          )
         ] }),
-        isConnected ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "button",
+        canManageSharing && sharingOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ManageSharing,
           {
-            type: "button",
-            "data-testid": `connector-disconnect-${entry.slug}`,
-            onClick: () => onDisconnect(entry),
-            disabled: isDisconnecting,
-            className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-destructive hover:bg-destructive/10 disabled:opacity-50",
-            children: isDisconnecting ? "Disconnecting\u2026" : "Disconnect"
+            entry,
+            listGrants,
+            addGrant,
+            revokeGrant
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "button",
+        )
+      ]
+    }
+  );
+}
+function ManageSharing({
+  entry,
+  listGrants,
+  addGrant,
+  revokeGrant
+}) {
+  const [grants, setGrants] = (0, import_react9.useState)(null);
+  const [error, setError] = (0, import_react9.useState)(null);
+  const [busy, setBusy] = (0, import_react9.useState)(false);
+  const [granteeType, setGranteeType] = (0, import_react9.useState)("user");
+  const [granteeId, setGranteeId] = (0, import_react9.useState)("");
+  const roleOptions = entry.org_connect?.role_options ?? [];
+  const entryRef = (0, import_react9.useRef)(entry);
+  entryRef.current = entry;
+  const load = (0, import_react9.useCallback)(async () => {
+    try {
+      setGrants(await listGrants(entryRef.current));
+      setError(null);
+    } catch (err) {
+      setError(errorMessageFrom(err, DEFAULT_GRANTS_LOAD_ERROR));
+    }
+  }, [listGrants]);
+  (0, import_react9.useEffect)(() => {
+    void load();
+  }, [load]);
+  const handleAdd = (0, import_react9.useCallback)(async () => {
+    const id = granteeId.trim();
+    if (!id) return;
+    setBusy(true);
+    try {
+      await addGrant(entryRef.current, { granteeType, granteeId: id });
+      setGranteeId("");
+      await load();
+    } catch (err) {
+      setError(errorMessageFrom(err, DEFAULT_GRANT_ERROR));
+    } finally {
+      setBusy(false);
+    }
+  }, [addGrant, granteeId, granteeType, load]);
+  const handleRevoke = (0, import_react9.useCallback)(
+    async (grantId) => {
+      setBusy(true);
+      try {
+        await revokeGrant(entryRef.current, grantId);
+        await load();
+      } catch (err) {
+        setError(errorMessageFrom(err, DEFAULT_REVOKE_ERROR));
+      } finally {
+        setBusy(false);
+      }
+    },
+    [load, revokeGrant]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      "data-testid": `connector-sharing-panel-${entry.slug}`,
+      className: "mt-2 flex flex-col gap-2 rounded-md border border-border bg-foreground/5 p-2",
+      children: [
+        grants === null && !error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "p",
           {
-            type: "button",
-            "data-testid": `connector-connect-${entry.slug}`,
-            onClick: () => onConnect(entry),
-            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"
+            "data-testid": `connector-grants-loading-${entry.slug}`,
+            className: "text-xs text-muted-foreground",
+            children: "Loading sharing\u2026"
           }
-        )
+        ),
+        error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "p",
+          {
+            role: "alert",
+            "data-testid": `connector-sharing-error-${entry.slug}`,
+            className: "text-xs text-destructive",
+            children: error
+          }
+        ),
+        grants !== null && grants.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "p",
+          {
+            "data-testid": `connector-grants-empty-${entry.slug}`,
+            className: "text-xs text-muted-foreground",
+            children: "Not shared with anyone yet."
+          }
+        ),
+        grants?.map((grant) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "div",
+          {
+            "data-testid": `connector-grant-${entry.slug}-${grant.id}`,
+            className: "flex items-center justify-between gap-2 text-xs",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "truncate", children: [
+                grant.grantee_name || grant.grantee_id,
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-muted-foreground", children: [
+                  " ",
+                  "\xB7 ",
+                  grant.grantee_type === "role" ? "Role" : "User"
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": `connector-grant-revoke-${entry.slug}-${grant.id}`,
+                  onClick: () => void handleRevoke(grant.id),
+                  disabled: busy,
+                  className: "shrink-0 rounded-md px-2 py-0.5 font-medium text-destructive hover:bg-destructive/10 disabled:opacity-50",
+                  children: "Revoke"
+                }
+              )
+            ]
+          },
+          grant.id
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "select",
+            {
+              "data-testid": `connector-grant-type-${entry.slug}`,
+              "aria-label": "Grantee type",
+              value: granteeType,
+              onChange: (event) => {
+                setGranteeType(event.target.value);
+                setGranteeId("");
+              },
+              disabled: busy,
+              className: "rounded-md border border-border bg-transparent px-1.5 py-1 text-xs disabled:opacity-50",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "user", children: "User" }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "role", children: "Role" })
+              ]
+            }
+          ),
+          granteeType === "user" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "input",
+            {
+              "data-testid": `connector-grant-grantee-${entry.slug}`,
+              "aria-label": "User ID",
+              value: granteeId,
+              onChange: (event) => setGranteeId(event.target.value),
+              placeholder: "User ID",
+              disabled: busy,
+              className: "min-w-0 flex-1 rounded-md border border-border bg-transparent px-1.5 py-1 text-xs disabled:opacity-50"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "select",
+            {
+              "data-testid": `connector-grant-role-${entry.slug}`,
+              "aria-label": "Role",
+              value: granteeId,
+              onChange: (event) => setGranteeId(event.target.value),
+              disabled: busy,
+              className: "min-w-0 flex-1 rounded-md border border-border bg-transparent px-1.5 py-1 text-xs disabled:opacity-50",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", children: "Select a role\u2026" }),
+                roleOptions.map((role) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: role.id, children: role.name }, role.id))
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              type: "button",
+              "data-testid": `connector-grant-add-${entry.slug}`,
+              onClick: () => void handleAdd(),
+              disabled: busy || !granteeId.trim(),
+              className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
+              children: "Share"
+            }
+          )
+        ] })
       ]
     }
   );