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 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": { 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/context/customizationContext/CustomizationContext.js b/src/context/customizationContext/CustomizationContext.js new file mode 100644 index 0000000..9b7bc12 --- /dev/null +++ b/src/context/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/context/customizationContext/CustomizationContext.md b/src/context/customizationContext/CustomizationContext.md new file mode 100644 index 0000000..1d3e313 --- /dev/null +++ b/src/context/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/src/context/customizationContext/__tests__/CustomizationContext.test.js b/src/context/customizationContext/__tests__/CustomizationContext.test.js new file mode 100644 index 0000000..edba3ce --- /dev/null +++ b/src/context/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/context/customizationContext/__tests__/__snapshots__/CustomizationContext.test.js.snap b/src/context/customizationContext/__tests__/__snapshots__/CustomizationContext.test.js.snap new file mode 100644 index 0000000..eb6fb1b --- /dev/null +++ b/src/context/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/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 c52f1fa..33daf12 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. @@ -90,4 +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 "./context/customizationContext/CustomizationContext"; 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 }; 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`, }; diff --git a/styleguide.config.js b/styleguide.config.js index 219e045..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", }, @@ -51,6 +51,14 @@ module.exports = { sectionDepth: 1, }, + { + name: "Customization Context", + components: [ + "src/context/customizationContext/CustomizationContext.js", + ], + exampleMode: "expand", + usageMode: "expand", + }, { name: "Bootstrap components", description: "Set of bootstrap components.",