From 0bad77f0fec091130e86318bc20e6fcb3b390a51 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Thu, 6 Aug 2020 22:33:07 -0700
Subject: [PATCH] chore: TypeScript <Label /> (#10494)

* chore: TypeScript <Label />

* rebase

* chore: TypeScript <Label />

* rebase

* A bunch o' test fixes. One more to go!

* helper for mountying Emotional components with Enzyme

* asf license

* fixed last test, some linting

* improve the storybook

* Adressing comments

Co-authored-by: Evan Rusackas <evan@preset.io>
---
 superset-frontend/spec/helpers/theming.ts     | 55 +++++++++++
 .../components/CachedLabel_spec.jsx           |  2 +-
 .../components/AdhocFilterOption_spec.jsx     |  3 +-
 .../components/AdhocMetricOption_spec.jsx     |  3 +-
 .../components/DateFilterControl_spec.jsx     |  5 +-
 .../explore/components/RowCountLabel_spec.jsx |  2 +-
 .../components/ViewportControl_spec.jsx       | 15 +--
 .../javascripts/profile/Security_spec.tsx     |  2 +-
 .../javascripts/sqllab/LimitControl_spec.jsx  |  2 +-
 .../sqllab/QueryStateLabel_spec.jsx           |  2 +-
 .../javascripts/sqllab/SouthPane_spec.jsx     |  5 +-
 .../spec/javascripts/sqllab/Timer_spec.jsx    |  2 +-
 .../src/SqlLab/components/LimitControl.jsx    |  4 +-
 .../src/SqlLab/components/QueryStateLabel.jsx |  2 +-
 .../src/SqlLab/components/QueryTable.jsx      |  5 +-
 .../src/SqlLab/components/SouthPane.jsx       |  3 +-
 .../src/SqlLab/components/SqlEditor.jsx       | 11 ++-
 .../src/components/Button/button.stories.jsx  | 98 ++++++++++++-------
 .../src/components/CachedLabel.jsx            |  3 +-
 .../src/components/Label/index.tsx            | 74 ++++++++++++++
 .../src/components/Label/label.stories.jsx    | 65 ++++++++++++
 .../src/components/TableSelector.jsx          |  2 +-
 superset-frontend/src/components/Timer.jsx    | 10 +-
 .../src/datasource/DatasourceEditor.jsx       | 14 +--
 .../explore/components/AdhocFilterOption.jsx  |  3 +-
 .../explore/components/AdhocMetricOption.jsx  |  3 +-
 .../src/explore/components/RowCountLabel.jsx  |  2 +-
 .../components/controls/DatasourceControl.jsx |  3 +-
 .../components/controls/DateFilterControl.jsx |  6 +-
 .../controls/FixedOrMetricControl.jsx         |  5 +-
 .../components/controls/SpatialControl.jsx    | 14 +--
 .../components/controls/ViewportControl.jsx   |  5 +-
 .../src/profile/components/Security.tsx       |  4 +-
 33 files changed, 328 insertions(+), 106 deletions(-)
 create mode 100644 superset-frontend/spec/helpers/theming.ts
 create mode 100644 superset-frontend/src/components/Label/index.tsx
 create mode 100644 superset-frontend/src/components/Label/label.stories.jsx

diff --git a/superset-frontend/spec/helpers/theming.ts b/superset-frontend/spec/helpers/theming.ts
new file mode 100644
index 0000000000..cf1b4626f2
--- /dev/null
+++ b/superset-frontend/spec/helpers/theming.ts
@@ -0,0 +1,55 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { shallow as enzymeShallow, mount as enzymeMount } from 'enzyme';
+import { supersetTheme, ThemeProvider } from '@superset-ui/style';
+import { ReactElement } from 'react';
+
+type optionsType = {
+  wrappingComponentProps?: any;
+  wrappingComponent?: ReactElement;
+  context?: any;
+};
+
+export function styledMount(
+  component: ReactElement,
+  options: optionsType = {},
+) {
+  return enzymeMount(component, {
+    ...options,
+    wrappingComponent: ThemeProvider,
+    wrappingComponentProps: {
+      theme: supersetTheme,
+      ...options?.wrappingComponentProps,
+    },
+  });
+}
+
+export function styledShallow(
+  component: ReactElement,
+  options: optionsType = {},
+) {
+  return enzymeShallow(component, {
+    ...options,
+    wrappingComponent: ThemeProvider,
+    wrappingComponentProps: {
+      theme: supersetTheme,
+      ...options?.wrappingComponentProps,
+    },
+  });
+}
diff --git a/superset-frontend/spec/javascripts/components/CachedLabel_spec.jsx b/superset-frontend/spec/javascripts/components/CachedLabel_spec.jsx
index 41b182a440..7e1ecf7738 100644
--- a/superset-frontend/spec/javascripts/components/CachedLabel_spec.jsx
+++ b/superset-frontend/spec/javascripts/components/CachedLabel_spec.jsx
@@ -18,8 +18,8 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Label } from 'react-bootstrap';
 
