Merge pull request #1 from davismcphee/discover-timeline-davis

Switch from `useDiscoverMainRoute` to `DiscoverContainer` component

src/plugins/discover/public/application/main/components/top_nav/discover_topnav.tsx

@@ -200,8 +200,8 @@ export const DiscoverTopNav = ({
   const searchBarCustomization = useDiscoverCustomization('search_bar');
 
   const SearchBar = useMemo(
-    () => searchBarCustomization?.CustomQueryBar ?? AggregateQueryTopNavMenu,
-    [searchBarCustomization?.CustomQueryBar, AggregateQueryTopNavMenu]
+    () => searchBarCustomization?.CustomSearchBar ?? AggregateQueryTopNavMenu,
+    [searchBarCustomization?.CustomSearchBar, AggregateQueryTopNavMenu]
   );
 
   return (

src/plugins/discover/public/application/main/discover_main_app.tsx

@@ -18,6 +18,7 @@ import { useSavedSearchAliasMatchRedirect } from '../../hooks/saved_search_alias
 import { useSavedSearchInitial } from './services/discover_state_provider';
 import { useAdHocDataViews } from './hooks/use_adhoc_data_views';
 import { useTextBasedQueryLanguage } from './hooks/use_text_based_query_language';
+import type { DiscoverDisplayMode } from '../types';
 
 const DiscoverLayoutMemoized = React.memo(DiscoverLayout);
 
@@ -26,7 +27,7 @@ export interface DiscoverMainProps {
    * Central state container
    */
   stateContainer: DiscoverStateContainer;
-  mode?: 'embedded' | 'standalone';
+  mode?: DiscoverDisplayMode;
 }
 
 export function DiscoverMainApp(props: DiscoverMainProps) {

src/plugins/discover/public/application/main/discover_main_route.tsx

@@ -34,6 +34,7 @@ import {
   DiscoverCustomizationProvider,
   useDiscoverCustomizationService,
 } from '../../customizations';
+import type { DiscoverDisplayMode } from '../types';
 
 const DiscoverMainAppMemoized = memo(DiscoverMainApp);
 
@@ -44,7 +45,7 @@ interface DiscoverLandingParams {
 export interface MainRouteProps {
   customizationCallbacks: CustomizationCallback[];
   isDev: boolean;
-  mode?: 'embedded' | 'standalone';
+  mode?: DiscoverDisplayMode;
 }
 
 export function DiscoverMainRoute({

src/plugins/discover/public/application/types.ts

@@ -13,3 +13,5 @@ export enum FetchStatus {
   COMPLETE = 'complete',
   ERROR = 'error',
 }
+
+export type DiscoverDisplayMode = 'embedded' | 'standalone';

src/plugins/discover/public/components/discover_container/discover_container.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { ScopedHistory } from '@kbn/core/public';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import React, { useEffect, useMemo, useState } from 'react';
+import { DiscoverMainRoute } from '../../application/main';
+import type { DiscoverServices } from '../../build_services';
+import type { CustomizationCallback } from '../../customizations';
+import { setHeaderActionMenuMounter, setScopedHistory } from '../../kibana_services';
+
+export interface DiscoverContainerInternalProps {
+  services: DiscoverServices;
+  scopedHistory: ScopedHistory;
+  customize: CustomizationCallback;
+  isDev: boolean;
+}
+
+export const DiscoverContainerInternal = ({
+  services,
+  scopedHistory,
+  customize,
+  isDev,
+}: DiscoverContainerInternalProps) => {
+  const customizationCallbacks = useMemo(() => [customize], [customize]);
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    setScopedHistory(scopedHistory);
+    setHeaderActionMenuMounter(() => {});
+    setInitialized(true);
+  }, [scopedHistory]);
+
+  if (!initialized) {
+    return null;
+  }
+
+  return (
+    <KibanaContextProvider services={services}>
+      <DiscoverMainRoute
+        customizationCallbacks={customizationCallbacks}
+        mode="embedded"
+        isDev={isDev}
+      />
+    </KibanaContextProvider>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default DiscoverContainerInternal;

src/plugins/discover/public/components/discover_container/index.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { withSuspense } from '@kbn/shared-ux-utility';
+import { lazy } from 'react';
+import type { DiscoverServices } from '../../build_services';
+import type { DiscoverContainerInternalProps } from './discover_container';
+
+export type DiscoverContainerProps = Omit<DiscoverContainerInternalProps, 'services' | 'isDev'> & {
+  /*
+   *  Any override that user of this hook
+   *  wants discover to use. Need to keep in mind that this
+   *  param is only for overrides for the services that Discover
+   *  already consumes.
+   */
+  services: Partial<DiscoverServices>;
+};
+
+export const DiscoverContainerInternal = withSuspense(lazy(() => import('./discover_container')));

src/plugins/discover/public/customizations/customization_types/search_bar_customization.ts

@@ -6,14 +6,12 @@
  * Side Public License, v 1.
  */
 
-import { AggregateQuery } from '@kbn/es-query';
-import { TopNavMenuProps } from '@kbn/navigation-plugin/public';
-import type { ComponentType } from 'react';
+import type { AggregateQuery } from '@kbn/es-query';
+import type { TopNavMenuProps } from '@kbn/navigation-plugin/public';
+import type { ComponentType, ReactElement } from 'react';
 
 export interface SearchBarCustomization {
   id: 'search_bar';
   CustomDataViewPicker?: ComponentType;
-  CustomQueryBar?: (
-    props: TopNavMenuProps<AggregateQuery>
-  ) => React.ReactElement<unknown, string | React.JSXElementConstructor<unknown>>;
+  CustomSearchBar?: (props: TopNavMenuProps<AggregateQuery>) => ReactElement;
 }

src/plugins/discover/public/customizations/customization_types/top_nav_customization.ts

@@ -31,5 +31,4 @@ export interface TopNavCustomization {
   id: 'top_nav';
   defaultMenu?: TopNavDefaultMenu;
   getMenuItems?: () => TopNavMenuItem[];
-  showBreadcrumbs?: boolean;
 }

src/plugins/discover/public/index.ts

@@ -17,7 +17,6 @@ export function plugin(initializerContext: PluginInitializerContext) {
 export type { ISearchEmbeddable, SearchInput } from './embeddable';
 export type { DiscoverStateContainer } from './application/main/services/discover_state';
 export type { CustomizationCallback } from './customizations';
+export type { DiscoverContainerProps } from './components/discover_container';
 export { SEARCH_EMBEDDABLE_TYPE, SEARCH_EMBEDDABLE_CELL_ACTIONS_TRIGGER_ID } from './embeddable';
 export { loadSharingDataHelpers } from './utils';
-export type { UseDiscoverMainRouteInternalProps } from './exports/discover_app';
-export { useDiscoverMainRouteInternal } from './exports/discover_app';

src/plugins/discover/public/plugin.tsx

@@ -7,7 +7,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import React, { ComponentType, useMemo } from 'react';
 import { BehaviorSubject } from 'rxjs';
 import {
   AppMountParameters,
@@ -55,7 +55,7 @@ import {
   syncHistoryLocations,
 } from './kibana_services';
 import { registerFeature } from './register_feature';
-import { buildServices, DiscoverServices } from './build_services';
+import { buildServices } from './build_services';
 import { SearchEmbeddableFactory } from './embeddable';
 import { DeferredSpinner } from './components';
 import { ViewSavedSearchAction } from './embeddable/view_saved_search_action';
@@ -74,26 +74,15 @@ import {
 import { DiscoverAppLocator, DiscoverAppLocatorDefinition } from '../common';
 import type { CustomizationCallback } from './customizations';
 import { createCustomizeFunction, createProfileRegistry } from './customizations/profile_registry';
-import { useDiscoverMainRouteInternal } from './exports/discover_app';
 import { SEARCH_EMBEDDABLE_CELL_ACTIONS_TRIGGER } from './embeddable/constants';
+import { DiscoverContainerInternal, DiscoverContainerProps } from './components/discover_container';
 
 const DocViewerLegacyTable = React.lazy(
   () => import('./services/doc_views/components/doc_viewer_table/legacy')
 );
 const DocViewerTable = React.lazy(() => import('./services/doc_views/components/doc_viewer_table'));
 const SourceViewer = React.lazy(() => import('./services/doc_views/components/doc_viewer_source'));
 
-interface UseDiscoverMainRouteProps {
-  /*
-   *  Any override that user of this hook
-   *  wants discover to use. Need to keep in mind that this
-   *  param is only for overrides for the services that Discover
-   *  already consumes.
-   *
-   * */
-  services?: Partial<DiscoverServices>;
-}
-
 /**
  * @public
  */
@@ -172,9 +161,7 @@ export interface DiscoverStart {
    */
   readonly locator: undefined | DiscoverAppLocator;
   readonly customize: (profileName: string, callback: CustomizationCallback) => void;
-  readonly useDiscoverMainRoute: (
-    props?: UseDiscoverMainRouteProps
-  ) => ReturnType<typeof useDiscoverMainRouteInternal>;
+  readonly DiscoverContainer: ComponentType<DiscoverContainerProps>;
 }
 
 /**
@@ -419,8 +406,14 @@ export class DiscoverPlugin
     // initializeServices are assigned at start and used
     // when the application/embeddable is mounted
 
-    const { uiActions } = plugins;
+    const viewSavedSearchAction = new ViewSavedSearchAction(core.application);
 
+    plugins.uiActions.addTriggerAction('CONTEXT_MENU_TRIGGER', viewSavedSearchAction);
+    plugins.uiActions.registerTrigger(SEARCH_EMBEDDABLE_CELL_ACTIONS_TRIGGER);
+    setUiActions(plugins.uiActions);
+    injectTruncateStyles(core.uiSettings.get(TRUNCATE_MAX_HEIGHT));
+
+    const isDev = this.initializerContext.env.mode.dev;
     const services = buildServices(
       core,
       plugins,
@@ -430,21 +423,16 @@ export class DiscoverPlugin
       this.singleDocLocator!
     );
 
-    uiActions.registerTrigger(SEARCH_EMBEDDABLE_CELL_ACTIONS_TRIGGER);
-
-    const viewSavedSearchAction = new ViewSavedSearchAction(core.application);
-    uiActions.addTriggerAction('CONTEXT_MENU_TRIGGER', viewSavedSearchAction);
-    setUiActions(plugins.uiActions);
-
-    injectTruncateStyles(core.uiSettings.get(TRUNCATE_MAX_HEIGHT));
-
     return {
       locator: this.locator,
       customize: createCustomizeFunction(this.profileRegistry),
-      useDiscoverMainRoute: (props?: UseDiscoverMainRouteProps) => {
-        return useDiscoverMainRouteInternal({
-          services: { ...services, ...props?.services },
-        });
+      DiscoverContainer: (props: DiscoverContainerProps) => {
+        const mergedServices = useMemo(
+          () => ({ ...services, ...props.services }),
+          [props.services]
+        );
+
+        return <DiscoverContainerInternal {...props} services={mergedServices} isDev={isDev} />;
       },
     };
   }

x-pack/plugins/security_solution/public/timelines/components/timeline/discover_tab_content/index.tsx

@@ -5,10 +5,11 @@
  * 2.0.
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 import type { CustomizationCallback } from '@kbn/discover-plugin/public/customizations/types';
 import styled from 'styled-components';
+import type { ScopedHistory } from '@kbn/core/public';
 import { useGetStatefulQueryBar } from '../../../../common/hooks/use_get_stateful_query_bar';
 import { useKibana } from '../../../../common/lib/kibana';
 
@@ -23,37 +24,35 @@ export const DiscoverTabContent = () => {
     services: { customDataService: discoverDataService, discover, discoverFilterManager },
   } = useKibana();
 
-  const { useDiscoverMainRoute } = discover;
-
   const { CustomStatefulTopNavKqlQueryBar } = useGetStatefulQueryBar();
 
-  const getDiscoverLayout = useDiscoverMainRoute({
-    services: {
-      filterManager: discoverFilterManager,
-      data: discoverDataService,
-    },
-  });
-
-  const DiscoverMainRoute = getDiscoverLayout(history);
-
-  const customizationCallback: CustomizationCallback = useCallback(
-    ({ customizations, stateContainer }) => {
+  const customize: CustomizationCallback = useCallback(
+    ({ customizations }) => {
       customizations.set({
         id: 'search_bar',
-        CustomQueryBar: CustomStatefulTopNavKqlQueryBar,
-      });
-
-      customizations.set({
-        id: 'top_nav',
-        showBreadcrumbs: false,
+        CustomSearchBar: CustomStatefulTopNavKqlQueryBar,
       });
     },
     [CustomStatefulTopNavKqlQueryBar]
   );
 
+  const services = useMemo(
+    () => ({
+      filterManager: discoverFilterManager,
+      data: discoverDataService,
+    }),
+    [discoverDataService, discoverFilterManager]
+  );
+
+  const DiscoverContainer = discover.DiscoverContainer;
+
   return (
     <EmbeddedDiscoverContainer>
-      <DiscoverMainRoute isDev={false} customizationCallbacks={[customizationCallback]} />
+      <DiscoverContainer
+        services={services}
+        scopedHistory={history as ScopedHistory}
+        customize={customize}
+      />
     </EmbeddedDiscoverContainer>
   );
 };