[App Search] Add header details to the Result Settings page (#96623) (#…

…96853) Co-authored-by: Jason Stoltzfus <[email protected]>
elastic · Apr 12, 2021 · b09b3d7 · b09b3d7
1 parent 3afc091
commit b09b3d7
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 134 deletions.
diff --git a/...blic/applications/app_search/components/relevance_tuning/relevance_tuning_layout.test.tsx b/...blic/applications/app_search/components/relevance_tuning/relevance_tuning_layout.test.tsx
@@ -9,7 +9,7 @@ import { setMockActions, setMockValues } from '../../../__mocks__/kea.mock';
 
 import React from 'react';
 
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 
 import { EuiPageHeader } from '@elastic/eui';
 
@@ -33,17 +33,19 @@ describe('RelevanceTuningLayout', () => {
   });
 
   const subject = () => shallow(<RelevanceTuningLayout engineBreadcrumb={['test']} />);
+  const findButtons = (wrapper: ShallowWrapper) =>
+    wrapper.find(EuiPageHeader).prop('rightSideItems') as React.ReactElement[];
 
   it('renders a Save button that will save the current changes', () => {
-    const buttons = subject().find(EuiPageHeader).prop('rightSideItems') as React.ReactElement[];
+    const buttons = findButtons(subject());
     expect(buttons.length).toBe(2);
     const saveButton = shallow(buttons[0]);
     saveButton.simulate('click');
     expect(actions.updateSearchSettings).toHaveBeenCalled();
   });
 
   it('renders a Reset button that will remove all weights and boosts', () => {
-    const buttons = subject().find(EuiPageHeader).prop('rightSideItems') as React.ReactElement[];
+    const buttons = findButtons(subject());
     expect(buttons.length).toBe(2);
     const resetButton = shallow(buttons[1]);
     resetButton.simulate('click');
@@ -55,7 +57,7 @@ describe('RelevanceTuningLayout', () => {
       ...values,
       engineHasSchemaFields: false,
     });
-    const buttons = subject().find(EuiPageHeader).prop('rightSideItems') as React.ReactElement[];
+    const buttons = findButtons(subject());
     expect(buttons.length).toBe(0);
   });
 });
