Add search bar component

[janfaracik]

This PR standardises the search bar introduced in #5692 and the newly introduced large variant in #6783 as a new component so it can be reused across Jenkins/plugins.

It's received a small revamp for consistency + fixes some visual bugs:

It also now has a keyboard shortcut, tap '/' on your keyboard to focus it (plus the option to disable that if you have multiple search inputs on one page).

Proposed changelog entries

• Press '/' to focus the search bar on a page.

Proposed upgrade guidelines

N/A

Submitter checklist

• (If applicable) Jira issue is well described
• Changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developer, depending on the change) and are in the imperative mood. Examples
  • Fill-in the Proposed changelog entries section only if there are breaking changes or other changes which may require extra steps from users during the upgrade
• Appropriate autotests or explanation to why this change has no tests
• New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadoc, as appropriate.
• New deprecations are annotated with @Deprecated(since = "TODO") or @Deprecated(forRemoval = true, since = "TODO") if applicable.
• New or substantially changed JavaScript is not defined inline and does not call eval to ease future introduction of Content-Security-Policy directives (see documentation on jenkins.io).
• For dependency updates: links to external changelogs and, if possible, full diffs

Desired reviewers

@jenkinsci/sig-ux

Maintainer checklist

Before the changes are marked as ready-for-merge:

• There are at least 2 approvals for the pull request and no outstanding requests for change
• Conversations in the pull request are over OR it is explicit that a reviewer does not block the change
• Changelog entries in the PR title and/or Proposed changelog entries are accurate, human-readable, and in the imperative mood
• Proper changelog labels are set so that the changelog can be generated automatically
• If the change needs additional upgrade steps from users, upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the PR title. (example)
• If it would make sense to backport the change to LTS, a Jira issue must exist, be a Bug or Improvement, and be labeled as lts-candidate to be considered (see query).

[timja]

@NotMyFault can you label these with web-ui when you do it please?

Useful for filtering these PRs 😄

[NotMyFault]

If I press my key combination to generate a slash, I have no selection or focus. Am I missing something?

I used the following snipped to check whether my input is considered:

--- a/war/src/main/js/keyboard-shortcuts.js
+++ b/war/src/main/js/keyboard-shortcuts.js
@@ -15,7 +15,9 @@ window.addEventListener("load", () => {
 
   const pageSearchBar = document.querySelectorAll(".jenkins-search__input");
   if (pageSearchBar.length === 1) {
-    hotkeys(translateModifierKeysForUsersPlatform("/"), () => {
+    let input = "t"
+    hotkeys(translateModifierKeysForUsersPlatform(input), () => {
+      console.log(input)
       pageSearchBar[0].focus();

My input with "/" wasn't considered at all, I had to change it to something else. I'm using a letter as a working example.

[NotMyFault]

In terms of ff4d685, what kind of keyboard do you use, where CMD is used for a slash @timja 👀
Isn't that typically done via Shift (and equally shift+option for a backslash), at least that's the case on my macbook.

[janfaracik]

Updated this to include a singular slash without CMD @timja - is that all good with you? Trying to be consistent with other web services which use / to search.

[timja]

Hmm the singular / didn’t work for me in chrome or safari on Mac

[timja]

Ok it's working for me now, I assume it was cached locally. I've reverted the commits

[daniel-beck]

Looks good 👍

Unsure about the shortcut and related API design. Especially if the build history filter is one of the fields for this that has a shortcut, the chance will be pretty big that two unrelated fields are on the same page. Wouldn't they benefit from customizable shortcuts, or a way to specify their ordinal/priority in getting the shortcut? Unless shortcuts are fully configurable, they could be going to a different input than expected, instead of no input, is also weird. Unsure which is better, but mentioning it for consideration.

Is it deliberate to have so completely different designs involving similar functionality in similar fields between the Quicksilver search on the top right, and the new filter fields (rectangle with a character inside on the right vs. (Modifier + K) just after placeholder.

[timja]

they could be going to a different input than expected, instead of no input, is also weird

the current implementation disables the shortcut if there's more than one search-bar on the page

[janfaracik]

Is it deliberate to have so completely different designs involving similar functionality in similar fields between the Quicksilver search on the top right, and the new filter fields (rectangle with a character inside on the right vs. (Modifier + K) just after placeholder.

Wanting to overhaul the search functionality (hopefully soon™) so I've left the current search bar as-is. The replacement uses this new component and looks somewhat similar to the below (the below is almost a year old though):

https://www.youtube.com/watch?v=SxSObgwjwt8&t=3808s

[daniel-beck]

they could be going to a different input than expected, instead of no input, is also weird

the current implementation disables the shortcut if there's more than one search-bar on the page

Right, that was referring to my suggestion to have ordinal/priority between fields in getting the shortcut assigned to them.

[timja]

Looks great ❤️

The keyboard shortcut seems to just be a caching issue, when you swap between branches you need to force refresh assets.

ATH testing passed (jenkinsci/acceptance-test-harness#914)

[NotMyFault]

Marvelous work 🎉

[timja]

@jenkinsci/core-security-review could you check this please

[daniel-beck]

Unnecessary call to translateModifierKeysForUsersPlatform?

[github-actions]

Please take a moment and address the merge conflicts of your pull request. Thanks!

[timja]

/label ready-for-merge

---

This PR is now ready for merge, after ~24 hours, we will merge it if there's no negative feedback.

Thanks!