From edd15fc0a23d3ec2fa47889b6bb2edabe6228bbb Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 25 Jun 2024 17:57:49 -0300
Subject: [PATCH 1/6] fix settings flow save button

---
 .../editFlowSettingsComponent/index.tsx       | 18 +++++-----------
 .../src/modals/flowSettingsModal/index.tsx    | 21 +++++++++++++++++--
 src/frontend/src/utils/utils.ts               |  8 +++++++
 3 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/frontend/src/components/editFlowSettingsComponent/index.tsx b/src/frontend/src/components/editFlowSettingsComponent/index.tsx
index b15e0c369..34cd39180 100644
--- a/src/frontend/src/components/editFlowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/editFlowSettingsComponent/index.tsx
@@ -4,7 +4,7 @@ import { Label } from "../../components/ui/label";
 import { Textarea } from "../../components/ui/textarea";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { InputProps } from "../../types/components";
-import { cn } from "../../utils/utils";
+import { cn, isEndpointNameValid } from "../../utils/utils";
 
 export const EditFlowSettings: React.FC<InputProps> = ({
   name,
@@ -17,7 +17,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
   setEndpointName,
 }: InputProps): JSX.Element => {
   const [isMaxLength, setIsMaxLength] = useState(false);
-  const [isEndpointNameValid, setIsEndpointNameValid] = useState(true);
+  const [validEndpointName, setValidEndpointName] = useState(true);
   const [isInvalidName, setIsInvalidName] = useState(false);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
 
@@ -34,10 +34,6 @@ export const EditFlowSettings: React.FC<InputProps> = ({
         invalid = true;
         break;
       }
-      if (value === currentFlow?.name) {
-        invalid = true;
-        break;
-      }
       invalid = false;
     }
     setIsInvalidName(invalid);
@@ -51,12 +47,8 @@ export const EditFlowSettings: React.FC<InputProps> = ({
   const handleEndpointNameChange = (event: ChangeEvent<HTMLInputElement>) => {
     // Validate the endpoint name
     // use this regex r'^[a-zA-Z0-9_-]+$'
-    const isValid =
-      (/^[a-zA-Z0-9_-]+$/.test(event.target.value) &&
-        event.target.value.length <= maxLength) ||
-      // empty is also valid
-      event.target.value.length === 0;
-    setIsEndpointNameValid(isValid);
+    const isValid = isEndpointNameValid(event.target.value, maxLength);
+    setValidEndpointName(isValid);
     setEndpointName!(event.target.value);
   };
 
@@ -129,7 +121,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
         <Label>
           <div className="edit-flow-arrangement mt-3">
             <span className="font-medium">Endpoint Name</span>
-            {!isEndpointNameValid && (
+            {!validEndpointName && (
               <span className="edit-flow-span">
                 Invalid endpoint name. Use only letters, numbers, hyphens, and
                 underscores ({maxLength} characters max).
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index e5bc58d0d..13b9ba76c 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -6,6 +6,7 @@ import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { FlowSettingsPropsType } from "../../types/components";
 import { FlowType } from "../../types/flow";
+import { isEndpointNameValid } from "../../utils/utils";
 import BaseModal from "../baseModal";
 
 export default function FlowSettingsModal({
@@ -22,8 +23,11 @@ export default function FlowSettingsModal({
 
   const [name, setName] = useState(currentFlow!.name);
   const [description, setDescription] = useState(currentFlow!.description);
-  const [endpoint_name, setEndpointName] = useState(currentFlow!.endpoint_name);
+  const [endpoint_name, setEndpointName] = useState(
+    currentFlow!.endpoint_name ?? "",
+  );
   const [isSaving, setIsSaving] = useState(false);
+  const [disableSave, setDisableSave] = useState(true);
   function handleClick(): void {
     setIsSaving(true);
     currentFlow!.name = name;
@@ -54,6 +58,19 @@ export default function FlowSettingsModal({
     setNameList(tempNameList.filter((name) => name !== currentFlow!.name));
   }, [flows]);
 
+  useEffect(() => {
+    console.log(disableSave);
+    if (
+      (!nameLists.includes(name) && currentFlow?.name !== name) ||
+      currentFlow?.description !== description ||
+      ((currentFlow?.endpoint_name ?? "" !== endpoint_name) &&
+        isEndpointNameValid(endpoint_name, 50))
+    ) {
+      setDisableSave(false);
+    } else {
+      setDisableSave(true);
+    }
+  }, [nameLists, currentFlow, description, endpoint_name, name]);
   return (
     <BaseModal
       open={open}
@@ -80,8 +97,8 @@ export default function FlowSettingsModal({
       <BaseModal.Footer
         submit={{
           label: "Save",
-          disabled: nameLists.includes(name) || name === currentFlow!.name,
           dataTestId: "save-flow-settings",
+          disabled: disableSave,
           loading: isSaving,
         }}
       />
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index e704beb63..8ea79fd7a 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -463,3 +463,11 @@ export const logTypeIsError = (
     return isErrorLog(outputs);
   }
 };
+
+export function isEndpointNameValid(name: string, maxLength: number): boolean {
+  return (
+    (/^[a-zA-Z0-9_-]+$/.test(name) && name.length <= maxLength) ||
+    // empty is also valid
+    name.length === 0
+  );
+}

From 3b505bc3a65d99658dfdc901f352ab16c6385f35 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 25 Jun 2024 18:42:04 -0300
Subject: [PATCH 2/6] refactor: Update endpoint_name handling in
 FlowSettingsModal

---
 src/frontend/src/modals/flowSettingsModal/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index 13b9ba76c..bb3e473b8 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -24,7 +24,7 @@ export default function FlowSettingsModal({
   const [name, setName] = useState(currentFlow!.name);
   const [description, setDescription] = useState(currentFlow!.description);
   const [endpoint_name, setEndpointName] = useState(
-    currentFlow!.endpoint_name ?? "",
+    currentFlow!.endpoint_name
   );
   const [isSaving, setIsSaving] = useState(false);
   const [disableSave, setDisableSave] = useState(true);
@@ -32,7 +32,7 @@ export default function FlowSettingsModal({
     setIsSaving(true);
     currentFlow!.name = name;
     currentFlow!.description = description;
-    currentFlow!.endpoint_name = endpoint_name;
+    currentFlow!.endpoint_name = (endpoint_name && endpoint_name.length > 0) ? endpoint_name : undefined;
     saveFlow(currentFlow!)
       ?.then(() => {
         setOpen(false);
@@ -64,7 +64,7 @@ export default function FlowSettingsModal({
       (!nameLists.includes(name) && currentFlow?.name !== name) ||
       currentFlow?.description !== description ||
       ((currentFlow?.endpoint_name ?? "" !== endpoint_name) &&
-        isEndpointNameValid(endpoint_name, 50))
+        isEndpointNameValid(endpoint_name??"", 50))
     ) {
       setDisableSave(false);
     } else {

From f8f0212ac9dcce8db6f815a892c45b065ef18692 Mon Sep 17 00:00:00 2001
From: anovazzi1 <anovazzi1@users.noreply.github.com>
Date: Tue, 25 Jun 2024 21:43:24 +0000
Subject: [PATCH 3/6] Apply Prettier formatting

---
 src/frontend/src/modals/flowSettingsModal/index.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index bb3e473b8..e5750c3dd 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -23,16 +23,15 @@ export default function FlowSettingsModal({
 
   const [name, setName] = useState(currentFlow!.name);
   const [description, setDescription] = useState(currentFlow!.description);
-  const [endpoint_name, setEndpointName] = useState(
-    currentFlow!.endpoint_name
-  );
+  const [endpoint_name, setEndpointName] = useState(currentFlow!.endpoint_name);
   const [isSaving, setIsSaving] = useState(false);
   const [disableSave, setDisableSave] = useState(true);
   function handleClick(): void {
     setIsSaving(true);
     currentFlow!.name = name;
     currentFlow!.description = description;
-    currentFlow!.endpoint_name = (endpoint_name && endpoint_name.length > 0) ? endpoint_name : undefined;
+    currentFlow!.endpoint_name =
+      endpoint_name && endpoint_name.length > 0 ? endpoint_name : undefined;
     saveFlow(currentFlow!)
       ?.then(() => {
         setOpen(false);
@@ -64,7 +63,7 @@ export default function FlowSettingsModal({
       (!nameLists.includes(name) && currentFlow?.name !== name) ||
       currentFlow?.description !== description ||
       ((currentFlow?.endpoint_name ?? "" !== endpoint_name) &&
-        isEndpointNameValid(endpoint_name??"", 50))
+        isEndpointNameValid(endpoint_name ?? "", 50))
     ) {
       setDisableSave(false);
     } else {

From 393983ef1156b8b4688293b3cf6bb16c12511073 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 25 Jun 2024 18:43:59 -0300
Subject: [PATCH 4/6] code format

---
 src/frontend/src/modals/flowSettingsModal/index.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index bb3e473b8..e5750c3dd 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -23,16 +23,15 @@ export default function FlowSettingsModal({
 
   const [name, setName] = useState(currentFlow!.name);
   const [description, setDescription] = useState(currentFlow!.description);
-  const [endpoint_name, setEndpointName] = useState(
-    currentFlow!.endpoint_name
-  );
+  const [endpoint_name, setEndpointName] = useState(currentFlow!.endpoint_name);
   const [isSaving, setIsSaving] = useState(false);
   const [disableSave, setDisableSave] = useState(true);
   function handleClick(): void {
     setIsSaving(true);
     currentFlow!.name = name;
     currentFlow!.description = description;
-    currentFlow!.endpoint_name = (endpoint_name && endpoint_name.length > 0) ? endpoint_name : undefined;
+    currentFlow!.endpoint_name =
+      endpoint_name && endpoint_name.length > 0 ? endpoint_name : undefined;
     saveFlow(currentFlow!)
       ?.then(() => {
         setOpen(false);
@@ -64,7 +63,7 @@ export default function FlowSettingsModal({
       (!nameLists.includes(name) && currentFlow?.name !== name) ||
       currentFlow?.description !== description ||
       ((currentFlow?.endpoint_name ?? "" !== endpoint_name) &&
-        isEndpointNameValid(endpoint_name??"", 50))
+        isEndpointNameValid(endpoint_name ?? "", 50))
     ) {
       setDisableSave(false);
     } else {

From a924d252bd4fc7d775683ec6067064ab1d7f72f3 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Date: Tue, 25 Jun 2024 20:21:38 -0300
Subject: [PATCH 5/6] refactor: Improve readability and avoid variable
 shadowing in flows.py

---
 src/backend/base/langflow/api/v1/flows.py | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/backend/base/langflow/api/v1/flows.py b/src/backend/base/langflow/api/v1/flows.py
index 54e4fc5e5..e01af05ac 100644
--- a/src/backend/base/langflow/api/v1/flows.py
+++ b/src/backend/base/langflow/api/v1/flows.py
@@ -1,5 +1,5 @@
-from datetime import datetime, timezone
 import re
+from datetime import datetime, timezone
 from typing import List
 from uuid import UUID
 
@@ -211,8 +211,7 @@ def update_flow(
         if settings_service.settings.remove_api_keys:
             flow_data = remove_api_keys(flow_data)
         for key, value in flow_data.items():
-            if value is not None:
-                setattr(db_flow, key, value)
+            setattr(db_flow, key, value)
         webhook_component = get_webhook_component_in_flow(db_flow.data)
         db_flow.webhook = webhook_component is not None
         db_flow.updated_at = datetime.now(timezone.utc)

From 7e76e5653df8484d58c33deaa28d11571ab88665 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 25 Jun 2024 20:29:20 -0300
Subject: [PATCH 6/6] fix save logic

---
 src/frontend/src/modals/flowSettingsModal/index.tsx | 7 +++----
 src/frontend/src/types/components/index.ts          | 2 +-
 src/frontend/src/types/flow/index.ts                | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index e5750c3dd..898538af0 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -23,7 +23,7 @@ export default function FlowSettingsModal({
 
   const [name, setName] = useState(currentFlow!.name);
   const [description, setDescription] = useState(currentFlow!.description);
-  const [endpoint_name, setEndpointName] = useState(currentFlow!.endpoint_name);
+  const [endpoint_name, setEndpointName] = useState(currentFlow!.endpoint_name??"");
   const [isSaving, setIsSaving] = useState(false);
   const [disableSave, setDisableSave] = useState(true);
   function handleClick(): void {
@@ -31,7 +31,7 @@ export default function FlowSettingsModal({
     currentFlow!.name = name;
     currentFlow!.description = description;
     currentFlow!.endpoint_name =
-      endpoint_name && endpoint_name.length > 0 ? endpoint_name : undefined;
+      endpoint_name && endpoint_name.length > 0 ? endpoint_name : null;
     saveFlow(currentFlow!)
       ?.then(() => {
         setOpen(false);
@@ -58,11 +58,10 @@ export default function FlowSettingsModal({
   }, [flows]);
 
   useEffect(() => {
-    console.log(disableSave);
     if (
       (!nameLists.includes(name) && currentFlow?.name !== name) ||
       currentFlow?.description !== description ||
-      ((currentFlow?.endpoint_name ?? "" !== endpoint_name) &&
+      ((currentFlow?.endpoint_name??"") !== endpoint_name &&
         isEndpointNameValid(endpoint_name ?? "", 50))
     ) {
       setDisableSave(false);
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 992c012bd..bc8e7b544 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -303,7 +303,7 @@ export type IconComponentProps = {
 export type InputProps = {
   name: string | null;
   description: string | null;
-  endpointName?: string;
+  endpointName?: string|null;
   maxLength?: number;
   setName?: (name: string) => void;
   setDescription?: (description: string) => void;
diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts
index 95e04f5b2..3f297f115 100644
--- a/src/frontend/src/types/flow/index.ts
+++ b/src/frontend/src/types/flow/index.ts
@@ -7,7 +7,7 @@ export type FlowType = {
   id: string;
   data: ReactFlowJsonObject | null;
   description: string;
-  endpoint_name?: string;
+  endpoint_name?: string|null;
   style?: FlowStyleType;
   is_component?: boolean;
   last_tested_version?: string;