refactor: Fix anchor-is-valid lint warnings (#12010)

* Fix anchor-is-valid lint warnings

* Change IconTooltip to use named exports

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 {
             <pre key={i}>{JSON.stringify(ix, null, '  ')}</pre>
           ))}
           triggerNode={
-            <Link
+            <IconTooltip
               className="fa fa-key pull-left m-l-2"
               tooltip={t('View keys & indexes (%s)', table.indexes.length)}
             />
@@ -156,10 +164,10 @@ class TableElement extends React.PureComponent {
     return (
       <ButtonGroup className="ws-el-controls">
         {keyLink}
-        <Link
+        <IconTooltip
           className={
             `fa fa-sort-${!this.state.sortColumns ? 'alpha' : 'numeric'}-asc ` +
-            'pull-left sort-cols m-l-2'
+            'pull-left sort-cols m-l-2 pointer'
           }
           onClick={this.toggleSortColumns}
           tooltip={
@@ -167,14 +175,13 @@ class TableElement extends React.PureComponent {
               ? t('Sort columns alphabetically')
               : t('Original table column order')
           }
-          href="#"
         />
         {table.selectStar && (
           <CopyToClipboard
             copyNode={
-              <a aria-label="Copy">
+              <IconTooltip aria-label="Copy">
                 <i aria-hidden className="fa fa-clipboard pull-left m-l-2" />
-              </a>
+              </IconTooltip>
             }
             text={table.selectStar}
             shouldShowText={false}
@@ -188,11 +195,10 @@ class TableElement extends React.PureComponent {
             title={t('CREATE VIEW statement')}
           />
         )}
-        <Link
-          className="fa fa-times table-remove pull-left m-l-2"
+        <IconTooltip
+          className="fa fa-times table-remove pull-left m-l-2 pointer"
           onClick={this.removeTable}
           tooltip={t('Remove table preview')}
-          href="#"
         />
       </ButtonGroup>
     );
@@ -209,15 +215,15 @@ class TableElement extends React.PureComponent {
           title={table.name}
           trigger={['hover']}
         >
-          <a
-            href="#"
+          <StyledSpan
+            data-test="collapse"
             className="table-name"
             onClick={e => {
               this.toggleTable(e);
             }}
           >
             <strong>{table.name}</strong>
-          </a>
+          </StyledSpan>
         </Tooltip>
 
         <div className="pull-right header-right-side">