From d4bc5a69982b9d854a072084b85f9303f4808027 Mon Sep 17 00:00:00 2001
From: Maciej Lenartowicz <maciej.lenartowicz@nic.cz>
Date: Tue, 24 Sep 2019 07:52:09 +0000
Subject: [PATCH] Resolve "Extract alert context from OpenVPN plugin"

---
 package-lock.json                             |  2 +-
 package.json                                  |  2 +-
 src/alertContext/AlertContext.js              | 35 ++++++++++++++
 .../__tests__/AlertContext.test.js            | 48 +++++++++++++++++++
 .../__snapshots__/AlertContext.test.js.snap   | 28 +++++++++++
 src/index.js                                  |  3 ++
 6 files changed, 116 insertions(+), 2 deletions(-)
 create mode 100644 src/alertContext/AlertContext.js
 create mode 100644 src/alertContext/__tests__/AlertContext.test.js
 create mode 100644 src/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap

diff --git a/package-lock.json b/package-lock.json
index f0719ab..f482faa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "0.1.0-beta",
+  "version": "0.1.0-beta.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 6ab94c2..63dae32 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "0.1.0-beta",
+  "version": "0.1.0-beta.2",
   "description": "Set of components and utils for Foris and its plugins.",
   "author": "CZ.NIC, z.s.p.o.",
   "repository": {
diff --git a/src/alertContext/AlertContext.js b/src/alertContext/AlertContext.js
new file mode 100644
index 0000000..bcdb347
--- /dev/null
+++ b/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 };
diff --git a/src/alertContext/__tests__/AlertContext.test.js b/src/alertContext/__tests__/AlertContext.test.js
new file mode 100644
index 0000000..3c986a3
--- /dev/null
+++ b/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();
+    });
+});
diff --git a/src/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap b/src/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap
new file mode 100644
index 0000000..97a4dc3
--- /dev/null
+++ b/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>
+`;
diff --git a/src/index.js b/src/index.js
index df5480f..d4bec52 100644
--- a/src/index.js
+++ b/src/index.js
@@ -51,3 +51,6 @@ export {
     validateMAC,
     validateMultipleEmails,
 } from "validations";
+
+// Alert context
+export { AlertContext, AlertContextProvider } from "alertContext/AlertContext";