Skip to content

Commit

Permalink
[Dataset Quality] Fix project view breadcrumbs (#196281)
Browse files Browse the repository at this point in the history
## 📓 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 <marcoantonio.ghiani@elastic.co>
  • Loading branch information
tonyghiani and Marco Antonio Ghiani authored Oct 16, 2024
1 parent 8787fd8 commit e470999
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 39 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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() {
Expand Down Expand Up @@ -88,7 +75,7 @@ export function DatasetQualityDetailsContextProvider({
datasetQualityDetailsState: state,
});
const breadcrumbValue = getBreadcrumbValue(state.dataStream, state.integration);
setBreadcrumbs([rootBreadCrumb, { text: breadcrumbValue }]);
setBreadcrumbs([{ text: breadcrumbValue }]);
}
);

Expand All @@ -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 }}>
Expand Down
36 changes: 22 additions & 14 deletions x-pack/plugins/data_quality/public/utils/use_breadcrumbs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down

0 comments on commit e470999

Please sign in to comment.