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 modal to the file input section.
 
 ### 🔧 Internal changes
 

demo/src/MemoryModelsUserInput.tsx

@@ -9,6 +9,10 @@ import {
     Tooltip,
     MenuItem,
     Stack,
+    Modal,
+    Paper,
+    Card,
+    CardContent,
 } from "@mui/material";
 import DownloadJSONButton from "./DownloadJSONButton";
 import MemoryModelsMenu from "./MemoryModelsMenu";
@@ -45,6 +49,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 +62,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 +73,55 @@ 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" }}>
+                File Input
             </Button>
-        </Stack>
+            <Modal
+                open={open}
+                onClose={handleClose}
+                data-testid="file-input-modal"
+            >
+                <Paper
+                    sx={{
+                        position: "absolute",
+                        top: "40%",
+                        left: "20%",
+                        width: "50%",
+                        padding: 2,
+                    }}
+                >
+                    <div>
+                        <Input
+                            type="file"
+                            onChange={onChange}
+                            inputProps={{
+                                accept: "application/JSON",
+                                "data-testid": "file-input",
+                            }}
+                            disableUnderline={true}
+                            sx={{ alignSelf: "center" }}
+                        />
+                    </div>
+                    <div>
+                        <Button
+                            data-testid="file-input-reapply-button"
+                            variant="contained"
+                            color="primary"
+                            disabled={!uploadedFileString}
+                            onClick={onLoadButtonClick}
+                            sx={{ textTransform: "none" }}
+                        >
+                            Load file data
+                        </Button>
+                    </div>
+                </Paper>
+            </Modal>
+        </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 modal when the page first loads", () => {
+            const modal = screen.queryByTestId("file-input-modal");
+            expect(modal).toBeNull();
+
+            const input: HTMLInputElement = screen.queryByTestId("file-input");
+            expect(input).toBeNull();
+        });
+
         it("renders an enabled input and disabled reapply button", () => {
+            fireEvent.click(screen.getByText("File Input"));
             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("File Input"));
             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("File Input"));
                 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);
                 });
             });
         });