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

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

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

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,13 +37,15 @@ 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,
     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$,
@@ -83,7 +85,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,13 +6,15 @@
 
 import { kea, MakeLogicType } from 'kea';
 
+import { FC } from 'react';
 import { ApplicationStart, ChromeBreadcrumb } from 'src/core/public';
 
 export interface IKibanaValues {
   config: { host?: string };
   navigateToUrl: ApplicationStart['navigateToUrl'];
   setBreadcrumbs(crumbs: ChromeBreadcrumb[]): void;
   setDocTitle(title: string): void;
+  renderHeaderActions(HeaderActions: FC): void;
 }
 
 export const KibanaLogic = kea<MakeLogicType<IKibanaValues>>({
@@ -22,6 +24,7 @@ export const KibanaLogic = kea<MakeLogicType<IKibanaValues>>({
     navigateToUrl: [props.navigateToUrl, {}],
     setBreadcrumbs: [props.setBreadcrumbs, {}],
     setDocTitle: [props.setDocTitle, {}],
+    renderHeaderActions: [props.renderHeaderActions, {}],
   }),
 });