feat: use input element directly

Previously, a button proxy was used which required the use of complicated reference management. Using the HTML `input` element directly simplifies the implementation.

Also moved some styles.

ref: N25B-189

src/index.css

@@ -26,7 +26,6 @@ html, body, #root {
 }
 
 a {
-  font-weight: 500;
   color: canvastext;
 }
 

src/pages/VisProgPage/VisProg.module.css

@@ -26,14 +26,6 @@
     align-items: center;
 }
 
-.save-load-panel {
-    outline: 2.5pt solid black;
-    border-radius: 0 0 5pt 5pt;
-    border-color: dimgrey;
-    background-color: canvas;
-    align-items: center;
-}
-
 .dnd-node-container {
     background-color: canvas;
     justify-content: center;
@@ -134,23 +126,3 @@
     outline: red solid 2pt;
     filter: drop-shadow(0 0 0.25rem red);
 }
-
-.save-button-like {
-    padding: 3px 10px;
-    background-color: canvas;
-    border-radius: 5pt;
-    outline: dodgerblue solid 2pt;
-    filter: drop-shadow(0 0 0.25rem dodgerblue);
-}
-
-a.save-button-like {
-    display: inline-block;       
-    text-decoration: none;      
-    color: inherit;              
-    cursor: pointer;            
-    transition: filter 200ms, background-color 200ms;
-}
-
-a.save-button-like:hover {
-    filter: drop-shadow(0 0 0.5rem dodgerblue);
-}

src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.module.css

@@ -0,0 +1,30 @@
+.save-load-panel {
+  border-radius: 0 0 5pt 5pt;
+  background-color: canvas;
+}
+
+label.file-input-button {
+  cursor: pointer;
+  outline: forestgreen solid 2pt;
+  filter: drop-shadow(0 0 0.25rem forestgreen);
+  transition: filter 200ms;
+
+  input[type="file"] {
+    display: none;
+  }
+
+  &:hover {
+    filter: drop-shadow(0 0 0.5rem forestgreen);
+  }
+}
+
+.save-button {
+  text-decoration: none;
+  outline: dodgerblue solid 2pt;
+  filter: drop-shadow(0 0 0.25rem dodgerblue);
+  transition: filter 200ms;
+
+  &:hover {
+    filter: drop-shadow(0 0 0.5rem dodgerblue);
+  }
+}

src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.tsx

@@ -1,7 +1,7 @@
-import { useRef, useState, useEffect } from "react";
+import {type ChangeEvent, useRef, useState} from "react";
 import useFlowStore from "../VisProgStores";
