webui: replacing Tooltip for HelperText in Storage devices step

[acruzgon]

INSTALLER-3418

When there are no disks selected, the Next button is disabled and a helper text indicates user to make a disk selection in order to continue with installation.

[KKoukiou]

@acruzgon there was not intention to change the component in use. We want that we keep using the tooltip but just show that when the button receives focus. This is possible, see https://www.patternfly.org/v4/components/button/#aria-disabled-examples

Your suggested solution has the problem that does not align with patternfly guidelines, as HelperText is expected to be used inside forms. And also the page footer will jump a bit because of the text appeeding/hiding when the users selects all/unselects all disks.

[garrett]

Hey!

So here's the reasoning for the change in the UI:

1. Tooltips are not fully discoverable. Most people do eventually find them in UX studies, but they should not be used for mandatory information.
2. Having the text explaining why something isn't possible next to the area where you'd use it makes it more obvious.
3. We do something similar in Cockpit, for modals. The design pattern we use in Cockpit is:
   1. reactive: alerts (warnings, errors) are inline next to their components when possible
   2. reactive: when there's an alert that applies to everything on the page (or when we can't figure out what it goes with), that's at the top
   3. proactive: when there's something that isn't an error/warning based on something that you've done, but something that is important to know to proceed

In Cockpit, we use this pattern of putting Help Text at the bottom near the action buttons in modals; as the action that someone would typically use here (next) has an inactive state, it's good to clarify why (which happened with a tooltip, but that was not obvious). As Anaconda is a wizard, this is the reinterpretation of the same concept, but applied to a wizard instead.

We can't really target each item (especially if there is more than one) here. And if we had some sort of message at the top, it should shift everything down (even more than shifting the border line up). Plus, having an alert before someone has done anything is a bad idea. Alerts need to be the result of an action that was taken. (And hopefully we have the first reasonable disk selected by default anyway, especially if there's only one disk.)

Hiding the reason behind a tooltip is similar to the "mystery meat navigation" issue. https://en.wikipedia.org/wiki/Mystery_meat_navigation (where things that aren't obvious, but are still important, are hidden away).

Therefore, all this taken into consideration: The most contextual location for a message as to why you cannot proceed is next to the place where you normally click next, in an obvious way.

[KKoukiou]

/kickstart-test --waive webui only