From 1cdc8e0efcda51c10a2da3f060eef0dc808fba50 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 5 Jun 2024 10:11:59 -0300
Subject: [PATCH] Changed debounce to use promise-debounce, making the Save
 promise work correctly

---
 src/frontend/package-lock.json                      | 6 ++++++
 src/frontend/package.json                           | 1 +
 src/frontend/src/modals/flowSettingsModal/index.tsx | 5 ++++-
 src/frontend/src/stores/flowsManagerStore.ts        | 3 ++-
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 363415ccf..69e621774 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -40,6 +40,7 @@
         "class-variance-authority": "^0.6.1",
         "clsx": "^1.2.1",
         "cmdk": "^1.0.0",
+        "debounce-promise": "^3.1.2",
         "dompurify": "^3.0.5",
         "dotenv": "^16.4.5",
         "esbuild": "^0.17.19",
@@ -5670,6 +5671,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/debounce-promise": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/debounce-promise/-/debounce-promise-3.1.2.tgz",
+      "integrity": "sha512-rZHcgBkbYavBeD9ej6sP56XfG53d51CD4dnaw989YX/nZ/ZJfgRx/9ePKmTNiUiyQvh4mtrMoS3OAWW+yoYtpg=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 053a246ee..84feb826f 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -35,6 +35,7 @@
     "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",
     "cmdk": "^1.0.0",
+    "debounce-promise": "^3.1.2",
     "dompurify": "^3.0.5",
     "dotenv": "^16.4.5",
     "esbuild": "^0.17.19",
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index dbe861e00..022bd9aa0 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -23,14 +23,16 @@ 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 [isSaving, setIsSaving] = useState(false);
   function handleClick(): void {
+    setIsSaving(true);
     currentFlow!.name = name;
     currentFlow!.description = description;
     currentFlow!.endpoint_name = endpoint_name;
     saveFlow(currentFlow!)
       ?.then(() => {
         setOpen(false);
+        setIsSaving(false);
       })
       .catch((err) => {
         useAlertStore.getState().setErrorData({
@@ -79,6 +81,7 @@ export default function FlowSettingsModal({
           label: "Save",
           disabled: nameLists.includes(name) && name !== currentFlow!.name,
           dataTestId: "save-flow-settings",
+          loading: isSaving,
         }}
       />
     </BaseModal>
diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index b6baaa180..28537a56e 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -1,4 +1,5 @@
-import { cloneDeep, debounce } from "lodash";
+import { cloneDeep } from "lodash";
+import * as debounce from "debounce-promise";
 import { Edge, Node, Viewport, XYPosition } from "reactflow";
 import { create } from "zustand";
 import { SAVE_DEBOUNCE_TIME } from "../constants/constants";