+import Label from 'src/components/Label';
 import CachedLabel from 'src/components/CachedLabel';
 
 describe('CachedLabel', () => {
diff --git a/superset-frontend/spec/javascripts/explore/components/AdhocFilterOption_spec.jsx b/superset-frontend/spec/javascripts/explore/components/AdhocFilterOption_spec.jsx
index caff8aa61d..f2e9ffe434 100644
--- a/superset-frontend/spec/javascripts/explore/components/AdhocFilterOption_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/AdhocFilterOption_spec.jsx
@@ -20,8 +20,9 @@
 import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
-import { Label, OverlayTrigger } from 'react-bootstrap';
+import { OverlayTrigger } from 'react-bootstrap';
 
+import Label from 'src/components/Label';
 import AdhocFilter, {
   EXPRESSION_TYPES,
   CLAUSES,
diff --git a/superset-frontend/spec/javascripts/explore/components/AdhocMetricOption_spec.jsx b/superset-frontend/spec/javascripts/explore/components/AdhocMetricOption_spec.jsx
index bea3432beb..0612f6cbfd 100644
--- a/superset-frontend/spec/javascripts/explore/components/AdhocMetricOption_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/AdhocMetricOption_spec.jsx
@@ -20,8 +20,9 @@
 import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
-import { Label, OverlayTrigger } from 'react-bootstrap';
+import { OverlayTrigger } from 'react-bootstrap';
 
+import Label from 'src/components/Label';
 import AdhocMetric from 'src/explore/AdhocMetric';
 import AdhocMetricOption from 'src/explore/components/AdhocMetricOption';
 import { AGGREGATES } from 'src/explore/constants';
diff --git a/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx
index 1c3b0904e6..5a93af1ac6 100644
--- a/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx
@@ -19,9 +19,10 @@
 /* eslint-disable no-unused-expressions */
 import React from 'react';
 import sinon from 'sinon';
-import { mount } from 'enzyme';
-import { Button, Label } from 'react-bootstrap';
+import { styledMount as mount } from 'spec/helpers/theming';
+import { Button } from 'react-bootstrap';
 
+import Label from 'src/components/Label';
 import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
 import ControlHeader from 'src/explore/components/ControlHeader';
 
diff --git a/superset-frontend/spec/javascripts/explore/components/RowCountLabel_spec.jsx b/superset-frontend/spec/javascripts/explore/components/RowCountLabel_spec.jsx
index 38641d2782..7776788cb1 100644
--- a/superset-frontend/spec/javascripts/explore/components/RowCountLabel_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/RowCountLabel_spec.jsx
@@ -18,8 +18,8 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Label } from 'react-bootstrap';
 
+import Label from 'src/components/Label';
 import TooltipWrapper from 'src/components/TooltipWrapper';
 import RowCountLabel from 'src/explore/components/RowCountLabel';
 
diff --git a/superset-frontend/spec/javascripts/explore/components/ViewportControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/ViewportControl_spec.jsx
index 87828c99e9..720e5db4ce 100644
--- a/superset-frontend/spec/javascripts/explore/components/ViewportControl_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/ViewportControl_spec.jsx
@@ -18,9 +18,10 @@
  */
 /* eslint-disable no-unused-expressions */
 import React from 'react';
-import { shallow } from 'enzyme';
-import { OverlayTrigger, Label } from 'react-bootstrap';
+import { styledMount as mount } from 'spec/helpers/theming';
+import { OverlayTrigger } from 'react-bootstrap';
 
+import Label from 'src/components/Label';
 import ViewportControl from 'src/explore/components/controls/ViewportControl';
 import TextControl from 'src/explore/components/controls/TextControl';
 import ControlHeader from 'src/explore/components/ControlHeader';
@@ -33,13 +34,14 @@ const defaultProps = {
     bearing: 0,
     pitch: 0,
   },
+  name: 'foo',
 };
 
 describe('ViewportControl', () => {
   let wrapper;
   let inst;
   beforeEach(() => {
-    wrapper = shallow(<ViewportControl {...defaultProps} />);
+    wrapper = mount(<ViewportControl {...defaultProps} />);
     inst = wrapper.instance();
   });
 
@@ -50,13 +52,12 @@ describe('ViewportControl', () => {
   });
 
   it('renders a Popover with 5 TextControl', () => {
-    const popOver = shallow(inst.renderPopover());
+    const popOver = mount(inst.renderPopover());
     expect(popOver.find(TextControl)).toHaveLength(5);
   });
 
   it('renders a summary in the label', () => {
-    expect(wrapper.find(Label).first().render().text()).toBe(
-      '6° 51\' 8.50" | 31° 13\' 21.56"',
-    );
+    const label = wrapper.find(Label).first();
+    expect(label.render().text()).toBe('6° 51\' 8.50" | 31° 13\' 21.56"');
   });
 });
diff --git a/superset-frontend/spec/javascripts/profile/Security_spec.tsx b/superset-frontend/spec/javascripts/profile/Security_spec.tsx
index dc493d1148..6732e7b2a8 100644
--- a/superset-frontend/spec/javascripts/profile/Security_spec.tsx
+++ b/superset-frontend/spec/javascripts/profile/Security_spec.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { mount } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import Security from 'src/profile/components/Security';
 
 import { user, userNoPerms } from './fixtures';
diff --git a/superset-frontend/spec/javascripts/sqllab/LimitControl_spec.jsx b/superset-frontend/spec/javascripts/sqllab/LimitControl_spec.jsx
index ed3a9ba2ef..ec7ce9e2d6 100644
--- a/superset-frontend/spec/javascripts/sqllab/LimitControl_spec.jsx
+++ b/superset-frontend/spec/javascripts/sqllab/LimitControl_spec.jsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { Label } from 'react-bootstrap';
+import Label from 'src/components/Label';
 import LimitControl from 'src/SqlLab/components/LimitControl';
 import ControlHeader from 'src/explore/components/ControlHeader';
 
diff --git a/superset-frontend/spec/javascripts/sqllab/QueryStateLabel_spec.jsx b/superset-frontend/spec/javascripts/sqllab/QueryStateLabel_spec.jsx
index 01fc48e809..a53225d96a 100644
--- a/superset-frontend/spec/javascripts/sqllab/QueryStateLabel_spec.jsx
+++ b/superset-frontend/spec/javascripts/sqllab/QueryStateLabel_spec.jsx
@@ -17,9 +17,9 @@
  * under the License.
  */
 import React from 'react';
-import { Label } from 'react-bootstrap';
 import { shallow } from 'enzyme';
 
+import Label from 'src/components/Label';
 import QueryStateLabel from 'src/SqlLab/components/QueryStateLabel';
 
 describe('SavedQuery', () => {
diff --git a/superset-frontend/spec/javascripts/sqllab/SouthPane_spec.jsx b/superset-frontend/spec/javascripts/sqllab/SouthPane_spec.jsx
index 35beab77d0..64f0164295 100644
--- a/superset-frontend/spec/javascripts/sqllab/SouthPane_spec.jsx
+++ b/superset-frontend/spec/javascripts/sqllab/SouthPane_spec.jsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { shallow } from 'enzyme';
+import { styledShallow as shallow } from 'spec/helpers/theming';
 import SouthPaneContainer, { SouthPane } from 'src/SqlLab/components/SouthPane';
 import ResultSet from 'src/SqlLab/components/ResultSet';
 import { STATUS_OPTIONS } from 'src/SqlLab/constants';
@@ -70,6 +70,7 @@ describe('SouthPane', () => {
     actions: {},
     activeSouthPaneTab: '',
     height: 1,
+    displayLimit: 1,
     databases: {},
     offline: false,
   };
@@ -90,7 +91,7 @@ describe('SouthPane', () => {
   it('should render offline when the state is offline', () => {
     wrapper = getWrapper();
     wrapper.setProps({ offline: true });
-    expect(wrapper.find('.m-r-3').render().text()).toBe(STATUS_OPTIONS.offline);
+    expect(wrapper.childAt(0).text()).toBe(STATUS_OPTIONS.offline);
   });
   it('should pass latest query down to ResultSet component', () => {
     wrapper = getWrapper();
diff --git a/superset-frontend/spec/javascripts/sqllab/Timer_spec.jsx b/superset-frontend/spec/javascripts/sqllab/Timer_spec.jsx
index ecd619324f..49efac73d8 100644
--- a/superset-frontend/spec/javascripts/sqllab/Timer_spec.jsx
+++ b/superset-frontend/spec/javascripts/sqllab/Timer_spec.jsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { mount } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import sinon from 'sinon';
 
 import Timer from 'src/components/Timer';
diff --git a/superset-frontend/src/SqlLab/components/LimitControl.jsx b/superset-frontend/src/SqlLab/components/LimitControl.jsx
index c5ec5ba951..e26bb639b8 100644
--- a/superset-frontend/src/SqlLab/components/LimitControl.jsx
+++ b/superset-frontend/src/SqlLab/components/LimitControl.jsx
@@ -20,7 +20,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Button,
-  Label,
   FormGroup,
   FormControl,
   Overlay,
@@ -28,6 +27,7 @@ import {
 } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 
+import Label from 'src/components/Label';
 import ControlHeader from '../../explore/components/ControlHeader';
 
 const propTypes = {
@@ -131,7 +131,7 @@ export default class LimitControl extends React.PureComponent {
   render() {
     return (
       <div>
-        <Label style={{ cursor: 'pointer' }} onClick={this.handleToggle}>
+        <Label className="pointer" onClick={this.handleToggle}>
           LIMIT {this.props.value || this.props.maxRow}
         </Label>
         <Overlay
diff --git a/superset-frontend/src/SqlLab/components/QueryStateLabel.jsx b/superset-frontend/src/SqlLab/components/QueryStateLabel.jsx
index 58a9e7e06b..74b0d3f7a7 100644
--- a/superset-frontend/src/SqlLab/components/QueryStateLabel.jsx
+++ b/superset-frontend/src/SqlLab/components/QueryStateLabel.jsx
@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Label } from 'react-bootstrap';
+import Label from 'src/components/Label';
 
 import { STATE_BSSTYLE_MAP } from '../constants';
 
diff --git a/superset-frontend/src/SqlLab/components/QueryTable.jsx b/superset-frontend/src/SqlLab/components/QueryTable.jsx
index 3e227df010..6c3ec8029b 100644
--- a/superset-frontend/src/SqlLab/components/QueryTable.jsx
+++ b/superset-frontend/src/SqlLab/components/QueryTable.jsx
@@ -20,7 +20,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Table } from 'reactable-arc';
-import { Label, ProgressBar, Well } from 'react-bootstrap';
+import { ProgressBar, Well } from 'react-bootstrap';
+import Label from 'src/components/Label';
 import { t } from '@superset-ui/translation';
 
 import Link from '../../components/Link';
@@ -141,7 +142,7 @@ class QueryTable extends React.PureComponent {
               bsSize="large"
               className="ResultsModal"
               triggerNode={
-                <Label bsStyle="info" style={{ cursor: 'pointer' }}>
+                <Label bsStyle="info" className="pointer">
                   {t('view results')}
                 </Label>
               }
diff --git a/superset-frontend/src/SqlLab/components/SouthPane.jsx b/superset-frontend/src/SqlLab/components/SouthPane.jsx
index 54c0dc3499..170b0a2452 100644
--- a/superset-frontend/src/SqlLab/components/SouthPane.jsx
+++ b/superset-frontend/src/SqlLab/components/SouthPane.jsx
@@ -19,12 +19,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import shortid from 'shortid';
-import { Alert, Label, Tab, Tabs } from 'react-bootstrap';
+import { Alert, Tab, Tabs } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { t } from '@superset-ui/translation';
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 
+import Label from 'src/components/Label';
 import * as Actions from '../actions/sqlLab';
 import QueryHistory from './QueryHistory';
 import ResultSet from './ResultSet';
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor.jsx b/superset-frontend/src/SqlLab/components/SqlEditor.jsx
index 5f78f41106..976a3be94a 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor.jsx
@@ -24,7 +24,6 @@ import {
   InputGroup,
   Form,
   FormControl,
-  Label,
   OverlayTrigger,
   Tooltip,
 } from 'react-bootstrap';
@@ -33,8 +32,12 @@ import { t } from '@superset-ui/translation';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 
-import Button from '../../components/Button';
-import Checkbox from '../../components/Checkbox';
+import Label from 'src/components/Label';
+import Button from 'src/components/Button';
+import Checkbox from 'src/components/Checkbox';
+import Timer from 'src/components/Timer';
+import Hotkeys from 'src/components/Hotkeys';
+
 import LimitControl from './LimitControl';
 import TemplateParamsEditor from './TemplateParamsEditor';
 import SouthPane from './SouthPane';
@@ -42,8 +45,6 @@ import SaveQuery from './SaveQuery';
 import ScheduleQueryButton from './ScheduleQueryButton';
 import EstimateQueryCostButton from './EstimateQueryCostButton';
 import ShareSqlLabQuery from './ShareSqlLabQuery';
-import Timer from '../../components/Timer';
-import Hotkeys from '../../components/Hotkeys';
 import SqlEditorLeftBar from './SqlEditorLeftBar';
 import AceEditorWrapper from './AceEditorWrapper';
 import {
diff --git a/superset-frontend/src/components/Button/button.stories.jsx b/superset-frontend/src/components/Button/button.stories.jsx
index 72fb6860ba..52aba21349 100644
--- a/superset-frontend/src/components/Button/button.stories.jsx
+++ b/superset-frontend/src/components/Button/button.stories.jsx
@@ -100,41 +100,65 @@ const hrefKnob = {
 };
 
 export const SupersetButton = () => (
-  <Button
-    disabled={boolean('Disabled', false)}
-    bsStyle={select(
-      bsStyleKnob.label,
-      bsStyleKnob.options,
-      bsStyleKnob.defaultValue,
-      bsStyleKnob.groupId,
-    )}
-    bsSize={select(
-      bsSizeKnob.label,
-      bsSizeKnob.options,
-      bsSizeKnob.defaultValue,
-      bsSizeKnob.groupId,
-    )}
-    onClick={action('clicked')}
-    type={select(
-      typeKnob.label,
-      typeKnob.options,
-      typeKnob.defaultValue,
-      typeKnob.groupId,
-    )}
-    target={select(
-      targetKnob.label,
-      targetKnob.options,
-      targetKnob.defaultValue,
-      targetKnob.groupId,
-    )}
-    href={select(
-      hrefKnob.label,
-      hrefKnob.options,
-      hrefKnob.defaultValue,
-      hrefKnob.groupId,
-    )}
-    tooltip={boolean('Tooltip', false) === true ? 'This is a tooltip!' : null}
-  >
-    {text('Label', 'Button!')}
-  </Button>
+  <div style={{ padding: '10px', backgroundColor: 'white' }}>
+    <h3>Interactive</h3>
+    <Button
+      disabled={boolean('Disabled', false)}
+      bsStyle={select(
+        bsStyleKnob.label,
+        bsStyleKnob.options,
+        bsStyleKnob.defaultValue,
+        bsStyleKnob.groupId,
+      )}
+      bsSize={select(
+        bsSizeKnob.label,
+        bsSizeKnob.options,
+        bsSizeKnob.defaultValue,
+        bsSizeKnob.groupId,
+      )}
+      onClick={action('clicked')}
+      type={select(
+        typeKnob.label,
+        typeKnob.options,
+        typeKnob.defaultValue,
+        typeKnob.groupId,
+      )}
+      target={select(
+        targetKnob.label,
+        targetKnob.options,
+        targetKnob.defaultValue,
+        targetKnob.groupId,
+      )}
+      href={select(
+        hrefKnob.label,
+        hrefKnob.options,
+        hrefKnob.defaultValue,
+        hrefKnob.groupId,
+      )}
+      tooltip={boolean('Tooltip', false) === true ? 'This is a tooltip!' : null}
+    >
+      {text('Label', 'Button!')}
+    </Button>
+    <h3>Gallery</h3>
+    {Object.values(bsSizeKnob.options)
+      .filter(a => a)
+      .map(size => (
+        <div>
+          <h4>{size}</h4>
+          {Object.values(bsStyleKnob.options)
+            .filter(o => o)
+            .map(style => (
+              <Button
+                disabled={boolean('Disabled', false)}
+                bsStyle={style}
+                bsSize={size}
+                onClick={action('clicked')}
+                style={{ marginRight: 5 }}
+              >
+                {style}
+              </Button>
+            ))}
+        </div>
+      ))}
+  </div>
 );
diff --git a/superset-frontend/src/components/CachedLabel.jsx b/superset-frontend/src/components/CachedLabel.jsx
index 6876e24c91..1a9e4505b8 100644
--- a/superset-frontend/src/components/CachedLabel.jsx
+++ b/superset-frontend/src/components/CachedLabel.jsx
@@ -18,9 +18,10 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Label } from 'react-bootstrap';
 import moment from 'moment';
 import { t } from '@superset-ui/translation';
+
+import Label from 'src/components/Label';
 import TooltipWrapper from './TooltipWrapper';
 
 const propTypes = {
diff --git a/superset-frontend/src/components/Label/index.tsx b/superset-frontend/src/components/Label/index.tsx
new file mode 100644
index 0000000000..359b95e5f5
--- /dev/null
+++ b/superset-frontend/src/components/Label/index.tsx
@@ -0,0 +1,74 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { Label as BootstrapLabel } from 'react-bootstrap';
+import styled from '@superset-ui/style';
+
+export type OnClickHandler = React.MouseEventHandler<BootstrapLabel>;
+
+export interface LabelProps {
+  key?: string;
+  className?: string;
+  tooltip?: string;
+  placement?: string;
+  onClick?: OnClickHandler;
+  bsStyle?: string;
+  style?: BootstrapLabel.LabelProps['style'];
+  children?: React.ReactNode;
+}
+
+const SupersetLabel = styled(BootstrapLabel)`
+  &.supersetLabel {
+    border-radius: ${({ theme }) => theme.borderRadius}px;
+    border: none;
+    color: ${({ theme }) => theme.colors.secondary.light5};
+    font-size: ${({ theme }) => theme.typography.sizes.s};
+    font-weight: ${({ theme }) => theme.typography.weights.bold};
+    min-width: ${({ theme }) => theme.gridUnit * 36}px;
+    min-height: ${({ theme }) => theme.gridUnit * 8}px;
+    text-transform: uppercase;
+    margin-left: ${({ theme }) => theme.gridUnit * 4}px;
+    &:first-of-type {
+      margin-left: 0;
+    }
+
+    i {
+      padding: 0 ${({ theme }) => theme.gridUnit * 2}px 0 0;
+    }
+
+    &.primary {
+      background-color: ${({ theme }) => theme.colors.primary.base};
+    }
+    &.secondary {
+      color: ${({ theme }) => theme.colors.primary.base};
+      background-color: ${({ theme }) => theme.colors.primary.light4};
+    }
+    &.danger {
+      background-color: ${({ theme }) => theme.colors.error.base};
+    }
+  }
+`;
+
+export default function Label(props: LabelProps) {
+  const labelProps = {
+    ...props,
+    placement: props.placement || 'top',
+  };
+  return <SupersetLabel {...labelProps}>{props.children}</SupersetLabel>;
+}
diff --git a/superset-frontend/src/components/Label/label.stories.jsx b/superset-frontend/src/components/Label/label.stories.jsx
new file mode 100644
index 0000000000..a962749847
--- /dev/null
+++ b/superset-frontend/src/components/Label/label.stories.jsx
@@ -0,0 +1,65 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, select, text } from '@storybook/addon-knobs';
+import Label from './index';
+
+export default {
+  title: 'Label',
+  component: Label,
+  decorators: [withKnobs],
+};
+
+const bsStyleKnob = {
+  label: 'Types',
+  options: {
+    danger: 'danger',
+    warning: 'warning',
+    success: 'success',
+    default: 'default',
+  },
+  defaultValue: 'default',
+};
+export const SupersetLabel = () => (
+  <div style={{ padding: '10px' }}>
+    <h2>Interactive</h2>
+    <Label
+      bsStyle={select(
+        bsStyleKnob.label,
+        bsStyleKnob.options,
+        bsStyleKnob.defaultValue,
+        bsStyleKnob.groupId,
+      )}
+      onClick={action('clicked')}
+    >
+      {text('Label', 'Label!')}
+    </Label>
+    <h2>Gallery</h2>
+    {Object.values(bsStyleKnob.options).map(opt => (
+      <Label
+        bsStyle={opt}
+        style={{ marginRight: '10px' }}
+        onClick={action('clicked')}
+      >
+        {`style: "${opt}"`}
+      </Label>
+    ))}
+  </div>
+);
diff --git a/superset-frontend/src/components/TableSelector.jsx b/superset-frontend/src/components/TableSelector.jsx
index 922fdd652f..4f8ab32b40 100644
--- a/superset-frontend/src/components/TableSelector.jsx
+++ b/superset-frontend/src/components/TableSelector.jsx
@@ -21,10 +21,10 @@ import styled from '@superset-ui/style';
 import PropTypes from 'prop-types';
 import rison from 'rison';
 import { AsyncSelect, CreatableSelect, Select } from 'src/components/Select';
-import { Label } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
 
+import Label from 'src/components/Label';
 import FormLabel from 'src/components/FormLabel';
 
 import SupersetAsyncSelect from './AsyncSelect';
diff --git a/superset-frontend/src/components/Timer.jsx b/superset-frontend/src/components/Timer.jsx
index 8bbd89f86b..7fe83a0a65 100644
--- a/superset-frontend/src/components/Timer.jsx
+++ b/superset-frontend/src/components/Timer.jsx
@@ -18,8 +18,8 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Label } from 'react-bootstrap';
 
+import Label from 'src/components/Label';
 import { now, fDuration } from '../modules/dates';
 
 const propTypes = {
@@ -27,14 +27,12 @@ const propTypes = {
   isRunning: PropTypes.bool.isRequired,
   startTime: PropTypes.number,
   status: PropTypes.string,
-  style: PropTypes.object,
 };
 
 const defaultProps = {
   endTime: null,
   startTime: null,
   status: 'success',
-  style: null,
 };
 
 export default class Timer extends React.PureComponent {
@@ -78,11 +76,7 @@ export default class Timer extends React.PureComponent {
     let timerSpan = null;
     if (this.props) {
       timerSpan = (
-        <Label
-          className="m-r-5"
-          style={this.props.style}
-          bsStyle={this.props.status}
-        >
+        <Label className="m-r-5" bsStyle={this.props.status}>
           {this.state.clockStr}
         </Label>
       );
diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx
index 4d1e0ff05b..8ce54307bd 100644
--- a/superset-frontend/src/datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/datasource/DatasourceEditor.jsx
@@ -18,16 +18,18 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Badge, Col, Label, Tabs, Tab, Well } from 'react-bootstrap';
+import { Alert, Badge, Col, Tabs, Tab, Well } from 'react-bootstrap';
 import shortid from 'shortid';
 import styled from '@superset-ui/style';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
-import getClientErrorObject from '../utils/getClientErrorObject';
 
-import Button from '../components/Button';
-import Loading from '../components/Loading';
-import TableSelector from '../components/TableSelector';
+import Label from 'src/components/Label';
+import Button from 'src/components/Button';
+import Loading from 'src/components/Loading';
+import TableSelector from 'src/components/TableSelector';
+
+import getClientErrorObject from '../utils/getClientErrorObject';
 import CheckboxControl from '../explore/components/controls/CheckboxControl';
 import TextControl from '../explore/components/controls/TextControl';
 import SelectControl from '../explore/components/controls/SelectControl';
@@ -170,7 +172,7 @@ function ColumnCollectionTable({
           ) : (
             v
           ),
-        type: d => <Label style={{ fontSize: '75%' }}>{d}</Label>,
+        type: d => <Label bsStyle="s">{d}</Label>,
         is_dttm: checkboxGenerator,
         filterable: checkboxGenerator,
         groupby: checkboxGenerator,
diff --git a/superset-frontend/src/explore/components/AdhocFilterOption.jsx b/superset-frontend/src/explore/components/AdhocFilterOption.jsx
index b84291a938..7d0545456d 100644
--- a/superset-frontend/src/explore/components/AdhocFilterOption.jsx
+++ b/superset-frontend/src/explore/components/AdhocFilterOption.jsx
@@ -18,10 +18,11 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Label, OverlayTrigger } from 'react-bootstrap';
+import { OverlayTrigger } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 
+import Label from 'src/components/Label';
 import AdhocFilterEditPopover from './AdhocFilterEditPopover';
 import AdhocFilter from '../AdhocFilter';
 import columnType from '../propTypes/columnType';
diff --git a/superset-frontend/src/explore/components/AdhocMetricOption.jsx b/superset-frontend/src/explore/components/AdhocMetricOption.jsx
index 60e0a9ce79..945107c9cd 100644
--- a/superset-frontend/src/explore/components/AdhocMetricOption.jsx
+++ b/superset-frontend/src/explore/components/AdhocMetricOption.jsx
@@ -18,8 +18,9 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Label, OverlayTrigger } from 'react-bootstrap';
+import { OverlayTrigger } from 'react-bootstrap';
 
+import Label from 'src/components/Label';
 import AdhocMetricEditPopover from './AdhocMetricEditPopover';
 import AdhocMetric from '../AdhocMetric';
 import columnType from '../propTypes/columnType';
diff --git a/superset-frontend/src/explore/components/RowCountLabel.jsx b/superset-frontend/src/explore/components/RowCountLabel.jsx
index 64cc8d7313..4831190117 100644
--- a/superset-frontend/src/explore/components/RowCountLabel.jsx
+++ b/superset-frontend/src/explore/components/RowCountLabel.jsx
@@ -18,10 +18,10 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Label } from 'react-bootstrap';
 import { getNumberFormatter } from '@superset-ui/number-format';
 import { t } from '@superset-ui/translation';
 
+import Label from 'src/components/Label';
 import TooltipWrapper from '../../components/TooltipWrapper';
 
 const propTypes = {
diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx
index b966c93e67..46b59ba8fb 100644
--- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx
+++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx
@@ -22,7 +22,6 @@ import {
   Col,
   Collapse,
   DropdownButton,
-  Label,
   MenuItem,
   OverlayTrigger,
   Row,
@@ -31,6 +30,8 @@ import {
 } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 import { ColumnOption, MetricOption } from '@superset-ui/chart-controls';
+
+import Label from 'src/components/Label';
 import ControlHeader from '../ControlHeader';
 import DatasourceModal from '../../../datasource/DatasourceModal';
 import ChangeDatasourceModal from '../../../datasource/ChangeDatasourceModal';
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl.jsx b/superset-frontend/src/explore/components/controls/DateFilterControl.jsx
index 90de1e0c29..538123cc97 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl.jsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl.jsx
@@ -24,7 +24,6 @@ import {
   FormControl,
   FormGroup,
   InputGroup,
-  Label,
   MenuItem,
   OverlayTrigger,
   Popover,
@@ -43,6 +42,7 @@ import {
   buildTimeRangeString,
   formatTimeRange,
 } from 'src/explore/dateFilterUtils';
+import Label from 'src/components/Label';
 import './DateFilterControl.less';
 import ControlHeader from '../ControlHeader';
 import PopoverSection from '../../../components/PopoverSection';
@@ -391,7 +391,7 @@ class DateFilterControl extends React.Component {
       const timeRange = buildTimeRangeString(nextState.since, nextState.until);
 
       return (
-        <Styles theme={this.props.theme}>
+        <Styles theme={this.props.theme} key={timeFrame}>
           <OverlayTrigger
             key={timeFrame}
             placement="right"
@@ -590,7 +590,7 @@ class DateFilterControl extends React.Component {
           overlay={this.renderPopover()}
           onClick={this.handleClickTrigger}
         >
-          <Label name="popover-trigger" style={{ cursor: 'pointer' }}>
+          <Label name="popover-trigger" className="pointer">
             {formatTimeRange(timeRange, this.props.endpoints)}
           </Label>
         </OverlayTrigger>
diff --git a/superset-frontend/src/explore/components/controls/FixedOrMetricControl.jsx b/superset-frontend/src/explore/components/controls/FixedOrMetricControl.jsx
index 3aca4416c0..891913e95e 100644
--- a/superset-frontend/src/explore/components/controls/FixedOrMetricControl.jsx
+++ b/superset-frontend/src/explore/components/controls/FixedOrMetricControl.jsx
@@ -18,8 +18,9 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Label, Panel } from 'react-bootstrap';
+import { Panel } from 'react-bootstrap';
 
+import Label from 'src/components/Label';
 import TextControl from './TextControl';
 import MetricsControl from './MetricsControl';
 import ControlHeader from '../ControlHeader';
@@ -103,7 +104,7 @@ export default class FixedOrMetricControl extends React.Component {
     return (
       <div>
         <ControlHeader {...this.props} />
-        <Label style={{ cursor: 'pointer' }} onClick={this.toggle}>
+        <Label className="pointer" onClick={this.toggle}>
           {this.state.type === controlTypes.fixed && (
             <span>{this.state.fixedValue}</span>
           )}
diff --git a/superset-frontend/src/explore/components/controls/SpatialControl.jsx b/superset-frontend/src/explore/components/controls/SpatialControl.jsx
index c499dbf940..f9cdecbf55 100644
--- a/superset-frontend/src/explore/components/controls/SpatialControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SpatialControl.jsx
@@ -18,16 +18,10 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Row,
-  Col,
-  Button,
-  Label,
-  OverlayTrigger,
-  Popover,
-} from 'react-bootstrap';
+import { Row, Col, Button, OverlayTrigger, Popover } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 
+import Label from 'src/components/Label';
 import ControlHeader from '../ControlHeader';
 import SelectControl from './SelectControl';
 import PopoverSection from '../../../components/PopoverSection';
@@ -235,9 +229,7 @@ export default class SpatialControl extends React.Component {
           placement="right"
           overlay={this.renderPopover()}
         >
-          <Label style={{ cursor: 'pointer' }}>
-            {this.renderLabelContent()}
-          </Label>
+          <Label className="pointer">{this.renderLabelContent()}</Label>
         </OverlayTrigger>
       </div>
     );
diff --git a/superset-frontend/src/explore/components/controls/ViewportControl.jsx b/superset-frontend/src/explore/components/controls/ViewportControl.jsx
index b5bf826db7..27f1b7afe3 100644
--- a/superset-frontend/src/explore/components/controls/ViewportControl.jsx
+++ b/superset-frontend/src/explore/components/controls/ViewportControl.jsx
@@ -18,9 +18,10 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Label, Popover, OverlayTrigger } from 'react-bootstrap';
+import { Popover, OverlayTrigger } from 'react-bootstrap';
 import { decimal2sexagesimal } from 'geolib';
 
+import Label from 'src/components/Label';
 import FormLabel from 'src/components/FormLabel';
 import TextControl from './TextControl';
 import ControlHeader from '../ControlHeader';
@@ -104,7 +105,7 @@ export default class ViewportControl extends React.Component {
           placement="right"
           overlay={this.renderPopover()}
         >
-          <Label style={{ cursor: 'pointer' }}>{this.renderLabel()}</Label>
+          <Label className="pointer">{this.renderLabel()}</Label>
         </OverlayTrigger>
       </div>
     );
diff --git a/superset-frontend/src/profile/components/Security.tsx b/superset-frontend/src/profile/components/Security.tsx
index 9646fa1e8a..d80662ee87 100644
--- a/superset-frontend/src/profile/components/Security.tsx
+++ b/superset-frontend/src/profile/components/Security.tsx
@@ -17,8 +17,10 @@
  * under the License.
  */
 import React from 'react';
-import { Badge, Label } from 'react-bootstrap';
+import { Badge } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
+
+import Label from 'src/components/Label';
 import { UserWithPermissionsAndRoles } from '../../types/bootstrapTypes';
 
 interface SecurityProps {