From cebe67ab011ddb2c29690f00d8e1ebdf764bfae8 Mon Sep 17 00:00:00 2001 From: Maria Alexandra <239999+axelavargas@users.noreply.github.com> Date: Wed, 26 May 2021 18:44:16 +0200 Subject: [PATCH] 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 --- public/app/features/explore/Wrapper.test.tsx | 16 + public/app/features/explore/Wrapper.tsx | 47 +- .../__snapshots__/Wrapper.test.tsx.snap | 3075 +++++++++++++++++ 3 files changed, 3126 insertions(+), 12 deletions(-) create mode 100644 public/app/features/explore/__snapshots__/Wrapper.test.tsx.snap diff --git a/public/app/features/explore/Wrapper.test.tsx b/public/app/features/explore/Wrapper.test.tsx index 851fdd9d215..ebf3ff2d5fd 100644 --- a/public/app/features/explore/Wrapper.test.tsx +++ b/public/app/features/explore/Wrapper.test.tsx @@ -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) { diff --git a/public/app/features/explore/Wrapper.tsx b/public/app/features/explore/Wrapper.tsx index 946388a9af3..f76de76346b 100644 --- a/public/app/features/explore/Wrapper.tsx +++ b/public/app/features/explore/Wrapper.tsx @@ -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; +class WrapperUnconnected extends PureComponent { + updatePageDocumentTitle(navModel: NavModel) { + if (navModel) { + document.title = `${navModel.main.text} - ${Branding.AppTitle}`; + } else { + document.title = Branding.AppTitle; + } + } -export class Wrapper extends Component { componentWillUnmount() { this.props.resetExploreAction({}); } @@ -23,6 +48,7 @@ export class Wrapper extends Component { const richHistory = getRichHistory(); this.props.richHistoryUpdatedAction({ richHistory }); + this.updatePageDocumentTitle(this.props.navModel); } render() { @@ -46,9 +72,6 @@ export class Wrapper extends Component { } } -const mapDispatchToProps = { - resetExploreAction, - richHistoryUpdatedAction, -}; +const Wrapper = connector(WrapperUnconnected); -export default connect(null, mapDispatchToProps)(Wrapper); +export default Wrapper; diff --git a/public/app/features/explore/__snapshots__/Wrapper.test.tsx.snap b/public/app/features/explore/__snapshots__/Wrapper.test.tsx.snap new file mode 100644 index 00000000000..ed0a561d3cf --- /dev/null +++ b/public/app/features/explore/__snapshots__/Wrapper.test.tsx.snap @@ -0,0 +1,3075 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Wrapper changes the document title of the explore page 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`;