refactor(Icons): Replaces custom icons with Ant Design 5 icons (#32112)

Replace custom icons with Ant Design 5 icons to standardize the icon

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.jsx

@@ -17,9 +17,10 @@
  * under the License.
  */
 import { useCallback, useState } from 'react';
-import { t, styled } from '@superset-ui/core';
+import { t, styled, useTheme } from '@superset-ui/core';
 import { Input } from 'src/components/Input';
 import { Tooltip } from 'src/components/Tooltip';
+import Icons from 'src/components/Icons';
 
 const StyledInput = styled(Input)`
   border-radius: ${({ theme }) => theme.borderRadius};
@@ -33,6 +34,7 @@ export const DndColumnSelectPopoverTitle = ({
   isEditDisabled,
   hasCustomLabel,
 }) => {
+  const theme = useTheme();
   const [isHovered, setIsHovered] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
 
@@ -91,11 +93,11 @@ export const DndColumnSelectPopoverTitle = ({
       >
         {title || defaultLabel}
          
-        {/* TODO: Remove fa-icon */}
-        {/* eslint-disable-next-line icons/no-fa-icons-usage */}
-        <i
-          className="fa fa-pencil"
-          style={{ color: isHovered ? 'black' : 'grey' }}
+        <Icons.EditOutlined
+          iconColor={
+            isHovered ? theme.colors.primary.base : theme.colors.grayscale.base
+          }
+          iconSize="m"
         />
       </span>
     </Tooltip>

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx

@@ -100,7 +100,13 @@ export default function DndSelectLabel({
         cancelHover={!props.onClickGhostButton}
         onClick={props.onClickGhostButton}
       >
-        <Icons.PlusSmall iconColor={theme.colors.grayscale.light1} />
+        <Icons.PlusOutlined
+          iconSize="m"
+          iconColor={theme.colors.grayscale.light1}
+          css={theme => ({
+            margin: `auto ${theme.gridUnit}px auto 0`,
+          })}
+        />
         {t(props.ghostButtonText)}
       </AddControlLabel>
     );

superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.test.tsx

@@ -42,10 +42,10 @@ describe('Option', () => {
     );
     expect(container).toBeInTheDocument();
     expect(
-      await screen.findByRole('img', { name: 'x-small' }),
+      await screen.findByRole('img', { name: 'close' }),
     ).toBeInTheDocument();
     expect(
-      screen.queryByRole('img', { name: 'caret-right' }),
+      screen.queryByRole('img', { name: 'right' }),
     ).not.toBeInTheDocument();
     unmount();
   });
@@ -57,10 +57,10 @@ describe('Option', () => {
       </Option>,
     );
     expect(
-      await screen.findByRole('img', { name: 'x-small' }),
+      await screen.findByRole('img', { name: 'close' }),
     ).toBeInTheDocument();
     expect(
-      await screen.findByRole('img', { name: 'caret-right' }),
+      await screen.findByRole('img', { name: 'right' }),
     ).toBeInTheDocument();
     unmount();
   });
@@ -84,7 +84,7 @@ describe('Option', () => {
         Option
       </Option>,
     );
-    userEvent.click(await screen.findByRole('img', { name: 'x-small' }));
+    userEvent.click(await screen.findByRole('img', { name: 'close' }));
     expect(clickClose).toHaveBeenCalled();
     unmount();
   });

superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { useCallback } from 'react';
-import { styled, t, useTheme } from '@superset-ui/core';
+import { css, styled, t, useTheme } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import {
   CaretContainer,
@@ -53,11 +53,20 @@ export default function Option({
     <OptionControlContainer data-test="option-label" withCaret={withCaret}>
       {canDelete && (
         <CloseContainer
+          css={css`
+            text-align: center;
+          `}
           role="button"
           data-test="remove-control-button"
           onClick={onClickClose}
         >
-          <Icons.XSmall iconColor={theme.colors.grayscale.light1} />
+          <Icons.CloseOutlined
+            iconSize="m"
+            iconColor={theme.colors.grayscale.light1}
+            css={css`
+              vertical-align: sub;
+            `}
+          />
         </CloseContainer>
       )}
       <Label data-test="control-label">{children}</Label>
@@ -77,7 +86,13 @@ export default function Option({
       )}
       {withCaret && (
         <CaretContainer>
-          <Icons.CaretRight iconColor={theme.colors.grayscale.light1} />
+          <Icons.RightOutlined
+            iconSize="m"
+            css={css`
+              margin-top: ${theme.gridUnit}px;
+            `}
+            iconColor={theme.colors.grayscale.light1}
+          />
         </CaretContainer>
       )}
     </OptionControlContainer>

superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.test.tsx

@@ -32,9 +32,7 @@ test('renders with default props', async () => {
     { useDnd: true },
   );
   expect(container).toBeInTheDocument();
-  expect(
-    await screen.findByRole('img', { name: 'x-small' }),
-  ).toBeInTheDocument();
+  expect(await screen.findByRole('img', { name: 'close' })).toBeInTheDocument();
 });
 
 test('triggers onShiftOptions on drop', async () => {