[Onboarding]Update manage indices button in index management to navigate to search_indices details page

x-pack/packages/index-management/index_management_shared_types/src/services/extensions_service.ts

@@ -31,7 +31,7 @@ export interface IndexBadge {
   color: EuiBadgeProps['color'];
 }
 export interface IndexDetailsPageRoute {
-  renderRoute: (indexName: string) => string;
+  renderRoute: (indexName: string, detailsTabId?: string) => string;
 }
 
 export interface EmptyListContent {
@@ -72,5 +72,5 @@ export interface ExtensionsSetup {
   // sets content to render below the docs link on the mappings tab of the index page
   setIndexMappingsContent(content: IndexContent): void;
   // sets index details page route
-  setIndexDetailsPageRoute(route: IndexDetailsPageRoute): void;
+  setIndexDetailsPageRoute(route: IndexDetailsPageRoute, detailsTabId?: string): void;
 }

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

@@ -23,7 +23,7 @@ import {
 
 import { flattenPanelTree } from '../../../../lib/flatten_panel_tree';
 import { INDEX_OPEN, IndexDetailsSection } from '../../../../../../common/constants';
-import { getIndexDetailsLink } from '../../../../services/routing';
+import { getIndexDetailsLink, navigateToIndexDetailsPage } from '../../../../services/routing';
 import { AppContext } from '../../../../app_context';
 
 export class IndexActionsContextMenu extends Component {
@@ -50,7 +50,7 @@ export class IndexActionsContextMenu extends Component {
   panels() {
     const {
       services: { extensionsService },
-      core: { getUrlForApp },
+      core: { getUrlForApp, application, http },
       history,
       config: { enableIndexActions },
     } = this.context;
@@ -83,8 +83,14 @@ export class IndexActionsContextMenu extends Component {
           defaultMessage: 'Show index overview',
         }),
         onClick: () => {
-          history.push(
-            getIndexDetailsLink(indexNames[0], indicesListURLParams, IndexDetailsSection.Overview)
+          navigateToIndexDetailsPage(
+            indexNames[0],
+            indicesListURLParams,
+            extensionsService,
+            application,
+            http,
+            history,
+            IndexDetailsSection.Overview
           );
         },
       });
@@ -94,8 +100,14 @@ export class IndexActionsContextMenu extends Component {
           defaultMessage: 'Show index settings',
         }),
         onClick: () => {
-          history.push(
-            getIndexDetailsLink(indexNames[0], indicesListURLParams, IndexDetailsSection.Settings)
+          navigateToIndexDetailsPage(
+            indexNames[0],
+            indicesListURLParams,
+            extensionsService,
+            application,
+            http,
+            history,
+            IndexDetailsSection.Settings
           );
         },
       });
@@ -105,8 +117,14 @@ export class IndexActionsContextMenu extends Component {
           defaultMessage: 'Show index mapping',
         }),
         onClick: () => {
-          history.push(
-            getIndexDetailsLink(indexNames[0], indicesListURLParams, IndexDetailsSection.Mappings)
+          navigateToIndexDetailsPage(
+            indexNames[0],
+            indicesListURLParams,
+            extensionsService,
+            application,
+            http,
+            history,
+            IndexDetailsSection.Mappings
           );
         },
       });

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

@@ -41,7 +41,7 @@ import {
   reactRouterNavigate,
   attemptToURIDecode,
 } from '../../../../../shared_imports';
-import { getDataStreamDetailsLink, getIndexDetailsLink } from '../../../../services/routing';
+import { getDataStreamDetailsLink, navigateToIndexDetailsPage } from '../../../../services/routing';
 import { documentationService } from '../../../../services/documentation';
 import { AppContextConsumer } from '../../../../app_context';
 import { renderBadges } from '../../../../lib/render_badges';
