Explore: Fix Browser title not updated on Navigation to Explore (#34651)

- Update document.title on Explore page
- Add unit test and snapshot for Wrapper component
This commit is contained in:
Maria Alexandra 2021-05-26 18:44:16 +02:00 committed by GitHub
parent 6f652e39cb
commit cebe67ab01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 3126 additions and 12 deletions

View File

@ -253,6 +253,12 @@ describe('Wrapper', () => {
await screen.findByText(`elastic Editor input: error`);
await screen.findByText(`loki Editor input: { label="value"}`);
});
it('changes the document title of the explore page', async () => {
setup({ datasources: [] });
await waitFor(() => expect(document.querySelector('head')).toMatchSnapshot());
await waitFor(() => expect(document.title).toEqual('Explore - Grafana'));
});
});
type DatasourceSetup = { settings: DataSourceInstanceSettings; api: DataSourceApi };
@ -299,6 +305,16 @@ function setup(options?: SetupOptions): { datasources: { [name: string]: DataSou
timeZone: 'utc',
};
store.getState().navIndex = {
explore: {
id: 'explore',
text: 'Explore',
subTitle: 'Explore your data',
icon: 'compass',
url: '/explore',
},
};
locationService.push({ pathname: '/explore' });
if (options?.query) {

View File

@ -1,18 +1,43 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import React, { PureComponent } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { ExploreId, ExploreQueryParams } from 'app/types/explore';
import { ErrorBoundaryAlert } from '@grafana/ui';
import { lastSavedUrl, resetExploreAction, richHistoryUpdatedAction } from './state/main';
import { getRichHistory } from '../../core/utils/richHistory';
import { ExplorePaneContainer } from './ExplorePaneContainer';
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
import { NavModel } from '@grafana/data';
import { Branding } from '../../core/components/Branding/Branding';
interface WrapperProps extends GrafanaRouteComponentProps<{}, ExploreQueryParams> {
resetExploreAction: typeof resetExploreAction;
richHistoryUpdatedAction: typeof richHistoryUpdatedAction;
}
import { getNavModel } from '../../core/selectors/navModel';
import { StoreState } from 'app/types';
interface RouteProps extends GrafanaRouteComponentProps<{}, ExploreQueryParams> {}
interface OwnProps {}
const mapStateToProps = (state: StoreState) => {
return {
navModel: getNavModel(state.navIndex, 'explore'),
};
};
const mapDispatchToProps = {
resetExploreAction,
richHistoryUpdatedAction,
};
const connector = connect(mapStateToProps, mapDispatchToProps);
type Props = OwnProps & RouteProps & ConnectedProps<typeof connector>;
class WrapperUnconnected extends PureComponent<Props> {
updatePageDocumentTitle(navModel: NavModel) {
if (navModel) {
document.title = `${navModel.main.text} - ${Branding.AppTitle}`;
} else {
document.title = Branding.AppTitle;
}
}
export class Wrapper extends Component<WrapperProps> {
componentWillUnmount() {
this.props.resetExploreAction({});
}
@ -23,6 +48,7 @@ export class Wrapper extends Component<WrapperProps> {
const richHistory = getRichHistory();
this.props.richHistoryUpdatedAction({ richHistory });
this.updatePageDocumentTitle(this.props.navModel);
}
render() {
@ -46,9 +72,6 @@ export class Wrapper extends Component<WrapperProps> {
}
}
const mapDispatchToProps = {
resetExploreAction,
richHistoryUpdatedAction,
};
const Wrapper = connector(WrapperUnconnected);
export default connect(null, mapDispatchToProps)(Wrapper);
export default Wrapper;

File diff suppressed because it is too large Load Diff