Storage redesign

[mvollmer]

Overview demo: https://www.youtube.com/watch?v=aNS_4BejTDs
Mobile demo: https://www.youtube.com/watch?v=Gq7gBY-CciY

Polish demos:
Disabled menu items: https://www.youtube.com/watch?v=AQ9VU-FnzXs
Dangerous actions into menus: https://www.youtube.com/watch?v=RD9kMnKZ420
No "/dev/" prefix in the table: https://www.youtube.com/watch?v=FlD9OIgdxRM
Icons: https://www.youtube.com/watch?v=eLT_s5Y7Vaw
Different icons, "Size" header, indentation: https://www.youtube.com/watch?v=QrL3Pk9ZYvg
Raid stopping: https://youtu.be/U5gEZgY3N4k
Cards right side up: https://youtu.be/diSU7Hwt20Q
Fewer cards, no arrows: https://www.youtube.com/watch?v=lvyyiIh3aIg
Kezboard nav: https://www.youtube.com/watch?v=2lAcG-gouWw

Old demos:
https://youtu.be/aHir7PE9i2s
https://youtu.be/Mt7CkeDC9mQ
https://youtu.be/YwKPY3xjdPk
https://www.youtube.com/watch?v=zJHDXO3wVa4

Release notes

The Storage page has been redesigned with the goal of making more things visible more of the time. The overview page now shows all storage objects in a table and allows almost all operations to be performed on them right from the table.

Clicking on a row navigates to a page dedicated to the object in that row, with more information and maybe a few more actions.

We will continue to improve the Storage pages, by adding filtering options to the big table and working on the actions and dialogs.

[garrett]

Issues:

• Back and forward do not work. (I clicked on a partition and when I hit back, I'm taken to the last page I was on, like Networking; I would've expected to see the overview instead.)
• Accessibility: There's no relationship between partitions and their drives. Either the children table items would need to be nested, or we need to sprinkle some ARIA to indicate the relationship between them.
  • I think the way this would work with ARIA would be to use aria-owns on the parent with the value set to a space-separated list of IDs of its direct children. https://web.dev/articles/aria-labels-and-relationships & https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-owns — downside: this isn't supported yet on macOS or iOS (but it is everywhere else).
• Mobile: doesn't show the parent-child relationship yet.

[martinpitt]

phew, I walked through all the pkg/storaged/ changes, I'll do a separate review for the tests. First of all, I like the file/class/function structure -- it's very symmetric, which helps with reviewing. I ignored (almost) all of JS code style issues, the dialogs, and the Reacty/design bits, and mostly looked for odd/unexplained/magic bits.

I realize that this bitrots fast, so I'm happy for most/all of my comments to be addressed in a follow-up. I'm just asking to not land this in today's release, so that we have two weeks for follow-ups.

[martinpitt]

Tests are fairly straightforward, but they may have spotted a bug. Thanks for the careful pixel coverage!

[mvollmer]

Coverage notes:

• LV renaming
• Activation of volume(?)
• Removal of non-empty PV
• volume group polling
• Starting pool from overview, pixel test for dialog

[martinpitt]

Cheers! I reviewed the fixups since my last review, and updated the review threads. There are no more blockers from my side, and tests are green (f39 appears red because of a github flake with the API, but it did succeed).

I leave the final sign-off to @garrett , for the remaining discussions about icons and such.

Looking forward to seeing this land! 🏁

[garrett]

I can't navigate by keyboard.

• How to you select a drive or partition to see more or know what type it is via keyboard focus (without a mouse)?
• How do you select actions in the menu by keyboard alone?

(I can focus a row and also focus the menu for each row, but I can't activate them.)

This is important for accessibility.

[garrett]

Icons don't have enough contrast in dark mode. (They need to be lighter.)

Edit: Fixed!

[martinpitt]

I additionally reviewed the kezboard navigation, and while it is "ugh we need to do that?", it technically looks fine to me. Thanks!

[teg]

Amazing work! Thanks everyone!