Fixing bugs found in demo

florist/api/servers/config_parsers.py

@@ -1,6 +1,8 @@
 """Parsers for FL server configurations."""
 
 import json
+from ast import literal_eval
+from contextlib import suppress
 from enum import Enum
 from typing import Any, Dict, List
 
@@ -26,7 +28,13 @@ def parse(cls, config_json_str: str) -> Dict[str, Any]:
         :return: (Dict[str, Any]) The configuration JSON string parsed as a dictionary.
         """
         config = json.loads(config_json_str)
-        assert isinstance(config, dict)
+        assert isinstance(config, dict), "config is not a dictionary"
+
+        for config_name in config:
+            # converting the value to number if it is a number
+            # if it throws an exception it means it's not a number, so suppress and leave as is
+            with suppress(Exception):
+                config[config_name] = literal_eval(config[config_name])
 
         mandatory_fields = cls.mandatory_fields()
 

florist/app/jobs/edit/page.tsx

@@ -60,6 +60,14 @@ export function makeEmptyClientInfo() {
     };
 }
 
+function formatServerConfig(serverConfig: Array<ServerConfig>): string {
+    const serverConfigDict = {};
+    for (let sc of serverConfig) {
+        serverConfigDict[sc.name] = sc.value;
+    }
+    return JSON.stringify(serverConfigDict);
+}
+
 export default function EditJob(): ReactElement {
     return (
         <div className="col-7 align-items-center">
@@ -94,7 +102,7 @@ export function EditJobForm(): ReactElement {
 
         const job = { ...state.job };
         // Server config is a json string, so changing it here before sending the data over
-        job.server_config = JSON.stringify(job.server_config);
+        job.server_config = formatServerConfig(job.server_config);
         await post("/api/server/job", JSON.stringify(job));
     }
 

florist/app/jobs/page.tsx

@@ -111,15 +111,27 @@ export function StartJobButton({ rowId, jobId }: { rowId: number; jobId: string
     // Only refresh the job data if there is an error or response
     useEffect(() => refreshJobsByJobStatus(Object.keys(validStatuses)), [error, response]);
 
+    let buttonClasses = "btn btn-sm mb-0 ";
+     if (isLoading || response) {
+        // If is loading or if a successful response has been received,
+        // disable the button to avoid double submit.
+        buttonClasses += "btn-secondary disabled";
+    } else {
+        buttonClasses += "btn-primary";
+    }
+
     return (
         <div>
             <button
                 data-testid={`start-training-button-${rowId}`}
                 onClick={handleClickStartJobButton}
-                className="btn btn-primary btn-sm mb-0"
+                className={buttonClasses}
                 title="Start"
             >
-                <i className="material-icons text-sm">play_circle_outline</i>
+                { isLoading || response ?
+                    <span class="spinner-border spinner-border-sm align-middle"></span> :
+                    <i className="material-icons text-sm">play_circle_outline</i>
+                }
             </button>
         </div>
     );

florist/tests/unit/app/jobs/edit/page.test.tsx

@@ -356,7 +356,10 @@ describe("New Job Page", () => {
             const submitButton = container.querySelector("button#job-post");
             await act(async () => await submitButton.click());
 
-            testJob.server_config = JSON.stringify(testJob.server_config);
+            testJob.server_config = JSON.stringify({
+                [testJob.server_config[0].name]: testJob.server_config[0].value,
+                [testJob.server_config[1].name]: testJob.server_config[1].value,
+            });
             expect(postMock).toBeCalledWith("/api/server/job", JSON.stringify(testJob));
         });
 
@@ -370,7 +373,7 @@ describe("New Job Page", () => {
             await act(async () => await submitButton.click());
 
             const testJob = makeEmptyJob();
-            testJob.server_config = JSON.stringify(testJob.server_config);
+            testJob.server_config = JSON.stringify({"": ""});
             expect(postMock).toBeCalledWith("/api/server/job", JSON.stringify(testJob));
 
             const errorAlert = container.querySelector("div#job-save-error");