[App Search] DRY helper for encoding/decoding routes that can have special characters in params

x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_tables/shared_columns.tsx

@@ -56,7 +56,7 @@ export const ACTIONS_COLUMN = {
         { defaultMessage: 'View query analytics' }
       ),
       type: 'icon',
-      icon: 'popout',
+      icon: 'eye',
       color: 'primary',
       onClick: (item: Query | RecentQuery) => {
         const { navigateToUrl } = KibanaLogic.values;

x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/views/query_detail.tsx

@@ -5,14 +5,14 @@
  */
 
 import React from 'react';
-import { useParams } from 'react-router-dom';
 import { useValues } from 'kea';
 
 import { i18n } from '@kbn/i18n';
 import { EuiSpacer } from '@elastic/eui';
 
 import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
 import { BreadcrumbTrail } from '../../../../shared/kibana_chrome/generate_breadcrumbs';
+import { useDecodedParams } from '../../../utils/encode_path_params';
 
 import { AnalyticsLayout } from '../analytics_layout';
 import { AnalyticsSection, QueryClicksTable } from '../components';
@@ -27,14 +27,15 @@ interface Props {
   breadcrumbs: BreadcrumbTrail;
 }
 export const QueryDetail: React.FC<Props> = ({ breadcrumbs }) => {
-  const { query } = useParams() as { query: string };
+  const { query } = useDecodedParams();
+  const queryTitle = query === '""' ? query : `"${query}"`;
 
   const { totalQueriesForQuery, queriesPerDayForQuery, startDate, topClicksForQuery } = useValues(
     AnalyticsLogic
   );
 
   return (
-    <AnalyticsLayout isQueryView title={`"${query}"`}>
+    <AnalyticsLayout isQueryView title={queryTitle}>
       <SetPageChrome trail={[...breadcrumbs, QUERY_DETAIL_TITLE, query]} />
 
       <AnalyticsCards

x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_detail.tsx

@@ -23,6 +23,7 @@ import { i18n } from '@kbn/i18n';
 import { Loading } from '../../../shared/loading';
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
 import { FlashMessages } from '../../../shared/flash_messages';
+import { useDecodedParams } from '../../utils/encode_path_params';
 import { ResultFieldValue } from '../result';
 
 import { DocumentDetailLogic } from './document_detail_logic';
@@ -43,6 +44,7 @@ export const DocumentDetail: React.FC<Props> = ({ engineBreadcrumb }) => {
   const { deleteDocument, getDocumentDetails, setFields } = useActions(DocumentDetailLogic);
 
   const { documentId } = useParams() as { documentId: string };
+  const { documentId: documentTitle } = useDecodedParams();
 
   useEffect(() => {
     getDocumentDetails(documentId);
@@ -74,13 +76,11 @@ export const DocumentDetail: React.FC<Props> = ({ engineBreadcrumb }) => {
 
   return (
     <>
-      <SetPageChrome
-        trail={[...engineBreadcrumb, DOCUMENTS_TITLE, decodeURIComponent(documentId)]}
-      />
+      <SetPageChrome trail={[...engineBreadcrumb, DOCUMENTS_TITLE, documentTitle]} />
       <EuiPageHeader>
         <EuiPageHeaderSection>
           <EuiTitle size="l">
-            <h1>{DOCUMENT_DETAIL_TITLE(decodeURIComponent(documentId))}</h1>
+            <h1>{DOCUMENT_DETAIL_TITLE(documentTitle)}</h1>
           </EuiTitle>
         </EuiPageHeaderSection>
         <EuiPageHeaderSection>

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/utils.ts

@@ -6,12 +6,14 @@
 
 import { generatePath } from 'react-router-dom';
 
+import { encodePathParams } from '../../utils/encode_path_params';
+
 import { EngineLogic } from './';
 
 /**
  * Generate a path with engineName automatically filled from EngineLogic state
  */
 export const generateEnginePath = (path: string, pathParams: object = {}) => {
   const { engineName } = EngineLogic.values;
-  return generatePath(path, { engineName, ...pathParams });
+  return generatePath(path, encodePathParams({ engineName, ...pathParams }));
 };

x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx

@@ -14,6 +14,7 @@ import { EuiPanel, EuiIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { ReactRouterHelper } from '../../../shared/react_router_helpers/eui_components';
+import { encodePathParams } from '../../utils/encode_path_params';
 import { ENGINE_DOCUMENT_DETAIL_PATH } from '../../routes';
 
 import { Schema } from '../../../shared/types';
@@ -52,10 +53,13 @@ export const Result: React.FC<Props> = ({
     if (schemaForTypeHighlights) return schemaForTypeHighlights[fieldName];
   };
 
-  const documentLink = generatePath(ENGINE_DOCUMENT_DETAIL_PATH, {
-    engineName: resultMeta.engine,
-    documentId: resultMeta.id,
-  });
+  const documentLink = generatePath(
+    ENGINE_DOCUMENT_DETAIL_PATH,
+    encodePathParams({
+      engineName: resultMeta.engine,
+      documentId: resultMeta.id,
+    })
+  );
   const conditionallyLinkedArticle = (children: React.ReactNode) => {
     return shouldLinkToDetailPage ? (
       <ReactRouterHelper to={documentLink}>
@@ -135,7 +139,7 @@ export const Result: React.FC<Props> = ({
                 { defaultMessage: 'Visit document details' }
               )}
             >
-              <EuiIcon type="popout" />
+              <EuiIcon type="eye" />
             </a>
           </ReactRouterHelper>
         )}

x-pack/plugins/enterprise_search/public/applications/app_search/utils/encode_path_params/index.test.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import '../../../__mocks__/react_router_history.mock';
+import { useParams } from 'react-router-dom';
+
+import { encodePathParams, useDecodedParams } from './';
+
+describe('encodePathParams', () => {
+  it('encodeURIComponent()s all object values', () => {
+    const params = {
+      someValue: 'hello world???',
+      anotherValue: 'test!@#$%^&*[]/|;:"<>~`',
+    };
+    expect(encodePathParams(params)).toEqual({
+      someValue: 'hello%20world%3F%3F%3F',
+      anotherValue: 'test!%40%23%24%25%5E%26*%5B%5D%2F%7C%3B%3A%22%3C%3E~%60',
+    });
+  });
+});
+
+describe('useDecodedParams', () => {
+  it('decodeURIComponent()s all object values from useParams()', () => {
+    (useParams as jest.Mock).mockReturnValue({
+      someValue: 'hello%20world%3F%3F%3F',
+      anotherValue: 'test!%40%23%24%25%5E%26*%5B%5D%2F%7C%3B%3A%22%3C%3E~%60',
+    });
+    expect(useDecodedParams()).toEqual({
+      someValue: 'hello world???',
+      anotherValue: 'test!@#$%^&*[]/|;:"<>~`',
+    });
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/utils/encode_path_params/index.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useParams } from 'react-router-dom';
+
+export const encodePathParams = (pathParams: Record<string, string | number>) => {
+  const encodedParams: Record<string, string> = {};
+
+  Object.entries(pathParams).map(([key, value]) => {
+    encodedParams[key] = encodeURIComponent(value);
+  });
+
+  return encodedParams;
+};
+
+export const useDecodedParams = () => {
+  const decodedParams: Record<string, string> = {};
+
+  const params = useParams();
+  Object.entries(params).map(([key, value]) => {
+    decodedParams[key] = decodeURIComponent(value as string);
+  });
+
+  return decodedParams;
+};