From f3274287654dd643d46f9043b428d6bdc03f3bf4 Mon Sep 17 00:00:00 2001 From: Aleksandr Gumroian Date: Thu, 10 Feb 2022 11:14:32 +0100 Subject: [PATCH 1/7] Add about endpoint to forisUrls --- src/utils/forisUrls.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/utils/forisUrls.js b/src/utils/forisUrls.js index 341d1c1..0232d2a 100644 --- a/src/utils/forisUrls.js +++ b/src/utils/forisUrls.js @@ -36,5 +36,6 @@ export const ForisURLs = { luci: "/cgi-bin/luci", // API + about: `${REFORIS_API_URL_PREFIX}/about`, reboot: `${REFORIS_API_URL_PREFIX}/reboot`, }; From c469d8dfde0adc059df4fe13cd74a895868adf47 Mon Sep 17 00:00:00 2001 From: Aleksandr Gumroian Date: Thu, 10 Feb 2022 11:17:15 +0100 Subject: [PATCH 2/7] Add CustomizationContext and custom hook As we want to share customization context between reForis & Plugins --- .../CustomizationContext.js | 57 +++++++++++++++++++ src/index.js | 8 ++- 2 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 src/customizationContext/CustomizationContext.js diff --git a/src/customizationContext/CustomizationContext.js b/src/customizationContext/CustomizationContext.js new file mode 100644 index 0000000..e763421 --- /dev/null +++ b/src/customizationContext/CustomizationContext.js @@ -0,0 +1,57 @@ +/* + * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/) + * + * This is free software, licensed under the GNU General Public License v3. + * See /LICENSE for more information. + */ + +import React, { useContext, useEffect } from "react"; +import PropTypes from "prop-types"; + +import { useAPIGet } from "../api/hooks"; +import { ForisURLs } from "../utils/forisUrls"; + +import { Spinner } from "../bootstrap/Spinner"; + +CustomizationContextProvider.propTypes = { + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node, + ]), +}; + +function CustomizationContextProvider({ children }) { + const { CustomizationContext } = window; + const [getCustomizationResponse, getCustomization] = useAPIGet( + ForisURLs.about + ); + + useEffect(() => { + getCustomization(); + }, [getCustomization]); + + if (getCustomizationResponse.state !== "success") { + return ; + } + + const deviceDetails = getCustomizationResponse.data || {}; + + const isCustomized = !!( + deviceDetails && + deviceDetails.customization !== undefined && + deviceDetails.customization === "shield" + ); + + return ( + + {children} + + ); +} + +function useCustomizationContext() { + const { CustomizationContext } = window; + return useContext(CustomizationContext); +} + +export { CustomizationContextProvider, useCustomizationContext }; diff --git a/src/index.js b/src/index.js index c52f1fa..09ec807 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ /* - * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/) + * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/) * * This is free software, licensed under the GNU General Public License v3. * See /LICENSE for more information. @@ -91,3 +91,9 @@ export { // Alert context export { AlertContextProvider, useAlert } from "./alertContext/AlertContext"; + +// Customization context +export { + CustomizationContextProvider, + useCustomizationContext, +} from "./customizationContext/CustomizationContext"; From 46fe75d3cf6860a865347de2876a21247966f755 Mon Sep 17 00:00:00 2001 From: Aleksandr Gumroian Date: Thu, 10 Feb 2022 16:04:14 +0100 Subject: [PATCH 3/7] Add tests for CustomizationContext --- .../__tests__/CustomizationContext.test.js | 53 +++++++++++++++++++ .../CustomizationContext.test.js.snap | 17 ++++++ src/testUtils/customTestRender.js | 9 ++-- src/testUtils/cutomizationContextMock.js | 23 ++++++++ 4 files changed, 99 insertions(+), 3 deletions(-) create mode 100644 src/customizationContext/__tests__/CustomizationContext.test.js create mode 100644 src/customizationContext/__tests__/__snapshots__/CustomizationContext.test.js.snap create mode 100644 src/testUtils/cutomizationContextMock.js diff --git a/src/customizationContext/__tests__/CustomizationContext.test.js b/src/customizationContext/__tests__/CustomizationContext.test.js new file mode 100644 index 0000000..edba3ce --- /dev/null +++ b/src/customizationContext/__tests__/CustomizationContext.test.js @@ -0,0 +1,53 @@ +/* + * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/) + * + * This is free software, licensed under the GNU General Public License v3. + * See /LICENSE for more information. + */ + +import React from "react"; + +import { render, wait, getByText } from "customTestRender"; +import mockAxios from "jest-mock-axios"; + +import { + useCustomizationContext, + CustomizationContextProvider, +} from "../CustomizationContext"; + +const CUSTOM = "Description / component for customized reForis (Shield)"; +const ORIGINAL = "Description / component for original reForis (other devices)"; + +const CustomizationTest = () => { + const { isCustomized } = useCustomizationContext(); + + return

{isCustomized ? CUSTOM : ORIGINAL}

; +}; + +describe("CustomizationContext", () => { + let componentContainer; + beforeEach(() => { + const { container } = render( + + + + ); + componentContainer = container; + }); + + it("should render component without customization", async () => { + mockAxios.mockResponse({ data: {} }); + + await wait(() => getByText(componentContainer, ORIGINAL)); + + expect(componentContainer).toMatchSnapshot(); + }); + + it("should render customized component", async () => { + mockAxios.mockResponse({ data: { customization: "shield" } }); + + await wait(() => getByText(componentContainer, CUSTOM)); + + expect(componentContainer).toMatchSnapshot(); + }); +}); diff --git a/src/customizationContext/__tests__/__snapshots__/CustomizationContext.test.js.snap b/src/customizationContext/__tests__/__snapshots__/CustomizationContext.test.js.snap new file mode 100644 index 0000000..eb6fb1b --- /dev/null +++ b/src/customizationContext/__tests__/__snapshots__/CustomizationContext.test.js.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CustomizationContext should render component without customization 1`] = ` +
+

