Improve button link usage

client/app/assets/less/ant.less

@@ -391,6 +391,18 @@
         left: 0;
       }
     }
+
+    &:focus,
+    &:focus-within {
+      color: @menu-highlight-color;
+    }
+  }
+}
+
+.@{dropdown-prefix-cls}-menu-item {
+  &:focus,
+  &:focus-within {
+    background-color: @item-hover-bg;
   }
 }
 

client/app/assets/less/inc/base.less

@@ -100,6 +100,10 @@ strong {
   cursor: pointer;
 }
 
+.clickable:disabled {
+  cursor: not-allowed;
+}
+
 .resize-vertical {
   resize: vertical !important;
   transition: height 0s !important;

client/app/assets/less/inc/edit-in-place.less

@@ -1,26 +1,23 @@
-.edit-in-place span {
+.edit-in-place {
   white-space: pre-line;
+  display: inline-block;
 
   p {
     margin-bottom: 0;
   }
-}
 
-.edit-in-place span.editable {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.edit-in-place span.editable:hover {
-  background: @redash-yellow;
-  border-radius: @redash-radius;
-}
+  .editable {
+    display: inline-block;
+    cursor: pointer;
 
-.edit-in-place.active input,
-.edit-in-place.active textarea {
-  display: inline-block;
-}
+    &:hover {
+      background: @redash-yellow;
+      border-radius: @redash-radius;
+    }
+  }
 
-.edit-in-place {
-  display: inline-block;
+  &.active input,
+  &.active textarea {
+    display: inline-block;
+  }
 }

client/app/assets/less/inc/table.less

@@ -118,14 +118,19 @@
   color: #d4d4d4;
   transition: all 0.25s ease-in-out;
 
+  .fa-star {
+    color: @yellow-darker;
+  }
+
   &:hover,
   &:focus {
     color: @yellow-darker;
     cursor: pointer;
-  }
 
-  .fa-star {
-    color: @yellow-darker;
+    .fa-star {
+      filter: saturate(75%);
+      opacity: 0.75;
+    }
   }
 }
 

client/app/assets/less/redash/query.less

@@ -127,11 +127,13 @@ body.fixed-layout {
   }
 }
 
-a.label-tag {
+.label-tag {
   background: fade(@redash-gray, 15%);
   color: darken(@redash-gray, 15%);
 
-  &:hover {
+  &:hover,
+  &:focus,
+  &:active {
     color: darken(@redash-gray, 15%);
     background: fade(@redash-gray, 25%);
   }

client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx

@@ -2,6 +2,7 @@ import React, { useMemo } from "react";
 import { first, includes } from "lodash";
 import Menu from "antd/lib/menu";
 import Link from "@/components/Link";
+import PlainButton from "@/components/PlainButton";
 import HelpTrigger from "@/components/HelpTrigger";
 import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
 import { useCurrentRoute } from "@/components/ApplicationArea/Router";
@@ -15,8 +16,8 @@ import AlertOutlinedIcon from "@ant-design/icons/AlertOutlined";
 import PlusOutlinedIcon from "@ant-design/icons/PlusOutlined";
 import QuestionCircleOutlinedIcon from "@ant-design/icons/QuestionCircleOutlined";
 import SettingOutlinedIcon from "@ant-design/icons/SettingOutlined";
-
 import VersionInfo from "./VersionInfo";
+
 import "./DesktopNavbar.less";
 
 function NavbarSection({ children, ...props }) {
@@ -129,9 +130,9 @@ export default function DesktopNavbar() {
             )}
             {canCreateDashboard && (
               <Menu.Item key="new-dashboard">
-                <a data-test="CreateDashboardMenuItem" onMouseUp={() => CreateDashboardDialog.showModal()}>
+                <PlainButton data-test="CreateDashboardMenuItem" onClick={() => CreateDashboardDialog.showModal()}>
                   New Dashboard
-                </a>
+                </PlainButton>
               </Menu.Item>
             )}
             {canCreateAlert && (
@@ -182,9 +183,9 @@ export default function DesktopNavbar() {
           )}
           <Menu.Divider />
           <Menu.Item key="logout">
-            <a data-test="LogOutButton" onClick={() => Auth.logout()}>
+            <PlainButton data-test="LogOutButton" onClick={() => Auth.logout()}>
               Log out
-            </a>
+            </PlainButton>
           </Menu.Item>
           <Menu.Divider />
           <Menu.Item key="version" role="presentation" disabled className="version-info">

client/app/components/CreateSourceDialog.jsx

@@ -1,11 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { isEmpty, toUpper, includes, get } from "lodash";
-import Button from "antd/lib/button";
+import PlainButton from "@/components/PlainButton";
 import List from "antd/lib/list";
 import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import Steps from "antd/lib/steps";
+import Button from "antd/lib/button";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import Link from "@/components/Link";
 import { PreviewCard } from "@/components/PreviewCard";
@@ -132,11 +133,12 @@ class CreateSourceDialog extends React.Component {
   renderItem(item) {
     const { imageFolder } = this.props;
     return (
-      <List.Item className="p-l-10 p-r-10 clickable" onClick={() => this.selectType(item)}>
+      <List.Item className="p-l-10 p-r-10">
         <PreviewCard
           title={item.name}
           imageUrl={`${imageFolder}/${item.type}.png`}
           roundedImage={false}
+          onClick={() => this.selectType(item)}
           data-test="PreviewItem"
           data-test-type={item.type}>
           <i className="fa fa-angle-double-right" />
@@ -180,7 +182,13 @@ class CreateSourceDialog extends React.Component {
         <div data-test="CreateSourceDialog">
           <Steps className="hidden-xs m-b-10" size="small" current={currentStep} progressDot>
             {currentStep === StepEnum.CONFIGURE_IT ? (
-              <Step title={<a>Type Selection</a>} className="clickable" onClick={this.resetType} />
+              <Step
+                title={
+                  <PlainButton type="link" onClick={this.resetType}>
+                    Type Selection
+                  </PlainButton>
+                }
+              />
             ) : (
               <Step title="Type Selection" />
             )}

client/app/components/EditInPlace.jsx

@@ -3,6 +3,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 import Input from "antd/lib/input";
+import PlainButton from "@/components/PlainButton";
 
 export default class EditInPlace extends React.Component {
   static propTypes = {
@@ -66,18 +67,12 @@ export default class EditInPlace extends React.Component {
   };
 
   renderNormal = () =>
-    this.props.value ? (
-      <span
-        role="presentation"
-        onFocus={this.startEditing}
-        onClick={this.startEditing}
-        className={this.props.isEditable ? "editable" : ""}>
-        {this.props.value}
-      </span>
+    this.props.isEditable ? (
+      <PlainButton onClick={this.startEditing} onFocus={this.startEditing} className="editable">
+        {this.props.value || this.props.placeholder}
+      </PlainButton>
     ) : (
-      <a className="clickable" onClick={this.startEditing}>
-        {this.props.placeholder}
-      </a>
+      <span>{this.props.value}</span>
     );
 
   renderEdit = () => {

client/app/components/EditVisualizationButton/QueryControlDropdown.jsx

@@ -2,8 +2,9 @@ import React from "react";
 import PropTypes from "prop-types";
 import Dropdown from "antd/lib/dropdown";
 import Menu from "antd/lib/menu";
-import Button from "antd/lib/button";
+import PlainButton from "@/components/PlainButton";
 import { clientConfig } from "@/services/auth";
+import Button from "antd/lib/button";
 
 import PlusCircleFilledIcon from "@ant-design/icons/PlusCircleFilled";
 import ShareAltOutlinedIcon from "@ant-design/icons/ShareAltOutlined";
@@ -18,16 +19,18 @@ export default function QueryControlDropdown(props) {
     <Menu>
       {!props.query.isNew() && (!props.query.is_draft || !props.query.is_archived) && (
         <Menu.Item>
-          <a target="_self" onClick={() => props.openAddToDashboardForm(props.selectedTab)}>
+          <PlainButton onClick={() => props.openAddToDashboardForm(props.selectedTab)}>
             <PlusCircleFilledIcon /> Add to Dashboard
-          </a>
+          </PlainButton>
         </Menu.Item>
       )}
       {!clientConfig.disablePublicUrls && !props.query.isNew() && (
         <Menu.Item>
-          <a onClick={() => props.showEmbedDialog(props.query, props.selectedTab)} data-test="ShowEmbedDialogButton">
+          <PlainButton
+            onClick={() => props.showEmbedDialog(props.query, props.selectedTab)}
+            data-test="ShowEmbedDialogButton">
             <ShareAltOutlinedIcon /> Embed Elsewhere
-          </a>
+          </PlainButton>
         </Menu.Item>
       )}
       <Menu.Item>

client/app/components/FavoritesControl.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import PlainButton from "@/components/PlainButton";
 
 export default class FavoritesControl extends React.Component {
   static propTypes = {
@@ -29,12 +30,12 @@ export default class FavoritesControl extends React.Component {
     const icon = item.is_favorite ? "fa fa-star" : "fa fa-star-o";
     const title = item.is_favorite ? "Remove from favorites" : "Add to favorites";
     return (
-      <a
+      <PlainButton
         title={title}
         className="favorites-control btn-favorite"
         onClick={event => this.toggleItem(event, item, onChange)}>
         <i className={icon} aria-hidden="true" />
-      </a>
+      </PlainButton>
     );
   }
 }

client/app/components/HelpTrigger.jsx

@@ -5,6 +5,7 @@ import cx from "classnames";
 import Tooltip from "antd/lib/tooltip";
 import Drawer from "antd/lib/drawer";
 import Link from "@/components/Link";
+import PlainButton from "@/components/PlainButton";
 import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
 import BigMessage from "@/components/BigMessage";
 import DynamicComponent, { registerComponent } from "@/components/DynamicComponent";
@@ -202,9 +203,9 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
                   </Tooltip>
                 )}
                 <Tooltip title="Close" placement="bottom">
-                  <a onClick={this.closeDrawer}>
-                    <CloseOutlinedIcon />
-                  </a>
+                  <PlainButton onClick={this.closeDrawer}>
+                    <CloseOutlinedIcon aria-hidden="true" />
+                  </PlainButton>
                 </Tooltip>
               </div>
 

client/app/components/HelpTrigger.less

@@ -38,7 +38,8 @@
     border: 2px solid @help-doc-bg;
     display: flex;
 
-    a {
+    a,
+    button {
       height: 26px;
       width: 26px;
       display: flex;

client/app/components/Link.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import Button, { ButtonProps as AntdButtonProps } from "antd/lib/button";
+
+interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "role"> {
+  href: string;
+}
+
+interface ButtonProps extends AntdButtonProps {
+  href: string;
+}
+
+function DefaultLinkComponent({ children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return <a {...props}>{children}</a>;
+}
+
+Link.Component = DefaultLinkComponent;
+
+function Link({ tabIndex = 0, ...props }: LinkProps) {
+  return <Link.Component tabIndex={tabIndex} {...props} />;
+}
+
+// Ant Button will render an <a> if href is present.
+function DefaultButtonLinkComponent(props: ButtonProps) {
+  return <Button {...props} />;
+}
+
+ButtonLink.Component = DefaultButtonLinkComponent;
+
+function ButtonLink(props: ButtonProps) {
+  return <ButtonLink.Component {...props} />;
+}
+
+Link.Button = ButtonLink;
+
+export default Link;