Fix ilm navigation (elastic#81664)

* Fix edit policy page navigation

* Fix edit policy page navigation

* Add links to PR for explanation

* Added more tests and linked to a github issue about navigation issues

* Fix decoding function for undefined values

* Fix type check issues

* Renamed dollar sign to percent sign, added a method for (double) encoded paths and better description in test names

* Deleted Index Management from required bundles in ILM

* Fixed merge conflicts

* Revert "Deleted Index Management from required bundles in ILM"

This reverts commit 5a735df

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/es_ui_shared/public/url/attempt_to_uri_decode.test.ts

@@ -19,14 +19,51 @@
 
 import { attemptToURIDecode } from './attempt_to_uri_decode';
 
+// this function doesn't work for % with other special chars or sequence %25
+// known issue https://github.com/elastic/kibana/issues/82440
 test('decodes an encoded string', () => {
-  const encodedString = 'test%3F';
-  expect(attemptToURIDecode(encodedString)).toBe('test?');
+  const originalName = 'test;,/?:@&=+$#';
+  const encodedName = encodeURIComponent(originalName);
+  // react router v5 automatically decodes route match params
+  const reactRouterDecoded = decodeURI(encodedName);
+
+  expect(attemptToURIDecode(encodedName)).toBe(originalName);
+  expect(attemptToURIDecode(reactRouterDecoded)).toBe(originalName);
 });
 
-// react router partially decodes %25 sequence to % in match params
-// https://github.com/elastic/kibana/pull/81664
 test('ignores the error if a string is already decoded', () => {
-  const decodedString = 'test%';
-  expect(attemptToURIDecode(decodedString)).toBe(decodedString);
+  const originalName = 'test%';
+
+  const encodedName = encodeURIComponent(originalName);
+  // react router v5 automatically decodes route match params
+  const reactRouterDecoded = decodeURI(encodedName);
+
+  expect(attemptToURIDecode(encodedName)).toBe(originalName);
+  expect(attemptToURIDecode(reactRouterDecoded)).toBe(originalName);
+});
+
+test('returns wrong decoded value for %25 sequence', () => {
+  const originalName = 'test%25';
+
+  const encodedName = encodeURIComponent(originalName);
+  // react router v5 automatically decodes route match params
+  const reactRouterDecoded = decodeURI(encodedName);
+
+  expect(attemptToURIDecode(encodedName)).toBe(originalName);
+  expect(attemptToURIDecode(reactRouterDecoded)).not.toBe(originalName);
+});
+
+test('returns wrong decoded value for % with other escaped characters', () => {
+  const originalName = 'test%?#';
+
+  const encodedName = encodeURIComponent(originalName);
+  // react router v5 automatically decodes route match params
+  const reactRouterDecoded = decodeURI(encodedName);
+
+  expect(attemptToURIDecode(encodedName)).toBe(originalName);
+  expect(attemptToURIDecode(reactRouterDecoded)).not.toBe(originalName);
+});
+
+test("doesn't convert undefined to a string", () => {
+  expect(attemptToURIDecode(undefined)).toBeUndefined();
 });

src/plugins/es_ui_shared/public/url/attempt_to_uri_decode.ts

@@ -19,12 +19,14 @@
 
 /*
  * Use this function with any match params coming from react router to safely decode values.
- * https://github.com/elastic/kibana/pull/81664
+ * After an update to react router v6, this functions should be deprecated.
+ * Known issue for navigation with special characters in paths
+ * https://github.com/elastic/kibana/issues/82440
  */
-export const attemptToURIDecode = (value: string) => {
+export const attemptToURIDecode = (value?: string): string | undefined => {
   let result = value;
   try {
-    result = decodeURIComponent(value);
+    result = value ? decodeURIComponent(value) : value;
   } catch (e) {
     // do nothing
   }

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/app/app.helpers.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { registerTestBed, TestBed, TestBedConfig } from '../../../../../test_utils';
+import { App } from '../../../public/application/app';
+import { TestSubjects } from '../helpers';
+import { createBreadcrumbsMock } from '../../../public/application/services/breadcrumbs.mock';
+import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public/context';
+
+const breadcrumbService = createBreadcrumbsMock();
+
+const AppWithContext = (props: any) => {
+  return (
+    <KibanaContextProvider services={{ breadcrumbService }}>
+      <App {...props} />
+    </KibanaContextProvider>
+  );
+};
+
+const getTestBedConfig = (initialEntries: string[]): TestBedConfig => ({
+  memoryRouter: {
+    initialEntries,
+  },
+  defaultProps: {
+    getUrlForApp: () => {},
+    navigateToApp: () => {},
+  },
+});
+
+const initTestBed = (initialEntries: string[]) =>
+  registerTestBed(AppWithContext, getTestBedConfig(initialEntries))();
+
+export interface AppTestBed extends TestBed<TestSubjects> {
+  actions: {
+    clickPolicyNameLink: () => void;
+    clickCreatePolicyButton: () => void;
+  };
+}
+
+export const setup = async (initialEntries: string[]): Promise<AppTestBed> => {
+  const testBed = await initTestBed(initialEntries);
+
+  const clickPolicyNameLink = async () => {
+    const { component, find } = testBed;
+    await act(async () => {
+      find('policyTablePolicyNameLink').simulate('click', { button: 0 });
+    });
+    component.update();
+  };
+
+  const clickCreatePolicyButton = async () => {
+    const { component, find } = testBed;
+    await act(async () => {
+      find('createPolicyButton').simulate('click', { button: 0 });
+    });
+    component.update();
+  };
+
+  return {
+    ...testBed,
+    actions: { clickPolicyNameLink, clickCreatePolicyButton },
+  };
+};
+
+export const getEncodedPolicyEditPath = (policyName: string): string =>
+  `/policies/edit/${encodeURIComponent(policyName)}`;
+
+export const getDoubleEncodedPolicyEditPath = (policyName: string): string =>
+  encodeURI(getEncodedPolicyEditPath(policyName));