@trops/dash-core 0.1.14 → 0.1.15

package/dist/index.esm.js

@@ -24996,6 +24996,83 @@ var ProviderDetail = function ProviderDetail(_ref) {
     if (isMcp || !(provider !== null && provider !== void 0 && provider.credentials)) return [];
     return Object.keys(provider.credentials);
   }, [isMcp, provider]);
+
+  // Dynamic credential fields for create mode
+  var _useState5 = useState(isCreating ? [{
+      id: "default_apiKey",
+      key: "apiKey",
+      secret: true
+    }] : []),
+    _useState6 = _slicedToArray(_useState5, 2),
+    credentialFields = _useState6[0],
+    setCredentialFields = _useState6[1];
+  var fieldIdRef = useRef(0);
+  var handleFieldKeyChange = function handleFieldKeyChange(id, newKey) {
+    setCredentialFields(function (prev) {
+      return prev.map(function (f) {
+        if (f.id !== id) return f;
+        var oldKey = f.key;
+        if (oldKey && formCredentials[oldKey] !== undefined) {
+          setFormCredentials(function (creds) {
+            var updated = _objectSpread$4({}, creds);
+            var val = updated[oldKey];
+            delete updated[oldKey];
+            if (newKey.trim()) updated[newKey] = val;
+            return updated;
+          });
+        }
+        return _objectSpread$4(_objectSpread$4({}, f), {}, {
+          key: newKey
+        });
+      });
+    });
+  };
+  var handleFieldValueChange = function handleFieldValueChange(id, value) {
+    var field = credentialFields.find(function (f) {
+      return f.id === id;
+    });
+    if (field !== null && field !== void 0 && field.key) {
+      setFormCredentials(function (prev) {
+        return _objectSpread$4(_objectSpread$4({}, prev), {}, _defineProperty({}, field.key, value));
+      });
+    }
+  };
+  var handleFieldSecretToggle = function handleFieldSecretToggle(id) {
+    setCredentialFields(function (prev) {
+      return prev.map(function (f) {
+        return f.id === id ? _objectSpread$4(_objectSpread$4({}, f), {}, {
+          secret: !f.secret
+        }) : f;
+      });
+    });
+  };
+  var handleAddField = function handleAddField() {
+    fieldIdRef.current += 1;
+    setCredentialFields(function (prev) {
+      return [].concat(_toConsumableArray(prev), [{
+        id: "field_".concat(fieldIdRef.current),
+        key: "",
+        secret: false
+      }]);
+    });
+  };
+  var handleRemoveField = function handleRemoveField(id) {
+    var field = credentialFields.find(function (f) {
+      return f.id === id;
+    });
+    if (field !== null && field !== void 0 && field.key) {
+      setFormCredentials(function (prev) {
+        var updated = _objectSpread$4({}, prev);
+        delete updated[field.key];
+        return updated;
+      });
+    }
+    setCredentialFields(function (prev) {
+      return prev.filter(function (f) {
+        return f.id !== id;
+      });
+    });
+  };
   var handleCredentialChange = function handleCredentialChange(key, value) {
     setFormCredentials(function (prev) {
       return _objectSpread$4(_objectSpread$4({}, prev), {}, _defineProperty({}, key, value));
@@ -25116,6 +25193,65 @@ var ProviderDetail = function ProviderDetail(_ref) {
             },
             placeholder: "Provider type (e.g. algolia, openai)"
           })]
