Update utils.py to handle SecretStr field type as str with password and load_from_db attributes (#2005)

* chore: Update utils.py to handle SecretStr field type as str with password and load_from_db attributes

* Update utils.py to handle SecretStr field type as str with password and load_from_db attributes

src/backend/base/langflow/custom/utils.py

@@ -159,6 +159,11 @@ def add_new_custom_field(
     if field_type == "bool" and field_value is None:
         field_value = False
 
+    if field_type == "SecretStr":
+        field_config["password"] = True
+        field_config["load_from_db"] = True
+        field_config["input_types"] = ["Text"]
+
     # If options is a list, then it's a dropdown
     # If options is None, then it's a list of strings
     is_list = isinstance(field_config.get("options"), list)

src/frontend/src/customNodes/genericNode/components/parameterComponent/constants.ts

@@ -0,0 +1 @@
+export const TEXT_FIELD_TYPES: string[] = ["str", "SecretStr"];

src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx

@@ -46,6 +46,7 @@ import useHandleOnNewValue from "../../../hooks/use-handle-new-value";
 import useHandleNodeClass from "../../../hooks/use-handle-node-class";
 import useHandleRefreshButtonPress from "../../../hooks/use-handle-refresh-buttons";
 import TooltipRenderComponent from "../tooltipRenderComponent";
+import { TEXT_FIELD_TYPES } from "./constants";
 
 export default function ParameterComponent({
   left,
@@ -88,8 +89,7 @@ export default function ParameterComponent({
     debouncedHandleUpdateValues,
     setNode,
     renderTooltips,
-    isLoading,
-    setIsLoading,
+    setIsLoading
   );
 
   const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@@ -98,7 +98,7 @@ export default function ParameterComponent({
     takeSnapshot,
     setNode,
     updateNodeInternals,
-    renderTooltips,
+    renderTooltips
   );
 
   const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@@ -107,7 +107,7 @@ export default function ParameterComponent({
   let disabled =
     edges.some(
       (edge) =>
-        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
+        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id)
     ) ?? false;
 
   const handleRefreshButtonPress = async (name, data) => {
@@ -120,12 +120,12 @@ export default function ParameterComponent({
     handleUpdateValues,
     setNode,
     renderTooltips,
-    setIsLoading,
+    setIsLoading
   );
 
   const handleOnNewValue = async (
     newValue: string | string[] | boolean | Object[],
-    skipSnapshot: boolean | undefined = false,
+    skipSnapshot: boolean | undefined = false
   ): Promise<void> => {
     handleOnNewValueHook(newValue, skipSnapshot);
   };
@@ -207,7 +207,7 @@ export default function ParameterComponent({
               className={classNames(
                 left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
                 "h-3 w-3 rounded-full border-2 bg-background",
-                !showNode ? "mt-0" : "",
+                !showNode ? "mt-0" : ""
               )}
               style={{
                 borderColor: color ?? nodeColors.unknown,
@@ -296,7 +296,7 @@ export default function ParameterComponent({
                   }
                   className={classNames(
                     left ? "-ml-0.5" : "-mr-0.5",
-                    "h-3 w-3 rounded-full border-2 bg-background",
+                    "h-3 w-3 rounded-full border-2 bg-background"
                   )}
                   style={{ borderColor: color ?? nodeColors.unknown }}
                   onClick={() => setFilterEdge(groupedEdge.current)}
@@ -309,7 +309,7 @@ export default function ParameterComponent({
         <Case
           condition={
             left === true &&
-            type === "str" &&
+            TEXT_FIELD_TYPES.includes(type ?? "") &&
             !data.node?.template[name]?.options
           }
         >

src/frontend/src/customNodes/hooks/use-handle-new-value.tsx

@@ -10,8 +10,7 @@ const useHandleOnNewValue = (
   debouncedHandleUpdateValues,
   setNode,
   renderTooltips,
-  isLoading,
-  setIsLoading,
+  setIsLoading
 ) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);