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

@@ -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) {

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<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;