refactor(web): replace NetworkClient with queries (#1519)

Adapt the network management code to use queries instead of
NetworkCient. Related to #1439.

Additionally, starts migrating the code to TypeScript and fixes bugs
found by the type system.

---

Reviewers, please note that this ended up being a rather long PR, reason
why is better to not only review the code but also to do manual testing
if possible. Take your time, but any issue out of the scope of state
management / queries migration should be reported as a new issue to be
addressed in a new PBI.

---

Notes for creating follow-up work, 

* Fix WifiConnectionForm to avoid `"error": "Network system error:
Network state error: Connection '<ssid>' already exists"` when
connecting to hidden network that previously failed. In short, we should
either, to drop the configuration created for a failed { hidden: true }
connection or to implement a mechanism to know that such a configuration
already exists and performs an _update_ instead of _add_.
* Review when it's possible to define a gateway and fix the UI
information accordingly
* Check if we can use the type Address from ipaddr package instead of
our own IPAddress type (most probably not)
* Add support for IPv6 since as @jreidinger
[said](#1519 (comment))
its usage is becoming more common. Look for `FIXME: IPv6 is not
supported yet.` comments

rust/agama-lib/src/network/settings.rs

@@ -71,6 +71,7 @@ pub struct NetworkDevice {
 }
 
 #[derive(Clone, Debug, Default, Serialize, Deserialize, utoipa::ToSchema)]
+#[serde(rename_all = "camelCase")]
 pub struct NetworkConnection {
     pub id: String,
     #[serde(skip_serializing_if = "Option::is_none")]

rust/agama-server/src/network/web.rs

@@ -9,7 +9,7 @@ use axum::{
     extract::{Path, State},
     http::StatusCode,
     response::{IntoResponse, Response},
-    routing::{delete, get, put},
+    routing::{delete, get, patch, post},
     Json, Router,
 };
 
@@ -101,10 +101,10 @@ pub async fn network_service<T: Adapter + Send + Sync + 'static>(
                 .put(update_connection)
                 .get(connection),
         )
-        .route("/connections/:id/connect", get(connect))
-        .route("/connections/:id/disconnect", get(disconnect))
+        .route("/connections/:id/connect", patch(connect))
+        .route("/connections/:id/disconnect", patch(disconnect))
         .route("/devices", get(devices))
-        .route("/system/apply", put(apply))
+        .route("/system/apply", post(apply))
         .route("/wifi", get(wifi_networks))
         .with_state(state))
 }
@@ -293,7 +293,7 @@ async fn update_connection(
 }
 
 #[utoipa::path(
-    get,
+    patch,
     path = "/connections/:id/connect",
     context_path = "/api/network",
     responses(
@@ -325,7 +325,7 @@ async fn connect(
 }
 
 #[utoipa::path(
-    get,
+    patch,
     path = "/connections/:id/disconnect",
     context_path = "/api/network",
     responses(
@@ -357,7 +357,7 @@ async fn disconnect(
 }
 
 #[utoipa::path(
-    put,
+    post,
     path = "/system/apply",
     context_path = "/api/network",
     responses(

web/src/api/http.ts

@@ -39,7 +39,7 @@ const get = (url: string) => http.get(url).then(({ data }) => data);
  * @param url - endpoint URL
  * @param data - Request payload
  */
-const patch = (url: string, data: object) => http.patch(url, data);
+const patch = (url: string, data?: object) => http.patch(url, data);
 
 /**
  * Performs a PUT request with the given URL and data
@@ -55,7 +55,7 @@ const put = (url: string, data: object) => http.put(url, data);
  * @param url - endpoint URL
  * @param data - request payload
  */
-const post = (url: string, data: object) => http.post(url, data);
+const post = (url: string, data?: object) => http.post(url, data);
 
 /**
  * Performs a DELETE request on the given URL

web/src/api/network.ts

@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) [2024] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import { del, get, patch, post, put } from "~/api/http";
+import { APIAccessPoint, APIConnection, APIDevice, NetworkGeneralState } from "~/types/network";
+
+/**
+ * Returns the network configuration
+ */
+const fetchState = (): Promise<NetworkGeneralState> => get("/api/network/state");
+
+/**
+ * Returns a list of known devices
+ */
+const fetchDevices = (): Promise<APIDevice[]> => get("/api/network/devices");
+
+/**
+ * Returns data for given connection name
+ */
+const fetchConnection = (name: string): Promise<APIConnection> =>
+  get(`/api/network/connections/${name}`);
+
+/**
+ * Returns the list of known connections
+ */
+const fetchConnections = (): Promise<APIConnection[]> => get("/api/network/connections");
+
+/**
+ * Returns the list of known access points
+ */
+const fetchAccessPoints = (): Promise<APIAccessPoint[]> => get("/api/network/wifi");
+
+/**
+ * Adds a new connection
+ *
+ * @param connection - connection to be added
+ */
+const addConnection = (connection: APIConnection) => post("/api/network/connections", connection);
+
+/**
+ * Updates given connection
+ *
+ * @param connection - connection to be added
+ */
+const updateConnection = (connection: APIConnection) =>
+  put(`/api/network/connections/${connection.id}`, connection);
+
+/**
+ * Deletes the connection matching given name
+ */
+const deleteConnection = (name: string) => del(`/api/network/connections/${name}`);
+
+/**
+ * Apply network changes
+ */
+const applyChanges = () => post("/api/network/system/apply");
+
+/**
+ * Performs the connect action for connection matching given name
+ */
+const connect = (name: string) => patch(`/api/network/connections/${name}/connect`);
+
+/**
+ * Performs the disconnect action for connection matching given name
+ */
+const disconnect = (name: string) => patch(`/api/network/connections/${name}/disconnect`);
+
+export {
+  fetchState,
+  fetchDevices,
+  fetchConnection,
+  fetchConnections,
+  fetchAccessPoints,
+  applyChanges,
+  addConnection,
+  updateConnection,
+  deleteConnection,
+  connect,
+  disconnect,
+};

web/src/client/index.js

@@ -24,14 +24,12 @@
 import { L10nClient } from "./l10n";
 import { ManagerClient } from "./manager";
 import { StorageClient } from "./storage";
-import { NetworkClient } from "./network";
 import { HTTPClient, WSClient } from "./http";
 
 /**
  * @typedef {object} InstallerClient
  * @property {L10nClient} l10n - localization client.
  * @property {ManagerClient} manager - manager client.
- * @property {NetworkClient} network - network client.
  * @property {StorageClient} storage - storage client.
  * @property {() => WSClient} ws - Agama WebSocket client.
  * @property {() => boolean} isConnected - determines whether the client is connected
@@ -53,7 +51,6 @@ const createClient = (url) => {
   const l10n = new L10nClient(client);
   // TODO: unify with the manager client
   const manager = new ManagerClient(client);
-  const network = new NetworkClient(client);
   const storage = new StorageClient(client);
 
   const isConnected = () => client.ws().isConnected() || false;
@@ -62,7 +59,6 @@ const createClient = (url) => {
   return {
     l10n,
     manager,
-    network,
     storage,
     isConnected,
     isRecoverable,