[App Search] First cut of the Relevance Tuning UI (#90621)

x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/boost_icon.test.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { EuiToken } from '@elastic/eui';
+
+import { BoostIcon } from './boost_icon';
+import { BoostType } from './types';
+
+describe('BoostIcon', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders a token according to the provided type', () => {
+    const wrapper = shallow(<BoostIcon type={'value' as BoostType} />);
+    expect(wrapper.find(EuiToken).prop('iconType')).toBe('tokenNumber');
+  });
+});

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

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { EuiToken } from '@elastic/eui';
+
+import { BOOST_TYPE_TO_ICON_MAP } from './constants';
+import { BoostType } from './types';
+
+interface Props {
+  type: BoostType;
+}
+
+export const BoostIcon: React.FC<Props> = ({ type }) => {
+  return (
+    <EuiToken
+      iconType={BOOST_TYPE_TO_ICON_MAP[type]}
+      size="m"
+      shape="square"
+      color="euiColorVis1"
+    />
+  );
+};

x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/constants.ts

@@ -7,33 +7,66 @@
 
 import { i18n } from '@kbn/i18n';
 
+import { BoostType } from './types';
+
+export const FIELD_FILTER_CUTOFF = 10;
+
 export const RELEVANCE_TUNING_TITLE = i18n.translate(
   'xpack.enterpriseSearch.appSearch.engine.relevanceTuning.title',
   { defaultMessage: 'Relevance Tuning' }
 );
 
 export const UPDATE_SUCCESS_MESSAGE = i18n.translate(
-  'xpack.enterpriseSearch.appSearch.relevanceTuning.messages.updateSuccess',
+  'xpack.enterpriseSearch.appSearch.engine.relevanceTuning.messages.updateSuccess',
   {
     defaultMessage: 'Relevance successfully tuned. The changes will impact your results shortly.',
   }
 );
 export const DELETE_SUCCESS_MESSAGE = i18n.translate(
-  'xpack.enterpriseSearch.appSearch.relevanceTuning.messages.deleteSuccess',
+  'xpack.enterpriseSearch.appSearch.engine.relevanceTuning.messages.deleteSuccess',
   {
     defaultMessage:
       'Relevance has been reset to default values. The change will impact your results shortly.',
   }
 );
 export const RESET_CONFIRMATION_MESSAGE = i18n.translate(
-  'xpack.enterpriseSearch.appSearch.relevanceTuning.messages.resetConfirmation',
+  'xpack.enterpriseSearch.appSearch.engine.relevanceTuning.messages.resetConfirmation',
   {
     defaultMessage: 'Are you sure you want to restore relevance defaults?',
   }
 );
 export const DELETE_CONFIRMATION_MESSAGE = i18n.translate(
-  'xpack.enterpriseSearch.appSearch.relevanceTuning.messages.deleteConfirmation',
+  'xpack.enterpriseSearch.appSearch.engine.relevanceTuning.messages.deleteConfirmation',
   {
     defaultMessage: 'Are you sure you want to delete this boost?',
   }
 );
+export const PROXIMITY_DISPLAY = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engine.relevanceTuning.boosts.proximityDropDownOptionLabel',
+  {
+    defaultMessage: 'Proximity',
+  }
+);
+export const FUNCTIONAL_DISPLAY = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engine.relevanceTuning.boosts.functionalDropDownOptionLabel',
+  {
+    defaultMessage: 'Functional',
+  }
+);
+export const VALUE_DISPLAY = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engine.relevanceTuning.boosts.valueDropDownOptionLabel',
+  {
+    defaultMessage: 'Value',
+  }
+);
+export const BOOST_TYPE_TO_DISPLAY_MAP = {
+  [BoostType.Proximity]: PROXIMITY_DISPLAY,
+  [BoostType.Functional]: FUNCTIONAL_DISPLAY,
+  [BoostType.Value]: VALUE_DISPLAY,
+};
+
+export const BOOST_TYPE_TO_ICON_MAP = {
+  [BoostType.Value]: 'tokenNumber',
+  [BoostType.Functional]: 'tokenFunction',
+  [BoostType.Proximity]: 'tokenGeo',
+};

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

