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

2021-05-17 14:24:56 -03:00 · 2021-05-17 14:24:56 -03:00 · 9deb7aa3c1
parent 4e6169e0f9
commit 9deb7aa3c1
9 changed files with 79 additions and 86 deletions
--- a/superset-frontend/src/explore/components/EmbedCodeButton.jsx
+++ b/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>
--- a/superset-frontend/src/explore/components/ExploreActionButtons.tsx
+++ b/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
-                name="link"
-                width={15}
-                height={15}
-                style={{ marginTop: 1 }}
-              />
-            }
+            icon={<Icons.Link iconSize="l" />}
            tooltip={copyTooltip}
            onClick={doCopyLink}
            data-test="short-link-button"
@ -161,26 +158,19 @@ const ExploreActionButtons = (props: ExploreActionButtonsProps) => {
            }
          />
          <ActionButton
-            icon={
-              <Icon
-                name="email"
-                width={15}
-                height={15}
-                style={{ marginTop: 1 }}
-              />
-            }
+            icon={<Icons.Email iconSize="l" />}
            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}
--- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx
+++ b/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
-              name="expand"
-              color={supersetTheme.colors.primary.base}
+            <Icons.Expand
              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
-                name="collapse"
-                color={supersetTheme.colors.primary.base}
+              <Icons.Collapse
                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
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.test.tsx
+++ b/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();
 });
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx
+++ b/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>
    );
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx
+++ b/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
-                name="plus-large"
-                width={theme.gridUnit * 3}
-                height={theme.gridUnit * 3}
-                color={theme.colors.grayscale.light5}
+              <Icons.PlusLarge
+                iconSize="s"
+                iconColor={theme.colors.grayscale.light5}
              />
            </AddIconButton>,
          )}
@ -355,10 +353,7 @@ class AdhocFilterControl extends React.Component {
              )
            : this.addNewFilterPopoverTrigger(
                <AddControlLabel>
-                  <Icon
-                    name="plus-small"
-                    color={theme.colors.grayscale.light1}
-                  />
+                  <Icons.PlusSmall iconColor={theme.colors.grayscale.light1} />
                  {t('Add filter')}
                </AddControlLabel>,
              )}
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx
+++ b/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();
 });
--- a/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx
+++ b/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
-                name="plus-large"
-                width={theme.gridUnit * 3}
-                height={theme.gridUnit * 3}
-                color={theme.colors.grayscale.light5}
+              <Icons.PlusLarge
+                iconSize="s"
+                iconColor={theme.colors.grayscale.light5}
              />
            </AddIconButton>,
          )}
@ -402,10 +400,7 @@ class MetricsControl extends React.PureComponent {
              )
            : this.addNewMetricPopoverTrigger(
                <AddControlLabel>
-                  <Icon
-                    name="plus-small"
-                    color={theme.colors.grayscale.light1}
-                  />
+                  <Icons.PlusSmall iconColor={theme.colors.grayscale.light1} />
                  {t('Add metric')}
                </AddControlLabel>,
              )}
--- a/superset-frontend/src/explore/components/controls/OptionControls/OptionControls.test.tsx
+++ b/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');
-  expect(screen.queryByText('Test label')).toBeFalsy();
-  expect(container.querySelector('.metric-option > svg')).toBeInTheDocument();
+  await waitFor(() => {
+    expect(screen.queryByText('Test label')).toBeFalsy();
+    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'));
-  fireEvent.drop(screen.getByText('Label 2'));
-  expect(defaultProps.onMoveLabel).toHaveBeenCalled();
+  await waitFor(() => {
+    fireEvent.dragStart(screen.getByText('Label 1'));
+    fireEvent.drop(screen.getByText('Label 2'));
+    expect(defaultProps.onMoveLabel).toHaveBeenCalled();
+  });
 });

 test('renders DragContainer', () => {