[App Search] Migrate Source Engines & Crawler pages to new page template (#102848)

* Convert meta engines Source Engines view to new page template

* Convert CrawlerLanding to new page template

* Convert CrawlerOverview to new page template

* Update routers

* Misc Source Engines UI polish

- move away from color=secondary, EUI is eventually deprecating it
- add (+) icon to match other views

* Fix bad merge conflict

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_landing.tsx

@@ -7,29 +7,25 @@
 
 import React from 'react';
 
-import {
-  EuiButton,
-  EuiLink,
-  EuiPageHeader,
-  EuiPanel,
-  EuiSpacer,
-  EuiText,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiButton, EuiLink, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { getAppSearchUrl } from '../../../shared/enterprise_search_url';
 import { DOCS_PREFIX, ENGINE_CRAWLER_PATH } from '../../routes';
-import { generateEnginePath } from '../engine';
+import { generateEnginePath, getEngineBreadcrumbs } from '../engine';
+import { AppSearchPageTemplate } from '../layout';
 
 import './crawler_landing.scss';
 import { CRAWLER_TITLE } from '.';
 
 export const CrawlerLanding: React.FC = () => (
-  <div data-test-subj="CrawlerLanding" className="crawlerLanding">
-    <EuiPageHeader pageTitle={CRAWLER_TITLE} />
-    <EuiSpacer />
-    <EuiPanel grow paddingSize="l" className="crawlerLanding__panel">
+  <AppSearchPageTemplate
+    pageChrome={getEngineBreadcrumbs([CRAWLER_TITLE])}
+    pageHeader={{ pageTitle: CRAWLER_TITLE }}
+    className="crawlerLanding"
+    data-test-subj="CrawlerLanding"
+  >
+    <EuiPanel hasBorder paddingSize="l" className="crawlerLanding__panel">
       <div className="crawlerLanding__wrapper">
         <EuiTitle size="s">
           <h2>
@@ -81,5 +77,5 @@ export const CrawlerLanding: React.FC = () => (
         <EuiSpacer size="xl" />
       </div>
     </EuiPanel>
-  </div>
+  </AppSearchPageTemplate>
 );

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_overview.test.tsx

@@ -7,14 +7,12 @@
 
 import { setMockActions, setMockValues } from '../../../__mocks__/kea_logic';
 import '../../../__mocks__/shallow_useeffect.mock';
+import '../../__mocks__/engine_logic.mock';
 
 import React from 'react';
 
 import { shallow, ShallowWrapper } from 'enzyme';
 
-import { Loading } from '../../../shared/loading';
-import { rerender } from '../../../test_helpers';
-
 import { DomainsTable } from './components/domains_table';
 import { CrawlerOverview } from './crawler_overview';
 
@@ -50,11 +48,4 @@ describe('CrawlerOverview', () => {
 
     // TODO test for empty state after it is built in a future PR
   });
-
-  it('shows a loading state when data is loading', () => {
-    setMockValues({ dataLoading: true });
-    rerender(wrapper);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
 });

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_overview.tsx

@@ -9,10 +9,8 @@ import React, { useEffect } from 'react';
 
 import { useActions, useValues } from 'kea';
 
-import { EuiPageHeader } from '@elastic/eui';
-
-import { FlashMessages } from '../../../shared/flash_messages';
-import { Loading } from '../../../shared/loading';
+import { getEngineBreadcrumbs } from '../engine';
+import { AppSearchPageTemplate } from '../layout';
 
 import { DomainsTable } from './components/domains_table';
 import { CRAWLER_TITLE } from './constants';
@@ -27,15 +25,13 @@ export const CrawlerOverview: React.FC = () => {
     fetchCrawlerData();
   }, []);
 
-  if (dataLoading) {
-    return <Loading />;
-  }
-
   return (
-    <>
-      <EuiPageHeader pageTitle={CRAWLER_TITLE} />
-      <FlashMessages />
+    <AppSearchPageTemplate
+      pageChrome={getEngineBreadcrumbs([CRAWLER_TITLE])}
+      pageHeader={{ pageTitle: CRAWLER_TITLE }}
+      isLoading={dataLoading}
+    >
       <DomainsTable />
-    </>
+    </AppSearchPageTemplate>
   );
 };

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_router.test.tsx

@@ -5,9 +5,6 @@
  * 2.0.
  */
 
-import { setMockValues } from '../../../__mocks__/kea_logic';
-import { mockEngineValues } from '../../__mocks__';
-
 import React from 'react';
 import { Switch } from 'react-router-dom';
 
@@ -22,7 +19,6 @@ describe('CrawlerRouter', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
-    setMockValues({ ...mockEngineValues });
   });
 
   afterEach(() => {

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_router.tsx

@@ -8,11 +8,6 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 
-import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-
-import { getEngineBreadcrumbs } from '../engine';
-
-import { CRAWLER_TITLE } from './constants';
 import { CrawlerLanding } from './crawler_landing';
 import { CrawlerOverview } from './crawler_overview';
 
@@ -20,7 +15,6 @@ export const CrawlerRouter: React.FC = () => {
   return (
     <Switch>
       <Route>
-        <SetPageChrome trail={getEngineBreadcrumbs([CRAWLER_TITLE])} />
         {process.env.NODE_ENV === 'development' ? <CrawlerOverview /> : <CrawlerLanding />}
       </Route>
     </Switch>

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

@@ -114,6 +114,16 @@ export const EngineRouter: React.FC = () => {
           <SchemaRouter />
         </Route>
       )}
+      {canViewMetaEngineSourceEngines && (
+        <Route path={META_ENGINE_SOURCE_ENGINES_PATH}>
+          <SourceEngines />
+        </Route>
+      )}
+      {canViewEngineCrawler && (
+        <Route path={ENGINE_CRAWLER_PATH}>
+          <CrawlerRouter />
+        </Route>
+      )}
       {canManageEngineRelevanceTuning && (
         <Route path={ENGINE_RELEVANCE_TUNING_PATH}>
           <RelevanceTuning />
@@ -146,16 +156,6 @@ export const EngineRouter: React.FC = () => {
             <Synonyms />
           </Route>
         )}
-        {canViewMetaEngineSourceEngines && (
-          <Route path={META_ENGINE_SOURCE_ENGINES_PATH}>
-            <SourceEngines />
-          </Route>
-        )}
-        {canViewEngineCrawler && (
-          <Route path={ENGINE_CRAWLER_PATH}>
-            <CrawlerRouter />
-          </Route>
-        )}
       </Layout>
     </Switch>
   );

x-pack/plugins/enterprise_search/public/applications/app_search/components/source_engines/components/add_source_engines_button.tsx

@@ -18,7 +18,7 @@ export const AddSourceEnginesButton: React.FC = () => {
   const { openModal } = useActions(SourceEnginesLogic);
 
   return (
-    <EuiButton color="secondary" fill onClick={openModal}>
+    <EuiButton fill iconType="plusInCircle" onClick={openModal}>
       {ADD_SOURCE_ENGINES_BUTTON_LABEL}
     </EuiButton>
   );

x-pack/plugins/enterprise_search/public/applications/app_search/components/source_engines/source_engines.test.tsx

@@ -11,11 +11,9 @@ import '../../__mocks__/engine_logic.mock';
 
 import React from 'react';
 
-import { shallow, ShallowWrapper } from 'enzyme';
+import { shallow } from 'enzyme';
 
-import { EuiPageHeader } from '@elastic/eui';
-
-import { Loading } from '../../../shared/loading';
+import { getPageHeaderActions } from '../../../test_helpers';
 
 import { AddSourceEnginesButton, AddSourceEnginesModal, SourceEnginesTable } from './components';
 
@@ -61,20 +59,10 @@ describe('SourceEngines', () => {
     expect(wrapper.find(AddSourceEnginesModal)).toHaveLength(1);
   });
 
-  it('renders a loading component before data has loaded', () => {
-    setMockValues({ ...MOCK_VALUES, dataLoading: true });
-    const wrapper = shallow(<SourceEngines />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
   describe('page actions', () => {
-    const getPageHeader = (wrapper: ShallowWrapper) =>
-      wrapper.find(EuiPageHeader).dive().children().dive();
-
     it('contains a button to add source engines', () => {
       const wrapper = shallow(<SourceEngines />);
-      expect(getPageHeader(wrapper).find(AddSourceEnginesButton)).toHaveLength(1);
+      expect(getPageHeaderActions(wrapper).find(AddSourceEnginesButton)).toHaveLength(1);
     });
 
     it('hides the add source engines button if the user does not have permissions', () => {
@@ -86,7 +74,7 @@ describe('SourceEngines', () => {
       });
       const wrapper = shallow(<SourceEngines />);
 
-      expect(getPageHeader(wrapper).find(AddSourceEnginesButton)).toHaveLength(0);
+      expect(getPageHeaderActions(wrapper).find(AddSourceEnginesButton)).toHaveLength(0);
     });
   });
 });

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

@@ -9,13 +9,11 @@ import React, { useEffect } from 'react';
 
 import { useActions, useValues } from 'kea';
 
-import { EuiPageHeader, EuiPageContent } from '@elastic/eui';
+import { EuiPanel } from '@elastic/eui';
 
-import { FlashMessages } from '../../../shared/flash_messages';
-import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-import { Loading } from '../../../shared/loading';
 import { AppLogic } from '../../app_logic';
 import { getEngineBreadcrumbs } from '../engine';
+import { AppSearchPageTemplate } from '../layout';
 
 import { AddSourceEnginesButton, AddSourceEnginesModal, SourceEnginesTable } from './components';
 import { SOURCE_ENGINES_TITLE } from './i18n';
@@ -33,20 +31,19 @@ export const SourceEngines: React.FC = () => {
     fetchSourceEngines();
   }, []);
 
-  if (dataLoading) return <Loading />;
-
   return (
-    <>
-      <SetPageChrome trail={getEngineBreadcrumbs([SOURCE_ENGINES_TITLE])} />
-      <EuiPageHeader
-        pageTitle={SOURCE_ENGINES_TITLE}
-        rightSideItems={canManageMetaEngineSourceEngines ? [<AddSourceEnginesButton />] : []}
-      />
-      <FlashMessages />
-      <EuiPageContent hasBorder>
+    <AppSearchPageTemplate
+      pageChrome={getEngineBreadcrumbs([SOURCE_ENGINES_TITLE])}
+      pageHeader={{
+        pageTitle: SOURCE_ENGINES_TITLE,
+        rightSideItems: canManageMetaEngineSourceEngines ? [<AddSourceEnginesButton />] : [],
+      }}
+      isLoading={dataLoading}
+    >
+      <EuiPanel hasBorder>
         <SourceEnginesTable />
         {isModalOpen && <AddSourceEnginesModal />}
-      </EuiPageContent>
-    </>
+      </EuiPanel>
+    </AppSearchPageTemplate>
   );
 };