Fix ilm navigation

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,84 @@
+/*
+ * 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 { SPECIAL_CHARS_NAME, getDefaultHotPhasePolicy } from '../edit_policy/constants';
+import { act } from 'react-dom/test-utils';
+
+window.scrollTo = jest.fn();
+
+describe('<App />', () => {
+  let testBed: AppTestBed;
+  const { server, httpRequestsMockHelpers } = setupEnvironment();
+  afterAll(() => {
+    server.restore();
+  });
+
+  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 creating a new policy', async () => {
+      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`);
+    });
+
+    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}`
+      );
+    });
+  });
+});

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/constants.ts

@@ -7,6 +7,9 @@
 import { PolicyFromES } from '../../../common/types';
 
 export const POLICY_NAME = 'my_policy';
+// navigation doesn't work for % with other special chars or sequence %25
+// https://github.com/elastic/kibana/pull/81664
+export const SPECIAL_CHARS_NAME = 'test?#';
 export const SNAPSHOT_POLICY_NAME = 'my_snapshot_policy';
 export const NEW_SNAPSHOT_POLICY_NAME = 'my_new_snapshot_policy';
 
@@ -96,6 +99,23 @@ export const DELETE_PHASE_POLICY: PolicyFromES = {
   name: POLICY_NAME,
 };
 
+export const getDefaultHotPhasePolicy = (policyName: string): PolicyFromES => ({
+  version: 1,
+  modified_date: Date.now().toString(),
+  policy: {
+    name: policyName,
+    phases: {
+      hot: {
+        min_age: '123ms',
+        actions: {
+          rollover: {},
+        },
+      },
+    },
+  },
+  name: policyName,
+});
+
 export const POLICY_WITH_NODE_ATTR_AND_OFF_ALLOCATION: PolicyFromES = {
   version: 1,
   modified_date: Date.now().toString(),

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

@@ -18,6 +18,7 @@ import {
   POLICY_WITH_INCLUDE_EXCLUDE,
   POLICY_WITH_NODE_ATTR_AND_OFF_ALLOCATION,
   POLICY_WITH_NODE_ROLE_ALLOCATION,
+  getDefaultHotPhasePolicy,
 } from './constants';
 
 window.scrollTo = jest.fn();
@@ -32,7 +33,7 @@ describe('<EditPolicy />', () => {
   describe('hot phase', () => {
     describe('serialization', () => {
       beforeEach(async () => {
-        httpRequestsMockHelpers.setLoadPolicies([DEFAULT_POLICY]);
+        httpRequestsMockHelpers.setLoadPolicies([getDefaultHotPhasePolicy('test')]);
         httpRequestsMockHelpers.setLoadSnapshotPolicies([]);
 
         await act(async () => {

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/helpers/index.ts

@@ -17,4 +17,7 @@ export type TestSubjects =
   | 'hot-selectedMaxDocuments'
   | 'hot-selectedMaxAge'
   | 'hot-selectedMaxAgeUnits'
+  | 'policyTablePolicyNameLink'
+  | 'policyTitle'
+  | 'createPolicyButton'
   | string;

x-pack/plugins/index_lifecycle_management/public/application/app.tsx

@@ -14,31 +14,41 @@ import { EditPolicy } from './sections/edit_policy';
 import { PolicyTable } from './sections/policy_table';
 import { trackUiMetric } from './services/ui_metric';
 
-export const App = ({
+export const AppWithRouter = ({
   history,
   navigateToApp,
   getUrlForApp,
 }: {
   history: ScopedHistory;
   navigateToApp: ApplicationStart['navigateToApp'];
   getUrlForApp: ApplicationStart['getUrlForApp'];
+}) => (
+  <Router history={history}>
+    <App navigateToApp={navigateToApp} getUrlForApp={getUrlForApp} />
+  </Router>
+);
+
+export const App = ({
+  navigateToApp,
+  getUrlForApp,
+}: {
+  navigateToApp: ApplicationStart['navigateToApp'];
+  getUrlForApp: ApplicationStart['getUrlForApp'];
 }) => {
   useEffect(() => trackUiMetric(METRIC_TYPE.LOADED, UIM_APP_LOAD), []);
 
   return (
-    <Router history={history}>
-      <Switch>
-        <Redirect exact from="/" to="/policies" />
-        <Route
-          exact
-          path={`/policies`}
-          render={(props) => <PolicyTable {...props} navigateToApp={navigateToApp} />}
-        />
-        <Route
-          path={`/policies/edit/:policyName?`}
-          render={(props) => <EditPolicy {...props} getUrlForApp={getUrlForApp} />}
-        />
-      </Switch>
-    </Router>
+    <Switch>
+      <Redirect exact from="/" to="/policies" />
+      <Route
+        exact
+        path={`/policies`}
+        render={(props) => <PolicyTable {...props} navigateToApp={navigateToApp} />}
+      />
+      <Route
+        path={`/policies/edit/:policyName?`}
+        render={(props) => <EditPolicy {...props} getUrlForApp={getUrlForApp} />}
+      />
+    </Switch>
   );
 };

x-pack/plugins/index_lifecycle_management/public/application/index.tsx

@@ -12,7 +12,7 @@ import { CloudSetup } from '../../../cloud/public';
 
 import { KibanaContextProvider } from '../shared_imports';
 
-import { App } from './app';
+import { AppWithRouter } from './app';
 
 export const renderApp = (
   element: Element,
@@ -25,7 +25,11 @@ export const renderApp = (
   render(
     <I18nContext>
       <KibanaContextProvider services={{ cloud }}>
-        <App history={history} navigateToApp={navigateToApp} getUrlForApp={getUrlForApp} />
+        <AppWithRouter
+          history={history}
+          navigateToApp={navigateToApp}
+          getUrlForApp={getUrlForApp}
+        />
       </KibanaContextProvider>
     </I18nContext>,
     element

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.tsx

@@ -76,12 +76,22 @@ export const EditPolicy: React.FunctionComponent<Props & RouteComponentProps<Rou
     );
   }
 
+  let decodedPolicyName = policyName;
+  if (policyName) {
+    try {
+      decodedPolicyName = decodeURIComponent(policyName);
+    } catch (e) {
+      // %25 is automatically decoded to %, so decoding it again will throw an error
+      // that have to be ignored (https://github.com/elastic/kibana/pull/81664)
+    }
+  }
+
   return (
     <PresentationComponent
       policies={policies}
       history={history}
       getUrlForApp={getUrlForApp}
-      policyName={policyName}
+      policyName={decodedPolicyName}
     />
   );
 };

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx

@@ -213,7 +213,7 @@ export const EditPolicy: React.FunctionComponent<Props> = ({
             verticalPosition="center"
             horizontalPosition="center"
           >
-            <EuiTitle size="l">
+            <EuiTitle size="l" data-test-subj="policyTitle">
               <h1>
                 {isNewPolicy
                   ? i18n.translate('xpack.indexLifecycleMgmt.editPolicy.createPolicyMessage', {