Merge branch 'feature/wifi-API-update' into 'master'

Draft: WiFi API update

See merge request turris/reforis/foris-js!252

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,26 +155,26 @@ function DeviceForm({
                     />
 
                     <RadioSet
-                        name={`hwmode-${deviceID}`}
-                        label="GHz"
-                        choices={getHwmodeChoices(formData)}
-                        value={formData.hwmode}
-                        helpText={HELP_TEXTS.hwmode}
+                        name={`band-${deviceID}`}
+                        label={_("Band")}
+                        choices={getBandChoices(formData)}
+                        value={formData.band}
+                        helpText={HELP_TEXTS.band}
                         inline
                         onChange={setFormValue((value) => {
-                            // Get the last item in an array of available HT modes
-                            const [best2] = bnds[0].available_htmodes.slice(-1);
-                            const [best5] = bnds[1].available_htmodes.slice(-1);
+                            // Find the selected band
+                            const selectedBand = bnds.find(
+                                (band) => band.band === value
+                            );
+                            // Get the last item in the available HT modes for the selected band
+                            const bestHtmode =
+                                selectedBand.available_htmodes.slice(-1)[0];
                             return {
                                 devices: {
                                     [deviceIndex]: {
-                                        hwmode: { $set: value },
+                                        band: { $set: value },
                                         channel: { $set: "0" },
-                                        htmode: {
-                                            $set:
-                                                // Set HT mode depending on checked frequency
-                                                value === "11a" ? best5 : best2,
-                                        },
+                                        htmode: { $set: bestHtmode },
                                     },
                                 },
                             };
@@ -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],
-        value: availableBand.hwmode,
+        label: `${BANDS[availableBand.band]} GHz`,
+        value: availableBand.band,
     }));
 }
 

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

@@ -77,7 +77,7 @@ describe("<WiFiSettings/>", () => {
     it("Snapshot 2.4 GHz", () => {
         fireEvent.click(getByText("Wi-Fi 1"));
         const enabledRender = asFragment();
-        fireEvent.click(getAllByText("2.4")[0]);
+        fireEvent.click(getAllByText(/2.4/)[0]);
         expect(diffSnapshot(enabledRender, asFragment())).toMatchSnapshot();
     });
 
@@ -118,7 +118,7 @@ describe("<WiFiSettings/>", () => {
                     guest_wifi: { enabled: false },
                     hidden: false,
                     htmode: "HT80",
-                    hwmode: "11a",
+                    band: "5g",
                     id: 0,
                     password: "TestPass",
                     encryption: "WPA3",
@@ -135,7 +135,7 @@ describe("<WiFiSettings/>", () => {
 
     it("Post form: 2.4 GHz", () => {
         fireEvent.click(getByText("Wi-Fi 1"));
-        fireEvent.click(getAllByText("2.4")[0]);
+        fireEvent.click(getAllByText(/2.4/)[0]);
 
         fireEvent.click(getByText("Save"));
         expect(mockAxios.post).toBeCalled();
@@ -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

@@ -555,23 +555,23 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +           class="d-block"
 +           for="6"
 +         >
-+           GHz
++           Band
 +         </label>
 +         <div
 +           class="mb-3 form-check form-check-inline"
 +         >
 +           <input
 +             class="form-check-input me-2"
-+             id="hwmode-0-0"
-+             name="hwmode-0"
++             id="band-0-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
++             2.4 GHz
 +           </label>
 +         </div>
 +         <div
@@ -580,16 +580,16 @@ exports[`<WiFiSettings/> Snapshot one module enabled. 1`] = `
 +           <input
 +             checked=""
 +             class="form-check-input me-2"
-+             id="hwmode-0-1"
-+             name="hwmode-0"
++             id="band-0-1"
++             name="band-0"
 +             type="radio"
-+             value="11a"
++             value="5g"
 +           />
 +           <label
 +             class="form-check-label"
-+             for="hwmode-0-1"
++             for="band-0-1"
 +           >
-+             5
++             5 GHz
 +           </label>
 +         </div>
 +         <div

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 = {
-    "11g": "2.4",
-    "11a": "5",
+export const BANDS = {
+    "2g": "2.4",
+    "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: _(