machines: replace os-vendor/os dropdowns with TypeAheadSelect component from PF-react

[KKoukiou]

[martinpitt]

Looks fine, nice cleanup! Looking forward to test this in action. Two questions, and can you please rebase?

[martinpitt]

A single list will mean that it's harder to operate with just the mouse, as it will be a looong merged list, right? Is that an a11y concern?

(I didn't yet test this, waiting for the rebase)

[KKoukiou]

A single list will mean that it's harder to operate with just the mouse, as it will be a looong merged list, right? Is that an a11y concern?

(I didn't yet test this, waiting for the rebase)

On the other hand you are able to filter results by typing some substring of the desired distro.
Please test, and if you still don't like it let's drop this.

[martinpitt]

On the other hand you are able to filter results by typing some substring of the desired distro.

Right, I personally like this a lot, but I'm a very keyboard-affine person. I was just wondering what that means for mouse users.

Also, right now I can type arbitrary strings into that box, like "foo", and there is no error message. It should only be allowed to select an existing entry.

[garrett]

This is problematic as-is.

I discussed this with @andreasn and have an idea on how to incorporate this into a working design which would allow:

• automatic matching
• type to search
• browsability

It would basically be two side-by-side components in the dialog.

I don't have time right now to work on a proper mockup, but I'm adding a table-based sketch on what I have in mind. The first column is the label. The second is a select with several options. The third is either a text string for the auto-detect, an input and auto-complete list for search, or a second dropdown for OS version (when browsing based on vendor on the first dropdown)

Label	Primary (Dropdown)	Secondary (String / Input / Dropdown)
Operating System	Auto-detect	Determining OS…
		Fedora 30
	Search	[_________]
		(list of matches when search field is used)
	Red Hat	Supported
		- Red Hat Enterprise Linux 8
		- Red Hat Enterprise Linux 7
		Extended Support
		- Red Hat Enterprise Linux 6
		- Red Hat Enterprise Linux 5
		End of Life
		- Red Hat Enterprise Linux 4
		- Red Hat Enterprise Linux 3
		- Red Hat Enterprise Linux 2
		- Red Hat Enterprise Linux 1
	Fedora	Supported
		- Fedora 30
		- Fedora Silverblue 30
		- Fedora 29
		- Fedora Silverblue 29
		End of Life
		- Fedora 28
		- Fedora Silverblue 28
	…	…

It would default to auto-detection. If that doesn't work, the option becomes disabled and then the next selection option should be search, which has the widget from this PR. People can optionally browse by drilling down with vendors and distribution versions, which are then grouped by supportability.

Note: One thing I didn't mock-up is showing supportability in the search or even auto-detection... but this should be shown somehow.

[andreasn]

I agree that this becomes very keyboard focused, and there need to be some way to manually select an OS, without knowing exactly what to type.
If we want to keep it to just one field, it would need to be something like this:
https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html

Just showing the entire list straight up and down would end up being quite a long list.
I wonder how long the list would become if we just listed OSes that are not EOL, and then we'll have some way of revealing the full list of the OSes (also EOLed ones)
Is there an easy way to query libosinfo for just the supported OSes easily via the CLI?

[andreasn]

But if we go for the 2-field solution that @garrett proposes, do we really need "Auto-detect" as a dropdown? I think we could just show the right entry in the list and not make a big fuzz about it (just like how it works now), then you would be able to correct that selection, or go for the Search action.

[andreasn]

Relevant info, recognition vs recall, see bullet point 3.

[garrett]

do we really need "Auto-detect" as a dropdown [...]?

How long does it take to check?

We could have a placeholder message and then replace it with a widget similar what I described if it fails to detect (except without autodetect). If it doesn't take long. And if it doesn't get it wrong.

[KKoukiou]

I agree that this becomes very keyboard focused, and there need to be some way to manually select an OS, without knowing exactly what to type.
If we want to keep it to just one field, it would need to be something like this:
https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html

Which of the mentioned examples you mean?

Just showing the entire list straight up and down would end up being quite a long list.

It's long, filtering with substrings helps only in this case.
Of course the component implements paging, the list is not presented to the user all at once.
(I understand your thought regarding that the list can get long, but on the other hand with the previous implementation we forced the user to go over two form fields to do basically one operation, select OS.)
I think that the previous implementation benefited more mouse users however this one benefits keyboard users, each of them with their drawbacks.
I lean to like more this one, because the Create VM dialog keeps growing in the amount of input fields, and merging inputs together makes sense to me.

I wonder how long the list would become if we just listed OSes that are not EOL, and then we'll have some way of revealing the full list of the OSes (also EOLed ones)

I don't think this component allows such logic to be implemented.
Keep in mind that I am using an patternfly component, the flexibility here is not so big.
I can only pass to it the list of entries that it's supposed to present.

Is there an easy way to query libosinfo for just the supported OSes easily via the CLI?

It's possible to query osinfo-db for EOF for each OS.

[KKoukiou]

do we really need "Auto-detect" as a dropdown [...]?

How long does it take to check?

It's a matter of 1-2 seconds after inserting the installation source.
There is a spinner shown when the component is trying to detect the OS.

We could have a placeholder message and then replace it with a widget similar what I described if it fails to detect (except without autodetect). If it doesn't take long. And if it doesn't get it wrong.

It can't really get it wrong, it can only not get it at all.
I can replace the placeholder when it's searching. That's not a problem.

[andreasn]

I agree that this becomes very keyboard focused, and there need to be some way to manually select an OS, without knowing exactly what to type.

This was false actually. I didn't have libosinfo installed and didn't realize I needed to.
So selecting the input field will give you a list of OSes. I couldn't quite figure out how this list is ordered, and it seems a bit random to me, because I get a dozen versions of FreeBSD at the top, followed by Fedora, then Ubuntu and then a dozen DragonflyBSD. So it seems I am able to browse for the OSes, but the sorting doesn't make sense to me.

[KKoukiou]

I agree that this becomes very keyboard focused, and there need to be some way to manually select an OS, without knowing exactly what to type.

This was false actually. I didn't have libosinfo installed and didn't realize I needed to.

You don't have libosinfo installed because you built cockpit-machines from sources and you don't have its dependencies.
For normal users it will be there.

So selecting the input field will give you a list of OSes. I couldn't quite figure out how this list is ordered, and it seems a bit random to me, because I get a dozen versions of FreeBSD at the top, followed by Fedora, then Ubuntu and then a dozen DragonflyBSD. So it seems I am able to browse for the OSes, but the sorting doesn't make sense to me.

Probably the order get's messed up somewhere indeed.
I will adjust to preserve the order that osinfo-query gives to us
osinfo-query os --fields=name,eol-date | tail -n +3 | sed -e 's/\s*|\s*/|/g; s/^\s*//g; s/\s*$//g'

[andreasn]

It seems I can also write in anything in freeform now. I tried writing "lennart" and it happily accepted that. Should we check that whatever is written actually matches with a real OS name? Otherwise there is the risk you'll get weird results because someone mistypes "Windows Server 2012" as "Qindows Aerver 2012" or stuff like that and the installation fails due to not setting some flag right.

[KKoukiou]

It seems I can also write in anything in freeform now. I tried writing "lennart" and it happily accepted that. Should we check that whatever is written actually matches with a real OS name? Otherwise there is the risk you'll get weird results because someone mistypes "Windows Server 2012" as "Qindows Aerver 2012" or stuff like that and the installation fails due to not setting some flag right.

Yes, this issue is already mentioned here #12152 (comment), I am going to address it if we agree to use this approach.

[martinpitt]

Thanks! This works very well now, I didn't manage to break it any more.

tests seem fine now, kkoukiou answered about your review comments

[KKoukiou]

In case we include it in release notes:

[garrett]

Here's a cropped (with 25px margin) and optimized version of the screenshot: