removing angular dependency from base and react vis types (#20386) (#20464)

src/ui/public/vis/__tests__/vis_types/base_vis_type.js

@@ -17,17 +17,10 @@
  * under the License.
  */
 
-import ngMock from 'ng_mock';
 import expect from 'expect.js';
-import { VisTypeProvider } from '../../vis_types/base_vis_type';
+import { BaseVisType } from '../../vis_types/base_vis_type';
 
 describe('Base Vis Type', function () {
-  let BaseVisType;
-
-  beforeEach(ngMock.module('kibana'));
-  beforeEach(ngMock.inject(function (Private) {
-    BaseVisType = Private(VisTypeProvider);
-  }));
 
   describe('initialization', () => {
     it('should throw if mandatory properties are missing', () => {

src/ui/public/vis/__tests__/vis_types/react_vis_type.js

@@ -17,12 +17,10 @@
  * under the License.
  */
 
-import ngMock from 'ng_mock';
 import expect from 'expect.js';
-import { ReactVisTypeProvider } from '../../vis_types/react_vis_type';
+import { ReactVisType } from '../../vis_types/react_vis_type';
 
 describe('React Vis Type', function () {
-  let ReactVisType;
 
   const visConfig = {
     name: 'test',
@@ -33,11 +31,6 @@ describe('React Vis Type', function () {
     type: { visConfig: { component: 'test' } }
   };
 
-  beforeEach(ngMock.module('kibana'));
-  beforeEach(ngMock.inject(function (Private) {
-    ReactVisType = Private(ReactVisTypeProvider);
-  }));
-
   describe('initialization', () => {
     it('should throw if component is not set', () => {
       expect(() => {

src/ui/public/vis/vis_factory.js

@@ -17,17 +17,15 @@
  * under the License.
  */
 
-import { VisTypeProvider, AngularVisTypeProvider, ReactVisTypeProvider, VislibVisTypeProvider } from './vis_types';
+import { BaseVisType, AngularVisTypeProvider, ReactVisType, VislibVisTypeProvider } from './vis_types';
 
 export const VisFactoryProvider = (Private) => {
-  const VisType = Private(VisTypeProvider);
   const AngularVisType = Private(AngularVisTypeProvider);
-  const ReactVisType = Private(ReactVisTypeProvider);
   const VislibVisType = Private(VislibVisTypeProvider);
 
   return {
     createBaseVisualization: (config) => {
-      return new VisType(config);
+      return new BaseVisType(config);
     },
     createAngularVisualization: (config) => {
       return new AngularVisType(config);

src/ui/public/vis/vis_types/angular_vis_type.js

@@ -17,12 +17,11 @@
  * under the License.
  */
 
-import { VisTypeProvider } from './';
+import { BaseVisType } from './base_vis_type';
 import $ from 'jquery';
 
 
-export function AngularVisTypeProvider(Private, $compile, $rootScope) {
-  const VisType = Private(VisTypeProvider);
+export function AngularVisTypeProvider($compile, $rootScope) {
 
   class AngularVisController {
     constructor(domeElement, vis) {
@@ -63,7 +62,7 @@ export function AngularVisTypeProvider(Private, $compile, $rootScope) {
     }
   }
 
-  class AngularVisType extends VisType {
+  class AngularVisType extends BaseVisType {
     constructor(opts) {
       opts.visualization = AngularVisController;
 

src/ui/public/vis/vis_types/base_vis_type.js

@@ -20,63 +20,64 @@
 import { CATEGORY } from '../vis_category';
 import _ from 'lodash';
 
-export function VisTypeProvider() {
-  class VisType {
+export class BaseVisType {
+  constructor(opts = {}) {
 
-    constructor(opts) {
-      opts = opts || {};
-
-      if (!opts.name) throw('vis_type must define its name');
-      if (!opts.title) throw('vis_type must define its title');
-      if (!opts.description) throw('vis_type must define its description');
-      if (!opts.icon && !opts.image) throw('vis_type must define its icon or image');
-      if (!opts.visualization) throw('vis_type must define visualization controller');
-
-      const _defaults = {
-        // name, title, description, icon, image
-        category: CATEGORY.OTHER,
-        visualization: null,       // must be a class with render/resize/destroy methods
-        visConfig: {
-          defaults: {},            // default configuration
-        },
-        requestHandler: 'courier',    // select one from registry or pass a function
-        responseHandler: 'tabify',
-        editor: 'default',
-        editorConfig: {
-          collections: {},         // collections used for configuration (list of positions, ...)
-        },
-        options: {                // controls the visualize editor
-          showTimePicker: true,
-          showQueryBar: true,
-          showFilterBar: true,
-          showIndexSelection: true,
-          hierarchicalData: false  // we should get rid of this i guess ?
-        },
-        stage: 'production',
-        feedbackMessage: ''
-      };
-
-      _.defaultsDeep(this, opts, _defaults);
-
-      this.requiresSearch = !(this.requestHandler === 'none');
+    if (!opts.name) {
+      throw('vis_type must define its name');
+    }
+    if (!opts.title) {
+      throw('vis_type must define its title');
+    }
+    if (!opts.description) {
+      throw('vis_type must define its description');
+    }
+    if (!opts.icon && !opts.image) {
+      throw('vis_type must define its icon or image');
+    }
+    if (!opts.visualization) {
+      throw('vis_type must define visualization controller');
     }
 
-    shouldMarkAsExperimentalInUI() {
-      //we are not making a distinction in the UI if a plugin is experimental and/or labs.
-      //we just want to indicate it is special. the current flask icon is sufficient for that.
-      return this.stage === 'experimental' || this.stage === 'lab';
-    }
+    const _defaults = {
+      // name, title, description, icon, image
+      category: CATEGORY.OTHER,
+      visualization: null,       // must be a class with render/resize/destroy methods
+      visConfig: {
+        defaults: {},            // default configuration
+      },
+      requestHandler: 'courier',    // select one from registry or pass a function
+      responseHandler: 'tabify',
+      editor: 'default',
+      editorConfig: {
+        collections: {},         // collections used for configuration (list of positions, ...)
+      },
+      options: {                // controls the visualize editor
+        showTimePicker: true,
+        showQueryBar: true,
+        showFilterBar: true,
+        showIndexSelection: true,
+        hierarchicalData: false  // we should get rid of this i guess ?
+      },
+      stage: 'production',
+      feedbackMessage: ''
+    };
+
+    _.defaultsDeep(this, opts, _defaults);
+
+    this.requiresSearch = this.requestHandler !== 'none';
   }
 
-  Object.defineProperty(VisType.prototype, 'schemas', {
-    get() {
-      if (this.editorConfig && this.editorConfig.schemas) {
-        return this.editorConfig.schemas;
-      }
+  shouldMarkAsExperimentalInUI() {
+    //we are not making a distinction in the UI if a plugin is experimental and/or labs.
+    //we just want to indicate it is special. the current flask icon is sufficient for that.
+    return this.stage === 'experimental' || this.stage === 'lab';
+  }
 
-      return []; //throw `Can't get schemas from a visualization without using the default editor`;
+  get schemas() {
+    if (this.editorConfig && this.editorConfig.schemas) {
+      return this.editorConfig.schemas;
     }
-  });
-
-  return VisType;
+    return [];
+  }
 }

src/ui/public/vis/vis_types/index.js

@@ -17,9 +17,9 @@
  * under the License.
  */
 
-import { VisTypeProvider } from './base_vis_type';
+import { BaseVisType } from './base_vis_type';
 import { AngularVisTypeProvider } from './angular_vis_type';
 import { VislibVisTypeProvider } from './vislib_vis_type';
-import { ReactVisTypeProvider } from './react_vis_type';
+import { ReactVisType } from './react_vis_type';
 
-export { VisTypeProvider, AngularVisTypeProvider, VislibVisTypeProvider, ReactVisTypeProvider };
+export { BaseVisType, AngularVisTypeProvider, VislibVisTypeProvider, ReactVisType };

src/ui/public/vis/vis_types/react_vis_type.js

@@ -19,49 +19,45 @@
 
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { VisTypeProvider } from './';
+import chrome from '../../chrome';
+import { BaseVisType } from './base_vis_type';
 
-export function ReactVisTypeProvider(Private, getAppState, config) {
-  const VisType = Private(VisTypeProvider);
-
-  class ReactVisController {
-    constructor(el, vis) {
-      this.el = el;
-      this.vis = vis;
-    }
-
-    render(visData, updateStatus) {
-      this.visData = visData;
-
-      return new Promise((resolve) => {
-        const Component = this.vis.type.visConfig.component;
-        render(<Component
-          config={config}
-          vis={this.vis}
-          appState={getAppState()}
-          visData={visData}
-          renderComplete={resolve}
-          updateStatus={updateStatus}
-        />, this.el);
-      });
-    }
-
-    destroy() {
-      unmountComponentAtNode(this.el);
-    }
+class ReactVisController {
+  constructor(element, vis) {
+    this.el = element;
+    this.vis = vis;
   }
 
-  class ReactVisType extends VisType {
-    constructor(opts) {
-      opts.visualization = ReactVisController;
+  render(visData, updateStatus) {
+    this.visData = visData;
 
-      super(opts);
-
-      if (!this.visConfig.component) {
-        throw new Error('Missing component for ReactVisType');
-      }
-    }
+    return new Promise((resolve) => {
+      const Component = this.vis.type.visConfig.component;
+      const config = chrome.getUiSettingsClient();
+      render(<Component
+        config={config}
+        vis={this.vis}
+        visData={visData}
+        renderComplete={resolve}
+        updateStatus={updateStatus}
+      />, this.el);
+    });
   }
 
-  return ReactVisType;
+  destroy() {
+    unmountComponentAtNode(this.el);
+  }
+}
+
+export class ReactVisType extends BaseVisType {
+  constructor(opts) {
+    super({
+      ...opts,
+      visualization: ReactVisController
+    });
+
+    if (!this.visConfig.component) {
+      throw new Error('Missing component for ReactVisType');
+    }
+  }
 }

src/ui/public/vis/vis_types/vislib_vis_type.js

@@ -24,13 +24,12 @@ import 'plugins/kbn_vislib_vis_types/controls/heatmap_options';
 import 'plugins/kbn_vislib_vis_types/controls/gauge_options';
 import 'plugins/kbn_vislib_vis_types/controls/point_series';
 import '../../visualize/visualize_legend';
-import { VisTypeProvider } from './base_vis_type';
+import { BaseVisType } from './base_vis_type';
 import { AggResponsePointSeriesProvider } from '../../agg_response/point_series/point_series';
 import VislibProvider from '../../vislib';
 import $ from 'jquery';
 
 export function VislibVisTypeProvider(Private, $rootScope, $timeout, $compile) {
-  const VisType = Private(VisTypeProvider);
   const pointSeries = Private(AggResponsePointSeriesProvider);
   const vislib = Private(VislibProvider);
 
@@ -109,7 +108,7 @@ export function VislibVisTypeProvider(Private, $rootScope, $timeout, $compile) {
     }
   }
 
-  class VislibVisType extends VisType {
+  class VislibVisType extends BaseVisType {
     constructor(opts) {
       if (!opts.responseHandler) {
         opts.responseHandler = 'basic';

test/functional/apps/visualize/_tag_cloud.js

@@ -51,6 +51,7 @@ export default function ({ getService, getPageObjects }) {
       });
       await PageObjects.visualize.selectOrderBy('_key');
       await PageObjects.visualize.clickGo();
+      await PageObjects.header.waitUntilLoadingHasFinished();
     });