Create Global Context

client/components/edit/EditParentsButton.test.tsx

@@ -12,18 +12,31 @@ jest.mock("../../context/EditorContext", () => ({
     },
 }));
 
+const mockUseGlobalContext = jest.fn();
+jest.mock("../../context/GlobalContext", () => ({
+    useGlobalContext: () => {
+        return mockUseGlobalContext();
+    },
+}));
+
 describe("EditParentsButton", () => {
     let editorValues;
+    let globalValues;
     let pid: string;
     beforeEach(() => {
         pid = "foo:123";
         editorValues = {
             action: {
                 setParentsModalActivePid: jest.fn(),
-                toggleParentsModal: jest.fn(),
             },
         };
         mockUseEditorContext.mockReturnValue(editorValues);
+        globalValues = {
+            action: {
+                openModal: jest.fn(),
+            },
+        };
+        mockUseGlobalContext.mockReturnValue(globalValues);
     });
 
     it("renders", () => {
@@ -36,6 +49,6 @@ describe("EditParentsButton", () => {
         await userEvent.setup().click(screen.getByRole("button"));
 
         expect(editorValues.action.setParentsModalActivePid).toHaveBeenCalledWith(pid);
-        expect(editorValues.action.toggleParentsModal).toHaveBeenCalled();
+        expect(globalValues.action.openModal).toHaveBeenCalledWith("parents");
     });
 });

client/components/edit/EditParentsButton.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useGlobalContext } from "../../context/GlobalContext";
 import { useEditorContext } from "../../context/EditorContext";
 
 export interface ObjectStatusProps {
@@ -7,12 +8,16 @@ export interface ObjectStatusProps {
 
 export const EditParentsButton = ({ pid }: ObjectStatusProps): React.ReactElement => {
     const {
-        action: { setParentsModalActivePid, toggleParentsModal },
+        action: { openModal },
+    } = useGlobalContext();
+
+    const {
+        action: { setParentsModalActivePid },
     } = useEditorContext();
 
     const clickAction = () => {
         setParentsModalActivePid(pid);
-        toggleParentsModal();
+        openModal("parents");
     };
     return <button onClick={clickAction}>Edit Parents</button>;
 };

client/components/edit/EditorSnackbar.test.tsx

@@ -5,18 +5,18 @@ import userEvent from "@testing-library/user-event";
 import renderer from "react-test-renderer";
 import EditorSnackbar from "./EditorSnackbar";
 
-const mockUseEditorContext = jest.fn();
-jest.mock("../../context/EditorContext", () => ({
-    useEditorContext: () => {
-        return mockUseEditorContext();
+const mockUseGlobalContext = jest.fn();
+jest.mock("../../context/GlobalContext", () => ({
+    useGlobalContext: () => {
+        return mockUseGlobalContext();
     },
 }));
 jest.mock("./children/ChildList", () => () => "ChildList");
 
 describe("EditorSnackbar", () => {
-    let editorValues;
+    let globalValues;
     beforeEach(() => {
-        editorValues = {
+        globalValues = {
             state: {
                 snackbarState: {
                     message: "test1",
@@ -28,7 +28,7 @@ describe("EditorSnackbar", () => {
                 setSnackbarState: jest.fn(),
             },
         };
-        mockUseEditorContext.mockReturnValue(editorValues);
+        mockUseGlobalContext.mockReturnValue(globalValues);
     });
 
     it("renders", () => {
@@ -47,7 +47,7 @@ describe("EditorSnackbar", () => {
 
         await userEvent.setup().click(screen.getByRole("button"));
 
-        expect(editorValues.action.setSnackbarState).toHaveBeenCalledWith({
+        expect(globalValues.action.setSnackbarState).toHaveBeenCalledWith({
             open: false,
             message: "",
             severity: "info",

client/components/edit/EditorSnackbar.tsx

@@ -3,15 +3,15 @@ import Alert from "@mui/material/Alert";
 import IconButton from "@mui/material/IconButton";
 import Snackbar from "@mui/material/Snackbar";
 import CloseIcon from "@mui/icons-material/Close";
-import { useEditorContext } from "../../context/EditorContext";
+import { useGlobalContext } from "../../context/GlobalContext";
 
 const EditorSnackbar = (): React.ReactElement => {
     const {
         state: {
             snackbarState: { message, open, severity },
         },
         action: { setSnackbarState },
-    } = useEditorContext();
+    } = useGlobalContext();
 
     const handleClose = () => {
         setSnackbarState({

client/components/edit/ObjectStatus.test.tsx

@@ -5,14 +5,18 @@ import renderer from "react-test-renderer";
 import { ObjectStatusProps, ObjectStatus } from "./ObjectStatus";
 import { EditorContextProvider, ObjectDetails } from "../../context/EditorContext";
 import { FetchContextProvider } from "../../context/FetchContext";
+import { GlobalContextProvider } from "../../context/GlobalContext";
 
 function getMountedObjectStatusComponent(props: ObjectStatusProps) {
     return renderer.create(
-        <FetchContextProvider>
-            <EditorContextProvider>
-                <ObjectStatus {...props} />
-            </EditorContextProvider>
-        </FetchContextProvider>,
+        <GlobalContextProvider>
+            <FetchContextProvider>
+                <EditorContextProvider>
+                    <ObjectStatus {...props} />
+                </EditorContextProvider>
+            </FetchContextProvider>
+            ,
+        </GlobalContextProvider>,
     );
 }
 

client/components/edit/ObjectStatus.tsx

@@ -1,5 +1,6 @@
 import styles from "./ObjectStatus.module.css";
 import React from "react";
+import { useGlobalContext } from "../../context/GlobalContext";
 import { useEditorContext } from "../../context/EditorContext";
 import ObjectLoader from "./ObjectLoader";
 
@@ -8,17 +9,20 @@ export interface ObjectStatusProps {
 }
 
 export const ObjectStatus = ({ pid }: ObjectStatusProps): React.ReactElement => {
+    const {
+        action: { openModal },
+    } = useGlobalContext();
     const {
         state: { objectDetailsStorage },
-        action: { setStateModalActivePid, toggleStateModal },
+        action: { setStateModalActivePid },
     } = useEditorContext();
     const loaded = Object.prototype.hasOwnProperty.call(objectDetailsStorage, pid);
     const details = loaded ? objectDetailsStorage[pid] : {};
 
     const stateTxt = details.state ?? "Unknown";
     const clickAction = () => {
         setStateModalActivePid(pid);
-        toggleStateModal();
+        openModal("state");
     };
     const stateMsg = loaded ? (
         <button onClick={clickAction} className={styles[stateTxt.toLowerCase()]}>

client/components/edit/StateModal.test.tsx

@@ -6,6 +6,13 @@ import userEvent from "@testing-library/user-event";
 import renderer from "react-test-renderer";
 import StateModal from "./StateModal";
 
+const mockUseGlobalContext = jest.fn();
+jest.mock("../../context/GlobalContext", () => ({
+    useGlobalContext: () => {
+        return mockUseGlobalContext();
+    },
+}));
+
 const mockUseEditorContext = jest.fn();
 jest.mock("../../context/EditorContext", () => ({
     useEditorContext: () => {
@@ -41,38 +48,51 @@ jest.mock("@mui/material/Grid", () => (props) => props.children);
 jest.mock("@mui/icons-material/Close", () => () => "CloseIcon");
 
 describe("StateModal", () => {
+    let globalValues;
     let editorValues;
     let fetchContextValues;
     const pid = "foo:123";
     beforeEach(() => {
+        globalValues = {
+            action: {
+                closeModal: jest.fn(),
+                isModalOpen: jest.fn(),
+                openModal: jest.fn(),
+                setSnackbarState: jest.fn(),
+            },
+        };
         editorValues = {
             state: {
                 stateModalActivePid: pid,
-                isStateModalOpen: true,
                 objectDetailsStorage: {},
             },
             action: {
                 removeFromObjectDetailsStorage: jest.fn(),
-                setSnackbarState: jest.fn(),
-                toggleStateModal: jest.fn(),
             },
         };
-        mockUseEditorContext.mockReturnValue(editorValues);
         fetchContextValues = {
             action: {
                 fetchJSON: jest.fn(),
                 fetchText: jest.fn(),
             },
         };
+        mockUseGlobalContext.mockReturnValue(globalValues);
+        mockUseEditorContext.mockReturnValue(editorValues);
         mockUseFetchContext.mockReturnValue(fetchContextValues);
+        globalValues.action.isModalOpen.mockReturnValue(true);
+    });
+
+    afterEach(() => {
+        jest.resetAllMocks();
     });
 
     it("renders correctly when closed", () => {
-        editorValues.state.isStateModalOpen = false;
+        globalValues.action.isModalOpen.mockReturnValue(false);
         let tree;
         renderer.act(() => {
             tree = renderer.create(<StateModal />);
         });
+        expect(globalValues.action.isModalOpen).toHaveBeenCalledWith("state");
         expect(tree.toJSON()).toMatchSnapshot();
     });
 
@@ -81,6 +101,7 @@ describe("StateModal", () => {
         renderer.act(() => {
             tree = renderer.create(<StateModal />);
         });
+        expect(globalValues.action.isModalOpen).toHaveBeenCalledWith("state");
         expect(tree.toJSON()).toMatchSnapshot();
     });
 
@@ -92,6 +113,7 @@ describe("StateModal", () => {
             tree = renderer.create(<StateModal />);
         });
         await waitFor(() => expect(fetchContextValues.action.fetchJSON).toHaveBeenCalled());
+        expect(globalValues.action.isModalOpen).toHaveBeenCalledWith("state");
         expect(tree.toJSON()).toMatchSnapshot();
     });
 
@@ -103,6 +125,7 @@ describe("StateModal", () => {
             tree = renderer.create(<StateModal />);
         });
         await waitFor(() => expect(fetchContextValues.action.fetchJSON).toHaveBeenCalled());
+        expect(globalValues.action.isModalOpen).toHaveBeenCalledWith("state");
         expect(tree.toJSON()).toMatchSnapshot();
     });
 
@@ -114,6 +137,7 @@ describe("StateModal", () => {
             render(<StateModal />);
         });
         await waitFor(() => expect(fetchContextValues.action.fetchJSON).toHaveBeenCalled());
+        expect(globalValues.action.isModalOpen).toHaveBeenCalledWith("state");
         const user = userEvent.setup();
         await user.click(screen.getByText("Active"));
         await user.click(screen.getByText("Save"));
@@ -123,13 +147,13 @@ describe("StateModal", () => {
                 { body: "Active", method: "PUT" },
             ),
         );
-        expect(editorValues.action.setSnackbarState).toHaveBeenCalledWith({
+        expect(globalValues.action.setSnackbarState).toHaveBeenCalledWith({
             message: "Status saved successfully.",
             open: true,
             severity: "success",
         });
         expect(editorValues.action.removeFromObjectDetailsStorage).toHaveBeenCalledWith(pid);
-        expect(editorValues.action.toggleStateModal).toHaveBeenCalled();
+        expect(globalValues.action.closeModal).toHaveBeenCalledWith("state");
     });
 
     it("does not save when nothing changes", async () => {
@@ -140,17 +164,18 @@ describe("StateModal", () => {
             render(<StateModal />);
         });
         await waitFor(() => expect(fetchContextValues.action.fetchJSON).toHaveBeenCalled());
+        expect(globalValues.action.isModalOpen).toHaveBeenCalledWith("state");
         await userEvent.setup().click(screen.getByText("Save"));
         await waitFor(() =>
-            expect(editorValues.action.setSnackbarState).toHaveBeenCalledWith({
+            expect(globalValues.action.setSnackbarState).toHaveBeenCalledWith({
                 message: "No changes were made.",
                 open: true,
                 severity: "info",
             }),
         );
         expect(fetchContextValues.action.fetchText).not.toHaveBeenCalled();
         expect(editorValues.action.removeFromObjectDetailsStorage).not.toHaveBeenCalled();
-        expect(editorValues.action.toggleStateModal).not.toHaveBeenCalled();
+        expect(globalValues.action.openModal).not.toHaveBeenCalled();
     });
 
     it("handles save failure gracefully", async () => {
@@ -161,6 +186,7 @@ describe("StateModal", () => {
             render(<StateModal />);
         });
         await waitFor(() => expect(fetchContextValues.action.fetchJSON).toHaveBeenCalled());
+        expect(globalValues.action.isModalOpen).toHaveBeenCalledWith("state");
         const user = userEvent.setup();
         await user.click(screen.getByText("Active"));
         await user.click(screen.getByText("Save"));
@@ -170,13 +196,13 @@ describe("StateModal", () => {
                 { body: "Active", method: "PUT" },
             ),
         );
-        expect(editorValues.action.setSnackbarState).toHaveBeenCalledWith({
+        expect(globalValues.action.setSnackbarState).toHaveBeenCalledWith({
             message: 'Status failed to save; "not ok"',
             open: true,
             severity: "error",
         });
         expect(editorValues.action.removeFromObjectDetailsStorage).not.toHaveBeenCalled();
-        expect(editorValues.action.toggleStateModal).toHaveBeenCalled();
+        expect(globalValues.action.closeModal).toHaveBeenCalledWith("state");
     });
 
     it("handles child save failure gracefully", async () => {
@@ -187,6 +213,7 @@ describe("StateModal", () => {
             render(<StateModal />);
         });
         await waitFor(() => expect(fetchContextValues.action.fetchJSON).toHaveBeenCalled());
+        expect(globalValues.action.isModalOpen).toHaveBeenCalledWith("state");
         const user = userEvent.setup();
         await user.click(screen.getByText("Active"));
         await user.click(screen.getByText("Update 1 children to match"));
@@ -197,13 +224,13 @@ describe("StateModal", () => {
                 { body: "Active", method: "PUT" },
             ),
         );
-        expect(editorValues.action.setSnackbarState).toHaveBeenCalledWith({
+        expect(globalValues.action.setSnackbarState).toHaveBeenCalledWith({
             message: 'Status failed to save; "not ok"',
             open: true,
             severity: "error",
         });
         expect(editorValues.action.removeFromObjectDetailsStorage).not.toHaveBeenCalled();
-        expect(editorValues.action.toggleStateModal).toHaveBeenCalled();
+        expect(globalValues.action.closeModal).toHaveBeenCalledWith("state");
     });
 
     it("updates children correctly", async () => {
@@ -214,6 +241,7 @@ describe("StateModal", () => {
             render(<StateModal />);
         });
         await waitFor(() => expect(fetchContextValues.action.fetchJSON).toHaveBeenCalled());
+        expect(globalValues.action.isModalOpen).toHaveBeenCalledWith("state");
         const user = userEvent.setup();
         await user.click(screen.getByText("Active"));
         await user.click(screen.getByText("Update 1 children to match"));
@@ -224,7 +252,7 @@ describe("StateModal", () => {
                 { body: "Active", method: "PUT" },
             ),
         );
-        expect(editorValues.action.setSnackbarState).toHaveBeenCalledWith({
+        expect(globalValues.action.setSnackbarState).toHaveBeenCalledWith({
             message: "Status saved successfully.",
             open: true,
             severity: "success",
@@ -237,6 +265,6 @@ describe("StateModal", () => {
         expect(fetchContextValues.action.fetchText).toHaveBeenCalledTimes(2);
         expect(editorValues.action.removeFromObjectDetailsStorage).toHaveBeenNthCalledWith(1, "foo:125");
         expect(editorValues.action.removeFromObjectDetailsStorage).toHaveBeenNthCalledWith(2, pid);
-        expect(editorValues.action.toggleStateModal).toHaveBeenCalled();
+        expect(globalValues.action.closeModal).toHaveBeenCalledWith("state");
     });
 });