diff --git a/x-pack/plugins/data_quality/public/routes/dataset_quality/index.tsx b/x-pack/plugins/data_quality/public/routes/dataset_quality/index.tsx index 7ef7c17669e3d..65dae1ec45a81 100644 --- a/x-pack/plugins/data_quality/public/routes/dataset_quality/index.tsx +++ b/x-pack/plugins/data_quality/public/routes/dataset_quality/index.tsx @@ -9,7 +9,6 @@ import { EuiEmptyPrompt, EuiLoadingLogo } from '@elastic/eui'; import type { DatasetQualityController } from '@kbn/dataset-quality-plugin/public/controller/dataset_quality'; import React from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; -import { PLUGIN_NAME } from '../../../common'; import { useKbnUrlStateStorageFromRouterContext } from '../../utils/kbn_url_state_context'; import { useBreadcrumbs } from '../../utils/use_breadcrumbs'; import { useKibanaContextForPlugin } from '../../utils/use_kibana'; @@ -18,10 +17,10 @@ import { DatasetQualityContextProvider, useDatasetQualityContext } from './conte export const DatasetQualityRoute = () => { const urlStateStorageContainer = useKbnUrlStateStorageFromRouterContext(); const { - services: { chrome, datasetQuality, notifications, appParams }, + services: { datasetQuality, notifications }, } = useKibanaContextForPlugin(); - useBreadcrumbs([{ text: PLUGIN_NAME }], appParams, chrome); + useBreadcrumbs(); return ( (); const history = useHistory(); - const { - services: { - chrome, - appParams, - application: { navigateToApp }, - }, - } = useKibanaContextForPlugin(); - const rootBreadCrumb = useMemo( - () => ({ - text: PLUGIN_NAME, - onClick: () => navigateToApp('management', { path: `/data/${PLUGIN_ID}` }), - }), - [navigateToApp] - ); - const [breadcrumbs, setBreadcrumbs] = useState([rootBreadCrumb]); + + const [breadcrumbs, setBreadcrumbs] = useState([]); + + useBreadcrumbs(breadcrumbs); useEffect(() => { async function getDatasetQualityDetailsController() { @@ -88,7 +75,7 @@ export function DatasetQualityDetailsContextProvider({ datasetQualityDetailsState: state, }); const breadcrumbValue = getBreadcrumbValue(state.dataStream, state.integration); - setBreadcrumbs([rootBreadCrumb, { text: breadcrumbValue }]); + setBreadcrumbs([{ text: breadcrumbValue }]); } ); @@ -99,9 +86,7 @@ export function DatasetQualityDetailsContextProvider({ } getDatasetQualityDetailsController(); - }, [datasetQuality, history, rootBreadCrumb, toastsService, urlStateStorageContainer]); - - useBreadcrumbs(breadcrumbs, appParams, chrome); + }, [datasetQuality, history, toastsService, urlStateStorageContainer]); return ( diff --git a/x-pack/plugins/data_quality/public/utils/use_breadcrumbs.tsx b/x-pack/plugins/data_quality/public/utils/use_breadcrumbs.tsx index b4e6144f3fbac..aaab21f15659e 100644 --- a/x-pack/plugins/data_quality/public/utils/use_breadcrumbs.tsx +++ b/x-pack/plugins/data_quality/public/utils/use_breadcrumbs.tsx @@ -5,28 +5,36 @@ * 2.0. */ -import type { ChromeBreadcrumb, ChromeStart } from '@kbn/core-chrome-browser'; +import type { ChromeBreadcrumb } from '@kbn/core-chrome-browser'; import { useEffect } from 'react'; -import { ManagementAppMountParams } from '@kbn/management-plugin/public'; import { Integration } from '@kbn/dataset-quality-plugin/common/data_streams_stats/integration'; import { indexNameToDataStreamParts } from '@kbn/dataset-quality-plugin/common'; +import { DATA_QUALITY_LOCATOR_ID, DataQualityLocatorParams } from '@kbn/deeplinks-observability'; +import { PLUGIN_NAME } from '../../common'; +import { useKibanaContextForPlugin } from './use_kibana'; -export const useBreadcrumbs = ( - breadcrumbs: ChromeBreadcrumb[], - params: ManagementAppMountParams, - chromeService: ChromeStart -) => { - const { docTitle } = chromeService; - const isMultiple = breadcrumbs.length > 1; +export const useBreadcrumbs = (breadcrumbs: ChromeBreadcrumb[] = []) => { + const { + services: { appParams, chrome, share }, + } = useKibanaContextForPlugin(); - const docTitleValue = isMultiple ? breadcrumbs[breadcrumbs.length - 1].text : breadcrumbs[0].text; + useEffect(() => { + const locator = share.url.locators.get(DATA_QUALITY_LOCATOR_ID); - docTitle.change(docTitleValue as string); + const composedBreadcrumbs: ChromeBreadcrumb[] = [ + { + text: PLUGIN_NAME, + deepLinkId: 'management:data_quality', + onClick: () => locator?.navigate({}), + }, + ...breadcrumbs, + ]; - useEffect(() => { - params.setBreadcrumbs(breadcrumbs); - }, [breadcrumbs, params]); + chrome.docTitle.change(composedBreadcrumbs.at(-1)!.text as string); + + appParams.setBreadcrumbs(composedBreadcrumbs); + }, [appParams, breadcrumbs, chrome, share]); }; export const getBreadcrumbValue = (dataStream: string, integration?: Integration) => {