Migrates Label component from Bootstrap to AntD. (#12774)

superset-frontend/cypress-base/cypress/integration/explore/control.test.ts

@@ -104,7 +104,7 @@ describe('VizType control', () => {
       numScripts = nodes.length;
     });
 
-    cy.get('.Control .label').contains('Table').click();
+    cy.get('[data-test="visualization-type"]').contains('Table').click();
 
     cy.get('[role="button"]').contains('Line Chart').click();
 

superset-frontend/cypress-base/cypress/integration/explore/visualizations/table.test.ts

@@ -161,7 +161,7 @@ describe('Visualization > Table', () => {
       cy.verifySliceContainer('table');
       expect(response?.body.result[0].data.length).to.eq(limit);
     });
-    cy.get('span.label-danger').contains('10 rows');
+    cy.get('[data-test="row-count-label"]').contains('10 rows');
   });
 
   it('Test table with columns and row limit', () => {

superset-frontend/spec/javascripts/components/Timer_spec.tsx

@@ -21,15 +21,15 @@
  */
 import React from 'react';
 import { render, sleep, waitFor } from 'spec/helpers/testing-library';
-import Timer from 'src/components/Timer';
+import Timer, { TimerProps } from 'src/components/Timer';
 import { now } from 'src/modules/dates';
 
 function parseTime(text?: string | null) {
   return !!text && Number(text.replace(/:/g, ''));
 }
 
 describe('Timer', () => {
-  const mockProps = {
+  const mockProps: TimerProps = {
     startTime: now(),
     endTime: undefined,
     isRunning: true,
@@ -41,7 +41,6 @@ describe('Timer', () => {
     const node = screen.getByRole('timer');
     let text = node.textContent || '';
     expect(node).toBeInTheDocument();
-    expect(node).toHaveClass('label-warning');
     expect(node).toHaveTextContent('00:00:00.00');
     // should start running
     await waitFor(() => {

superset-frontend/spec/javascripts/explore/components/RowCountLabel_spec.jsx

@@ -45,6 +45,6 @@ describe('RowCountLabel', () => {
       limit: 100,
     };
     const wrapper = shallow(<RowCountLabel {...props} />);
-    expect(wrapper.find(Label).first().props().bsStyle).toBe('danger');
+    expect(wrapper.find(Label).first().props().type).toBe('danger');
   });
 });

superset-frontend/spec/javascripts/profile/Security_spec.tsx

@@ -19,7 +19,7 @@
 import React from 'react';
 import { styledMount as mount } from 'spec/helpers/theming';
 import Security from 'src/profile/components/Security';
-
+import Label from 'src/components/Label';
 import { user, userNoPerms } from './fixtures';
 
 describe('Security', () => {
@@ -31,19 +31,19 @@ describe('Security', () => {
   });
   it('renders 2 role labels', () => {
     const wrapper = mount(<Security {...mockedProps} />);
-    expect(wrapper.find('.roles').find('.label')).toHaveLength(2);
+    expect(wrapper.find('.roles').find(Label)).toHaveLength(2);
   });
   it('renders 2 datasource labels', () => {
     const wrapper = mount(<Security {...mockedProps} />);
-    expect(wrapper.find('.datasources').find('.label')).toHaveLength(2);
+    expect(wrapper.find('.datasources').find(Label)).toHaveLength(2);
   });
   it('renders 3 database labels', () => {
     const wrapper = mount(<Security {...mockedProps} />);
-    expect(wrapper.find('.databases').find('.label')).toHaveLength(3);
+    expect(wrapper.find('.databases').find(Label)).toHaveLength(3);
   });
   it('renders no permission label when empty', () => {
     const wrapper = mount(<Security user={userNoPerms} />);
-    expect(wrapper.find('.datasources').find('.label')).not.toExist();
-    expect(wrapper.find('.databases').find('.label')).not.toExist();
+    expect(wrapper.find('.datasources').find(Label)).not.toExist();
+    expect(wrapper.find('.databases').find(Label)).not.toExist();
   });
 });

superset-frontend/src/SqlLab/components/QueryStateLabel.jsx

@@ -20,16 +20,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Label from 'src/components/Label';
 
-import { STATE_BSSTYLE_MAP } from '../constants';
+import { STATE_TYPE_MAP } from '../constants';
 
 const propTypes = {
   query: PropTypes.object.isRequired,
 };
 
 export default function QueryStateLabel({ query }) {
-  const bsStyle = STATE_BSSTYLE_MAP[query.state];
+  const type = STATE_TYPE_MAP[query.state];
   return (
-    <Label className="m-r-3" bsStyle={bsStyle}>
+    <Label className="m-r-3" type={type}>
       {query.state}
     </Label>
   );

superset-frontend/src/SqlLab/components/QueryTable.jsx

@@ -143,7 +143,7 @@ const QueryTable = props => {
             <ModalTrigger
               className="ResultsModal"
               triggerNode={
-                <Label bsStyle="info" className="pointer">
+                <Label type="info" className="pointer">
                   {t('View results')}
                 </Label>
               }

superset-frontend/src/SqlLab/components/SouthPane.jsx

@@ -33,7 +33,7 @@ import QueryHistory from './QueryHistory';
 import ResultSet from './ResultSet';
 import {
   STATUS_OPTIONS,
-  STATE_BSSTYLE_MAP,
+  STATE_TYPE_MAP,
   LOCALSTORAGE_MAX_QUERY_AGE_MS,
 } from '../constants';
 
@@ -97,10 +97,7 @@ export class SouthPane extends React.PureComponent {
   render() {
     if (this.props.offline) {
       return (
-        <Label
-          className="m-r-3"
-          bsStyle={STATE_BSSTYLE_MAP[STATUS_OPTIONS.offline]}
-        >
+        <Label className="m-r-3" type={STATE_TYPE_MAP[STATUS_OPTIONS.offline]}>
           {STATUS_OPTIONS.offline}
         </Label>
       );

superset-frontend/src/SqlLab/components/SqlEditor.jsx

@@ -71,7 +71,7 @@ import ShareSqlLabQuery from './ShareSqlLabQuery';
 import SqlEditorLeftBar from './SqlEditorLeftBar';
 import AceEditorWrapper from './AceEditorWrapper';
 import {
-  STATE_BSSTYLE_MAP,
+  STATE_TYPE_MAP,
   SQL_EDITOR_GUTTER_HEIGHT,
   SQL_EDITOR_GUTTER_MARGIN,
   SQL_TOOLBAR_HEIGHT,
@@ -575,7 +575,7 @@ class SqlEditor extends React.PureComponent {
             this.props.latestQuery.rows,
           )}
         >
-          <Label bsStyle="warning">LIMIT</Label>
+          <Label type="warning">LIMIT</Label>
         </Tooltip>
       );
     }
@@ -670,7 +670,7 @@ class SqlEditor extends React.PureComponent {
               <Timer
                 startTime={this.props.latestQuery.startDttm}
                 endTime={this.props.latestQuery.endDttm}
-                state={STATE_BSSTYLE_MAP[this.props.latestQuery.state]}
+                state={STATE_TYPE_MAP[this.props.latestQuery.state]}
                 isRunning={this.props.latestQuery.state === 'running'}
               />
             )}

superset-frontend/src/SqlLab/constants.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-export const STATE_BSSTYLE_MAP = {
+export const STATE_TYPE_MAP = {
   offline: 'danger',
   failed: 'danger',
   pending: 'info',

superset-frontend/src/addSlice/AddSliceContainer.tsx

@@ -134,7 +134,7 @@ export default class AddSliceContainer extends React.PureComponent<
                 name="select-vis-type"
                 onChange={this.changeVisType}
                 value={this.state.visType}
-                labelBsStyle="primary"
+                labelType="primary"
               />
             </div>
             <br />

superset-frontend/src/common/components/index.tsx

@@ -52,6 +52,7 @@ export {
   Select,
   Skeleton,
   Switch,
+  Tag,
   Tabs,
   Tooltip,
   Input as AntdInput,

superset-frontend/src/components/CachedLabel.jsx

@@ -67,12 +67,12 @@ class CacheLabel extends React.PureComponent {
   }
 
   render() {
-    const labelStyle = this.state.hovered ? 'primary' : 'default';
+    const labelType = this.state.hovered ? 'primary' : 'default';
     return (
       <TooltipWrapper tooltip={this.state.tooltipContent} label="cache-desc">
         <Label
           className={`${this.props.className}`}
-          bsStyle={labelStyle}
+          type={labelType}
           onClick={this.props.onClick}
           onMouseOver={this.mouseOver.bind(this)}
           onMouseOut={this.mouseOut.bind(this)}

superset-frontend/src/components/DatabaseSelector.tsx

@@ -54,6 +54,11 @@ const DatabaseSelectorWrapper = styled.div`
   }
 `;
 
+const DatabaseOption = styled.span`
+  display: inline-flex;
+  align-items: center;
+`;
+
 interface DatabaseSelectorProps {
   dbId: number;
   formMode?: boolean;
@@ -184,9 +189,9 @@ export default function DatabaseSelector({
 
   function renderDatabaseOption(db: any) {
     return (
-      <span title={db.database_name}>
-        <Label bsStyle="default">{db.backend}</Label> {db.database_name}
-      </span>
+      <DatabaseOption title={db.database_name}>
+        <Label type="default">{db.backend}</Label> {db.database_name}
+      </DatabaseOption>
     );
   }
 

superset-frontend/src/components/Label/Label.stories.tsx

@@ -18,59 +18,52 @@
  */
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
-import Label from './index';
+import Label, { Type } from './index';
 
 export default {
   title: 'Label',
   component: Label,
-  decorators: [withKnobs],
-  excludeStories: /.*Knob$/,
+  excludeStories: 'options',
 };
 
-export const bsStyleKnob = {
-  label: 'Types',
-  options: {
-    default: 'default',
-    info: 'info',
-    success: 'success',
-    warning: 'warning',
-    danger: 'danger',
-    secondary: 'secondary',
-    primary: 'primary',
-  },
-  defaultValue: 'default',
-};
+export const options = [
+  'default',
+  'info',
+  'success',
+  'warning',
+  'danger',
+  'primary',
+  'secondary',
+];
 
 export const LabelGallery = () => (
   <>
     <h4>Non-interactive</h4>
-    {Object.values(bsStyleKnob.options).map(opt => (
-      <Label key={opt} bsStyle={opt}>
+    {Object.values(options).map((opt: Type) => (
+      <Label key={opt} type={opt}>
         {`style: "${opt}"`}
       </Label>
     ))}
     <br />
     <h4>Interactive</h4>
-    {Object.values(bsStyleKnob.options).map(opt => (
-      <Label key={opt} bsStyle={opt} onClick={action('clicked')}>
+    {Object.values(options).map((opt: Type) => (
+      <Label key={opt} type={opt} onClick={action('clicked')}>
         {`style: "${opt}"`}
       </Label>
     ))}
   </>
 );
 
-export const InteractiveLabel = () => (
-  <Label
-    bsStyle={select(
-      bsStyleKnob.label,
-      bsStyleKnob.options,
-      bsStyleKnob.defaultValue,
-    )}
-    onClick={
-      boolean('Has onClick action', false) ? action('clicked') : undefined
-    }
-  >
-    {text('Label', 'Label!')}
-  </Label>
-);
+export const InteractiveLabel = (args: any) => {
+  const { hasOnClick, label, ...rest } = args;
+  return (
+    <Label onClick={hasOnClick ? action('clicked') : undefined} {...rest}>
+      {label}
+    </Label>
+  );
+};
+
+InteractiveLabel.args = {
+  hasOnClick: true,
+  label: 'Example',
+};

superset-frontend/src/components/Label/Label.test.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 import { ReactWrapper } from 'enzyme';
 import { styledMount as mount } from 'spec/helpers/theming';
 import Label from '.';
-import { LabelGallery, bsStyleKnob } from './Label.stories';
+import { LabelGallery, options } from './Label.stories';
 
 describe('Label', () => {
   let wrapper: ReactWrapper;
@@ -34,23 +34,13 @@ describe('Label', () => {
   it('works with an onClick handler', () => {
     const mockAction = jest.fn();
     wrapper = mount(<Label onClick={mockAction} />);
-    wrapper.find('.label').simulate('click');
+    wrapper.find(Label).simulate('click');
     expect(mockAction).toHaveBeenCalled();
   });
 
   // test stories from the storybook!
-  it('renders all the sorybook gallery variants', () => {
+  it('renders all the storybook gallery variants', () => {
     wrapper = mount(<LabelGallery />);
-    Object.values(bsStyleKnob.options).forEach(opt => {
-      expect(wrapper.find(`.label-${opt}`).at(0).text()).toEqual(
-        `style: "${opt}"`,
-      );
-    });
-  });
-
-  // test things NOT in the storybook!
-  it('renders custom label styles without melting', () => {
-    wrapper = mount(<Label bsStyle="foobar" />);
-    expect(wrapper.find('Label.label-foobar')).toHaveLength(1);
+    expect(wrapper.find(Label).length).toEqual(options.length * 2);
   });
 });