[Enterprise Search] Move header actions menu to be rendered after the main app + share its store

x-pack/plugins/enterprise_search/public/applications/__mocks__/index.ts

@@ -9,7 +9,7 @@ export { mockKibanaValues } from './kibana_logic.mock';
 export { mockLicensingValues } from './licensing_logic.mock';
 export { mockHttpValues } from './http_logic.mock';
 export { mockFlashMessagesValues, mockFlashMessagesActions } from './flash_messages_logic.mock';
-export { mockAllValues, mockAllActions, setMockValues } from './kea.mock';
+export { mockAllValues, mockAllActions, setMockValues, setMockActions } from './kea.mock';
 
 export { mountAsync } from './mount_async.mock';
 export { mountWithIntl } from './mount_with_i18n.mock';

x-pack/plugins/enterprise_search/public/applications/__mocks__/kea.mock.ts

@@ -48,8 +48,11 @@ jest.mock('kea', () => ({
  *   setMockValues({ someValue: 'hello' });
  * });
  */
-import { useValues } from 'kea';
+import { useValues, useActions } from 'kea';
 
 export const setMockValues = (values: object) => {
   (useValues as jest.Mock).mockImplementation(() => ({ ...mockAllValues, ...values }));
 };
+export const setMockActions = (actions: object) => {
+  (useActions as jest.Mock).mockImplementation(() => ({ ...mockAllActions, ...actions }));
+};

x-pack/plugins/enterprise_search/public/applications/__mocks__/kibana_logic.mock.ts

@@ -12,4 +12,5 @@ export const mockKibanaValues = {
   navigateToUrl: jest.fn(),
   setBreadcrumbs: jest.fn(),
   setDocTitle: jest.fn(),
+  renderHeaderActions: jest.fn(),
 };

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

@@ -7,11 +7,11 @@
 import '../__mocks__/shallow_useeffect.mock';
 import '../__mocks__/kea.mock';
 import '../__mocks__/enterprise_search_url.mock';
+import { setMockValues, setMockActions } from '../__mocks__';
 
 import React from 'react';
 import { Redirect } from 'react-router-dom';
 import { shallow } from 'enzyme';
-import { useValues, useActions } from 'kea';
 
 import { Layout, SideNav, SideNavLink } from '../shared/layout';
 import { SetupGuide } from './components/setup_guide';
@@ -21,14 +21,14 @@ import { AppSearch, AppSearchUnconfigured, AppSearchConfigured, AppSearchNav } f
 
 describe('AppSearch', () => {
   it('renders AppSearchUnconfigured when config.host is not set', () => {
-    (useValues as jest.Mock).mockImplementationOnce(() => ({ config: { host: '' } }));
+    setMockValues({ config: { host: '' } });
     const wrapper = shallow(<AppSearch />);
 
     expect(wrapper.find(AppSearchUnconfigured)).toHaveLength(1);
   });
 
   it('renders AppSearchConfigured when config.host set', () => {
-    (useValues as jest.Mock).mockImplementationOnce(() => ({ config: { host: 'some.url' } }));
+    setMockValues({ config: { host: 'some.url' } });
     const wrapper = shallow(<AppSearch />);
 
     expect(wrapper.find(AppSearchConfigured)).toHaveLength(1);
@@ -47,8 +47,8 @@ describe('AppSearchUnconfigured', () => {
 describe('AppSearchConfigured', () => {
   beforeEach(() => {
     // Mock resets
-    (useValues as jest.Mock).mockImplementation(() => ({ myRole: {} }));
-    (useActions as jest.Mock).mockImplementation(() => ({ initializeAppData: () => {} }));
+    setMockValues({ myRole: {} });
+    setMockActions({ initializeAppData: () => {} });
   });
 
   it('renders with layout', () => {
@@ -61,7 +61,7 @@ describe('AppSearchConfigured', () => {
 
   it('initializes app data with passed props', () => {
     const initializeAppData = jest.fn();
-    (useActions as jest.Mock).mockImplementation(() => ({ initializeAppData }));
+    setMockActions({ initializeAppData });
 
     shallow(<AppSearchConfigured ilmEnabled={true} />);
 
@@ -70,24 +70,24 @@ describe('AppSearchConfigured', () => {
 
   it('does not re-initialize app data', () => {
     const initializeAppData = jest.fn();
-    (useActions as jest.Mock).mockImplementation(() => ({ initializeAppData }));
-    (useValues as jest.Mock).mockImplementation(() => ({ myRole: {}, hasInitialized: true }));
+    setMockActions({ initializeAppData });
+    setMockValues({ myRole: {}, hasInitialized: true });
 
     shallow(<AppSearchConfigured />);
 
     expect(initializeAppData).not.toHaveBeenCalled();
   });
 
   it('renders ErrorConnecting', () => {
-    (useValues as jest.Mock).mockImplementation(() => ({ myRole: {}, errorConnecting: true }));
+    setMockValues({ myRole: {}, errorConnecting: true });
 
     const wrapper = shallow(<AppSearchConfigured />);
 
     expect(wrapper.find(ErrorConnecting)).toHaveLength(1);
   });
 
   it('passes readOnlyMode state', () => {
-    (useValues as jest.Mock).mockImplementation(() => ({ myRole: {}, readOnlyMode: true }));
+    setMockValues({ myRole: {}, readOnlyMode: true });
 
     const wrapper = shallow(<AppSearchConfigured />);
 
@@ -109,9 +109,7 @@ describe('AppSearchNav', () => {
   });
 
   it('renders the Settings link', () => {
-    (useValues as jest.Mock).mockImplementation(() => ({
-      myRole: { canViewSettings: true },
-    }));
+    setMockValues({ myRole: { canViewSettings: true } });
     const wrapper = shallow(<AppSearchNav />);
 
     expect(wrapper.find(SideNavLink).last().prop('to')).toEqual(
@@ -120,9 +118,7 @@ describe('AppSearchNav', () => {
   });
 
   it('renders the Credentials link', () => {
-    (useValues as jest.Mock).mockImplementation(() => ({
-      myRole: { canViewAccountCredentials: true },
-    }));
+    setMockValues({ myRole: { canViewAccountCredentials: true } });
     const wrapper = shallow(<AppSearchNav />);
 
     expect(wrapper.find(SideNavLink).last().prop('to')).toEqual(
@@ -131,9 +127,7 @@ describe('AppSearchNav', () => {
   });
 
   it('renders the Role Mappings link', () => {
-    (useValues as jest.Mock).mockImplementation(() => ({
-      myRole: { canViewRoleMappings: true },
-    }));
+    setMockValues({ myRole: { canViewRoleMappings: true } });
     const wrapper = shallow(<AppSearchNav />);
 
     expect(wrapper.find(SideNavLink).last().prop('to')).toEqual(

x-pack/plugins/enterprise_search/public/applications/index.test.tsx

@@ -5,13 +5,16 @@
  */
 
 import React from 'react';
+import { getContext } from 'kea';
 
 import { coreMock } from 'src/core/public/mocks';
 import { licensingMock } from '../../../licensing/public/mocks';
 
 import { renderApp, renderHeaderActions } from './';
+import { EnterpriseSearch } from './enterprise_search';
 import { AppSearch } from './app_search';
 import { WorkplaceSearch } from './workplace_search';
+import { KibanaLogic } from './shared/kibana';
 
 describe('renderApp', () => {
   const kibanaDeps = {
@@ -28,36 +31,70 @@ describe('renderApp', () => {
     jest.clearAllMocks();
   });
 
-  it('mounts and unmounts UI', () => {
-    const MockApp = () => <div className="hello-world">Hello world!</div>;
+  const mockContainer = kibanaDeps.params.element;
+  const MockApp = () => <div className="hello-world">Hello world!</div>;
 
+  it('mounts and unmounts UI', () => {
     const unmount = renderApp(MockApp, kibanaDeps, pluginData);
-    expect(kibanaDeps.params.element.querySelector('.hello-world')).not.toBeNull();
+    expect(mockContainer.querySelector('.hello-world')).not.toBeNull();
 
     unmount();
-    expect(kibanaDeps.params.element.innerHTML).toEqual('');
+    expect(mockContainer.innerHTML).toEqual('');
   });
 
-  it('renders AppSearch', () => {
-    renderApp(AppSearch, kibanaDeps, pluginData);
-    expect(kibanaDeps.params.element.querySelector('.setupGuide')).not.toBeNull();
-  });
+  /**
+   * Helper for automatically mounting and unmounting future tests
+   */
+  let unmount: any;
+  const mount = (App: React.FC) => {
+    unmount = renderApp(App, kibanaDeps, pluginData);
+  };
+
+  describe('Enterprise Search apps', () => {
+    afterEach(() => unmount());
+
+    it('renders EnterpriseSearch', () => {
+      mount(EnterpriseSearch);
+      expect(mockContainer.querySelector('.enterpriseSearchOverview')).not.toBeNull();
+    });
+
+    it('renders AppSearch', () => {
+      mount(AppSearch);
+      expect(mockContainer.querySelector('.setupGuide')).not.toBeNull();
+    });
 
-  it('renders WorkplaceSearch', () => {
-    renderApp(WorkplaceSearch, kibanaDeps, pluginData);
-    expect(kibanaDeps.params.element.querySelector('.setupGuide')).not.toBeNull();
+    it('renders WorkplaceSearch', () => {
+      mount(WorkplaceSearch);
+      expect(mockContainer.querySelector('.setupGuide')).not.toBeNull();
+    });
   });
-});
 
-describe('renderHeaderActions', () => {
-  it('mounts and unmounts any HeaderActions component', () => {
+  describe('renderHeaderActions', () => {
     const mockHeaderEl = document.createElement('header');
     const MockHeaderActions = () => <button className="hello-world">Hello World</button>;
 
-    const unmount = renderHeaderActions(MockHeaderActions, mockHeaderEl);
-    expect(mockHeaderEl.querySelector('.hello-world')).not.toBeNull();
+    it('mounts and unmounts any HeaderActions component', () => {
+      const store = getContext().store;
 
-    unmount();
-    expect(mockHeaderEl.innerHTML).toEqual('');
+      const unmountHeader = renderHeaderActions(MockHeaderActions, store, mockHeaderEl);
+      expect(mockHeaderEl.querySelector('.hello-world')).not.toBeNull();
+
+      unmountHeader();
+      expect(mockHeaderEl.innerHTML).toEqual('');
+    });
+
+    it('passes a renderHeaderActions helper to KibanaLogic, which can be used by our apps to render HeaderActions', () => {
+      // Setup
+      kibanaDeps.params.setHeaderActionMenu.mockImplementationOnce((cb: any) => cb(mockHeaderEl));
+      mount(MockApp);
+
+      // Call KibanaLogic's renderHeaderActions, which should call params.setHeaderActionMenu
+      KibanaLogic.values.renderHeaderActions(MockHeaderActions);
+      expect(kibanaDeps.params.setHeaderActionMenu).toHaveBeenCalled();
+
+      // renderHeaderActions should have been called and generated the correct DOM
+      expect(mockHeaderEl.querySelector('.hello-world')).not.toBeNull();
+      unmount();
+    });
   });
 });

x-pack/plugins/enterprise_search/public/applications/index.tsx

@@ -37,14 +37,16 @@ export const renderApp = (
   externalUrl.enterpriseSearchUrl = publicUrl || config.host || '';
 
   resetContext({ createStore: true });
-  const store = getContext().store as Store;
+  const store = getContext().store;
 
   const unmountKibanaLogic = mountKibanaLogic({
     config,
     history: params.history,
     navigateToUrl: core.application.navigateToUrl,
     setBreadcrumbs: core.chrome.setBreadcrumbs,
     setDocTitle: core.chrome.docTitle.change,
+    renderHeaderActions: (HeaderActions) =>
+      params.setHeaderActionMenu((el) => renderHeaderActions(HeaderActions, store, el)),
   });
   const unmountLicensingLogic = mountLicensingLogic({
     license$: plugins.licensing.license$,
@@ -82,7 +84,16 @@ export const renderApp = (
  * @see https://github.com/elastic/kibana/blob/master/docs/development/core/public/kibana-plugin-core-public.appmountparameters.setheaderactionmenu.md
  */
 
-export const renderHeaderActions = (HeaderActions: React.FC, kibanaHeaderEl: HTMLElement) => {
-  ReactDOM.render(<HeaderActions />, kibanaHeaderEl);
+export const renderHeaderActions = (
+  HeaderActions: React.FC,
+  store: Store,
+  kibanaHeaderEl: HTMLElement
+) => {
+  ReactDOM.render(
+    <Provider store={store}>
+      <HeaderActions />
+    </Provider>,
+    kibanaHeaderEl
+  );
   return () => ReactDOM.unmountComponentAtNode(kibanaHeaderEl);
 };

x-pack/plugins/enterprise_search/public/applications/shared/kibana/kibana_logic.ts

@@ -6,6 +6,7 @@
 
 import { kea, MakeLogicType } from 'kea';
 
+import { FC } from 'react';
 import { History } from 'history';
 import { ApplicationStart, ChromeBreadcrumb } from 'src/core/public';
 
@@ -17,6 +18,7 @@ interface IKibanaLogicProps {
   navigateToUrl: ApplicationStart['navigateToUrl'];
   setBreadcrumbs(crumbs: ChromeBreadcrumb[]): void;
   setDocTitle(title: string): void;
+  renderHeaderActions(HeaderActions: FC): void;
 }
 export interface IKibanaValues extends IKibanaLogicProps {
   navigateToUrl(path: string, options?: ICreateHrefOptions): Promise<void>;
@@ -36,6 +38,7 @@ export const KibanaLogic = kea<MakeLogicType<IKibanaValues>>({
     ],
     setBreadcrumbs: [props.setBreadcrumbs, {}],
     setDocTitle: [props.setDocTitle, {}],
+    renderHeaderActions: [props.renderHeaderActions, {}],
   }),
 });
 

x-pack/plugins/enterprise_search/public/applications/workplace_search/index.test.tsx

@@ -6,13 +6,14 @@
 
 import '../__mocks__/shallow_useeffect.mock';
 import '../__mocks__/kea.mock';
+import { setMockValues, setMockActions, mockKibanaValues } from '../__mocks__';
 
 import React from 'react';
 import { Redirect } from 'react-router-dom';
 import { shallow } from 'enzyme';
-import { useValues, useActions } from 'kea';
 
 import { Layout } from '../shared/layout';
+import { WorkplaceSearchHeaderActions } from './components/layout';
 import { SetupGuide } from './views/setup_guide';
 import { ErrorState } from './views/error_state';
 import { Overview } from './views/overview';
@@ -21,14 +22,14 @@ import { WorkplaceSearch, WorkplaceSearchUnconfigured, WorkplaceSearchConfigured
 
 describe('WorkplaceSearch', () => {
   it('renders WorkplaceSearchUnconfigured when config.host is not set', () => {
-    (useValues as jest.Mock).mockImplementationOnce(() => ({ config: { host: '' } }));
+    setMockValues({ config: { host: '' } });
     const wrapper = shallow(<WorkplaceSearch />);
 
     expect(wrapper.find(WorkplaceSearchUnconfigured)).toHaveLength(1);
   });
 
   it('renders WorkplaceSearchConfigured when config.host set', () => {
-    (useValues as jest.Mock).mockImplementationOnce(() => ({ config: { host: 'some.url' } }));
+    setMockValues({ config: { host: 'some.url' } });
     const wrapper = shallow(<WorkplaceSearch />);
 
     expect(wrapper.find(WorkplaceSearchConfigured)).toHaveLength(1);
@@ -46,47 +47,48 @@ describe('WorkplaceSearchUnconfigured', () => {
 
 describe('WorkplaceSearchConfigured', () => {
   beforeEach(() => {
-    // Mock resets
-    (useValues as jest.Mock).mockImplementation(() => ({}));
-    (useActions as jest.Mock).mockImplementation(() => ({ initializeAppData: () => {} }));
+    jest.clearAllMocks();
+    setMockActions({ initializeAppData: () => {} });
   });
 
-  it('renders with layout', () => {
+  it('renders layout and header actions', () => {
     const wrapper = shallow(<WorkplaceSearchConfigured />);
 
     expect(wrapper.find(Layout).prop('readOnlyMode')).toBeFalsy();
     expect(wrapper.find(Overview)).toHaveLength(1);
+    expect(mockKibanaValues.renderHeaderActions).toHaveBeenCalledWith(WorkplaceSearchHeaderActions);
   });
 
   it('initializes app data with passed props', () => {
     const initializeAppData = jest.fn();
-    (useActions as jest.Mock).mockImplementation(() => ({ initializeAppData }));
+    setMockActions({ initializeAppData });
 
     shallow(<WorkplaceSearchConfigured isFederatedAuth={true} />);
 
     expect(initializeAppData).toHaveBeenCalledWith({ isFederatedAuth: true });
   });
 
-  it('does not re-initialize app data', () => {
+  it('does not re-initialize app data or re-render header actions', () => {
     const initializeAppData = jest.fn();
-    (useActions as jest.Mock).mockImplementation(() => ({ initializeAppData }));
-    (useValues as jest.Mock).mockImplementation(() => ({ hasInitialized: true }));
+    setMockActions({ initializeAppData });
+    setMockValues({ hasInitialized: true });
 
     shallow(<WorkplaceSearchConfigured />);
 
     expect(initializeAppData).not.toHaveBeenCalled();
+    expect(mockKibanaValues.renderHeaderActions).not.toHaveBeenCalled();
   });
 
   it('renders ErrorState', () => {
-    (useValues as jest.Mock).mockImplementation(() => ({ errorConnecting: true }));
+    setMockValues({ errorConnecting: true });
 
     const wrapper = shallow(<WorkplaceSearchConfigured />);
 
     expect(wrapper.find(ErrorState)).toHaveLength(2);
   });
 
   it('passes readOnlyMode state', () => {
-    (useValues as jest.Mock).mockImplementation(() => ({ readOnlyMode: true }));
+    setMockValues({ readOnlyMode: true });
 
     const wrapper = shallow(<WorkplaceSearchConfigured />);