refactor: Bootstrap to AntD - ListGroup

superset-frontend/babel.config.js

@@ -63,6 +63,7 @@ module.exports = {
             targets: { node: 'current' },
           },
         ],
+        ['@emotion/babel-preset-css-prop'],
       ],
       plugins: ['babel-plugin-dynamic-import-node'],
     },

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

@@ -29,7 +29,7 @@ describe('Annotations', () => {
 
     const layerLabel = 'Goal line';
 
-    cy.get('[data-test=annotation_layers] button').click();
+    cy.get('[data-test=annotation_layers]').click();
 
     cy.get('[data-test="popover-content"]').within(() => {
       cy.get('[data-test=annotation-layer-name-header]')

superset-frontend/spec/javascripts/dashboard/components/Header_spec.jsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import Header from 'src/dashboard/components/Header';
 import EditableTitle from 'src/components/EditableTitle';
 import FaveStar from 'src/components/FaveStar';
@@ -83,7 +83,7 @@ describe('Header', () => {
   };
 
   function setup(overrideProps) {
-    const wrapper = shallow(<Header {...props} {...overrideProps} />);
+    const wrapper = mount(<Header {...props} {...overrideProps} />);
     return wrapper;
   }
 

superset-frontend/spec/javascripts/sqllab/ShareSqlLabQuery_spec.jsx

@@ -121,14 +121,12 @@ describe('ShareSqlLabQuery', () => {
           remoteId: undefined,
         },
       };
-      await act(async () => {
-        render(<ShareSqlLabQuery {...updatedProps} />, {
-          wrapper: standardProvider,
-        });
+
+      render(<ShareSqlLabQuery {...updatedProps} />, {
+        wrapper: standardProvider,
       });
-      const button = screen.getByRole('button', { name: /copy link/i });
-      const style = window.getComputedStyle(button);
-      expect(style.color).toBe('rgb(102, 102, 102)');
+      const button = await screen.findByRole('button', { name: /copy link/i });
+      expect(button).toBeDisabled();
     });
   });
 });

superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx

@@ -17,9 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { Tooltip } from 'src/common/components/Tooltip';
-import { t, styled, supersetTheme } from '@superset-ui/core';
-import cx from 'classnames';
+import { t, useTheme } from '@superset-ui/core';
 
 import Button from 'src/components/Button';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
@@ -41,24 +39,12 @@ interface ShareSqlLabQueryPropTypes {
   addDangerToast: (msg: string) => void;
 }
 
-const Styles = styled.div`
-  .btn-disabled {
-    &,
-    &:hover {
-      cursor: default;
-      background-color: ${supersetTheme.colors.grayscale.light2};
-      color: ${supersetTheme.colors.grayscale.base};
-    }
-  }
-  svg {
-    vertical-align: -${supersetTheme.gridUnit * 1.25}px;
-  }
-`;
-
 function ShareSqlLabQuery({
   queryEditor,
   addDangerToast,
 }: ShareSqlLabQueryPropTypes) {
+  const theme = useTheme();
+
   const getCopyUrlForKvStore = (callback: Function) => {
     const { dbId, title, schema, autorun, sql } = queryEditor;
     const sharedQuery = { dbId, title, schema, autorun, sql };
@@ -94,58 +80,41 @@ function ShareSqlLabQuery({
     return getCopyUrlForSavedQuery(callback);
   };
 
-  const buildButton = () => {
-    const canShare =
-      queryEditor.remoteId ||
-      isFeatureEnabled(FeatureFlag.SHARE_QUERIES_VIA_KV_STORE);
+  const buildButton = (canShare: boolean) => {
+    const tooltip = canShare
+      ? t('Copy query link to your clipboard')
+      : t('Save the query to enable this feature');
     return (
-      <Styles>
-        <Button buttonSize="small" className={cx(!canShare && 'btn-disabled')}>
-          <Icon
-            name="link"
-            color={
-              canShare
-                ? supersetTheme.colors.primary.base
-                : supersetTheme.colors.grayscale.base
-            }
-            width={20}
-            height={20}
-          />{' '}
-          {t('Copy link')}
-        </Button>
-      </Styles>
+      <Button buttonSize="small" tooltip={tooltip} disabled={!canShare}>
+        <Icon
+          name="link"
+          color={
+            canShare ? theme.colors.primary.base : theme.colors.grayscale.base
+          }
+          width={20}
+          height={20}
+        />{' '}
+        {t('Copy link')}
+      </Button>
     );
   };
 
   const canShare =
-    queryEditor.remoteId ||
+    !!queryEditor.remoteId ||
     isFeatureEnabled(FeatureFlag.SHARE_QUERIES_VIA_KV_STORE);
 
   return (
-    <Tooltip
-      id="copy_link"
-      placement="top"
-      overlayStyle={{
-        fontSize: supersetTheme.typography.sizes.s,
-        lineHeight: '1.6',
-        maxWidth: '125px',
-      }}
-      title={
-        canShare
-          ? t('Copy query link to your clipboard')
-          : t('Save the query to enable this feature')
-      }
-    >
+    <>
       {canShare ? (
         <CopyToClipboard
           getText={getCopyUrl}
           wrapped={false}
-          copyNode={buildButton()}
+          copyNode={buildButton(canShare)}
         />
       ) : (
-        buildButton()
+        buildButton(canShare)
       )}
-    </Tooltip>
+    </>
   );
 }
 

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

@@ -57,6 +57,7 @@ export { RadioChangeEvent } from 'antd/lib/radio';
 export { TreeProps } from 'antd/lib/tree';
 export { default as Alert, AlertProps } from 'antd/lib/alert';
 export { default as Select, SelectProps } from 'antd/lib/select';
+export { default as List, ListItemProps } from 'antd/lib/list';
 
 export { default as Collapse } from './Collapse';
 export { default as Badge } from 'src/components/Badge';

superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx

@@ -18,14 +18,15 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ListGroup, ListGroupItem } from 'react-bootstrap';
+import { List } from 'src/common/components';
 import { connect } from 'react-redux';
 import { t, withTheme } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import Popover from 'src/components/Popover';
 import AsyncEsmComponent from 'src/components/AsyncEsmComponent';
 import { getChartKey } from 'src/explore/exploreUtils';
 import { runAnnotationQuery } from 'src/chart/chartAction';
+import CustomListItem from 'src/explore/components/controls/CustomListItem';
 
 const AnnotationLayer = AsyncEsmComponent(
   () => import('./AnnotationLayer'),
@@ -164,6 +165,12 @@ class AnnotationLayerControl extends React.PureComponent {
         trigger="click"
         placement="right"
         title={t('Edit annotation layer')}
+        css={theme => ({
+          '&:hover': {
+            cursor: 'pointer',
+            backgroundColor: theme.colors.grayscale.light4,
+          },
+        })}
         content={this.renderPopover(
           i,
           anno,
@@ -172,17 +179,17 @@ class AnnotationLayerControl extends React.PureComponent {
         visible={this.state.popoverVisible[i]}
         onVisibleChange={visible => this.handleVisibleChange(visible, i)}
       >
-        <ListGroupItem>
+        <CustomListItem selectable>
           <span>{anno.name}</span>
           <span style={{ float: 'right' }}>{this.renderInfo(anno)}</span>
-        </ListGroupItem>
+        </CustomListItem>
       </Popover>
     ));
 
     const addLayerPopoverKey = 'add';
     return (
       <div>
-        <ListGroup>
+        <List bordered css={theme => ({ borderRadius: theme.gridUnit })}>
           {annotations}
           <Popover
             trigger="click"
@@ -195,15 +202,15 @@ class AnnotationLayerControl extends React.PureComponent {
               this.handleVisibleChange(visible, addLayerPopoverKey)
             }
           >
-            <ListGroupItem>
+            <CustomListItem selectable>
               <i
                 data-test="add-annotation-layer-button"
                 className="fa fa-plus"
               />{' '}
               &nbsp; {t('Add annotation layer')}
-            </ListGroupItem>
+            </CustomListItem>
           </Popover>
-        </ListGroup>
+        </List>
       </div>
     );
   }

superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx

@@ -74,7 +74,7 @@ const createProps = () => ({
   description: null,
   hovered: false,
   itemGenerator: jest.fn(),
-  keyAccessor: jest.fn(),
+  keyAccessor: jest.fn(() => 'hrYAZ5iBH'),
   label: 'Time series columns',
   name: 'column_collection',
   onChange: jest.fn(),
@@ -105,7 +105,7 @@ test('Should have add button', () => {
   render(<CollectionControl {...props} />);
 
   expect(props.onChange).toBeCalledTimes(0);
-  userEvent.click(screen.getByRole('button', { name: 'add-item' }));
+  userEvent.click(screen.getByRole('button', { name: 'plus-large' }));
   expect(props.onChange).toBeCalledWith([{ key: 'hrYAZ5iBH' }, undefined]);
 });
 
@@ -121,7 +121,7 @@ test('Should have remove button', () => {
 test('Should have SortableDragger icon', () => {
   const props = createProps();
   render(<CollectionControl {...props} />);
-  expect(screen.getByRole('img')).toBeVisible();
+  expect(screen.getByLabelText('drag')).toBeVisible();
 });
 
 test('Should call Control component', () => {