Merge pull request #477 from yast/wifi_page_options

Wifi page options

web/src/components/layout/Icon.jsx

@@ -57,6 +57,7 @@ import Terminal from "@icons/terminal.svg?component";
 import Translate from "@icons/translate.svg?component";
 import Warning from "@icons/warning.svg?component";
 import Wifi from "@icons/wifi.svg?component";
+import WifiFind from "@icons/wifi_find.svg?component";
 
 import Loading from "./three-dots-loader-icon.svg?component";
 
@@ -95,7 +96,8 @@ const icons = {
   terminal: Terminal,
   translate: Translate,
   warning: Warning,
-  wifi: Wifi
+  wifi: Wifi,
+  wifi_find: WifiFind
 };
 
 /**

web/src/components/network/ConnectionsTable.jsx

@@ -60,10 +60,12 @@ const RowActions = ({ actions, connection, ...props }) => {
  * @param {object} props
  * @param {Connection[]} props.connections - Connections to be shown
  * @param {function} props.onEdit - function to be called for editing a connection
+ * @param {function} props.onForget - function to be called for forgetting a connection
  */
 export default function ConnectionsTable ({
   connections,
-  onEdit
+  onEdit,
+  onForget
 }) {
   if (connections.length === 0) return null;
 
@@ -83,8 +85,15 @@ export default function ConnectionsTable ({
               title: "Edit",
               "aria-label": `Edit connection ${connection.name}`,
               onClick: () => onEdit(connection)
-            }
-          ];
+            },
+            typeof onForget === 'function' && {
+              title: "Forget",
+              "aria-label": `Forget connection ${connection.name}`,
+              className: "danger-action",
+              icon: <Icon name="delete" size="24" />,
+              onClick: () => onForget(connection)
+            },
+          ].filter(Boolean);
 
           return (
             <Tr key={connection.id}>

web/src/components/network/NetworkPage.jsx

@@ -21,10 +21,10 @@
 
 import React, { useEffect, useState } from "react";
 import { Button, Skeleton } from "@patternfly/react-core";
-
+import { Icon } from "~/components/layout";
 import { useInstallerClient } from "~/context/installer";
 import { ConnectionTypes, NetworkEventTypes } from "~/client/network";
-import { Page, Section } from "~/components/core";
+import { Page, PageOptions, Section } from "~/components/core";
 import { ConnectionsTable, IpSettingsForm, WifiSelector } from "~/components/network";
 
 /**
@@ -42,7 +42,13 @@ const WifiScan = ({ supported, actionVariant = "link" }) => {
 
   return (
     <>
-      <Button variant={actionVariant} onClick={() => setWifiSelectorOpen(true)}>Connect to a Wi-Fi network</Button>
+      <Button
+        variant={actionVariant}
+        onClick={() => setWifiSelectorOpen(true)}
+        icon={<Icon name="wifi_find" size="24" />}
+      >
+        Connect to a Wi-Fi network
+      </Button>
       <WifiSelector isOpen={wifiSelectorOpen} onClose={() => setWifiSelectorOpen(false)} />
     </>
   );
@@ -76,7 +82,7 @@ const NoWifiConnections = ({ wifiScanSupported }) => {
     <div className="stack">
       <div className="bold">No WiFi connections found</div>
       <div>{message}</div>
-      <WifiScan supported={wifiScanSupported} buttonVariant="primary" />
+      <WifiScan supported={wifiScanSupported} actionVariant="primary" />
     </div>
   );
 };
@@ -140,6 +146,11 @@ export default function NetworkPage() {
     client.getConnection(id).then(setSelectedConnection);
   };
 
+  const forgetConnection = async ({ id }) => {
+    const connection = await client.getConnection(id);
+    client.deleteConnection(connection);
+  };
+
   const activeWiredConnections = connections.filter(c => c.type === ConnectionTypes.ETHERNET);
   const activeWifiConnections = connections.filter(c => c.type === ConnectionTypes.WIFI);
 
@@ -150,10 +161,7 @@ export default function NetworkPage() {
 
     return (
       <>
-        <ConnectionsTable connections={activeWifiConnections} onEdit={selectConnection} />
-        <div className="horizontally-centered">
-          <WifiScan supported={wifiScanSupported} />
-        </div>
+        <ConnectionsTable connections={activeWifiConnections} onEdit={selectConnection} onForget={forgetConnection} />
       </>
     );
   };
@@ -176,6 +184,10 @@ export default function NetworkPage() {
 
       { /* TODO: improve the connections edition */ }
       { selectedConnection && <IpSettingsForm connection={selectedConnection} onClose={() => setSelectedConnection(null)} /> }
+      { wifiScanSupported &&
+        <PageOptions title="Network">
+          <WifiScan supported={wifiScanSupported} />
+        </PageOptions> }
     </Page>
   );
 }

web/src/components/network/NetworkPage.test.jsx

@@ -82,29 +82,6 @@ describe("NetworkPage", () => {
     within(section).getByText("192.168.69.200/24");
   });
 
-  describe("when WiFi scan is supported", () => {
-    beforeEach(() => {
-      settingsFn.mockReturnValue({ ...networkSettings, wifiScanSupported: true });
-    });
-
-    it("displays a link for scanning other WiFi networks", async () => {
-      installerRender(<NetworkPage />);
-
-      const heading = await screen.findByRole("heading", { name: "WiFi networks" });
-      const section = heading.closest("section");
-      const scanWifiButton = within(section).getByRole("button", { name: "Connect to a Wi-Fi network" });
-      expect(scanWifiButton.classList.contains("pf-m-link")).toBe(true);
-    });
-
-    it("opens the WiFi selector dialog when user clicks for scanning WiFi networks", async () => {
-      const { user } = installerRender(<NetworkPage />);
-      const link = await screen.findByRole("button", { name: "Connect to a Wi-Fi network" });
-      await user.click(link);
-      const wifiDialog = await screen.findByRole("dialog");
-      within(wifiDialog).getByText("Connect to a Wi-Fi network");
-    });
-  });
-
   describe("when no wired connection is detected", () => {
     beforeEach(() => {
       activeConnectionsFn.mockReturnValue([wiFiConnection]);