Allow to edit a WiFi connection

agama-project · Jun 25, 2024 · ad385d0 · ad385d0
1 parent fcb312a
commit ad385d0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 16 deletions.
diff --git a/web/src/components/network/NetworkPage.jsx b/web/src/components/network/NetworkPage.jsx
@@ -48,9 +48,9 @@ const NoWiredConnections = () => {
  */
 export default function NetworkPage() {
   const { network: client } = useInstallerClient();
-  const { connections: initialConnections, settings } = useLoaderData();
+  const { connections: initialConnections, devices: initialDevices, settings } = useLoaderData();
   const [connections, setConnections] = useState(initialConnections);
-  const [devices, setDevices] = useState(undefined);
+  const [devices, setDevices] = useState(initialDevices);
 
   useEffect(() => {
     return client.onNetworkChange(({ type, payload }) => {
@@ -69,6 +69,7 @@ export default function NetworkPage() {
             const newDevices = devs.filter((d) => d.name !== name);
             return [...newDevices, client.fromApiDevice(data)];
           });
+
           break;
         }
 
@@ -81,12 +82,6 @@ export default function NetworkPage() {
     });
   }, [client, devices]);
 
-  useEffect(() => {
-    if (devices !== undefined) return;
-
-    client.devices().then(setDevices);
-  }, [client, devices]);
-
   const connectionDevice = ({ id }) => devices?.find(({ connection }) => id === connection);
   const connectionAddresses = (connection) => {
     const device = connectionDevice(connection);
@@ -106,17 +101,21 @@ export default function NetworkPage() {
       if (!wifiAvailable) return;
 
       return (
-        <ButtonLink isPrimary={activeConnection} to="wifis">
-          {activeConnection ? _("Change") : _("Connect")}
-        </ButtonLink>
+        <Split hasGutter>
+          <ButtonLink isPrimary to="wifis">
+            {_("Change")}
+          </ButtonLink>
+        </Split>
       );
     };
 
     const DisconnectionButton = () => {
       if (!wifiAvailable || !activeConnection) return;
 
       return (
-        <Button variant="secondary">{_("Disconnect")}</Button>
+        <ButtonLink onClick={async () => await client.disconnect(activeConnection)}>
+          {_("Disconnect")}
+        </ButtonLink>
       );
     };
 
@@ -126,7 +125,6 @@ export default function NetworkPage() {
         actions={
           <Split hasGutter>
             <ConnectionButton />
-            <DisconnectionButton />
           </Split>
         }
       >

diff --git a/web/src/components/network/WifiNetworksListPage.jsx b/web/src/components/network/WifiNetworksListPage.jsx
@@ -80,6 +80,9 @@ const WifiDrawerPanelBody = ({ network, onCancel }) => {
         <ButtonLink onClick={async () => await client.network.connectTo(network.settings)}>
           {_("Connect")}
         </ButtonLink>
+        <ButtonLink to={`/network/connections/${network.settings.id}/edit`}>
+          {_("Edit")}
+        </ButtonLink>
         <Button variant="secondary" isDanger onClick={async () => await client.network.deleteConnection(network.settings.id)}>
           {_("Forget")}
         </Button>
@@ -101,6 +104,9 @@ const WifiDrawerPanelBody = ({ network, onCancel }) => {
             <ButtonLink onClick={async () => await client.network.disconnect(network.settings)}>
               {_("Disconnect")}
             </ButtonLink>
+            <ButtonLink to={`/network/connections/${network.settings.id}/edit`}>
+              {_("Edit")}
+            </ButtonLink>
             <Button variant="secondary" isDanger onClick={async () => await client.network.deleteConnection(network.settings.id)}>
               {_("Forget")}
             </Button>

diff --git a/web/src/components/network/routes.js b/web/src/components/network/routes.js
@@ -33,10 +33,9 @@ const client = await createDefaultClient();
 
 const loaders = {
   all: async () => {
-    const connections = await client.network.connections();
     const devices = await client.network.devices();
+    const connections = await client.network.connections();
     const settings = await client.network.settings();
-    console.log("loaders.all", connections, devices, settings);
     return { connections, devices, settings };
   },
   connection: async ({ params }) => {
@@ -45,7 +44,6 @@ const loaders = {
   },
   wifis: async () => {
     const connections = await client.network.connections();
-    console.log("Obtaining devices");
     const devices = await client.network.devices();
     const accessPoints = await client.network.accessPoints();
     const networks = await client.network.loadNetworks(devices, connections, accessPoints);