@truefoundry/trueforge-ui 0.3.0-rc.0 → 0.3.0-rc.10

package/dist/{ConnectorSettings-FXQ5B7TN.js → ConnectorSettings-HDKGLDCY.js}

@@ -7,39 +7,45 @@ import {
   auiInputClass,
   useMCPAuth,
   useToasterOptional
-} from "./chunk-OSV3HI5M.js";
+} from "./chunk-GG23N2GW.js";
+import "./chunk-T6QQV5LK.js";
 import {
-  Icon,
-  getErrorMessage
-} from "./chunk-FJ5RSSMA.js";
+  Icon
+} from "./chunk-3ZW74FHC.js";
 import {
+  getErrorMessage,
   useCatalogServer
-} from "./chunk-WQULF5AT.js";
-import "./chunk-B52K63AW.js";
+} from "./chunk-2GIZY3JJ.js";
+import "./chunk-M6MHLVSO.js";
+import "./chunk-CG75X77Q.js";
 import {
   cn
-} from "./chunk-36KOSC2J.js";
+} from "./chunk-JCL3Q7RW.js";
 
 // src/containers/SettingsBuilder/ConnectorSettings.tsx
-import { useCallback, useEffect as useEffect2, useMemo, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect3, useMemo, useState as useState3 } from "react";
 
 // src/containers/SettingsBuilder/AddMcpServerForm.tsx
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var AUTH_OPTIONS = [
-  { value: "dcr", label: "OAuth" },
   { value: "none", label: "None" },
-  { value: "header", label: "API Key" }
+  { value: "header", label: "API Key" },
+  { value: "dcr", label: "OAuth" }
 ];
 var inputClassName = auiInputClass("h-11 shadow-sm");
 var RequiredMark = () => /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-failure-bg", "aria-hidden": true, children: "*" });
