[App Search] Add a Result Component (#85046)

Author: JasonStoltz

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

@@ -14,7 +14,7 @@ import { EuiPageContent, EuiBasicTable } from '@elastic/eui';
 
 import { Loading } from '../../../shared/loading';
 import { DocumentDetail } from '.';
-import { ResultFieldValue } from '../result_field_value';
+import { ResultFieldValue } from '../result';
 
 describe('DocumentDetail', () => {
   const values = {

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

@@ -23,7 +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 { ResultFieldValue } from '../result_field_value';
+import { ResultFieldValue } from '../result';
 
 import { DocumentDetailLogic } from './document_detail_logic';
 import { FieldDetails } from './types';

x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_detail_logic.test.ts

@@ -28,6 +28,7 @@ jest.mock('../../../shared/flash_messages', () => ({
 import { setQueuedSuccessMessage, flashAPIErrors } from '../../../shared/flash_messages';
 
 import { DocumentDetailLogic } from './document_detail_logic';
+import { InternalSchemaTypes } from '../../../shared/types';
 
 describe('DocumentDetailLogic', () => {
   const DEFAULT_VALUES = {
@@ -61,7 +62,7 @@ describe('DocumentDetailLogic', () => {
   describe('actions', () => {
     describe('setFields', () => {
       it('should set fields to the provided value and dataLoading to false', () => {
-        const fields = [{ name: 'foo', value: ['foo'], type: 'string' }];
+        const fields = [{ name: 'foo', value: ['foo'], type: 'string' as InternalSchemaTypes }];
 
         mount({
           dataLoading: true,

x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/search_experience.scss

@@ -2,6 +2,10 @@
   .sui-results-container {
     flex-grow: 1;
     padding: 0;
+
+    > li + li {
+      margin-top: $euiSize;
+    }
   }
 
   .documentsSearchExperience__sidebar {

x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/search_experience_content.test.tsx

@@ -43,6 +43,15 @@ describe('SearchExperienceContent', () => {
   it('passes engineName to the result view', () => {
     const props = {
       result: {
+        id: {
+          raw: '1',
+        },
+        _meta: {
+          id: '1',
+          scopedId: '1',
+          score: 100,
+          engine: 'my-engine',
+        },
         foo: {
           raw: 'bar',
         },
@@ -51,7 +60,7 @@ describe('SearchExperienceContent', () => {
 
     const wrapper = shallow(<SearchExperienceContent />);
     const resultView: any = wrapper.find(Results).prop('resultView');
-    expect(resultView(props)).toEqual(<ResultView engineName="engine1" {...props} />);
+    expect(resultView(props)).toEqual(<ResultView {...props} />);
   });
 
   it('renders pagination', () => {

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

@@ -14,24 +14,18 @@ import { useValues } from 'kea';
 
 import { ResultView } from './views';
 import { Pagination } from './pagination';
+import { Props as ResultViewProps } from './views/result_view';
 import { useSearchContextState } from './hooks';
 import { DocumentCreationButton } from '../document_creation_button';
 import { AppLogic } from '../../../app_logic';
 import { EngineLogic } from '../../engine';
 import { DOCS_PREFIX } from '../../../routes';
 
-// TODO This is temporary until we create real Result type
-interface Result {
-  [key: string]: {
-    raw: string | string[] | number | number[] | undefined;
-  };
-}
-
 export const SearchExperienceContent: React.FC = () => {
   const { resultSearchTerm, totalResults, wasSearched } = useSearchContextState();
 
   const { myRole } = useValues(AppLogic);
-  const { engineName, isMetaEngine } = useValues(EngineLogic);
+  const { isMetaEngine } = useValues(EngineLogic);
 
   if (!wasSearched) return null;
 
@@ -49,8 +43,8 @@ export const SearchExperienceContent: React.FC = () => {
         <EuiSpacer />
         <Results
           titleField="id"
-          resultView={(props: { result: Result }) => {
-            return <ResultView {...props} engineName={engineName} />;
+          resultView={(props: ResultViewProps) => {
+            return <ResultView {...props} />;
           }}
         />
         <EuiSpacer />

x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.test.tsx

@@ -9,16 +9,26 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { ResultView } from '.';
+import { Result } from '../../../result/result';
 
 describe('ResultView', () => {
   const result = {
     id: {
       raw: '1',
     },
+    title: {
+      raw: 'A title',
+    },
+    _meta: {
+      id: '1',
+      scopedId: '1',
+      score: 100,
+      engine: 'my-engine',
+    },
   };
 
   it('renders', () => {
-    const wrapper = shallow(<ResultView result={result} engineName="engine1" />);
-    expect(wrapper.find('div').length).toBe(1);
+    const wrapper = shallow(<ResultView result={result} />);
+    expect(wrapper.find(Result).exists()).toBe(true);
   });
 });

x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/result_view.tsx

@@ -5,38 +5,18 @@
  */
 
 import React from 'react';
-import { EuiPanel, EuiSpacer } from '@elastic/eui';
 
-import { EuiLinkTo } from '../../../../../shared/react_router_helpers';
+import { Result as ResultType } from '../../../result/types';
+import { Result } from '../../../result/result';
 
-// TODO replace this with a real result type when we implement a more sophisticated
-// ResultView
-interface Result {
-  [key: string]: {
-    raw: string | string[] | number | number[] | undefined;
-  };
+export interface Props {
+  result: ResultType;
 }
 
-interface Props {
-  engineName: string;
-  result: Result;
-}
-
-export const ResultView: React.FC<Props> = ({ engineName, result }) => {
-  // TODO Replace this entire component when we migrate StuiResult
+export const ResultView: React.FC<Props> = ({ result }) => {
   return (
     <li>
-      <EuiPanel>
-        <EuiLinkTo to={`/engines/${engineName}/documents/${result.id.raw}`}>
-          <strong>{result.id.raw}</strong>
-        </EuiLinkTo>
-        {Object.entries(result).map(([key, value]) => (
-          <div key={key} style={{ wordBreak: 'break-all' }}>
-            {key}: {value.raw}
-          </div>
-        ))}
-      </EuiPanel>
-      <EuiSpacer />
+      <Result result={result} />
     </li>
   );
 };

x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/types.ts

@@ -4,8 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { InternalSchemaTypes } from '../../../shared/types';
+
 export interface FieldDetails {
   name: string;
   value: string | string[];
-  type: string;
+  type: InternalSchemaTypes;
 }

x-pack/plugins/enterprise_search/public/applications/app_search/components/library/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { Library } from './library';