From 8ca80e05a986cbe48af568762f339106d08203e9 Mon Sep 17 00:00:00 2001
From: Krzysztof Czerwinski <34861343+kcze@users.noreply.github.com>
Date: Thu, 19 Dec 2024 13:42:04 +0000
Subject: [PATCH] fix(frontend): Disable agent save button when saving or
 running (#9077)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Now agent can be saved multiple times.

### Changes 🏗️

Disable agent save button when saving or running.

### Checklist 📋

#### For code changes:
- [ ] I have clearly listed my changes in the PR description
- [ ] I have made a test plan
- [ ] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [ ] ...

<details>
  <summary>Example test plan</summary>

  - [ ] Create from scratch and execute an agent with at least 3 blocks
- [ ] Import an agent from file upload, and confirm it executes
correctly
  - [ ] Upload agent to marketplace
- [ ] Import an agent from marketplace and confirm it executes correctly
  - [ ] Edit an agent from monitor, and confirm it executes correctly
</details>

#### For configuration changes:
- [ ] `.env.example` is updated or already compatible with my changes
- [ ] `docker-compose.yml` is updated or already compatible with my
changes
- [ ] I have included a list of my configuration changes in the PR
description (under **Changes**)

<details>
  <summary>Examples of configuration changes</summary>

  - Changing ports
  - Adding new services that need to communicate with each other
  - Secrets or environment variable changes
  - New or infrastructure changes such as databases
</details>
---
 autogpt_platform/frontend/src/components/Flow.tsx           | 5 ++++-
 .../frontend/src/components/edit/control/SaveControl.tsx    | 6 ++++++
 autogpt_platform/frontend/src/hooks/useAgentGraph.ts        | 3 +++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/autogpt_platform/frontend/src/components/Flow.tsx b/autogpt_platform/frontend/src/components/Flow.tsx
index 50c319d0ab1b..a8b45453f007 100644
--- a/autogpt_platform/frontend/src/components/Flow.tsx
+++ b/autogpt_platform/frontend/src/components/Flow.tsx
@@ -98,7 +98,9 @@ const FlowEditor: React.FC<{
     requestSaveAndRun,
     requestStopRun,
     scheduleRunner,
+    isSaving,
     isRunning,
+    isStopping,
     isScheduling,
     setIsScheduling,
     nodes,
@@ -679,7 +681,8 @@ const FlowEditor: React.FC<{
             botChildren={
               <SaveControl
                 agentMeta={savedAgent}
-                onSave={(isTemplate) => requestSave(isTemplate ?? false)}
+                canSave={!isSaving && !isRunning && !isStopping}
+                onSave={() => requestSave()}
                 agentDescription={agentDescription}
                 onDescriptionChange={setAgentDescription}
                 agentName={agentName}
diff --git a/autogpt_platform/frontend/src/components/edit/control/SaveControl.tsx b/autogpt_platform/frontend/src/components/edit/control/SaveControl.tsx
index 1ebf7d7eee46..bfa0408dbad4 100644
--- a/autogpt_platform/frontend/src/components/edit/control/SaveControl.tsx
+++ b/autogpt_platform/frontend/src/components/edit/control/SaveControl.tsx
@@ -21,6 +21,7 @@ interface SaveControlProps {
   agentMeta: GraphMeta | null;
   agentName: string;
   agentDescription: string;
+  canSave: boolean;
   onSave: () => void;
   onNameChange: (name: string) => void;
   onDescriptionChange: (description: string) => void;
@@ -31,6 +32,9 @@ interface SaveControlProps {
  * A SaveControl component to be used within the ControlPanel. It allows the user to save the agent.
  * @param {Object} SaveControlProps - The properties of the SaveControl component.
  * @param {GraphMeta | null} SaveControlProps.agentMeta - The agent's metadata, or null if creating a new agent.
+ * @param {string} SaveControlProps.agentName - The agent's name.
+ * @param {string} SaveControlProps.agentDescription - The agent's description.
+ * @param {boolean} SaveControlProps.canSave - Whether the button to save the agent should be enabled.
  * @param {() => void} SaveControlProps.onSave - Function to save the agent.
  * @param {(name: string) => void} SaveControlProps.onNameChange - Function to handle name changes.
  * @param {(description: string) => void} SaveControlProps.onDescriptionChange - Function to handle description changes.
@@ -38,6 +42,7 @@ interface SaveControlProps {
  */
 export const SaveControl = ({
   agentMeta,
+  canSave,
   onSave,
   agentName,
   onNameChange,
@@ -152,6 +157,7 @@ export const SaveControl = ({
               onClick={handleSave}
               data-id="save-control-save-agent"
               data-testid="save-control-save-agent-button"
+              disabled={!canSave}
             >
               Save Agent
             </Button>
diff --git a/autogpt_platform/frontend/src/hooks/useAgentGraph.ts b/autogpt_platform/frontend/src/hooks/useAgentGraph.ts
index a57ce027d37d..cd1fe4747444 100644
--- a/autogpt_platform/frontend/src/hooks/useAgentGraph.ts
+++ b/autogpt_platform/frontend/src/hooks/useAgentGraph.ts
@@ -865,6 +865,9 @@ export default function useAgentGraph(
   }, [_saveAgent, toast]);
 
   const requestSave = useCallback(() => {
+    if (saveRunRequest.state !== "none") {
+      return;
+    }
     saveAgent();
     setSaveRunRequest({
       request: "save",