diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
index 59535fb737fa6f..0f42483f44e0c1 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
@@ -13,9 +13,7 @@ import { useValues, useActions } from 'kea';
import { i18n } from '@kbn/i18n';
import { setQueuedErrorMessage } from '../../../shared/flash_messages';
-import { Layout } from '../../../shared/layout';
import { AppLogic } from '../../app_logic';
-import { AppSearchNav } from '../../index';
import {
ENGINE_PATH,
@@ -129,6 +127,11 @@ export const EngineRouter: React.FC = () => {
)}
+ {canManageEngineSynonyms && (
+
+
+
+ )}
{canManageEngineCurations && (
@@ -149,14 +152,6 @@ export const EngineRouter: React.FC = () => {
)}
- {/* TODO: Remove layout once page template migration is over */}
- }>
- {canManageEngineSynonyms && (
-
-
-
- )}
-
);
};
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/empty_state.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/empty_state.test.tsx
index f1382bb5972b21..a43f170e5822f8 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/empty_state.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/empty_state.test.tsx
@@ -11,7 +11,7 @@ import { shallow } from 'enzyme';
import { EuiEmptyPrompt, EuiButton } from '@elastic/eui';
-import { EmptyState } from './';
+import { EmptyState, SynonymModal } from './';
describe('EmptyState', () => {
it('renders', () => {
@@ -24,4 +24,10 @@ describe('EmptyState', () => {
expect.stringContaining('/synonyms-guide.html')
);
});
+
+ it('renders the add synonym modal', () => {
+ const wrapper = shallow();
+
+ expect(wrapper.find(SynonymModal)).toHaveLength(1);
+ });
});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/empty_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/empty_state.tsx
index 2eb6643bda5032..f856a5c035f811 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/empty_state.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/empty_state.tsx
@@ -7,16 +7,16 @@
import React from 'react';
-import { EuiPanel, EuiEmptyPrompt, EuiButton } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiButton } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { DOCS_PREFIX } from '../../../routes';
-import { SynonymIcon } from './';
+import { SynonymModal, SynonymIcon } from './';
export const EmptyState: React.FC = () => {
return (
-
+ <>
{
}
/>
-
+
+ >
);
};
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/synonyms.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/synonyms.test.tsx
index c8f65c4bdbc6c4..64ac3066b51a51 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/synonyms.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/synonyms.test.tsx
@@ -13,12 +13,11 @@ import React from 'react';
import { shallow } from 'enzyme';
-import { EuiPageHeader, EuiButton, EuiPagination } from '@elastic/eui';
+import { EuiButton, EuiPagination } from '@elastic/eui';
-import { Loading } from '../../../shared/loading';
-import { rerender } from '../../../test_helpers';
+import { rerender, getPageHeaderActions } from '../../../test_helpers';
-import { SynonymCard, SynonymModal, EmptyState } from './components';
+import { SynonymCard, SynonymModal } from './components';
import { Synonyms } from './';
@@ -53,21 +52,9 @@ describe('Synonyms', () => {
});
it('renders a create action button', () => {
- const wrapper = shallow()
- .find(EuiPageHeader)
- .dive()
- .children()
- .dive();
-
- wrapper.find(EuiButton).simulate('click');
- expect(actions.openModal).toHaveBeenCalled();
- });
-
- it('renders an empty state if no synonyms exist', () => {
- setMockValues({ ...values, synonymSets: [] });
const wrapper = shallow();
-
- expect(wrapper.find(EmptyState)).toHaveLength(1);
+ getPageHeaderActions(wrapper).find(EuiButton).simulate('click');
+ expect(actions.openModal).toHaveBeenCalled();
});
describe('loading', () => {
@@ -75,14 +62,14 @@ describe('Synonyms', () => {
setMockValues({ ...values, synonymSets: [], dataLoading: true });
const wrapper = shallow();
- expect(wrapper.find(Loading)).toHaveLength(1);
+ expect(wrapper.prop('isLoading')).toEqual(true);
});
it('does not render a full loading state after initial page load', () => {
setMockValues({ ...values, synonymSets: [MOCK_SYNONYM_SET], dataLoading: true });
const wrapper = shallow();
- expect(wrapper.find(Loading)).toHaveLength(0);
+ expect(wrapper.prop('isLoading')).toEqual(false);
});
});
@@ -108,7 +95,7 @@ describe('Synonyms', () => {
const wrapper = shallow();
expect(actions.onPaginate).not.toHaveBeenCalled();
- expect(wrapper.find(EmptyState)).toHaveLength(1);
+ expect(wrapper.prop('isEmptyState')).toEqual(true);
});
it('handles off-by-one shenanigans between EuiPagination and our API', () => {
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/synonyms.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/synonyms.tsx
index d3ba53819f7de2..4a68bc381f7641 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/synonyms.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/synonyms.tsx
@@ -9,21 +9,11 @@ import React, { useEffect } from 'react';
import { useValues, useActions } from 'kea';
-import {
- EuiPageHeader,
- EuiButton,
- EuiPageContentBody,
- EuiSpacer,
- EuiFlexGrid,
- EuiFlexItem,
- EuiPagination,
-} from '@elastic/eui';
+import { EuiButton, EuiSpacer, EuiFlexGrid, EuiFlexItem, EuiPagination } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
-import { FlashMessages } from '../../../shared/flash_messages';
-import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-import { Loading } from '../../../shared/loading';
import { getEngineBreadcrumbs } from '../engine';
+import { AppSearchPageTemplate } from '../layout';
import { SynonymCard, SynonymModal, EmptyState } from './components';
import { SYNONYMS_TITLE } from './constants';
@@ -46,46 +36,45 @@ export const Synonyms: React.FC = () => {
}
}, [synonymSets]);
- if (dataLoading && !hasSynonyms) return ;
-
return (
- <>
-
- openModal(null)}>
+ openModal(null)}>
{i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.synonyms.createSynonymSetButtonLabel',
{ defaultMessage: 'Create a synonym set' }
)}
,
- ]}
+ ],
+ }}
+ isLoading={dataLoading && !hasSynonyms}
+ isEmptyState={!hasSynonyms}
+ emptyState={}
+ >
+
+ {synonymSets.map(({ id, synonyms }) => (
+
+
+
+ ))}
+
+
+ onPaginate(pageIndex + 1)}
/>
-
-
-
- {hasSynonyms ? (
- <>
-
- {synonymSets.map(({ id, synonyms }) => (
-
-
-
- ))}
-
-
- onPaginate(pageIndex + 1)}
- />
- >
- ) : (
-
- )}
-
-
- >
+
+
);
};