Adding column type label to dropdowns (#4566)

* Adding column type label to dropdowns

* Changing the style of column type label

* Adding tests for ColumnTypeLabel

* Adding tests for time and fixing if statement order

* Changing location of ColumnTypeLabel tests

* Updating ColumnTypeLabel structure

superset/assets/spec/javascripts/components/ColumnOption_spec.jsx

@@ -4,6 +4,7 @@ import { describe, it } from 'mocha';
 import { shallow } from 'enzyme';
 
 import ColumnOption from '../../../javascripts/components/ColumnOption';
+import ColumnTypeLabel from '../../../javascripts/components/ColumnTypeLabel';
 import InfoTooltipWithTrigger from '../../../javascripts/components/InfoTooltipWithTrigger';
 
 describe('ColumnOption', () => {
@@ -14,6 +15,7 @@ describe('ColumnOption', () => {
       expression: 'SUM(foo)',
       description: 'Foo is the greatest column of all',
     },
+    showType: false,
   };
 
   let wrapper;
@@ -44,4 +46,22 @@ describe('ColumnOption', () => {
     wrapper = shallow(factory(props));
     expect(wrapper.find('.option-label').first().text()).to.equal('foo');
   });
+  it('shows a column type label when showType is true', () => {
+    props.showType = true;
+    wrapper = shallow(factory(props));
+    expect(wrapper.find(ColumnTypeLabel)).to.have.length(1);
+  });
+  it('column with expression has correct column label if showType is true', () => {
+    props.showType = true;
+    wrapper = shallow(factory(props));
+    expect(wrapper.find(ColumnTypeLabel)).to.have.length(1);
+    expect(wrapper.find(ColumnTypeLabel).props().type).to.equal('expression');
+  });
+  it('dttm column has correct column label if showType is true', () => {
+    props.showType = true;
+    props.column.is_dttm = true;
+    wrapper = shallow(factory(props));
+    expect(wrapper.find(ColumnTypeLabel)).to.have.length(1);
+    expect(wrapper.find(ColumnTypeLabel).props().type).to.equal('time');
+  });
 });

superset/assets/spec/javascripts/components/ColumnTypeLabel_spec.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+
+import ColumnTypeLabel from '../../../javascripts/components/ColumnTypeLabel';
+
+describe('ColumnOption', () => {
+  const defaultProps = {
+    type: 'string',
+  };
+
+  const props = { ...defaultProps };
+
+  function getWrapper(overrides) {
+    const wrapper = shallow(<ColumnTypeLabel {...props} {...overrides} />);
+    return wrapper;
+  }
+
+  it('is a valid element', () => {
+    expect(React.isValidElement(<ColumnTypeLabel {...defaultProps} />)).to.equal(true);
+  });
+  it('string type shows ABC icon', () => {
+    const lbl = getWrapper({}).find('.type-label');
+    expect(lbl).to.have.length(1);
+    expect(lbl.first().text()).to.equal('ABC');
+  });
+  it('int type shows # icon', () => {
+    const lbl = getWrapper({ type: 'int(164)' }).find('.type-label');
+    expect(lbl).to.have.length(1);
+    expect(lbl.first().text()).to.equal('#');
+  });
+  it('bool type shows T/F icon', () => {
+    const lbl = getWrapper({ type: 'BOOL' }).find('.type-label');
+    expect(lbl).to.have.length(1);
+    expect(lbl.first().text()).to.equal('T/F');
+  });
+  it('expression type shows function icon', () => {
+    const lbl = getWrapper({ type: 'expression' }).find('.type-label');
+    expect(lbl).to.have.length(1);
+    expect(lbl.first().text()).to.equal('ƒ');
+  });
+  it('unknown type shows question mark', () => {
+    const lbl = getWrapper({ type: 'unknown' }).find('.type-label');
+    expect(lbl).to.have.length(1);
+    expect(lbl.first().text()).to.equal('?');
+  });
+  it('unknown type shows question mark', () => {
+    const lbl = getWrapper({ type: 'datetime' }).find('.fa-clock-o');
+    expect(lbl).to.have.length(1);
+  });
+});

superset/assets/spec/javascripts/components/MetricOption_spec.jsx

@@ -4,6 +4,7 @@ import { describe, it } from 'mocha';
 import { shallow } from 'enzyme';
 
 import MetricOption from '../../../javascripts/components/MetricOption';
+import ColumnTypeLabel from '../../../javascripts/components/ColumnTypeLabel';
 import InfoTooltipWithTrigger from '../../../javascripts/components/InfoTooltipWithTrigger';
 
 describe('MetricOption', () => {
@@ -15,6 +16,7 @@ describe('MetricOption', () => {
       description: 'Foo is the greatest metric of all',
       warning_text: 'Be careful when using foo',
     },
+    showType: false,
   };
 
   let wrapper;
@@ -59,4 +61,9 @@ describe('MetricOption', () => {
     wrapper = shallow(factory(props));
     expect(wrapper.find('a').prop('target')).to.equal('_blank');
   });
+  it('shows a metric type label when showType is true', () => {
+    props.showType = true;
+    wrapper = shallow(factory(props));
+    expect(wrapper.find(ColumnTypeLabel)).to.have.length(1);
+  });
 });