[8.x] [Search] [Onboarding] Update Breadcrumbs and title for search d…

…etail page (#196538) (#196701) # Backport This will backport the following commits from `main` to `8.x`: - [[Search] [Onboarding] Update Breadcrumbs and title for search detail page (#196538)](#196538)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Joe McElroy <[email protected]>
elastic · Oct 17, 2024 · 5453ac0 · 5453ac0
1 parent fc32304
commit 5453ac0
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 2 deletions.
diff --git a/x-pack/plugins/search_indices/kibana.jsonc b/x-pack/plugins/search_indices/kibana.jsonc
@@ -18,6 +18,7 @@
       "cloud",
       "console",
       "usageCollection",
+      "serverless"
     ],
     "requiredBundles": [
       "kibanaReact",

diff --git a/x-pack/plugins/search_indices/public/components/indices/details_page.tsx b/x-pack/plugins/search_indices/public/components/indices/details_page.tsx
@@ -40,7 +40,15 @@ export const SearchIndexDetailsPage = () => {
   const indexName = decodeURIComponent(useParams<{ indexName: string }>().indexName);
   const tabId = decodeURIComponent(useParams<{ tabId: string }>().tabId);
 
-  const { console: consolePlugin, docLinks, application, history, share } = useKibana().services;
+  const {
+    console: consolePlugin,
+    docLinks,
+    application,
+    history,
+    share,
+    chrome,
+    serverless,
+  } = useKibana().services;
   const {
     data: index,
     refetch,
@@ -70,6 +78,25 @@ export const SearchIndexDetailsPage = () => {
     setDocumentsLoading(isInitialLoading);
     setDocumentsExists(!(!isInitialLoading && indexDocuments?.results?.data.length === 0));
   }, [indexDocuments, isInitialLoading, setDocumentsExists, setDocumentsLoading]);
+
+  useEffect(() => {
+    chrome.docTitle.change(indexName);
+
+    if (serverless) {
+      serverless.setBreadcrumbs([
+        {
+          text: i18n.translate('xpack.searchIndices.indexBreadcrumbLabel', {
+            defaultMessage: 'Index Management',
+          }),
+          href: '/app/management/data/index_management/indices',
+        },
+        {
+          text: indexName,
+        },
+      ]);
+    }
+  }, [chrome, indexName, serverless]);
+
   const usageTracker = useUsageTracker();
 
   const detailsPageTabs: EuiTabbedContentTab[] = useMemo(() => {

diff --git a/x-pack/plugins/search_indices/public/types.ts b/x-pack/plugins/search_indices/public/types.ts
@@ -17,6 +17,7 @@ import type {
 } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import type { IndexManagementPluginStart } from '@kbn/index-management-shared-types';
 import type { AppDeepLinkId } from '@kbn/core-chrome-browser';
+import { ServerlessPluginStart } from '@kbn/serverless/public';
 
 export interface SearchIndicesPluginSetup {
   enabled: boolean;
@@ -50,6 +51,7 @@ export type SearchIndicesServicesContext = CoreStart &
   SearchIndicesAppPluginStartDependencies & {
     history: AppMountParameters['history'];
     indexManagement: IndexManagementPluginStart;
+    serverless: ServerlessPluginStart;
   };
 
 export interface AppUsageTracker {

diff --git a/x-pack/plugins/search_indices/tsconfig.json b/x-pack/plugins/search_indices/tsconfig.json
@@ -38,7 +38,8 @@
     "@kbn/search-api-keys-components",
     "@kbn/search-shared-ui",
     "@kbn/deeplinks-search",
-    "@kbn/core-chrome-browser"
+    "@kbn/core-chrome-browser",
+    "@kbn/serverless"
   ],
   "exclude": [
     "target/**/*",

diff --git a/x-pack/test/functional/page_objects/index_management_page.ts b/x-pack/test/functional/page_objects/index_management_page.ts
@@ -16,6 +16,12 @@ export function IndexManagementPageProvider({ getService }: FtrProviderContext)
     async sectionHeadingText() {
       return await testSubjects.getVisibleText('appTitle');
     },
+
+    async expectToBeOnIndicesManagement() {
+      const headingText = await testSubjects.getVisibleText('appTitle');
+      expect(headingText).to.be('Index Management');
+    },
+
     async reloadIndices() {
       await testSubjects.click('reloadIndicesButton');
     },

diff --git a/x-pack/test_serverless/functional/page_objects/svl_search_index_detail_page.ts b/x-pack/test_serverless/functional/page_objects/svl_search_index_detail_page.ts
@@ -197,5 +197,20 @@ export function SvlSearchIndexDetailPageProvider({ getService }: FtrProviderCont
       await testSubjects.existOrFail('mappingsTab');
       await testSubjects.existOrFail('settingsTab');
     },
+
+    async expectBreadcrumbNavigationWithIndexName(indexName: string) {
+      await testSubjects.existOrFail('euiBreadcrumb');
+      expect(await testSubjects.getVisibleText('breadcrumb last')).to.contain(indexName);
+    },
+
+    async clickOnIndexManagementBreadcrumb() {
+      const breadcrumbs = await testSubjects.findAll('breadcrumb');
+      for (const breadcrumb of breadcrumbs) {
+        if ((await breadcrumb.getVisibleText()) === 'Index Management') {
+          await breadcrumb.click();
+          return;
+        }
+      }
+    },
   };
 }
diff --git a/x-pack/test_serverless/functional/test_suites/search/search_index_detail.ts b/x-pack/test_serverless/functional/test_suites/search/search_index_detail.ts
@@ -79,6 +79,15 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         await pageObjects.svlSearchIndexDetailPage.expectQuickStatsAIMappingsToHaveVectorFields();
       });
 
+      it('should have breadcrumb navigation', async () => {
+        await pageObjects.svlSearchIndexDetailPage.expectBreadcrumbNavigationWithIndexName(
+          indexName
+        );
+        await pageObjects.svlSearchIndexDetailPage.clickOnIndexManagementBreadcrumb();
+        await pageObjects.indexManagement.expectToBeOnIndicesManagement();
+        await svlSearchNavigation.navigateToIndexDetailPage(indexName);
+      });
+
       it('should show code examples for adding documents', async () => {
         await pageObjects.svlSearchIndexDetailPage.expectAddDocumentCodeExamples();
         await pageObjects.svlSearchIndexDetailPage.expectSelectedLanguage('python');