[Index Management] Fix encoding issue on index details page

x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.helpers.ts

@@ -13,24 +13,23 @@ import {
 } from '@kbn/test-jest-helpers';
 import { HttpSetup } from '@kbn/core/public';
 import { act } from 'react-dom/test-utils';
-import {
-  IndexDetailsPage,
-  IndexDetailsSection,
-} from '../../../public/application/sections/home/index_list/details_page';
+
+import { IndexDetailsSection } from '../../../common/constants';
+import { IndexDetailsPage } from '../../../public/application/sections/home/index_list/details_page';
 import { WithAppDependencies } from '../helpers';
 import { testIndexName } from './mocks';
 
 let routerMock: typeof reactRouterMock;
-const testBedConfig: AsyncTestBedConfig = {
+const getTestBedConfig = (initialEntry?: string): AsyncTestBedConfig => ({
   memoryRouter: {
-    initialEntries: [`/indices/${testIndexName}`],
-    componentRoutePath: `/indices/:indexName/:indexDetailsSection?`,
+    initialEntries: [initialEntry ?? `/indices/index_details?indexName=${testIndexName}`],
+    componentRoutePath: `/indices/index_details`,
     onRouter: (router) => {
       routerMock = router;
     },
   },
   doMountAsync: true,
-};
+});
 
 export interface IndexDetailsPageTestBed extends TestBed {
   routerMock: typeof reactRouterMock;
@@ -67,6 +66,7 @@ export interface IndexDetailsPageTestBed extends TestBed {
     errorSection: {
       isDisplayed: () => boolean;
       clickReloadButton: () => Promise<void>;
+      noIndexNameMessageIsDisplayed: () => boolean;
     };
     stats: {
       getCodeBlockContent: () => string;
@@ -85,13 +85,18 @@ export interface IndexDetailsPageTestBed extends TestBed {
   };
 }
 
-export const setup = async (
-  httpSetup: HttpSetup,
-  overridingDependencies: any = {}
-): Promise<IndexDetailsPageTestBed> => {
+export const setup = async ({
+  httpSetup,
+  dependencies = {},
+  initialEntry,
+}: {
+  httpSetup: HttpSetup;
+  dependencies?: any;
+  initialEntry?: string;
+}): Promise<IndexDetailsPageTestBed> => {
   const initTestBed = registerTestBed(
-    WithAppDependencies(IndexDetailsPage, httpSetup, overridingDependencies),
-    testBedConfig
+    WithAppDependencies(IndexDetailsPage, httpSetup, dependencies),
+    getTestBedConfig(initialEntry)
   );
   const testBed = await initTestBed();
   const { find, component, exists } = testBed;
@@ -106,6 +111,9 @@ export const setup = async (
       });
       component.update();
     },
+    noIndexNameMessageIsDisplayed: () => {
+      return exists('indexDetailsNoIndexNameError');
+    },
   };
   const getHeader = () => {
     return component.find('[data-test-subj="indexDetailsHeader"] h1').text();

x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.test.tsx

@@ -8,11 +8,14 @@
 import { setupEnvironment } from '../helpers';
 import { IndexDetailsPageTestBed, setup } from './index_details_page.helpers';
 import { act } from 'react-dom/test-utils';
+
+import React from 'react';
+import { IndexDetailsSection } from '../../../common/constants';
+import { API_BASE_PATH, INTERNAL_API_BASE_PATH } from '../../../common';
 import {
   breadcrumbService,
   IndexManagementBreadcrumb,
 } from '../../../public/application/services/breadcrumbs';
-import { IndexDetailsSection } from '../../../public/application/sections/home/index_list/details_page';
 import {
   testIndexEditableSettings,
   testIndexMappings,
@@ -21,8 +24,6 @@ import {
   testIndexSettings,
   testIndexStats,
 } from './mocks';
-import { API_BASE_PATH, INTERNAL_API_BASE_PATH } from '../../../common';
-import React from 'react';
 
 jest.mock('@kbn/kibana-react-plugin/public', () => {
   const original = jest.requireActual('@kbn/kibana-react-plugin/public');
@@ -57,10 +58,13 @@ describe('<IndexDetailsPage />', () => {
     httpRequestsMockHelpers.setLoadIndexSettingsResponse(testIndexName, testIndexSettings);
 
     await act(async () => {
-      testBed = await setup(httpSetup, {
-        url: {
-          locators: {
-            get: () => ({ navigate: jest.fn() }),
+      testBed = await setup({
+        httpSetup,
+        dependencies: {
+          url: {
+            locators: {
+              get: () => ({ navigate: jest.fn() }),
+            },
           },
         },
       });
@@ -75,7 +79,7 @@ describe('<IndexDetailsPage />', () => {
         message: `Data for index ${testIndexName} was not found`,
       });
       await act(async () => {
-        testBed = await setup(httpSetup);
+        testBed = await setup({ httpSetup });
       });
 
       testBed.component.update();
@@ -91,6 +95,19 @@ describe('<IndexDetailsPage />', () => {
       await testBed.actions.errorSection.clickReloadButton();
       expect(httpSetup.get).toHaveBeenCalledTimes(numberOfRequests + 1);
     });
+
+    it('renders an error section when no index name is provided', async () => {
+      // already sent 2 requests while setting up the component
+      const numberOfRequests = 2;
+      expect(httpSetup.get).toHaveBeenCalledTimes(numberOfRequests);
+      await act(async () => {
+        testBed = await setup({ httpSetup, initialEntry: '/indices/index_details' });
+      });
+      testBed.component.update();
+      expect(testBed.actions.errorSection.noIndexNameMessageIsDisplayed()).toBe(true);
+      // no extra http request was sent
+      expect(httpSetup.get).toHaveBeenCalledTimes(numberOfRequests);
+    });
   });
 
   describe('Stats tab', () => {
@@ -138,7 +155,7 @@ describe('<IndexDetailsPage />', () => {
       );
 
       await act(async () => {
-        testBed = await setup(httpSetup);
+        testBed = await setup({ httpSetup });
       });
       testBed.component.update();
 
@@ -148,8 +165,11 @@ describe('<IndexDetailsPage />', () => {
 
     it('hides index stats tab if enableIndexStats===false', async () => {
       await act(async () => {
-        testBed = await setup(httpSetup, {
-          config: { enableIndexStats: false },
+        testBed = await setup({
+          httpSetup,
+          dependencies: {
+            config: { enableIndexStats: false },
+          },
         });
       });
       testBed.component.update();
@@ -164,7 +184,7 @@ describe('<IndexDetailsPage />', () => {
           message: 'Error',
         });
         await act(async () => {
-          testBed = await setup(httpSetup);
+          testBed = await setup({ httpSetup });
         });
 
         testBed.component.update();
@@ -213,8 +233,11 @@ describe('<IndexDetailsPage />', () => {
 
     it('hides index stats from detail panels if enableIndexStats===false', async () => {
       await act(async () => {
-        testBed = await setup(httpSetup, {
-          config: { enableIndexStats: false },
+        testBed = await setup({
+          httpSetup,
+          dependencies: {
+            config: { enableIndexStats: false },
+          },
         });
       });
       testBed.component.update();
@@ -226,10 +249,13 @@ describe('<IndexDetailsPage />', () => {
     describe('extension service summary', () => {
       it('renders all summaries added to the extension service', async () => {
         await act(async () => {
-          testBed = await setup(httpSetup, {
-            services: {
-              extensionsService: {
-                summaries: [() => <span>test</span>, () => <span>test2</span>],
+          testBed = await setup({
+            httpSetup,
+            dependencies: {
+              services: {
+                extensionsService: {
+                  summaries: [() => <span>test</span>, () => <span>test2</span>],
+                },
               },
             },
           });
@@ -241,10 +267,13 @@ describe('<IndexDetailsPage />', () => {
 
       it(`doesn't render empty panels if the summary renders null`, async () => {
         await act(async () => {
-          testBed = await setup(httpSetup, {
-            services: {
-              extensionsService: {
-                summaries: [() => null],
+          testBed = await setup({
+            httpSetup,
+            dependencies: {
+              services: {
+                extensionsService: {
+                  summaries: [() => null],
+                },
               },
             },
           });
@@ -255,10 +284,13 @@ describe('<IndexDetailsPage />', () => {
 
       it(`doesn't render anything when no summaries added to the extension service`, async () => {
         await act(async () => {
-          testBed = await setup(httpSetup, {
-            services: {
-              extensionsService: {
-                summaries: [],
+          testBed = await setup({
+            httpSetup,
+            dependencies: {
+              services: {
+                extensionsService: {
+                  summaries: [],
+                },
               },
             },
           });
@@ -269,12 +301,6 @@ describe('<IndexDetailsPage />', () => {
     });
   });
 
-  it('documents tab', async () => {
-    await testBed.actions.clickIndexDetailsTab(IndexDetailsSection.Documents);
-    const tabContent = testBed.actions.getActiveTabContent();
-    expect(tabContent).toEqual('Documents');
-  });
-
   describe('Mappings tab', () => {
     it('updates the breadcrumbs to index details mappings', async () => {
       await testBed.actions.clickIndexDetailsTab(IndexDetailsSection.Mappings);
@@ -315,7 +341,7 @@ describe('<IndexDetailsPage />', () => {
           message: `Was not able to load mappings`,
         });
         await act(async () => {
-          testBed = await setup(httpSetup);
+          testBed = await setup({ httpSetup });
         });
 
         testBed.component.update();
@@ -377,7 +403,7 @@ describe('<IndexDetailsPage />', () => {
           message: `Was not able to load settings`,
         });
         await act(async () => {
-          testBed = await setup(httpSetup);
+          testBed = await setup({ httpSetup });
         });
 
         testBed.component.update();
@@ -451,12 +477,6 @@ describe('<IndexDetailsPage />', () => {
     });
   });
 
-  it('pipelines tab', async () => {
-    await testBed.actions.clickIndexDetailsTab(IndexDetailsSection.Pipelines);
-    const tabContent = testBed.actions.getActiveTabContent();
-    expect(tabContent).toEqual('Pipelines');
-  });
-
   it('navigates back to indices', async () => {
     jest.spyOn(testBed.routerMock.history, 'push');
     await testBed.actions.clickBackToIndicesButton();
@@ -496,7 +516,7 @@ describe('<IndexDetailsPage />', () => {
       });
 
       await act(async () => {
-        testBed = await setup(httpSetup);
+        testBed = await setup({ httpSetup });
       });
       testBed.component.update();
 
@@ -589,7 +609,7 @@ describe('<IndexDetailsPage />', () => {
       });
 
       await act(async () => {
-        testBed = await setup(httpSetup);
+        testBed = await setup({ httpSetup });
       });
       testBed.component.update();
 

x-pack/plugins/index_management/common/constants/home_sections.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export enum Section {
+  Indices = 'indices',
+  DataStreams = 'data_streams',
+  IndexTemplates = 'templates',
+  ComponentTemplates = 'component_templates',
+  EnrichPolicies = 'enrich_policies',
+}
+
+export enum IndexDetailsSection {
+  Overview = 'overview',
+  Mappings = 'mappings',
+  Settings = 'settings',
+  Stats = 'stats',
+}

x-pack/plugins/index_management/common/constants/index.ts

@@ -53,3 +53,5 @@ export {
 } from './ui_metric';
 
 export { MAJOR_VERSION } from './plugin';
+
+export { Section, IndexDetailsSection } from './home_sections';

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

@@ -12,8 +12,8 @@ import { Redirect } from 'react-router-dom';
 import { Router, Routes, Route } from '@kbn/shared-ux-router';
 import { ScopedHistory } from '@kbn/core/public';
 
-import { UIM_APP_LOAD } from '../../common/constants';
-import { IndexManagementHome, homeSections, Section } from './sections/home';
+import { UIM_APP_LOAD, Section } from '../../common/constants';
+import { IndexManagementHome, homeSections } from './sections/home';
 import { TemplateCreate } from './sections/template_create';
 import { TemplateClone } from './sections/template_clone';
 import { TemplateEdit } from './sections/template_edit';

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

@@ -32,11 +32,11 @@ import {
   APP_WRAPPER_CLASS,
   useExecutionContext,
 } from '../../../../shared_imports';
+import { Section } from '../../../../../common/constants';
 import { useAppContext } from '../../../app_context';
 import { useLoadDataStreams } from '../../../services/api';
 import { breadcrumbService, IndexManagementBreadcrumb } from '../../../services/breadcrumbs';
 import { documentationService } from '../../../services/documentation';
-import { Section } from '../home';
 import { DataStreamTable } from './data_stream_table';
 import { DataStreamDetailPanel } from './data_stream_detail_panel';
 import { filterDataStreams, isSelectedDataStreamHidden } from '../../../lib/data_streams';

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

@@ -10,6 +10,8 @@ import { RouteComponentProps } from 'react-router-dom';
 import { Routes, Route } from '@kbn/shared-ux-router';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiButtonEmpty, EuiPageHeader, EuiSpacer } from '@elastic/eui';
+
+import { Section } from '../../../../common/constants';
 import { documentationService } from '../../services/documentation';
 import { useAppContext } from '../../app_context';
 import { ComponentTemplateList } from '../../components/component_templates';
@@ -19,14 +21,6 @@ import { IndexDetailsPage } from './index_list/details_page';
 import { DataStreamList } from './data_stream_list';
 import { TemplateList } from './template_list';
 
-export enum Section {
-  Indices = 'indices',
-  DataStreams = 'data_streams',
-  IndexTemplates = 'templates',
-  ComponentTemplates = 'component_templates',
-  EnrichPolicies = 'enrich_policies',
-}
-
 export const homeSections = [
   Section.Indices,
   Section.DataStreams,
@@ -157,10 +151,7 @@ export const IndexManagementHome: React.FunctionComponent<RouteComponentProps<Ma
     return (
       <>
         <Routes>
-          <Route
-            path={`/${Section.Indices}/:indexName/:indexDetailsSection?`}
-            component={IndexDetailsPage}
-          />
+          <Route path={`/${Section.Indices}/index_details`} component={IndexDetailsPage} />
           <Route render={() => indexManagementTabs} />
         </Routes>
       </>