+ Description / component for original reForis (other devices) +

+
+`; + +exports[`CustomizationContext should render customized component 1`] = ` +
+

+ Description / component for customized reForis (Shield) +

+
+`; diff --git a/src/testUtils/customTestRender.js b/src/testUtils/customTestRender.js index 8d41a60..c256358 100644 --- a/src/testUtils/customTestRender.js +++ b/src/testUtils/customTestRender.js @@ -14,6 +14,7 @@ import { render } from "@testing-library/react"; import PropTypes from "prop-types"; import { AlertContextMock } from "./alertContextMock"; +import { CustomizationContextMock } from "./cutomizationContextMock"; Wrapper.propTypes = { children: PropTypes.oneOfType([ @@ -25,9 +26,11 @@ Wrapper.propTypes = { function Wrapper({ children }) { return ( - - {children} - + + + {children} + + ); } diff --git a/src/testUtils/cutomizationContextMock.js b/src/testUtils/cutomizationContextMock.js new file mode 100644 index 0000000..8a0293b --- /dev/null +++ b/src/testUtils/cutomizationContextMock.js @@ -0,0 +1,23 @@ +/* + * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/) + * + * This is free software, licensed under the GNU General Public License v3. + * See /LICENSE for more information. + */ + +import React from "react"; + +window.CustomizationContext = React.createContext(); + +const deviceDetails = {}; +const isCustomized = jest.fn(); + +function CustomizationContextMock({ children }) { + return ( + + {children} + + ); +} + +export { CustomizationContextMock }; From aeabc0bf06d0fa1f2ce151c4148b5efcc1bd9dc2 Mon Sep 17 00:00:00 2001 From: Aleksandr Gumroian Date: Thu, 10 Feb 2022 16:03:41 +0100 Subject: [PATCH 4/7] Add info about CustomizationContext to the docs --- src/customizationContext/CustomizationContext.md | 3 +++ styleguide.config.js | 6 ++++++ 2 files changed, 9 insertions(+) create mode 100644 src/customizationContext/CustomizationContext.md diff --git a/src/customizationContext/CustomizationContext.md b/src/customizationContext/CustomizationContext.md new file mode 100644 index 0000000..1d3e313 --- /dev/null +++ b/src/customizationContext/CustomizationContext.md @@ -0,0 +1,3 @@ +It provides customization context to the children. `CustomizationContext` allows +using `useCustomizationContext` in components to check if the reForis UI is +customized or not for specific devices. diff --git a/styleguide.config.js b/styleguide.config.js index 219e045..1798dc9 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -51,6 +51,12 @@ module.exports = { sectionDepth: 1, }, + { + name: "Customization Context", + components: ["src/customizationContext/CustomizationContext.js"], + exampleMode: "expand", + usageMode: "expand", + }, { name: "Bootstrap components", description: "Set of bootstrap components.", From d71f4a79679a31b569969c01fd3efd5f5ab7f766 Mon Sep 17 00:00:00 2001 From: Aleksandr Gumroian Date: Thu, 10 Feb 2022 16:19:29 +0100 Subject: [PATCH 5/7] Remove testUtils from .gitignore Because the testUtils folder consists of useful utils for testing, we want to track changes in these files. --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index 0b6d632..1ce182b 100644 --- a/.gitignore +++ b/.gitignore @@ -51,4 +51,3 @@ coverage.xml dist/ foris-*.tgz styleguide/ -testUtils From f382e743aacb6dc8b279af93b80015f0b989cfe2 Mon Sep 17 00:00:00 2001 From: Aleksandr Gumroian Date: Thu, 22 Dec 2022 15:02:13 +0100 Subject: [PATCH 6/7] Update caniuse-lite --- package-lock.json | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index dee20a9..e6be05b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4874,14 +4874,20 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001309", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001309.tgz", - "integrity": "sha512-Pl8vfigmBXXq+/yUz1jUwULeq9xhMJznzdc/xwl4WclDAuebcTHVefpz8lE/bMI+UN7TOkSSe7B7RnZd6+dzjA==", + "version": "1.0.30001441", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz", + "integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==", "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - } + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + } + ] }, "node_modules/capture-exit": { "version": "2.0.0", @@ -22831,9 +22837,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001309", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001309.tgz", - "integrity": "sha512-Pl8vfigmBXXq+/yUz1jUwULeq9xhMJznzdc/xwl4WclDAuebcTHVefpz8lE/bMI+UN7TOkSSe7B7RnZd6+dzjA==", + "version": "1.0.30001441", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz", + "integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==", "dev": true }, "capture-exit": { From f2ae6c4d0af90512f938383f0a8e163bbcd74268 Mon Sep 17 00:00:00 2001 From: Aleksandr Gumroian Date: Thu, 22 Dec 2022 15:14:32 +0100 Subject: [PATCH 7/7] Move contexts in a context folder --- src/common/RebootButton.js | 2 +- src/common/WiFiSettings/ResetWiFiSettings.js | 2 +- src/{ => context}/alertContext/AlertContext.js | 4 ++-- src/{ => context}/alertContext/AlertContext.md | 0 .../alertContext/__tests__/AlertContext.test.js | 0 .../__tests__/__snapshots__/AlertContext.test.js.snap | 0 .../customizationContext/CustomizationContext.js | 6 +++--- .../customizationContext/CustomizationContext.md | 0 .../__tests__/CustomizationContext.test.js | 0 .../__snapshots__/CustomizationContext.test.js.snap | 0 src/form/components/ForisForm.js | 2 +- src/index.js | 7 +++++-- styleguide.config.js | 6 ++++-- 13 files changed, 17 insertions(+), 12 deletions(-) rename src/{ => context}/alertContext/AlertContext.js (93%) rename src/{ => context}/alertContext/AlertContext.md (100%) rename src/{ => context}/alertContext/__tests__/AlertContext.test.js (100%) rename src/{ => context}/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap (100%) rename src/{ => context}/customizationContext/CustomizationContext.js (90%) rename src/{ => context}/customizationContext/CustomizationContext.md (100%) rename src/{ => context}/customizationContext/__tests__/CustomizationContext.test.js (100%) rename src/{ => context}/customizationContext/__tests__/__snapshots__/CustomizationContext.test.js.snap (100%) diff --git a/src/common/RebootButton.js b/src/common/RebootButton.js index fbd16a8..4dceb46 100644 --- a/src/common/RebootButton.js +++ b/src/common/RebootButton.js @@ -14,7 +14,7 @@ import { ForisURLs } from "../utils/forisUrls"; import { Button } from "../bootstrap/Button"; import { Modal, ModalHeader, ModalBody, ModalFooter } from "../bootstrap/Modal"; -import { useAlert } from "../alertContext/AlertContext"; +import { useAlert } from "../context/alertContext/AlertContext"; export function RebootButton(props) { const [triggered, setTriggered] = useState(false); diff --git a/src/common/WiFiSettings/ResetWiFiSettings.js b/src/common/WiFiSettings/ResetWiFiSettings.js index 6973a5b..d52b52c 100644 --- a/src/common/WiFiSettings/ResetWiFiSettings.js +++ b/src/common/WiFiSettings/ResetWiFiSettings.js @@ -9,7 +9,7 @@ import React, { useEffect, useState } from "react"; import PropTypes from "prop-types"; import { Button } from "../../bootstrap/Button"; -import { useAlert } from "../../alertContext/AlertContext"; +import { useAlert } from "../../context/alertContext/AlertContext"; import { ALERT_TYPES } from "../../bootstrap/Alert"; import { useAPIPost } from "../../api/hooks"; import { API_STATE } from "../../api/utils"; diff --git a/src/alertContext/AlertContext.js b/src/context/alertContext/AlertContext.js similarity index 93% rename from src/alertContext/AlertContext.js rename to src/context/alertContext/AlertContext.js index bf01371..82f18de 100644 --- a/src/alertContext/AlertContext.js +++ b/src/context/alertContext/AlertContext.js @@ -8,8 +8,8 @@ import React, { useState, useContext, useCallback } from "react"; import PropTypes from "prop-types"; -import { Alert, ALERT_TYPES } from "../bootstrap/Alert"; -import { Portal } from "../utils/Portal"; +import { Alert, ALERT_TYPES } from "../../bootstrap/Alert"; +import { Portal } from "../../utils/Portal"; AlertContextProvider.propTypes = { children: PropTypes.oneOfType([ diff --git a/src/alertContext/AlertContext.md b/src/context/alertContext/AlertContext.md similarity index 100% rename from src/alertContext/AlertContext.md rename to src/context/alertContext/AlertContext.md diff --git a/src/alertContext/__tests__/AlertContext.test.js b/src/context/alertContext/__tests__/AlertContext.test.js similarity index 100% rename from src/alertContext/__tests__/AlertContext.test.js rename to src/context/alertContext/__tests__/AlertContext.test.js diff --git a/src/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap b/src/context/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap similarity index 100% rename from src/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap rename to src/context/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap diff --git a/src/customizationContext/CustomizationContext.js b/src/context/customizationContext/CustomizationContext.js similarity index 90% rename from src/customizationContext/CustomizationContext.js rename to src/context/customizationContext/CustomizationContext.js index e763421..9b7bc12 100644 --- a/src/customizationContext/CustomizationContext.js +++ b/src/context/customizationContext/CustomizationContext.js @@ -8,10 +8,10 @@ import React, { useContext, useEffect } from "react"; import PropTypes from "prop-types"; -import { useAPIGet } from "../api/hooks"; -import { ForisURLs } from "../utils/forisUrls"; +import { useAPIGet } from "../../api/hooks"; +import { ForisURLs } from "../../utils/forisUrls"; -import { Spinner } from "../bootstrap/Spinner"; +import { Spinner } from "../../bootstrap/Spinner"; CustomizationContextProvider.propTypes = { children: PropTypes.oneOfType([ diff --git a/src/customizationContext/CustomizationContext.md b/src/context/customizationContext/CustomizationContext.md similarity index 100% rename from src/customizationContext/CustomizationContext.md rename to src/context/customizationContext/CustomizationContext.md diff --git a/src/customizationContext/__tests__/CustomizationContext.test.js b/src/context/customizationContext/__tests__/CustomizationContext.test.js similarity index 100% rename from src/customizationContext/__tests__/CustomizationContext.test.js rename to src/context/customizationContext/__tests__/CustomizationContext.test.js diff --git a/src/customizationContext/__tests__/__snapshots__/CustomizationContext.test.js.snap b/src/context/customizationContext/__tests__/__snapshots__/CustomizationContext.test.js.snap similarity index 100% rename from src/customizationContext/__tests__/__snapshots__/CustomizationContext.test.js.snap rename to src/context/customizationContext/__tests__/__snapshots__/CustomizationContext.test.js.snap diff --git a/src/form/components/ForisForm.js b/src/form/components/ForisForm.js index 2887f25..c545efa 100644 --- a/src/form/components/ForisForm.js +++ b/src/form/components/ForisForm.js @@ -13,7 +13,7 @@ import { ALERT_TYPES } from "../../bootstrap/Alert"; import { API_STATE } from "../../api/utils"; import { formFieldsSize } from "../../bootstrap/constants"; import { Spinner } from "../../bootstrap/Spinner"; -import { useAlert } from "../../alertContext/AlertContext"; +import { useAlert } from "../../context/alertContext/AlertContext"; import { useAPIPost } from "../../api/hooks"; import { useForisModule, useForm } from "../hooks"; diff --git a/src/index.js b/src/index.js index 09ec807..33daf12 100644 --- a/src/index.js +++ b/src/index.js @@ -90,10 +90,13 @@ export { } from "./utils/validations"; // Alert context -export { AlertContextProvider, useAlert } from "./alertContext/AlertContext"; +export { + AlertContextProvider, + useAlert, +} from "./context/alertContext/AlertContext"; // Customization context export { CustomizationContextProvider, useCustomizationContext, -} from "./customizationContext/CustomizationContext"; +} from "./context/customizationContext/CustomizationContext"; diff --git a/styleguide.config.js b/styleguide.config.js index 1798dc9..7b90b6f 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -43,7 +43,7 @@ module.exports = { }, { name: "Alert Context", - components: ["src/alertContext/AlertContext.js"], + components: ["src/context/alertContext/AlertContext.js"], exampleMode: "expand", usageMode: "expand", }, @@ -53,7 +53,9 @@ module.exports = { { name: "Customization Context", - components: ["src/customizationContext/CustomizationContext.js"], + components: [ + "src/context/customizationContext/CustomizationContext.js", + ], exampleMode: "expand", usageMode: "expand", },