Fixes #35601 - Search in navigation

[MariaAga]

[theforeman-bot]

Issues: #30344

[MariSvirik]

@MariaAga could you pls add also a screenshot of an inactive search bar (default state)?

1. When you make the search bar active by clicking on it (but not typing anything) - is it going to give you all the suggestions? Or would it wait for any letters?

2. Do you have a screenshot of an empty state?

3. What is the font size?

[MariaAga]

Here is a link to a demo which hopefully answer most questions: https://hmj7ff.csb.app/ (its a bit jumpy when navigating)
Font size for the result item is: font-size 16px, font-weight 400
Font size for the result item path is: font-size 12px, font-weight 400

[MariSvirik]

1. I've noticed that sometimes words in the gray breadcrumb are split in the middle e.g. Recurring logic or Config management. Can we fix that somehow? I know it probably depends on the size of your screen. But could we have a rule not to split the words in the middle and just move them to the next line?

2. Also, not sure if that's a bug or a feature:
I need to click twice to actually be able to type anything. So there are actually three states of search which I think is unnecessary.

3. What's more, there is an error when I start typing.

[MariaAga]

@MariSvirik Thanks!

1. Fixed in the demo https://hmj7ff.csb.app/host_statuses
2. I'm using the expendable search like here: https://www.patternfly.org/v4/components/search-input#with-expandable-button
   Which does focus on the text if users click on the search glass, originally the space next to the search glass icon shouldnt be clickable at all.
   Should I just use a normal search instead of an expandable one?
3. Fixed in the demo

[adamruzicka]

@MariSvirik ping

[MariaAga]

@MariSvirik I also made a demo that doesnt use expendable search, but just a search input here: https://l9hdpm.csb.app/audits
What do you think?

[MariaAga]

Talked to Maria S and we decided on this design:

@ofedoren Can you please review this PR?

[ofedoren]

Thanks, @MariaAga! Great addition. No more trying to remember where is $ITEM located :)

Few comments:

• Is there a way to trigger the nav search via keyboard? Looking at the tickets, there was an experimental key ` as an example.
• It would be nice if the first item from the suggestion list was auto-selected, so I don't need to use arrows for explicit selection.
• Some comments inline.
• Test failures seem to be related?
• Huge thanks for the explanations in the comments :)

[MariaAga]

Thanks!

Is there a way to trigger the nav search via keyboard? Looking at the tickets, there was an experimental key ` as an example.

added CTRL + SHIFT + F shortcut as ` was mentioned not being easily accessible in some keyboard layouts

It would be nice if the first item from the suggestion list was auto-selected, so I don't need to use arrows for explicit selection.

I'm not sure if that what you meant, but now if a user starts typing in the search and clicks ENTER the page will redirect to the first result

Added more specific selectors to failing tests

[ofedoren]

Thanks, @MariaAga! One inline question, but otherwise good to go :)

[ofedoren]

Could we change it to Ctrl + Shift + F to search? I mean, how would one know what to use?

Not a big deal though, since that combination is used in a lot of editors...

[MariaAga]

I talked to Maria from UX about this, and since we (and other projects) dont show the / shortcut in the search bar placeholder we shouldn't do it here as well. I'll get it in the docs and I added it to the about page

[ofedoren]

Love it, thanks @MariaAga! Not sure though if we can merge it now or should we wait for branching...

[ofedoren]

Thanks, @MariaAga, apparently with this one we can go further :) Promise me, you'll re-check we didn't break anything for most wanted plugins :D