-var AddMcpServerForm = ({ open, onOpenChange, onAdd, busy = false, error }) => {
+var AddMcpServerForm = ({ open, onOpenChange, onSubmit, connector, busy = false, error }) => {
   const [name, setName] = useState("");
   const [url, setUrl] = useState("");
   const [description, setDescription] = useState("");
   const [authType, setAuthType] = useState("dcr");
   const [apiKey, setApiKey] = useState("");
   const [headerName, setHeaderName] = useState("");
+  const isEditing = connector !== void 0;
+  const nameInputClassName = auiInputClass(
+    `h-11 shadow-sm ${isEditing ? "cursor-not-allowed bg-secondary-bg/60 text-text-secondary opacity-40" : ""}`
+  );
   const resetForm = () => {
     setName("");
     setUrl("");
@@ -48,11 +54,21 @@ var AddMcpServerForm = ({ open, onOpenChange, onAdd, busy = false, error }) => {
     setApiKey("");
     setHeaderName("");
   };
+  useEffect(() => {
+    if (!open) return;
+    setName(connector?.name ?? "");
+    setUrl(connector?.url ?? "");
+    setDescription(connector?.description ?? "");
+    setAuthType(connector?.auth.type ?? "dcr");
+    setApiKey("");
+    setHeaderName(connector?.auth.type === "header" ? connector.auth.headerName ?? "" : "");
+  }, [connector, open]);
   const handleOpenChange = (nextOpen) => {
     if (!nextOpen) resetForm();
     onOpenChange(nextOpen);
   };
-  const isValid = !!name.trim() && !!description.trim() && !!url.trim() && (authType !== "header" || !!apiKey.trim());
+  const hasApiKey = !!apiKey.trim() || connector?.auth.type === "header";
+  const isValid = !!name.trim() && !!description.trim() && !!url.trim() && (authType !== "header" || hasApiKey);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!isValid || busy) return;
@@ -62,7 +78,7 @@ var AddMcpServerForm = ({ open, onOpenChange, onAdd, busy = false, error }) => {
       ...headerName.trim() ? { headerName: headerName.trim() } : {}
     } : { type: authType };
     try {
-      await onAdd({
+      await onSubmit({
         name: name.trim(),
         url: url.trim(),
         description: description.trim(),
@@ -78,8 +94,8 @@ var AddMcpServerForm = ({ open, onOpenChange, onAdd, busy = false, error }) => {
     {
       open,
       onOpenChange: handleOpenChange,
-      title: "Add MCP server",
-      description: "Point at a remote MCP endpoint. It then behaves like any other connector.",
+      title: isEditing ? "Edit MCP server" : "Add MCP server",
+      description: isEditing ? "Update how this connector authenticates." : "Point at a remote MCP endpoint. It then behaves like any other connector.",
       contentSized: true,
       headerIcon: /* @__PURE__ */ jsx(
         "span",
@@ -103,12 +119,14 @@ var AddMcpServerForm = ({ open, onOpenChange, onAdd, busy = false, error }) => {
                 type: "text",
                 required: true,
                 value: name,
+                readOnly: isEditing,
+                "aria-disabled": isEditing,
                 onChange: (event) => {
                   setName(event.target.value);
                 },
                 placeholder: "analytics-postgres-mcp",
-                autoFocus: true,
-                className: inputClassName
+                autoFocus: !isEditing,
+                className: nameInputClassName
               }
             )
           ] }),
@@ -189,14 +207,14 @@ var AddMcpServerForm = ({ open, onOpenChange, onAdd, busy = false, error }) => {
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsxs("label", { htmlFor: "mcp-server-api-key", className: "mb-1.5 block text-sm font-medium text-text-primary", children: [
                 "API key",
-                /* @__PURE__ */ jsx(RequiredMark, {})
+                connector?.auth.type === "header" ? /* @__PURE__ */ jsx("span", { className: "font-normal text-text-secondary", children: " (leave blank to keep current)" }) : /* @__PURE__ */ jsx(RequiredMark, {})
               ] }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
                   id: "mcp-server-api-key",
                   type: "password",
-                  required: true,
+                  required: connector?.auth.type !== "header",
                   value: apiKey,
                   onChange: (event) => {
                     setApiKey(event.target.value);
@@ -229,7 +247,7 @@ var AddMcpServerForm = ({ open, onOpenChange, onAdd, busy = false, error }) => {
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-3", children: [
           error ? /* @__PURE__ */ jsx("p", { className: "text-failure-bg text-sm", children: error }) : null,
-          /* @__PURE__ */ jsx(Button, { type: "submit", size: "lg", disabled: !isValid || busy, className: "w-full shrink-0", children: "Add" })
+          /* @__PURE__ */ jsx(Button.Primary, { type: "submit", size: "large", disabled: !isValid || busy, className: "w-full shrink-0", children: isEditing ? "Save" : "Add" })
         ] })
       ] })
     }
@@ -245,7 +263,7 @@ var AUTH_TYPE_LABELS = {
 };
 
 // src/containers/SettingsBuilder/ConnectorDetails.tsx
-import { useEffect, useLayoutEffect, useRef, useState as useState2 } from "react";
+import { useEffect as useEffect2, useLayoutEffect, useRef, useState as useState2 } from "react";
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ExpandableDescription({ text }) {
   const contentRef = useRef(null);
@@ -319,6 +337,7 @@ var ConnectorDetails = ({
   connector,
   onBack,
   onConnectorRefreshed,
+  onEdit,
   onDisconnect,
   busy = false
 }) => {
@@ -328,7 +347,7 @@ var ConnectorDetails = ({
   const [toolsLoading, setToolsLoading] = useState2(true);
   const [toolsError, setToolsError] = useState2(null);
   const [refreshingAfterAuth, setRefreshingAfterAuth] = useState2(false);
-  useEffect(() => {
+  useEffect2(() => {
     let cancelled = false;
     setTools([]);
     setToolsError(null);
@@ -383,13 +402,14 @@ var ConnectorDetails = ({
           }
         ),
         /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx2("h4", { className: "text-lg font-semibold text-text-primary", children: connector.name }),
-          /* @__PURE__ */ jsxs2("div", { className: "mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx2("h4", { className: "text-lg font-semibold text-text-primary", children: connector.name }),
+            /* @__PURE__ */ jsx2("span", { className: "inline-flex items-center rounded-full border border-border bg-secondary-bg/40 px-2 py-0.5 text-xs font-medium text-text-secondary", children: AUTH_TYPE_LABELS[connector.auth.type] ?? AUTH_TYPE_LABELS.none }),
             /* @__PURE__ */ jsxs2(
               "span",
               {
                 className: cn(
-                  "flex items-center gap-1.5 text-xs font-medium",
+                  "flex items-center gap-1.5 rounded-full border border-border bg-secondary-bg/40 px-2 py-0.5 text-xs font-medium",
                   connector.authenticated ? "text-success-bg" : "text-text-primary"
                 ),
                 children: [
@@ -405,29 +425,30 @@ var ConnectorDetails = ({
                   connector.authenticated ? "Connected" : "Not authenticated"
                 ]
               }
-            ),
-            /* @__PURE__ */ jsxs2("span", { className: "text-text-secondary", children: [
-              "\xB7 ",
-              connector.description
-            ] })
+            )
           ] }),
-          /* @__PURE__ */ jsx2("span", { className: "mt-2 inline-flex items-center rounded-full border border-border bg-secondary-bg/40 px-2 py-0.5 text-xs font-medium text-text-secondary", children: AUTH_TYPE_LABELS[connector.auth.type] ?? AUTH_TYPE_LABELS.none })
+          /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-sm", children: /* @__PURE__ */ jsx2("span", { className: "text-text-secondary", children: connector.description }) })
         ] }),
-        connector.auth.type === "dcr" && !connector.authenticated ? /* @__PURE__ */ jsx2(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            type: "button",
-            disabled: busy || connecting,
-            onClick: () => {
-              void handleAuthorize(connector.id, (isSuccess) => {
-                if (isSuccess) void refreshAfterAuthentication();
-              });
-            },
-            children: connecting ? "Connecting\u2026" : "Connect"
-          }
-        ) : connector.auth.type === "dcr" && !connector.requiresAuth ? /* @__PURE__ */ jsx2(Button, { variant: "outline", size: "sm", type: "button", disabled: busy, onClick: onDisconnect, children: "Disconnect" }) : null
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs2(Button.Secondary, { size: "small", type: "button", disabled: busy, onClick: onEdit, children: [
+            /* @__PURE__ */ jsx2(Icon, { name: "pencil", className: "size-3" }),
+            "Edit"
+          ] }),
+          connector.auth.type === "dcr" && !connector.authenticated ? /* @__PURE__ */ jsx2(
+            Button.Secondary,
+            {
+              size: "small",
+              type: "button",
+              disabled: busy || connecting,
+              onClick: () => {
+                void handleAuthorize(connector.id, (isSuccess) => {
+                  if (isSuccess) void refreshAfterAuthentication();
+                });
+              },
+              children: connecting ? "Connecting\u2026" : "Connect"
+            }
+          ) : connector.auth.type === "dcr" && !connector.requiresAuth ? /* @__PURE__ */ jsx2(Button.Secondary, { size: "small", type: "button", disabled: busy, onClick: onDisconnect, children: "Disconnect" }) : null
+        ] })
       ] }),
       /* @__PURE__ */ jsx2("section", { className: "mt-6", "aria-labelledby": "connector-tools-heading", children: toolsLoading ? /* @__PURE__ */ jsx2("div", { className: "rounded-xl border border-dashed border-border p-6 text-center text-sm text-text-secondary", children: "Loading tools\u2026" }) : toolsError ? /* @__PURE__ */ jsxs2("div", { className: "rounded-xl border border-failure-bg/30 bg-failure-bg/10 p-6 text-center text-sm text-failure-bg", children: [
         toolsError,
@@ -473,6 +494,7 @@ var ConnectorSettings = () => {
   const [busy, setBusy] = useState3(false);
   const [catalog, setCatalog] = useState3([]);
   const [addMcpServerFormOpen, setAddMcpServerFormOpen] = useState3(false);
+  const [editingConnector, setEditingConnector] = useState3(null);
   const [connectorAwaitingKey, setConnectorAwaitingKey] = useState3(null);
   const [selectedConnector, setSelectedConnector] = useState3(null);
   const [apiKey, setApiKey] = useState3("");
@@ -513,7 +535,7 @@ var ConnectorSettings = () => {
       setLoading(false);
     }
   }, [connectorCatalog]);
-  useEffect2(() => {
+  useEffect3(() => {
     void refresh();
   }, [refresh]);
   const normalizedQuery = query.trim().toLowerCase();
@@ -595,35 +617,27 @@ var ConnectorSettings = () => {
         apiKey: apiKey.trim(),
         ...entry.auth.type === "header" && entry.auth.headerName ? { headerName: entry.auth.headerName } : {}
       };
-      const existing = connectors.ordered.find(({ connector }) => connector.id === entry.id);
-      const existingConnector = existing?.isConfigured ? existing.connector : void 0;
-      if (existingConnector) {
-        await connectorCatalog.updateConnector({
-          id: existingConnector.id,
-          name: existingConnector.name,
-          description: existingConnector.description,
-          url: existingConnector.url,
-          auth
-        });
-      } else {
-        await createFromCatalog(entry, auth);
-      }
+      await createFromCatalog(entry, auth);
       closeApiKeyModal();
       setTimeout(() => {
         toaster?.showSuccess({
-          title: `${entry.name} ${existingConnector ? "updated" : "connected"}`
+          title: `${entry.name} connected`
         });
       }, 100);
     }, setFormError).catch(() => {
     });
   };
-  const handleAddMcpServer = async (draft) => {
+  const handleMcpServerSubmit = async (draft) => {
     setFormError(null);
     await runMutation(async () => {
-      await connectorCatalog.createConnector({ ...draft });
+      if (editingConnector) {
+        await connectorCatalog.updateConnector({ id: editingConnector.id, ...draft });
+      } else {
+        await connectorCatalog.createConnector({ ...draft });
+      }
     }, setFormError);
     setTimeout(() => {
-      toaster?.showSuccess({ title: `${draft.name} added` });
+      toaster?.showSuccess({ title: `${draft.name} ${editingConnector ? "updated" : "added"}` });
     }, 0);
   };
   const handleDisconnect = (connector) => {
@@ -658,7 +672,30 @@ var ConnectorSettings = () => {
         }
       ),
       /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx3("h5", { className: "truncate text-sm font-medium text-text-primary", children: connector.name }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx3("h5", { className: "truncate text-sm font-medium text-text-primary", children: connector.name }),
+          /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs3(
+            "span",
+            {
+              className: cn(
+                "flex items-center gap-1.5 rounded-full border border-border bg-secondary-bg/40 px-2 py-0.5 text-xs font-medium",
+                connector.authenticated ? "text-success-bg" : "text-text-primary"
+              ),
+              children: [
+                /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    className: cn(
+                      "h-1.5 w-1.5 rounded-full",
+                      connector.authenticated ? "bg-success-bg" : "bg-primary-button-bg"
+                    )
+                  }
+                ),
+                connector.authenticated ? "Connected" : "Added"
+              ]
+            }
+          ) })
+        ] }),
         /* @__PURE__ */ jsx3("p", { className: "mt-0.5 line-clamp-2 text-sm text-text-secondary sm:truncate", children: connector.description })
       ] })
     ] });
