move control type select out of each control editor

elastic · Aug 17, 2017 · ccc15d0 · ccc15d0
1 parent c247523
commit ccc15d0
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 42 deletions.
diff --git a/src/core_plugins/input_control_vis/public/components/control_editor.js b/src/core_plugins/input_control_vis/public/components/control_editor.js
@@ -36,23 +36,6 @@ export class ControlEditor extends Component {
             </div>
           </div>
 
-          <div className="kuiSideBarFormRow">
-            <label className="kuiSideBarFormRow__label">
-              Type
-            </label>
-            <div className="kuiSideBarFormRow__control kuiFieldGroupSection--wide">
-              <select
-                className="kuiSelect"
-                value={this.props.controlParams.type}
-                onChange={this.props.handleTypeChange}
-              >
-                <option value="range">Range Slider</option>
-                <option value="terms">Terms Dropdown</option>
-                <option value="text">Text Input</option>
-              </select>
-            </div>
-          </div>
-
           {this.props.children}
         </div>
       );
@@ -63,11 +46,11 @@ export class ControlEditor extends Component {
       'fa-caret-down': this.state.isEditorVisible
     });
 
-    let controlTitle = `Control ${this.props.controlIndex}`;
+    let controlTitle = `${this.props.controlParams.type}: ${this.props.controlIndex}`;
     if (this.props.controlParams.label) {
-      controlTitle = this.props.controlParams.label;
+      controlTitle = `${this.props.controlParams.type}: ${this.props.controlParams.label}`;
     } else if (this.props.controlParams.fieldName) {
-      controlTitle = this.props.controlParams.fieldName;
+      controlTitle = `${this.props.controlParams.type}: ${this.props.controlParams.fieldName}`;
     }
 
     return (
@@ -123,6 +106,5 @@ ControlEditor.propTypes = {
   moveUpControl: PropTypes.func.isRequired,
   moveDownControl: PropTypes.func.isRequired,
   handleRemoveControl: PropTypes.func.isRequired,
-  handleTypeChange: PropTypes.func.isRequired,
   children: PropTypes.node.isRequired
 };
diff --git a/src/core_plugins/input_control_vis/public/components/input_control_vis.js b/src/core_plugins/input_control_vis/public/components/input_control_vis.js
@@ -58,7 +58,7 @@ export class InputControlVis extends Component {
               type="button"
               onClick={this.handleClearAll}
             >
-              Remove filters
+              Clear
             </KuiButton>
           </KuiFieldGroupSection>
         </KuiFieldGroup>

diff --git a/src/core_plugins/input_control_vis/public/components/input_control_vis_editor.js b/src/core_plugins/input_control_vis/public/components/input_control_vis_editor.js
@@ -5,12 +5,16 @@ import { RangeControlEditor } from './range_control_editor';
 import { TermsControlEditor } from './terms_control_editor';
 import { TextControlEditor } from './text_control_editor';
 import { KuiFieldGroup, KuiFieldGroupSection, KuiButton, KuiButtonIcon } from 'ui_framework/components';
-import { addControl, getDefaultOptions, moveControl, newControl, removeControl, setControl } from '../lib/editor_utils';
+import { addControl, moveControl, newControl, removeControl, setControl } from '../lib/editor_utils';
 
 export class InputControlVisEditor extends Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      type: 'terms'
+    };
+
     this.getIndexPatterns = async () => {
       return await props.scope.vis.API.indexPatterns.getIndexPatterns();
     };
@@ -33,14 +37,6 @@ export class InputControlVisEditor extends Component {
     this.setVisParam('controls', setControl(this.props.scope.vis.params.controls, controlIndex, updatedControl));
   }
 
-  handleTypeChange(controlIndex, evt) {
-    const updatedControl = this.props.scope.vis.params.controls[controlIndex];
-    updatedControl.type = evt.target.value;
-    updatedControl.options = getDefaultOptions(updatedControl.type);
-    updatedControl.fieldName = '';
-    this.setVisParam('controls', setControl(this.props.scope.vis.params.controls, controlIndex, updatedControl));
-  }
-
   handleIndexPatternChange(controlIndex, evt) {
     const updatedControl = this.props.scope.vis.params.controls[controlIndex];
     updatedControl.indexPattern = evt.value;
@@ -75,7 +71,7 @@ export class InputControlVisEditor extends Component {
   }
 
   handleAddControl() {
-    this.setVisParam('controls', addControl(this.props.scope.vis.params.controls, newControl('terms')));
+    this.setVisParam('controls', addControl(this.props.scope.vis.params.controls, newControl(this.state.type)));
   }
 
   handleUpdateFiltersChange(evt) {
@@ -131,7 +127,6 @@ export class InputControlVisEditor extends Component {
           moveUpControl={this.moveControl.bind(this, controlIndex, -1)}
           moveDownControl={this.moveControl.bind(this, controlIndex, 1)}
           handleRemoveControl={this.handleRemoveControl.bind(this, controlIndex)}
-          handleTypeChange={this.handleTypeChange.bind(this, controlIndex)}
         >
           {controlEditor}
         </ControlEditor>
@@ -163,14 +158,27 @@ export class InputControlVisEditor extends Component {
 
         {this.renderControls()}
 
-        <KuiButton
-          buttonType="primary"
-          type="button"
-          icon={<KuiButtonIcon type="create" />}
-          onClick={this.handleAddControl}
-        >
-          Add
-        </KuiButton>
+        <div className="kuiSideBarFormRow">
+          <KuiButton
+            buttonType="primary"
+            type="button"
+            icon={<KuiButtonIcon type="create" />}
+            onClick={this.handleAddControl}
+          >
+            Add
+          </KuiButton>
+          <div className="kuiSideBarFormRow__control kuiFieldGroupSection--wide">
+            <select
+              className="kuiSelect"
+              value={this.state.type}
+              onChange={evt => this.setState({ type: evt.target.value })}
+            >
+              <option value="range">Range Slider</option>
+              <option value="terms">Terms Dropdown</option>
+              <option value="text">Text Input</option>
+            </select>
+          </div>
+        </div>
       </div>
     );
   }

diff --git a/src/core_plugins/input_control_vis/public/components/text_control_editor.js b/src/core_plugins/input_control_vis/public/components/text_control_editor.js
@@ -15,7 +15,7 @@ export class TextControlEditor extends Component {
   render() {
     return (
       <div>
-        <span>Text Control Editor</span>
+
         <IndexPatternSelect
           value={this.props.controlParams.indexPattern}
           onChange={this.props.handleIndexPatternChange}