From 9deb7aa3c15ce59bd2ecd67970386bddce7c832e Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com> Date: Mon, 17 May 2021 14:24:56 -0300 Subject: [PATCH] chore: Replaces Icon with Icons component - iteration 1 (#14469) --- .../explore/components/EmbedCodeButton.jsx | 6 ++-- .../components/ExploreActionButtons.tsx | 30 ++++++---------- .../components/ExploreViewContainer.jsx | 25 ++++++++------ .../DndSelectLabel.test.tsx | 12 +++---- .../DndColumnSelectControl/DndSelectLabel.tsx | 4 +-- .../AdhocFilterControl/index.jsx | 15 +++----- .../AdhocFilterOption.test.tsx | 24 +++++++------ .../controls/MetricControl/MetricsControl.jsx | 15 +++----- .../OptionControls/OptionControls.test.tsx | 34 ++++++++++++------- 9 files changed, 79 insertions(+), 86 deletions(-) diff --git a/superset-frontend/src/explore/components/EmbedCodeButton.jsx b/superset-frontend/src/explore/components/EmbedCodeButton.jsx index c379a1aa5..24b62ecd1 100644 --- 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 {
- +
diff --git a/superset-frontend/src/explore/components/ExploreActionButtons.tsx b/superset-frontend/src/explore/components/ExploreActionButtons.tsx index 4ce1e414e..339d2b3b7 100644 --- 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) => {
{ {latestQueryFormData && ( <> - } + icon={} tooltip={copyTooltip} onClick={doCopyLink} data-test="short-link-button" @@ -161,26 +158,19 @@ const ExploreActionButtons = (props: ExploreActionButtonsProps) => { } /> - } + icon={} tooltip={t('Share chart by email')} onClick={doShareEmail} /> } + icon={} text=".JSON" tooltip={t('Export to .JSON format')} onClick={doExportJson} /> } + icon={} text=".CSV" tooltip={t('Export to .CSV format')} onClick={doExportCSV} diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index 7444f7672..7be486e1d 100644 --- 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} > -
@@ -496,15 +496,18 @@ function ExploreViewContainer(props) { > - - + ) : null} { +test('renders with default props', async () => { render(, { 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( , { 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 = () => {values}; render(, { useDnd: true, }); - expect(screen.getByText(values)).toBeInTheDocument(); + expect(await screen.findByText(values)).toBeInTheDocument(); }); diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx index 9589d2e72..daaeb9185 100644 --- 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({ @@ -54,7 +54,7 @@ export default function DndSelectLabel({ function renderGhostButton() { return ( - + {t(props.ghostButtonText || 'Drop columns')} ); diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx index 9bacf657c..55e926c18 100644 --- 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 { {this.addNewFilterPopoverTrigger( - , )} @@ -355,10 +353,7 @@ class AdhocFilterControl extends React.Component { ) : this.addNewFilterPopoverTrigger( - + {t('Add filter')} , )} diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx index 9a03b6cc9..34ec66d08 100644 --- 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: { ); -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(); }); diff --git a/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx b/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx index 2230824c7..c8b7205c5 100644 --- 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" > - , )} @@ -402,10 +400,7 @@ class MetricsControl extends React.PureComponent { ) : this.addNewMetricPopoverTrigger( - + {t('Add metric')} , )} diff --git a/superset-frontend/src/explore/components/controls/OptionControls/OptionControls.test.tsx b/superset-frontend/src/explore/components/controls/OptionControls/OptionControls.test.tsx index 670f3720a..a9a348006 100644 --- 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) => , ); -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( { /> , ); - 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', () => {