[8.x] [Dataset Quality] Fix project view breadcrumbs (#196281) (#196484)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Dataset Quality] Fix project view breadcrumbs
(#196281)](https://github.com/elastic/kibana/pull/196281)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Marco Antonio
Ghiani","email":"marcoantonio.ghiani01@gmail.com"},"sourceCommit":{"committedDate":"2024-10-16T07:05:49Z","message":"[Dataset
Quality] Fix project view breadcrumbs (#196281)\n\n## 📓
Summary\r\n\r\nCloses #195734 \r\n\r\nThese changes fix the project
navigation breadcrumbs by making the\r\nresult consistent between the
different navigation modes.\r\n\r\nCo-authored-by: Marco Antonio Ghiani
<marcoantonio.ghiani@elastic.co>","sha":"e47099924b2d993387bf33ba59210cad22d394f0","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","Team:obs-ux-logs"],"title":"[Dataset
Quality] Fix project view
breadcrumbs","number":196281,"url":"https://github.com/elastic/kibana/pull/196281","mergeCommit":{"message":"[Dataset
Quality] Fix project view breadcrumbs (#196281)\n\n## 📓
Summary\r\n\r\nCloses #195734 \r\n\r\nThese changes fix the project
navigation breadcrumbs by making the\r\nresult consistent between the
different navigation modes.\r\n\r\nCo-authored-by: Marco Antonio Ghiani
<marcoantonio.ghiani@elastic.co>","sha":"e47099924b2d993387bf33ba59210cad22d394f0"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196281","number":196281,"mergeCommit":{"message":"[Dataset
Quality] Fix project view breadcrumbs (#196281)\n\n## 📓
Summary\r\n\r\nCloses #195734 \r\n\r\nThese changes fix the project
navigation breadcrumbs by making the\r\nresult consistent between the
different navigation modes.\r\n\r\nCo-authored-by: Marco Antonio Ghiani
<marcoantonio.ghiani@elastic.co>","sha":"e47099924b2d993387bf33ba59210cad22d394f0"}}]}]
BACKPORT-->

Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani01@gmail.com>

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 (
     <DatasetQualityContextProvider

x-pack/plugins/data_quality/public/routes/dataset_quality_details/context.tsx

@@ -9,16 +9,14 @@ import { IToasts } from '@kbn/core-notifications-browser';
 import { DatasetQualityPluginStart } from '@kbn/dataset-quality-plugin/public';
 import { DatasetQualityDetailsController } from '@kbn/dataset-quality-plugin/public/controller/dataset_quality_details';
 import { IKbnUrlStateStorage } from '@kbn/kibana-utils-plugin/public';
-import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import React, { createContext, useContext, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import type { ChromeBreadcrumb } from '@kbn/core-chrome-browser';
-import { useKibanaContextForPlugin } from '../../utils/use_kibana';
 import { getBreadcrumbValue, useBreadcrumbs } from '../../utils/use_breadcrumbs';
 import {
   getDatasetQualityDetailsStateFromUrl,
   updateUrlFromDatasetQualityDetailsState,
 } from './url_state_storage_service';
-import { PLUGIN_ID, PLUGIN_NAME } from '../../../common';
 
 const DatasetQualityDetailsContext = createContext<{
   controller?: DatasetQualityDetailsController;
@@ -39,21 +37,10 @@ export function DatasetQualityDetailsContextProvider({
 }: ContextProps) {
   const [controller, setController] = useState<DatasetQualityDetailsController>();
   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<ChromeBreadcrumb[]>([rootBreadCrumb]);
+
+  const [breadcrumbs, setBreadcrumbs] = useState<ChromeBreadcrumb[]>([]);
+
+  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 (
     <DatasetQualityDetailsContext.Provider value={{ controller }}>

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;
-
-  const docTitleValue = isMultiple ? breadcrumbs[breadcrumbs.length - 1].text : breadcrumbs[0].text;
-
-  docTitle.change(docTitleValue as string);
+export const useBreadcrumbs = (breadcrumbs: ChromeBreadcrumb[] = []) => {
+  const {
+    services: { appParams, chrome, share },
+  } = useKibanaContextForPlugin();
 
   useEffect(() => {
-    params.setBreadcrumbs(breadcrumbs);
-  }, [breadcrumbs, params]);
+    const locator = share.url.locators.get<DataQualityLocatorParams>(DATA_QUALITY_LOCATOR_ID);
+
+    const composedBreadcrumbs: ChromeBreadcrumb[] = [
+      {
+        text: PLUGIN_NAME,
+        deepLinkId: 'management:data_quality',
+        onClick: () => locator?.navigate({}),
+      },
+      ...breadcrumbs,
+    ];
+
+    chrome.docTitle.change(composedBreadcrumbs.at(-1)!.text as string);
+
+    appParams.setBreadcrumbs(composedBreadcrumbs);
+  }, [appParams, breadcrumbs, chrome, share]);
 };
 
 export const getBreadcrumbValue = (dataStream: string, integration?: Integration) => {