[Discover] Fix context view for document ids containing special chara…

…cters (#122737)

* [Discover] fix encoded param for context

* [Discover] add functional test

* [Discover] add test file

* [Discover] change field name

Co-authored-by: Kibana Machine <[email protected]>
(cherry picked from commit 6956d9c)

# Conflicts:
#	src/plugins/discover/public/application/apps/context/context_app_route.tsx

src/plugins/discover/public/application/apps/context/context_app.tsx

@@ -152,7 +152,7 @@ export const ContextApp = ({ indexPattern, anchorId }: ContextAppProps) => {
           <EuiPage className={classNames({ dscDocsPage: !isLegacy })}>
             <EuiPageContent paddingSize="s" className="dscDocsContent">
               <EuiSpacer size="s" />
-              <EuiText>
+              <EuiText data-test-subj="contextDocumentSurroundingHeader">
                 <strong>
                   <FormattedMessage
                     id="discover.context.contextOfTitle"

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

@@ -33,6 +33,7 @@ export function ContextAppRoute(props: ContextAppProps) {
   const { chrome } = services;
 
   const { indexPatternId, id } = useParams<ContextUrlParams>();
+  const anchorId = decodeURIComponent(id);
 
   useEffect(() => {
     chrome.setBreadcrumbs([
@@ -73,5 +74,5 @@ export function ContextAppRoute(props: ContextAppProps) {
     return <LoadingIndicator />;
   }
 
-  return <ContextApp anchorId={id} indexPattern={indexPattern} />;
+  return <ContextApp anchorId={anchorId} indexPattern={indexPattern} />;
 }

test/functional/apps/discover/_context_encoded_url_param.ts

@@ -0,0 +1,55 @@
+/*
+ * 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 expect from '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const dataGrid = getService('dataGrid');
+  const kibanaServer = getService('kibanaServer');
+  const PageObjects = getPageObjects(['common', 'discover', 'timePicker', 'settings', 'header']);
+  const testSubjects = getService('testSubjects');
+  const es = getService('es');
+
+  describe('context encoded id param', () => {
+    before(async function () {
+      await PageObjects.common.navigateToApp('settings');
+      await es.transport.request({
+        path: '/includes-plus-symbol-doc-id/_doc/1+1=2',
+        method: 'PUT',
+        body: {
+          username: 'Dmitry',
+          '@timestamp': '2015-09-21T09:30:23',
+        },
+      });
+      await PageObjects.settings.createIndexPattern('includes-plus-symbol-doc-id');
+
+      await kibanaServer.uiSettings.update({ 'doc_table:legacy': false });
+      await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings();
+      await PageObjects.common.navigateToApp('discover');
+    });
+
+    it('should navigate to context page correctly', async () => {
+      await PageObjects.discover.selectIndexPattern('includes-plus-symbol-doc-id');
+      await PageObjects.header.waitUntilLoadingHasFinished();
+
+      // navigate to the context view
+      await dataGrid.clickRowToggle({ rowIndex: 0 });
+      const [, surroundingActionEl] = await dataGrid.getRowActions({
+        isAnchorRow: false,
+        rowIndex: 0,
+      });
+      await surroundingActionEl.click();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+
+      const headerElement = await testSubjects.find('contextDocumentSurroundingHeader');
+
+      expect(await headerElement.getVisibleText()).to.be('Documents surrounding #1+1=2');
+    });
+  });
+}

test/functional/apps/discover/index.ts

@@ -53,5 +53,6 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
     loadTestFile(require.resolve('./_date_nested'));
     loadTestFile(require.resolve('./_search_on_page_load'));
     loadTestFile(require.resolve('./_chart_hidden'));
+    loadTestFile(require.resolve('./_context_encoded_url_param'));
   });
 }