[App Search] Convert Synonyms page to new page template

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

@@ -104,6 +104,11 @@ export const EngineRouter: React.FC = () => {
           <Documents />
         </Route>
       )}
+      {canManageEngineSynonyms && (
+        <Route path={ENGINE_SYNONYMS_PATH}>
+          <Synonyms />
+        </Route>
+      )}
       {/* TODO: Remove layout once page template migration is over */}
       <Layout navigation={<AppSearchNav />}>
         {canViewEngineAnalytics && (
@@ -126,11 +131,6 @@ export const EngineRouter: React.FC = () => {
             <RelevanceTuning />
           </Route>
         )}
-        {canManageEngineSynonyms && (
-          <Route path={ENGINE_SYNONYMS_PATH}>
-            <Synonyms />
-          </Route>
-        )}
         {canManageEngineResultSettings && (
           <Route path={ENGINE_RESULT_SETTINGS_PATH}>
             <ResultSettings />

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(<EmptyState />);
+
+    expect(wrapper.find(SynonymModal)).toHaveLength(1);
+  });
 });

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 (
-    <EuiPanel color="subdued">
+    <>
       <EuiEmptyPrompt
         iconType={SynonymIcon}
         title={
@@ -47,6 +47,7 @@ export const EmptyState: React.FC = () => {
           </EuiButton>
         }
       />
-    </EuiPanel>
+      <SynonymModal />
+    </>
   );
 };

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,36 +52,24 @@ describe('Synonyms', () => {
   });
 
   it('renders a create action button', () => {
-    const wrapper = shallow(<Synonyms />)
-      .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(<Synonyms />);
-
-    expect(wrapper.find(EmptyState)).toHaveLength(1);
+    getPageHeaderActions(wrapper).find(EuiButton).simulate('click');
+    expect(actions.openModal).toHaveBeenCalled();
   });
 
   describe('loading', () => {
     it('renders a loading state on initial page load', () => {
       setMockValues({ ...values, synonymSets: [], dataLoading: true });
       const wrapper = shallow(<Synonyms />);
 
-      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(<Synonyms />);
 
-      expect(wrapper.find(Loading)).toHaveLength(0);
+      expect(wrapper.prop('isLoading')).toEqual(false);
     });
   });
 
@@ -108,7 +95,7 @@ describe('Synonyms', () => {
       const wrapper = shallow(<Synonyms />);
 
       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', () => {

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 <Loading />;
-
   return (
-    <>
-      <SetPageChrome trail={getEngineBreadcrumbs([SYNONYMS_TITLE])} />
-      <EuiPageHeader
-        pageTitle={SYNONYMS_TITLE}
-        rightSideItems={[
+    <AppSearchPageTemplate
+      pageChrome={getEngineBreadcrumbs([SYNONYMS_TITLE])}
+      pageHeader={{
+        pageTitle: SYNONYMS_TITLE,
+        description: i18n.translate(
+          'xpack.enterpriseSearch.appSearch.engine.synonyms.description',
+          {
+            defaultMessage:
+              'Use synonyms to relate queries together that contextually have the same meaning in your dataset.',
+          }
+        ),
+        rightSideItems: [
           <EuiButton fill onClick={() => openModal(null)}>
             {i18n.translate(
               'xpack.enterpriseSearch.appSearch.engine.synonyms.createSynonymSetButtonLabel',
               { defaultMessage: 'Create a synonym set' }
             )}
           </EuiButton>,
-        ]}
+        ],
+      }}
+      isLoading={dataLoading && !hasSynonyms}
+      isEmptyState={!hasSynonyms}
+      emptyState={<EmptyState />}
+    >
+      <EuiFlexGrid columns={3}>
+        {synonymSets.map(({ id, synonyms }) => (
+          <EuiFlexItem key={id}>
+            <SynonymCard id={id} synonyms={synonyms} />
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGrid>
+      <EuiSpacer />
+      <EuiPagination
+        pageCount={meta.page.total_pages}
+        activePage={meta.page.current - 1}
+        onPageClick={(pageIndex) => onPaginate(pageIndex + 1)}
       />
-      <FlashMessages />
-      <EuiPageContentBody>
-        <EuiSpacer size="s" />
-        {hasSynonyms ? (
-          <>
-            <EuiFlexGrid columns={3}>
-              {synonymSets.map(({ id, synonyms }) => (
-                <EuiFlexItem key={id}>
-                  <SynonymCard id={id} synonyms={synonyms} />
-                </EuiFlexItem>
-              ))}
-            </EuiFlexGrid>
-            <EuiSpacer />
-            <EuiPagination
-              pageCount={meta.page.total_pages}
-              activePage={meta.page.current - 1}
-              onPageClick={(pageIndex) => onPaginate(pageIndex + 1)}
-            />
-          </>
-        ) : (
-          <EmptyState />
-        )}
-        <SynonymModal />
-      </EuiPageContentBody>
-    </>
+      <SynonymModal />
+    </AppSearchPageTemplate>
   );
 };