From 8682c6fc1ccd6ce72c7788ebaae93c3483e92306 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Tue, 22 Dec 2020 04:58:05 -0300
Subject: [PATCH 01/34] refactor: Fix anchor-is-valid lint warnings (#12010)
* Fix anchor-is-valid lint warnings
* Change IconTooltip to use named exports
---
.../datasource/ChangeDatasourceModal_spec.jsx | 4 +--
.../{Link_spec.jsx => IconTooltip_spec.jsx} | 19 ++++++-----
.../javascripts/sqllab/TableElement_spec.jsx | 8 ++---
.../src/SqlLab/components/QueryTable.jsx | 18 +++++-----
.../src/SqlLab/components/ShowSQL.tsx | 5 ++-
.../src/SqlLab/components/TableElement.jsx | 34 +++++++++++--------
.../components/ErrorMessage/ErrorAlert.tsx | 23 ++++++++-----
.../components/{Link.tsx => IconTooltip.tsx} | 27 +++++++++------
.../components/SliceHeaderControls.jsx | 4 +--
.../filterscope/FilterFieldItem.jsx | 4 +--
.../renderFilterScopeTreeNodes.jsx | 8 ++---
.../nativeFilters/FilterConfigModal.tsx | 12 +++++--
.../src/datasource/ChangeDatasourceModal.tsx | 17 +++++++---
.../src/datasource/DatasourceEditor.jsx | 4 +--
.../components/ExploreActionButtons.jsx | 8 ++---
15 files changed, 115 insertions(+), 80 deletions(-)
rename superset-frontend/spec/javascripts/sqllab/{Link_spec.jsx => IconTooltip_spec.jsx} (67%)
rename superset-frontend/src/components/{Link.tsx => IconTooltip.tsx} (80%)
diff --git a/superset-frontend/spec/javascripts/datasource/ChangeDatasourceModal_spec.jsx b/superset-frontend/spec/javascripts/datasource/ChangeDatasourceModal_spec.jsx
index b803c4641cedb..fcca1a7898950 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 b3ef7cf82a6e1..fba7b4b647015 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 b446aa77f67b6..e1426e20b8514 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 428b0fb020626..a79276426fd37 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 91134581a51d4..a83724093a7df 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 59c7400401ac8..b32e774982a5e 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 e31dcd7ebbab9..71455db32230c 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 cfe9fa04cb787..9b3a6b0e82171 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 c88b8f774071b..ef5d92f134b5a 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 3f1d88d475dcc..d9d9409f773de 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 f4a85cf039ed9..c6e1be1558e6e 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 bd872096263d4..40a644a0e8a4a 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] && (
-