WiFi API update

Deprecated option `hwmode=11g/11a` was replaced by `band=2g/5g/6g`

CHANGELOG.md

@@ -8,6 +8,13 @@ and this project adheres to
 
 ## [Unreleased]
 
+## [6.4.0] - 2024-10-02
+
+### Changed
+
+-   Refactored Alert component to include dismiss animation and timeout
+-   Refactored ThreeDotsMenu component to include additional props
+
 ## [6.3.0] - 2024-09-27
 
 ### Added
@@ -398,7 +405,8 @@ and this project adheres to
 ## [0.0.7] - 2019-09-02
 
 [unreleased]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.3.0...dev
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.4.0...dev
+[6.4.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.3.0...v6.4.0
 [6.3.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.2.1...v6.3.0
 [6.2.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.2.0...v6.2.1
 [6.2.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.1.1...v6.2.0

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "foris",
-    "version": "6.3.0",
+    "version": "6.4.0",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "foris",
-            "version": "6.3.0",
+            "version": "6.4.0",
             "license": "GPL-3.0",
             "dependencies": {
                 "@fortawesome/fontawesome-svg-core": "^6.6.0",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "6.3.0",
+    "version": "6.4.0",
     "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {

src/bootstrap/Alert.js

@@ -5,7 +5,7 @@
  * See /LICENSE for more information.
  */
 
-import React, { useRef } from "react";
+import React, { useRef, useEffect, useState } from "react";
 
 import PropTypes from "prop-types";
 
@@ -40,20 +40,36 @@ Alert.defaultProps = {
 
 function Alert({ type, onDismiss, children }) {
     const alertRef = useRef();
+    const [isVisible, setIsVisible] = useState(true);
     useFocusTrap(alertRef, !!onDismiss);
+
+    useEffect(() => {
+        if (onDismiss) {
+            const timeout = setTimeout(() => setIsVisible(false), 7000);
+            return () => clearTimeout(timeout);
+        }
+    }, [onDismiss]);
+
+    const handleAnimationEnd = () => {
+        if (!isVisible && onDismiss) {
+            onDismiss();
+        }
+    };
+
     return (
         <div
             ref={alertRef}
-            className={`alert alert-${type} ${
+            className={`alert alert-${type} ${isVisible ? "alert-fade-in" : "alert-slide-out-top"} ${
                 onDismiss ? "alert-dismissible" : ""
             }`.trim()}
             role="alert"
+            onAnimationEnd={handleAnimationEnd}
         >
             {onDismiss && (
                 <button
                     type="button"
                     className="btn-close"
-                    onClick={onDismiss}
+                    onClick={() => setIsVisible(false)}
                     aria-label={_("Close")}
                 />
             )}

src/bootstrap/ThreeDotsMenu.js

@@ -18,9 +18,9 @@ ThreeDotsMenu.propTypes = {
     children: PropTypes.arrayOf(PropTypes.node).isRequired,
 };
 
-function ThreeDotsMenu({ children }) {
+function ThreeDotsMenu({ children, ...props }) {
     return (
-        <div className="dropdown">
+        <div className="dropdown position-static" {...props}>
             <Button
                 className="btn-sm btn-link text-body"
                 data-bs-toggle="dropdown"

src/common/WiFiSettings/WiFiForm.js

@@ -9,7 +9,7 @@ import React from "react";
 
 import PropTypes from "prop-types";
 
-import { HELP_TEXTS, HTMODES, HWMODES, ENCRYPTIONMODES } from "./constants";
+import { HELP_TEXTS, HTMODES, BANDS, ENCRYPTIONMODES } from "./constants";
 import WifiGuestForm from "./WiFiGuestForm";
 import WiFiQRCode from "./WiFiQRCode";
 import PasswordInput from "../../bootstrap/PasswordInput";
@@ -60,7 +60,7 @@ DeviceForm.propTypes = {
         SSID: PropTypes.string.isRequired,
         password: PropTypes.string.isRequired,
         hidden: PropTypes.bool.isRequired,
-        hwmode: PropTypes.string.isRequired,
+        band: PropTypes.string.isRequired,
         htmode: PropTypes.string.isRequired,
         channel: PropTypes.string.isRequired,
         guest_wifi: PropTypes.object.isRequired,
@@ -155,11 +155,11 @@ function DeviceForm({
                     />
 
                     <RadioSet
-                        name={`hwmode-${deviceID}`}
+                        name={`band-${deviceID}`}
                         label="GHz"
-                        choices={getHwmodeChoices(formData)}
+                        choices={getBandChoices(formData)}
-                        value={formData.hwmode}
+                        value={formData.band}
-                        helpText={HELP_TEXTS.hwmode}
+                        helpText={HELP_TEXTS.band}
                         inline
                         onChange={setFormValue((value) => {
                             // Get the last item in an array of available HT modes
@@ -168,7 +168,7 @@ function DeviceForm({
                             return {
                                 devices: {
                                     [deviceIndex]: {
-                                        hwmode: { $set: value },
+                                        band: { $set: value },
                                         channel: { $set: "0" },
                                         htmode: {
                                             $set:
@@ -263,7 +263,7 @@ function getChannelChoices(device) {
     };
 
     device.available_bands.forEach((availableBand) => {
-        if (availableBand.hwmode !== device.hwmode) return;
+        if (availableBand.band !== device.band) return;
 
         availableBand.available_channels.forEach((availableChannel) => {
             channelChoices[availableChannel.number.toString()] = `
@@ -282,7 +282,7 @@ function getHtmodeChoices(device) {
     const htmodeChoices = {};
 
     device.available_bands.forEach((availableBand) => {
-        if (availableBand.hwmode !== device.hwmode) return;
+        if (availableBand.band !== device.band) return;
 
         availableBand.available_htmodes.forEach((availableHtmod) => {
             htmodeChoices[availableHtmod] = HTMODES[availableHtmod];
@@ -291,10 +291,10 @@ function getHtmodeChoices(device) {
     return htmodeChoices;
 }
 
-function getHwmodeChoices(device) {
+function getBandChoices(device) {
     return device.available_bands.map((availableBand) => ({
-        label: HWMODES[availableBand.hwmode],
+        label: BANDS[availableBand.band],
-        value: availableBand.hwmode,
+        value: availableBand.band,
     }));
 }
 

src/common/WiFiSettings/__tests__/WiFiSettings.test.js

@@ -118,7 +118,7 @@ describe("<WiFiSettings/>", () => {
                     guest_wifi: { enabled: false },
                     hidden: false,
                     htmode: "HT80",
-                    hwmode: "11a",
+                    band: "5g",
                     id: 0,
                     password: "TestPass",
                     encryption: "WPA3",
@@ -148,7 +148,7 @@ describe("<WiFiSettings/>", () => {
                     guest_wifi: { enabled: false },
                     hidden: false,
                     htmode: "VHT80",
-                    hwmode: "11g",
+                    band: "2g",
                     id: 0,
                     password: "TestPass",
                     encryption: "WPA3",
@@ -185,7 +185,7 @@ describe("<WiFiSettings/>", () => {
                     },
                     hidden: false,
                     htmode: "HT80",
-                    hwmode: "11a",
+                    band: "5g",
                     id: 0,
                     password: "TestPass",
                     encryption: "WPA3",

src/common/WiFiSettings/__tests__/__fixtures__/wifiSettings.js

@@ -77,7 +77,7 @@ export function wifiSettingsFixture() {
                             "VHT40",
                             "VHT80",
                         ],
-                        hwmode: "11g",
+                        band: "2g",
                     },
                     {
                         available_channels: [
@@ -215,7 +215,7 @@ export function wifiSettingsFixture() {
                             "VHT40",
                             "VHT80",
                         ],
-                        hwmode: "11a",
+                        band: "5g",
                     },
                 ],
                 channel: 60,
@@ -227,7 +227,7 @@ export function wifiSettingsFixture() {
                 },
                 hidden: false,
                 htmode: "HT80",
-                hwmode: "11a",
+                band: "5g",
                 id: 0,
                 password: "TestPass",
                 encryption: "WPA3",
@@ -294,7 +294,7 @@ export function wifiSettingsFixture() {
                             },
                         ],
                         available_htmodes: ["NOHT", "HT20", "HT40"],
-                        hwmode: "11g",
+                        band: "2g",
                     },
                 ],
                 channel: 11,
@@ -306,7 +306,7 @@ export function wifiSettingsFixture() {
                 },
                 hidden: false,
                 htmode: "HT40",
-                hwmode: "11g",
+                band: "2g",
                 id: 1,
                 password: "TestPass",
                 encryption: "WPA3",
@@ -323,7 +323,7 @@ const oneDevice = {
             guest_wifi: { enabled: false },
             hidden: false,
             htmode: "HT40",
-            hwmode: "11a",
+            band: "5g",
             id: 0,
             password: "TestPass",
             encryption: "WPA3",
@@ -340,7 +340,7 @@ const twoDevices = {
             guest_wifi: { enabled: false },
             hidden: false,
             htmode: "HT40",
-            hwmode: "11a",
+            band: "5g",
             id: 0,
             password: "TestPass",
             encryption: "WPA3",
@@ -352,7 +352,7 @@ const twoDevices = {
             guest_wifi: { enabled: false },
             hidden: false,
             htmode: "HT40",
-            hwmode: "11a",
+            band: "5g",
             id: 1,
             password: "TestPass",
             encryption: "WPA3",
@@ -369,7 +369,7 @@ const threeDevices = {
             guest_wifi: { enabled: false },
             hidden: false,
             htmode: "HT40",
-            hwmode: "11a",
+            band: "5g",
             id: 0,
             password: "TestPass",
             encryption: "WPA3",
@@ -381,7 +381,7 @@ const threeDevices = {
             guest_wifi: { enabled: false },
             hidden: false,
             htmode: "HT40",
-            hwmode: "11a",
+            band: "5g",
             id: 1,
             password: "TestPass",
             encryption: "WPA3",
@@ -393,7 +393,7 @@ const threeDevices = {
             guest_wifi: { enabled: false },
             hidden: false,
             htmode: "HT40",
-            hwmode: "11a",
+            band: "5g",
             id: 2,
             password: "",
             encryption: "WPA3",

src/common/WiFiSettings/__tests__/__snapshots__/WiFiSettings.test.js.snap

@@ -562,14 +562,14 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +         >
 +           <input
 +             class="form-check-input me-2"
-+             id="hwmode-0-0"
++             id="band-0-0"
-+             name="hwmode-0"
++             name="band-0"
 +             type="radio"
-+             value="11g"
++             value="2g"
 +           />
 +           <label
 +             class="form-check-label"
-+             for="hwmode-0-0"
++             for="band-0-0"
 +           >
 +             2.4
 +           </label>
@@ -580,14 +580,14 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +           <input
 +             checked=""
 +             class="form-check-input me-2"
-+             id="hwmode-0-1"
++             id="band-0-1"
-+             name="hwmode-0"
++             name="band-0"
 +             type="radio"
-+             value="11a"
++             value="5g"
 +           />
 +           <label
 +             class="form-check-label"
-+             for="hwmode-0-1"
++             for="band-0-1"
 +           >
 +             5
 +           </label>

src/common/WiFiSettings/constants.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2024 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.
@@ -18,9 +18,10 @@ export const HTMODES = {
     HE80: _("802.11ax - 80 MHz wide channel"),
     HE160: _("802.11ax - 160 MHz wide channel"),
 };
-export const HWMODES = {
+export const BANDS = {
-    "11g": "2.4",
+    "2g": "2.4",
-    "11a": "5",
+    "5g": "5",
+    "6g": "6",
 };
 export const ENCRYPTIONMODES = {
     WPA3: _("WPA3 only"),
@@ -37,7 +38,7 @@ export const HELP_TEXTS = {
     hidden: _(
         "If set, network is not visible when scanning for available networks."
     ),
-    hwmode: _(
+    band: _(
         "The 2.4 GHz band is more widely supported by clients, but tends to have more interference. The 5 GHz band is a newer standard and may not be supported by all your devices. It usually has less interference, but the signal does not carry so well indoors."
     ),
     htmode: _(

src/context/alertContext/__tests__/AlertContext.test.js

@@ -43,14 +43,17 @@ describe("AlertContext", () => {
         expect(componentContainer).toMatchSnapshot();
     });
 
-    it("should dismiss alert with alert button", () => {
+    it("should dismiss alert with alert button", async () => {
         fireEvent.click(getByText(componentContainer, "Set alert"));
         // Alert is present
         expect(getByText(componentContainer, "Alert content")).toBeDefined();
 
         fireEvent.click(componentContainer.querySelector(".btn-close"));
         // Alert is gone
-        expect(queryByText(componentContainer, "Alert content")).toBeNull();
+        await (() =>
+            expect(
+                queryByText(componentContainer, "Alert content")
+            ).toBeNull());
     });
 
     it("should dismiss alert with external button", () => {

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

@@ -6,7 +6,7 @@ exports[`AlertContext should render alert 1`] = `
     id="alert-container"
   >
     <div
-      class="alert alert-danger alert-dismissible"
+      class="alert alert-danger alert-fade-in alert-dismissible"
       role="alert"
     >
       <button