[App Search] Convert Result Settings & Relevance Tuning pages to new …

…page template (#102845) (#103018) * Convert Result Settings page to new page template + remove wrapper around empty state (auto handled by new page template) + update tests w/ new test helpers * Convert Relevance Tuning page to new page template - Remove old relevance_tuning_layout (which handled breadcrumbs, page header, flash messages, and callouts) in favor of simply using the new templtate + callouts (yay DRYing) - Remove panel wrapper around empty state (handled by new page template) * Update router * [Polish] Spacing & icon polish from Davey see https://github.com/elastic/kibana/pull/101958/files Co-authored-by: Constance <constancecchen@users.noreply.github.com>
elastic · Jun 22, 2021 · 074c008 · 074c008
1 parent 92c9a0e
commit 074c008
Show file tree

Hide file tree

Showing 11 changed files with 224 additions and 348 deletions.
diff --git a/...gins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx b/...gins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
@@ -114,6 +114,16 @@ export const EngineRouter: React.FC = () => {
           <SchemaRouter />
         </Route>
       )}
+      {canManageEngineRelevanceTuning && (
+        <Route path={ENGINE_RELEVANCE_TUNING_PATH}>
+          <RelevanceTuning />
+        </Route>
+      )}
+      {canManageEngineResultSettings && (
+        <Route path={ENGINE_RESULT_SETTINGS_PATH}>
+          <ResultSettings />
+        </Route>
+      )}
       {canManageEngineSearchUi && (
         <Route path={ENGINE_SEARCH_UI_PATH}>
           <SearchUI />
@@ -131,21 +141,11 @@ export const EngineRouter: React.FC = () => {
             <CurationsRouter />
           </Route>
         )}
-        {canManageEngineRelevanceTuning && (
-          <Route path={ENGINE_RELEVANCE_TUNING_PATH}>
-            <RelevanceTuning />
-          </Route>
-        )}
         {canManageEngineSynonyms && (
           <Route path={ENGINE_SYNONYMS_PATH}>
             <Synonyms />
           </Route>
         )}
-        {canManageEngineResultSettings && (
-          <Route path={ENGINE_RESULT_SETTINGS_PATH}>
-            <ResultSettings />
-          </Route>
-        )}
         {canViewMetaEngineSourceEngines && (
           <Route path={META_ENGINE_SOURCE_ENGINES_PATH}>
             <SourceEngines />

diff --git a/...rch/public/applications/app_search/components/relevance_tuning/components/empty_state.tsx b/...rch/public/applications/app_search/components/relevance_tuning/components/empty_state.tsx
@@ -7,42 +7,40 @@
 
 import React from 'react';
 
-import { EuiButton, EuiEmptyPrompt, EuiPanel } from '@elastic/eui';
+import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { DOCS_PREFIX } from '../../../routes';
 
 export const EmptyState: React.FC = () => (
-  <EuiPanel color="subdued">
-    <EuiEmptyPrompt
-      iconType="wrench"
-      title={
-        <h2>
-          {i18n.translate('xpack.enterpriseSearch.appSearch.engine.relevanceTuning.empty.title', {
-            defaultMessage: 'Add documents to tune relevance',
-          })}
-        </h2>
+  <EuiEmptyPrompt
+    iconType="wrench"
+    title={
+      <h2>
+        {i18n.translate('xpack.enterpriseSearch.appSearch.engine.relevanceTuning.empty.title', {
+          defaultMessage: 'Add documents to tune relevance',
+        })}
+      </h2>
+    }
+    body={i18n.translate(
+      'xpack.enterpriseSearch.appSearch.engine.relevanceTuning.empty.description',
+      {
+        defaultMessage:
+          'A schema will be automatically created for you after you index some documents.',
       }
-      body={i18n.translate(
-        'xpack.enterpriseSearch.appSearch.engine.relevanceTuning.empty.description',
-        {
-          defaultMessage:
-            'A schema will be automatically created for you after you index some documents.',
-        }
-      )}
-      actions={
-        <EuiButton
-          size="s"
-          target="_blank"
-          iconType="popout"
-          href={`${DOCS_PREFIX}/relevance-tuning-guide.html`}
-        >
-          {i18n.translate(
-            'xpack.enterpriseSearch.appSearch.engine.relevanceTuning.empty.buttonLabel',
-            { defaultMessage: 'Read the relevance tuning guide' }
-          )}
-        </EuiButton>
-      }
-    />
-  </EuiPanel>
+    )}
+    actions={
+      <EuiButton
+        size="s"
+        target="_blank"
+        iconType="popout"
+        href={`${DOCS_PREFIX}/relevance-tuning-guide.html`}
+      >
+        {i18n.translate(
+          'xpack.enterpriseSearch.appSearch.engine.relevanceTuning.empty.buttonLabel',
+          { defaultMessage: 'Read the relevance tuning guide' }
+        )}
+      </EuiButton>
+    }
+  />
 );
diff --git a/...arch/public/applications/app_search/components/relevance_tuning/relevance_tuning.test.tsx b/...arch/public/applications/app_search/components/relevance_tuning/relevance_tuning.test.tsx
@@ -13,14 +13,14 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiEmptyPrompt } from '@elastic/eui';
-
-import { Loading } from '../../../shared/loading';
 import { UnsavedChangesPrompt } from '../../../shared/unsaved_changes_prompt';
+import { getPageHeaderActions } from '../../../test_helpers';
 
-import { EmptyState } from './components';
 import { RelevanceTuning } from './relevance_tuning';
+
+import { RelevanceTuningCallouts } from './relevance_tuning_callouts';
 import { RelevanceTuningForm } from './relevance_tuning_form';
+import { RelevanceTuningPreview } from './relevance_tuning_preview';
 
 describe('RelevanceTuning', () => {
   const values = {
@@ -50,43 +50,48 @@ describe('RelevanceTuning', () => {
 
   it('renders', () => {
     const wrapper = subject();
+    expect(wrapper.find(RelevanceTuningCallouts).exists()).toBe(true);
     expect(wrapper.find(RelevanceTuningForm).exists()).toBe(true);
-    expect(wrapper.find(Loading).exists()).toBe(false);
-    expect(wrapper.find(EmptyState).exists()).toBe(false);
+    expect(wrapper.find(RelevanceTuningPreview).exists()).toBe(true);
   });
 
   it('initializes relevance tuning data', () => {
     subject();
     expect(actions.initializeRelevanceTuning).toHaveBeenCalled();
   });
 
-  it('will render an empty message when the engine has no schema', () => {
+  it('will prevent user from leaving the page if there are unsaved changes', () => {
     setMockValues({
       ...values,
-      engineHasSchemaFields: false,
+      unsavedChanges: true,
     });
-    const wrapper = subject();
-    expect(wrapper.find(EmptyState).dive().find(EuiEmptyPrompt).exists()).toBe(true);
-    expect(wrapper.find(Loading).exists()).toBe(false);
-    expect(wrapper.find(RelevanceTuningForm).exists()).toBe(false);
+    expect(subject().find(UnsavedChangesPrompt).prop('hasUnsavedChanges')).toBe(true);
   });
 
-  it('will show a loading message if data is loading', () => {
-    setMockValues({
-      ...values,
-      dataLoading: true,
+  describe('header actions', () => {
+    it('renders a Save button that will save the current changes', () => {
+      const buttons = getPageHeaderActions(subject());
+      expect(buttons.children().length).toBe(2);
+      const saveButton = buttons.find('[data-test-subj="SaveRelevanceTuning"]');
+      saveButton.simulate('click');
+      expect(actions.updateSearchSettings).toHaveBeenCalled();
     });
-    const wrapper = subject();
-    expect(wrapper.find(Loading).exists()).toBe(true);
-    expect(wrapper.find(EmptyState).exists()).toBe(false);
-    expect(wrapper.find(RelevanceTuningForm).exists()).toBe(false);
-  });
 
-  it('will prevent user from leaving the page if there are unsaved changes', () => {
-    setMockValues({
-      ...values,
-      unsavedChanges: true,
+    it('renders a Reset button that will remove all weights and boosts', () => {
+      const buttons = getPageHeaderActions(subject());
+      expect(buttons.children().length).toBe(2);
+      const resetButton = buttons.find('[data-test-subj="ResetRelevanceTuning"]');
+      resetButton.simulate('click');
+      expect(actions.resetSearchSettings).toHaveBeenCalled();
+    });
+
+    it('will not render buttons if the engine has no schema', () => {
+      setMockValues({
+        ...values,
+        engineHasSchemaFields: false,
+      });
+      const buttons = getPageHeaderActions(subject());
+      expect(buttons.children().length).toBe(0);
     });
-    expect(subject().find(UnsavedChangesPrompt).prop('hasUnsavedChanges')).toBe(true);
   });
 });
diff --git a/...se_search/public/applications/app_search/components/relevance_tuning/relevance_tuning.tsx b/...se_search/public/applications/app_search/components/relevance_tuning/relevance_tuning.tsx
@@ -9,43 +9,77 @@ import React, { useEffect } from 'react';
 
 import { useActions, useValues } from 'kea';
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 
-import { Loading } from '../../../shared/loading';
+import { SAVE_BUTTON_LABEL } from '../../../shared/constants';
 import { UnsavedChangesPrompt } from '../../../shared/unsaved_changes_prompt';
+import { RESTORE_DEFAULTS_BUTTON_LABEL } from '../../constants';
+import { getEngineBreadcrumbs } from '../engine';
+import { AppSearchPageTemplate } from '../layout';
 
 import { EmptyState } from './components';
+import { RELEVANCE_TUNING_TITLE } from './constants';
+import { RelevanceTuningCallouts } from './relevance_tuning_callouts';
 import { RelevanceTuningForm } from './relevance_tuning_form';
-import { RelevanceTuningLayout } from './relevance_tuning_layout';
 import { RelevanceTuningPreview } from './relevance_tuning_preview';
 
 import { RelevanceTuningLogic } from '.';
 
 export const RelevanceTuning: React.FC = () => {
   const { dataLoading, engineHasSchemaFields, unsavedChanges } = useValues(RelevanceTuningLogic);
-  const { initializeRelevanceTuning } = useActions(RelevanceTuningLogic);
+  const { initializeRelevanceTuning, resetSearchSettings, updateSearchSettings } = useActions(
+    RelevanceTuningLogic
+  );
 
   useEffect(() => {
     initializeRelevanceTuning();
   }, []);
 
-  if (dataLoading) return <Loading />;
-
   return (
-    <RelevanceTuningLayout>
+    <AppSearchPageTemplate
+      pageChrome={getEngineBreadcrumbs([RELEVANCE_TUNING_TITLE])}
+      pageHeader={{
+        pageTitle: RELEVANCE_TUNING_TITLE,
+        description: i18n.translate(
+          'xpack.enterpriseSearch.appSearch.engine.relevanceTuning.description',
+          { defaultMessage: 'Set field weights and boosts.' }
+        ),
+        rightSideItems: engineHasSchemaFields
+          ? [
+              <EuiButton
+                data-test-subj="SaveRelevanceTuning"
+                color="primary"
+                fill
+                onClick={updateSearchSettings}
+              >
+                {SAVE_BUTTON_LABEL}
+              </EuiButton>,
+              <EuiButton
+                data-test-subj="ResetRelevanceTuning"
+                color="danger"
+                onClick={resetSearchSettings}
+              >
+                {RESTORE_DEFAULTS_BUTTON_LABEL}
+              </EuiButton>,
+            ]
+          : [],
+      }}
+      isLoading={dataLoading}
+      isEmptyState={!engineHasSchemaFields}
+      emptyState={<EmptyState />}
+    >
       <UnsavedChangesPrompt hasUnsavedChanges={unsavedChanges} />
-      {engineHasSchemaFields ? (
-        <EuiFlexGroup alignItems="flexStart">
-          <EuiFlexItem grow={3}>
-            <RelevanceTuningForm />
-          </EuiFlexItem>
-          <EuiFlexItem grow={4}>
-            <RelevanceTuningPreview />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      ) : (
-        <EmptyState />
-      )}
-    </RelevanceTuningLayout>
+      <RelevanceTuningCallouts />
+
+      <EuiFlexGroup alignItems="flexStart">
+        <EuiFlexItem grow={3}>
+          <RelevanceTuningForm />
+        </EuiFlexItem>
+        <EuiFlexItem grow={4}>
+          <RelevanceTuningPreview />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </AppSearchPageTemplate>
   );
 };
diff --git a/...ns/app_search/components/relevance_tuning/relevance_tuning_form/relevance_tuning_form.tsx b/...ns/app_search/components/relevance_tuning/relevance_tuning_form/relevance_tuning_form.tsx
@@ -42,7 +42,7 @@ export const RelevanceTuningForm: React.FC = () => {
   return (
     <section className="relevanceTuningForm">
       <form>
-        <EuiSpacer size="s" />
+        <EuiSpacer size="m" />
         <EuiTitle size="m">
           <h2>
             {i18n.translate(

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