fix(web): proper netmask handling (#1847)

## Problem

Backend expects a prefix length instead of netmask, but unfortunately
current code base is not ensuring of making the conversion before
sending a request, making the connection form fail silently.


## Solution

Adapt the `formatIp` util method for relying in `ipPrefixFor` to make
such a conversion.

## Testing

- Updated unit test
- Tested manually

---

Fixes #1846

Related to #530

web/package/agama-web-ui.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Fri Dec 20 12:53:41 UTC 2024 - David Diaz <[email protected]>
+
+- Fix netmask handling to avoid a silent connection form error
+  (gh#agama-project/agama#1846).
+
 -------------------------------------------------------------------
 Tue Dec 10 14:43:08 UTC 2024 - David Diaz <[email protected]>
 

web/src/utils/network.test.ts

@@ -81,6 +81,7 @@ describe("#ip4_from_text", () => {
 describe("formatIp", () => {
   it("returns the given IPv4 address in the X.X.X.X/YY format", () => {
     expect(formatIp({ address: "1.2.3.4", prefix: 24 })).toEqual("1.2.3.4/24");
+    expect(formatIp({ address: "1.2.3.4", prefix: "255.255.255.0" })).toEqual("1.2.3.4/24");
   });
 });
 

web/src/utils/network.ts

@@ -78,7 +78,9 @@ const isValidIpPrefix = (value: IPAddress["prefix"]) => {
  * @param value - An netmask or a network prefix
  * @return prefix for the given netmask or prefix
  */
-const ipPrefixFor = (value: string): number => {
+const ipPrefixFor = (value: string | number): number => {
+  if (typeof value === "number") return value;
+
   if (value.match(/^\d+$/)) {
     return parseInt(value);
   } else {
@@ -132,7 +134,7 @@ const formatIp = (addr: IPAddress): string => {
   if (addr.prefix === undefined) {
     return `${addr.address}`;
   } else {
-    return `${addr.address}/${addr.prefix}`;
+    return `${addr.address}/${ipPrefixFor(addr.prefix)}`;
   }
 };