[Dataset Quality] Fix project view breadcrumbs (#196281)

## 📓 Summary Closes #195734 These changes fix the project navigation breadcrumbs by making the result consistent between the different navigation modes. Co-authored-by: Marco Antonio Ghiani <[email protected]>
elastic · Oct 16, 2024 · e470999 · e470999
1 parent 8787fd8
commit e470999
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 39 deletions.
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
@@ -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

diff --git a/x-pack/plugins/data_quality/public/routes/dataset_quality_details/context.tsx b/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 }}>

diff --git 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<DataQualityLocatorParams>(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) => {