diff --git a/superset-frontend/spec/javascripts/datasource/ChangeDatasourceModal_spec.jsx b/superset-frontend/spec/javascripts/datasource/ChangeDatasourceModal_spec.jsx index b803c4641c..fcca1a7898 100644 --- a/superset-frontend/spec/javascripts/datasource/ChangeDatasourceModal_spec.jsx +++ b/superset-frontend/spec/javascripts/datasource/ChangeDatasourceModal_spec.jsx @@ -86,7 +86,7 @@ describe('ChangeDatasourceModal', () => { it('renders confirmation message', async () => { act(() => { - wrapper.find('.datasource-link').at(0).props().onClick(); + wrapper.find('[data-test="datasource-link"]').at(0).props().onClick(); }); await waitForComponentToPaint(wrapper); @@ -95,7 +95,7 @@ describe('ChangeDatasourceModal', () => { it('changes the datasource', async () => { act(() => { - wrapper.find('.datasource-link').at(0).props().onClick(); + wrapper.find('[data-test="datasource-link"]').at(0).props().onClick(); }); await waitForComponentToPaint(wrapper); diff --git a/superset-frontend/spec/javascripts/sqllab/Link_spec.jsx b/superset-frontend/spec/javascripts/sqllab/IconTooltip_spec.jsx similarity index 67% rename from superset-frontend/spec/javascripts/sqllab/Link_spec.jsx rename to superset-frontend/spec/javascripts/sqllab/IconTooltip_spec.jsx index b3ef7cf82a..fba7b4b647 100644 --- a/superset-frontend/spec/javascripts/sqllab/Link_spec.jsx +++ b/superset-frontend/spec/javascripts/sqllab/IconTooltip_spec.jsx @@ -18,22 +18,23 @@ */ import React from 'react'; import { shallow } from 'enzyme'; +import { Tooltip } from 'src/common/components/Tooltip'; +import { IconTooltip } from 'src/components/IconTooltip'; -import Link from 'src/components/Link'; - -describe('Link', () => { +describe('IconTooltip', () => { const mockedProps = { tooltip: 'This is a tooltip', - href: 'https://www.airbnb.com', }; it('renders', () => { - expect(React.isValidElement(TEST)).toBe(true); + expect(React.isValidElement(TEST)).toBe(true); }); it('renders with props', () => { - expect(React.isValidElement(TEST)).toBe(true); + expect( + React.isValidElement(TEST), + ).toBe(true); }); - it('renders an anchor tag', () => { - const wrapper = shallow(TEST); - expect(wrapper.find('a')).toExist(); + it('renders a tooltip', () => { + const wrapper = shallow(TEST); + expect(wrapper.find(Tooltip)).toExist(); }); }); diff --git a/superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx b/superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx index b446aa77f6..e1426e20b8 100644 --- a/superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx +++ b/superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx @@ -22,7 +22,7 @@ import { Provider } from 'react-redux'; import configureStore from 'redux-mock-store'; import { supersetTheme, ThemeProvider } from '@superset-ui/core'; -import Link from 'src/components/Link'; +import { IconTooltip } from 'src/components/IconTooltip'; import Fade from 'src/common/components/Fade'; import TableElement from 'src/SqlLab/components/TableElement'; import ColumnElement from 'src/SqlLab/components/ColumnElement'; @@ -43,9 +43,9 @@ describe('TableElement', () => { it('renders with props', () => { expect(React.isValidElement()).toBe(true); }); - it('has 2 Link elements', () => { + it('has 2 IconTooltip elements', () => { const wrapper = shallow(); - expect(wrapper.find(Link)).toHaveLength(2); + expect(wrapper.find(IconTooltip)).toHaveLength(2); }); it('has 14 columns', () => { const wrapper = shallow(); @@ -95,7 +95,7 @@ describe('TableElement', () => { }, ); expect(mockedActions.collapseTable.called).toBe(false); - wrapper.find('.table-name').simulate('click'); + wrapper.find('[data-test="collapse"]').hostNodes().simulate('click'); expect(mockedActions.collapseTable.called).toBe(true); }); it('removes the table', () => { diff --git a/superset-frontend/src/SqlLab/components/QueryTable.jsx b/superset-frontend/src/SqlLab/components/QueryTable.jsx index 428b0fb020..a79276426f 100644 --- a/superset-frontend/src/SqlLab/components/QueryTable.jsx +++ b/superset-frontend/src/SqlLab/components/QueryTable.jsx @@ -27,7 +27,7 @@ import { t } from '@superset-ui/core'; import TableView from 'src/components/TableView'; import Button from 'src/components/Button'; import { fDuration } from 'src/modules/dates'; -import Link from '../../components/Link'; +import { IconTooltip } from '../../components/IconTooltip'; import ResultSet from './ResultSet'; import ModalTrigger from '../../components/ModalTrigger'; import HighlightedSql from './HighlightedSql'; @@ -175,9 +175,9 @@ const QueryTable = props => { let errorTooltip; if (q.errorMessage) { errorTooltip = ( - + - + ); } q.state = ( @@ -188,22 +188,22 @@ const QueryTable = props => { ); q.actions = (
- restoreSql(query)} tooltip={t( 'Overwrite text in the editor with a query on this table', )} placement="top" /> - openQueryInNewTab(query)} tooltip={t('Run query in a new tab')} placement="top" /> - removeQuery(query)} /> diff --git a/superset-frontend/src/SqlLab/components/ShowSQL.tsx b/superset-frontend/src/SqlLab/components/ShowSQL.tsx index 91134581a5..a83724093a 100644 --- a/superset-frontend/src/SqlLab/components/ShowSQL.tsx +++ b/superset-frontend/src/SqlLab/components/ShowSQL.tsx @@ -21,7 +21,7 @@ import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light'; import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql'; import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github'; -import Link from '../../components/Link'; +import { IconTooltip } from '../../components/IconTooltip'; import ModalTrigger from '../../components/ModalTrigger'; SyntaxHighlighter.registerLanguage('sql', sql); @@ -41,10 +41,9 @@ export default function ShowSQL({ } modalBody={ diff --git a/superset-frontend/src/SqlLab/components/TableElement.jsx b/superset-frontend/src/SqlLab/components/TableElement.jsx index 59c7400401..b32e774982 100644 --- a/superset-frontend/src/SqlLab/components/TableElement.jsx +++ b/superset-frontend/src/SqlLab/components/TableElement.jsx @@ -20,12 +20,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import { ButtonGroup, Collapse, Well } from 'react-bootstrap'; import shortid from 'shortid'; -import { t } from '@superset-ui/core'; +import { t, styled } from '@superset-ui/core'; import Fade from 'src/common/components/Fade'; import { Tooltip } from 'src/common/components/Tooltip'; import CopyToClipboard from '../../components/CopyToClipboard'; -import Link from '../../components/Link'; +import { IconTooltip } from '../../components/IconTooltip'; import ColumnElement from './ColumnElement'; import ShowSQL from './ShowSQL'; import ModalTrigger from '../../components/ModalTrigger'; @@ -43,6 +43,14 @@ const defaultProps = { timeout: 500, }; +const StyledSpan = styled.span` + color: ${({ theme }) => theme.colors.primary.dark1}; + &: hover { + color: ${({ theme }) => theme.colors.primary.dark2}; + } + cursor: pointer; +`; + class TableElement extends React.PureComponent { constructor(props) { super(props); @@ -145,7 +153,7 @@ class TableElement extends React.PureComponent {
{JSON.stringify(ix, null, '  ')}
))} triggerNode={ - @@ -156,10 +164,10 @@ class TableElement extends React.PureComponent { return ( {keyLink} - {table.selectStar && ( + - + } text={table.selectStar} shouldShowText={false} @@ -188,11 +195,10 @@ class TableElement extends React.PureComponent { title={t('CREATE VIEW statement')} /> )} - ); @@ -209,15 +215,15 @@ class TableElement extends React.PureComponent { title={table.name} trigger={['hover']} > - { this.toggleTable(e); }} > {table.name} - +
diff --git a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx index e31dcd7ebb..71455db322 100644 --- a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx +++ b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx @@ -114,9 +114,14 @@ export default function ErrorAlert({ {title} {!isExpandable && ( - setIsModalOpen(true)}> + setIsModalOpen(true)} + > {t('See More')} - + )}
{isExpandable ? ( @@ -125,25 +130,27 @@ export default function ErrorAlert({ {body && ( <> {!isBodyExpanded && ( - setIsBodyExpanded(true)} > {t('See More')} - + )} {isBodyExpanded && ( <>
{body} - setIsBodyExpanded(false)} > {t('See Less')} - + )} diff --git a/superset-frontend/src/components/Link.tsx b/superset-frontend/src/components/IconTooltip.tsx similarity index 80% rename from superset-frontend/src/components/Link.tsx rename to superset-frontend/src/components/IconTooltip.tsx index cfe9fa04cb..9b3a6b0e82 100644 --- a/superset-frontend/src/components/Link.tsx +++ b/superset-frontend/src/components/IconTooltip.tsx @@ -18,11 +18,11 @@ */ import React, { ReactNode } from 'react'; import { Tooltip } from 'src/common/components/Tooltip'; +import { styled } from '@superset-ui/core'; interface Props { children?: ReactNode; className?: string; - href?: string; onClick?: () => void; placement?: | 'bottom' @@ -41,24 +41,29 @@ interface Props { tooltip?: string | null; } -const Link = ({ +const StyledSpan = styled.span` + color: ${({ theme }) => theme.colors.primary.dark1}; + &: hover { + color: ${({ theme }) => theme.colors.primary.dark2}; + } +`; + +const IconTooltip = ({ children = null, className = '', - href = '#', onClick = () => undefined, placement = 'top', style = {}, tooltip = null, }: Props) => { - const link = ( - {children} - + ); if (tooltip) { return ( @@ -69,11 +74,11 @@ const Link = ({ mouseEnterDelay={0.3} mouseLeaveDelay={0.15} > - {link} + {iconTooltip} ); } - return link; + return iconTooltip; }; -export default Link; +export { IconTooltip }; diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls.jsx b/superset-frontend/src/dashboard/components/SliceHeaderControls.jsx index c88b8f7740..ef5d92f134 100644 --- a/superset-frontend/src/dashboard/components/SliceHeaderControls.jsx +++ b/superset-frontend/src/dashboard/components/SliceHeaderControls.jsx @@ -265,9 +265,9 @@ class SliceHeaderControls extends React.PureComponent { triggerNode.closest(SCREENSHOT_NODE_SELECTOR) } > - + - + ); } diff --git a/superset-frontend/src/dashboard/components/filterscope/FilterFieldItem.jsx b/superset-frontend/src/dashboard/components/filterscope/FilterFieldItem.jsx index 3f1d88d475..d9d9409f77 100644 --- a/superset-frontend/src/dashboard/components/filterscope/FilterFieldItem.jsx +++ b/superset-frontend/src/dashboard/components/filterscope/FilterFieldItem.jsx @@ -29,13 +29,13 @@ const propTypes = { export default function FilterFieldItem({ label, isSelected }) { return ( - {label} - + ); } diff --git a/superset-frontend/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.jsx b/superset-frontend/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.jsx index f4a85cf039..c6e1be1558 100644 --- a/superset-frontend/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.jsx +++ b/superset-frontend/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.jsx @@ -35,7 +35,7 @@ function traverse({ currentNode = {}, selectedChartId }) { return { ...currentNode, label: ( - )} {label} - + ), children: updatedChildren, }; @@ -54,13 +54,13 @@ function traverse({ currentNode = {}, selectedChartId }) { return { ...currentNode, label: ( - {label} - + ), }; } diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal.tsx index bd87209626..40a644a0e8 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal.tsx @@ -48,6 +48,14 @@ const StyledForm = styled(Form)` width: 100%; `; +const StyledSpan = styled.span` + cursor: pointer; + color: ${({ theme }) => theme.colors.primary.dark1}; + &: hover { + color: ${({ theme }) => theme.colors.primary.dark2}; + } +`; + const FilterTabs = styled(LineEditableTabs)` // extra selector specificity: &.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab { @@ -473,13 +481,13 @@ export function FilterConfigModal({ : getFilterTitle(id)}
{removedFilters[id] && ( - restoreFilter(id)} > {t('Undo?')} - + )} } diff --git a/superset-frontend/src/datasource/ChangeDatasourceModal.tsx b/superset-frontend/src/datasource/ChangeDatasourceModal.tsx index 77b3ad4627..0a49d67e0a 100644 --- a/superset-frontend/src/datasource/ChangeDatasourceModal.tsx +++ b/superset-frontend/src/datasource/ChangeDatasourceModal.tsx @@ -67,6 +67,14 @@ const ConfirmModalStyled = styled.div` } `; +const StyledSpan = styled.span` + cursor: pointer; + color: ${({ theme }) => theme.colors.primary.dark1}; + &: hover { + color: ${({ theme }) => theme.colors.primary.dark2}; + } +`; + const TABLE_COLUMNS = [ 'name', 'type', @@ -191,13 +199,14 @@ const ChangeDatasourceModal: FunctionComponent = ({ connection: ds.database.database_name, schema: ds.schema, name: ( - selectDatasource({ type: 'table', ...ds })} - className="datasource-link" > {ds.table_name} - + ), type: ds.kind, })); diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx index dc2d44444e..044f1d8f2d 100644 --- a/superset-frontend/src/datasource/DatasourceEditor.jsx +++ b/superset-frontend/src/datasource/DatasourceEditor.jsx @@ -790,12 +790,12 @@ class DatasourceEditor extends React.PureComponent { {this.allowEditSource && ( - + - + {!this.state.isEditMode && (
{t('Click the lock to make changes.')}
)} diff --git a/superset-frontend/src/explore/components/ExploreActionButtons.jsx b/superset-frontend/src/explore/components/ExploreActionButtons.jsx index d485696bf3..23035beb03 100644 --- a/superset-frontend/src/explore/components/ExploreActionButtons.jsx +++ b/superset-frontend/src/explore/components/ExploreActionButtons.jsx @@ -79,7 +79,7 @@ export default function ExploreActionButtons({ )} {latestQueryFormData && ( - .json - + )} {latestQueryFormData && ( - .csv - + )}