[Index Management] Fix broken app links

x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/components/policy_table/policy_table.js

@@ -254,7 +254,7 @@ export class PolicyTable extends Component {
         icon: 'list',
         onClick: () => {
           this.props.navigateToApp('management', {
-            path: `/data/index_management${getIndexListUri(`ilm.policy:${policy.name}`)}`,
+            path: `/data/index_management${getIndexListUri(`ilm.policy:${policy.name}`, true)}`,
           });
         },
       });

x-pack/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx

@@ -34,7 +34,11 @@ export const services = {
 services.uiMetricService.setup({ reportUiStats() {} } as any);
 setExtensionsService(services.extensionsService);
 setUiMetricService(services.uiMetricService);
-const appDependencies = { services, core: { getUrlForApp: () => {} }, plugins: {} } as any;
+const appDependencies = {
+  services,
+  core: { getUrlForApp: () => {}, navigateToApp: () => {} },
+  plugins: {},
+} as any;
 
 export const setupEnvironment = () => {
   // Mock initialization of services

x-pack/plugins/index_management/public/application/app_context.tsx

@@ -21,6 +21,7 @@ export interface AppDependencies {
   core: {
     fatalErrors: CoreStart['fatalErrors'];
     getUrlForApp: CoreStart['application']['getUrlForApp'];
+    navigateToApp: CoreStart['application']['navigateToApp'];
   };
   plugins: {
     usageCollection: UsageCollectionSetup;

x-pack/plugins/index_management/public/application/mount_management_section.ts

@@ -43,6 +43,7 @@ export async function mountManagementSection(
     core: {
       fatalErrors,
       getUrlForApp: application.getUrlForApp,
+      navigateToApp: application.navigateToApp,
     },
     plugins: {
       usageCollection,

x-pack/plugins/index_management/public/application/sections/home/home.tsx

@@ -144,7 +144,6 @@ export const IndexManagementHome: React.FunctionComponent<RouteComponentProps<Ma
             component={DataStreamList}
           />
           <Route exact path={`/${Section.Indices}`} component={IndexList} />
-          <Route exact path={`/${Section.Indices}/filter/:filter?`} component={IndexList} />
           <Route
             exact
             path={[`/${Section.IndexTemplates}`, `/${Section.IndexTemplates}/:templateName?`]}

x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js

@@ -75,7 +75,7 @@ const HEADERS = {
 
 export class IndexTable extends Component {
   static getDerivedStateFromProps(props, state) {
-    // Deselct any indices which no longer exist, e.g. they've been deleted.
+    // Deselect any indices which no longer exist, e.g. they've been deleted.
     const { selectedIndicesMap } = state;
     const indexNames = props.indices.map((index) => index.name);
     const selectedIndexNames = Object.keys(selectedIndicesMap);

x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_summary.tsx

@@ -18,8 +18,9 @@ import {
   EuiFlexItem,
   EuiCodeBlock,
 } from '@elastic/eui';
+import { useAppContext } from '../../../../../app_context';
 import { TemplateDeserialized } from '../../../../../../../common';
-import { getILMPolicyPath } from '../../../../../services/navigation';
+import { getILMPolicyPath } from '../../../../../services/routing';
 
 interface Props {
   templateDetails: TemplateDeserialized;
@@ -51,6 +52,10 @@ export const TabSummary: React.FunctionComponent<Props> = ({ templateDetails })
 
   const numIndexPatterns = indexPatterns.length;
 
+  const {
+    core: { navigateToApp },
+  } = useAppContext();
+
   return (
     <EuiFlexGroup data-test-subj="summaryTab">
       <EuiFlexItem>
@@ -153,7 +158,13 @@ export const TabSummary: React.FunctionComponent<Props> = ({ templateDetails })
               </EuiDescriptionListTitle>
               <EuiDescriptionListDescription>
                 {ilmPolicy && ilmPolicy.name ? (
-                  <EuiLink href={getILMPolicyPath(ilmPolicy.name)}>{ilmPolicy.name}</EuiLink>
+                  <EuiLink
+                    onClick={() =>
+                      navigateToApp('management', { path: getILMPolicyPath(ilmPolicy.name) })
+                    }
+                  >
+                    {ilmPolicy.name}
+                  </EuiLink>
                 ) : (
                   i18nTexts.none
                 )}

x-pack/plugins/index_management/public/application/services/routing.ts

@@ -31,6 +31,28 @@ export const getTemplateCloneLink = (name: string, isLegacy?: boolean) => {
   return encodeURI(url);
 };
 
+export const getILMPolicyPath = (policyName: string) => {
+  return encodeURI(
+    `/data/index_lifecycle_management/policies/edit/${encodeURIComponent(policyName)}`
+  );
+};
+
+export const getIndexListUri = (filter?: string, includeHiddenIndices?: boolean) => {
+  const hiddenIndicesParam =
+    typeof includeHiddenIndices !== 'undefined' ? includeHiddenIndices : false;
+  if (filter) {
+    // React router tries to decode url params but it can't because the browser partially
+    // decodes them. So we have to encode both the URL and the filter to get it all to
+    // work correctly for filters with URL unsafe characters in them.
+    return encodeURI(
+      `/indices?includeHiddenIndices=${hiddenIndicesParam}&filter=${encodeURIComponent(filter)}`
+    );
+  }
+
+  // If no filter, URI is already safe so no need to encode.
+  return '/indices';
+};
+
 export const decodePathFromReactRouter = (pathname: string): string => {
   let decodedPath;
   try {

x-pack/plugins/index_management/public/index.ts

@@ -13,4 +13,4 @@ export const plugin = () => {
 
 export { IndexManagementPluginSetup };
 
-export { getIndexListUri } from './application/services/navigation';
+export { getIndexListUri } from './application/services/routing';