Add EngineRouter logic

- useEffect init
- redirect/data loading
- setQueuedErrorMessage helper

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

@@ -5,18 +5,68 @@
  */
 
 import '../../../__mocks__/react_router_history.mock';
-import { setMockValues } from '../../../__mocks__/kea.mock';
+import { unmountHandler } from '../../../__mocks__/shallow_useeffect.mock';
+import { setMockValues, setMockActions } from '../../../__mocks__/kea.mock';
 
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { Switch, useParams } from 'react-router-dom';
+import { Switch, Redirect, useParams } from 'react-router-dom';
 import { EuiBadge } from '@elastic/eui';
 
+jest.mock('../../../shared/flash_messages', () => ({
+  setQueuedErrorMessage: jest.fn(),
+}));
+import { setQueuedErrorMessage } from '../../../shared/flash_messages';
+
 import { EngineRouter, EngineNav } from './';
 
 describe('EngineRouter', () => {
+  const values = { dataLoading: false, engineNotFound: false, myRole: {} };
+  const actions = { setEngineName: jest.fn(), initializeEngine: jest.fn(), clearEngine: jest.fn() };
+
+  beforeEach(() => {
+    setMockValues(values);
+    setMockActions(actions);
+  });
+
+  describe('useEffect', () => {
+    beforeEach(() => {
+      (useParams as jest.Mock).mockReturnValue({ engineName: 'some-engine' });
+      shallow(<EngineRouter />);
+    });
+
+    it('sets engineName based on the current route parameters', () => {
+      expect(actions.setEngineName).toHaveBeenCalledWith('some-engine');
+    });
+
+    it('initializes/fetches engine API data', () => {
+      expect(actions.initializeEngine).toHaveBeenCalled();
+    });
+
+    it('clears engine on unmount', () => {
+      unmountHandler();
+      expect(actions.clearEngine).toHaveBeenCalled();
+    });
+  });
+
+  it('redirects to engines list and flashes an error if the engine param was not found', () => {
+    (useParams as jest.Mock).mockReturnValue({ engineName: '404-engine' });
+    setMockValues({ ...values, engineNotFound: true });
+    const wrapper = shallow(<EngineRouter />);
+
+    expect(wrapper.find(Redirect).prop('to')).toEqual('/engines');
+    expect(setQueuedErrorMessage).toHaveBeenCalledWith(
+      "No engine with name '404-engine' could be found."
+    );
+  });
+
+  it('does not render if async data is still loading', () => {
+    setMockValues({ ...values, dataLoading: true });
+    const wrapper = shallow(<EngineRouter />);
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+
   it('renders a default engine overview', () => {
-    setMockValues({ myRole: {} });
     const wrapper = shallow(<EngineRouter />);
 
     expect(wrapper.find(Switch)).toHaveLength(1);

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

@@ -4,18 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { Route, Switch, useParams } from 'react-router-dom';
-import { useValues } from 'kea';
+import React, { useEffect } from 'react';
+import { Route, Switch, Redirect, useParams } from 'react-router-dom';
+import { useValues, useActions } from 'kea';
 
 import { EuiText, EuiBadge } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { SideNavLink, SideNavItem } from '../../../shared/layout';
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+import { setQueuedErrorMessage } from '../../../shared/flash_messages';
 import { AppLogic } from '../../app_logic';
 import {
   getEngineRoute,
+  ENGINES_PATH,
   ENGINE_PATH,
   ENGINE_ANALYTICS_PATH,
   ENGINE_DOCUMENTS_PATH,
@@ -45,18 +47,39 @@ import {
   API_LOGS_TITLE,
 } from './constants';
 
+import { EngineLogic } from './';
+
 import './engine_nav.scss';
 
 export const EngineRouter: React.FC = () => {
   const {
     myRole: { canViewEngineAnalytics },
   } = useValues(AppLogic);
 
-  // TODO: EngineLogic
+  const { dataLoading, engineNotFound } = useValues(EngineLogic);
+  const { setEngineName, initializeEngine, clearEngine } = useActions(EngineLogic);
 
   const { engineName } = useParams() as { engineName: string };
   const engineBreadcrumb = [ENGINES_TITLE, engineName];
 
+  useEffect(() => {
+    setEngineName(engineName);
+    initializeEngine();
+    return clearEngine;
+  }, [engineName]);
+
+  if (engineNotFound) {
+    setQueuedErrorMessage(
+      i18n.translate('xpack.enterpriseSearch.appSearch.engine.notFound', {
+        defaultMessage: "No engine with name '{engineName}' could be found.",
+        values: { engineName },
+      })
+    );
+    return <Redirect to={ENGINES_PATH} />;
+  }
+
+  if (dataLoading) return null;
+
   return (
     // TODO: Add more routes as we migrate them
     <Switch>

x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/index.ts

@@ -7,4 +7,9 @@
 export { FlashMessages } from './flash_messages';
 export { FlashMessagesLogic, IFlashMessage, mountFlashMessagesLogic } from './flash_messages_logic';
 export { flashAPIErrors } from './handle_api_errors';
-export { setSuccessMessage, setErrorMessage, setQueuedSuccessMessage } from './set_message_helpers';
+export {
+  setSuccessMessage,
+  setErrorMessage,
+  setQueuedSuccessMessage,
+  setQueuedErrorMessage,
+} from './set_message_helpers';

x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/set_message_helpers.test.ts

@@ -15,6 +15,7 @@ import {
   setSuccessMessage,
   setErrorMessage,
   setQueuedSuccessMessage,
+  setQueuedErrorMessage,
 } from './';
 
 describe('Flash Message Helpers', () => {
@@ -56,4 +57,15 @@ describe('Flash Message Helpers', () => {
       },
     ]);
   });
+
+  it('setQueuedErrorMessage()', () => {
+    setQueuedErrorMessage(message);
+
+    expect(FlashMessagesLogic.values.queuedMessages).toEqual([
+      {
+        message,
+        type: 'error',
+      },
+    ]);
+  });
 });

x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/set_message_helpers.ts

@@ -26,3 +26,10 @@ export const setQueuedSuccessMessage = (message: string) => {
     message,
   });
 };
+
+export const setQueuedErrorMessage = (message: string) => {
+  FlashMessagesLogic.actions.setQueuedMessages({
+    type: 'error',
+    message,
+  });
+};