From aeef1710cd6b5f765b199c130df9096faa607462 Mon Sep 17 00:00:00 2001
From: yoonie-jang <yoonie.jang@mail.utoronto.ca>
Date: Thu, 3 Oct 2024 15:44:41 -0400
Subject: [PATCH] Convert modal to dialog

---
 demo/src/MemoryModelsUserInput.tsx            | 67 +++++++++----------
 .../__tests__/MemoryModelsUserInput.spec.tsx  |  6 +-
 2 files changed, 33 insertions(+), 40 deletions(-)

diff --git a/demo/src/MemoryModelsUserInput.tsx b/demo/src/MemoryModelsUserInput.tsx
index f1e49298..a7c7bb73 100644
--- a/demo/src/MemoryModelsUserInput.tsx
+++ b/demo/src/MemoryModelsUserInput.tsx
@@ -11,6 +11,9 @@ import {
     Stack,
     Modal,
     Paper,
+    Dialog,
+    DialogActions,
+    DialogContent,
 } from "@mui/material";
 import DownloadJSONButton from "./DownloadJSONButton";
 import MemoryModelsMenu from "./MemoryModelsMenu";
@@ -79,46 +82,36 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) {
             <Button onClick={handleOpen} sx={{ textTransform: "none" }}>
                 Upload JSON File
             </Button>
-            <Modal
+            <Dialog
                 open={open}
                 onClose={handleClose}
-                data-testid="file-input-modal"
+                data-testid="file-input-dialog"
             >
-                <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>
+                <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>
     );
 }
diff --git a/demo/src/__tests__/MemoryModelsUserInput.spec.tsx b/demo/src/__tests__/MemoryModelsUserInput.spec.tsx
index b1108aca..1e4751d2 100644
--- a/demo/src/__tests__/MemoryModelsUserInput.spec.tsx
+++ b/demo/src/__tests__/MemoryModelsUserInput.spec.tsx
@@ -133,9 +133,9 @@ 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();
+        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();