option to define default editor settings as react component

elastic · Jun 5, 2017 · b5f18e9 · b5f18e9
1 parent 9fe295e
commit b5f18e9
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 12 deletions.
diff --git a/src/ui/public/vis/editors/default/default.html b/src/ui/public/vis/editors/default/default.html
@@ -1,5 +1,5 @@
 <div class="collapsible-sidebar">
-  <vis-editor-sidebar vis="vis" class="vis-editor-sidebar" />
+  <vis-editor-sidebar class="vis-editor-sidebar" />
 </div>
 
 <div class="vis-editor-canvas">

diff --git a/src/ui/public/vis/editors/default/default.js b/src/ui/public/vis/editors/default/default.js
@@ -14,6 +14,12 @@ const defaultEditor = function ($rootScope, $compile) {
     constructor(el, vis) {
       this.el = $(el);
       this.vis = vis;
+
+      if (!this.vis.type.editorConfig.optionTabs && this.vis.type.editorConfig.optionsTemplate) {
+        this.vis.type.editorConfig.optionTabs = [
+          { name: 'options', title: 'Options', editor: this.editorConfig.optionsTemplate }
+        ];
+      }
     }
 
     render(visData, searchSource) {

diff --git a/src/ui/public/vis/editors/default/sidebar.html b/src/ui/public/vis/editors/default/sidebar.html
@@ -102,7 +102,13 @@
     </div>
 
     <div class="vis-editor-config" ng-repeat="tab in vis.type.editorConfig.optionTabs" ng-show="sidebar.section == tab.name">
-      <vis-editor-vis-options vis="vis" saved-vis="savedVis" ui-state="uiState" editor="tab.editor"></vis-editor-vis-options>
+      <vis-editor-vis-options
+        vis="vis"
+        vis-data="visData"
+        ui-state="uiState"
+        visualize-editor="visualizeEditor"
+        editor="tab.editor"
+      ></vis-editor-vis-options>
     </div>
 
   </form>

diff --git a/src/ui/public/vis/editors/default/vis_options.js b/src/ui/public/vis/editors/default/vis_options.js
@@ -1,3 +1,5 @@
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import visOptionsTemplate from './vis_options.html';
 
@@ -15,21 +17,42 @@ uiModules
     template: visOptionsTemplate,
     scope: {
       vis: '=',
-      savedVis: '=',
+      visData: '=',
       uiState: '=',
       editor: '=',
-      stageEditableVis: '='
+      visualizeEditor: '='
     },
     link: function ($scope, $el) {
       const $optionContainer = $el.find('[data-visualization-options]');
 
+      const reactOptionsComponent = typeof $scope.editor !== 'string';
+      const renderReactComponent = () => {
+        const Component = $scope.editor;
+        render(<Component scope={$scope} />, $el);
+      };
       // Bind the `editor` template with the scope.
-      const $editor = $compile($scope.editor)($scope);
-      $optionContainer.append($editor);
+      if (reactOptionsComponent) {
+        renderReactComponent();
+      } else {
+        const $editor = $compile($scope.editor)($scope);
+        $optionContainer.append($editor);
+      }
+
+      $scope.$watchGroup(['visData', 'visualizeEditor'], () => {
+        if (reactOptionsComponent) {
+          renderReactComponent();
+        }
+      });
 
       $scope.$watch('vis.type.schemas.all.length', function (len) {
         $scope.alwaysShowOptions = len === 0;
       });
+
+      $el.on('$destroy', () => {
+        if (reactOptionsComponent) {
+          unmountComponentAtNode($el);
+        }
+      });
     }
   };
 });
diff --git a/src/ui/public/vis/vis_types/base_vis_type.js b/src/ui/public/vis/vis_types/base_vis_type.js
@@ -36,12 +36,6 @@ export function VisTypeProvider() {
 
       _.defaultsDeep(this, opts, _defaults);
 
-      if (!this.editorConfig.optionTabs && this.editorConfig.optionsTemplate) {
-        this.editorConfig.optionTabs = [
-          { name: 'options', title: 'Options', editor: this.editorConfig.optionsTemplate }
-        ];
-      }
-
       this.requiresSearch = !(this.requestHandler === 'none');
     }
   }