chore: Replaces Icon with Icons component - iteration 1 (#14469)

superset-frontend/src/explore/components/EmbedCodeButton.jsx

@@ -22,7 +22,7 @@ import { t } from '@superset-ui/core';
 
 import Popover from 'src/components/Popover';
 import { FormLabel } from 'src/components/Form';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import { Tooltip } from 'src/components/Tooltip';
 import CopyToClipboard from 'src/components/CopyToClipboard';
 import { getShortUrl } from 'src/utils/urlUtils';
@@ -161,9 +161,9 @@ export default class EmbedCodeButton extends React.Component {
           <div
             className="btn btn-default btn-sm"
             data-test="embed-code-button"
-            style={{ height: 30 }}
+            style={{ display: 'flex', alignItems: 'center', height: 30 }}
           >
-            <Icon name="code" width={15} height={15} style={{ marginTop: 1 }} />
+            <Icons.Code iconSize="l" />
           </div>
         </Tooltip>
       </Popover>

superset-frontend/src/explore/components/ExploreActionButtons.tsx

@@ -19,7 +19,7 @@
 import React, { useState } from 'react';
 import cx from 'classnames';
 import { t } from '@superset-ui/core';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import { Tooltip } from 'src/components/Tooltip';
 import copyTextToClipboard from 'src/utils/copy';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
@@ -68,7 +68,11 @@ const ActionButton = (props: ActionButtonProps) => {
       <div
         role="button"
         tabIndex={0}
-        css={{ '&:focus, &:focus:active': { outline: 0 } }}
+        css={{
+          display: 'flex',
+          alignItems: 'center',
+          '&:focus, &:focus:active': { outline: 0 },
+        }}
         className={className || 'btn btn-default btn-sm'}
         style={{ height: 30 }}
         {...rest}
@@ -145,14 +149,7 @@ const ExploreActionButtons = (props: ExploreActionButtonsProps) => {
       {latestQueryFormData && (
         <>
           <ActionButton
-            icon={
+            icon={<Icons.Link iconSize="l" />}
-              <Icon
-                name="link"
-                width={15}
-                height={15}
-                style={{ marginTop: 1 }}
-              />
-            }
             tooltip={copyTooltip}
             onClick={doCopyLink}
             data-test="short-link-button"
@@ -161,26 +158,19 @@ const ExploreActionButtons = (props: ExploreActionButtonsProps) => {
             }
           />
           <ActionButton
-            icon={
+            icon={<Icons.Email iconSize="l" />}
-              <Icon
-                name="email"
-                width={15}
-                height={15}
-                style={{ marginTop: 1 }}
-              />
-            }
             tooltip={t('Share chart by email')}
             onClick={doShareEmail}
           />
           <EmbedCodeButton latestQueryFormData={latestQueryFormData} />
           <ActionButton
-            icon={<i className="fa fa-file-code-o" />}
+            icon={<Icons.FileTextOutlined iconSize="m" />}
             text=".JSON"
             tooltip={t('Export to .JSON format')}
             onClick={doExportJson}
           />
           <ActionButton
-            icon={<i className="fa fa-file-text-o" />}
+            icon={<Icons.FileExcelOutlined iconSize="m" />}
             text=".CSV"
             tooltip={t('Export to .CSV format')}
             onClick={doExportCSV}

superset-frontend/src/explore/components/ExploreViewContainer.jsx

@@ -21,7 +21,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { styled, t, supersetTheme, css } from '@superset-ui/core';
+import { styled, t, css, useTheme } from '@superset-ui/core';
 import { debounce } from 'lodash';
 import { Resizable } from 're-resizable';
 
@@ -29,7 +29,7 @@ import { useDynamicPluginContext } from 'src/components/DynamicPlugins';
 import { Global } from '@emotion/react';
 import { Tooltip } from 'src/components/Tooltip';
 import { usePrevious } from 'src/common/hooks/usePrevious';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import {
   getFromLocalStorage,
   setInLocalStorage,
@@ -170,6 +170,7 @@ function ExploreViewContainer(props) {
   const [showingModal, setShowingModal] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(false);
 
+  const theme = useTheme();
   const width = `${windowSize.width}px`;
   const navHeight = props.standalone ? 0 : 90;
   const height = props.forcedHeight
@@ -472,11 +473,10 @@ function ExploreViewContainer(props) {
             className="action-button"
             onClick={toggleCollapse}
           >
-            <Icon
+            <Icons.Expand
-              name="expand"
-              color={supersetTheme.colors.primary.base}
               className="collapse-icon"
-              width={16}
+              iconColor={theme.colors.primary.base}
+              iconSize="l"
             />
           </span>
         </div>
@@ -496,15 +496,18 @@ function ExploreViewContainer(props) {
         >
           <span role="button" tabIndex={0} className="action-button">
             <Tooltip title={t('Open Datasource tab')}>
-              <Icon
+              <Icons.Collapse
-                name="collapse"
-                color={supersetTheme.colors.primary.base}
                 className="collapse-icon"
-                width={16}
+                iconColor={theme.colors.primary.base}
+                iconSize="l"
               />
             </Tooltip>
           </span>
-          <Icon name="dataset-physical" width={16} />
+          <Icons.DatasetPhysical
+            css={{ marginTop: theme.gridUnit * 2 }}
+            iconSize="l"
+            iconColor={theme.colors.grayscale.base}
+          />
         </div>
       ) : null}
       <Resizable

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

@@ -31,25 +31,25 @@ const defaultProps = {
   options: { string: { column_name: 'Column' } },
 };
 
-test('renders with default props', () => {
+test('renders with default props', async () => {
   render(<DndSelectLabel {...defaultProps} />, { useDnd: true });
-  expect(screen.getByText('Drop columns')).toBeInTheDocument();
+  expect(await screen.findByText('Drop columns')).toBeInTheDocument();
 });
 
-test('renders ghost button when empty', () => {
+test('renders ghost button when empty', async () => {
   const ghostButtonText = 'Ghost button text';
   render(
     <DndSelectLabel {...defaultProps} ghostButtonText={ghostButtonText} />,
     { useDnd: true },
   );
-  expect(screen.getByText(ghostButtonText)).toBeInTheDocument();
+  expect(await screen.findByText(ghostButtonText)).toBeInTheDocument();
 });
 
-test('renders values', () => {
+test('renders values', async () => {
   const values = 'Values';
   const valuesRenderer = () => <span>{values}</span>;
   render(<DndSelectLabel {...defaultProps} valuesRenderer={valuesRenderer} />, {
     useDnd: true,
   });
-  expect(screen.getByText(values)).toBeInTheDocument();
+  expect(await screen.findByText(values)).toBeInTheDocument();
 });

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

@@ -26,7 +26,7 @@ import {
   HeaderContainer,
 } from 'src/explore/components/controls/OptionControls';
 import { DatasourcePanelDndItem } from 'src/explore/components/DatasourcePanel/types';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import { DndColumnSelectProps } from './types';
 
 export default function DndSelectLabel<T, O>({
@@ -54,7 +54,7 @@ export default function DndSelectLabel<T, O>({
   function renderGhostButton() {
     return (
       <AddControlLabel cancelHover>
-        <Icon name="plus-small" color={theme.colors.grayscale.light1} />
+        <Icons.PlusSmall iconColor={theme.colors.grayscale.light1} />
         {t(props.ghostButtonText || 'Drop columns')}
       </AddControlLabel>
     );

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx

@@ -38,7 +38,7 @@ import {
   HeaderContainer,
   LabelsContainer,
 } from 'src/explore/components/controls/OptionControls';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import AdhocFilterPopoverTrigger from 'src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger';
 import AdhocFilterOption from 'src/explore/components/controls/FilterControl/AdhocFilterOption';
 import AdhocFilter, {
@@ -339,11 +339,9 @@ class AdhocFilterControl extends React.Component {
           <ControlHeader {...this.props} />
           {this.addNewFilterPopoverTrigger(
             <AddIconButton data-test="add-filter-button">
-              <Icon
+              <Icons.PlusLarge
-                name="plus-large"
+                iconSize="s"
-                width={theme.gridUnit * 3}
+                iconColor={theme.colors.grayscale.light5}
-                height={theme.gridUnit * 3}
-                color={theme.colors.grayscale.light5}
               />
             </AddIconButton>,
           )}
@@ -355,10 +353,7 @@ class AdhocFilterControl extends React.Component {
               )
             : this.addNewFilterPopoverTrigger(
                 <AddControlLabel>
-                  <Icon
+                  <Icons.PlusSmall iconColor={theme.colors.grayscale.light1} />
-                    name="plus-small"
-                    color={theme.colors.grayscale.light1}
-                  />
                   {t('Add filter')}
                 </AddControlLabel>,
               )}

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { DndProvider } from 'react-dnd';
@@ -61,30 +61,32 @@ const setup = (props: {
   </DndProvider>
 );
 
-test('should render', () => {
+test('should render', async () => {
   const { container } = render(setup(mockedProps));
-  expect(container).toBeInTheDocument();
+  await waitFor(() => expect(container).toBeInTheDocument());
 });
 
-test('should render the control label', () => {
+test('should render the control label', async () => {
   render(setup(mockedProps));
-  expect(screen.getByText('value > 10')).toBeInTheDocument();
+  expect(await screen.findByText('value > 10')).toBeInTheDocument();
 });
 
-test('should render the remove button', () => {
+test('should render the remove button', async () => {
   render(setup(mockedProps));
-  const removeBtn = screen.getByRole('button');
+  const removeBtn = await screen.findByRole('button');
   expect(removeBtn).toBeInTheDocument();
 });
 
-test('should render the right caret', () => {
+test('should render the right caret', async () => {
   render(setup(mockedProps));
-  expect(screen.getByRole('img', { name: 'caret-right' })).toBeInTheDocument();
+  expect(
+    await screen.findByRole('img', { name: 'caret-right' }),
+  ).toBeInTheDocument();
 });
 
-test('should render the Popover on clicking the right caret', () => {
+test('should render the Popover on clicking the right caret', async () => {
   render(setup(mockedProps));
-  const rightCaret = screen.getByRole('img', { name: 'caret-right' });
+  const rightCaret = await screen.findByRole('img', { name: 'caret-right' });
   userEvent.click(rightCaret);
   expect(screen.getByRole('tooltip')).toBeInTheDocument();
 });

superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx

@@ -26,7 +26,7 @@ import {
   sqlaAutoGeneratedMetricNameRegex,
   druidAutoGeneratedMetricRegex,
 } from 'src/explore/constants';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import {
   AddIconButton,
   AddControlLabel,
@@ -386,11 +386,9 @@ class MetricsControl extends React.PureComponent {
               disabled={this.isAddNewMetricDisabled()}
               data-test="add-metric-button"
             >
-              <Icon
+              <Icons.PlusLarge
-                name="plus-large"
+                iconSize="s"
-                width={theme.gridUnit * 3}
+                iconColor={theme.colors.grayscale.light5}
-                height={theme.gridUnit * 3}
-                color={theme.colors.grayscale.light5}
               />
             </AddIconButton>,
           )}
@@ -402,10 +400,7 @@ class MetricsControl extends React.PureComponent {
               )
             : this.addNewMetricPopoverTrigger(
                 <AddControlLabel>
-                  <Icon
+                  <Icons.PlusSmall iconColor={theme.colors.grayscale.light1} />
-                    name="plus-small"
-                    color={theme.colors.grayscale.light1}
-                  />
                   {t('Add metric')}
                 </AddControlLabel>,
               )}

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

@@ -17,7 +17,12 @@
  * under the License.
  */
 import React from 'react';
-import { render, screen, fireEvent } from 'spec/helpers/testing-library';
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import {
@@ -51,29 +56,30 @@ const setup = (overrides?: Record<string, any>) =>
     </DndProvider>,
   );
 
-test('should render', () => {
+test('should render', async () => {
   const { container } = setup();
-  expect(container).toBeVisible();
+  await waitFor(() => expect(container).toBeVisible());
 });
 
-test('should display a label', () => {
+test('should display a label', async () => {
   setup();
-  expect(screen.getByText('Test label')).toBeTruthy();
+  expect(await screen.findByText('Test label')).toBeTruthy();
 });
 
-test('should display a certification icon if saved metric is certified', () => {
+test('should display a certification icon if saved metric is certified', async () => {
   const { container } = setup({
     savedMetric: {
       metric_name: 'test_metric',
       is_certified: true,
     },
   });
-  screen.getByText('test_metric');
+  await waitFor(() => {
-  expect(screen.queryByText('Test label')).toBeFalsy();
+    expect(screen.queryByText('Test label')).toBeFalsy();
-  expect(container.querySelector('.metric-option > svg')).toBeInTheDocument();
+    expect(container.querySelector('.metric-option > svg')).toBeInTheDocument();
+  });
 });
 
-test('triggers onMoveLabel on drop', () => {
+test('triggers onMoveLabel on drop', async () => {
   render(
     <DndProvider backend={HTML5Backend}>
       <OptionControlLabel
@@ -88,9 +94,11 @@ test('triggers onMoveLabel on drop', () => {
       />
     </DndProvider>,
   );
-  fireEvent.dragStart(screen.getByText('Label 1'));
+  await waitFor(() => {
-  fireEvent.drop(screen.getByText('Label 2'));
+    fireEvent.dragStart(screen.getByText('Label 1'));
-  expect(defaultProps.onMoveLabel).toHaveBeenCalled();
+    fireEvent.drop(screen.getByText('Label 2'));
+    expect(defaultProps.onMoveLabel).toHaveBeenCalled();
+  });
 });
 
 test('renders DragContainer', () => {