mirror of https://github.com/apache/superset.git
chore: Replaces Icon with Icons component - iteration 1 (#14469)
This commit is contained in:
parent
4e6169e0f9
commit
9deb7aa3c1
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>,
|
||||
)}
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -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>,
|
||||
)}
|
||||
|
|
|
@ -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', () => {
|
||||
|
|
Loading…
Reference in New Issue