[App Search] Add document position indicator to Result component (#11…

…2759)
elastic · Sep 28, 2021 · d2eb1b0 · d2eb1b0
1 parent 245b773
commit d2eb1b0
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 2 deletions.
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
@@ -237,6 +237,26 @@ export const Library: React.FC = () => {
           />
           <EuiSpacer />
 
+          <EuiTitle size="s">
+            <h3>With a document position</h3>
+          </EuiTitle>
+          <EuiSpacer />
+          <Result
+            {...{
+              ...props,
+              resultPosition: 3,
+              result: {
+                ...props.result,
+                _meta: {
+                  id: '1',
+                  score: 100,
+                  engine: 'my-engine',
+                },
+              },
+            }}
+          />
+          <EuiSpacer />
+
           <EuiTitle size="s">
             <h3>With an id and a score and an engine</h3>
           </EuiTitle>

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
@@ -12,9 +12,10 @@ import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
 
 import { shallow, ShallowWrapper } from 'enzyme';
 
-import { EuiPanel } from '@elastic/eui';
+import { EuiBadge, EuiPanel } from '@elastic/eui';
 
 import { SchemaType } from '../../../shared/schema/types';
+import { mountWithIntl } from '../../../test_helpers';
 
 import { Result } from './result';
 import { ResultField } from './result_field';
@@ -87,6 +88,12 @@ describe('Result', () => {
 
       expect(header.prop('documentLink')).toBe('/engines/my-engine/documents/1');
     });
+
+    it('contains the result position if one is passed', () => {
+      const wrapper = mountWithIntl(<Result {...props} resultPosition={4} />);
+      const header = wrapper.find(ResultHeader);
+      expect(header.find(EuiBadge).text()).toContain('#4');
+    });
   });
 
   describe('actions', () => {

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx
@@ -28,6 +28,7 @@ interface Props {
   result: ResultType;
   isMetaEngine: boolean;
   showScore?: boolean;
+  resultPosition?: number;
   shouldLinkToDetailPage?: boolean;
   schemaForTypeHighlights?: Schema;
   actions?: ResultAction[];
@@ -44,6 +45,7 @@ export const Result: React.FC<Props> = ({
   schemaForTypeHighlights,
   actions = [],
   dragHandleProps,
+  resultPosition,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -100,6 +102,7 @@ export const Result: React.FC<Props> = ({
           isMetaEngine={isMetaEngine}
           documentLink={documentLink}
           actions={actions}
+          resultPosition={resultPosition}
         />
         {resultFields
           .slice(0, isOpen ? resultFields.length : RESULT_CUTOFF)

diff --git a/...gins/enterprise_search/public/applications/app_search/components/result/result_header.tsx b/...gins/enterprise_search/public/applications/app_search/components/result/result_header.tsx
@@ -7,7 +7,9 @@
 
 import React from 'react';
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import { ResultActions } from './result_actions';
 import { ResultHeaderItem } from './result_header_item';
@@ -21,6 +23,7 @@ interface Props {
   resultMeta: ResultMeta;
   actions: ResultAction[];
   documentLink?: string;
+  resultPosition?: number;
 }
 
 export const ResultHeader: React.FC<Props> = ({
@@ -29,6 +32,7 @@ export const ResultHeader: React.FC<Props> = ({
   isMetaEngine,
   actions,
   documentLink,
+  resultPosition,
 }) => {
   return (
     <header className="appSearchResultHeader">
@@ -39,6 +43,19 @@ export const ResultHeader: React.FC<Props> = ({
         responsive={false}
         wrap
       >
+        {resultPosition && (
+          <EuiFlexItem grow={false}>
+            <EuiBadge color="hollow">
+              <FormattedMessage
+                id="xpack.enterpriseSearch.appSearch.result.resultPositionLabel"
+                defaultMessage="#{resultPosition}"
+                values={{
+                  resultPosition,
+                }}
+              />
+            </EuiBadge>
+          </EuiFlexItem>
+        )}
         <EuiFlexItem grow>
           <ResultHeaderItem
             href={documentLink}