Resolve "Extract alert context from OpenVPN plugin"

src/alertContext/AlertContext.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+import { Alert } from "bootstrap/Alert";
+
+const AlertContext = React.createContext();
+
+AlertContextProvider.propTypes = {
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node,
+    ]),
+};
+
+function AlertContextProvider({ children }) {
+    const [alert, setAlert] = useState(null);
+
+    return (
+        <>
+            {alert && <Alert type="danger" message={alert} onDismiss={() => setAlert(null)} />}
+            <AlertContext.Provider value={setAlert}>
+                { children }
+            </AlertContext.Provider>
+        </>
+    );
+}
+
+export { AlertContext, AlertContextProvider };

src/alertContext/__tests__/AlertContext.test.js

@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React, { useContext } from "react";
+import { render, getByText, queryByText, fireEvent } from "customTestRender";
+
+import { AlertContext, AlertContextProvider } from "../AlertContext";
+
+function AlertTest() {
+    const setAlert = useContext(AlertContext);
+    return <button onClick={() => setAlert("Alert content")}>Set alert</button>;
+};
+
+describe("AlertContext", () => {
+    let componentContainer;
+
+    beforeEach(() => {
+        const { container } = render(
+            <AlertContextProvider>
+                <AlertTest />
+            </AlertContextProvider>
+        );
+        componentContainer = container;
+    });
+
+    it("should render component without alert", () => {
+        expect(componentContainer).toMatchSnapshot();
+    });
+
+    it("should render alert", () => {
+        fireEvent.click(getByText(componentContainer, "Set alert"));
+        expect(componentContainer).toMatchSnapshot();
+    });
+
+    it("should dismiss alert", () => {
+        fireEvent.click(getByText(componentContainer, "Set alert"));
+        // Alert is present
+        expect(getByText(componentContainer, "Alert content")).toBeDefined();
+
+        fireEvent.click(componentContainer.querySelector(".close"));
+        // Alert is gone
+        expect(queryByText(componentContainer, "Alert content")).toBeNull();
+    });
+});

src/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AlertContext should render alert 1`] = `
+<div>
+  <div
+    class="alert alert-dismissible alert-danger"
+  >
+    <button
+      class="close"
+      type="button"
+    >
+      ×
+    </button>
+    Alert content
+  </div>
+  <button>
+    Set alert
+  </button>
+</div>
+`;
+
+exports[`AlertContext should render component without alert 1`] = `
+<div>
+  <button>
+    Set alert
+  </button>
+</div>
+`;

src/index.js

@@ -51,3 +51,6 @@ export {
     validateMAC,
     validateMultipleEmails,
 } from "validations";
+
+// Alert context
+export { AlertContext, AlertContextProvider } from "alertContext/AlertContext";