@@ -73,12 +73,14 @@ const getColumnConfigs = ({
             <EuiLink
               data-test-subj="indexTableIndexNameLink"
               onClick={() => {
-                if (!extensionsService.indexDetailsPageRoute) {
-                  history.push(getIndexDetailsLink(index.name, location.search || ''));
-                } else {
-                  const route = extensionsService.indexDetailsPageRoute.renderRoute(index.name);
-                  application.navigateToUrl(http.basePath.prepend(route));
-                }
+                navigateToIndexDetailsPage(
+                  index.name,
+                  location.search || '',
+                  extensionsService,
+                  application,
+                  http,
+                  history
+                );
               }}
             >
               {index.name}

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

@@ -5,10 +5,17 @@
  * 2.0.
  */
 
-import { getIndexDetailsLink, getIndexListUri } from './routing';
+import { getIndexDetailsLink, getIndexListUri, navigateToIndexDetailsPage } from './routing';
+import { applicationServiceMock, scopedHistoryMock, httpServiceMock } from '@kbn/core/public/mocks';
+import { ExtensionsService } from '../../services/extensions_service';
+import { IndexDetailsSection } from '../../../common/constants';
 
 describe('routing', () => {
   describe('index details link', () => {
+    const application = applicationServiceMock.createStartContract();
+    const http = httpServiceMock.createSetupContract();
+
+    const history = scopedHistoryMock.create();
     it('adds the index name to the url', () => {
       const indexName = 'testIndex';
       const url = getIndexDetailsLink(indexName, '');
@@ -26,6 +33,35 @@ describe('routing', () => {
       const url = getIndexDetailsLink('testIndex', '', tab);
       expect(url).toContain(`tab=${tab}`);
     });
+    it('renders default index details route without extensionService indexDetailsPageRoute ', () => {
+      const extensionService = {
+        indexDetailsPageRoute: null,
+      } as ExtensionsService;
+      navigateToIndexDetailsPage('testIndex', '', extensionService, application, http, history);
+      expect(history.push).toHaveBeenCalledTimes(1);
+      expect(application.navigateToUrl).not.toHaveBeenCalled();
+    });
+
+    it('renders route from extensionService indexDetailsPageRoute with tab id', () => {
+      const extensionService = {
+        indexDetailsPageRoute: {
+          renderRoute: (indexName: string, detailsTabId?: string) => {
+            return `test_url/${detailsTabId}`;
+          },
+        },
+      } as ExtensionsService;
+      navigateToIndexDetailsPage(
+        'testIndex',
+        '',
+        extensionService,
+        application,
+        http,
+        history,
+        IndexDetailsSection.Settings
+      );
+      expect(application.navigateToUrl).toHaveBeenCalledTimes(1);
+      expect(application.navigateToUrl).toHaveBeenCalledWith('test_url/settings');
+    });
   });
 
   describe('indices list link', () => {

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

@@ -5,9 +5,13 @@
  * 2.0.
  */
 
+import { ApplicationStart } from '@kbn/core/public';
+import { HttpSetup } from '@kbn/core/public';
+import { ScopedHistory } from '@kbn/core/public';
 import { Section } from '../../../common/constants';
 import type { IndexDetailsTabId } from '../../../common/constants';
-
+import { ExtensionsService } from '../../services/extensions_service';
+import { IndexDetailsSection } from '../../../common/constants';
 export const getTemplateListLink = () => `/templates`;
 
 export const getTemplateDetailsLink = (name: string, isLegacy?: boolean) => {
@@ -78,3 +82,19 @@ export const getComponentTemplatesLink = (usedByTemplateName?: string) => {
   }
   return url;
 };
+export const navigateToIndexDetailsPage = (
+  indexName: string,
+  indicesListURLParams: string,
+  extensionsService: ExtensionsService,
+  application: ApplicationStart,
+  http: HttpSetup,
+  history: ScopedHistory,
+  tabId?: IndexDetailsSection
+) => {
+  if (!extensionsService.indexDetailsPageRoute) {
+    history.push(getIndexDetailsLink(indexName, indicesListURLParams, tabId));
+  } else {
+    const route = extensionsService.indexDetailsPageRoute.renderRoute(indexName, tabId);
+    application.navigateToUrl(http.basePath.prepend(route));
+  }
+};

x-pack/plugins/search_indices/public/plugin.ts

@@ -17,7 +17,7 @@ import type {
 } from './types';
 import { initQueryClient } from './services/query_client';
 import { INDICES_APP_ID, START_APP_ID } from '../common';
-import { INDICES_APP_BASE, START_APP_BASE } from './routes';
+import { INDICES_APP_BASE, START_APP_BASE, SearchIndexDetailsTabs } from './routes';
 import { isGlobalEmptyStateEnabled } from './feature_flags';
 
 export class SearchIndicesPlugin
@@ -89,8 +89,13 @@ export class SearchIndicesPlugin
     docLinks.setDocLinks(core.docLinks.links);
     if (this.pluginEnabled) {
       indexManagement?.extensionsService.setIndexDetailsPageRoute({
-        renderRoute: (indexName) => {
-          return `/app/elasticsearch/indices/index_details/${indexName}`;
+        renderRoute: (indexName, detailsTabId) => {
+          const route = `/app/elasticsearch/indices/index_details/${indexName}`;
+          const tabIds: string[] = Object.values(SearchIndexDetailsTabs);
+          if (detailsTabId && tabIds.includes(detailsTabId)) {
+            return `${route}/${detailsTabId}`;
+          }
+          return route;
         },
       });
     }

x-pack/test_serverless/functional/page_objects/svl_search_index_detail_page.ts

@@ -125,9 +125,6 @@ export function SvlSearchIndexDetailPageProvider({ getService }: FtrProviderCont
       await testSubjects.existOrFail('mappingsTab', { timeout: 2000 });
       await testSubjects.existOrFail('dataTab', { timeout: 2000 });
     },
-    async expectShouldDefaultToDataTab() {
-      expect(await browser.getCurrentUrl()).contain('/data');
-    },
     async withDataChangeTabs(tab: 'dataTab' | 'mappingsTab' | 'settingsTab') {
       await testSubjects.click(tab);
     },
@@ -191,6 +188,35 @@ export function SvlSearchIndexDetailPageProvider({ getService }: FtrProviderCont
         return (await testSubjects.isDisplayed('searchIndexDetailsHeader')) === true;
       });
     },
+    async manageIndex() {
+      const selectIndex = await testSubjects.find('indexTableRowCheckbox');
+      await selectIndex.click();
+      await retry.waitFor('manage index to show up ', async () => {
+        return (await testSubjects.isDisplayed('indexActionsContextMenuButton')) === true;
+      });
+      const contextMenuButton = await testSubjects.find('indexActionsContextMenuButton');
+      await contextMenuButton.click();
+      await retry.waitFor('manage index context menu to show ', async () => {
+        return (await testSubjects.isDisplayed('indexContextMenu')) === true;
+      });
+    },
+    async manageIndexContextMenuExists() {
+      await testSubjects.existOrFail('showOverviewIndexMenuButton');
+      await testSubjects.existOrFail('showSettingsIndexMenuButton');
+      await testSubjects.existOrFail('showMappingsIndexMenuButton');
+      await testSubjects.existOrFail('deleteIndexMenuButton');
+    },
+    async changeManageIndexTab(
+      manageIndexTab:
+        | 'showOverviewIndexMenuButton'
+        | 'showSettingsIndexMenuButton'
+        | 'showMappingsIndexMenuButton'
+        | 'deleteIndexMenuButton'
+    ) {
+      await testSubjects.existOrFail(manageIndexTab);
+      const manageIndexComponent = await testSubjects.find(manageIndexTab);
+      await manageIndexComponent.click();
+    },
 
     async expectSearchIndexDetailsTabsExists() {
       await testSubjects.existOrFail('dataTab');

x-pack/test_serverless/functional/test_suites/search/search_index_detail.ts

@@ -124,7 +124,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         });
         it('should have with data tabs', async () => {
           await pageObjects.svlSearchIndexDetailPage.expectWithDataTabsExists();
-          await pageObjects.svlSearchIndexDetailPage.expectShouldDefaultToDataTab();
+          await pageObjects.svlSearchIndexDetailPage.expectUrlShouldChangeTo('data');
         });
         it('should be able to change tabs to mappings and mappings is shown', async () => {
           await pageObjects.svlSearchIndexDetailPage.withDataChangeTabs('mappingsTab');
@@ -184,11 +184,44 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
       before(async () => {
         await es.indices.create({ index: indexName });
         await security.testUser.setRoles(['index_management_user']);
+      });
+      beforeEach(async () => {
         await pageObjects.common.navigateToApp('indexManagement');
         // Navigate to the indices tab
         await pageObjects.indexManagement.changeTabs('indicesTab');
         await pageObjects.header.waitUntilLoadingHasFinished();
       });
+      after(async () => {
+        await esDeleteAllIndices(indexName);
+      });
+      describe('manage index action', () => {
+        beforeEach(async () => {
+          await pageObjects.svlSearchIndexDetailPage.manageIndex();
+          await pageObjects.svlSearchIndexDetailPage.manageIndexContextMenuExists();
+        });
+        it('overview navigates to settings tab', async () => {
+          await pageObjects.svlSearchIndexDetailPage.changeManageIndexTab(
+            'showOverviewIndexMenuButton'
+          );
+          await pageObjects.svlSearchIndexDetailPage.expectIndexDetailPageHeader();
+          await pageObjects.svlSearchIndexDetailPage.expectUrlShouldChangeTo('data');
+        });
+
+        it('settings navigates to settings tab', async () => {
+          await pageObjects.svlSearchIndexDetailPage.changeManageIndexTab(
+            'showSettingsIndexMenuButton'
+          );
+          await pageObjects.svlSearchIndexDetailPage.expectIndexDetailPageHeader();
+          await pageObjects.svlSearchIndexDetailPage.expectUrlShouldChangeTo('settings');
+        });
+        it('mappings navigates to settings tab', async () => {
+          await pageObjects.svlSearchIndexDetailPage.changeManageIndexTab(
+            'showMappingsIndexMenuButton'
+          );
+          await pageObjects.svlSearchIndexDetailPage.expectIndexDetailPageHeader();
+          await pageObjects.svlSearchIndexDetailPage.expectUrlShouldChangeTo('mappings');
+        });
+      });
       describe('can view search index details', function () {
         it('renders search index details with no documents', async () => {
           await pageObjects.svlSearchIndexDetailPage.openIndicesDetailFromIndexManagementIndicesListTable(