[Enterprise Search] Engines Preview Page Info and Results Per Page (#152018)

## Summary

<img width="900" alt="image"
src="https://user-images.githubusercontent.com/1699281/220992128-9b33aa1d-9361-4fd6-9f90-3747890601bc.png">


### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx

@@ -10,7 +10,13 @@ import React, { useState, useMemo } from 'react';
 import { useValues } from 'kea';
 
 import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
-import { SearchProvider, SearchBox, Results } from '@elastic/react-search-ui';
+import {
+  PagingInfo,
+  Results,
+  ResultsPerPage,
+  SearchBox,
+  SearchProvider,
+} from '@elastic/react-search-ui';
 import { SearchDriverOptions } from '@elastic/search-ui';
 import EnginesAPIConnector, {
   Transporter,
@@ -32,7 +38,14 @@ import { DocumentProvider } from './document_context';
 import { DocumentFlyout } from './document_flyout';
 import { EngineSearchPreviewLogic } from './engine_search_preview_logic';
 
-import { InputView, ResultView, ResultsView } from './search_ui_components';
+import {
+  InputView,
+  PagingInfoView,
+  RESULTS_PER_PAGE_OPTIONS,
+  ResultView,
+  ResultsPerPageView,
+  ResultsView,
+} from './search_ui_components';
 
 class InternalEngineTransporter implements Transporter {
   constructor(
@@ -123,8 +136,12 @@ export const EngineSearchPreview: React.FC = () => {
           </EuiFlexGroup>
           <EuiSpacer size="m" />
           <EuiFlexGroup>
-            <EuiFlexItem grow={false} css={{ minWidth: '240px' }} />
+            <EuiFlexItem grow={false} css={{ minWidth: '240px' }}>
+              <ResultsPerPage view={ResultsPerPageView} options={RESULTS_PER_PAGE_OPTIONS} />
+            </EuiFlexItem>
             <EuiFlexItem>
+              <PagingInfo view={PagingInfoView} />
+              <EuiSpacer size="m" />
               <Results view={ResultsView} resultView={ResultView} />
             </EuiFlexItem>
           </EuiFlexGroup>

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/search_ui_components.tsx

@@ -19,16 +19,20 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiPanel,
+  EuiSelect,
   EuiText,
   EuiTextColor,
+  EuiTitle,
 } from '@elastic/eui';
 import type {
   InputViewProps,
+  PagingInfoViewProps,
   ResultViewProps,
+  ResultsPerPageViewProps,
   ResultsViewProps,
 } from '@elastic/react-search-ui-views';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
+import { FormattedMessage, FormattedHTMLMessage } from '@kbn/i18n-react';
 
 import { indexHealthToHealthColor } from '../../../../shared/constants/health_colors';
 
@@ -171,3 +175,45 @@ export const InputView: React.FC<InputViewProps> = ({ getInputProps }) => {
     </EuiFlexGroup>
   );
 };
+
+export const PagingInfoView: React.FC<PagingInfoViewProps> = ({ start, end, totalResults }) => (
+  <EuiText size="s">
+    <FormattedHTMLMessage
+      tagName="p"
+      id="xpack.enterpriseSearch.content.engine.searchPreview.pagingInfo.text"
+      defaultMessage="Showing <strong>{start}-{end}</strong> of {totalResults}"
+      values={{ end, start, totalResults }}
+    />
+  </EuiText>
+);
+
+export const RESULTS_PER_PAGE_OPTIONS = [10, 20, 50];
+
+export const ResultsPerPageView: React.FC<ResultsPerPageViewProps> = ({
+  onChange,
+  options,
+  value,
+}) => (
+  <EuiFlexGroup direction="column" gutterSize="s">
+    <EuiTitle size="xxxs">
+      <label htmlFor="results-per-page">Show</label>
+    </EuiTitle>
+    <EuiSelect
+      id="results-per-page"
+      options={
+        options?.map((option) => ({
+          text: i18n.translate(
+            'xpack.enterpriseSearch.content.engine.searchPreview.resultsPerPage.label',
+            {
+              defaultMessage: '{value} {value, plural, one {Result} other {Results}}',
+              values: { value: option },
+            }
+          ),
+          value: option,
+        })) ?? []
+      }
+      value={value}
+      onChange={(evt) => onChange(parseInt(evt.target.value, 10))}
+    />
+  </EuiFlexGroup>
+);