@@ -674,45 +711,24 @@ var ConnectorSettings = () => {
           children: [
             /* @__PURE__ */ jsx3("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: content }),
             /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs3(
-                "span",
+              /* @__PURE__ */ jsxs3(
+                Button.Secondary,
                 {
-                  className: cn(
-                    "flex items-center gap-1.5 rounded-full border border-border bg-secondary-bg/40 px-2 py-0.5 text-xs font-medium",
-                    connector.authenticated ? "text-success-bg" : "text-text-primary"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx3(
-                      "span",
-                      {
-                        className: cn(
-                          "h-1.5 w-1.5 rounded-full",
-                          connector.authenticated ? "bg-success-bg" : "bg-primary-button-bg"
-                        )
-                      }
-                    ),
-                    connector.authenticated ? "Connected" : "Added"
-                  ]
-                }
-              ) }),
-              connector.auth.type === "header" ? /* @__PURE__ */ jsxs3(
-                Button,
-                {
-                  variant: "secondary",
-                  size: "sm",
+                  size: "small",
                   type: "button",
                   disabled: busy,
                   onClick: (event) => {
                     event.stopPropagation();
-                    setApiKey("");
-                    setConnectorAwaitingKey(connector);
+                    setFormError(null);
+                    setEditingConnector(connector);
+                    setAddMcpServerFormOpen(true);
                   },
                   children: [
-                    /* @__PURE__ */ jsx3(Icon, { name: "wrench", className: "size-3" }),
-                    "Replace Key"
+                    /* @__PURE__ */ jsx3(Icon, { name: "pencil", className: "size-3" }),
+                    "Edit"
                   ]
                 }
-              ) : null,
+              ),
               /* @__PURE__ */ jsx3(Icon, { name: "chevron-right", className: "size-4" })
             ] })
           ]
