Fixes for the NetworkPage wifi card

agama-project · Jun 26, 2024 · 143be2f · 143be2f
1 parent ace14e9
commit 143be2f
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 41 deletions.
diff --git a/web/src/client/network/index.js b/web/src/client/network/index.js
@@ -251,7 +251,7 @@ class NetworkClient {
         const network = {
           ...ap,
           settings: connections.find(c => c.wireless?.ssid === ap.ssid),
-          device: devices.find(c => c.connection === ap.ssid),
+          device: devices.find(c => c.connection === ap.ssid)
         };
 
         // Group networks

diff --git a/web/src/components/network/IpSettingsForm.jsx b/web/src/components/network/IpSettingsForm.jsx
@@ -113,7 +113,7 @@ export default function IpSettingsForm() {
     };
 
     client.network.updateConnection(updatedConnection)
-      .then(navigate("-1"))
+      .then(navigate(-1))
       // TODO: better error reporting. By now, it sets an error for the whole connection.
       .catch(({ message }) => setErrors({ object: message }));
   };

diff --git a/web/src/components/network/NetworkPage.jsx b/web/src/components/network/NetworkPage.jsx
@@ -85,47 +85,34 @@ export default function NetworkPage() {
   const ready = (connections !== undefined) && (devices !== undefined);
 
   const WifiConnections = () => {
-    const wifiConnections = connections.filter(c => c.wireless);
-    console.log(wifiConnections);
     const { wireless_enabled: wifiAvailable } = settings;
-    const activeConnection = wifiAvailable && wifiConnections.find(c => c.status === "up");
-
-    const ConnectionButton = () => {
-      if (!wifiAvailable) return;
 
+    if (!wifiAvailable) {
       return (
-        <Split hasGutter>
-          <ButtonLink isPrimary to="wifis">
-            {_("Change")}
-          </ButtonLink>
-        </Split>
+        <CardField>
+          <CardField.Content>
+            <EmptyState title={_("No WiFi support")} icon="wifi_off" color="warning-color-200">
+              {_("The system does not support WiFi connections, probably because of missing or disabled hardware.")}
+            </EmptyState>
+          </CardField.Content>
+        </CardField>
       );
-    };
-
-    const DisconnectionButton = () => {
-      if (!wifiAvailable || !activeConnection) return;
+    }
 
-      return (
-        <ButtonLink onClick={async () => await client.disconnect(activeConnection)}>
-          {_("Disconnect")}
-        </ButtonLink>
-      );
-    };
+    const wifiConnections = connections.filter(c => c.wireless);
+    const activeWifiDevice = devices.find(d => d.type === "wireless" && d.state === "activated");
+    const activeConnection = wifiConnections.find(c => c.id === activeWifiDevice?.connection);
 
     return (
       <CardField
         label={_("Wi-Fi")}
         actions={
-          <Split hasGutter>
-            <ConnectionButton />
-          </Split>
+          <ButtonLink isPrimary={!activeConnection} to="wifis">
+            {activeConnection ? _("Change") : _("Connect")}
+          </ButtonLink>
         }
       >
         <CardField.Content>
-          {!wifiAvailable &&
-            <EmptyState title={_("No WiFi support")} icon="wifi_off" color="warning-color-200">
-              {_("The system does not support WiFi connections, probably because of missing or disabled hardware.")}
-            </EmptyState>}
           {activeConnection
             ? (
               <EmptyState title={sprintf(_("Conected to %s"), activeConnection.id)} icon="wifi" color="success-color-100">
@@ -143,7 +130,7 @@ export default function NetworkPage() {
   };
 
   const WiredConnections = () => {
-    const wiredConnections = connections.filter(c => !c.wireless && (c.id !== "lo"));
+    const wiredConnections = connections.filter(c => !c.wireless);
 
     if (wiredConnections.length === 0) return <NoWiredConnections />;
 

diff --git a/web/src/components/network/WifiNetworksListPage.jsx b/web/src/components/network/WifiNetworksListPage.jsx
@@ -33,10 +33,12 @@ import {
 } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
 import { WifiConnectionForm } from "~/components/network";
-import { ButtonLink } from "~/components/core";
+import { ButtonLink, EmptyState } from "~/components/core";
 import { DeviceState } from "~/client/network/model";
 import { useInstallerClient } from "~/context/installer";
 import { _ } from "~/i18n";
+import { formatIp } from "~/client/network/utils";
+import { sprintf } from "sprintf-js";
 
 const HIDDEN_NETWORK = Object.freeze({ hidden: true });
 
@@ -60,13 +62,27 @@ const networkState = (state) => {
   }
 };
 
-const ConnectionData = (network) => {
-  // TODO: show the connection details/settings
-  return ("");
+const connectionAddresses = (network) => {
+  const { device, settings } = network;
+  const addresses = device ? device.addresses : settings?.addresses;
+
+  return addresses?.map(formatIp).join(", ");
+};
+
+const ConnectionData = ({ network }) => {
+  return (
+    <Stack hasGutter>
+      {connectionAddresses(network)}
+    </Stack>
+  );
 };
 
-const WifiDrawerPanelBody = ({ network, onCancel }) => {
+const WifiDrawerPanelBody = ({ network, onCancel, onForget }) => {
   const client = useInstallerClient();
+  const forgetNetwork = async () => {
+    await client.network.deleteConnection(network.settings.id);
+    onForget();
+  };
 
   if (!network) return;
 
@@ -83,7 +99,7 @@ const WifiDrawerPanelBody = ({ network, onCancel }) => {
         <ButtonLink to={`/network/connections/${network.settings.id}/edit`}>
           {_("Edit")}
         </ButtonLink>
-        <Button variant="secondary" isDanger onClick={async () => await client.network.deleteConnection(network.settings.id)}>
+        <Button variant="secondary" isDanger onClick={forgetNetwork}>
           {_("Forget")}
         </Button>
       </Split>
@@ -99,7 +115,7 @@ const WifiDrawerPanelBody = ({ network, onCancel }) => {
     case _("Connected"):
       return (
         <Stack>
-          <ConnectionData />
+          <ConnectionData network={network} />
           <Split hasGutter>
             <ButtonLink onClick={async () => await client.network.disconnect(network.settings)}>
               {_("Disconnect")}
@@ -154,6 +170,7 @@ function WifiNetworksListPage({
   selected,
   onSelectionChange,
   networks = [],
+  forceUpdateNetworksCallback = () => { }
 }) {
   const selectHiddenNetwork = () => {
     onSelectionChange(HIDDEN_NETWORK);
@@ -208,6 +225,7 @@ function WifiNetworksListPage({
                   <WifiDrawerPanelBody
                     network={selected}
                     onCancel={unselectNetwork}
+                    onForget={forceUpdateNetworksCallback}
                   />
                 </DrawerPanelBody>
               </DrawerPanelContent>

diff --git a/web/src/components/network/WifiSelectorPage.jsx b/web/src/components/network/WifiSelectorPage.jsx
@@ -48,6 +48,8 @@ function WifiSelectorPage() {
   const [updateNetworks, setUpdateNetworks] = useState(false);
   const [needAuth, setNeedAuth] = useState(null);
 
+  const reloadNetworks = () => setUpdateNetworks(true);
+
   const selectNetwork = (network) => {
     saveData({ selectedWifi: network });
     setSelected(network);
@@ -93,7 +95,7 @@ function WifiSelectorPage() {
     return client.onNetworkChange(({ type, payload }) => {
       switch (type) {
         case NetworkEventTypes.DEVICE_ADDED: {
-          setUpdateNetworks(true);
+          reloadNetworks();
           break;
         }
 
@@ -108,12 +110,12 @@ function WifiSelectorPage() {
             }
           }
 
-          setUpdateNetworks(true);
+          reloadNetworks();
           break;
         }
 
         case NetworkEventTypes.DEVICE_REMOVED: {
-          setUpdateNetworks(true);
+          reloadNetworks();
           break;
         }
       }
@@ -136,6 +138,7 @@ function WifiSelectorPage() {
               activeNetwork={activeNetwork}
               showHiddenForm={showHiddenForm}
               availableNetworks={networks}
+              forceUpdateNetworksCallback={reloadNetworks}
             // onSelectionCallback={(network) => {
             //   switchSelectedNetwork(network);
             //   if (network.settings && !network.device) {