Security Users UI - error when user name contains %

[yuliacech]

This bug was found when checking this issue #57843.

Currently, the bug can be reproduced on the master branch 66e1d32

Describe the bug:
When a user with % in the name is created, it can not be navigated to/edited.

Steps to reproduce:

1. Navigate to Security -> Users
2. Click button "create user" on the top of users list, type in a name with % character, e.g. test% and some password.
3. Click button "Create user" on the bottom.

After creating the user, the navigation will return to the users list. Find the user and click on it to navigate to edit view. The navigation will not happen and there are errors in the console.

Expected behavior:
The user can be viewed/edited without errors.

Screenshots (if relevant):

Errors in browser console (if relevant):
angular.js:15570 URIError: URI malformed
at decodeURIComponent ()
at decodePath (angular.js:14403)
at parseAppUrl (angular.js:14442)
at LocationHashbangUrl.$$parse (angular.js:14604)
at angular.js:15331
at Scope.$digest (angular.js:19115)
at angular.js:15350
at angular.js:6711
at forEach (angular.js:387)
at fireStateOrUrlChange (angular.js:6710)
(anonymous) @ angular.js:15570
(anonymous) @ angular.js:11849
$digest @ angular.js:19117
(anonymous) @ angular.js:15350
(anonymous) @ angular.js:6711
forEach @ angular.js:387
fireStateOrUrlChange @ angular.js:6710
cacheStateAndFireUrlChange @ angular.js:6681
dispatch @ jquery.js:5429
elemData.handle @ jquery.js:5233
history.js:87 Uncaught URIError: Pathname "/edit/test%" could not be decoded. This is likely caused by an invalid percent-encoding.
at createLocation (history.js:87)
at getDOMLocation (history.js:548)
at handleHashChange (history.js:571)
createLocation @ history.js:87
getDOMLocation @ history.js:548
handleHashChange @ history.js:571

Any additional context:
The bug is only reproducible with % sign but not other "special" characters.

[elasticmachine]

Pinging @elastic/kibana-security (Team:Security)

[legrego]

@thomheymann this one might be fairly straightforward if you wanted to explore a fix. Looks like we need to encodeURIComponent(username) the username we pass in here:

kibana/x-pack/plugins/security/public/management/users/users_grid/users_grid_page.tsx

Line 115 in d661d66

{...reactRouterNavigate(this.props.history, `/edit/${username}`)}

[legrego]

Reopening, as we had to revert the fix in order to support @ in usernames, which is far more common than %. We need to get an upstream bug fixed before we can resolve this entirely: #82440

[legrego]

Will potentially be resolved by upgrading the history package to 5.0: #132600