From d8d7c78992e44a4b6d7fdd4c39ccc1c35cd8c7a9 Mon Sep 17 00:00:00 2001
From: Rafael Wendel <rafawendel2010@gmail.com>
Date: Sat, 10 Apr 2021 16:43:58 -0300
Subject: [PATCH] Replace `<a>` and `<button>` with `<PlainButton>` (#5433)

* Add PlainButton

* refactor close icons

* reorder import

* refactor remaining anchors

* refactor: replace remaining <button> and TODOs

* refactor: changed applicable elements to type link

* fix: minor details

* bug: fix tooltip ternary

* refactor: improve interactivity and semantics of schema list item
---
 .../app/assets/less/inc/schema-browser.less   | 165 +++++++++---------
 .../ApplicationLayout/DesktopNavbar.jsx       |  11 +-
 .../QueryControlDropdown.jsx                  |  11 +-
 client/app/components/FavoritesControl.jsx    |   5 +-
 client/app/components/HelpTrigger.jsx         |   5 +-
 client/app/components/InputWithCopy.jsx       |   6 +-
 client/app/components/Parameters.jsx          |   5 +-
 .../PermissionsEditorDialog/index.jsx         |   6 +-
 client/app/components/QuerySelector.jsx       |   5 +-
 client/app/components/TagsList.tsx            |   9 +-
 client/app/components/Tooltip.tsx             |   2 +-
 .../dashboard-widget/VisualizationWidget.jsx  |  14 +-
 .../dashboards/dashboard-widget/Widget.jsx    |   9 +-
 .../app/components/empty-state/EmptyState.jsx |   4 +-
 .../queries/AddToDashboardDialog.jsx          |  15 +-
 .../app/components/queries/SchedulePhrase.jsx |   5 +-
 .../app/components/queries/SchemaBrowser.jsx  |  56 +++---
 .../components/tags-control/TagsControl.jsx   |   6 +-
 .../alert/components/AlertDestinations.jsx    |  10 +-
 .../app/pages/alert/components/MenuButton.jsx |   7 +-
 client/app/pages/alert/components/Query.jsx   |   2 +-
 .../dashboards/components/DashboardHeader.jsx |   9 +-
 .../pages/data-sources/DataSourcesList.jsx    |   5 +-
 .../pages/destinations/DestinationsList.jsx   |   5 +-
 client/app/pages/home/Home.jsx                |   5 +-
 client/app/pages/queries/QueryView.jsx        |   5 +-
 .../components/QueryVisualizationTabs.jsx     |   7 +-
 .../query-snippets/QuerySnippetsList.jsx      |  13 +-
 28 files changed, 231 insertions(+), 176 deletions(-)

diff --git a/client/app/assets/less/inc/schema-browser.less b/client/app/assets/less/inc/schema-browser.less
index 3f2e66f28..f00523975 100644
--- a/client/app/assets/less/inc/schema-browser.less
+++ b/client/app/assets/less/inc/schema-browser.less
@@ -1,102 +1,107 @@
-div.table-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-  padding: 2px 22px 2px 10px;
-  border-radius: @redash-radius;
-  position: relative;
-  height: 22px;
-
-  .copy-to-editor {
-    display: none;
-  }
-
-  &:hover {
-    background: fade(@redash-gray, 10%);
-
-    .copy-to-editor {
-      display: flex;
-    }
-  }
-}
-
 .schema-container {
   height: 100%;
   z-index: 10;
   background-color: white;
-}
 
