Fix ilm navigation

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,55 @@
+/*
+ * 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 { act } from 'react-dom/test-utils';
+import { registerTestBed, TestBed, TestBedConfig } from '../../../../../test_utils';
+import { App } from '../../../public/application/app';
+import { TestSubjects } from '../helpers';
+
+const getTestBedConfig = (initialEntries: string[]): TestBedConfig => ({
+  memoryRouter: {
+    initialEntries,
+  },
+  defaultProps: {
+    getUrlForApp: () => {},
+    navigateToApp: () => {},
+  },
+});
+
+const initTestBed = (initialEntries: string[]) =>
+  registerTestBed(App, 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 },
+  };
+};

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/app/app.test.ts

@@ -0,0 +1,251 @@
+/*
+ * 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 { AppTestBed, setup } from './app.helpers';
+import { setupEnvironment } from '../helpers/setup_environment';
+import { getDefaultHotPhasePolicy, POLICY_NAME } from '../edit_policy/constants';
+import { act } from 'react-dom/test-utils';
+
+const SPECIAL_CHARS_NAME = 'test?#$+=&@:';
+const DOLLAR_SIGN_NAME = 'test%';
+// navigation doesn't work for % with other special chars or sequence %25
+// known issue https://github.com/elastic/kibana/issues/82440
+const DOLLAR_SIGN_WITH_OTHER_CHARS_NAME = 'test%#';
+const DOLLAR_SIGN_25_SEQUENCE = 'test%25';
+
+window.scrollTo = jest.fn();
+
+describe('<App />', () => {
+  let testBed: AppTestBed;
+  const { server, httpRequestsMockHelpers } = setupEnvironment();
+  afterAll(() => {
+    server.restore();
+  });
+
+  describe('new policy creation', () => {
+    test('when there are no policies', async () => {
+      httpRequestsMockHelpers.setLoadPolicies([]);
+      await act(async () => {
+        testBed = await setup(['/']);
+      });
+
+      const { component, actions } = testBed;
+      component.update();
+
+      await actions.clickCreatePolicyButton();
+      component.update();
+
+      expect(testBed.find('policyTitle').text()).toBe(`Create an index lifecycle policy`);
+      expect(testBed.find('policyNameField').props().value).toBe('');
+    });
+
+    test('when there are policies', async () => {
+      httpRequestsMockHelpers.setLoadPolicies([getDefaultHotPhasePolicy(POLICY_NAME)]);
+      await act(async () => {
+        testBed = await setup(['/']);
+      });
+
+      const { component, actions } = testBed;
+      component.update();
+
+      await actions.clickCreatePolicyButton();
+      component.update();
+
+      expect(testBed.find('policyTitle').text()).toBe(`Create an index lifecycle policy`);
+      expect(testBed.find('policyNameField').props().value).toBe('');
+    });
+  });
+
+  describe('navigation with special characters', () => {
+    beforeAll(async () => {
+      httpRequestsMockHelpers.setLoadPolicies([getDefaultHotPhasePolicy(SPECIAL_CHARS_NAME)]);
+    });
+
+    test('when clicked on policy name in table', async () => {
+      await act(async () => {
+        testBed = await setup(['/']);
+      });
+
+      const { component, actions } = testBed;
+      component.update();
+
+      await actions.clickPolicyNameLink();
+      component.update();
+
+      expect(testBed.find('policyTitle').text()).toBe(
+        `Edit index lifecycle policy ${SPECIAL_CHARS_NAME}`
+      );
+    });
+
+    test('when loading edit policy page url', async () => {
+      await act(async () => {
+        testBed = await setup([`/policies/edit/${encodeURIComponent(SPECIAL_CHARS_NAME)}`]);
+      });
+
+      const { component } = testBed;
+      component.update();
+
+      expect(testBed.find('policyTitle').text()).toBe(
+        `Edit index lifecycle policy ${SPECIAL_CHARS_NAME}`
+      );
+    });
+
+    test('when loading edit policy page url with double encoding', async () => {
+      await act(async () => {
+        testBed = await setup([
+          encodeURI(`/policies/edit/${encodeURIComponent(SPECIAL_CHARS_NAME)}`),
+        ]);
+      });
+
+      const { component } = testBed;
+      component.update();
+
+      expect(testBed.find('policyTitle').text()).toBe(
+        `Edit index lifecycle policy ${SPECIAL_CHARS_NAME}`
+      );
+    });
+  });
+
+  describe('navigation with dollar sign', () => {
+    beforeAll(async () => {
+      httpRequestsMockHelpers.setLoadPolicies([getDefaultHotPhasePolicy(DOLLAR_SIGN_NAME)]);
+    });
+
+    test('when loading edit policy page url', async () => {
+      await act(async () => {
+        testBed = await setup([`/policies/edit/${encodeURIComponent(DOLLAR_SIGN_NAME)}`]);
+      });
+
+      const { component } = testBed;
+      component.update();
+
+      expect(testBed.find('policyTitle').text()).toBe(
+        `Edit index lifecycle policy ${DOLLAR_SIGN_NAME}`
+      );
+    });
+
+    test('when loading edit policy page url with double encoding', async () => {
+      await act(async () => {
+        testBed = await setup([
+          encodeURI(`/policies/edit/${encodeURIComponent(DOLLAR_SIGN_NAME)}`),
+        ]);
+      });
+
+      const { component } = testBed;
+      component.update();
+
+      expect(testBed.find('policyTitle').text()).toBe(
+        `Edit index lifecycle policy ${DOLLAR_SIGN_NAME}`
+      );
+    });
+  });
+
+  describe('navigation with dollar sign with other special characters', () => {
+    beforeAll(async () => {
+      httpRequestsMockHelpers.setLoadPolicies([
+        getDefaultHotPhasePolicy(DOLLAR_SIGN_WITH_OTHER_CHARS_NAME),
+      ]);
+    });
+
+    test('when clicked on policy name in table', async () => {
+      await act(async () => {
+        testBed = await setup(['/']);
+      });
+
+      const { component, actions } = testBed;
+      component.update();
+
+      await actions.clickPolicyNameLink();
+      component.update();
+
+      expect(testBed.find('policyTitle').text()).toBe(
+        `Edit index lifecycle policy ${DOLLAR_SIGN_WITH_OTHER_CHARS_NAME}`
+      );
+    });
+
+    test('when loading edit policy page url', async () => {
+      await act(async () => {
+        testBed = await setup([
+          `/policies/edit/${encodeURIComponent(DOLLAR_SIGN_WITH_OTHER_CHARS_NAME)}`,
+        ]);
+      });
+
+      const { component } = testBed;
+      component.update();
+
+      // known issue https://github.com/elastic/kibana/issues/82440
+      expect(testBed.find('policyTitle').text()).not.toBe(
+        `Edit index lifecycle policy ${DOLLAR_SIGN_WITH_OTHER_CHARS_NAME}`
+      );
+    });
+
+    test('when loading edit policy page url with double encoding', async () => {
+      await act(async () => {
+        testBed = await setup([
+          encodeURI(`/policies/edit/${encodeURIComponent(DOLLAR_SIGN_WITH_OTHER_CHARS_NAME)}`),
+        ]);
+      });
+
+      const { component } = testBed;
+      component.update();
+
+      expect(testBed.find('policyTitle').text()).toBe(
+        `Edit index lifecycle policy ${DOLLAR_SIGN_WITH_OTHER_CHARS_NAME}`
+      );
+    });
+  });
+
+  describe('navigation with %25 sequence', () => {
+    beforeAll(async () => {
+      httpRequestsMockHelpers.setLoadPolicies([getDefaultHotPhasePolicy(DOLLAR_SIGN_25_SEQUENCE)]);
+    });
+
+    test('when clicked on policy name in table', async () => {
+      await act(async () => {
+        testBed = await setup(['/']);
+      });
+
+      const { component, actions } = testBed;
+      component.update();
+
+      await actions.clickPolicyNameLink();
+      component.update();
+
+      expect(testBed.find('policyTitle').text()).toBe(
+        `Edit index lifecycle policy ${DOLLAR_SIGN_25_SEQUENCE}`
+      );
+    });
+
+    test('when loading edit policy page url', async () => {
+      await act(async () => {
+        testBed = await setup([`/policies/edit/${encodeURIComponent(DOLLAR_SIGN_25_SEQUENCE)}`]);
+      });
+
+      const { component } = testBed;
+      component.update();
+
+      // known issue https://github.com/elastic/kibana/issues/82440
+      expect(testBed.find('policyTitle').text()).not.toBe(
+        `Edit index lifecycle policy ${DOLLAR_SIGN_25_SEQUENCE}`
+      );
+    });
+
+    test('when loading edit policy page url with double encoding', async () => {
+      await act(async () => {
+        testBed = await setup([
+          encodeURI(`/policies/edit/${encodeURIComponent(DOLLAR_SIGN_25_SEQUENCE)}`),
+        ]);
+      });
+
+      const { component } = testBed;
+      component.update();
+
+      expect(testBed.find('policyTitle').text()).toBe(
+        `Edit index lifecycle policy ${DOLLAR_SIGN_25_SEQUENCE}`
+      );
+    });
+  });
+});