[Discover] Add support for syncing the current pinned filters in surrounding documents to the Discover breadcrumb link

src/plugins/discover/public/application/context/context_app_route.tsx

@@ -5,17 +5,15 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useParams } from 'react-router-dom';
-import { i18n } from '@kbn/i18n';
 import { EuiEmptyPrompt } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { ContextApp } from './context_app';
-import { getRootBreadcrumbs } from '../../utils/breadcrumbs';
 import { LoadingIndicator } from '../../components/common/loading_indicator';
 import { useIndexPattern } from '../../hooks/use_index_pattern';
-import { useMainRouteBreadcrumb } from '../../hooks/use_navigation_props';
 import { useDiscoverServices } from '../../hooks/use_discover_services';
+import { useContextMainRouteBreadcrumb } from './hooks/use_context_main_route_breadcrumb';
 
 export interface ContextUrlParams {
   indexPatternId: string;
@@ -24,26 +22,13 @@ export interface ContextUrlParams {
 
 export function ContextAppRoute() {
   const services = useDiscoverServices();
-  const { chrome } = services;
-
   const { indexPatternId, id } = useParams<ContextUrlParams>();
   const anchorId = decodeURIComponent(id);
   const dataViewId = decodeURIComponent(indexPatternId);
-  const breadcrumb = useMainRouteBreadcrumb();
-
-  useEffect(() => {
-    chrome.setBreadcrumbs([
-      ...getRootBreadcrumbs(breadcrumb),
-      {
-        text: i18n.translate('discover.context.breadcrumb', {
-          defaultMessage: 'Surrounding documents',
-        }),
-      },
-    ]);
-  }, [chrome, breadcrumb]);
-
   const { indexPattern, error } = useIndexPattern(services.indexPatterns, dataViewId);
 
+  useContextMainRouteBreadcrumb(services);
+
   if (error) {
     return (
       <EuiEmptyPrompt

src/plugins/discover/public/application/context/hooks/use_context_main_route_breadcrumb.ts

@@ -0,0 +1,66 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { getStateFromKbnUrl, setStateToKbnUrl } from '@kbn/kibana-utils-plugin/public';
+import { useState, useEffect } from 'react';
+import { DiscoverServices } from '../../../build_services';
+import { useMainRouteBreadcrumb } from '../../../hooks/use_navigation_props';
+import { getRootBreadcrumbs } from '../../../utils/breadcrumbs';
+import { GlobalState } from '../services/context_state';
+
+const GLOBAL_STATE_URL_KEY = '_g';
+
+export const useContextMainRouteBreadcrumb = ({ chrome, filterManager }: DiscoverServices) => {
+  // Ensure the Discover breadcrumb link includes the current pinned filters
+  const [globalFilters, setGlobalFilters] = useState(filterManager.getGlobalFilters());
+  const [breadcrumb, setBreadcrumb] = useState(useMainRouteBreadcrumb());
+
+  useEffect(() => {
+    const filterSubscription = filterManager.getUpdates$().subscribe(() => {
+      setGlobalFilters(filterManager.getGlobalFilters());
+    });
+
+    return () => filterSubscription.unsubscribe();
+  }, [filterManager]);
+
+  useEffect(() => {
+    setBreadcrumb((currentBreadcrumb) => {
+      if (!currentBreadcrumb) {
+        return currentBreadcrumb;
+      }
+
+      const breadcrumbGlobalState = getStateFromKbnUrl<GlobalState>(
+        GLOBAL_STATE_URL_KEY,
+        currentBreadcrumb
+      );
+
+      if (breadcrumbGlobalState) {
+        breadcrumbGlobalState.filters = globalFilters;
+      }
+
+      return setStateToKbnUrl(
+        GLOBAL_STATE_URL_KEY,
+        breadcrumbGlobalState,
+        undefined,
+        currentBreadcrumb
+      );
+    });
+  }, [globalFilters]);
+
+  useEffect(() => {
+    chrome.setBreadcrumbs([
+      ...getRootBreadcrumbs(breadcrumb),
+      {
+        text: i18n.translate('discover.context.breadcrumb', {
+          defaultMessage: 'Surrounding documents',
+        }),
+      },
+    ]);
+  }, [chrome, breadcrumb]);
+};