Move network to TanStack query (#1489)

Adapted the UI using TanStack query instead of route loaders and
useEffect hooks.


---

Related to #1439,
#1452,
#1470, and
#1483

web/src/client/network/index.js

@@ -26,6 +26,8 @@ import {
  ConnectionTypes,
  createAccessPoint,
  createConnection,
+ DeviceState,
+ NetworkState,
  securityFromFlags,
 } from "./model";
 import { formatIp, ipPrefixFor } from "./utils";
@@ -239,7 +241,26 @@ class NetworkClient {
  return this.client.get(`/network/connections/${connection.id}/disconnect`);
  }
 
- async loadNetworks(devices, connections, accessPoints) {
+ networkStateFor(state) {
+ switch (state) {
+ case DeviceState.CONFIG:
+ case DeviceState.IPCHECK:
+ // TRANSLATORS: Wifi network status
+ return NetworkState.CONNECTING;
+ case DeviceState.ACTIVATED:
+ // TRANSLATORS: Wifi network status
+ return NetworkState.CONNECTED;
+ case DeviceState.DEACTIVATING:
+ case DeviceState.FAILED:
+ case DeviceState.DISCONNECTED:
+ // TRANSLATORS: Wifi network status
+ return NetworkState.DISCONNECTED;
+ default:
+ return "";
+ }
+ }
+
+ loadNetworks(devices, connections, accessPoints) {
  const knownSsids = [];
 
  return accessPoints

web/src/client/network/model.js

@@ -49,6 +49,12 @@ const DeviceState = Object.freeze({
  FAILED: "failed",
 });
 
+const NetworkState = Object.freeze({
+ DISCONNECTED: "disconnected",
+ CONNECTING: "connecting",
+ CONNECTED: "connected"
+});
+
 /**
  * Returns a human readable connection state
  *
@@ -302,6 +308,7 @@ export {
  createConnection,
  createDevice,
  DeviceState,
+ NetworkState,
  securityFromFlags,
  SecurityProtocols,
 };

web/src/components/network/ConnectionsTable.jsx

@@ -64,7 +64,8 @@ export default function ConnectionsTable({ connections, devices, onForget }) {
  <Th width={25}>{_("Name")}</Th>
  {/* TRANSLATORS: table header */}
  <Th>{_("IP addresses")}</Th>
- <Th />
+ {/* TRANSLATORS: table header aria label */}
+ <Th aria-label={_("Connection actions")} />
  </Tr>
  </Thead>
  <Tbody>

web/src/components/network/NetworkPage.jsx

@@ -21,67 +21,29 @@
 
 // @ts-check
 
-import React, { useCallback, useEffect, useState } from "react";
-import { CardBody, Grid, GridItem, Skeleton, Split, Stack } from "@patternfly/react-core";
-import { useLoaderData } from "react-router-dom";
+import React from "react";
+import { CardBody, Grid, GridItem } from "@patternfly/react-core";
 import { ButtonLink, CardField, EmptyState, Page } from "~/components/core";
 import { ConnectionsTable } from "~/components/network";
-import { NetworkEventTypes } from "~/client/network";
-import { useInstallerClient } from "~/context/installer";
 import { _ } from "~/i18n";
 import { formatIp } from "~/client/network/utils";
 import { sprintf } from "sprintf-js";
+import { useNetwork, useNetworkConfigChanges } from "~/queries/network";
 
 /**
  * Page component holding Network settings
  * @component
  */
 export default function NetworkPage() {
- const { network: client } = useInstallerClient();
- // @ts-ignore
- const { connections: initialConnections, devices: initialDevices, settings } = useLoaderData();
- const [connections, setConnections] = useState(initialConnections);
- const [devices, setDevices] = useState(initialDevices);
- const [updateState, setUpdateState] = useState(false);
-
- const fetchState = useCallback(async () => {
- const devices = await client.devices();
- const connections = await client.connections();
- setDevices(devices);
- setConnections(connections);
- }, [client]);
-
- useEffect(() => {
- if (!updateState) return;
-
- setUpdateState(false);
- fetchState();
- }, [fetchState, updateState]);
-
- useEffect(() => {
- return client.onNetworkChange(({ type }) => {
- if (
- [
- NetworkEventTypes.DEVICE_ADDED,
- NetworkEventTypes.DEVICE_UPDATED,
- NetworkEventTypes.DEVICE_REMOVED,
- // @ts-ignore
- ].includes(type)
- ) {
- setUpdateState(true);
- }
- });
- });
-
+ const { connections, devices, settings } = useNetwork();
  const connectionDevice = ({ id }) => devices?.find(({ connection }) => id === connection);
  const connectionAddresses = (connection) => {
  const device = connectionDevice(connection);
  const addresses = device ? device.addresses : connection.addresses;
 
  return addresses?.map(formatIp).join(", ");
  };
-
- const ready = connections !== undefined && devices !== undefined;
+ useNetworkConfigChanges();
 
  const WifiConnections = () => {
  const { wireless_enabled: wifiAvailable } = settings;
@@ -132,36 +94,15 @@ export default function NetworkPage() {
  );
  };
 
- const SectionSkeleton = () => (
- <Stack hasGutter>
- <Skeleton width="45%" />
- <Split hasGutter>
- <Skeleton width="30%" height="10px" />
- <Skeleton width="30%" height="10px" />
- <Skeleton width="30%" height="10px" />
- </Split>
- <Split hasGutter>
- <Skeleton width="30%" height="10px" />
- <Skeleton width="30%" height="10px" />
- <Skeleton width="30%" height="10px" />
- </Split>
- </Stack>
- );
-
  const WiredConnections = () => {
  const wiredConnections = connections.filter((c) => !c.wireless);
  const total = wiredConnections.length;
 
  return (
  <CardField label={total > 0 && _("Wired")}>
  <CardBody>
- {!ready && <SectionSkeleton />}
- {ready && total === 0 && (
- <EmptyState title={_("No wired connections found")} icon="warning" />
- )}
- {ready && total !== 0 && (
- <ConnectionsTable connections={wiredConnections} devices={devices} />
- )}
+ {total === 0 && (<EmptyState title={_("No wired connections found")} icon="warning" />)}
+ {total !== 0 && (<ConnectionsTable connections={wiredConnections} devices={devices} />)}
  </CardBody>
  </CardField>
  );

web/src/components/network/WifiConnectionForm.jsx

@@ -19,7 +19,7 @@
  * find current contact information at www.suse.com.
  */
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
  ActionGroup,
  Alert,
@@ -32,7 +32,9 @@ import {
 } from "@patternfly/react-core";
 import { PasswordInput } from "~/components/core";
 import { useInstallerClient } from "~/context/installer";
+import { useNetworkConfigChanges } from "~/queries/network";
 import { _ } from "~/i18n";
+import { useQueryClient } from "@tanstack/react-query";
 
 /*
  * FIXME: it should be moved to the SecurityProtocols enum that already exists or to a class based
@@ -57,13 +59,16 @@ const securityFrom = (supported) => {
 
 export default function WifiConnectionForm({ network, onCancel, onSubmitCallback }) {
  const { network: client } = useInstallerClient();
+ const queryClient = useQueryClient();
  const [error, setError] = useState(false);
  const [isConnecting, setIsConnecting] = useState(false);
  const [ssid, setSsid] = useState(network?.ssid || "");
  const [password, setPassword] = useState(network?.password || "");
  const [security, setSecurity] = useState(securityFrom(network?.security || []));
  const hidden = network?.hidden || false;
 
+ useNetworkConfigChanges();
+
  const accept = async (e) => {
  e.preventDefault();
  setError(false);
@@ -76,7 +81,9 @@ export default function WifiConnectionForm({ network, onCancel, onSubmitCallback
  client
  .addAndConnectTo(ssid, { security, password, hidden })
  .catch(() => setError(true))
- .finally(() => setIsConnecting(false));
+ .finally(
+ () => setIsConnecting(false) && queryClient.invalidateQueries({ queryKey: ["network"] }),
+ );
  };
 
  return (

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

@@ -28,6 +28,10 @@ import { WifiConnectionForm } from "~/components/network";
 
 jest.mock("~/client");
 
+jest.mock("~/queries/network", () => ({
+ useNetworkConfigChanges: jest.fn(),
+}));
+
 Element.prototype.scrollIntoView = jest.fn();
 
 const hiddenNetworkMock = {

web/src/components/network/WifiNetworksListPage.jsx

@@ -45,12 +45,13 @@ import {
 } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
 import { WifiConnectionForm } from "~/components/network";
-import { ButtonLink, EmptyState } from "~/components/core";
+import { ButtonLink } 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";
+import { useQueryClient } from "@tanstack/react-query";
+import { useSelectedWifi, useSelectedWifiChange } from "~/queries/network";
 
 const HIDDEN_NETWORK = Object.freeze({ hidden: true });
 
@@ -85,11 +86,13 @@ const ConnectionData = ({ network }) => {
  return <Stack hasGutter>{connectionAddresses(network)}</Stack>;
 };
 
-const WifiDrawerPanelBody = ({ network, onCancel, onForget }) => {
+const WifiDrawerPanelBody = ({ network, onCancel }) => {
  const client = useInstallerClient();
+ const queryClient = useQueryClient();
+ const { data } = useSelectedWifi();
  const forgetNetwork = async () => {
  await client.network.deleteConnection(network.settings.id);
- onForget();
+ queryClient.invalidateQueries({ queryKey: ["network", "connections"] })
  };
 
  if (!network) return;
@@ -98,6 +101,8 @@ const WifiDrawerPanelBody = ({ network, onCancel, onForget }) => {
 
  if (network === HIDDEN_NETWORK) return <Form />;
 
+ if (data.needsAuth) return <Form />;
+
  if (network.settings && !network.device) {
  return (
  <Split hasGutter>
@@ -180,22 +185,21 @@ const NetworkListName = ({ network }) => {
  * @param {function} props.onSelectionCallback - the function to trigger when user selects a network
  * @param {function} props.onCancelCallback - the function to trigger when user cancel dismiss before connecting to a network
  */
-function WifiNetworksListPage({
- selected,
- onSelectionChange,
- networks = [],
- forceUpdateNetworksCallback = () => {},
-}) {
- const selectHiddenNetwork = () => {
- onSelectionChange(HIDDEN_NETWORK);
+function WifiNetworksListPage({ networks = [] }) {
+ const { data } = useSelectedWifi();
+ const selected = data.ssid === undefined ? HIDDEN_NETWORK : networks.find(n => n.ssid === data.ssid);
+ const changeSelected = useSelectedWifiChange();
+
+ const selectHiddneNetwork = () => {
+ changeSelected.mutate({ ssid: undefined, needsAuth: null });
  };
 
  const selectNetwork = (ssid) => {
- onSelectionChange(networks.find((n) => n.ssid === ssid));
+ changeSelected.mutate({ ssid, needsAuth: null });
  };
 
  const unselectNetwork = () => {
- onSelectionChange(undefined);
+ changeSelected.mutate({ ssid: null, needsAuth: null });
  };
 
  const renderElements = () => {
@@ -246,7 +250,6 @@ function WifiNetworksListPage({
  <WifiDrawerPanelBody
  network={selected}
  onCancel={unselectNetwork}
- onForget={forceUpdateNetworksCallback}
  />
  </DrawerPanelBody>
  </DrawerPanelContent>
@@ -261,7 +264,7 @@ function WifiNetworksListPage({
  >
  {renderElements()}
  </DataList>
- <Button variant="link" onClick={selectHiddenNetwork}>
+ <Button variant="link" onClick={selectHiddneNetwork}>
  {_("Connect to hidden network")}
  </Button>
  </Stack>