Convert Engine Overview pages to new page template

elastic · Jun 20, 2021 · 9dc3392 · 9dc3392
1 parent 4fc44bf
commit 9dc3392
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 39 deletions.
diff --git a/...search/public/applications/app_search/components/engine_overview/engine_overview.test.tsx b/...search/public/applications/app_search/components/engine_overview/engine_overview.test.tsx
@@ -12,8 +12,6 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { Loading } from '../../../shared/loading';
-
 import { EmptyEngineOverview } from './engine_overview_empty';
 import { EngineOverviewMetrics } from './engine_overview_metrics';
 
@@ -46,10 +44,10 @@ describe('EngineOverview', () => {
     expect(actions.pollForOverviewMetrics).toHaveBeenCalledTimes(1);
   });
 
-  it('renders a loading component if async data is still loading', () => {
+  it('renders a loading page template if async data is still loading', () => {
     setMockValues({ ...values, dataLoading: true });
     const wrapper = shallow(<EngineOverview />);
-    expect(wrapper.find(Loading)).toHaveLength(1);
+    expect(wrapper.prop('isLoading')).toEqual(true);
   });
 
   describe('EmptyEngineOverview', () => {

diff --git a/...rise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx b/...rise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx
@@ -9,9 +9,9 @@ import React, { useEffect } from 'react';
 
 import { useActions, useValues } from 'kea';
 
-import { Loading } from '../../../shared/loading';
 import { AppLogic } from '../../app_logic';
 import { EngineLogic } from '../engine';
+import { AppSearchPageTemplate } from '../layout';
 
 import { EmptyEngineOverview } from './engine_overview_empty';
 
@@ -32,9 +32,7 @@ export const EngineOverview: React.FC = () => {
     pollForOverviewMetrics();
   }, []);
 
-  if (dataLoading) {
-    return <Loading />;
-  }
+  if (dataLoading) return <AppSearchPageTemplate isLoading />;
 
   const engineHasDocuments = documentCount > 0;
   const canAddDocuments = canManageEngineDocuments && canViewEngineCredentials;

diff --git a/.../public/applications/app_search/components/engine_overview/engine_overview_empty.test.tsx b/.../public/applications/app_search/components/engine_overview/engine_overview_empty.test.tsx
@@ -5,13 +5,16 @@
  * 2.0.
  */
 
+import '../../__mocks__/engine_logic.mock';
+
 import React from 'react';
 
 import { shallow, ShallowWrapper } from 'enzyme';
 
-import { EuiPageHeader, EuiButton } from '@elastic/eui';
+import { EuiButton } from '@elastic/eui';
 
 import { docLinks } from '../../../shared/doc_links';
+import { getPageTitle, getPageHeaderActions } from '../../../test_helpers';
 
 import { DocumentCreationButtons, DocumentCreationFlyout } from '../document_creation';
 
@@ -25,12 +28,13 @@ describe('EmptyEngineOverview', () => {
   });
 
   it('renders', () => {
-    expect(wrapper.find(EuiPageHeader).prop('pageTitle')).toEqual('Engine setup');
+    expect(getPageTitle(wrapper)).toEqual('Engine setup');
   });
 
   it('renders a documentation link', () => {
-    const header = wrapper.find(EuiPageHeader).dive().children().dive();
-    expect(header.find(EuiButton).prop('href')).toEqual(`${docLinks.appSearchBase}/index.html`);
+    expect(getPageHeaderActions(wrapper).find(EuiButton).prop('href')).toEqual(
+      `${docLinks.appSearchBase}/index.html`
+    );
   });
 
   it('renders document creation components', () => {

diff --git a/...earch/public/applications/app_search/components/engine_overview/engine_overview_empty.tsx b/...earch/public/applications/app_search/components/engine_overview/engine_overview_empty.tsx
@@ -7,35 +7,37 @@
 
 import React from 'react';
 
-import { EuiPageHeader, EuiPageContentBody, EuiButton } from '@elastic/eui';
+import { EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { FlashMessages } from '../../../shared/flash_messages';
 import { DOCS_PREFIX } from '../../routes';
 import { DocumentCreationButtons, DocumentCreationFlyout } from '../document_creation';
 
+import { getEngineBreadcrumbs } from '../engine';
+import { AppSearchPageTemplate } from '../layout';
+
 export const EmptyEngineOverview: React.FC = () => {
   return (
-    <>
-      <EuiPageHeader
-        pageTitle={i18n.translate(
+    <AppSearchPageTemplate
+      pageChrome={getEngineBreadcrumbs()}
+      pageHeader={{
+        pageTitle: i18n.translate(
           'xpack.enterpriseSearch.appSearch.engine.overview.empty.heading',
           { defaultMessage: 'Engine setup' }
-        )}
-        rightSideItems={[
+        ),
+        rightSideItems: [
           <EuiButton href={`${DOCS_PREFIX}/index.html`} target="_blank" iconType="popout">
             {i18n.translate(
               'xpack.enterpriseSearch.appSearch.engine.overview.empty.headingAction',
               { defaultMessage: 'View documentation' }
             )}
           </EuiButton>,
-        ]}
-      />
-      <FlashMessages />
-      <EuiPageContentBody>
-        <DocumentCreationButtons />
-        <DocumentCreationFlyout />
-      </EuiPageContentBody>
-    </>
+        ],
+      }}
+      pageContentBodyProps={{ paddingSize: 's' }}
+    >
+      <DocumentCreationButtons />
+      <DocumentCreationFlyout />
+    </AppSearchPageTemplate>
   );
 };
diff --git a/...ublic/applications/app_search/components/engine_overview/engine_overview_metrics.test.tsx b/...ublic/applications/app_search/components/engine_overview/engine_overview_metrics.test.tsx
@@ -5,11 +5,13 @@
  * 2.0.
  */
 
+import '../../__mocks__/engine_logic.mock';
+
 import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiPageHeader } from '@elastic/eui';
+import { getPageTitle } from '../../../test_helpers';
 
 import { TotalStats, TotalCharts, RecentApiLogs } from './components';
 import { EngineOverviewMetrics } from './engine_overview_metrics';
@@ -18,7 +20,7 @@ describe('EngineOverviewMetrics', () => {
   it('renders', () => {
     const wrapper = shallow(<EngineOverviewMetrics />);
 
-    expect(wrapper.find(EuiPageHeader).prop('pageTitle')).toEqual('Engine overview');
+    expect(getPageTitle(wrapper)).toEqual('Engine overview');
     expect(wrapper.find(TotalStats)).toHaveLength(1);
     expect(wrapper.find(TotalCharts)).toHaveLength(1);
     expect(wrapper.find(RecentApiLogs)).toHaveLength(1);

diff --git a/...rch/public/applications/app_search/components/engine_overview/engine_overview_metrics.tsx b/...rch/public/applications/app_search/components/engine_overview/engine_overview_metrics.tsx
@@ -7,23 +7,24 @@
 
 import React from 'react';
 
-import { EuiFlexGroup, EuiFlexItem, EuiPageHeader, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { FlashMessages } from '../../../shared/flash_messages';
+import { getEngineBreadcrumbs } from '../engine';
+import { AppSearchPageTemplate } from '../layout';
 
 import { TotalStats, TotalCharts, RecentApiLogs } from './components';
 
 export const EngineOverviewMetrics: React.FC = () => {
   return (
-    <>
-      <EuiPageHeader
-        pageTitle={i18n.translate('xpack.enterpriseSearch.appSearch.engine.overview.heading', {
+    <AppSearchPageTemplate
+      pageChrome={getEngineBreadcrumbs()}
+      pageHeader={{
+        pageTitle: i18n.translate('xpack.enterpriseSearch.appSearch.engine.overview.heading', {
           defaultMessage: 'Engine overview',
-        })}
-      />
-      <FlashMessages />
-
+        }),
+      }}
+    >
       <EuiFlexGroup>
         <EuiFlexItem grow={1}>
           <TotalStats />
@@ -34,6 +35,6 @@ export const EngineOverviewMetrics: React.FC = () => {
       </EuiFlexGroup>
       <EuiSpacer size="xl" />
       <RecentApiLogs />
-    </>
+    </AppSearchPageTemplate>
   );
 };