@@ -4,20 +4,34 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import '../../../__mocks__/shallow_useeffect.mock';
+import { setMockActions } from '../../../__mocks__/kea.mock';
 
 import React from 'react';
 
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 
 import { RelevanceTuning } from './relevance_tuning';
+import { RelevanceTuningForm } from './relevance_tuning_form';
 
 describe('RelevanceTuning', () => {
+  let wrapper: ShallowWrapper;
+
+  const actions = {
+    initializeRelevanceTuning: jest.fn(),
+  };
+
   beforeEach(() => {
     jest.clearAllMocks();
+    setMockActions(actions);
+    wrapper = shallow(<RelevanceTuning engineBreadcrumb={['test']} />);
   });
 
   it('renders', () => {
-    const wrapper = shallow(<RelevanceTuning engineBreadcrumb={['test']} />);
-    expect(wrapper.isEmptyRender()).toBe(false);
+    expect(wrapper.find(RelevanceTuningForm).exists()).toBe(true);
+  });
+
+  it('initializes relevance tuning data', () => {
+    expect(actions.initializeRelevanceTuning).toHaveBeenCalled();
   });
 });

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

@@ -5,26 +5,41 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
+
+import { useActions } from 'kea';
 
 import {
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiTitle,
-  EuiPageContentBody,
-  EuiPageContent,
+  EuiText,
+  EuiSpacer,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTextColor,
 } from '@elastic/eui';
 
+import { i18n } from '@kbn/i18n';
+
 import { FlashMessages } from '../../../shared/flash_messages';
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
 
 import { RELEVANCE_TUNING_TITLE } from './constants';
+import { RelevanceTuningForm } from './relevance_tuning_form';
+import { RelevanceTuningLogic } from './relevance_tuning_logic';
 
 interface Props {
   engineBreadcrumb: string[];
 }
 
 export const RelevanceTuning: React.FC<Props> = ({ engineBreadcrumb }) => {
+  const { initializeRelevanceTuning } = useActions(RelevanceTuningLogic);
+
+  useEffect(() => {
+    initializeRelevanceTuning();
+  }, []);
+
   return (
     <>
       <SetPageChrome trail={[...engineBreadcrumb, RELEVANCE_TUNING_TITLE]} />
@@ -33,13 +48,26 @@ export const RelevanceTuning: React.FC<Props> = ({ engineBreadcrumb }) => {
           <EuiTitle size="l">
             <h1>{RELEVANCE_TUNING_TITLE}</h1>
           </EuiTitle>
+          <EuiText>
+            <EuiTextColor color="subdued">
+              {i18n.translate(
+                'xpack.enterpriseSearch.appSearch.engine.relevanceTuning.description',
+                {
+                  defaultMessage: 'Set field weights and boosts',
+                }
+              )}
+            </EuiTextColor>
+          </EuiText>
         </EuiPageHeaderSection>
       </EuiPageHeader>
-      <EuiPageContent>
-        <EuiPageContentBody>
-          <FlashMessages />
-        </EuiPageContentBody>
-      </EuiPageContent>
+      <EuiSpacer />
+      <FlashMessages />
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <RelevanceTuningForm />
+        </EuiFlexItem>
+        <EuiFlexItem />
+      </EuiFlexGroup>
     </>
   );
 };

x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning_form/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { RelevanceTuningForm } from './relevance_tuning_form';

x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning_form/relevance_tuning_form.scss

@@ -0,0 +1,20 @@
+.relevanceTuningForm {
+  &__item {
+    width: 100%;
+    margin-left: $euiSizeS;
+  }
+
+  &__panel + &__panel {
+    margin-top: $euiSizeM;
+  }
+
+  &__panel .euiAccordion__button {
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      h3 {
+        text-decoration: underline;
+      }
+    }
+  }
+}