diff --git a/...ch/public/applications/app_search/components/relevance_tuning/relevance_tuning_layout.tsx b/...ch/public/applications/app_search/components/relevance_tuning/relevance_tuning_layout.tsx
@@ -37,7 +37,7 @@ export const RelevanceTuningLayout: React.FC<Props> = ({ engineBreadcrumb, child
       description={i18n.translate(
         'xpack.enterpriseSearch.appSearch.engine.relevanceTuning.description',
         {
-          defaultMessage: 'Set field weights and boosts',
+          defaultMessage: 'Set field weights and boosts.',
         }
       )}
       rightSideItems={

diff --git a/...public/applications/app_search/components/relevance_tuning/relevance_tuning_logic.test.ts b/...public/applications/app_search/components/relevance_tuning/relevance_tuning_logic.test.ts
@@ -586,10 +586,9 @@ describe('RelevanceTuningLogic', () => {
         confirmSpy.mockImplementation(() => false);
 
         RelevanceTuningLogic.actions.resetSearchSettings();
+        await nextTick();
 
-        expect(http.post).not.toHaveBeenCalledWith(
-          '/api/app_search/engines/test-engine/search_settings/reset'
-        );
+        expect(http.post).not.toHaveBeenCalled();
       });
 
       it('handles errors', async () => {

diff --git a/...search/public/applications/app_search/components/result_settings/result_settings.test.tsx b/...search/public/applications/app_search/components/result_settings/result_settings.test.tsx
@@ -11,7 +11,9 @@ import { setMockValues, setMockActions } from '../../../__mocks__';
 
 import React from 'react';
 
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
+
+import { EuiPageHeader } from '@elastic/eui';
 
 import { ResultSettings } from './result_settings';
 import { ResultSettingsTable } from './result_settings_table';
@@ -24,6 +26,9 @@ describe('RelevanceTuning', () => {
 
   const actions = {
     initializeResultSettingsData: jest.fn(),
+    saveResultSettings: jest.fn(),
+    confirmResetAllFields: jest.fn(),
+    clearAllFields: jest.fn(),
   };
 
   beforeEach(() => {
@@ -32,8 +37,12 @@ describe('RelevanceTuning', () => {
     jest.clearAllMocks();
   });
 
+  const subject = () => shallow(<ResultSettings engineBreadcrumb={['test']} />);
+  const findButtons = (wrapper: ShallowWrapper) =>
+    wrapper.find(EuiPageHeader).prop('rightSideItems') as React.ReactElement[];
+
   it('renders', () => {
-    const wrapper = shallow(<ResultSettings engineBreadcrumb={['test']} />);
+    const wrapper = subject();
     expect(wrapper.find(ResultSettingsTable).exists()).toBe(true);
     expect(wrapper.find(SampleResponse).exists()).toBe(true);
   });
@@ -47,8 +56,32 @@ describe('RelevanceTuning', () => {
     setMockValues({
       dataLoading: true,
     });
-    const wrapper = shallow(<ResultSettings engineBreadcrumb={['test']} />);
+    const wrapper = subject();
     expect(wrapper.find(ResultSettingsTable).exists()).toBe(false);
     expect(wrapper.find(SampleResponse).exists()).toBe(false);
   });
+
+  it('renders a "save" button that will save the current changes', () => {
+    const buttons = findButtons(subject());
+    expect(buttons.length).toBe(3);
+    const saveButton = shallow(buttons[0]);
+    saveButton.simulate('click');
+    expect(actions.saveResultSettings).toHaveBeenCalled();
+  });
+
+  it('renders a "restore defaults" button that will reset all values to their defaults', () => {
+    const buttons = findButtons(subject());
+    expect(buttons.length).toBe(3);
+    const resetButton = shallow(buttons[1]);
+    resetButton.simulate('click');
+    expect(actions.confirmResetAllFields).toHaveBeenCalled();
+  });
+
+  it('renders a "clear" button that will remove all selected options', () => {
+    const buttons = findButtons(subject());
+    expect(buttons.length).toBe(3);
+    const clearButton = shallow(buttons[2]);
+    clearButton.simulate('click');
+    expect(actions.clearAllFields).toHaveBeenCalled();
+  });
 });
diff --git a/...rise_search/public/applications/app_search/components/result_settings/result_settings.tsx b/...rise_search/public/applications/app_search/components/result_settings/result_settings.tsx
@@ -9,12 +9,15 @@ import React, { useEffect } from 'react';
 
 import { useActions, useValues } from 'kea';
 
-import { EuiPageHeader, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiPageHeader, EuiFlexGroup, EuiFlexItem, EuiButton, EuiButtonEmpty } from '@elastic/eui';
 
+import { i18n } from '@kbn/i18n';
+
+import { SAVE_BUTTON_LABEL } from '../../../shared/constants';
 import { FlashMessages } from '../../../shared/flash_messages';
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-
 import { Loading } from '../../../shared/loading';
+import { RESTORE_DEFAULTS_BUTTON_LABEL } from '../../constants';
 
 import { RESULT_SETTINGS_TITLE } from './constants';
 import { ResultSettingsTable } from './result_settings_table';
@@ -23,13 +26,23 @@ import { SampleResponse } from './sample_response';
 
 import { ResultSettingsLogic } from '.';
 
+const CLEAR_BUTTON_LABEL = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.engine.resultSettings.clearButtonLabel',
+  { defaultMessage: 'Clear all values' }
+);
+
 interface Props {
   engineBreadcrumb: string[];
 }
 
 export const ResultSettings: React.FC<Props> = ({ engineBreadcrumb }) => {
   const { dataLoading } = useValues(ResultSettingsLogic);
-  const { initializeResultSettingsData } = useActions(ResultSettingsLogic);
+  const {
+    initializeResultSettingsData,
+    saveResultSettings,
+    confirmResetAllFields,
+    clearAllFields,
+  } = useActions(ResultSettingsLogic);
 
   useEffect(() => {
     initializeResultSettingsData();
@@ -40,7 +53,33 @@ export const ResultSettings: React.FC<Props> = ({ engineBreadcrumb }) => {
   return (
     <>
       <SetPageChrome trail={[...engineBreadcrumb, RESULT_SETTINGS_TITLE]} />
-      <EuiPageHeader pageTitle={RESULT_SETTINGS_TITLE} />
+      <EuiPageHeader
+        pageTitle={RESULT_SETTINGS_TITLE}
+        description={i18n.translate(
+          'xpack.enterpriseSearch.appSearch.engine.resultSettings.pageDescription',
+          { defaultMessage: 'Enrich search results and select which fields will appear.' }
+        )}
+        rightSideItems={[
+          <EuiButton
+            data-test-subj="SaveResultSettings"
+            color="primary"
+            fill
+            onClick={saveResultSettings}
+          >
+            {SAVE_BUTTON_LABEL}
+          </EuiButton>,
+          <EuiButton
+            data-test-subj="ResetResultSettings"
+            color="danger"
+            onClick={confirmResetAllFields}
+          >
+            {RESTORE_DEFAULTS_BUTTON_LABEL}
+          </EuiButton>,
+          <EuiButtonEmpty data-test-subj="ClearResultSettings" onClick={clearAllFields}>
+            {CLEAR_BUTTON_LABEL}
+          </EuiButtonEmpty>,
+        ]}
+      />
       <FlashMessages />
       <EuiFlexGroup alignItems="flexStart">
         <EuiFlexItem grow={5}>