[App Search] Updates to results on the documents view (#86181) (#86558)

elastic · Dec 21, 2020 · 90b2e54 · 90b2e54
1 parent 8f5aa00
commit 90b2e54
Show file tree

Hide file tree

Showing 15 changed files with 235 additions and 50 deletions.
diff --git a/...ications/app_search/components/documents/search_experience/build_search_ui_config.test.ts b/...ications/app_search/components/documents/search_experience/build_search_ui_config.test.ts
@@ -0,0 +1,38 @@
+/*
+ * 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 { SchemaTypes } from '../../../../shared/types';
+
+import { buildSearchUIConfig } from './build_search_ui_config';
+
+describe('buildSearchUIConfig', () => {
+  it('builds a configuration object for Search UI', () => {
+    const connector = {};
+    const schema = {
+      foo: 'text' as SchemaTypes,
+      bar: 'number' as SchemaTypes,
+    };
+
+    const config = buildSearchUIConfig(connector, schema);
+    expect(config.apiConnector).toEqual(connector);
+    expect(config.searchQuery.result_fields).toEqual({
+      bar: {
+        raw: {},
+        snippet: {
+          fallback: true,
+          size: 300,
+        },
+      },
+      foo: {
+        raw: {},
+        snippet: {
+          fallback: true,
+          size: 300,
+        },
+      },
+    });
+  });
+});
diff --git a/.../applications/app_search/components/documents/search_experience/build_search_ui_config.ts b/.../applications/app_search/components/documents/search_experience/build_search_ui_config.ts
@@ -0,0 +1,34 @@
+/*
+ * 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 { Schema } from '../../../../shared/types';
+
+export const buildSearchUIConfig = (apiConnector: object, schema: Schema) => {
+  return {
+    alwaysSearchOnInitialLoad: true,
+    apiConnector,
+    trackUrlState: false,
+    initialState: {
+      sortDirection: 'desc',
+      sortField: 'id',
+    },
+    searchQuery: {
+      result_fields: Object.keys(schema || {}).reduce(
+        (acc: { [key: string]: object }, key: string) => {
+          acc[key] = {
+            snippet: {
+              size: 300,
+              fallback: true,
+            },
+            raw: {},
+          };
+          return acc;
+        },
+        {}
+      ),
+    },
+  };
+};
diff --git a/...blic/applications/app_search/components/documents/search_experience/search_experience.tsx b/...blic/applications/app_search/components/documents/search_experience/search_experience.tsx
@@ -20,6 +20,7 @@ import { externalUrl } from '../../../../shared/enterprise_search_url';
 
 import { SearchBoxView, SortingView } from './views';
 import { SearchExperienceContent } from './search_experience_content';
+import { buildSearchUIConfig } from './build_search_ui_config';
 
 const DEFAULT_SORT_OPTIONS = [
   {
@@ -52,15 +53,7 @@ export const SearchExperience: React.FC = () => {
     searchKey: engine.apiKey,
   });
 
-  const searchProviderConfig = {
-    alwaysSearchOnInitialLoad: true,
-    apiConnector: connector,
-    trackUrlState: false,
-    initialState: {
-      sortDirection: 'desc',
-      sortField: 'id',
-    },
-  };
+  const searchProviderConfig = buildSearchUIConfig(connector, engine.schema || {});
 
   return (
     <div className="documentsSearchExperience">

diff --git a/...ions/app_search/components/documents/search_experience/search_experience_content.test.tsx b/...ions/app_search/components/documents/search_experience/search_experience_content.test.tsx
@@ -15,6 +15,7 @@ import { Results } from '@elastic/react-search-ui';
 
 import { ResultView } from './views';
 import { Pagination } from './pagination';
+import { SchemaTypes } from '../../../../shared/types';
 import { SearchExperienceContent } from './search_experience_content';
 
 describe('SearchExperienceContent', () => {
@@ -27,6 +28,11 @@ describe('SearchExperienceContent', () => {
     engineName: 'engine1',
     isMetaEngine: false,
     myRole: { canManageEngineDocuments: true },
+    engine: {
+      schema: {
+        title: 'string' as SchemaTypes,
+      },
+    },
   };
 
   beforeEach(() => {
@@ -40,7 +46,7 @@ describe('SearchExperienceContent', () => {
     expect(wrapper.isEmptyRender()).toBe(false);
   });
 
-  it('passes engineName to the result view', () => {
+  it('passes engineName and schema to the result view', () => {
     const props = {
       result: {
         id: {
@@ -56,6 +62,9 @@ describe('SearchExperienceContent', () => {
           raw: 'bar',
         },
       },
+      schemaForTypeHighlights: {
+        title: 'string' as SchemaTypes,
+      },
     };
 
     const wrapper = shallow(<SearchExperienceContent />);

diff --git a/...lications/app_search/components/documents/search_experience/search_experience_content.tsx b/...lications/app_search/components/documents/search_experience/search_experience_content.tsx
@@ -25,7 +25,7 @@ export const SearchExperienceContent: React.FC = () => {
   const { resultSearchTerm, totalResults, wasSearched } = useSearchContextState();
 
   const { myRole } = useValues(AppLogic);
-  const { isMetaEngine } = useValues(EngineLogic);
+  const { isMetaEngine, engine } = useValues(EngineLogic);
 
   if (!wasSearched) return null;
 
@@ -44,7 +44,7 @@ export const SearchExperienceContent: React.FC = () => {
         <Results
           titleField="id"
           resultView={(props: ResultViewProps) => {
-            return <ResultView {...props} />;
+            return <ResultView {...props} schemaForTypeHighlights={engine.schema} />;
           }}
         />
         <EuiSpacer />

diff --git a/...applications/app_search/components/documents/search_experience/views/result_view.test.tsx b/...applications/app_search/components/documents/search_experience/views/result_view.test.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { ResultView } from '.';
+import { SchemaTypes } from '../../../../../shared/types';
 import { Result } from '../../../result/result';
 
 describe('ResultView', () => {
@@ -27,8 +28,16 @@ describe('ResultView', () => {
     },
   };
 
+  const schema = {
+    title: 'string' as SchemaTypes,
+  };
+
   it('renders', () => {
-    const wrapper = shallow(<ResultView result={result} />);
-    expect(wrapper.find(Result).exists()).toBe(true);
+    const wrapper = shallow(<ResultView result={result} schemaForTypeHighlights={schema} />);
+    expect(wrapper.find(Result).props()).toEqual({
+      result,
+      shouldLinkToDetailPage: true,
+      schemaForTypeHighlights: schema,
+    });
   });
 });
diff --git a/...blic/applications/app_search/components/documents/search_experience/views/result_view.tsx b/...blic/applications/app_search/components/documents/search_experience/views/result_view.tsx
@@ -7,16 +7,22 @@
 import React from 'react';
 
 import { Result as ResultType } from '../../../result/types';
+import { Schema } from '../../../../../shared/types';
 import { Result } from '../../../result/result';
 
 export interface Props {
   result: ResultType;
+  schemaForTypeHighlights?: Schema;
 }
 
-export const ResultView: React.FC<Props> = ({ result }) => {
+export const ResultView: React.FC<Props> = ({ result, schemaForTypeHighlights }) => {
   return (
     <li>
-      <Result result={result} />
+      <Result
+        result={result}
+        shouldLinkToDetailPage={true}
+        schemaForTypeHighlights={schemaForTypeHighlights}
+      />
     </li>
   );
 };
diff --git a/...k/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx b/...k/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
@@ -15,6 +15,7 @@ import {
 import React from 'react';
 
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+import { Schema } from '../../../shared/types';
 import { Result } from '../result/result';
 
 export const Library: React.FC = () => {
@@ -35,12 +36,18 @@ export const Library: React.FC = () => {
       description: {
         raw: 'A description',
       },
-      states: {
-        raw: ['Pennsylvania', 'Ohio'],
+      date_established: {
+        raw: '1968-10-02T05:00:00Z',
+      },
+      location: {
+        raw: '37.3,-113.05',
       },
       visitors: {
         raw: 1000,
       },
+      states: {
+        raw: ['Pennsylvania', 'Ohio'],
+      },
       size: {
         raw: 200,
       },
@@ -50,6 +57,17 @@ export const Library: React.FC = () => {
     },
   };
 
+  const schema: Schema = {
+    title: 'text',
+    description: 'text',
+    date_established: 'date',
+    location: 'geolocation',
+    states: 'text',
+    visitors: 'number',
+    size: 'number',
+    length: 'number',
+  };
+
   return (
     <>
       <SetPageChrome trail={['Library']} />
@@ -170,6 +188,21 @@ export const Library: React.FC = () => {
               },
             }}
           />
+
+          <EuiSpacer />
+          <EuiTitle size="s">
+            <h3>With a link</h3>
+          </EuiTitle>
+          <EuiSpacer />
+          <Result {...props} shouldLinkToDetailPage={true} />
+          <EuiSpacer />
+
+          <EuiSpacer />
+          <EuiTitle size="s">
+            <h3>With field value type highlights</h3>
+          </EuiTitle>
+          <EuiSpacer />
+          <Result {...props} schemaForTypeHighlights={schema} />
           <EuiSpacer />
         </EuiPageContentBody>
       </EuiPageContent>

diff --git a/...ck/plugins/enterprise_search/public/applications/app_search/components/result/result.scss b/...ck/plugins/enterprise_search/public/applications/app_search/components/result/result.scss
@@ -5,6 +5,7 @@
     width: 100%;
     padding: $euiSize;
     overflow: hidden;
+    color: $euiTextColor;
   }
 
   &__hiddenFieldsIndicator {

diff --git a/...lugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx b/...lugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx
@@ -11,6 +11,9 @@ import { EuiPanel } from '@elastic/eui';
 
 import { ResultField } from './result_field';
 import { ResultHeader } from './result_header';
+import { ReactRouterHelper } from '../../../shared/react_router_helpers/eui_components';
+import { SchemaTypes } from '../../../shared/types';
+
 import { Result } from './result';
 
 describe('Result', () => {
@@ -37,6 +40,12 @@ describe('Result', () => {
     },
   };
 
+  const schema = {
+    title: 'text' as SchemaTypes,
+    description: 'text' as SchemaTypes,
+    length: 'number' as SchemaTypes,
+  };
+
   it('renders', () => {
     const wrapper = shallow(<Result {...props} />);
     expect(wrapper.find(EuiPanel).exists()).toBe(true);
@@ -62,6 +71,33 @@ describe('Result', () => {
     });
   });
 
+  describe('document detail link', () => {
+    it('will render a link if shouldLinkToDetailPage is true', () => {
+      const wrapper = shallow(<Result {...props} shouldLinkToDetailPage={true} />);
+      expect(wrapper.find(ReactRouterHelper).prop('to')).toEqual('/engines/my-engine/documents/1');
+      expect(wrapper.find('article.appSearchResult__content').exists()).toBe(false);
+      expect(wrapper.find('a.appSearchResult__content').exists()).toBe(true);
+    });
+
+    it('will not render a link if shouldLinkToDetailPage is not set', () => {
+      const wrapper = shallow(<Result {...props} />);
+      expect(wrapper.find(ReactRouterHelper).exists()).toBe(false);
+      expect(wrapper.find('article.appSearchResult__content').exists()).toBe(true);
+      expect(wrapper.find('a.appSearchResult__content').exists()).toBe(false);
+    });
+  });
+
+  it('will render field details with type highlights if schemaForTypeHighlights has been provided', () => {
+    const wrapper = shallow(
+      <Result {...props} shouldLinkToDetailPage={true} schemaForTypeHighlights={schema} />
+    );
+    expect(wrapper.find(ResultField).map((rf) => rf.prop('type'))).toEqual([
+      'text',
+      'text',
+      'number',
+    ]);
+  });
+
   describe('when there are more than 5 fields', () => {
     const propsWithMoreFields = {
       result: {