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

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';

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

@@ -0,0 +1,178 @@
+/*
+ * 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 {
+  EuiSpacer,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiTitle,
+  EuiPageContentBody,
+  EuiPageContent,
+} from '@elastic/eui';
+import React from 'react';
+
+import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+import { Result } from '../result/result';
+
+export const Library: React.FC = () => {
+  const props = {
+    result: {
+      id: {
+        raw: '1',
+      },
+      _meta: {
+        id: '1',
+        scopedId: '1',
+        score: 100,
+        engine: 'my-engine',
+      },
+      title: {
+        raw: 'A title',
+      },
+      description: {
+        raw: 'A description',
+      },
+      states: {
+        raw: ['Pennsylvania', 'Ohio'],
+      },
+      visitors: {
+        raw: 1000,
+      },
+      size: {
+        raw: 200,
+      },
+      length: {
+        raw: 100,
+      },
+    },
+  };
+
+  return (
+    <>
+      <SetPageChrome trail={['Library']} />
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l">
+            <h1>Library</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <EuiPageContent>
+        <EuiPageContentBody>
+          <EuiTitle size="m">
+            <h2>Result</h2>
+          </EuiTitle>
+          <EuiSpacer />
+
+          <EuiTitle size="s">
+            <h3>5 or more fields</h3>
+          </EuiTitle>
+          <EuiSpacer />
+          <Result {...props} />
+          <EuiSpacer />
+
+          <EuiTitle size="s">
+            <h3>5 or less fields</h3>
+          </EuiTitle>
+          <EuiSpacer />
+          <Result
+            {...{
+              result: {
+                id: props.result.id,
+                _meta: props.result._meta,
+                title: props.result.title,
+                description: props.result.description,
+              },
+            }}
+          />
+          <EuiSpacer />
+
+          <EuiTitle size="s">
+            <h3>With just an id</h3>
+          </EuiTitle>
+          <EuiSpacer />
+          <Result
+            {...{
+              result: {
+                ...props.result,
+                _meta: {
+                  id: '1',
+                  scopedId: '1',
+                  score: 100,
+                  engine: 'my-engine',
+                },
+              },
+            }}
+          />
+          <EuiSpacer />
+
+          <EuiTitle size="s">
+            <h3>With an id and a score</h3>
+          </EuiTitle>
+          <EuiSpacer />
+          <Result
+            {...{
+              showScore: true,
+              result: {
+                ...props.result,
+                _meta: {
+                  id: '1',
+                  scopedId: '1',
+                  score: 100,
+                  engine: 'my-engine',
+                },
+              },
+            }}
+          />
+          <EuiSpacer />
+
+          <EuiTitle size="s">
+            <h3>With an id and a score and an engine</h3>
+          </EuiTitle>
+          <EuiSpacer />
+          <Result
+            {...{
+              showScore: true,
+              result: {
+                ...props.result,
+                _meta: {
+                  id: '1',
+                  scopedId: '2',
+                  score: 100,
+                  engine: 'my-engine',
+                },
+              },
+            }}
+          />
+          <EuiSpacer />
+
+          <EuiTitle size="s">
+            <h3>With a long id, a long engine name, a long field key, and a long value</h3>
+          </EuiTitle>
+          <EuiSpacer />
+          <Result
+            {...{
+              result: {
+                ...props.result,
+                'this-description-is-a-really-really-really-really-really-really-really-really-really-really-really-really-really-really-really-really-really-really-really-really-really-really-really-really-long-key': {
+                  raw:
+                    'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?',
+                },
+                _meta: {
+                  id: 'my-id-is-a-really-long-id-yes-it-is',
+                  scopedId: '2',
+                  score: 100,
+                  engine: 'my-engine-is-a-really-long-engin-name-yes-it-is',
+                },
+              },
+            }}
+          />
+          <EuiSpacer />
+        </EuiPageContentBody>
+      </EuiPageContent>
+    </>
+  );
+};