feat(theming): land Ant Design v5 overhaul — dynamic themes, real dark mode + massive styling refactor (#31590)

Co-authored-by: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com>
Co-authored-by: Diego Pucci <diegopucci.me@gmail.com>
Co-authored-by: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Co-authored-by: Geido <60598000+geido@users.noreply.github.com>
Co-authored-by: Alexandru Soare <37236580+alexandrusoare@users.noreply.github.com>
Co-authored-by: Damian Pendrak <dpendrak@gmail.com>
Co-authored-by: Pius Iniobong <67148161+payose@users.noreply.github.com>
Co-authored-by: Enzo Martellucci <enzomartellucci@gmail.com>
Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>

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

@@ -20,7 +20,7 @@ import { render, screen, userEvent } from 'spec/helpers/testing-library';
 import CollectionControl from '.';
 
 jest.mock('@superset-ui/chart-controls', () => ({
-  InfoTooltipWithTrigger: (props: any) => (
+  InfoTooltip: (props: any) => (
     <button
       onClick={props.onClick}
       type="button"
@@ -120,10 +120,10 @@ test('Should have remove button', async () => {
   render(<CollectionControl {...props} />);
 
   expect(
-    await screen.findByRole('button', { name: 'remove-item' }),
+    await screen.findByRole('button', { name: 'Show info tooltip' }),
   ).toBeInTheDocument();
   expect(props.onChange).toHaveBeenCalledTimes(0);
-  userEvent.click(screen.getByRole('button', { name: 'remove-item' }));
+  userEvent.click(screen.getByRole('button', { name: 'Show info tooltip' }));
   expect(props.onChange).toHaveBeenCalledWith([]);
 });
 

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

@@ -18,7 +18,7 @@
  */
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import { List } from 'src/components/List';
+import { InfoTooltip, List } from '@superset-ui/core/components';
 import { nanoid } from 'nanoid';
 import { t, withTheme } from '@superset-ui/core';
 import {
@@ -27,12 +27,11 @@ import {
   SortableElement,
   arrayMove,
 } from 'react-sortable-hoc';
-import { Icons } from 'src/components/Icons';
+import { Icons } from '@superset-ui/core/components/Icons';
 import {
   HeaderContainer,
   AddIconButton,
 } from 'src/explore/components/controls/OptionControls';
-import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import ControlHeader from 'src/explore/components/ControlHeader';
 import CustomListItem from 'src/explore/components/controls/CustomListItem';
 import controlMap from '..';
@@ -65,12 +64,10 @@ const defaultProps = {
 const SortableListItem = SortableElement(CustomListItem);
 const SortableList = SortableContainer(List);
 const SortableDragger = SortableHandle(() => (
-  // TODO: Remove fa-icon
-  // eslint-disable-next-line icons/no-fa-icons-usage
-  <i
+  <Icons.MenuOutlined
     role="img"
     aria-label="drag"
-    className="fa fa-bars text-primary"
+    className="text-primary"
     style={{ cursor: 'ns-resize' }}
   />
 ));
@@ -111,7 +108,7 @@ class CollectionControl extends Component {
         onSortEnd={this.onSortEnd.bind(this)}
         bordered
         css={theme => ({
-          borderRadius: theme.gridUnit,
+          borderRadius: theme.borderRadius,
         })}
       >
         {this.props.value.map((o, i) => {
@@ -123,7 +120,7 @@ class CollectionControl extends Component {
               css={theme => ({
                 justifyContent: 'flex-start',
                 display: '-webkit-flex',
-                paddingInline: theme.gridUnit * 3,
+                paddingInline: theme.sizeUnit * 3,
               })}
               key={this.props.keyAccessor(o)}
               index={i}
@@ -132,8 +129,8 @@ class CollectionControl extends Component {
               <div
                 css={theme => ({
                   flex: 1,
-                  marginLeft: theme.gridUnit * 2,
-                  marginRight: theme.gridUnit * 2,
+                  marginLeft: theme.sizeUnit * 2,
+                  marginRight: theme.sizeUnit * 2,
                 })}
               >
                 <Control
@@ -142,8 +139,9 @@ class CollectionControl extends Component {
                   onChange={this.onChange.bind(this, i)}
                 />
               </div>
-              <InfoTooltipWithTrigger
+              <InfoTooltip
                 icon="times"
+                role="button"
                 label="remove-item"
                 tooltip={t('Remove item')}
                 bsStyle="primary"
@@ -157,16 +155,12 @@ class CollectionControl extends Component {
   }
 
   render() {
-    const { theme } = this.props;
     return (
       <div data-test="CollectionControl" className="CollectionControl">
         <HeaderContainer>
           <ControlHeader {...this.props} />
           <AddIconButton onClick={this.onAdd}>
-            <Icons.PlusOutlined
-              iconSize="s"
-              iconColor={theme.colors.grayscale.light5}
-            />
+            <Icons.PlusOutlined iconSize="s" />
           </AddIconButton>
         </HeaderContainer>
         {this.renderList()}