Fix ilm navigation

[yuliacech]

Summary

Fixes #81394.
This PR adds a decoding attempt of policy name on edit policy page.

Examples with different special characters

Example for policy name test?:

1. navigation is done from policy table via react router

   • the route is encoded twice, since there is a decodeURI call in history.push

   encodeURI(`/policies/edit/${encodeURIComponent(policyName)}`)
   reactRouterNavigate('/policies/edit/test%253F')
   

   • url in the address bar is already decoded once: test%3F
   • match param provided by react router is already decoded once test%3F
   • component decodes match param to get the correct policy name test?

2. when the user reloads the page, it works similar to router navigation 1.

3. when the user copies link to the edit page from the policy table or opens it in a new tab, the url in the address bar is different

   • url in address bar: test%253F (because of the double encoding at the beginning)
   • match param provided by react router: test%3F
     • sequence %25 is already decoded by react router, so that match param is different from value in the address bar
   • component decodes match param to get the correct policy name test?

4. reloading the page with double encoded url in the address bar works similar to 3.

Percent sign in the policy name test%

1. navigation via react router

   reactRouterNavigate('/policies/edit/test%2525')
   

   • url in the address bar is decoded once: test%25
   • match param is decoded once: test%25
   • component decodes the match param to get the correct name test%
2. if the user reloads the page, it works differently to navigation 1.
   • url in the address bar is test%25
   • match param is already completely decoded: test%
     • as in the first example, sequence %25 is being automatically decoded by the react router and is now different from the value in the address bar
   • component tries to decode the match param, ignores URI malformed error and uses initial test% value
3. user opens the link from policy table in a new tab
   • address bar test%2525
   • match param test%25
   • component decodes to test%
4. reloading the page works similar to 3.

Known issues:

Since sequence %25 is being automatically decoded by react router in match param, percent sign can't be used with other special characters and the sequence itself can't be used in policy names.

Example percent sign with other characters test%?

1. router navigation reactRouterNavigate('test%25%3F')
   • address bar test%25%3F
   • match param test%25%3F
   • component decodes to test%?
2. user reloads the page doesn't work
   • address bar test%25%3F
   • match param test%%3F partially decoded
   • component tries to decode the match param, ignores the error and uses test%%3F wrong policy name
3. user opens the link from the table in a new tab
   • address bar test%2525%253F
   • match param test%25%3F (%25 decoded to %)
   • component decodes to test%?
4. user reloads the page opened in a new tab, works similar to 3.

Example %25 sequence test%25

1. router navigation reactRouterNavigate('test%252525')
   • address bar test%2525
   • match param test%2525
   • component decodes to test%25
2. user reloads the page doesn't work
   • address bar test%2525
   • match param test%25 (%25 decoded to %)
   • component decodes the match param to test% wrong policy name
3. user opens the link from the table in a new tab
   • address bar test%252525
   • match param test%2525 (%25 decoded to %)
   • component decodes to test%25
4. user reloads the page opened in a new tab, works similar to 3.

TL;DR Edit page navigation will not work in some cases for policies with names that contain either percent sign with other special characters or %25 sequence.

[yuliacech]

@elasticmachine merge upstream

[elasticmachine]

Pinging @elastic/es-ui (Team:Elasticsearch UI)

[cjcenizal]

Tested locally, code LGTM! Had a couple comments and a concern that I think is worth blocking on.

Edit page navigation will not work in some cases for policies with names that contain either dollar sign with other special characters or %25 sequence.

Is it possible to add a test case to define this expected behavior? If it's not possible to add a client integration test (which seems likely, since the problematic behavior only occurs on browser reload if I understand correctly), then I think it's worth extracting the decoding logic in edit_policy.container.tsx into a utility file that can be unit tested, and add the additional test cases there. If a bug is ever reported about this behavior, these tests and accompanying comments will make it crystal clear that the bug is expected. WDYT?

[cjcenizal]

This file is only consumed in app.test.ts, and I find it's a bit easier to understand the tests if this value is colocated with the code that consumes it. Can we define it there until it needs to be used in multiple files, at which point we can extract it to a common location like this file?

[cjcenizal]

Also, what do you think of using the full set of reserved characters that the API allows?

export const SPECIAL_CHARS_NAME = 'test?#$+=&@:';

[cjcenizal]

Can we add a comment here that this code can be removed if we upgrade to react-router 6 and history 5?

[yuliacech]

@elasticmachine merge upstream

[kibanamachine]

merge conflict between base and head

[yuliacech]

Thank you for the review @cjcenizal ! I added more tests to demonstrate known issues with navigation and linked to a new issue that tracks this. Also there is a comment in es_ui_shared.attempToURIDecode that we should deprecate the function after update to react-router v6.
Could you please have another look?

[cjcenizal]

Thanks for making these changes! Tested locally, code LGTM. Had a couple suggestions to make it easier for people to understand the tests.

[cjcenizal]

As a reader of this file, I'd benefit from some explanation about why we test double-encoding. I also noticed that we have three tests for double-encoding. I think we can simplify the code and help the reader understand why we're testing double-encoding by creating a helper function at the top of this file or inside of the helpers file, consuming it everywhere we test double-encoding, and adding a comment inside it. For example:

const doubleEncodePolicyPath = (policyName) => {
  // The UI double-encodes links to this path to anticipate the `decodeURI` call made by `history.push()`.
  return encodeURI(`/policies/edit/${encodeURIComponent(policyName)}`);
}

/* snip */

testBed = await setup([doubleEncodePolicyPath(DOLLAR_SIGN_WITH_OTHER_CHARS_NAME)];

WDYT?

[cjcenizal]

Can we describe the assertion we're making, too? This will help me scan the tests and identify which ones verify things work and which ones verify things don't work. For example, if the prior test description was this:

test('when clicked on policy name in table decodes correctly', async () => {

I'd expect this one to be:

test('when loading edit policy page url decodes incorrectly', async () => {

[yuliacech]

I agree, it was not very clear which tests were confirming the navigation bug, so I changed the test titles similar to what you suggested.

[yuliacech]

@elasticmachine merge upstream

[yuliacech]

@elasticmachine merge upstream

[yuliacech]

@elasticmachine merge upstream

[yuliacech]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: ab1c1d9

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
indexLifecycleManagement	210.6KB	211.0KB	+381.0B

Distributable file count

id	before	after	diff
default	42766	42767	+1

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
esUiShared	277.9KB	277.9KB	+12.0B

History

• 💔 Build #86823 failed a0a4aaf
• 💔 Build #86763 failed 5a735df
• 💔 Build #86759 failed 42adcb2
• 💔 Build #86323 failed cc29641
• 💔 Build #86153 failed 0baccad

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream