[Explore] Adding Adhoc Filters (#4909)

* adding custom expressions to adhoc metrics

* adjusted transitions and made the box expandable

* adding adhoc filters

* adjusted based on feedback

superset/assets/spec/javascripts/explore/AdhocFilter_spec.js

@@ -0,0 +1,136 @@
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+
+import AdhocFilter, { EXPRESSION_TYPES, CLAUSES } from '../../../src/explore/AdhocFilter';
+
+describe('AdhocFilter', () => {
+  it('sets filterOptionName in constructor', () => {
+    const adhocFilter = new AdhocFilter({
+      expressionType: EXPRESSION_TYPES.SIMPLE,
+      subject: 'value',
+      operator: '>',
+      comparator: '10',
+      clause: CLAUSES.WHERE,
+    });
+    expect(adhocFilter.filterOptionName.length).to.be.above(10);
+    expect(adhocFilter).to.deep.equal({
+      expressionType: EXPRESSION_TYPES.SIMPLE,
+      subject: 'value',
+      operator: '>',
+      comparator: '10',
+      clause: CLAUSES.WHERE,
+      filterOptionName: adhocFilter.filterOptionName,
+      sqlExpression: null,
+      fromFormData: false,
+    });
+  });
+
+  it('can create altered duplicates', () => {
+    const adhocFilter1 = new AdhocFilter({
+      expressionType: EXPRESSION_TYPES.SIMPLE,
+      subject: 'value',
+      operator: '>',
+      comparator: '10',
+      clause: CLAUSES.WHERE,
+    });
+    const adhocFilter2 = adhocFilter1.duplicateWith({ operator: '<' });
+
+    expect(adhocFilter1.subject).to.equal(adhocFilter2.subject);
+    expect(adhocFilter1.comparator).to.equal(adhocFilter2.comparator);
+    expect(adhocFilter1.clause).to.equal(adhocFilter2.clause);
+    expect(adhocFilter1.expressionType).to.equal(adhocFilter2.expressionType);
+
+    expect(adhocFilter1.operator).to.equal('>');
+    expect(adhocFilter2.operator).to.equal('<');
+  });
+
+  it('can verify equality', () => {
+    const adhocFilter1 = new AdhocFilter({
+      expressionType: EXPRESSION_TYPES.SIMPLE,
+      subject: 'value',
+      operator: '>',
+      comparator: '10',
+      clause: CLAUSES.WHERE,
+    });
+    const adhocFilter2 = adhocFilter1.duplicateWith({});
+
+    // eslint-disable-next-line no-unused-expressions
+    expect(adhocFilter1.equals(adhocFilter2)).to.be.true;
+    // eslint-disable-next-line no-unused-expressions
+    expect(adhocFilter1 === adhocFilter2).to.be.false;
+  });
+
+  it('can verify inequality', () => {
+    const adhocFilter1 = new AdhocFilter({
+      expressionType: EXPRESSION_TYPES.SIMPLE,
+      subject: 'value',
+      operator: '>',
+      comparator: '10',
+      clause: CLAUSES.WHERE,
+    });
+    const adhocFilter2 = adhocFilter1.duplicateWith({ operator: '<' });
+
+    // eslint-disable-next-line no-unused-expressions
+    expect(adhocFilter1.equals(adhocFilter2)).to.be.false;
+
+    const adhocFilter3 = new AdhocFilter({
+      expressionType: EXPRESSION_TYPES.SQL,
+      sqlExpression: 'value > 10',
+      clause: CLAUSES.WHERE,
+    });
+    const adhocFilter4 = adhocFilter3.duplicateWith({ sqlExpression: 'value = 5' });
+
+    // eslint-disable-next-line no-unused-expressions
+    expect(adhocFilter3.equals(adhocFilter4)).to.be.false;
+  });
+
+  it('can determine if it is valid', () => {
+    const adhocFilter1 = new AdhocFilter({
+      expressionType: EXPRESSION_TYPES.SIMPLE,
+      subject: 'value',
+      operator: '>',
+      comparator: '10',
+      clause: CLAUSES.WHERE,
+    });
+    // eslint-disable-next-line no-unused-expressions
+    expect(adhocFilter1.isValid()).to.be.true;
+
+    const adhocFilter2 = new AdhocFilter({
+      expressionType: EXPRESSION_TYPES.SIMPLE,
+      subject: 'value',
+      operator: '>',
+      comparator: null,
+      clause: CLAUSES.WHERE,
+    });
+    // eslint-disable-next-line no-unused-expressions
+    expect(adhocFilter2.isValid()).to.be.false;
+
+    const adhocFilter3 = new AdhocFilter({
+      expressionType: EXPRESSION_TYPES.SQL,
+      sqlExpression: 'some expression',
+      clause: null,
+    });
+    // eslint-disable-next-line no-unused-expressions
+    expect(adhocFilter3.isValid()).to.be.false;
+  });
+
+  it('can translate from simple expressions to sql expressions', () => {
+    const adhocFilter1 = new AdhocFilter({
+      expressionType: EXPRESSION_TYPES.SIMPLE,
+      subject: 'value',
+      operator: '==',
+      comparator: '10',
+      clause: CLAUSES.WHERE,
+    });
+    expect(adhocFilter1.translateToSql()).to.equal('value = 10');
+
+    const adhocFilter2 = new AdhocFilter({
+      expressionType: EXPRESSION_TYPES.SIMPLE,
+      subject: 'SUM(value)',
+      operator: '!=',
+      comparator: '5',
+      clause: CLAUSES.HAVING,
+    });
+    expect(adhocFilter2.translateToSql()).to.equal('SUM(value) <> 5');
+  });
+});

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

@@ -0,0 +1,189 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import sinon from 'sinon';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+
+import AdhocFilter, { EXPRESSION_TYPES, CLAUSES } from '../../../../src/explore/AdhocFilter';
+import AdhocFilterControl from '../../../../src/explore/components/controls/AdhocFilterControl';
+import AdhocMetric from '../../../../src/explore/AdhocMetric';
+import { AGGREGATES, OPERATORS } from '../../../../src/explore/constants';
+import OnPasteSelect from '../../../../src/components/OnPasteSelect';
+
+const simpleAdhocFilter = new AdhocFilter({
+  expressionType: EXPRESSION_TYPES.SIMPLE,
+  subject: 'value',
+  operator: '>',
+  comparator: '10',
+  clause: CLAUSES.WHERE,
+});
+
+const sumValueAdhocMetric = new AdhocMetric({
+  expressionType: EXPRESSION_TYPES.SIMPLE,
+  column: { type: 'VARCHAR(255)', column_name: 'source' },
+  aggregate: AGGREGATES.SUM,
+});
+
+const savedMetric = { metric_name: 'sum__value', expression: 'SUM(value)' };
+
+const columns = [
+  { type: 'VARCHAR(255)', column_name: 'source' },
+  { type: 'VARCHAR(255)', column_name: 'target' },
+  { type: 'DOUBLE', column_name: 'value' },
+];
+
+const legacyFilter = { col: 'value', op: '>', val: '5' };
+const legacyHavingFilter = { col: 'SUM(value)', op: '>', val: '10' };
+const whereFilterText = 'target in (\'alpha\')';
+const havingFilterText = 'SUM(value) < 20';
+
+const formData = {
+  filters: [legacyFilter],
+  having: havingFilterText,
+  having_filters: [legacyHavingFilter],
+  metric: undefined,
+  metrics: [sumValueAdhocMetric, savedMetric.saved_metric_name],
+  where: whereFilterText,
+};
+
+function setup(overrides) {
+  const onChange = sinon.spy();
+  const props = {
+    onChange,
+    value: [simpleAdhocFilter],
+    datasource: { type: 'table' },
+    columns,
+    savedMetrics: [savedMetric],
+    formData,
+    ...overrides,
+  };
+  const wrapper = shallow(<AdhocFilterControl {...props} />);
+  return { wrapper, onChange };
+}
+
+describe('AdhocFilterControl', () => {
+  it('renders an onPasteSelect', () => {
+    const { wrapper } = setup();
+    expect(wrapper.find(OnPasteSelect)).to.have.lengthOf(1);
+  });
+
+  it('will translate legacy filters into adhoc filters if no adhoc filters are present', () => {
+    const { wrapper } = setup({ value: undefined });
+    expect(wrapper.state('values')).to.have.lengthOf(4);
+    expect(wrapper.state('values')[0].equals((
+      new AdhocFilter({
+        expressionType: EXPRESSION_TYPES.SIMPLE,
+        subject: 'value',
+        operator: '>',
+        comparator: '5',
+        clause: CLAUSES.WHERE,
+      })
+    ))).to.be.true;
+    expect(wrapper.state('values')[1].equals((
+      new AdhocFilter({
+        expressionType: EXPRESSION_TYPES.SIMPLE,
+        subject: 'SUM(value)',
+        operator: '>',
+        comparator: '10',
+        clause: CLAUSES.HAVING,
+      })
+    ))).to.be.true;
+    expect(wrapper.state('values')[2].equals((
+      new AdhocFilter({
+        expressionType: EXPRESSION_TYPES.SQL,
+        sqlExpression: 'target in (\'alpha\')',
+        clause: CLAUSES.WHERE,
+      })
+    ))).to.be.true;
+    expect(wrapper.state('values')[3].equals((
+      new AdhocFilter({
+        expressionType: EXPRESSION_TYPES.SQL,
+        sqlExpression: 'SUM(value) < 20',
+        clause: CLAUSES.HAVING,
+      })
+    ))).to.be.true;
+  });
+
+  it('will ignore legacy filters if adhoc filters are present', () => {
+    const { wrapper } = setup();
+    expect(wrapper.state('values')).to.have.lengthOf(1);
+    expect(wrapper.state('values')[0]).to.equal(simpleAdhocFilter);
+  });
+
+  it('handles saved metrics being selected to filter on', () => {
+    const { wrapper, onChange } = setup({ value: [] });
+    const select = wrapper.find(OnPasteSelect);
+    select.simulate('change', [{ saved_metric_name: 'sum__value' }]);
+
+    const adhocFilter = onChange.lastCall.args[0][0];
+    expect(adhocFilter instanceof AdhocFilter).to.be.true;
+    expect(adhocFilter.equals((
+      new AdhocFilter({
+        expressionType: EXPRESSION_TYPES.SQL,
+        subject: savedMetric.expression,
+        operator: OPERATORS['>'],
+        comparator: 0,
+        clause: CLAUSES.HAVING,
+      })
+    ))).to.be.true;
+  });
+
+  it('handles adhoc metrics being selected to filter on', () => {
+    const { wrapper, onChange } = setup({ value: [] });
+    const select = wrapper.find(OnPasteSelect);
+    select.simulate('change', [sumValueAdhocMetric]);
+
+    const adhocFilter = onChange.lastCall.args[0][0];
+    expect(adhocFilter instanceof AdhocFilter).to.be.true;
+    expect(adhocFilter.equals((
+      new AdhocFilter({
+        expressionType: EXPRESSION_TYPES.SQL,
+        subject: sumValueAdhocMetric.label,
+        operator: OPERATORS['>'],
+        comparator: 0,
+        clause: CLAUSES.HAVING,
+      })
+    ))).to.be.true;
+  });
+
+  it('handles columns being selected to filter on', () => {
+    const { wrapper, onChange } = setup({ value: [] });
+    const select = wrapper.find(OnPasteSelect);
+    select.simulate('change', [columns[0]]);
+
+    const adhocFilter = onChange.lastCall.args[0][0];
+    expect(adhocFilter instanceof AdhocFilter).to.be.true;
+    expect(adhocFilter.equals((
+      new AdhocFilter({
+        expressionType: EXPRESSION_TYPES.SIMPLE,
+        subject: columns[0].column_name,
+        operator: OPERATORS['=='],
+        comparator: '',
+        clause: CLAUSES.WHERE,
+      })
+    ))).to.be.true;
+  });
+
+  it('persists existing filters even when new filters are added', () => {
+    const { wrapper, onChange } = setup();
+    const select = wrapper.find(OnPasteSelect);
+    select.simulate('change', [simpleAdhocFilter, columns[0]]);
+
+    const existingAdhocFilter = onChange.lastCall.args[0][0];
+    expect(existingAdhocFilter instanceof AdhocFilter).to.be.true;
+    expect(existingAdhocFilter.equals(simpleAdhocFilter)).to.be.true;
+
+    const newAdhocFilter = onChange.lastCall.args[0][1];
+    expect(newAdhocFilter instanceof AdhocFilter).to.be.true;
+    expect(newAdhocFilter.equals((
+      new AdhocFilter({
+        expressionType: EXPRESSION_TYPES.SIMPLE,
+        subject: columns[0].column_name,
+        operator: OPERATORS['=='],
+        comparator: '',
+        clause: CLAUSES.WHERE,
+      })
+    ))).to.be.true;
+  });
+});

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

@@ -0,0 +1,122 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import sinon from 'sinon';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+import { FormGroup } from 'react-bootstrap';
+
+import AdhocFilter, { EXPRESSION_TYPES, CLAUSES } from '../../../../src/explore/AdhocFilter';
+import AdhocMetric from '../../../../src/explore/AdhocMetric';
+import AdhocFilterEditPopoverSimpleTabContent from '../../../../src/explore/components/AdhocFilterEditPopoverSimpleTabContent';
+import { AGGREGATES } from '../../../../src/explore/constants';
+
+const simpleAdhocFilter = new AdhocFilter({
+  expressionType: EXPRESSION_TYPES.SIMPLE,
+  subject: 'value',
+  operator: '>',
+  comparator: '10',
+  clause: CLAUSES.WHERE,
+});
+
+const simpleMultiAdhocFilter = new AdhocFilter({
+  expressionType: EXPRESSION_TYPES.SIMPLE,
+  subject: 'value',
+  operator: 'in',
+  comparator: ['10'],
+  clause: CLAUSES.WHERE,
+});
+
+const sumValueAdhocMetric = new AdhocMetric({
+  expressionType: EXPRESSION_TYPES.SIMPLE,
+  column: { type: 'VARCHAR(255)', column_name: 'source' },
+  aggregate: AGGREGATES.SUM,
+});
+
+const options = [
+  { type: 'VARCHAR(255)', column_name: 'source' },
+  { type: 'VARCHAR(255)', column_name: 'target' },
+  { type: 'DOUBLE', column_name: 'value' },
+  { saved_metric_name: 'my_custom_metric' },
+  sumValueAdhocMetric,
+];
+
+function setup(overrides) {
+  const onChange = sinon.spy();
+  const props = {
+    adhocFilter: simpleAdhocFilter,
+    onChange,
+    options,
+    datasource: {},
+    ...overrides,
+  };
+  const wrapper = shallow(<AdhocFilterEditPopoverSimpleTabContent {...props} />);
+  return { wrapper, onChange };
+}
+
+describe('AdhocFilterEditPopoverSimpleTabContent', () => {
+  it('renders the simple tab form', () => {
+    const { wrapper } = setup();
+    expect(wrapper.find(FormGroup)).to.have.lengthOf(3);
+  });
+
+  it('passes the new adhocFilter to onChange after onSubjectChange', () => {
+    const { wrapper, onChange } = setup();
+    wrapper.instance().onSubjectChange({ type: 'VARCHAR(255)', column_name: 'source' });
+    expect(onChange.calledOnce).to.be.true;
+    expect(onChange.lastCall.args[0].equals((
+      simpleAdhocFilter.duplicateWith({ subject: 'source' })
+    ))).to.be.true;
+  });
+
+  it('may alter the clause in onSubjectChange if the old clause is not appropriate', () => {
+    const { wrapper, onChange } = setup();
+    wrapper.instance().onSubjectChange(sumValueAdhocMetric);
+    expect(onChange.calledOnce).to.be.true;
+    expect(onChange.lastCall.args[0].equals((
+      simpleAdhocFilter.duplicateWith({
+        subject: sumValueAdhocMetric.label,
+        clause: CLAUSES.HAVING,
+      })
+    ))).to.be.true;
+  });
+
+  it('will convert from individual comparator to array if the operator changes to multi', () => {
+    const { wrapper, onChange } = setup();
+    wrapper.instance().onOperatorChange({ operator: 'in' });
+    expect(onChange.calledOnce).to.be.true;
+    expect(onChange.lastCall.args[0].comparator).to.have.lengthOf(1);
+    expect(onChange.lastCall.args[0].comparator[0]).to.equal('10');
+    expect(onChange.lastCall.args[0].operator).to.equal('in');
+  });
+
+  it('will convert from array to individual comparators if the operator changes from multi', () => {
+    const { wrapper, onChange } = setup({ adhocFilter: simpleMultiAdhocFilter });
+    wrapper.instance().onOperatorChange({ operator: '<' });
+    expect(onChange.calledOnce).to.be.true;
+    expect(onChange.lastCall.args[0].equals((
+      simpleAdhocFilter.duplicateWith({ operator: '<', comparator: '10' })
+    ))).to.be.true;
+  });
+
+  it('passes the new adhocFilter to onChange after onComparatorChange', () => {
+    const { wrapper, onChange } = setup();
+    wrapper.instance().onComparatorChange('20');
+    expect(onChange.calledOnce).to.be.true;
+    expect(onChange.lastCall.args[0].equals((
+      simpleAdhocFilter.duplicateWith({ comparator: '20' })
+    ))).to.be.true;
+  });
+
+  it('will filter operators for table datasources', () => {
+    const { wrapper } = setup({ datasource: { type: 'table' } });
+    expect(wrapper.instance().isOperatorRelevant('regex')).to.be.false;
+    expect(wrapper.instance().isOperatorRelevant('like')).to.be.true;
+  });
+
+  it('will filter operators for druid datasources', () => {
+    const { wrapper } = setup({ datasource: { type: 'druid' } });
+    expect(wrapper.instance().isOperatorRelevant('regex')).to.be.true;
+    expect(wrapper.instance().isOperatorRelevant('like')).to.be.false;
+  });
+});

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

@@ -0,0 +1,54 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import sinon from 'sinon';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+import { FormGroup } from 'react-bootstrap';
+
+import AdhocFilter, { EXPRESSION_TYPES, CLAUSES } from '../../../../src/explore/AdhocFilter';
+import AdhocFilterEditPopoverSqlTabContent from '../../../../src/explore/components/AdhocFilterEditPopoverSqlTabContent';
+
+const sqlAdhocFilter = new AdhocFilter({
+  expressionType: EXPRESSION_TYPES.SQL,
+  sqlExpression: 'value > 10',
+  clause: CLAUSES.WHERE,
+});
+
+function setup(overrides) {
+  const onChange = sinon.spy();
+  const props = {
+    adhocFilter: sqlAdhocFilter,
+    onChange,
+    options: [],
+    height: 100,
+    ...overrides,
+  };
+  const wrapper = shallow(<AdhocFilterEditPopoverSqlTabContent {...props} />);
+  return { wrapper, onChange };
+}
+
+describe('AdhocFilterEditPopoverSqlTabContent', () => {
+  it('renders the sql tab form', () => {
+    const { wrapper } = setup();
+    expect(wrapper.find(FormGroup)).to.have.lengthOf(2);
+  });
+
+  it('passes the new clause to onChange after onSqlExpressionClauseChange', () => {
+    const { wrapper, onChange } = setup();
+    wrapper.instance().onSqlExpressionClauseChange(CLAUSES.HAVING);
+    expect(onChange.calledOnce).to.be.true;
+    expect(onChange.lastCall.args[0].equals((
+      sqlAdhocFilter.duplicateWith({ clause: CLAUSES.HAVING })
+    ))).to.be.true;
+  });
+
+  it('passes the new query to onChange after onSqlExpressionChange', () => {
+    const { wrapper, onChange } = setup();
+    wrapper.instance().onSqlExpressionChange('value < 5');
+    expect(onChange.calledOnce).to.be.true;
+    expect(onChange.lastCall.args[0].equals((
+      sqlAdhocFilter.duplicateWith({ sqlExpression: 'value < 5' })
+    ))).to.be.true;
+  });
+});

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

@@ -0,0 +1,112 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import sinon from 'sinon';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+import { Button, Popover, Tab, Tabs } from 'react-bootstrap';
+
+import AdhocFilter, { EXPRESSION_TYPES, CLAUSES } from '../../../../src/explore/AdhocFilter';
+import AdhocMetric from '../../../../src/explore/AdhocMetric';
+import AdhocFilterEditPopover from '../../../../src/explore/components/AdhocFilterEditPopover';
+import AdhocFilterEditPopoverSimpleTabContent from '../../../../src/explore/components/AdhocFilterEditPopoverSimpleTabContent';
+import AdhocFilterEditPopoverSqlTabContent from '../../../../src/explore/components/AdhocFilterEditPopoverSqlTabContent';
+import { AGGREGATES } from '../../../../src/explore/constants';
+
+const simpleAdhocFilter = new AdhocFilter({
+  expressionType: EXPRESSION_TYPES.SIMPLE,
+  subject: 'value',
+  operator: '>',
+  comparator: '10',
+  clause: CLAUSES.WHERE,
+});
+
+const sqlAdhocFilter = new AdhocFilter({
+  expressionType: EXPRESSION_TYPES.SQL,
+  sqlExpression: 'value > 10',
+  clause: CLAUSES.WHERE,
+});
+
+const sumValueAdhocMetric = new AdhocMetric({
+  expressionType: EXPRESSION_TYPES.SIMPLE,
+  column: { type: 'VARCHAR(255)', column_name: 'source' },
+  aggregate: AGGREGATES.SUM,
+});
+
+const options = [
+  { type: 'VARCHAR(255)', column_name: 'source' },
+  { type: 'VARCHAR(255)', column_name: 'target' },
+  { type: 'DOUBLE', column_name: 'value' },
+  { saved_metric_name: 'my_custom_metric' },
+  sumValueAdhocMetric,
+];
+
+function setup(overrides) {
+  const onChange = sinon.spy();
+  const onClose = sinon.spy();
+  const onResize = sinon.spy();
+  const props = {
+    adhocFilter: simpleAdhocFilter,
+    onChange,
+    onClose,
+    onResize,
+    options,
+    datasource: {},
+    ...overrides,
+  };
+  const wrapper = shallow(<AdhocFilterEditPopover {...props} />);
+  return { wrapper, onChange, onClose, onResize };
+}
+
+describe('AdhocFilterEditPopover', () => {
+  it('renders simple tab content by default', () => {
+    const { wrapper } = setup();
+    expect(wrapper.find(Popover)).to.have.lengthOf(1);
+    expect(wrapper.find(Tabs)).to.have.lengthOf(1);
+    expect(wrapper.find(Tab)).to.have.lengthOf(2);
+    expect(wrapper.find(Button)).to.have.lengthOf(2);
+    expect(wrapper.find(AdhocFilterEditPopoverSimpleTabContent)).to.have.lengthOf(1);
+  });
+
+  it('renders sql tab content when the adhoc filter expressionType is sql', () => {
+    const { wrapper } = setup({ adhocFilter: sqlAdhocFilter });
+    expect(wrapper.find(Popover)).to.have.lengthOf(1);
+    expect(wrapper.find(Tabs)).to.have.lengthOf(1);
+    expect(wrapper.find(Tab)).to.have.lengthOf(2);
+    expect(wrapper.find(Button)).to.have.lengthOf(2);
+    expect(wrapper.find(AdhocFilterEditPopoverSqlTabContent)).to.have.lengthOf(1);
+  });
+
+  it('overwrites the adhocFilter in state with onAdhocFilterChange', () => {
+    const { wrapper } = setup();
+    wrapper.instance().onAdhocFilterChange(sqlAdhocFilter);
+    expect(wrapper.state('adhocFilter')).to.deep.equal(sqlAdhocFilter);
+  });
+
+  it('prevents saving if the filter is invalid', () => {
+    const { wrapper } = setup();
+    expect(wrapper.find(Button).find({ disabled: true })).to.have.lengthOf(0);
+    wrapper.instance().onAdhocFilterChange(simpleAdhocFilter.duplicateWith({ operator: null }));
+    expect(wrapper.find(Button).find({ disabled: true })).to.have.lengthOf(1);
+    wrapper.instance().onAdhocFilterChange(sqlAdhocFilter);
+    expect(wrapper.find(Button).find({ disabled: true })).to.have.lengthOf(0);
+  });
+
+  it('highlights save if changes are present', () => {
+    const { wrapper } = setup();
+    expect(wrapper.find(Button).find({ bsStyle: 'primary' })).to.have.lengthOf(0);
+    wrapper.instance().onAdhocFilterChange(sqlAdhocFilter);
+    expect(wrapper.find(Button).find({ bsStyle: 'primary' })).to.have.lengthOf(1);
+  });
+
+  it('will initiate a drag when clicked', () => {
+    const { wrapper } = setup();
+    wrapper.instance().onDragDown = sinon.spy();
+    wrapper.instance().forceUpdate();
+
+    expect(wrapper.find('i.glyphicon-resize-full')).to.have.lengthOf(1);
+    expect(wrapper.instance().onDragDown.calledOnce).to.be.false;
+    wrapper.find('i.glyphicon-resize-full').simulate('mouseDown');
+    expect(wrapper.instance().onDragDown.calledOnce).to.be.true;
+  });
+});

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

@@ -0,0 +1,39 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import sinon from 'sinon';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+import { Label, OverlayTrigger } from 'react-bootstrap';
+
+import AdhocFilter, { EXPRESSION_TYPES, CLAUSES } from '../../../../src/explore/AdhocFilter';
+import AdhocFilterOption from '../../../../src/explore/components/AdhocFilterOption';
+
+const simpleAdhocFilter = new AdhocFilter({
+  expressionType: EXPRESSION_TYPES.SIMPLE,
+  subject: 'value',
+  operator: '>',
+  comparator: '10',
+  clause: CLAUSES.WHERE,
+});
+
+function setup(overrides) {
+  const onFilterEdit = sinon.spy();
+  const props = {
+    adhocFilter: simpleAdhocFilter,
+    onFilterEdit,
+    options: [],
+    datasource: {},
+    ...overrides,
+  };
+  const wrapper = shallow(<AdhocFilterOption {...props} />);
+  return { wrapper };
+}
+
+describe('AdhocFilterOption', () => {
+  it('renders an overlay trigger wrapper for the label', () => {
+    const { wrapper } = setup();
+    expect(wrapper.find(OverlayTrigger)).to.have.lengthOf(1);
+    expect(wrapper.find(Label)).to.have.lengthOf(1);
+  });
+});

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

@@ -0,0 +1,22 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+
+import AdhocMetricStaticOption from '../../../../src/explore/components/AdhocMetricStaticOption';
+import AdhocMetric, { EXPRESSION_TYPES } from '../../../../src/explore/AdhocMetric';
+import { AGGREGATES } from '../../../../src/explore/constants';
+
+const sumValueAdhocMetric = new AdhocMetric({
+  expressionType: EXPRESSION_TYPES.SIMPLE,
+  column: { type: 'VARCHAR(255)', column_name: 'source' },
+  aggregate: AGGREGATES.SUM,
+});
+
+describe('AdhocMetricStaticOption', () => {
+  it('renders the adhoc metrics label', () => {
+    const wrapper = shallow(<AdhocMetricStaticOption adhocMetric={sumValueAdhocMetric} />);
+    expect(wrapper.text()).to.equal('SUM(source)');
+  });
+});

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

@@ -0,0 +1,36 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+
+import FilterDefinitionOption from '../../../../src/explore/components/FilterDefinitionOption';
+import ColumnOption from '../../../../src/components/ColumnOption';
+import AdhocMetricStaticOption from '../../../../src/explore/components/AdhocMetricStaticOption';
+import AdhocMetric, { EXPRESSION_TYPES } from '../../../../src/explore/AdhocMetric';
+import { AGGREGATES } from '../../../../src/explore/constants';
+
+const sumValueAdhocMetric = new AdhocMetric({
+  expressionType: EXPRESSION_TYPES.SIMPLE,
+  column: { type: 'VARCHAR(255)', column_name: 'source' },
+  aggregate: AGGREGATES.SUM,
+});
+
+describe('FilterDefinitionOption', () => {
+  it('renders a ColumnOption given a column', () => {
+    const wrapper = shallow(<FilterDefinitionOption option={{ column_name: 'a_column' }} />);
+    expect(wrapper.find(ColumnOption)).to.have.lengthOf(1);
+  });
+
+  it('renders a AdhocMetricStaticOption given an adhoc metric', () => {
+    const wrapper = shallow(<FilterDefinitionOption option={sumValueAdhocMetric} />);
+    expect(wrapper.find(AdhocMetricStaticOption)).to.have.lengthOf(1);
+  });
+
+  it('renders the metric name given a saved metric', () => {
+    const wrapper = shallow((
+      <FilterDefinitionOption option={{ saved_metric_name: 'my_custom_metric' }} />
+    ));
+    expect(wrapper.text()).to.equal('<ColumnTypeLabel />my_custom_metric');
+  });
+});