From 6b336c1520bcf0900e61908e8e8163b13af8e831 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Sat, 19 Jun 2021 13:56:11 -0700
Subject: [PATCH] Update routers

- To facilitate this being broken up into multiple PRs, non-migrated views still get a wrapping layout
---
 .../components/engine/engine_router.test.tsx  |   9 +-
 .../components/engine/engine_router.tsx       | 136 +++++++++---------
 .../public/applications/app_search/index.tsx  |   6 +-
 3 files changed, 77 insertions(+), 74 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.test.tsx
index b74c31adca4386..ee1c0578debfc0 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.test.tsx
@@ -19,7 +19,6 @@ import { Switch, Redirect } from 'react-router-dom';
 
 import { shallow } from 'enzyme';
 
-import { Loading } from '../../../shared/loading';
 import { AnalyticsRouter } from '../analytics';
 import { ApiLogs } from '../api_logs';
 import { CrawlerRouter } from '../crawler';
@@ -80,20 +79,20 @@ describe('EngineRouter', () => {
     );
   });
 
-  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(<EngineRouter />);
-    expect(wrapper.find(Loading)).toHaveLength(1);
+    expect(wrapper.prop('isLoading')).toEqual(true);
   });
 
   // This would happen if a user jumps around from one engine route to another. If the engine name
   // on the path has changed, but we still have an engine stored in state, we do not want to load
   // any route views as they would be rendering with the wrong data.
