[App Search] Convert Synonyms page to new page template (#102828)

* Convert Synonyms page to new page template * Update empty state for new page template - Remove EuiPanel wrapper - KibanaPageTemplate does that automatically for us - Include SynonymModal, required for header create button to work as expected * Update router * [UI polish] Proposed page description copy from Davey - see 9807bf2 * [UI polish] Add plus icon to create button - To match other create buttons across app
elastic · Jun 23, 2021 · 01ac8d2 · 01ac8d2
1 parent bb77fa6
commit 01ac8d2
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 82 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
@@ -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 = () => {
           <RelevanceTuning />
         </Route>
       )}
+      {canManageEngineSynonyms && (
+        <Route path={ENGINE_SYNONYMS_PATH}>
+          <Synonyms />
+        </Route>
+      )}
       {canManageEngineCurations && (
         <Route path={ENGINE_CURATIONS_PATH}>
           <CurationsRouter />
@@ -149,14 +152,6 @@ export const EngineRouter: React.FC = () => {
           <ApiLogs />
         </Route>
       )}
-      {/* TODO: Remove layout once page template migration is over */}
-      <Layout navigation={<AppSearchNav />}>
-        {canManageEngineSynonyms && (
-          <Route path={ENGINE_SYNONYMS_PATH}>
-            <Synonyms />
-          </Route>
-        )}
-      </Layout>
     </Switch>
   );
 };
diff --git a/...search/public/applications/app_search/components/synonyms/components/empty_state.test.tsx b/...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);
+  });
 });
diff --git a/...rise_search/public/applications/app_search/components/synonyms/components/empty_state.tsx b/...rise_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 />
+    </>
   );
 };
diff --git a/...ns/enterprise_search/public/applications/app_search/components/synonyms/synonyms.test.tsx b/...ns/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', () => {

diff --git a/...plugins/enterprise_search/public/applications/app_search/components/synonyms/synonyms.tsx b/...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={[
-          <EuiButton fill onClick={() => openModal(null)}>
+    <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 iconType="plusInCircle" 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>
   );
 };