Small network fixes (#1309)

## Problem

- Set settings when load the network page as otherwise wireless will be
set to not supported.
- Fixed set of device routes from the  API when no netmask is defined.

web/src/client/network/index.js

@@ -123,7 +123,7 @@ class NetworkClient {
     const { ipConfig = {}, ...dev } = device;
     const routes4 = (ipConfig.routes4 || []).map((route) => {
       const [ip, netmask] = route.destination.split("/");
-      const destination = { address: ip, prefix: ipPrefixFor(netmask) };
+      const destination = (netmask !== undefined) ? { address: ip, prefix: ipPrefixFor(netmask) } : { address: ip };
 
       return { ...route, destination };
     });

web/src/client/network/model.js

@@ -176,8 +176,8 @@ const ApSecurityFlags = Object.freeze({
 /**
 * @typedef {object} NetworkSettings
 * @property {boolean} connectivity
-* @property {boolean} wirelessEnabled
-* @property {boolean} networkingEnabled
+* @property {boolean} wireless_enabled
+* @property {boolean} networking_enabled
 * @property {string} hostname
 
 /**

web/src/components/network/NetworkPage.jsx

@@ -85,11 +85,10 @@ const NoWifiConnections = ({ wifiScanSupported, openWifiSelector }) => {
  */
 export default function NetworkPage() {
   const { network: client } = useInstallerClient();
-  const initialConnections = useLoaderData();
+  const { connections: initialConnections, settings } = useLoaderData();
   const [connections, setConnections] = useState(initialConnections);
   const [devices, setDevices] = useState(undefined);
   const [selectedConnection, setSelectedConnection] = useState(null);
-  const [wifiScanSupported, setWifiScanSupported] = useState(false);
   const [wifiSelectorOpen, setWifiSelectorOpen] = useState(false);
 
   const openWifiSelector = () => setWifiSelectorOpen(true);
@@ -124,13 +123,6 @@ export default function NetworkPage() {
     });
   }, [client, devices]);
 
-  useEffect(() => {
-    if (connections !== undefined) return;
-
-    client.settings().then((s) => setWifiScanSupported(s.wireless_enabled));
-    // client.connections().then(setConnections);
-  }, [client, connections]);
-
   useEffect(() => {
     if (devices !== undefined) return;
 
@@ -158,7 +150,7 @@ export default function NetworkPage() {
 
     if (wifiConnections.length === 0) {
       return (
-        <NoWifiConnections wifiScanSupported={wifiScanSupported} openWifiSelector={openWifiSelector} />
+        <NoWifiConnections wifiScanSupported={settings.wireless_enabled} openWifiSelector={openWifiSelector} />
       );
     }
 
@@ -183,7 +175,7 @@ export default function NetworkPage() {
             <h2>{_("Network")}</h2>
           </FlexItem>
           <If
-            condition={wifiScanSupported}
+            condition={settings.wireless_enabled}
             then={
               <FlexItem align={{ default: "alignRight" }}>
                 <Button variant="secondary" onClick={openWifiSelector}>
@@ -215,7 +207,7 @@ export default function NetworkPage() {
       </Page.MainContent>
 
       <If
-        condition={wifiScanSupported}
+        condition={settings.wireless_enabled}
         then={<WifiSelector isOpen={wifiSelectorOpen} onClose={closeWifiSelector} />}
       />
     </>

web/src/components/network/routes.js

@@ -31,9 +31,10 @@ import { createDefaultClient } from "~/client";
 const client = await createDefaultClient();
 
 const loaders = {
-  connections: async () => {
+  all: async () => {
     const connections = await client.network.connections();
-    return connections;
+    const settings = await client.network.settings();
+    return { connections, settings };
   },
   connection: async ({ params }) => {
     const connections = await client.network.connections();
@@ -49,7 +50,7 @@ const routes = {
     icon: "settings_ethernet"
   },
   children: [
-    { index: true, element: <NetworkPage />, loader: loaders.connections },
+    { index: true, element: <NetworkPage />, loader: loaders.all },
     {
       path: "connections/:id/edit",
       element: <IpSettingsForm />,