Convert single Curation page to new page template

+ remove breadcrumb prop
elastic · Jun 21, 2021 · 119d2e0 · 119d2e0
1 parent e77c36e
commit 119d2e0
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 49 deletions.
diff --git a/...ise_search/public/applications/app_search/components/curations/curation/curation.test.tsx b/...ise_search/public/applications/app_search/components/curations/curation/curation.test.tsx
@@ -8,16 +8,13 @@
 import '../../../../__mocks__/shallow_useeffect.mock';
 import { setMockActions, setMockValues } from '../../../../__mocks__/kea_logic';
 import { mockUseParams } from '../../../../__mocks__/react_router';
+import '../../../__mocks__/engine_logic.mock';
 
 import React from 'react';
 
 import { shallow, ShallowWrapper } from 'enzyme';
 
-import { EuiPageHeader } from '@elastic/eui';
-
-import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
-import { Loading } from '../../../../shared/loading';
-import { rerender } from '../../../../test_helpers';
+import { rerender, getPageTitle, getPageHeaderActions } from '../../../../test_helpers';
 
 jest.mock('./curation_logic', () => ({ CurationLogic: jest.fn() }));
 import { CurationLogic } from './curation_logic';
@@ -27,9 +24,6 @@ import { AddResultFlyout } from './results';
 import { Curation } from './';
 
 describe('Curation', () => {
-  const props = {
-    curationsBreadcrumb: ['Engines', 'some-engine', 'Curations'],
-  };
   const values = {
     dataLoading: false,
     queries: ['query A', 'query B'],
@@ -47,39 +41,34 @@ describe('Curation', () => {
   });
 
   it('renders', () => {
-    const wrapper = shallow(<Curation {...props} />);
+    const wrapper = shallow(<Curation />);
 
-    expect(wrapper.find(EuiPageHeader).prop('pageTitle')).toEqual('Manage curation');
-    expect(wrapper.find(SetPageChrome).prop('trail')).toEqual([
-      ...props.curationsBreadcrumb,
+    expect(getPageTitle(wrapper)).toEqual('Manage curation');
+    expect(wrapper.prop('pageChrome')).toEqual([
+      'Engines',
+      'some-engine',
+      'Curations',
       'query A, query B',
     ]);
   });
 
-  it('renders a loading component on page load', () => {
-    setMockValues({ ...values, dataLoading: true });
-    const wrapper = shallow(<Curation {...props} />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
   it('renders the add result flyout when open', () => {
     setMockValues({ ...values, isFlyoutOpen: true });
-    const wrapper = shallow(<Curation {...props} />);
+    const wrapper = shallow(<Curation />);
 
     expect(wrapper.find(AddResultFlyout)).toHaveLength(1);
   });
 
   it('initializes CurationLogic with a curationId prop from URL param', () => {
     mockUseParams.mockReturnValueOnce({ curationId: 'hello-world' });
-    shallow(<Curation {...props} />);
+    shallow(<Curation />);
 
     expect(CurationLogic).toHaveBeenCalledWith({ curationId: 'hello-world' });
   });
 
   it('calls loadCuration on page load & whenever the curationId URL param changes', () => {
     mockUseParams.mockReturnValueOnce({ curationId: 'cur-123456789' });
-    const wrapper = shallow(<Curation {...props} />);
+    const wrapper = shallow(<Curation />);
     expect(actions.loadCuration).toHaveBeenCalledTimes(1);
 
     mockUseParams.mockReturnValueOnce({ curationId: 'cur-987654321' });
@@ -92,9 +81,8 @@ describe('Curation', () => {
     let confirmSpy: jest.SpyInstance;
 
     beforeAll(() => {
-      const wrapper = shallow(<Curation {...props} />);
-      const headerActions = wrapper.find(EuiPageHeader).prop('rightSideItems');
-      restoreDefaultsButton = shallow(headerActions![0] as React.ReactElement);
+      const wrapper = shallow(<Curation />);
+      restoreDefaultsButton = getPageHeaderActions(wrapper).childAt(0);
 
       confirmSpy = jest.spyOn(window, 'confirm');
     });

diff --git a/...terprise_search/public/applications/app_search/components/curations/curation/curation.tsx b/...terprise_search/public/applications/app_search/components/curations/curation/curation.tsx
@@ -10,26 +10,19 @@ import { useParams } from 'react-router-dom';
 
 import { useValues, useActions } from 'kea';
 
-import { EuiPageHeader, EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
-
-import { FlashMessages } from '../../../../shared/flash_messages';
-import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
-import { BreadcrumbTrail } from '../../../../shared/kibana_chrome/generate_breadcrumbs';
-import { Loading } from '../../../../shared/loading';
+import { EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
 
 import { RESTORE_DEFAULTS_BUTTON_LABEL } from '../../../constants';
+import { AppSearchPageTemplate } from '../../layout';
 import { MANAGE_CURATION_TITLE, RESTORE_CONFIRMATION } from '../constants';
+import { getCurationsBreadcrumbs } from '../utils';
 
 import { CurationLogic } from './curation_logic';
 import { PromotedDocuments, OrganicDocuments, HiddenDocuments } from './documents';
 import { ActiveQuerySelect, ManageQueriesModal } from './queries';
 import { AddResultLogic, AddResultFlyout } from './results';
 
-interface Props {
-  curationsBreadcrumb: BreadcrumbTrail;
-}
-
-export const Curation: React.FC<Props> = ({ curationsBreadcrumb }) => {
+export const Curation: React.FC = () => {
   const { curationId } = useParams() as { curationId: string };
   const { loadCuration, resetCuration } = useActions(CurationLogic({ curationId }));
   const { dataLoading, queries } = useValues(CurationLogic({ curationId }));
@@ -39,14 +32,12 @@ export const Curation: React.FC<Props> = ({ curationsBreadcrumb }) => {
     loadCuration();
   }, [curationId]);
 
-  if (dataLoading) return <Loading />;
-
   return (
-    <>
-      <SetPageChrome trail={[...curationsBreadcrumb, queries.join(', ')]} />
-      <EuiPageHeader
-        pageTitle={MANAGE_CURATION_TITLE}
-        rightSideItems={[
+    <AppSearchPageTemplate
+      pageChrome={getCurationsBreadcrumbs([queries.join(', ')])}
+      pageHeader={{
+        pageTitle: MANAGE_CURATION_TITLE,
+        rightSideItems: [
           <EuiButton
             color="danger"
             onClick={() => {
@@ -55,10 +46,10 @@ export const Curation: React.FC<Props> = ({ curationsBreadcrumb }) => {
           >
             {RESTORE_DEFAULTS_BUTTON_LABEL}
           </EuiButton>,
-        ]}
-        responsive={false}
-      />
-
+        ],
+      }}
+      isLoading={dataLoading}
+    >
       <EuiFlexGroup alignItems="flexEnd" gutterSize="xl" responsive={false}>
         <EuiFlexItem>
           <ActiveQuerySelect />
@@ -69,7 +60,6 @@ export const Curation: React.FC<Props> = ({ curationsBreadcrumb }) => {
       </EuiFlexGroup>
 
       <EuiSpacer size="xl" />
-      <FlashMessages />
 
       <PromotedDocuments />
       <EuiSpacer />
@@ -78,6 +68,6 @@ export const Curation: React.FC<Props> = ({ curationsBreadcrumb }) => {
       <HiddenDocuments />
 
       {isFlyoutOpen && <AddResultFlyout />}
-    </>
+    </AppSearchPageTemplate>
   );
 };