Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[App Search] Convert Result Settings & Relevance Tuning pages to new page template #102845

Merged
merged 5 commits into from
Jun 22, 2021
Merged

[App Search] Convert Result Settings & Relevance Tuning pages to new page template #102845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2870bfc
Convert Result Settings page to new page template
cee-chen Jun 22, 2021
f6f240d
Convert Relevance Tuning page to new page template
cee-chen Jun 22, 2021
3b0016a
Update router
cee-chen Jun 22, 2021
eb54dd3
[Polish] Spacing & icon polish from Davey
cee-chen Jun 22, 2021
642d4c4
Merge branch 'master' into kibana-page-template-as-9
constancecchen Jun 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions ...gins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand All @@ -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 />
Expand Down
62 changes: 30 additions & 32 deletions ...rch/public/applications/app_search/components/relevance_tuning/components/empty_state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
/>
);
57 changes: 31 additions & 26 deletions ...arch/public/applications/app_search/components/relevance_tuning/relevance_tuning.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UnsavedChangesPrompt could eventually go in the page template!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ooo!!! Nice idea, I love it!

});

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);
});
});
74 changes: 54 additions & 20 deletions ...se_search/public/applications/app_search/components/relevance_tuning/relevance_tuning.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
2 changes: 1 addition & 1 deletion ...ns/app_search/components/relevance_tuning/relevance_tuning_form/relevance_tuning_form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
64 changes: 0 additions & 64 deletions ...blic/applications/app_search/components/relevance_tuning/relevance_tuning_layout.test.tsx
View file
Open in desktop

This file was deleted.

Loading