feat: Add a keyboard shortcut to move focus to search

[chetan-rns]

Pressing "/" will move the focus to the search bar on the applications page

Fixes: #4700
Signed-off-by: Chetan Banavikalmutt chetanrns1997@gmail.com

Checklist:

• Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
• The title of the PR states what changed and the related issues number (used for the release note).
• I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
• Does this PR require documentation updates?
• I've updated documentation as required by this PR.
• Optional. My organization is added to USERS.md.
• [x ] I've signed the CLA and my build is green (troubleshooting builds).

[jannfis]

I like this, although / is bound to a useful Firefox shortcut as well (quick find in page). In this case, overriding the FF shortcut would add value for me tho.

IMHO, it would be nice to have more keyboard shortcuts for the UI, but I feel we should generally think about the shortcuts and their integration a little, before randomly introducing them, ensuring a consistent user experience (also across browsers).

[alexmt]

Same as #4801 (comment) . Please use React.useRef instead of document.getElementById('search-bar')

[alexmt]

Overriding onkeypress might be unpleasant if we add a key press handler in another component.
Please use useEffect hook to add handler with document.addEventListener and remove listener in hook cleanup. E.g.

useEffect(() => {
    const handleKeyPress = (e) => {
       ...
    }
    document.addEventListener('keypress', handleKeyPress);
    return () => {
      document.removeEventListener('keypress', handleKeyPress);
    };
  });

[chetan-rns]

I've updated the code to use React.useEffect

[chetan-rns]

We use / while adding the git repository in the application create form. We shouldn't consider / as a special shortcut when the Application form is opened.

[chetan-rns]

@alexmt I've added a check to disable this shortcut when the new application form is opened.

[alexmt]

LGTM

[alexmt]

@chetan-rns , can you please resolve merge conflicts?

[codecov-io]

Codecov Report

Merging #4796 (309fa17) into master (b89639e) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #4796   +/-   ##
=======================================
  Coverage   41.13%   41.13%           
=======================================
  Files         129      129           
  Lines       17875    17875           
=======================================
  Hits         7353     7353           
  Misses       9459     9459           
  Partials     1063     1063           

---

Continue to review full report at Codecov.

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