Observability landing page title (#72088)

* updating window title based on breadcrumbs

* updating window title based on breadcrumbs

* updating window title based on breadcrumbs
This commit is contained in:
Cauê Marcondes 2020-07-17 15:11:41 +01:00 committed by GitHub
parent 5160c7ee45
commit f9baaa267d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 13 deletions

View file

@ -3,18 +3,31 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { i18n } from '@kbn/i18n';
import { createHashHistory } from 'history';
import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Route, Router, Switch } from 'react-router-dom';
import { i18n } from '@kbn/i18n';
import { RedirectAppLinks } from '../../../../../src/plugins/kibana_react/public';
import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
import { RedirectAppLinks } from '../../../../../src/plugins/kibana_react/public';
import { EuiThemeProvider } from '../../../../legacy/common/eui_styled_components';
import { PluginContext } from '../context/plugin_context';
import { useRouteParams } from '../hooks/use_route_params';
import { routes } from '../routes';
import { usePluginContext } from '../hooks/use_plugin_context';
import { useRouteParams } from '../hooks/use_route_params';
import { Breadcrumbs, routes } from '../routes';
const observabilityLabelBreadcrumb = {
text: i18n.translate('xpack.observability.observability.breadcrumb.', {
defaultMessage: 'Observability',
}),
};
function getTitleFromBreadCrumbs(breadcrumbs: Breadcrumbs) {
return breadcrumbs
.map(({ text }) => text)
.reverse()
.join(' | ');
}
const App = () => {
return (
@ -25,16 +38,12 @@ const App = () => {
const route = routes[path];
const Wrapper = () => {
const { core } = usePluginContext();
const breadcrumb = [observabilityLabelBreadcrumb, ...route.breadcrumb];
useEffect(() => {
core.chrome.setBreadcrumbs([
{
text: i18n.translate('xpack.observability.observability.breadcrumb.', {
defaultMessage: 'Observability',
}),
},
...route.breadcrumb,
]);
}, [core]);
core.chrome.setBreadcrumbs(breadcrumb);
document.title = getTitleFromBreadCrumbs(breadcrumb);
}, [core, breadcrumb]);
const { query, path: pathParams } = useRouteParams(route.params);
return route.handler({ query, path: pathParams });

View file

@ -17,6 +17,8 @@ type DecodeParams<TParams extends Params | undefined> = {
[key in keyof TParams]: TParams[key] extends t.Any ? t.TypeOf<TParams[key]> : never;
};
export type Breadcrumbs = Array<{ text: string }>;
export interface Params {
query?: t.HasProps;
path?: t.HasProps;