-.schema-browser {
-  overflow: hidden;
-  border: none;
-  padding-top: 10px;
-  position: relative;
-  height: 100%;
-
-  .schema-loading-state {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-  }
-
-  .collapse.in {
-    background: transparent;
-  }
-
-  .copy-to-editor {
-    color: fade(@redash-gray, 90%);
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .table-open {
-    padding: 0 22px 0 26px;
+  .schema-browser {
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    border: none;
+    padding-top: 10px;
     position: relative;
-    height: 18px;
+    height: 100%;
 
-    .column-type {
-      color: fade(@text-color, 80%);
-      font-size: 10px;
-      margin-left: 2px;
-      text-transform: uppercase;
+    .schema-loading-state {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+
+    .collapse.in {
+      background: transparent;
     }
 
     .copy-to-editor {
-      display: none;
+      visibility: hidden;
+      color: fade(@redash-gray, 90%);
+      width: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: none;
     }
 
-    &:hover {
-      background: fade(@redash-gray, 10%);
+    .schema-list-item {
+      display: flex;
+      border-radius: @redash-radius;
+      height: 22px;
 
-      .copy-to-editor {
+      .table-name {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        cursor: pointer;
+        padding: 2px 22px 2px 10px;
+      }
+
+      &:hover,
+      &:focus,
+      &:focus-within {
+        background: fade(@redash-gray, 10%);
+
+        .copy-to-editor {
+          visibility: visible;
+        }
+      }
+    }
+
+    .table-open {
+      .table-open-item {
         display: flex;
+        height: 18px;
+        width: calc(100% - 22px);
+        padding-left: 22px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        transition: none;
+
+        div:first-child {
+          flex: 1;
+        }
+
+        .column-type {
+          color: fade(@text-color, 80%);
+          font-size: 10px;
+          margin-left: 2px;
+          text-transform: uppercase;
+        }
+
+        &:hover,
+        &:focus,
+        &:focus-within {
+          background: fade(@redash-gray, 10%);
+
+          .copy-to-editor {
+            visibility: visible;
+          }
+        }
       }
     }
   }
-}
 
-.schema-control {
-  display: flex;
-  flex-wrap: nowrap;
-  padding: 0;
+  .schema-control {
+    display: flex;
+    flex-wrap: nowrap;
+    padding: 0;
 
-  .ant-btn {
-    height: auto;
+    .ant-btn {
+      height: auto;
+    }
+  }
+
+  .parameter-label {
+    display: block;
   }
 }
-
-.parameter-label {
-  display: block;
-}
diff --git a/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx b/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
index bc131c09f..a1550f60d 100644
--- a/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
+++ b/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">
diff --git a/client/app/components/EditVisualizationButton/QueryControlDropdown.jsx b/client/app/components/EditVisualizationButton/QueryControlDropdown.jsx
index 3997726e0..89ce988fd 100644
--- a/client/app/components/EditVisualizationButton/QueryControlDropdown.jsx
+++ b/client/app/components/EditVisualizationButton/QueryControlDropdown.jsx
@@ -3,6 +3,7 @@ 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 PlusCircleFilledIcon from "@ant-design/icons/PlusCircleFilled";
@@ -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>
diff --git a/client/app/components/FavoritesControl.jsx b/client/app/components/FavoritesControl.jsx
index 194fddd10..e7baa4587 100644
--- a/client/app/components/FavoritesControl.jsx
+++ b/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,13 +30,13 @@ 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}
         aria-label={title}
         className="favorites-control btn-favorite"
         onClick={event => this.toggleItem(event, item, onChange)}>
         <i className={icon} aria-hidden="true" />
-      </a>
+      </PlainButton>
     );
   }
 }
diff --git a/client/app/components/HelpTrigger.jsx b/client/app/components/HelpTrigger.jsx
index b19fd9a95..8d0a779df 100644
--- a/client/app/components/HelpTrigger.jsx
+++ b/client/app/components/HelpTrigger.jsx
@@ -5,6 +5,7 @@ import cx from "classnames";
 import Tooltip from "@/components/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";
@@ -209,9 +210,9 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
                   </Tooltip>
                 )}
                 <Tooltip title="Close" placement="bottom">
-                  <a onClick={this.closeDrawer}>
+                  <PlainButton onClick={this.closeDrawer}>
                     <CloseOutlinedIcon />
-                  </a>
+                  </PlainButton>
                 </Tooltip>
               </div>
 
diff --git a/client/app/components/InputWithCopy.jsx b/client/app/components/InputWithCopy.jsx
index 57ecf7087..6a7d488d5 100644
--- a/client/app/components/InputWithCopy.jsx
+++ b/client/app/components/InputWithCopy.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import Input from "antd/lib/input";
 import CopyOutlinedIcon from "@ant-design/icons/CopyOutlined";
 import Tooltip from "@/components/Tooltip";
+import PlainButton from "./PlainButton";
 
 export default class InputWithCopy extends React.Component {
   constructor(props) {
@@ -42,7 +43,10 @@ export default class InputWithCopy extends React.Component {
   render() {
     const copyButton = (
       <Tooltip title={this.state.copied || "Copy"}>
-        <CopyOutlinedIcon style={{ cursor: "pointer" }} onClick={this.copy} />
+        <PlainButton onClick={this.copy}>
+          {/* TODO: lacks visual feedback */}
+          <CopyOutlinedIcon />
+        </PlainButton>
       </Tooltip>
     );
 
diff --git a/client/app/components/Parameters.jsx b/client/app/components/Parameters.jsx
index a2a54024a..e7379c04b 100644
--- a/client/app/components/Parameters.jsx
+++ b/client/app/components/Parameters.jsx
@@ -6,6 +6,7 @@ import location from "@/services/location";
 import { Parameter, createParameter } from "@/services/parameters";
 import ParameterApplyButton from "@/components/ParameterApplyButton";
 import ParameterValueInput from "@/components/ParameterValueInput";
+import PlainButton from "@/components/PlainButton";
 import EditParameterSettingsDialog from "./EditParameterSettingsDialog";
 import { toHuman } from "@/lib/utils";
 
@@ -127,14 +128,14 @@ export default class Parameters extends React.Component {
         <div className="parameter-heading">
           <label>{param.title || toHuman(param.name)}</label>
           {editable && (
-            <button
+            <PlainButton
               className="btn btn-default btn-xs m-l-5"
               aria-label="Edit"
               onClick={() => this.showParameterSettings(param, index)}
               data-test={`ParameterSettings-${param.name}`}
               type="button">
               <i className="fa fa-cog" aria-hidden="true" />
-            </button>
+            </PlainButton>
           )}
         </div>
         <ParameterValueInput
diff --git a/client/app/components/PermissionsEditorDialog/index.jsx b/client/app/components/PermissionsEditorDialog/index.jsx
index 5be96424d..4a8626d79 100644
--- a/client/app/components/PermissionsEditorDialog/index.jsx
+++ b/client/app/components/PermissionsEditorDialog/index.jsx
@@ -12,6 +12,7 @@ import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import { toHuman } from "@/lib/utils";
 import HelpTrigger from "@/components/HelpTrigger";
 import { UserPreviewCard } from "@/components/PreviewCard";
+import PlainButton from "@/components/PlainButton";
 import notification from "@/services/notification";
 import User from "@/services/user";
 
@@ -183,12 +184,11 @@ function PermissionsEditorDialog({ dialog, author, context, aclUrl }) {
                   <Tag className="m-0">Author</Tag>
                 ) : (
                   <Tooltip title="Remove user permissions">
-                    <button // TODO: replace with button component
-                      style={{ all: "unset" }}
+                    <PlainButton
                       aria-label="Remove permissions"
                       onClick={() => removePermission(user.id).then(loadUsersWithPermissions)}>
                       <i className="fa fa-remove clickable" aria-hidden="true" />
-                    </button>
+                    </PlainButton>
                   </Tooltip>
                 )}
               </UserPreviewCard>
diff --git a/client/app/components/QuerySelector.jsx b/client/app/components/QuerySelector.jsx
index efb86b748..c6713043c 100644
--- a/client/app/components/QuerySelector.jsx
+++ b/client/app/components/QuerySelector.jsx
@@ -5,6 +5,7 @@ import cx from "classnames";
 import Input from "antd/lib/input";
 import Select from "antd/lib/select";
 import { Query } from "@/services/query";
+import PlainButton from "@/components/PlainButton";
 import notification from "@/services/notification";
 import { QueryTagsControl } from "@/components/tags-control/TagsControl";
 import useSearchResults from "@/lib/hooks/useSearchResults";
@@ -80,14 +81,14 @@ export default function QuerySelector(props) {
     return (
       <ul className="list-group">
         {searchResults.map(q => (
-          <a
+          <PlainButton
             className={cx("query-selector-result", "list-group-item", { inactive: q.is_draft })}
             key={q.id}
             role="listitem"
             onClick={() => selectQuery(q.id)}
             data-test={`QueryId${q.id}`}>
             {q.name} <QueryTagsControl isDraft={q.is_draft} tags={q.tags} className="inline-tags-control" />
-          </a>
+          </PlainButton>
         ))}
       </ul>
     );
diff --git a/client/app/components/TagsList.tsx b/client/app/components/TagsList.tsx
index ebde309e6..403b60bb5 100644
--- a/client/app/components/TagsList.tsx
+++ b/client/app/components/TagsList.tsx
@@ -4,6 +4,7 @@ import Badge from "antd/lib/badge";
 import Menu from "antd/lib/menu";
 import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
 import getTags from "@/services/getTags";
+import PlainButton from "@/components/PlainButton";
 
 import "./TagsList.less";
 
@@ -79,10 +80,10 @@ function TagsList({ tagsUrl, showUnselectAll = false, onUpdate }: TagsListProps)
       <div className="tags-list-title">
         <span className="tags-list-label">Tags</span>
         {showUnselectAll && selectedTags.length > 0 && (
-          <a onClick={unselectAll}>
+          <PlainButton type="link" onClick={unselectAll}>
             <CloseOutlinedIcon />
             clear selection
-          </a>
+          </PlainButton>
         )}
       </div>
 
@@ -90,12 +91,12 @@ function TagsList({ tagsUrl, showUnselectAll = false, onUpdate }: TagsListProps)
         <Menu className="invert-stripe-position" mode="inline" selectedKeys={selectedTags}>
           {map(allTags, tag => (
             <Menu.Item key={tag.name} className="m-0">
-              <a
+              <PlainButton
                 className="d-flex align-items-center justify-content-between"
                 onClick={event => toggleTag(event, tag.name)}>
                 <span className="max-character col-xs-11">{tag.name}</span>
                 <Badge count={tag.count} />
-              </a>
+              </PlainButton>
             </Menu.Item>
           ))}
         </Menu>
diff --git a/client/app/components/Tooltip.tsx b/client/app/components/Tooltip.tsx
index 8e9666556..1d80269d4 100644
--- a/client/app/components/Tooltip.tsx
+++ b/client/app/components/Tooltip.tsx
@@ -3,7 +3,7 @@ import AntTooltip, { TooltipProps } from "antd/lib/tooltip";
 import { isNil } from "lodash";
 
 export default function Tooltip({ title, ...restProps }: TooltipProps) {
-  const liveTitle = isNil(title) ? (
+  const liveTitle = !isNil(title) ? (
     <span role="status" aria-live="assertive" aria-relevant="additions">
       {title}
     </span>
diff --git a/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx b/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx
index dac8575d8..9a021cc8b 100644
--- a/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx
+++ b/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx
@@ -15,9 +15,11 @@ import Timer from "@/components/Timer";
 import { Moment } from "@/components/proptypes";
 import QueryLink from "@/components/QueryLink";
 import { FiltersType } from "@/components/Filters";
+import PlainButton from "@/components/PlainButton";
 import ExpandedWidgetDialog from "@/components/dashboards/ExpandedWidgetDialog";
 import EditParameterMappingsDialog from "@/components/dashboards/EditParameterMappingsDialog";
 import VisualizationRenderer from "@/components/visualizations/VisualizationRenderer";
+
 import Widget from "./Widget";
 
 function visualizationWidgetMenuOptions({ widget, canEditDashboard, onParametersEdit }) {
@@ -158,7 +160,7 @@ function VisualizationWidgetFooter({ widget, isPublic, onRefresh, onExpand }) {
     <>
       <span>
         {!isPublic && !!widgetQueryResult && (
-          <a
+          <PlainButton
             className="refresh-button hidden-print btn btn-sm btn-default btn-transparent"
             onClick={() => refreshWidget(1)}
             data-test="RefreshButton">
@@ -167,7 +169,7 @@ function VisualizationWidgetFooter({ widget, isPublic, onRefresh, onExpand }) {
               {refreshClickButtonId === 1 ? "Refreshing, please wait. " : "Press to refresh. "}
             </span>{" "}
             <TimeAgo date={updatedAt} />
-          </a>
+          </PlainButton>
         )}
         <span className="visible-print">
           <i className="zmdi zmdi-time-restore" aria-hidden="true" /> {formatDateTime(updatedAt)}
@@ -180,18 +182,18 @@ function VisualizationWidgetFooter({ widget, isPublic, onRefresh, onExpand }) {
       </span>
       <span>
         {!isPublic && (
-          <a
+          <PlainButton
             className="btn btn-sm btn-default hidden-print btn-transparent btn__refresh"
             onClick={() => refreshWidget(2)}>
             <i className={cx("zmdi zmdi-refresh", { "zmdi-hc-spin": refreshClickButtonId === 2 })} aria-hidden="true" />
             <span className="sr-only">
               {refreshClickButtonId === 2 ? "Refreshing, please wait." : "Press to refresh."}
             </span>
-          </a>
+          </PlainButton>
         )}
-        <a className="btn btn-sm btn-default hidden-print btn-transparent btn__refresh" onClick={onExpand}>
+        <PlainButton className="btn btn-sm btn-default hidden-print btn-transparent btn__refresh" onClick={onExpand}>
           <i className="zmdi zmdi-fullscreen" aria-hidden="true" />
-        </a>
+        </PlainButton>
       </span>
     </>
   ) : null;
diff --git a/client/app/components/dashboards/dashboard-widget/Widget.jsx b/client/app/components/dashboards/dashboard-widget/Widget.jsx
index 28d16f8f4..69734b36e 100644
--- a/client/app/components/dashboards/dashboard-widget/Widget.jsx
+++ b/client/app/components/dashboards/dashboard-widget/Widget.jsx
@@ -7,6 +7,7 @@ import Modal from "antd/lib/modal";
 import Menu from "antd/lib/menu";
 import recordEvent from "@/services/recordEvent";
 import { Moment } from "@/components/proptypes";
+import PlainButton from "@/components/PlainButton";
 
 import "./Widget.less";
 
@@ -22,9 +23,9 @@ function WidgetDropdownButton({ extraOptions, showDeleteOption, onDelete }) {
   return (
     <div className="widget-menu-regular">
       <Dropdown overlay={WidgetMenu} placement="bottomRight" trigger={["click"]}>
-        <a className="action p-l-15 p-r-15" data-test="WidgetDropdownButton" aria-label="More options">
+        <PlainButton className="action p-l-15 p-r-15" data-test="WidgetDropdownButton" aria-label="More options">
           <i className="zmdi zmdi-more-vert" aria-hidden="true" />
-        </a>
+        </PlainButton>
       </Dropdown>
     </div>
   );
@@ -45,14 +46,14 @@ WidgetDropdownButton.defaultProps = {
 function WidgetDeleteButton({ onClick }) {
   return (
     <div className="widget-menu-remove">
-      <a
+      <PlainButton
         className="action"
         title="Remove From Dashboard"
         onClick={onClick}
         data-test="WidgetDeleteButton"
         aria-label="Close">
         <i className="zmdi zmdi-close" aria-hidden="true" />
-      </a>
+      </PlainButton>
     </div>
   );
 }
diff --git a/client/app/components/empty-state/EmptyState.jsx b/client/app/components/empty-state/EmptyState.jsx
index adffd3b6e..1bc3ce9dd 100644
--- a/client/app/components/empty-state/EmptyState.jsx
+++ b/client/app/components/empty-state/EmptyState.jsx
@@ -201,9 +201,9 @@ function EmptyState({
         </div>
       </div>
       {closable && (
-        <a className="close-button" aria-label="Close" onClick={onClose}>
+        <PlainButton className="close-button" aria-label="Close" onClick={onClose}>
           <CloseOutlinedIcon />
-        </a>
+        </PlainButton>
       )}
     </div>
   );
diff --git a/client/app/components/queries/AddToDashboardDialog.jsx b/client/app/components/queries/AddToDashboardDialog.jsx
index 2c1cc07f5..44e4e058f 100644
--- a/client/app/components/queries/AddToDashboardDialog.jsx
+++ b/client/app/components/queries/AddToDashboardDialog.jsx
@@ -5,6 +5,7 @@ import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import List from "antd/lib/list";
 import Link from "@/components/Link";
+import PlainButton from "@/components/PlainButton";
 import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import { QueryTagsControl } from "@/components/tags-control/TagsControl";
@@ -89,7 +90,9 @@ function AddToDashboardDialog({ dialog, visualization }) {
           value={searchTerm}
           onChange={event => setSearchTerm(event.target.value)}
           suffix={
-            <CloseOutlinedIcon className={searchTerm === "" ? "hidden" : null} onClick={() => setSearchTerm("")} />
+            <PlainButton className={searchTerm === "" ? "hidden" : null} onClick={() => setSearchTerm("")}>
+              <CloseOutlinedIcon />
+            </PlainButton>
           }
         />
       )}
@@ -104,7 +107,15 @@ function AddToDashboardDialog({ dialog, visualization }) {
           renderItem={d => (
             <List.Item
               key={`dashboard-${d.id}`}
-              actions={selectedDashboard ? [<CloseOutlinedIcon onClick={() => setSelectedDashboard(null)} />] : []}
+              actions={
+                selectedDashboard
+                  ? [
+                      <PlainButton onClick={() => setSelectedDashboard(null)}>
+                        <CloseOutlinedIcon />
+                      </PlainButton>,
+                    ]
+                  : []
+              }
               onClick={selectedDashboard ? null : () => setSelectedDashboard(d)}>
               <div className="add-to-dashboard-dialog-item-content">
                 {d.name}
diff --git a/client/app/components/queries/SchedulePhrase.jsx b/client/app/components/queries/SchedulePhrase.jsx
index 18ab79331..5d42585bc 100644
--- a/client/app/components/queries/SchedulePhrase.jsx
+++ b/client/app/components/queries/SchedulePhrase.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Tooltip from "@/components/Tooltip";
+import PlainButton from "@/components/PlainButton";
 import { localizeTime, durationHumanize } from "@/lib/utils";
 import { RefreshScheduleType, RefreshScheduleDefault } from "../proptypes";
 
@@ -51,9 +52,9 @@ export default class SchedulePhrase extends React.Component {
     const content = full ? <Tooltip title={full}>{short}</Tooltip> : short;
 
     return this.props.isLink ? (
-      <a className="schedule-phrase" onClick={this.props.onClick} data-test="EditSchedule">
+      <PlainButton type="link" className="schedule-phrase" onClick={this.props.onClick} data-test="EditSchedule">
         {content}
-      </a>
+      </PlainButton>
     ) : (
       content
     );
diff --git a/client/app/components/queries/SchemaBrowser.jsx b/client/app/components/queries/SchemaBrowser.jsx
index 98a2b88fc..ed8d2402e 100644
--- a/client/app/components/queries/SchemaBrowser.jsx
+++ b/client/app/components/queries/SchemaBrowser.jsx
@@ -5,13 +5,13 @@ import PropTypes from "prop-types";
 import { useDebouncedCallback } from "use-debounce";
 import Input from "antd/lib/input";
 import Button from "antd/lib/button";
-import Tooltip from "@/components/Tooltip";
 import AutoSizer from "react-virtualized/dist/commonjs/AutoSizer";
 import List from "react-virtualized/dist/commonjs/List";
+import PlainButton from "@/components/PlainButton";
+import Tooltip from "@/components/Tooltip";
 import useDataSourceSchema from "@/pages/queries/hooks/useDataSourceSchema";
 import useImmutableCallback from "@/lib/hooks/useImmutableCallback";
 import LoadingState from "../items-list/components/LoadingState";
-import PlainButton from "@/components/PlainButton";
 
 const SchemaItemColumnType = PropTypes.shape({
   name: PropTypes.string.isRequired,
@@ -46,22 +46,27 @@ function SchemaItem({ item, expanded, onToggle, onSelect, ...props }) {
 
   return (
     <div {...props}>
-      {/* TODO: Replace with a button */}
-      <div className="table-name" onClick={onToggle}>
-        <i className="fa fa-table m-r-5" aria-hidden="true" />
-        <strong>
-          <span title={item.name}>{tableDisplayName}</span>
-          {!isNil(item.size) && <span> ({item.size})</span>}
-        </strong>
-
-        <Tooltip title="Insert table name into query text" mouseEnterDelay={0} mouseLeaveDelay={0}>
-          <PlainButton onClick={e => handleSelect(e, item.name)}>
-            <i className="fa fa-angle-double-right copy-to-editor" aria-hidden="true" />
+      <div className="schema-list-item">
+        <PlainButton className="table-name" onClick={onToggle}>
+          <i className="fa fa-table m-r-5" aria-hidden="true" />
+          <strong>
+            <span title={item.name}>{tableDisplayName}</span>
+            {!isNil(item.size) && <span> ({item.size})</span>}
+          </strong>
+        </PlainButton>
+        <Tooltip
+          title="Insert table name into query text"
+          mouseEnterDelay={0}
+          mouseLeaveDelay={0}
+          placement="topRight"
+          arrowPointAtCenter>
+          <PlainButton className="copy-to-editor" onClick={e => handleSelect(e, item.name)}>
+            <i className="fa fa-angle-double-right" aria-hidden="true" />
           </PlainButton>
         </Tooltip>
       </div>
       {expanded && (
-        <div>
+        <div className="table-open">
           {item.loading ? (
             <div className="table-open">Loading...</div>
           ) : (
@@ -69,14 +74,21 @@ function SchemaItem({ item, expanded, onToggle, onSelect, ...props }) {
               const columnName = get(column, "name");
               const columnType = get(column, "type");
               return (
-                <div key={columnName} className="table-open">
-                  {columnName} {columnType && <span className="column-type">{columnType}</span>}
-                  <Tooltip title="Insert column name into query text" mouseEnterDelay={0} mouseLeaveDelay={0}>
-                    <PlainButton onClick={e => handleSelect(e, columnName)}>
-                      <i className="fa fa-angle-double-right copy-to-editor" aria-hidden="true" />
-                    </PlainButton>
-                  </Tooltip>
-                </div>
+                <Tooltip
+                  title="Insert column name into query text"
+                  mouseEnterDelay={0}
+                  mouseLeaveDelay={0}
+                  placement="rightTop">
+                  <PlainButton key={columnName} className="table-open-item" onClick={e => handleSelect(e, columnName)}>
+                    <div>
+                      {columnName} {columnType && <span className="column-type">{columnType}</span>}
+                    </div>
+
+                    <div className="copy-to-editor">
+                      <i className="fa fa-angle-double-right" aria-hidden="true" />
+                    </div>
+                  </PlainButton>
+                </Tooltip>
               );
             })
           )}
diff --git a/client/app/components/tags-control/TagsControl.jsx b/client/app/components/tags-control/TagsControl.jsx
index b3de3e105..7d8b5c472 100644
--- a/client/app/components/tags-control/TagsControl.jsx
+++ b/client/app/components/tags-control/TagsControl.jsx
@@ -3,6 +3,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import Tooltip from "@/components/Tooltip";
 import EditTagsDialog from "./EditTagsDialog";
+import PlainButton from "@/components/PlainButton";
 
 export class TagsControl extends React.Component {
   static propTypes = {
@@ -34,9 +35,8 @@ export class TagsControl extends React.Component {
   renderEditButton() {
     const tags = map(this.props.tags, trim);
     return (
-      <a
+      <PlainButton
         className="label label-tag hidden-xs"
-        role="none"
         onClick={() => this.editTags(tags, this.props.getAvailableTags)}
         data-test="EditTagsButton">
         {tags.length === 0 && (
@@ -51,7 +51,7 @@ export class TagsControl extends React.Component {
             <span className="sr-only">Edit</span>
           </>
         )}
-      </a>
+      </PlainButton>
     );
   }
 
diff --git a/client/app/pages/alert/components/AlertDestinations.jsx b/client/app/pages/alert/components/AlertDestinations.jsx
index ed3ed2958..0bb227876 100644
--- a/client/app/pages/alert/components/AlertDestinations.jsx
+++ b/client/app/pages/alert/components/AlertDestinations.jsx
@@ -3,6 +3,7 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import Link from "@/components/Link";
+import Button from "antd/lib/button";
 import SelectItemsDialog from "@/components/SelectItemsDialog";
 import { Destination as DestinationType, UserProfile as UserType } from "@/components/proptypes";
 
@@ -12,11 +13,11 @@ import { clientConfig, currentUser } from "@/services/auth";
 import notification from "@/services/notification";
 import ListItemAddon from "@/components/groups/ListItemAddon";
 import EmailSettingsWarning from "@/components/EmailSettingsWarning";
+import PlainButton from "@/components/PlainButton";
+import Tooltip from "@/components/Tooltip";
 
 import CloseOutlinedIcon from "@ant-design/icons/CloseOutlined";
-import Tooltip from "@/components/Tooltip";
 import Switch from "antd/lib/switch";
-import Button from "antd/lib/button";
 
 import "./AlertDestinations.less";
 
@@ -46,7 +47,10 @@ function ListItem({ destination: { name, type }, user, unsubscribe }) {
       )}
       {canUnsubscribe && (
         <Tooltip title="Remove" mouseEnterDelay={0.5}>
-          <CloseOutlinedIcon className="remove-button" onClick={unsubscribe} />
+          <PlainButton className="remove-button" onClick={unsubscribe}>
+            {/* TODO: lacks visual feedback */}
+            <CloseOutlinedIcon />
+          </PlainButton>
         </Tooltip>
       )}
     </li>
diff --git a/client/app/pages/alert/components/MenuButton.jsx b/client/app/pages/alert/components/MenuButton.jsx
index e8c1dc9c2..ce1a0b839 100644
--- a/client/app/pages/alert/components/MenuButton.jsx
+++ b/client/app/pages/alert/components/MenuButton.jsx
@@ -9,6 +9,7 @@ import Button from "antd/lib/button";
 
 import LoadingOutlinedIcon from "@ant-design/icons/LoadingOutlined";
 import EllipsisOutlinedIcon from "@ant-design/icons/EllipsisOutlined";
+import PlainButton from "@/components/PlainButton";
 
 export default function MenuButton({ doDelete, canEdit, mute, unmute, muted }) {
   const [loading, setLoading] = useState(false);
@@ -46,13 +47,13 @@ export default function MenuButton({ doDelete, canEdit, mute, unmute, muted }) {
         <Menu>
           <Menu.Item>
             {muted ? (
-              <a onClick={() => execute(unmute)}>Unmute Notifications</a>
+              <PlainButton onClick={() => execute(unmute)}>Unmute Notifications</PlainButton>
             ) : (
-              <a onClick={() => execute(mute)}>Mute Notifications</a>
+              <PlainButton onClick={() => execute(mute)}>Mute Notifications</PlainButton>
             )}
           </Menu.Item>
           <Menu.Item>
-            <a onClick={confirmDelete}>Delete</a>
+            <PlainButton onClick={confirmDelete}>Delete</PlainButton>
           </Menu.Item>
         </Menu>
       }>
diff --git a/client/app/pages/alert/components/Query.jsx b/client/app/pages/alert/components/Query.jsx
index 3148b1ee3..9757a1917 100644
--- a/client/app/pages/alert/components/Query.jsx
+++ b/client/app/pages/alert/components/Query.jsx
@@ -27,7 +27,7 @@ export default function QueryFormItem({ query, queryResult, onChange, editMode }
       <small>
         <WarningFilledIcon className="warning-icon-danger" /> This query has no <i>refresh schedule</i>.{" "}
         <Tooltip title="A query schedule is not necessary but is highly recommended for alerts. An Alert without a query schedule will only send notifications if a user in your organization manually executes this query.">
-          <a>
+          <a role="presentation">
             Why it&apos;s recommended <QuestionCircleTwoToneIcon />
           </a>
         </Tooltip>
diff --git a/client/app/pages/dashboards/components/DashboardHeader.jsx b/client/app/pages/dashboards/components/DashboardHeader.jsx
index 115c5bebf..9c8bf8265 100644
--- a/client/app/pages/dashboards/components/DashboardHeader.jsx
+++ b/client/app/pages/dashboards/components/DashboardHeader.jsx
@@ -10,6 +10,7 @@ import Modal from "antd/lib/modal";
 import Tooltip from "@/components/Tooltip";
 import FavoritesControl from "@/components/FavoritesControl";
 import EditInPlace from "@/components/EditInPlace";
+import PlainButton from "@/components/PlainButton";
 import { DashboardTagsControl } from "@/components/tags-control/TagsControl";
 import getTags from "@/services/getTags";
 import { clientConfig } from "@/services/auth";
@@ -138,20 +139,20 @@ function DashboardMoreOptionsButton({ dashboardConfiguration }) {
       overlay={
         <Menu data-test="DashboardMoreButtonMenu">
           <Menu.Item className={cx({ hidden: gridDisabled })}>
-            <a onClick={() => setEditingLayout(true)}>Edit</a>
+            <PlainButton onClick={() => setEditingLayout(true)}>Edit</PlainButton>
           </Menu.Item>
           {clientConfig.showPermissionsControl && isDashboardOwnerOrAdmin && (
             <Menu.Item>
-              <a onClick={managePermissions}>Manage Permissions</a>
+              <PlainButton onClick={managePermissions}>Manage Permissions</PlainButton>
             </Menu.Item>
           )}
           {!clientConfig.disablePublish && !dashboard.is_draft && (
             <Menu.Item>
-              <a onClick={togglePublished}>Unpublish</a>
+              <PlainButton onClick={togglePublished}>Unpublish</PlainButton>
             </Menu.Item>
           )}
           <Menu.Item>
-            <a onClick={archive}>Archive</a>
+            <PlainButton onClick={archive}>Archive</PlainButton>
           </Menu.Item>
         </Menu>
       }>
diff --git a/client/app/pages/data-sources/DataSourcesList.jsx b/client/app/pages/data-sources/DataSourcesList.jsx
index 9934207a9..c1dda065c 100644
--- a/client/app/pages/data-sources/DataSourcesList.jsx
+++ b/client/app/pages/data-sources/DataSourcesList.jsx
@@ -11,6 +11,7 @@ import CreateSourceDialog from "@/components/CreateSourceDialog";
 import DynamicComponent, { registerComponent } from "@/components/DynamicComponent";
 import helper from "@/components/dynamic-form/dynamicFormHelper";
 import wrapSettingsTab from "@/components/SettingsWrapper";
+import PlainButton from "@/components/PlainButton";
 
 import DataSource, { IMG_ROOT } from "@/services/data-source";
 import { policy } from "@/services/policy";
@@ -29,9 +30,9 @@ export function DataSourcesListComponent({ dataSources, onClickCreate }) {
       There are no data sources yet.
       {policy.isCreateDataSourceEnabled() && (
         <div className="m-t-5">
-          <a className="clickable" onClick={onClickCreate} data-test="CreateDataSourceLink">
+          <PlainButton type="link" onClick={onClickCreate} data-test="CreateDataSourceLink">
             Click here
-          </a>{" "}
+          </PlainButton>{" "}
           to add one.
         </div>
       )}
diff --git a/client/app/pages/destinations/DestinationsList.jsx b/client/app/pages/destinations/DestinationsList.jsx
index f263b5fa6..6933a60b1 100644
--- a/client/app/pages/destinations/DestinationsList.jsx
+++ b/client/app/pages/destinations/DestinationsList.jsx
@@ -10,6 +10,7 @@ import LoadingState from "@/components/items-list/components/LoadingState";
 import CreateSourceDialog from "@/components/CreateSourceDialog";
 import helper from "@/components/dynamic-form/dynamicFormHelper";
 import wrapSettingsTab from "@/components/SettingsWrapper";
+import PlainButton from "@/components/PlainButton";
 
 import Destination, { IMG_ROOT } from "@/services/destination";
 import { policy } from "@/services/policy";
@@ -97,9 +98,9 @@ class DestinationsList extends React.Component {
         There are no alert destinations yet.
         {policy.isCreateDestinationEnabled() && (
           <div className="m-t-5">
-            <a className="clickable" onClick={this.showCreateSourceDialog}>
+            <PlainButton type="link" onClick={this.showCreateSourceDialog}>
               Click here
-            </a>{" "}
+            </PlainButton>{" "}
             to add one.
           </div>
         )}
diff --git a/client/app/pages/home/Home.jsx b/client/app/pages/home/Home.jsx
index 2446f8e17..c6f55d646 100644
--- a/client/app/pages/home/Home.jsx
+++ b/client/app/pages/home/Home.jsx
@@ -7,6 +7,7 @@ import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSess
 import EmptyState, { EmptyStateHelpMessage } from "@/components/empty-state/EmptyState";
 import DynamicComponent from "@/components/DynamicComponent";
 import BeaconConsent from "@/components/BeaconConsent";
+import PlainButton from "@/components/PlainButton";
 
 import { axios } from "@/services/axios";
 import recordEvent from "@/services/recordEvent";
@@ -55,9 +56,9 @@ function EmailNotVerifiedAlert() {
         <>
           We have sent an email with a confirmation link to your email address. Please follow the link to verify your
           email address.{" "}
-          <a className="clickable" onClick={verifyEmail}>
+          <PlainButton type="link" onClick={verifyEmail}>
             Resend email
-          </a>
+          </PlainButton>
           .
         </>
       }
diff --git a/client/app/pages/queries/QueryView.jsx b/client/app/pages/queries/QueryView.jsx
index 8a8dc81b9..cbd582b48 100644
--- a/client/app/pages/queries/QueryView.jsx
+++ b/client/app/pages/queries/QueryView.jsx
@@ -11,6 +11,7 @@ import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSess
 import EditInPlace from "@/components/EditInPlace";
 import Parameters from "@/components/Parameters";
 import DynamicComponent from "@/components/DynamicComponent";
+import PlainButton from "@/components/PlainButton";
 
 import DataSource from "@/services/data-source";
 import { ExecutionStatus } from "@/services/query-result";
@@ -122,10 +123,10 @@ function QueryView(props) {
             queryFlags.canEdit &&
             !addingDescription &&
             !fullscreen && (
-              <a className="label label-tag hidden-xs" role="none" onClick={() => setAddingDescription(true)}>
+              <PlainButton className="label label-tag hidden-xs" role="none" onClick={() => setAddingDescription(true)}>
                 <i className="zmdi zmdi-plus m-r-5" aria-hidden="true" />
                 Add description
-              </a>
+              </PlainButton>
             )
           }
         />
diff --git a/client/app/pages/queries/components/QueryVisualizationTabs.jsx b/client/app/pages/queries/components/QueryVisualizationTabs.jsx
index 40771b711..60785e3b5 100644
--- a/client/app/pages/queries/components/QueryVisualizationTabs.jsx
+++ b/client/app/pages/queries/components/QueryVisualizationTabs.jsx
@@ -4,9 +4,10 @@ import cx from "classnames";
 import { find, orderBy } from "lodash";
 import useMedia from "use-media";
 import Tabs from "antd/lib/tabs";
-import VisualizationRenderer from "@/components/visualizations/VisualizationRenderer";
 import Button from "antd/lib/button";
 import Modal from "antd/lib/modal";
+import VisualizationRenderer from "@/components/visualizations/VisualizationRenderer";
+import PlainButton from "@/components/PlainButton";
 
 import "./QueryVisualizationTabs.less";
 
@@ -58,9 +59,9 @@ function TabWithDeleteButton({ visualizationName, canDelete, onDelete, ...props
     <span {...props}>
       {visualizationName}
       {canDelete && (
-        <a className="delete-visualization-button" onClick={handleDelete} aria-label="Close" title="Close">
+        <PlainButton className="delete-visualization-button" onClick={handleDelete} aria-label="Close" title="Close">
           <i className="zmdi zmdi-close" aria-hidden="true" />
-        </a>
+        </PlainButton>
       )}
     </span>
   );
diff --git a/client/app/pages/query-snippets/QuerySnippetsList.jsx b/client/app/pages/query-snippets/QuerySnippetsList.jsx
index 01683ba76..7f4da4ecb 100644
--- a/client/app/pages/query-snippets/QuerySnippetsList.jsx
+++ b/client/app/pages/query-snippets/QuerySnippetsList.jsx
@@ -15,6 +15,7 @@ import { StateStorage } from "@/components/items-list/classes/StateStorage";
 import LoadingState from "@/components/items-list/components/LoadingState";
 import ItemsTable, { Columns } from "@/components/items-list/components/ItemsTable";
 import wrapSettingsTab from "@/components/SettingsWrapper";
+import PlainButton from "@/components/PlainButton";
 
 import QuerySnippet from "@/services/query-snippet";
 import { currentUser } from "@/services/auth";
@@ -34,11 +35,9 @@ class QuerySnippetsList extends React.Component {
   listColumns = [
     Columns.custom.sortable(
       (text, querySnippet) => (
-        <div>
-          <a className="table-main-title clickable" onClick={() => this.showSnippetDialog(querySnippet)}>
-            {querySnippet.trigger}
-          </a>
-        </div>
+        <PlainButton type="link" className="table-main-title" onClick={() => this.showSnippetDialog(querySnippet)}>
+          {querySnippet.trigger}
+        </PlainButton>
       ),
       {
         title: "Trigger",
@@ -158,9 +157,9 @@ class QuerySnippetsList extends React.Component {
             There are no query snippets yet.
             {policy.isCreateQuerySnippetEnabled() && (
               <div className="m-t-5">
-                <a className="clickable" onClick={() => this.showSnippetDialog()}>
+                <PlainButton type="link" onClick={() => this.showSnippetDialog()}>
                   Click here
-                </a>{" "}
+                </PlainButton>{" "}
                 to add one.
               </div>
             )}