fix(web): properly reload available devices after reprobing

[joseivanlopez]

Problem

The storage page shows an empty state (no devices found) after activating/deactivating devices.

Steps to reproduce:

• Go to iSCSI page and activate devices.
• Go back to storage.
• The storage page shows "No devices found" instead of the configured devices and result.

Solution

Source of the problem: the query for getting the available devices requires the result of the query for getting all the devices, but it is not refreshed when there are changes in the list of devices.

For solving it, the useAvailableDevices hook uses useMemo which refreshes the list of available devices if any of the source data changes (either devices or the list of usable Devices).

See https://tkdodo.eu/blog/react-query-data-transformations#2-in-the-render-function: "Especially if you have additional logic in your custom hook to combine with your data transformation, this is a good option."

Testing

• Tested manually

[dgdavid]

Thanks for taking care.

Indeed, it is an improvement that remind us we should book time for still revisiting these hooks and queries. Also for using the transformations and relying on select when possible, although you've told me offline that it was not applicable here.

[dgdavid]

👍

[dgdavid]

NP: If possible (and when possible) I'd extract that function from here. Looks like it can be defined somewhere and consumed by this (and potentially others) method instead of be (re)defined/hidden here.

[joseivanlopez]

I am going to add a TODO in order to keep the change as minimal as possible because it goes to beta3 branch.

[dgdavid]

for using the transformations and relying on select when possible

For clarifying, not only in storage but in other parts of Agama too since

You can use the select option to select a subset of the data that your component should subscribe to. This is useful for highly optimized data transformations or to avoid unnecessary re-renders.