Explore: Make Explore breadcrumb clickable (#85437)

* Explore: make Explore breadcrumb a link to an empty Explore page

* update tests

public/app/features/explore/ExplorePage.tsx

@@ -46,7 +46,9 @@ export default function ExplorePage(props: GrafanaRouteComponentProps<{}, Explor
   useEffect(() => {
     //This is needed for breadcrumbs and topnav.
     //We should probably abstract this out at some point
-    chrome.update({ sectionNav: navModel });
+    chrome.update({
+      sectionNav: navModel,
+    });
   }, [chrome, navModel]);
 
   useKeyboardShortcuts();

public/app/features/explore/hooks/useExplorePageTitle.test.tsx

@@ -1,8 +1,11 @@
 import { renderHook, waitFor } from '@testing-library/react';
+import React from 'react';
 import { TestProvider } from 'test/helpers/TestProvider';
+import { getGrafanaContextMock } from 'test/mocks/getGrafanaContextMock';
 
 import { setDataSourceSrv } from '@grafana/runtime';
 import { DataSourceRef } from '@grafana/schema';
+import { AppChromeService } from 'app/core/components/AppChrome/AppChromeService';
 
 import { makeDatasourceSetup } from '../spec/helper/setup';
 
@@ -39,13 +42,27 @@ describe('useExplorePageTitle', () => {
       reload: jest.fn(),
     });
 
+    const chromeMock: AppChromeService = jest.mocked(new AppChromeService());
+    chromeMock.update = jest.fn();
+
     renderHook(() => useExplorePageTitle({ panes: JSON.stringify({ a: { datasource: 'loki-uid' } }) }), {
-      wrapper: TestProvider,
+      wrapper: ({ children }) => (
+        <TestProvider
+          grafanaContext={{
+            ...getGrafanaContextMock(),
+            chrome: chromeMock,
+          }}
+        >
+          {children}
+        </TestProvider>
+      ),
     });
 
     await waitFor(() => {
       expect(global.document.title).toEqual(expect.stringContaining('loki'));
       expect(global.document.title).toEqual(expect.not.stringContaining('elastic'));
+      // checks if the breadcrumb is updated with the datasource name
+      expect(chromeMock.update).toHaveBeenCalledWith({ pageNav: { text: 'loki' } });
     });
   });
 
@@ -79,18 +96,32 @@ describe('useExplorePageTitle', () => {
       reload: jest.fn(),
     });
 
+    const chromeMock: AppChromeService = jest.mocked(new AppChromeService());
+    chromeMock.update = jest.fn();
+
     renderHook(
       () =>
         useExplorePageTitle({
           panes: JSON.stringify({ a: { datasource: 'loki-uid' }, b: { datasource: 'elastic-uid' } }),
         }),
       {
-        wrapper: TestProvider,
+        wrapper: ({ children }) => (
+          <TestProvider
+            grafanaContext={{
+              ...getGrafanaContextMock(),
+              chrome: chromeMock,
+            }}
+          >
+            {children}
+          </TestProvider>
+        ),
       }
     );
 
     await waitFor(() => {
       expect(global.document.title).toEqual(expect.stringContaining('loki | elastic'));
+      // checks if the breadcrumb is updated with the datasource name
+      expect(chromeMock.update).toHaveBeenCalledWith({ pageNav: { text: 'loki | elastic' } });
     });
   });
 });

public/app/features/explore/hooks/useExplorePageTitle.ts

@@ -1,7 +1,7 @@
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 
-import { NavModel } from '@grafana/data';
 import { Branding } from 'app/core/components/Branding/Branding';
+import { useGrafana } from 'app/core/context/GrafanaContext';
 import { useNavModel } from 'app/core/hooks/useNavModel';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { ExploreQueryParams } from 'app/types';
@@ -9,9 +9,8 @@ import { ExploreQueryParams } from 'app/types';
 import { isFulfilled, hasKey } from './utils';
 
 export function useExplorePageTitle(params: ExploreQueryParams) {
-  const navModel = useRef<NavModel>();
-  navModel.current = useNavModel('explore');
-  const dsService = useRef(getDatasourceSrv());
+  const navModel = useNavModel('explore');
+  const { chrome } = useGrafana();
 
   useEffect(() => {
     if (!params.panes || typeof params.panes !== 'string') {
@@ -41,23 +40,26 @@ export function useExplorePageTitle(params: ExploreQueryParams) {
           return Promise.reject();
         }
 
-        return dsService.current.get(pane.datasource);
+        return getDatasourceSrv().get(pane.datasource);
       })
     )
       .then((results) => results.filter(isFulfilled).map((result) => result.value))
       .then((datasources) => {
-        if (!navModel.current) {
+        if (datasources.length === 0) {
+          global.document.title = `${navModel.main.text} - ${Branding.AppTitle}`;
+          chrome.update({
+            pageNav: undefined,
+          });
           return;
         }
 
-        const names = datasources.map((ds) => ds.name);
-
-        if (names.length === 0) {
-          global.document.title = `${navModel.current.main.text} - ${Branding.AppTitle}`;
-          return;
-        }
-
-        global.document.title = `${navModel.current.main.text} - ${names.join(' | ')} - ${Branding.AppTitle}`;
+        const namesString = datasources.map((ds) => ds.name).join(' | ');
+        chrome.update({
+          pageNav: {
+            text: namesString,
+          },
+        });
+        global.document.title = `${navModel.main.text} - ${namesString} - ${Branding.AppTitle}`;
       });
-  }, [params.panes]);
+  }, [params.panes, navModel.main.text, chrome]);
 }