[Discover] Inline angular directives only used in this plugin (#56119) (

#56744) * Migrate field_name directive * Migrate collapsible_sidebar directive * Fix FieldName import at table_row.tsx * Migrate css_truncate directive * Migrate fixed_scroll & debounce directives * Migrate render_complete directive * Fix css_truncate test * Use shortenDottedString in the TypesScript version
elastic · Feb 4, 2020 · bcf13e2 · bcf13e2
1 parent 25d0c90
commit bcf13e2
Show file tree

Hide file tree

Showing 28 changed files with 85 additions and 131 deletions.
diff --git a/...blic/directives/__tests__/css_truncate.js → ...over/__tests__/directives/css_truncate.js b/...blic/directives/__tests__/css_truncate.js → ...over/__tests__/directives/css_truncate.js
@@ -20,7 +20,7 @@
 import angular from 'angular';
 import expect from '@kbn/expect';
 import ngMock from 'ng_mock';
-import 'plugins/kibana/discover/legacy';
+import { pluginInstance } from 'plugins/kibana/discover/legacy';
 
 let $parentScope;
 
@@ -30,7 +30,9 @@ let $elem;
 
 const init = function(expandable) {
   // Load the application
-  ngMock.module('kibana');
+  pluginInstance.initializeServices();
+  pluginInstance.initializeInnerAngular();
+  ngMock.module('app/discover');
 
   // Create the scope
   ngMock.inject(function($rootScope, $compile) {

diff --git a/...blic/directives/__tests__/fixed_scroll.js → ...over/__tests__/directives/fixed_scroll.js b/...blic/directives/__tests__/fixed_scroll.js → ...over/__tests__/directives/fixed_scroll.js
@@ -18,8 +18,8 @@
  */
 
 import expect from '@kbn/expect';
+import { pluginInstance } from 'plugins/kibana/discover/legacy';
 import ngMock from 'ng_mock';
-import '../../fixed_scroll';
 import $ from 'jquery';
 import sinon from 'sinon';
 
@@ -29,8 +29,9 @@ describe('FixedScroll directive', function() {
   let compile;
   let flushPendingTasks;
   const trash = [];
-
-  beforeEach(ngMock.module('kibana'));
+  beforeEach(() => pluginInstance.initializeServices());
+  beforeEach(() => pluginInstance.initializeInnerAngular());
+  beforeEach(ngMock.module('app/discover'));
   beforeEach(
     ngMock.inject(function($compile, $rootScope, $timeout) {
       flushPendingTasks = function flushPendingTasks() {

diff --git a/src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts b/src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts
@@ -42,22 +42,10 @@ import { registerListenEventListener } from 'ui/directives/listen/listen';
 // @ts-ignore
 import { KbnAccessibleClickProvider } from 'ui/accessibility/kbn_accessible_click';
 // @ts-ignore
-import { FieldNameDirectiveProvider } from 'ui/directives/field_name';
-// @ts-ignore
-import { CollapsibleSidebarProvider } from 'ui/collapsible_sidebar/collapsible_sidebar';
-// @ts-ignore
-import { CssTruncateProvide } from 'ui/directives/css_truncate';
-// @ts-ignore
-import { FixedScrollProvider } from 'ui/fixed_scroll';
-// @ts-ignore
-import { DebounceProviderTimeout } from 'ui/directives/debounce/debounce';
-// @ts-ignore
 import { AppStateProvider } from 'ui/state_management/app_state';
 // @ts-ignore
 import { GlobalStateProvider } from 'ui/state_management/global_state';
 // @ts-ignore
-import { createRenderCompleteDirective } from 'ui/render_complete/directive';
-// @ts-ignore
 import { StateManagementConfigProvider } from 'ui/state_management/config_provider';
 // @ts-ignore
 import { KbnUrlProvider, RedirectWhenMissingProvider } from 'ui/url';
@@ -81,11 +69,19 @@ import { createFieldSearchDirective } from './np_ready/components/field_chooser/
 import { createIndexPatternSelectDirective } from './np_ready/components/field_chooser/discover_index_pattern_directive';
 import { createStringFieldProgressBarDirective } from './np_ready/components/field_chooser/string_progress_bar';
 // @ts-ignore
+import { FieldNameDirectiveProvider } from './np_ready/angular/directives/field_name';
+// @ts-ignore
 import { createFieldChooserDirective } from './np_ready/components/field_chooser/field_chooser';
-
 // @ts-ignore
 import { createDiscoverFieldDirective } from './np_ready/components/field_chooser/discover_field';
+import { CollapsibleSidebarProvider } from './np_ready/angular/directives/collapsible_sidebar/collapsible_sidebar';
 import { DiscoverStartPlugins } from './plugin';
+import { createCssTruncateDirective } from './np_ready/angular/directives/css_truncate';
+// @ts-ignore
+import { FixedScrollProvider } from './np_ready/angular/directives/fixed_scroll';
+// @ts-ignore
+import { DebounceProviderTimeout } from './np_ready/angular/directives/debounce/debounce';
+import { createRenderCompleteDirective } from './np_ready/angular/directives/render_complete';
 
 /**
  * returns the main inner angular module, it contains all the parts of Angular Discover
@@ -181,7 +177,7 @@ export function initializeInnerAngularModule(
     .directive('kbnAccessibleClick', KbnAccessibleClickProvider)
     .directive('fieldName', FieldNameDirectiveProvider)
     .directive('collapsibleSidebar', CollapsibleSidebarProvider)
-    .directive('cssTruncate', CssTruncateProvide)
+    .directive('cssTruncate', createCssTruncateDirective)
     .directive('fixedScroll', FixedScrollProvider)
     .directive('renderComplete', createRenderCompleteDirective)
     .directive('discoverFieldSearch', createFieldSearchDirective)

diff --git a/src/legacy/core_plugins/kibana/public/discover/kibana_services.ts b/src/legacy/core_plugins/kibana/public/discover/kibana_services.ts
@@ -47,10 +47,6 @@ export function setServices(newServices: any) {
   services = newServices;
 }
 
-// import directives that
-import 'ui/directives/css_truncate';
-import 'ui/directives/field_name';
-
 // EXPORT legacy static dependencies, should be migrated when available in a new version;
 export { angular };
 export { wrapInI18nContext } from 'ui/i18n';
@@ -90,7 +86,6 @@ export {
 } from '../../../../../plugins/data/public';
 export { ElasticSearchHit } from './np_ready/doc_views/doc_views_types';
 export { registerTimefilterWithGlobalStateFactory } from 'ui/timefilter/setup_router';
-export { FieldName } from 'ui/directives/field_name/field_name';
 export { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
 // @ts-ignore
 export { buildPointSeriesData } from 'ui/agg_response/point_series/point_series';
diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/_index.scss b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/_index.scss
@@ -1,2 +1,3 @@
 @import 'no_results';
-@import 'histogram';
+@import 'histogram';
+@import './collapsible_sidebar/index';
diff --git a/...apsible_sidebar/_collapsible_sidebar.scss → ...apsible_sidebar/_collapsible_sidebar.scss b/...apsible_sidebar/_collapsible_sidebar.scss → ...apsible_sidebar/_collapsible_sidebar.scss
diff --git a/...gacy/ui/public/styles/_legacy/_depth.scss → ...irectives/collapsible_sidebar/_depth.scss b/...gacy/ui/public/styles/_legacy/_depth.scss → ...irectives/collapsible_sidebar/_depth.scss
diff --git a/...lugins/kibana/public/discover/np_ready/angular/directives/collapsible_sidebar/_index.scss b/...lugins/kibana/public/discover/np_ready/angular/directives/collapsible_sidebar/_index.scss
@@ -0,0 +1,2 @@
+@import 'depth';
+@import 'collapsible_sidebar';
diff --git a/...ollapsible_sidebar/collapsible_sidebar.js → ...ollapsible_sidebar/collapsible_sidebar.ts b/...ollapsible_sidebar/collapsible_sidebar.js → ...ollapsible_sidebar/collapsible_sidebar.ts
@@ -19,7 +19,11 @@
 
 import _ from 'lodash';
 import $ from 'jquery';
-import { uiModules } from '../modules';
+import { IScope } from 'angular';
+
+interface LazyScope extends IScope {
+  [key: string]: any;
+}
 
 export function CollapsibleSidebarProvider() {
   // simply a list of all of all of angulars .col-md-* classes except 12
@@ -29,7 +33,7 @@ export function CollapsibleSidebarProvider() {
 
   return {
     restrict: 'C',
-    link: function($scope, $elem) {
+    link: ($scope: LazyScope, $elem: any) => {
       let isCollapsed = false;
       const $collapser = $(
         `<button
@@ -48,10 +52,10 @@ export function CollapsibleSidebarProvider() {
       $collapser.append($icon);
       const $siblings = $elem.siblings();
 
-      const siblingsClass = listOfWidthClasses.reduce(function(prev, className) {
+      const siblingsClass = listOfWidthClasses.reduce((prev: string, className: string) => {
         if (prev) return prev;
         return $siblings.hasClass(className) && className;
-      }, false);
+      }, '');
 
       // If there is are only two elements we can assume the other one will take 100% of the width.
       const hasSingleSibling = $siblings.length === 1 && siblingsClass;
@@ -82,5 +86,3 @@ export function CollapsibleSidebarProvider() {
     },
   };
 }
-
-uiModules.get('kibana').directive('collapsibleSidebar', CollapsibleSidebarProvider);
diff --git a/...gacy/ui/public/directives/css_truncate.js → ..._ready/angular/directives/css_truncate.ts b/...gacy/ui/public/directives/css_truncate.js → ..._ready/angular/directives/css_truncate.ts
@@ -16,15 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { uiModules } from '../modules';
-const module = uiModules.get('kibana');
-
-export function CssTruncateProvide() {
+export function createCssTruncateDirective() {
   return {
     restrict: 'A',
     scope: {},
-    link: function($scope, $elem, attrs) {
+    link: ($scope: any, $elem: any, attrs: any) => {
       $elem.css({
         overflow: 'hidden',
         'white-space': 'nowrap',
@@ -63,5 +59,3 @@ export function CssTruncateProvide() {
     },
   };
 }
-
-module.directive('cssTruncate', CssTruncateProvide);
diff --git a/...directives/debounce/__tests__/debounce.js → ...directives/debounce/__tests__/debounce.js b/...directives/debounce/__tests__/debounce.js → ...directives/debounce/__tests__/debounce.js
@@ -20,14 +20,17 @@
 import sinon from 'sinon';
 import expect from '@kbn/expect';
 import ngMock from 'ng_mock';
-import { DebounceProvider } from '..';
+import { DebounceProvider } from '../index';
+import { pluginInstance } from 'plugins/kibana/discover/legacy';
 
 let debounce;
 let debounceFromProvider;
 let $timeout;
 
 function init() {
-  ngMock.module('kibana');
+  pluginInstance.initializeServices();
+  pluginInstance.initializeInnerAngular();
+  ngMock.module('app/discover');
 
   ngMock.inject(function($injector, _$timeout_, Private) {
     $timeout = _$timeout_;

diff --git a/...ui/public/directives/debounce/debounce.js → ...y/angular/directives/debounce/debounce.js b/...ui/public/directives/debounce/debounce.js → ...y/angular/directives/debounce/debounce.js
@@ -18,12 +18,9 @@
  */
 
 import _ from 'lodash';
-import { uiModules } from '../../modules';
 // Debounce service, angularized version of lodash debounce
 // borrowed heavily from https://github.com/shahata/angular-debounce
 
-const module = uiModules.get('kibana');
-
 export function DebounceProviderTimeout($timeout) {
   return function(func, wait, options) {
     let timeout;
@@ -70,8 +67,6 @@ export function DebounceProviderTimeout($timeout) {
   };
 }
 
-module.service('debounce', ['$timeout', DebounceProviderTimeout]);
-
 export function DebounceProvider(debounce) {
   return debounce;
 }
diff --git a/...cy/ui/public/directives/debounce/index.js → ...eady/angular/directives/debounce/index.js b/...cy/ui/public/directives/debounce/index.js → ...eady/angular/directives/debounce/index.js
diff --git a/...legacy/ui/public/directives/field_name.js → ...np_ready/angular/directives/field_name.js b/...legacy/ui/public/directives/field_name.js → ...np_ready/angular/directives/field_name.js
@@ -17,9 +17,7 @@
  * under the License.
  */
 import { FieldName } from './field_name/field_name';
-import { uiModules } from '../modules';
-import { wrapInI18nContext } from 'ui/i18n';
-const module = uiModules.get('kibana');
+import { wrapInI18nContext } from '../../../kibana_services';
 
 export function FieldNameDirectiveProvider(config, reactDirective) {
   return reactDirective(
@@ -35,5 +33,3 @@ export function FieldNameDirectiveProvider(config, reactDirective) {
     }
   );
 }
-
-module.directive('fieldName', FieldNameDirectiveProvider);
diff --git a/...me/__snapshots__/field_name.test.tsx.snap → ...me/__snapshots__/field_name.test.tsx.snap b/...me/__snapshots__/field_name.test.tsx.snap → ...me/__snapshots__/field_name.test.tsx.snap
diff --git a/...directives/field_name/field_name.test.tsx → ...directives/field_name/field_name.test.tsx b/...directives/field_name/field_name.test.tsx → ...directives/field_name/field_name.test.tsx
diff --git a/...blic/directives/field_name/field_name.tsx → ...ular/directives/field_name/field_name.tsx b/...blic/directives/field_name/field_name.tsx → ...ular/directives/field_name/field_name.tsx
@@ -18,9 +18,8 @@
  */
 import React from 'react';
 import classNames from 'classnames';
-// @ts-ignore
-import { shortenDottedString } from '../../../../core_plugins/kibana/common/utils/shorten_dotted_string';
-import { FieldIcon } from '../../../../../../src/plugins/kibana_react/public';
+import { FieldIcon } from '../../../../../../../../../plugins/kibana_react/public';
+import { shortenDottedString } from '../../../../../../../../../plugins/data/common/utils';
 import { getFieldTypeName } from './field_type_name';
 
 // property field is provided at discover's field chooser

diff --git a/.../directives/field_name/field_type_name.ts → .../directives/field_name/field_type_name.ts b/.../directives/field_name/field_type_name.ts → .../directives/field_name/field_type_name.ts
@@ -21,52 +21,52 @@ import { i18n } from '@kbn/i18n';
 export function getFieldTypeName(type: string) {
   switch (type) {
     case 'boolean':
-      return i18n.translate('common.ui.directives.fieldNameIcons.booleanAriaLabel', {
+      return i18n.translate('kbn.discover.fieldNameIcons.booleanAriaLabel', {
         defaultMessage: 'Boolean field',
       });
     case 'conflict':
-      return i18n.translate('common.ui.directives.fieldNameIcons.conflictFieldAriaLabel', {
+      return i18n.translate('kbn.discover.fieldNameIcons.conflictFieldAriaLabel', {
         defaultMessage: 'Conflicting field',
       });
     case 'date':
-      return i18n.translate('common.ui.directives.fieldNameIcons.dateFieldAriaLabel', {
+      return i18n.translate('kbn.discover.fieldNameIcons.dateFieldAriaLabel', {
         defaultMessage: 'Date field',
       });
     case 'geo_point':
-      return i18n.translate('common.ui.directives.fieldNameIcons.geoPointFieldAriaLabel', {
+      return i18n.translate('kbn.discover.fieldNameIcons.geoPointFieldAriaLabel', {
         defaultMessage: 'Geo point field',
       });
     case 'geo_shape':
-      return i18n.translate('common.ui.directives.fieldNameIcons.geoShapeFieldAriaLabel', {
+      return i18n.translate('kbn.discover.fieldNameIcons.geoShapeFieldAriaLabel', {
         defaultMessage: 'Geo shape field',
       });
     case 'ip':
-      return i18n.translate('common.ui.directives.fieldNameIcons.ipAddressFieldAriaLabel', {
+      return i18n.translate('kbn.discover.fieldNameIcons.ipAddressFieldAriaLabel', {
         defaultMessage: 'IP address field',
       });
     case 'murmur3':
-      return i18n.translate('common.ui.directives.fieldNameIcons.murmur3FieldAriaLabel', {
+      return i18n.translate('kbn.discover.fieldNameIcons.murmur3FieldAriaLabel', {
         defaultMessage: 'Murmur3 field',
       });
     case 'number':
-      return i18n.translate('common.ui.directives.fieldNameIcons.numberFieldAriaLabel', {
+      return i18n.translate('kbn.discover.fieldNameIcons.numberFieldAriaLabel', {
         defaultMessage: 'Number field',
       });
     case 'source':
       // Note that this type is currently not provided, type for _source is undefined
-      return i18n.translate('common.ui.directives.fieldNameIcons.sourceFieldAriaLabel', {
+      return i18n.translate('kbn.discover.fieldNameIcons.sourceFieldAriaLabel', {
         defaultMessage: 'Source field',
       });
     case 'string':
-      return i18n.translate('common.ui.directives.fieldNameIcons.stringFieldAriaLabel', {
+      return i18n.translate('kbn.discover.fieldNameIcons.stringFieldAriaLabel', {
         defaultMessage: 'String field',
       });
     case 'nested':
-      return i18n.translate('common.ui.directives.fieldNameIcons.nestedFieldAriaLabel', {
+      return i18n.translate('kbn.discover.fieldNameIcons.nestedFieldAriaLabel', {
         defaultMessage: 'Nested field',
       });
     default:
-      return i18n.translate('common.ui.directives.fieldNameIcons.unknownFieldAriaLabel', {
+      return i18n.translate('kbn.discover.fieldNameIcons.unknownFieldAriaLabel', {
         defaultMessage: 'Unknown field',
       });
   }

diff --git a/src/legacy/ui/public/fixed_scroll.js → ..._ready/angular/directives/fixed_scroll.js b/src/legacy/ui/public/fixed_scroll.js → ..._ready/angular/directives/fixed_scroll.js
@@ -19,11 +19,15 @@
 
 import $ from 'jquery';
 import _ from 'lodash';
-import { uiModules } from './modules';
-import { DebounceProvider } from 'ui/directives/debounce';
+import { DebounceProvider } from './debounce';
 
 const SCROLLER_HEIGHT = 20;
 
+/**
+ * This directive adds a fixed horizontal scrollbar to the bottom of the window that proxies its scroll events
+ * to the target element's real scrollbar. This is useful when the target element's horizontal scrollbar
+ * might be waaaay down the page, like the doc table on Discover.
+ */
 export function FixedScrollProvider(Private) {
   const debounce = Private(DebounceProvider);
 
@@ -145,10 +149,3 @@ export function FixedScrollProvider(Private) {
     },
   };
 }
-
-/**
- * This directive adds a fixed horizontal scrollbar to the bottom of the window that proxies its scroll events
- * to the target element's real scrollbar. This is useful when the target element's horizontal scrollbar
- * might be waaaay down the page, like the doc table on Discover.
- */
-uiModules.get('kibana').directive('fixedScroll', FixedScrollProvider);
diff --git a/...cy/ui/public/render_complete/directive.js → ...ady/angular/directives/render_complete.ts b/...cy/ui/public/render_complete/directive.js → ...ady/angular/directives/render_complete.ts
@@ -16,18 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { uiModules } from '../modules';
-import { RenderCompleteHelper } from '../../../../plugins/kibana_utils/public';
+import { IScope } from 'angular';
+import { RenderCompleteHelper } from '../../../../../../../../plugins/kibana_utils/public';
 
 export function createRenderCompleteDirective() {
   return {
-    controller($scope, $element) {
+    controller($scope: IScope, $element: JQLite) {
       const el = $element[0];
       const renderCompleteHelper = new RenderCompleteHelper(el);
       $scope.$on('$destroy', renderCompleteHelper.destroy);
     },
   };
 }
-
-uiModules.get('kibana').directive('renderComplete', createRenderCompleteDirective);
diff --git a/...ins/kibana/public/discover/np_ready/angular/doc_table/components/table_header/helpers.tsx b/...ins/kibana/public/discover/np_ready/angular/doc_table/components/table_header/helpers.tsx
@@ -17,8 +17,7 @@
  * under the License.
  */
 import { IndexPattern } from '../../../../../kibana_services';
-// @ts-ignore
-import { shortenDottedString } from '../../../../../../../common/utils/shorten_dotted_string';
+import { shortenDottedString } from '../../../../../../../../../../plugins/data/common/utils';
 
 export type SortOrder = [string, string];
 export interface ColumnProps {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import 'depth';
		@import 'collapsible_sidebar';