fix(web): properly reload available devices after reprobing

web/package/agama-web-ui.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Tue Apr  1 08:53:43 UTC 2025 - José Iván López González <jlopez@suse.com>
+
+- Fix reloading data after reprobing devices
+  (gh#agama-project/agama#2235).
+
 -------------------------------------------------------------------
 Thu Mar 27 12:40:04 UTC 2025 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
 

web/src/api/storage/devices.ts

@@ -37,6 +37,9 @@ import {
 import { StorageDevice } from "~/types/storage";
 
 /**
+ * @fixme Use a transformation instead of building the devices as part of the fetch function, see
+ * https://tkdodo.eu/blog/react-query-data-transformations.
+ *
  * Returns the list of devices in the given scope
  *
  * @param scope - "system": devices in the current state of the system; "result":

web/src/queries/storage.ts

@@ -21,7 +21,7 @@
  */
 
 import { useMutation, useQuery, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
-import React from "react";
+import React, { useMemo } from "react";
 import {
   fetchConfig,
   setConfig,
@@ -65,6 +65,12 @@ const devicesQuery = (scope: "result" | "system") => ({
   staleTime: Infinity,
 });
 
+const usableDevicesQuery = () => ({
+  queryKey: ["storage", "usableDevices"],
+  queryFn: fetchUsableDevices,
+  staleTime: Infinity,
+});
+
 const productParamsQuery = {
   queryKey: ["storage", "productParams"],
   queryFn: fetchProductParams,
@@ -145,34 +151,25 @@ const useDevices = (
   return data;
 };
 
-const availableDevices = async (devices: StorageDevice[]): Promise<StorageDevice[]> => {
-  const findDevice = (devices: StorageDevice[], sid: number): StorageDevice | undefined => {
-    const device = devices.find((d) => d.sid === sid);
-    if (device === undefined) console.warn("Device not found:", sid);
-
-    return device;
-  };
-
-  const availableDevices = await fetchUsableDevices();
-
-  return availableDevices
-    .map((sid: number) => findDevice(devices, sid))
-    .filter((d: StorageDevice | undefined) => d);
-};
-
-const availableDevicesQuery = (devices: StorageDevice[]) => ({
-  queryKey: ["storage", "availableDevices"],
-  queryFn: () => availableDevices(devices),
-  staleTime: Infinity,
-});
-
 /**
  * Hook that returns the list of available devices for installation.
  */
 const useAvailableDevices = (): StorageDevice[] => {
   const devices = useDevices("system", { suspense: true });
-  const { data } = useSuspenseQuery(availableDevicesQuery(devices));
-  return data;
+  const { data: usableDevices } = useSuspenseQuery(usableDevicesQuery());
+
+  const availableDevices = useMemo(() => {
+    /** @todo Extract this function to some shared place. */
+    const findDevice = (devices: StorageDevice[], sid: number): StorageDevice | undefined => {
+      const device = devices.find((d) => d.sid === sid);
+      if (device === undefined) console.warn("Device not found:", sid);
+
+      return device;
+    };
+    return usableDevices.map((sid: number) => findDevice(devices, sid)).filter((d) => d);
+  }, [devices, usableDevices]);
+
+  return availableDevices;
 };
 
 /**