Add file input dialog

CHANGELOG.md

@@ -19,6 +19,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 -   Made text input box use a monospace font
 -   Disabled download buttons when there is no input/output.
+-   Added a dialog to the file input section.
 
 ### 🔧 Internal changes
 

demo/src/MemoryModelsUserInput.tsx

@@ -9,6 +9,9 @@ import {
     Tooltip,
     MenuItem,
     Stack,
+    Dialog,
+    DialogActions,
+    DialogContent,
 } from "@mui/material";
 import DownloadJSONButton from "./DownloadJSONButton";
 import MemoryModelsMenu from "./MemoryModelsMenu";
@@ -45,6 +48,10 @@ type MemoryModelsUserInputPropTypes = MemoryModelsFileInputPropTypes &
 
 function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) {
     const [uploadedFileString, setUploadedFileString] = useState("");
+    const [open, setOpen] = useState(false);
+
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
 
     const onChange = (event) => {
         try {
@@ -54,7 +61,6 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) {
             fileReader.onload = (event) => {
                 const fileString = event.target.result as string;
                 setUploadedFileString(fileString);
-                props.setTextData(fileString);
             };
         } catch (error) {
             const errorMessage = `Error reading uploaded file as text. Please ensure it's in UTF-8 encoding: ${error.message}`;
@@ -66,29 +72,45 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) {
 
     const onLoadButtonClick = () => {
         props.setTextData(uploadedFileString);
+        setOpen(false);
     };
 
     return (
-        <Stack direction={"row"} spacing={2}>
-            <Input
-                type="file"
-                onChange={onChange}
-                inputProps={{
-                    accept: "application/JSON",
-                    "data-testid": "file-input",
-                }}
-                disableUnderline={true}
-            />
-            <Button
-                data-testid="file-input-reapply-button"
-                variant="contained"
-                disabled={!uploadedFileString}
-                onClick={onLoadButtonClick}
-                sx={{ textTransform: "none" }}
-            >
-                Load file data
+        <div>
+            <Button onClick={handleOpen} sx={{ textTransform: "none" }}>
+                Upload JSON File
             </Button>
-        </Stack>
+            <Dialog
+                open={open}
+                onClose={handleClose}
+                data-testid="file-input-dialog"
+            >
+                <DialogContent>
+                    <Input
+                        type="file"
+                        onChange={onChange}
+                        inputProps={{
+                            accept: "application/JSON",
+                            "data-testid": "file-input",
+                        }}
+                        disableUnderline={true}
+                        sx={{ alignSelf: "center" }}
+                    />
+                </DialogContent>
+                <DialogActions>
+                    <Button
+                        data-testid="file-input-reapply-button"
+                        variant="contained"
+                        color="primary"
+                        disabled={!uploadedFileString}
+                        onClick={onLoadButtonClick}
+                        sx={{ textTransform: "none" }}
+                    >
+                        Load file data
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </div>
     );
 }
 

demo/src/__tests__/MemoryModelsUserInput.spec.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import {
+    fireEvent,
+    getByText,
+    render,
+    screen,
+    waitFor,
+} from "@testing-library/react";
 import MemoryModelsUserInput from "../MemoryModelsUserInput";
 
 describe("MemoryModelsUserInput", () => {
@@ -127,7 +133,16 @@ describe("MemoryModelsUserInput", () => {
             jest.restoreAllMocks();
         });
 
+        it("does not render the dialog when the page first loads", () => {
+            const dialog = screen.queryByTestId("file-input-dialog");
+            expect(dialog).toBeNull();
+
+            const input: HTMLInputElement = screen.queryByTestId("file-input");
+            expect(input).toBeNull();
+        });
+
         it("renders an enabled input and disabled reapply button", () => {
+            fireEvent.click(screen.getByText("Upload JSON File"));
             const input: HTMLInputElement = screen.getByTestId("file-input");
             expect(input).toHaveProperty("disabled", false);
 
@@ -149,6 +164,7 @@ describe("MemoryModelsUserInput", () => {
                     type: "application/json",
                 }
             );
+            fireEvent.click(screen.getByText("Upload JSON File"));
             const input: HTMLInputElement = screen.getByTestId("file-input");
             await waitFor(() => {
                 // this needs to be awaited because of fileReader.onload being async
@@ -167,6 +183,7 @@ describe("MemoryModelsUserInput", () => {
             let input: HTMLInputElement;
 
             beforeEach(async () => {
+                fireEvent.click(screen.getByText("Upload JSON File"));
                 const file = new File([fileString], "test.json", {
                     type: "application/json",
                 });
@@ -195,13 +212,9 @@ describe("MemoryModelsUserInput", () => {
                 });
 
                 await waitFor(() => {
-                    // once from reapplyBtn onChange, once from MemoryModelsTextInput handleTextFieldChange
                     // if put within the same waitFor block as fireEvent.click(reapplyBtn), this test always passes
                     // even with the wrong expect
-                    expect(setTextDataMock).toHaveBeenNthCalledWith(
-                        2,
-                        fileString
-                    );
+                    expect(setTextDataMock).toHaveBeenCalledWith(fileString);
                 });
             });
         });