@@ -744,10 +760,9 @@ var ConnectorSettings = () => {
           /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-center gap-2", children: [
             /* @__PURE__ */ jsx3("span", { className: "hidden text-xs text-text-secondary sm:inline", children: AUTH_TYPE_LABELS[entry.auth.type] ?? AUTH_TYPE_LABELS.none }),
             /* @__PURE__ */ jsx3(
-              Button,
+              Button.Secondary,
               {
-                variant: "secondary",
-                size: "sm",
+                size: "small",
                 type: "button",
                 disabled: busy,
                 onClick: () => {
@@ -762,26 +777,45 @@ var ConnectorSettings = () => {
       entry.id
     );
   };
-  const isReplacingKey = useMemo(() => {
-    return connectorAwaitingKey !== null && connectors.ordered.some(
-      (item) => item.isConfigured && item.connector.id === connectorAwaitingKey.id
-    );
-  }, [connectorAwaitingKey, connectors.ordered]);
   if (selectedConnector) {
-    return /* @__PURE__ */ jsx3(
-      ConnectorDetails_default,
-      {
-        connector: selectedConnector,
-        busy,
-        onBack: () => {
-          setSelectedConnector(null);
-        },
-        onConnectorRefreshed: handleConnectorRefreshed,
-        onDisconnect: () => {
-          handleDisconnect(selectedConnector);
+    return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsx3(
+        ConnectorDetails_default,
+        {
+          connector: selectedConnector,
+          busy,
+          onBack: () => {
+            setSelectedConnector(null);
+          },
+          onConnectorRefreshed: handleConnectorRefreshed,
+          onEdit: () => {
+            setFormError(null);
+            setEditingConnector(selectedConnector);
+            setAddMcpServerFormOpen(true);
+          },
+          onDisconnect: () => {
+            handleDisconnect(selectedConnector);
+          }
         }
-      }
-    );
+      ),
+      /* @__PURE__ */ jsx3(
+        AddMcpServerForm_default,
+        {
+          open: addMcpServerFormOpen,
+          onOpenChange: (open) => {
+            setAddMcpServerFormOpen(open);
+            if (!open) {
+              setEditingConnector(null);
+              setFormError(null);
+            }
+          },
+          onSubmit: handleMcpServerSubmit,
+          connector: editingConnector ?? void 0,
+          busy,
+          error: formError
+        }
+      )
+    ] });
   }
   const hasMatches = matchingConnected.length > 0 || availableConnectors.length > 0;
   return /* @__PURE__ */ jsxs3(Fragment3, { children: [
@@ -792,12 +826,12 @@ var ConnectorSettings = () => {
       /* @__PURE__ */ jsxs3("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsx3("div", { className: "flex-1", children: /* @__PURE__ */ jsx3(SearchInput_default, { query, setQuery, placeholder: "Search connectors" }) }),
         /* @__PURE__ */ jsxs3(
-          Button,
+          Button.Secondary,
           {
-            variant: "secondary",
             type: "button",
             onClick: () => {
               setFormError(null);
+              setEditingConnector(null);
               setAddMcpServerFormOpen(true);
             },
             children: [
@@ -846,7 +880,7 @@ var ConnectorSettings = () => {
           onOpenChange: (open) => {
             if (!open) closeApiKeyModal();
           },
-          title: `${isReplacingKey ? "Replace key for" : "Connect"} ${connectorAwaitingKey?.name ?? "connector"}`,
+          title: `Connect ${connectorAwaitingKey?.name ?? "connector"}`,
           description: connectorAwaitingKey?.url,
           contentSized: true,
           className: "md:max-w-xl",
@@ -894,8 +928,8 @@ var ConnectorSettings = () => {
               formError ? /* @__PURE__ */ jsx3("p", { className: "text-failure-bg text-sm", children: formError }) : null
             ] }),
             /* @__PURE__ */ jsxs3("footer", { className: "flex justify-end gap-2 border-t border-border px-5 py-4", children: [
-              /* @__PURE__ */ jsx3(Button, { variant: "ghost", type: "button", onClick: closeApiKeyModal, disabled: busy, children: "Cancel" }),
-              /* @__PURE__ */ jsx3(Button, { type: "submit", disabled: !apiKey.trim() || busy, children: isReplacingKey ? "Replace Key" : "Connect" })
+              /* @__PURE__ */ jsx3(Button.Ghost, { type: "button", onClick: closeApiKeyModal, disabled: busy, children: "Cancel" }),
+              /* @__PURE__ */ jsx3(Button.Primary, { type: "submit", disabled: !apiKey.trim() || busy, children: "Connect" })
             ] })
           ] })
         }
@@ -906,9 +940,13 @@ var ConnectorSettings = () => {
           open: addMcpServerFormOpen,
           onOpenChange: (open) => {
             setAddMcpServerFormOpen(open);
-            if (!open) setFormError(null);
+            if (!open) {
+              setEditingConnector(null);
+              setFormError(null);
+            }
           },
-          onAdd: handleAddMcpServer,
+          onSubmit: handleMcpServerSubmit,
+          connector: editingConnector ?? void 0,
           busy,
           error: formError
         }
@@ -920,4 +958,4 @@ var ConnectorSettings_default = ConnectorSettings;
 export {
   ConnectorSettings_default as default
 };
-//# sourceMappingURL=ConnectorSettings-FXQ5B7TN.js.map
+//# sourceMappingURL=ConnectorSettings-HDKGLDCY.js.map