-  it('renders a loading component if the engine stored in state is stale', () => {
+  it('renders a loading page template if the engine stored in state is stale', () => {
     setMockValues({ ...values, engineName: 'some-engine' });
     mockUseParams.mockReturnValue({ engineName: 'some-new-engine' });
     const wrapper = shallow(<EngineRouter />);
-    expect(wrapper.find(Loading)).toHaveLength(1);
+    expect(wrapper.prop('isLoading')).toEqual(true);
   });
 
   it('renders a default engine overview', () => {
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
index 40cc2ef0368c05..6510e99a000fc5 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
@@ -13,11 +13,12 @@ import { useValues, useActions } from 'kea';
 import { i18n } from '@kbn/i18n';
 
 import { setQueuedErrorMessage } from '../../../shared/flash_messages';
-import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-import { Loading } from '../../../shared/loading';
+import { Layout } from '../../../shared/layout';
 import { AppLogic } from '../../app_logic';
+import { AppSearchNav } from '../../index';
 
 import {
+  ENGINE_PATH,
   ENGINES_PATH,
   ENGINE_ANALYTICS_PATH,
   ENGINE_DOCUMENTS_PATH,
@@ -38,6 +39,7 @@ import { CrawlerRouter } from '../crawler';
 import { CurationsRouter } from '../curations';
 import { DocumentDetail, Documents } from '../documents';
 import { EngineOverview } from '../engine_overview';
+import { AppSearchPageTemplate } from '../layout';
 import { RelevanceTuning } from '../relevance_tuning';
 import { ResultSettings } from '../result_settings';
 import { SchemaRouter } from '../schema';
@@ -45,7 +47,7 @@ import { SearchUI } from '../search_ui';
 import { SourceEngines } from '../source_engines';
 import { Synonyms } from '../synonyms';
 
-import { EngineLogic, getEngineBreadcrumbs } from './';
+import { EngineLogic } from './';
 
 export const EngineRouter: React.FC = () => {
   const {
@@ -85,74 +87,76 @@ export const EngineRouter: React.FC = () => {
   }
 
   const isLoadingNewEngine = engineName !== engineNameFromUrl;
-  if (isLoadingNewEngine || dataLoading) return <Loading />;
+  if (isLoadingNewEngine || dataLoading) return <AppSearchPageTemplate isLoading />;
 
   return (
     <Switch>
-      {canViewEngineAnalytics && (
-        <Route path={ENGINE_ANALYTICS_PATH}>
-          <AnalyticsRouter />
-        </Route>
-      )}
-      {canViewEngineDocuments && (
-        <Route path={ENGINE_DOCUMENT_DETAIL_PATH}>
-          <DocumentDetail />
-        </Route>
-      )}
-      {canViewEngineDocuments && (
-        <Route path={ENGINE_DOCUMENTS_PATH}>
-          <Documents />
-        </Route>
-      )}
-      {canViewEngineSchema && (
-        <Route path={ENGINE_SCHEMA_PATH}>
-          <SchemaRouter />
-        </Route>
-      )}
-      {canManageEngineCurations && (
-        <Route path={ENGINE_CURATIONS_PATH}>
-          <CurationsRouter />
-        </Route>
-      )}
-      {canManageEngineRelevanceTuning && (
-        <Route path={ENGINE_RELEVANCE_TUNING_PATH}>
-          <RelevanceTuning />
-        </Route>
-      )}
-      {canManageEngineSynonyms && (
-        <Route path={ENGINE_SYNONYMS_PATH}>
-          <Synonyms />
-        </Route>
-      )}
-      {canManageEngineResultSettings && (
-        <Route path={ENGINE_RESULT_SETTINGS_PATH}>
-          <ResultSettings />
-        </Route>
-      )}
-      {canViewEngineApiLogs && (
-        <Route path={ENGINE_API_LOGS_PATH}>
-          <ApiLogs />
-        </Route>
-      )}
-      {canManageEngineSearchUi && (
-        <Route path={ENGINE_SEARCH_UI_PATH}>
-          <SearchUI />
-        </Route>
-      )}
-      {canViewMetaEngineSourceEngines && (
-        <Route path={META_ENGINE_SOURCE_ENGINES_PATH}>
-          <SourceEngines />
-        </Route>
-      )}
-      {canViewEngineCrawler && (
-        <Route path={ENGINE_CRAWLER_PATH}>
-          <CrawlerRouter />
-        </Route>
-      )}
-      <Route>
-        <SetPageChrome trail={getEngineBreadcrumbs()} />
+      <Route exact path={ENGINE_PATH}>
         <EngineOverview />
       </Route>
+      {/* TODO: Remove layout once page template migration is over */}
+      <Layout navigation={<AppSearchNav />}>
+        {canViewEngineAnalytics && (
+          <Route path={ENGINE_ANALYTICS_PATH}>
+            <AnalyticsRouter />
+          </Route>
+        )}
+        {canViewEngineDocuments && (
+          <Route path={ENGINE_DOCUMENT_DETAIL_PATH}>
+            <DocumentDetail />
+          </Route>
+        )}
+        {canViewEngineDocuments && (
+          <Route path={ENGINE_DOCUMENTS_PATH}>
+            <Documents />
+          </Route>
+        )}
+        {canViewEngineSchema && (
+          <Route path={ENGINE_SCHEMA_PATH}>
+            <SchemaRouter />
+          </Route>
+        )}
+        {canManageEngineCurations && (
+          <Route path={ENGINE_CURATIONS_PATH}>
+            <CurationsRouter />
+          </Route>
+        )}
+        {canManageEngineRelevanceTuning && (
+          <Route path={ENGINE_RELEVANCE_TUNING_PATH}>
+            <RelevanceTuning />
+          </Route>
+        )}
+        {canManageEngineSynonyms && (
+          <Route path={ENGINE_SYNONYMS_PATH}>
+            <Synonyms />
+          </Route>
+        )}
+        {canManageEngineResultSettings && (
+          <Route path={ENGINE_RESULT_SETTINGS_PATH}>
+            <ResultSettings />
+          </Route>
+        )}
+        {canViewEngineApiLogs && (
+          <Route path={ENGINE_API_LOGS_PATH}>
+            <ApiLogs />
+          </Route>
+        )}
+        {canManageEngineSearchUi && (
+          <Route path={ENGINE_SEARCH_UI_PATH}>
+            <SearchUI />
+          </Route>
+        )}
+        {canViewMetaEngineSourceEngines && (
+          <Route path={META_ENGINE_SOURCE_ENGINES_PATH}>
+            <SourceEngines />
+          </Route>
+        )}
+        {canViewEngineCrawler && (
+          <Route path={ENGINE_CRAWLER_PATH}>
+            <CrawlerRouter />
+          </Route>
+        )}
+      </Layout>
     </Switch>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
index caf0f805e8ca7e..e66e64b3399daf 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
@@ -92,6 +92,9 @@ export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) =
           <Library />
         </Route>
       )}
+      <Route path={ENGINE_PATH}>
+        <EngineRouter />
+      </Route>
       {canViewRoleMappings && (
         <Route path={ROLE_MAPPINGS_PATH}>
           <RoleMappings />
@@ -106,9 +109,6 @@ export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) =
             <Route exact path={ENGINES_PATH}>
               <EnginesOverview />
             </Route>
-            <Route path={ENGINE_PATH}>
-              <EngineRouter />
-            </Route>
             <Route exact path={SETTINGS_PATH}>
               <Settings />
             </Route>