expanding simple tab (#5032)

superset/assets/spec/javascripts/explore/components/AdhocFilterEditPopoverSimpleTabContent_spec.jsx

@@ -43,15 +43,17 @@ const options = [
 
 function setup(overrides) {
   const onChange = sinon.spy();
+  const onHeightChange = sinon.spy();
   const props = {
     adhocFilter: simpleAdhocFilter,
     onChange,
+    onHeightChange,
     options,
     datasource: {},
     ...overrides,
   };
   const wrapper = shallow(<AdhocFilterEditPopoverSimpleTabContent {...props} />);
-  return { wrapper, onChange };
+  return { wrapper, onChange, onHeightChange };
 }
 
 describe('AdhocFilterEditPopoverSimpleTabContent', () => {
@@ -119,4 +121,15 @@ describe('AdhocFilterEditPopoverSimpleTabContent', () => {
     expect(wrapper.instance().isOperatorRelevant('regex')).to.be.true;
     expect(wrapper.instance().isOperatorRelevant('like')).to.be.false;
   });
+
+  it('expands when its multi comparator input field expands', () => {
+    const { wrapper, onHeightChange } = setup();
+
+    wrapper.instance().multiComparatorComponent =
+      { _selectRef: { select: { control: { clientHeight: 57 } } } };
+    wrapper.instance().handleMultiComparatorInputHeightChange();
+
+    expect(onHeightChange.calledOnce).to.be.true;
+    expect(onHeightChange.lastCall.args[0]).to.equal(27);
+  });
 });

superset/assets/src/explore/components/AdhocFilterEditPopover.jsx

@@ -32,6 +32,7 @@ export default class AdhocFilterEditPopover extends React.Component {
     this.onMouseMove = this.onMouseMove.bind(this);
     this.onMouseUp = this.onMouseUp.bind(this);
     this.onAdhocFilterChange = this.onAdhocFilterChange.bind(this);
+    this.adjustHeight = this.adjustHeight.bind(this);
 
     this.state = {
       adhocFilter: this.props.adhocFilter,
@@ -78,6 +79,10 @@ export default class AdhocFilterEditPopover extends React.Component {
     document.removeEventListener('mousemove', this.onMouseMove);
   }
 
+  adjustHeight(heightDifference) {
+    this.setState(state => ({ height: state.height + heightDifference }));
+  }
+
   render() {
     const {
       adhocFilter: propsAdhocFilter,
@@ -115,6 +120,7 @@ export default class AdhocFilterEditPopover extends React.Component {
               onChange={this.onAdhocFilterChange}
               options={this.props.options}
               datasource={this.props.datasource}
+              onHeightChange={this.adjustHeight}
             />
           </Tab>
           {

superset/assets/src/explore/components/AdhocFilterEditPopoverSimpleTabContent.jsx

@@ -29,6 +29,7 @@ const propTypes = {
     PropTypes.shape({ saved_metric_name: PropTypes.string.isRequired }),
     adhocMetricType,
   ])).isRequired,
+  onHeightChange: PropTypes.func.isRequired,
   datasource: PropTypes.object,
 };
 
@@ -45,6 +46,8 @@ function translateOperator(operator) {
   return operator;
 }
 
+const SINGLE_LINE_SELECT_CONTROL_HEIGHT = 30;
+
 export default class AdhocFilterEditPopoverSimpleTabContent extends React.Component {
   constructor(props) {
     super(props);
@@ -54,9 +57,11 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
     this.onInputComparatorChange = this.onInputComparatorChange.bind(this);
     this.isOperatorRelevant = this.isOperatorRelevant.bind(this);
     this.refreshComparatorSuggestions = this.refreshComparatorSuggestions.bind(this);
+    this.multiComparatorRef = this.multiComparatorRef.bind(this);
 
     this.state = {
       suggestions: [],
+      multiComparatorHeight: SINGLE_LINE_SELECT_CONTROL_HEIGHT,
     };
 
     this.selectProps = {
@@ -73,10 +78,15 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
     this.refreshComparatorSuggestions();
   }
 
+  componentDidMount() {
+    this.handleMultiComparatorInputHeightChange();
+  }
+
   componentDidUpdate(prevProps) {
     if (prevProps.adhocFilter.subject !== this.props.adhocFilter.subject) {
       this.refreshComparatorSuggestions();
     }
+    this.handleMultiComparatorInputHeightChange();
   }
 
   onSubjectChange(option) {
@@ -127,6 +137,21 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
     }));
   }
 
+  handleMultiComparatorInputHeightChange() {
+    if (this.multiComparatorComponent) {
+      // eslint-disable-next-line no-underscore-dangle
+      const multiComparatorDOMNode = this.multiComparatorComponent._selectRef.select.control;
+      if (multiComparatorDOMNode) {
+        if (multiComparatorDOMNode.clientHeight !== this.state.multiComparatorHeight) {
+          this.props.onHeightChange((
+            multiComparatorDOMNode.clientHeight - this.state.multiComparatorHeight
+          ));
+          this.setState({ multiComparatorHeight: multiComparatorDOMNode.clientHeight });
+        }
+      }
+    }
+  }
+
   refreshComparatorSuggestions() {
     const datasource = this.props.datasource;
     const col = this.props.adhocFilter.subject;
@@ -163,6 +188,12 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
     }
   }
 
+  multiComparatorRef(ref) {
+    if (ref) {
+      this.multiComparatorComponent = ref;
+    }
+  }
+
   render() {
     const { adhocFilter, options, datasource } = this.props;
 
@@ -238,6 +269,7 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
                 onChange={this.onComparatorChange}
                 showHeader={false}
                 noResultsText={t('type a value here')}
+                refFunc={this.multiComparatorRef}
               /> :
               <input
                 ref={this.focusComparator}

superset/assets/src/explore/components/controls/SelectControl.jsx

@@ -27,6 +27,7 @@ const propTypes = {
   options: PropTypes.array,
   placeholder: PropTypes.string,
   noResultsText: PropTypes.string,
+  refFunc: PropTypes.func,
 };
 
 const defaultProps = {
@@ -129,6 +130,7 @@ export default class SelectControl extends React.PureComponent {
       noResultsText: this.props.noResultsText,
       selectComponent: this.props.freeForm ? Creatable : Select,
       disabled: this.props.disabled,
+      refFunc: this.props.refFunc,
     };
     return (
       <div>