From f6521966638aea4d0d9865ea608f0fef46aacc2c Mon Sep 17 00:00:00 2001
From: Davey Holler <daveyholler@hey.com>
Date: Tue, 21 Sep 2021 15:08:29 -0700
Subject: [PATCH 1/2] Document position indicator.

---
 .../app_search/components/library/library.tsx | 21 +++++++++++++++++++
 .../app_search/components/result/result.tsx   |  6 ++++++
 .../components/result/result_header.tsx       | 11 +++++++++-
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
index 55c9cc7958346..e23f7d30412b6 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
@@ -237,6 +237,27 @@ export const Library: React.FC = () => {
           />
           <EuiSpacer />
 
+          <EuiTitle size="s">
+            <h3>With a document position</h3>
+          </EuiTitle>
+          <EuiSpacer />
+          <Result
+            {...{
+              ...props,
+              showResultPosition: true,
+              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/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
index 9be9afa051351..557e50e639994 100644
--- 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,8 @@ interface Props {
   result: ResultType;
   isMetaEngine: boolean;
   showScore?: boolean;
+  showResultPosition?: boolean;
+  resultPosition?: number;
   shouldLinkToDetailPage?: boolean;
   schemaForTypeHighlights?: Schema;
   actions?: ResultAction[];
@@ -44,6 +46,8 @@ export const Result: React.FC<Props> = ({
   schemaForTypeHighlights,
   actions = [],
   dragHandleProps,
+  showResultPosition,
+  resultPosition,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -100,6 +104,8 @@ export const Result: React.FC<Props> = ({
           isMetaEngine={isMetaEngine}
           documentLink={documentLink}
           actions={actions}
+          showResultPosition
+          resultPosition={resultPosition || undefined}
         />
         {resultFields
           .slice(0, isOpen ? resultFields.length : RESULT_CUTOFF)
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_header.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_header.tsx
index f577b481b39cf..eb540df110a4e 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_header.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_header.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { ResultActions } from './result_actions';
 import { ResultHeaderItem } from './result_header_item';
@@ -21,14 +21,18 @@ interface Props {
   resultMeta: ResultMeta;
   actions: ResultAction[];
   documentLink?: string;
+  showResultPosition?: boolean;
+  resultPosition?: number;
 }
 
 export const ResultHeader: React.FC<Props> = ({
+  showResultPosition,
   showScore,
   resultMeta,
   isMetaEngine,
   actions,
   documentLink,
+  resultPosition,
 }) => {
   return (
     <header className="appSearchResultHeader">
@@ -39,6 +43,11 @@ export const ResultHeader: React.FC<Props> = ({
         responsive={false}
         wrap
       >
+        {showResultPosition && resultPosition && (
+          <EuiFlexItem grow={false}>
+            <EuiBadge color="hollow">#{resultPosition}</EuiBadge>
+          </EuiFlexItem>
+        )}
         <EuiFlexItem grow>
           <ResultHeaderItem
             href={documentLink}

From f92fa5860875956bbfa80ae21154a5438aecae69 Mon Sep 17 00:00:00 2001
From: Byron Hulcher <byronhulcher@gmail.com>
Date: Wed, 22 Sep 2021 10:32:07 -0400
Subject: [PATCH 2/2] Remove showResultPosition prop, add tests

---
 .../app_search/components/library/library.tsx    |  1 -
 .../app_search/components/result/result.test.tsx |  9 ++++++++-
 .../app_search/components/result/result.tsx      |  5 +----
 .../components/result/result_header.tsx          | 16 ++++++++++++----
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
index e23f7d30412b6..df5c5499424c1 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
@@ -244,7 +244,6 @@ export const Library: React.FC = () => {
           <Result
             {...{
               ...props,
-              showResultPosition: true,
               resultPosition: 3,
               result: {
                 ...props.result,
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx
index dfb01a1a793c4..6f8f0fdcf34ff 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx
+++ b/x-pack/plugins/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
index 557e50e639994..ea73296d66b30 100644
--- 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,7 +28,6 @@ interface Props {
   result: ResultType;
   isMetaEngine: boolean;
   showScore?: boolean;
-  showResultPosition?: boolean;
   resultPosition?: number;
   shouldLinkToDetailPage?: boolean;
   schemaForTypeHighlights?: Schema;
@@ -46,7 +45,6 @@ export const Result: React.FC<Props> = ({
   schemaForTypeHighlights,
   actions = [],
   dragHandleProps,
-  showResultPosition,
   resultPosition,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -104,8 +102,7 @@ export const Result: React.FC<Props> = ({
           isMetaEngine={isMetaEngine}
           documentLink={documentLink}
           actions={actions}
-          showResultPosition
-          resultPosition={resultPosition || undefined}
+          resultPosition={resultPosition}
         />
         {resultFields
           .slice(0, isOpen ? resultFields.length : RESULT_CUTOFF)
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_header.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_header.tsx
index eb540df110a4e..fd524e126b258 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_header.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_header.tsx
@@ -9,6 +9,8 @@ import React from 'react';
 
 import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
+import { FormattedMessage } from '@kbn/i18n/react';
+
 import { ResultActions } from './result_actions';
 import { ResultHeaderItem } from './result_header_item';
 import { ResultMeta, ResultAction } from './types';
@@ -21,12 +23,10 @@ interface Props {
   resultMeta: ResultMeta;
   actions: ResultAction[];
   documentLink?: string;
-  showResultPosition?: boolean;
   resultPosition?: number;
 }
 
 export const ResultHeader: React.FC<Props> = ({
-  showResultPosition,
   showScore,
   resultMeta,
   isMetaEngine,
@@ -43,9 +43,17 @@ export const ResultHeader: React.FC<Props> = ({
         responsive={false}
         wrap
       >
-        {showResultPosition && resultPosition && (
+        {resultPosition && (
           <EuiFlexItem grow={false}>
-            <EuiBadge color="hollow">#{resultPosition}</EuiBadge>
+            <EuiBadge color="hollow">
+              <FormattedMessage
+                id="xpack.enterpriseSearch.appSearch.result.resultPositionLabel"
+                defaultMessage="#{resultPosition}"
+                values={{
+                  resultPosition,
+                }}
+              />
+            </EuiBadge>
           </EuiFlexItem>
         )}
         <EuiFlexItem grow>