From 0cd40e3f546f8591fb0367ae0d29bc52eef50351 Mon Sep 17 00:00:00 2001 From: Joe McElroy Date: Thu, 17 Oct 2024 14:47:04 +0100 Subject: [PATCH] [Search] [Onboarding] Update Breadcrumbs and title for search detail page (#196538) ## Summary Update breadcrumbs and title when on search details page. https://github.com/user-attachments/assets/1f6177ac-e273-492a-91da-1d7fadb30bf1 ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit e1f227d4644a11d46fac9c3592278081b577d0ae) --- x-pack/plugins/search_indices/kibana.jsonc | 1 + .../components/indices/details_page.tsx | 29 ++++++++++++++++++- x-pack/plugins/search_indices/public/types.ts | 2 ++ x-pack/plugins/search_indices/tsconfig.json | 3 +- .../page_objects/index_management_page.ts | 6 ++++ .../svl_search_index_detail_page.ts | 15 ++++++++++ .../test_suites/search/search_index_detail.ts | 9 ++++++ 7 files changed, 63 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/search_indices/kibana.jsonc b/x-pack/plugins/search_indices/kibana.jsonc index 13abaf63cbbe3..dee69b2b4e109 100644 --- 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 index 4d82ac053f65c..ff62233e52e70 100644 --- 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 index 0030b222f6bc1..51c05687f9dc6 100644 --- 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 index dfd73633b3c3b..61b82f4485492 100644 --- 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 index 8077581bbbb48..848c7c9e5b0e3 100644 --- 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 index ed11a09c26b66..df14d39118de7 100644 --- 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 index 1cae648601d49..a2e8ac99300a7 100644 --- 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');