Filter bar context for directives

elastic · Oct 3, 2019 · a992310 · a992310
1 parent 99f67ae
commit a992310
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 14 deletions.
diff --git a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_bar.tsx b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_bar.tsx
@@ -31,12 +31,13 @@ import {
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import classNames from 'classnames';
 import React, { useState } from 'react';
-import { UiSettingsClientContract } from 'src/core/public';
+import { CoreStart } from 'src/core/public';
+import { DataPublicPluginStart } from 'src/plugins/data/public';
 import { IndexPattern } from '../../index_patterns';
 import { FilterEditor } from './filter_editor';
 import { FilterItem } from './filter_item';
 import { FilterOptions } from './filter_options';
-import { useKibana } from '../../../../../../plugins/kibana_react/public';
+import { useKibana, KibanaContextProvider } from '../../../../../../plugins/kibana_react/public';
 
 interface Props {
   filters: Filter[];
@@ -45,18 +46,45 @@ interface Props {
   indexPatterns: IndexPattern[];
   intl: InjectedIntl;
 
-  // Only for directives!
-  uiSettings?: UiSettingsClientContract;
+  // TODO: Only for filter-bar directive!
+  uiSettings?: CoreStart['uiSettings'];
+  docLinks?: CoreStart['docLinks'];
+  pluginDataStart?: DataPublicPluginStart;
 }
 
 function FilterBarUI(props: Props) {
   const [isAddFilterPopoverOpen, setIsAddFilterPopoverOpen] = useState(false);
   const kibana = useKibana();
-  let { uiSettings } = kibana.services;
 
-  if (!uiSettings) {
-    // Only for directives!
-    uiSettings = props.uiSettings;
+  const uiSettings = kibana.services.uiSettings || props.uiSettings;
+  if (!uiSettings) return null;
+
+  function hasContext() {
+    return Boolean(kibana.services.uiSettings);
+  }
+
+  function wrapInContextIfMissing(content: JSX.Element) {
+    // TODO: Relevant only as long as directives are used!
+    if (!hasContext()) {
+      if (props.docLinks && props.uiSettings && props.pluginDataStart) {
+        return (
+          <KibanaContextProvider
+            services={{
+              uiSettings: props.uiSettings,
+              docLinks: props.docLinks,
+              data: props.pluginDataStart,
+            }}
+          >
+            {content}
+          </KibanaContextProvider>
+        );
+      } else {
+        throw new Error(
+          'Rending filter bar requires providing sufficient context: uiSettings, docLinks and NP data plugin'
+        );
+      }
+    }
+    return content;
   }
 
   function onFiltersUpdated(filters: Filter[]) {
@@ -100,7 +128,7 @@ function FilterBarUI(props: Props) {
       </EuiButtonEmpty>
     );
 
-    return (
+    return wrapInContextIfMissing(
       <EuiFlexItem grow={false}>
         <EuiPopover
           id="addFilterPopover"

diff --git a/src/legacy/core_plugins/data/public/shim/legacy_module.ts b/src/legacy/core_plugins/data/public/shim/legacy_module.ts
@@ -24,7 +24,7 @@ import { Filter } from '@kbn/es-query';
 
 // @ts-ignore
 import { uiModules } from 'ui/modules';
-import { npSetup, npStart } from 'ui/new_platform';
+import { npStart } from 'ui/new_platform';
 import { FilterBar, ApplyFiltersPopover } from '../filter';
 import template from './apply_filter_directive.html';
 
@@ -49,14 +49,16 @@ export const initLegacyModule = once((): void => {
           }
 
           child.setAttribute('ui-settings', 'uiSettings');
-          child.setAttribute('http', 'http');
+          child.setAttribute('doc-links', 'docLinks');
+          child.setAttribute('plugin-data-start', 'pluginDataStart');
 
           // Append helper directive
           elem.append(child);
 
           const linkFn = ($scope: any) => {
-            $scope.uiSettings = npSetup.core.uiSettings;
-            $scope.http = npSetup.core.http;
+            $scope.uiSettings = npStart.core.uiSettings;
+            $scope.docLinks = npStart.core.docLinks;
+            $scope.pluginDataStart = npStart.plugins.data;
           };
 
           return linkFn;
@@ -66,11 +68,12 @@ export const initLegacyModule = once((): void => {
     .directive('filterBarHelper', (reactDirective: any) => {
       return reactDirective(wrapInI18nContext(FilterBar), [
         ['uiSettings', { watchDepth: 'reference' }],
-        ['http', { watchDepth: 'reference' }],
+        ['docLinks', { watchDepth: 'reference' }],
         ['onFiltersUpdated', { watchDepth: 'reference' }],
         ['indexPatterns', { watchDepth: 'collection' }],
         ['filters', { watchDepth: 'collection' }],
         ['className', { watchDepth: 'reference' }],
+        ['pluginDataStart', { watchDepth: 'reference' }],
       ]);
     })
     .directive('applyFiltersPopoverComponent', (reactDirective: any) =>