-import styles from "../../VisProg.module.css";
+import visProgStyles from "../../VisProg.module.css";
-import { cleanup } from "@testing-library/react";
+import styles from "./SaveLoadPanel.module.css";
 import { makeProjectBlob, type SavedProject } from "../../../../utils/SaveLoad";
 
 export default function SaveLoadPanel() {
@@ -14,99 +14,55 @@ export default function SaveLoadPanel() {
 
   // ref to the file input
   const inputRef = useRef<HTMLInputElement | null>(null);
-  // ref to hold the resolver for the currently pending load promise
-  const resolverRef = useRef<((p: SavedProject | null) => void) | null>(null);
 
-  useEffect(() => {
+  const onSave = async (nameGuess = "visual-program") => {
-    return () => {
-      if (resolverRef.current) {
-        resolverRef.current(null);
-        resolverRef.current = null;
-      }
-    };
-  }, []);
-
-  const onSave = async () => {
-    const nameGuess = "visual-program";
     const blob = makeProjectBlob(nameGuess, nodes, edges);
     const url = URL.createObjectURL(blob);
     setSaveUrl(url);
   };
 
-  const onLoad = async () => {
+  // input change handler updates the graph with a parsed JSON file
+  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
     try {
-      const proj = await new Promise<SavedProject | null>((resolve) => {
+      const text = await file.text();
-        resolverRef.current = resolve;
+      const parsed = JSON.parse(text) as SavedProject;
-        inputRef.current?.click();
+      if (!parsed.nodes || !parsed.edges) throw new Error("Invalid file format");
-      });
+      setNodes(parsed.nodes);
-      // clear stored resolver
+      setEdges(parsed.edges);
-      resolverRef.current = null;
-
-      if (!proj) return;
-
-      cleanup();
-      setNodes(proj.nodes);
-      setEdges(proj.edges);
     } catch (e) {
       console.error(e);
       alert("Loading failed. See console.");
-    }
+    } finally {
-  };
+      // allow re-selecting same file next time
-
+      if (inputRef.current) inputRef.current.value = "";
-  // input change handler resolves the onLoad promise with parsed project or null
-  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    try {
-      const file = e.target.files?.[0];
-      if (!file) {
-        resolverRef.current?.(null);
-        resolverRef.current = null;
-        return;
-      }
-      try {
-        const text = await file.text();
-        const parsed = JSON.parse(text) as SavedProject;
-        resolverRef.current?.(parsed ?? null);
-      } catch {
-        resolverRef.current?.(null);
-      } finally {
-        // allow re-selecting same file next time
-        if (inputRef.current) inputRef.current.value = "";
-        resolverRef.current = null;
-      }
-    } catch  {
-      resolverRef.current?.(null);
-      resolverRef.current = null;
     }
   };
 
   const defaultName = "visual-program";
   return (
-    <div className={`flex-col gap-lg padding-md ${styles.saveLoadPanel}`}>
+    <div className={`flex-col gap-lg padding-md border-lg ${styles.saveLoadPanel}`}>
       <div className="description">You can save and load your graph here.</div>
-      <div className={`flex-row gap-lg ${styles.dndNodeContainer}`}>
+      <div className={`flex-row gap-lg justify-center`}>
         <a
           href={saveUrl ?? "#"}
-          onClick={() => {
+          onClick={() => onSave(defaultName)}
-            onSave();
-          }}
           download={`${defaultName}.json`}
-          className={styles["save-button-like"]}
+          className={`${visProgStyles.draggableNode} ${styles.saveButton}`}
         >
           Save Graph
         </a>
 
-        <button onClick={onLoad} className={styles.draggableNodeNorm}>
+        <label className={`${visProgStyles.draggableNode} ${styles.fileInputButton}`}>
+          <input
+            ref={inputRef}
+            type="file"
+            accept=".visprog.json,.json,.txt,application/json,text/plain"
+            onChange={handleFileChange}
+          />
           Load Graph
-        </button>
+        </label>
-
-        <input
-          ref={inputRef}
-          type="file"
-          accept=".visprog.json,.json,.txt,application/json,text/plain"
-          onChange={handleFileChange}
-          style={{ display: "none" }}
-          aria-hidden
-        />
       </div>
     </div>
   );

test/pages/visProgPage/visualProgrammingUI/components/SaveLoadPanel.test.tsx

@@ -106,22 +106,22 @@ describe("SaveLoadPanel - combined tests", () => {
 
   test("onLoad with invalid JSON does not update store", async () => {
     const file = new File(["not json"], "bad.json", { type: "application/json" });
+    file.text = jest.fn(() => Promise.resolve(`{"bad json`));
+
+    window.alert = jest.fn();
 
     render(<SaveLoadPanel />);
     const input = document.querySelector('input[type="file"]') as HTMLInputElement;
     expect(input).toBeTruthy();
 
-    // Click Load to install the resolver
+    // Give some input
-    const loadButton = screen.getByRole("button", { name: /load graph/i });
+    act(() => {
-
-    // Do click and change inside same act to ensure resolver is set
-    await act(async () => {
-      fireEvent.click(loadButton);
       fireEvent.change(input, { target: { files: [file] } });
-      await Promise.resolve();
     });
 
     await waitFor(() => {
+      expect(window.alert).toHaveBeenCalledTimes(1);
+
       const nodesAfter = useFlowStore.getState().nodes;
       expect(nodesAfter).toHaveLength(0);
       expect(input.value).toBe("");
@@ -134,7 +134,7 @@ describe("SaveLoadPanel - combined tests", () => {
     expect(input).toBeTruthy();
 
     // Click Load to set resolver
-    const loadButton = screen.getByRole("button", { name: /load graph/i });
+    const loadButton = screen.getByLabelText(/load graph/i);
 
     await act(async () => {
       fireEvent.click(loadButton);