From 6d24bbe58ccc0d5ef584d99bce1570381e84bb0f Mon Sep 17 00:00:00 2001 From: yoonie-jang Date: Thu, 26 Sep 2024 16:20:11 -0400 Subject: [PATCH 01/12] add a modal --- demo/src/MemoryModelsUserInput.tsx | 66 +++++++++++++++++++++--------- 1 file changed, 47 insertions(+), 19 deletions(-) diff --git a/demo/src/MemoryModelsUserInput.tsx b/demo/src/MemoryModelsUserInput.tsx index 69056fed..c2e853fa 100644 --- a/demo/src/MemoryModelsUserInput.tsx +++ b/demo/src/MemoryModelsUserInput.tsx @@ -9,6 +9,7 @@ import { Tooltip, MenuItem, Stack, + Modal, } from "@mui/material"; import DownloadJSONButton from "./DownloadJSONButton"; import MemoryModelsMenu from "./MemoryModelsMenu"; @@ -46,6 +47,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 { @@ -67,29 +72,52 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) { const onLoadButtonClick = () => { props.setTextData(uploadedFileString); + setOpen(false); }; return ( - - - - + + + + + + + + + ); } From 8f8ddb8692bb5c2709d9a1dec64e1949f7e7b50e Mon Sep 17 00:00:00 2001 From: yoonie-jang Date: Fri, 27 Sep 2024 14:31:53 -0400 Subject: [PATCH 02/12] style changes --- demo/src/MemoryModelsUserInput.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/demo/src/MemoryModelsUserInput.tsx b/demo/src/MemoryModelsUserInput.tsx index babf15c0..7dc02164 100644 --- a/demo/src/MemoryModelsUserInput.tsx +++ b/demo/src/MemoryModelsUserInput.tsx @@ -59,7 +59,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}`; @@ -85,6 +84,7 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) { position: "absolute", top: "40%", left: "20%", + width: "50%", backgroundColor: "white", borderRadius: 1, }} @@ -106,10 +106,10 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) { /> From d5724eb6ac8305cb8f91f0e9cddf794b3a97adfb Mon Sep 17 00:00:00 2001 From: yoonie-jang Date: Tue, 1 Oct 2024 16:46:34 -0400 Subject: [PATCH 03/12] Style changes --- demo/src/MemoryModelsUserInput.tsx | 39 ++++++++++++++++-------------- 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/demo/src/MemoryModelsUserInput.tsx b/demo/src/MemoryModelsUserInput.tsx index 7dc02164..89e1ead8 100644 --- a/demo/src/MemoryModelsUserInput.tsx +++ b/demo/src/MemoryModelsUserInput.tsx @@ -81,39 +81,42 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) { - - + +
- +
From f4cc39e570cf5691ff9c8d4209301087515d927f Mon Sep 17 00:00:00 2001 From: yoonie-jang Date: Tue, 1 Oct 2024 17:35:20 -0400 Subject: [PATCH 04/12] move styling to custom class --- demo/src/MemoryModelsUserInput.tsx | 38 ++++++++++-------------------- demo/src/css/styles.css | 13 ++++++++++ 2 files changed, 25 insertions(+), 26 deletions(-) diff --git a/demo/src/MemoryModelsUserInput.tsx b/demo/src/MemoryModelsUserInput.tsx index 89e1ead8..b1d51f84 100644 --- a/demo/src/MemoryModelsUserInput.tsx +++ b/demo/src/MemoryModelsUserInput.tsx @@ -79,32 +79,18 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) { File Input - - + +
+ +
- +
@@ -103,7 +115,7 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) { Load file data
- +
); diff --git a/demo/src/css/styles.css b/demo/src/css/styles.css index 5d7d991c..43c1785e 100644 --- a/demo/src/css/styles.css +++ b/demo/src/css/styles.css @@ -20,16 +20,3 @@ input[type="number"]::-webkit-outer-spin-button { transition: transform 0.2s ease-in-out; transform: rotate(180deg); } - -.fileInputBox { - display: flex; - position: absolute; - top: 40%; - left: 20%; - width: 50%; - background-color: white; - border-radius: 5px; - justify-content: space-between; - padding: 10px; - align-items: center; -} From 5ea62b0f9627754023e714ca6a1c6116fdfaa417 Mon Sep 17 00:00:00 2001 From: yoonie-jang Date: Wed, 2 Oct 2024 19:43:12 -0400 Subject: [PATCH 07/12] Update tests for modal --- demo/src/MemoryModelsUserInput.tsx | 6 ++++- .../__tests__/MemoryModelsUserInput.spec.tsx | 24 +++++++++++++++---- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/demo/src/MemoryModelsUserInput.tsx b/demo/src/MemoryModelsUserInput.tsx index 2c494d76..6f6dc268 100644 --- a/demo/src/MemoryModelsUserInput.tsx +++ b/demo/src/MemoryModelsUserInput.tsx @@ -81,7 +81,11 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) { - + { @@ -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", }); @@ -198,10 +215,7 @@ describe("MemoryModelsUserInput", () => { // 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); }); }); }); From c761096a9d1aba36cf1660a892cae63dd6d1c014 Mon Sep 17 00:00:00 2001 From: yoonie-jang Date: Wed, 2 Oct 2024 19:46:37 -0400 Subject: [PATCH 08/12] Comment changes --- demo/src/__tests__/MemoryModelsUserInput.spec.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/demo/src/__tests__/MemoryModelsUserInput.spec.tsx b/demo/src/__tests__/MemoryModelsUserInput.spec.tsx index 5b8419e7..69bc4da8 100644 --- a/demo/src/__tests__/MemoryModelsUserInput.spec.tsx +++ b/demo/src/__tests__/MemoryModelsUserInput.spec.tsx @@ -212,7 +212,6 @@ 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).toHaveBeenCalledWith(fileString); From b68b3eaaae54f219befec149b4a305ddd8871499 Mon Sep 17 00:00:00 2001 From: yoonie-jang Date: Wed, 2 Oct 2024 21:59:12 -0400 Subject: [PATCH 09/12] Rename button and remove unused imports --- demo/src/MemoryModelsUserInput.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/demo/src/MemoryModelsUserInput.tsx b/demo/src/MemoryModelsUserInput.tsx index 6f6dc268..f1e49298 100644 --- a/demo/src/MemoryModelsUserInput.tsx +++ b/demo/src/MemoryModelsUserInput.tsx @@ -11,8 +11,6 @@ import { Stack, Modal, Paper, - Card, - CardContent, } from "@mui/material"; import DownloadJSONButton from "./DownloadJSONButton"; import MemoryModelsMenu from "./MemoryModelsMenu"; @@ -79,7 +77,7 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) { return (
Date: Wed, 2 Oct 2024 22:02:10 -0400 Subject: [PATCH 10/12] Update tests --- demo/src/__tests__/MemoryModelsUserInput.spec.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/demo/src/__tests__/MemoryModelsUserInput.spec.tsx b/demo/src/__tests__/MemoryModelsUserInput.spec.tsx index 69bc4da8..b1108aca 100644 --- a/demo/src/__tests__/MemoryModelsUserInput.spec.tsx +++ b/demo/src/__tests__/MemoryModelsUserInput.spec.tsx @@ -142,7 +142,7 @@ describe("MemoryModelsUserInput", () => { }); it("renders an enabled input and disabled reapply button", () => { - fireEvent.click(screen.getByText("File Input")); + fireEvent.click(screen.getByText("Upload JSON File")); const input: HTMLInputElement = screen.getByTestId("file-input"); expect(input).toHaveProperty("disabled", false); @@ -164,7 +164,7 @@ describe("MemoryModelsUserInput", () => { type: "application/json", } ); - fireEvent.click(screen.getByText("File Input")); + 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 @@ -183,7 +183,7 @@ describe("MemoryModelsUserInput", () => { let input: HTMLInputElement; beforeEach(async () => { - fireEvent.click(screen.getByText("File Input")); + fireEvent.click(screen.getByText("Upload JSON File")); const file = new File([fileString], "test.json", { type: "application/json", }); From aeef1710cd6b5f765b199c130df9096faa607462 Mon Sep 17 00:00:00 2001 From: yoonie-jang Date: Thu, 3 Oct 2024 15:44:41 -0400 Subject: [PATCH 11/12] 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) { - - -
- -
-
- -
- - + + + + + + +
); } 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(); From 01e22d77baf6cc78cdd16e35fe0027dc5a87bc30 Mon Sep 17 00:00:00 2001 From: yoonie-jang Date: Thu, 3 Oct 2024 15:45:55 -0400 Subject: [PATCH 12/12] Update changelog and remove unused imports --- CHANGELOG.md | 2 +- demo/src/MemoryModelsUserInput.tsx | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 28dc30fa..06de1939 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,7 +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. +- Added a dialog to the file input section. ### 🔧 Internal changes diff --git a/demo/src/MemoryModelsUserInput.tsx b/demo/src/MemoryModelsUserInput.tsx index a7c7bb73..d6209fc4 100644 --- a/demo/src/MemoryModelsUserInput.tsx +++ b/demo/src/MemoryModelsUserInput.tsx @@ -9,8 +9,6 @@ import { Tooltip, MenuItem, Stack, - Modal, - Paper, Dialog, DialogActions, DialogContent,