+        }), isCreating && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("div", {
+            className: "border-t border-white/10 pt-4",
+            children: /*#__PURE__*/jsx("p", {
+              className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+              children: "Credentials"
+            })
+          }), credentialFields.map(function (field) {
+            return /*#__PURE__*/jsxs("div", {
+              className: "flex flex-col gap-2",
+              children: [/*#__PURE__*/jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [/*#__PURE__*/jsx("div", {
+                  className: "flex-1",
+                  children: /*#__PURE__*/jsx(InputText, {
+                    value: field.key,
+                    onChange: function onChange(value) {
+                      return handleFieldKeyChange(field.id, value);
+                    },
+                    placeholder: "Field name (e.g. apiKey)"
+                  })
+                }), /*#__PURE__*/jsx("button", {
+                  onClick: function onClick() {
+                    return handleFieldSecretToggle(field.id);
+                  },
+                  className: "p-2 rounded hover:bg-white/10 transition-colors opacity-50 hover:opacity-100",
+                  title: field.secret ? "Show as text" : "Mark as secret",
+                  children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+                    icon: field.secret ? "eye-slash" : "eye",
+                    className: "h-3.5 w-3.5"
+                  })
+                }), /*#__PURE__*/jsx("button", {
+                  onClick: function onClick() {
+                    return handleRemoveField(field.id);
+                  },
+                  className: "p-2 rounded hover:bg-red-500/20 transition-colors opacity-50 hover:opacity-100 text-red-400",
+                  title: "Remove field",
+                  children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+                    icon: "trash",
+                    className: "h-3.5 w-3.5"
+                  })
+                })]
+              }), field.key.trim() && /*#__PURE__*/jsx(InputText, {
+                type: field.secret ? "password" : "text",
+                value: formCredentials[field.key] || "",
+                onChange: function onChange(value) {
+                  return handleFieldValueChange(field.id, value);
+                },
+                placeholder: "Enter ".concat(field.key)
+              })]
+            }, field.id);
+          }), /*#__PURE__*/jsxs("button", {
+            onClick: handleAddField,
+            className: "flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300 transition-colors",
+            children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+              icon: "plus",
+              className: "h-3 w-3"
+            }), "Add Credential Field"]
+          })]
         }), isEditing && isMcp && /*#__PURE__*/jsxs(Fragment, {
           children: [mcpConfigBlock, mcpFormFields.length > 0 && /*#__PURE__*/jsxs(Fragment, {
             children: [/*#__PURE__*/jsx("div", {
@@ -26523,9 +26659,16 @@ var ProvidersSection = function ProvidersSection(_ref) {
   }
   function handleSave() {
     if (!formName.trim() || !dashApi || !appId) return;
+    var credentials = {};
+    Object.entries(formCredentials).forEach(function (_ref6) {
+      var _ref7 = _slicedToArray(_ref6, 2),
+        key = _ref7[0],
+        value = _ref7[1];
+      if (key.trim()) credentials[key.trim()] = value;
+    });
     dashApi.saveProvider(appId, formName.trim(), {
       providerType: formType.trim(),
-      credentials: {}
+      credentials: credentials
     }, function () {
       resetForm();
       refreshProviders && refreshProviders();
@@ -26619,10 +26762,10 @@ var ProvidersSection = function ProvidersSection(_ref) {
       children: [/*#__PURE__*/jsx("div", {
         className: "px-3 py-2 text-xs font-semibold opacity-40 uppercase tracking-wider",
         children: "API Credentials"
-      }), credentialProviders.map(function (_ref6) {
-        var _ref7 = _slicedToArray(_ref6, 2),
-          name = _ref7[0],
-          provider = _ref7[1];
+      }), credentialProviders.map(function (_ref8) {
+        var _ref9 = _slicedToArray(_ref8, 2),
+          name = _ref9[0],
+          provider = _ref9[1];
         var isSelected = selectedName === name && !isCreating;
         return /*#__PURE__*/jsx(Sidebar.Item, {
           icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
@@ -26648,10 +26791,10 @@ var ProvidersSection = function ProvidersSection(_ref) {
       children: [/*#__PURE__*/jsx("div", {
         className: "px-3 py-2 text-xs font-semibold opacity-40 uppercase tracking-wider mt-2",
         children: "MCP Servers"
-      }), mcpProviders.map(function (_ref8) {
-        var _ref9 = _slicedToArray(_ref8, 2),
-          name = _ref9[0],
-          provider = _ref9[1];
+      }), mcpProviders.map(function (_ref0) {
+        var _ref1 = _slicedToArray(_ref0, 2),
+          name = _ref1[0],
+          provider = _ref1[1];
         var isSelected = selectedName === name && !isCreating;
         return /*#__PURE__*/jsx(Sidebar.Item, {
           icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
@@ -26708,6 +26851,8 @@ var ProvidersSection = function ProvidersSection(_ref) {
       setFormName: setFormName,
       formType: formType,
       setFormType: setFormType,
+      formCredentials: formCredentials,
+      setFormCredentials: setFormCredentials,
       onCreate: handleSave,
       onCancelEdit: function onCancelEdit() {
         resetForm();