Wizard: LOCALE - Add Keyboard drop down (HMS-5096)

[regexowl]

This adds a drop down for keyboard selection. The options are populated with an output of localectl list-keymaps and sorted in the order of:

• exact match
• starting with the search input alphabetically
• not starting with search input alphabetically

New tests are also added.

[codecov]

Codecov Report

Attention: Patch coverage is 97.91123% with 16 lines in your changes missing coverage. Please review.

Project coverage is 84.80%. Comparing base (60175aa) to head (afed99a).
Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
...izard/steps/Locale/components/KeyboardDropDown.tsx	87.50%	14 Missing ⚠️
src/Utilities/sortfn.ts	91.66%	2 Missing ⚠️

@@            Coverage Diff             @@
##             main    #2651      +/-   ##
==========================================
+ Coverage   84.26%   84.80%   +0.54%     
==========================================
  Files         170      172       +2     
  Lines       18874    19601     +727     
  Branches     1905     1922      +17     
==========================================
+ Hits        15904    16623     +719     
- Misses       2948     2956       +8     
  Partials       22       22              

Files with missing lines	Coverage Δ
...omponents/CreateImageWizard/steps/Locale/index.tsx	100.00% <100.00%> (ø)
...ts/CreateImageWizard/steps/Locale/keyboardsList.ts	100.00% <100.00%> (ø)
...ents/CreateImageWizard/steps/Packages/Packages.tsx	79.63% <100.00%> (-0.42%)	⬇️
src/test/fixtures/blueprints.ts	100.00% <100.00%> (ø)
src/test/fixtures/editMode.ts	100.00% <100.00%> (ø)
src/Utilities/sortfn.ts	91.66% <91.66%> (ø)
...izard/steps/Locale/components/KeyboardDropDown.tsx	87.50% <87.50%> (ø)

... and 2 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 60175aa...afed99a. Read the comment docs.

[mgold1234]

I like it!

[mgold1234]

/lgtm

[mgold1234]

small question, if there is no keyboard result, the 'Next' button should become disable?

[mgold1234]

what do you think about maybe writing all the condtion shorter? something like -

Suggested change

	const sortfn = (a: string, b: string) => {
	const sortfn = (a: string, b: string) => {
	const aKeyboard = a.toLowerCase();
	const bKeyboard = b.toLowerCase();
	if (aKeyboard === filterValue || aKeyboard < bKeyboard) return -1;
	if (bKeyboard === filterValue || bKeyboard < aKeyboard) return 1;
	const aStartsWithFilter = aKeyboard.startsWith(filterValue);
	const bStartsWithFilter = bKeyboard.startsWith(filterValue);
	if (aStartsWithFilter && !bStartsWithFilter) return -1;
	if (bStartsWithFilter && !aStartsWithFilter) return 1;
	return aKeyboard.localeCompare(bKeyboard);
	};

[lucasgarfield]

Would this have the same behavior? 🤔

[lucasgarfield]

I went ahead and rebased on main and resolved the conflicts.

[lucasgarfield]

small question, if there is no keyboard result, the 'Next' button should become disable?

This is an optional customization so we don't need to disable Next.

[lucasgarfield]

Noticed a weird bug where if you hit "enter" while using the dropdown and you haven't made a selection it causes the wizard to refresh. This bug affects other fields, too, such as the OpenSCAP step.

#2655

[lucasgarfield]

Looks good to me. Since the bug I noticed (hitting enter while the typeahead is focused can cause a refresh) is also present in other typeaheads, I'm going to say we defer the responsibility to fixing that to another PR that fixes all typeahead behavior.

[lucasgarfield]

Failing on unit tests in pr_check. Dev checks are passing, so I'm merging.