From 1bf589b997a308f6b0ef4e9cc5e9c12cd3bf14b1 Mon Sep 17 00:00:00 2001
From: Sloane Perrault <sloane.perrault@gmail.com>
Date: Thu, 2 Mar 2023 16:35:19 -0500
Subject: [PATCH] appease typescript

---
 .../engine_search_preview.tsx                 | 17 ++----------
 .../search_ui_components.tsx                  | 27 ++++++++++++-------
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx
index ce2cdb5f1d794..0d92ce8609807 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx
@@ -47,7 +47,7 @@ import {
   ResultView,
   ResultsPerPageView,
   ResultsView,
-  SortingView,
+  Sorting,
 } from './search_ui_components';
 
 class InternalEngineTransporter implements Transporter {
@@ -142,20 +142,7 @@ export const EngineSearchPreview: React.FC = () => {
             <EuiFlexItem grow={false} css={{ minWidth: '240px' }}>
               <ResultsPerPage view={ResultsPerPageView} options={RESULTS_PER_PAGE_OPTIONS} />
               <EuiSpacer size="m" />
-              <SortingView sortableFields={sortableFields} />
-              {/* <Sorting
-                view={SortingView}
-                sortOptions={[
-                  {
-                    name: i18n.translate(
-                      'xpack.enterpriseSearch.content.engine.searchPreview.relevanceLabel',
-                      { defaultMessage: 'Relevance' }
-                    ),
-                    value: [],
-                  },
-                  ...sortOptions,
-                ]}
-              /> */}
+              <Sorting sortableFields={sortableFields} />
               <EuiSpacer size="m" />
               <EuiLink href={docLinks.enterpriseSearchEngines} target="_blank">
                 <FormattedMessage
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/search_ui_components.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/search_ui_components.tsx
index e39622a27e761..3ba57405ffe93 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/search_ui_components.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/search_ui_components.tsx
@@ -34,6 +34,7 @@ import type {
   ResultsPerPageViewProps,
   ResultsViewProps,
 } from '@elastic/react-search-ui-views';
+import type { SearchContextState } from '@elastic/search-ui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, FormattedHTMLMessage } from '@kbn/i18n-react';
 
@@ -228,10 +229,11 @@ export const ResultsPerPageView: React.FC<ResultsPerPageViewProps> = ({
   </EuiFlexItem>
 );
 
-export const SortingView: React.FC<SortingViewProps> = withSearch(({ setSort, sortList }) => ({
-  setSort,
-  sortList: sortList.length === 0 ? [{ direction: '', field: '' }] : sortList,
-}))(({ sortableFields, sortList: [{ direction, field }], setSort }) => {
+export const Sorting = withSearch<
+  { sortableFields: string[] },
+  Pick<SearchContextState, 'setSort' | 'sortList'>
+>(({ setSort, sortList }) => ({ setSort, sortList }))(({ sortableFields, sortList, setSort }) => {
+  const [{ direction, field }] = !sortList?.length ? [{ direction: '', field: '' }] : sortList;
   const relevance = i18n.translate(
     'xpack.enterpriseSearch.content.engine.searchPreivew.sortingView.relevanceLabel',
     { defaultMessage: 'Relevance' }
@@ -254,11 +256,11 @@ export const SortingView: React.FC<SortingViewProps> = withSearch(({ setSort, so
           singleSelection={{ asPlainText: true }}
           options={[
             { label: relevance, value: '' },
-            ...sortableFields.map((f) => ({ label: f, value: f })),
+            ...sortableFields.map((f: string) => ({ label: f, value: f })),
           ]}
           selectedOptions={[{ label: !!field ? field : relevance, value: field }]}
           onChange={([{ value }]) =>
-            setSort(value === '' ? [] : [{ direction: 'asc', field: value }])
+            setSort(value === '' ? [] : [{ direction: 'asc', field: value }], 'asc')
           }
         />
       </EuiFlexGroup>
@@ -276,18 +278,25 @@ export const SortingView: React.FC<SortingViewProps> = withSearch(({ setSort, so
             </EuiTitle>
             <EuiSelect
               id="sorting-direction"
-              onChange={(evt) => setSort([{ direction: evt.target.value, field }])}
+              onChange={(evt) => {
+                switch (evt.target.value) {
+                  case 'asc':
+                    return setSort([{ direction: 'asc', field }], 'asc');
+                  case 'desc':
+                    return setSort([{ direction: 'desc', field }], 'desc');
+                }
+              }}
               value={direction}
               options={[
                 {
-                  label: i18n.translate(
+                  text: i18n.translate(
                     'xpack.enterpriseSearch.content.engine.searchPreview.sortingView.ascLabel',
                     { defaultMessage: 'Ascending' }
                   ),
                   value: 'asc',
                 },
                 {
-                  label: i18n.translate(
+                  text: i18n.translate(
                     'xpack.enterpriseSearch.content.engine.searchPreview.sortingView.descLabel',
                     { defaultMessage: 'Descending' }
                   ),