Add support for configuring WiFi devices

web/.eslintrc.json

@@ -33,6 +33,7 @@
         "newline-per-chained-call": ["error", { "ignoreChainWithDepth": 2 }],
         "no-var": "error",
         "no-use-before-define": "off",
+        "@typescript-eslint/no-unused-vars": ["warn", { "ignoreRestSiblings": true }],
         "@typescript-eslint/no-use-before-define": "warn",
         "@typescript-eslint/ban-ts-comment": "off",
         "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],

web/package.json

@@ -65,9 +65,9 @@
     "webpack-cli": "^4.9.1"
   },
   "dependencies": {
-    "@patternfly/patternfly": "4.192.1",
-    "@patternfly/react-core": "4.207.0",
-    "@patternfly/react-table": "^4.61.15",
+    "@patternfly/patternfly": "^4.219.2",
+    "@patternfly/react-core": "^4.261.0",
+    "@patternfly/react-table": "^4.111.33",
     "core-js": "^3.21.1",
     "eos-ds": "^5.0.0",
     "eos-icons-react": "^2.3.0",

web/src/ConnectionsDataList.jsx

@@ -35,7 +35,8 @@ import {
   EOS_WIFI as WifiIcon
 } from "eos-icons-react";
 
-import { ConnectionTypes, formatIp } from "./client/network";
+import { ConnectionTypes } from "./client/network";
+import { formatIp } from "./client/network/utils";
 
 export default function ConnectionsDataList({ conns, onSelect }) {
   if (conns.length === 0) return null;
@@ -58,7 +59,7 @@ export default function ConnectionsDataList({ conns, onSelect }) {
   };
 
   const renderConnectionId = (connection, onClick) => {
-    if (typeof onClick !== "function") return connection.id;
+    if (typeof onClick !== "function") return connection.name || connection.id;
 
     return (
       <Button variant="link" isInline onClick={() => onClick(connection)}>

web/src/ConnectionsDataList.test.jsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) [2022] 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 React from "react";
+import { screen } from "@testing-library/react";
+import { plainRender } from "./test-utils";
+import ConnectionsDataList from "./ConnectionsDataList";
+import { ConnectionTypes } from "./client/network";
+
+jest.mock("./client");
+
+const wiredConnection = {
+  id: "wired-1",
+  name: "Wired 1",
+  type: ConnectionTypes.ETHERNET,
+  addresses: [{ address: "192.168.122.20", prefix: 24 }]
+};
+const wiFiConnection = {
+  id: "wifi-1",
+  name: "WiFi 1",
+  type: ConnectionTypes.WIFI,
+  addresses: [{ address: "192.168.69.200", prefix: 24 }]
+};
+
+const conns = [wiredConnection, wiFiConnection];
+
+describe("ConnectionsDataList", () => {
+  describe("when no connections are given", () => {
+    it("renders nothing", () => {
+      const { container } = plainRender(<ConnectionsDataList conns={[]} />, { usingLayout: false });
+      expect(container).toBeEmptyDOMElement();
+    });
+  });
+
+  describe("when a list of connections are given", () => {
+    it("renders a list with the name and the IPv4 addresses of each connection", () => {
+      plainRender(<ConnectionsDataList conns={conns} />, { usingLayout: false });
+
+      screen.getByText("Wired 1");
+      screen.getByText("WiFi 1");
+      screen.getByText("192.168.122.20/24");
+      screen.getByText("192.168.69.200/24");
+    });
+  });
+
+  describe("when the user clicks on a connection", () => {
+    it("calls the onSelect function", async () => {
+      const onSelect = jest.fn();
+      const { user } = plainRender(<ConnectionsDataList conns={conns} onSelect={onSelect} />, { usingLayout: false });
+      const connection = screen.getByRole("button", { name: "WiFi 1" });
+      await user.click(connection);
+      expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ id: "wifi-1" }));
+    });
+  });
+});