fix(ui): don't use a for elements without href

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js

@@ -114,7 +114,7 @@ const GroupMenu = observer(
         <Manager>
           <Reference>
             {({ ref }) => (
-              <a
+              <span
                 ref={ref}
                 onClick={this.collapse.toggle}
                 className={`text-muted cursor-pointer badge text-nowrap text-truncate pl-0 components-grid-alertgroup-${
@@ -123,7 +123,7 @@ const GroupMenu = observer(
                 data-toggle="dropdown"
               >
                 <FontAwesomeIcon icon={faEllipsisV} />
-              </a>
+              </span>
             )}
           </Reference>
           <DropdownSlide in={!this.collapse.value} unmountOnExit>

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.test.js

@@ -39,7 +39,7 @@ describe("<GroupMenu />", () => {
   it("clicking toggle sets collapse value to 'false'", () => {
     const group = MockAlertGroup({ alertname: "Fake Alert" }, [], [], {});
     const tree = MountedGroupMenu(group);
-    const toggle = tree.find("a.cursor-pointer");
+    const toggle = tree.find(".cursor-pointer");
     toggle.simulate("click");
     expect(tree.instance().collapse.value).toBe(false);
   });
@@ -48,7 +48,7 @@ describe("<GroupMenu />", () => {
     const group = MockAlertGroup({ alertname: "Fake Alert" }, [], [], {});
     const tree = MountedGroupMenu(group);
 
-    const toggle = tree.find("a.cursor-pointer");
+    const toggle = tree.find(".cursor-pointer");
     toggle.simulate("click");
     expect(tree.instance().collapse.value).toBe(false);
 

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js

@@ -48,14 +48,14 @@ const GroupHeader = observer(
               value="active"
               counter={group.stateCount.active}
             />
-            <a
+            <span
               className="text-muted cursor-pointer badge text-nowrap text-truncate pr-0"
               onClick={collapseStore.toggle}
             >
               <FontAwesomeIcon
                 icon={collapseStore.value ? faChevronUp : faChevronDown}
               />
-            </a>
+            </span>
           </span>
           <span>
             {Object.keys(group.labels).map(name => (

ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap

@@ -17,7 +17,7 @@ exports[`<Silence /> matches snapshot when data is present in alertStore 1`] = `
     <span class=\\"text-muted my-1\\">
       Fake silence
       <span class=\\"blockquote-footer pt-1\\">
-        <a class=\\"float-right cursor-pointer\\">
+        <span class=\\"float-right cursor-pointer\\">
           <svg aria-hidden=\\"true\\"
                data-prefix=\\"fas\\"
                data-icon=\\"chevron-up\\"
@@ -31,7 +31,7 @@ exports[`<Silence /> matches snapshot when data is present in alertStore 1`] = `
             >
             </path>
           </svg>
-        </a>
+        </span>
         <cite class=\\"components-grid-alertgroup-silences mr-2\\">
           me@example.com
         </cite>
@@ -65,7 +65,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
     <span class=\\"text-muted my-1\\">
       Fake silence
       <span class=\\"blockquote-footer pt-1\\">
-        <a class=\\"float-right cursor-pointer\\">
+        <span class=\\"float-right cursor-pointer\\">
           <svg aria-hidden=\\"true\\"
                data-prefix=\\"fas\\"
                data-icon=\\"chevron-down\\"
@@ -79,7 +79,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
             >
             </path>
           </svg>
-        </a>
+        </span>
         <cite class=\\"components-grid-alertgroup-silences mr-2\\">
           me@example.com
         </cite>

ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.js

@@ -295,14 +295,14 @@ const Silence = inject("alertStore")(
               <span className="text-muted my-1">
                 <SilenceComment silence={silence} />
                 <span className="blockquote-footer pt-1">
-                  <a
+                  <span
                     className="float-right cursor-pointer"
                     onClick={this.collapse.toggle}
                   >
                     <FontAwesomeIcon
                       icon={this.collapse.value ? faChevronUp : faChevronDown}
                     />
-                  </a>
+                  </span>
                   <cite className="components-grid-alertgroup-silences mr-2">
                     {silence.createdBy}
                   </cite>

ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.test.js

@@ -148,7 +148,7 @@ describe("<Silence />", () => {
 
   it("clicking on expand toggle shows silence details", () => {
     const tree = MountedSilence(alertmanager);
-    const toggle = tree.find("a.float-right.cursor-pointer");
+    const toggle = tree.find(".float-right.cursor-pointer");
     toggle.simulate("click");
     const details = tree.find("SilenceDetails");
     expect(details).toHaveLength(1);
@@ -204,7 +204,7 @@ describe("<Silence />", () => {
     const tree = MountedSilence(alertmanager);
 
     // expand silence
-    tree.find("a.float-right.cursor-pointer").simulate("click");
+    tree.find(".float-right.cursor-pointer").simulate("click");
 
     const button = tree.find(".badge-secondary.components-label-with-hover");
     expect(button.text()).toBe("Edit");
@@ -216,7 +216,7 @@ describe("<Silence />", () => {
     const tree = MountedSilence(alertmanager);
 
     // expand silence
-    tree.find("a.float-right.cursor-pointer").simulate("click");
+    tree.find(".float-right.cursor-pointer").simulate("click");
 
     const button = tree.find(".badge-secondary.components-label-with-hover");
     expect(button.text()).toBe("Edit");

ui/src/Components/Labels/FilteringCounterBadge/index.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 
 import { inject, observer } from "mobx-react";
 
+import { AlertStore } from "Stores/AlertStore";
 import { BaseLabel } from "Components/Labels/BaseLabel";
 
 // Same as FilteringLabel but for labels that are counters (usually @state)
@@ -12,7 +13,9 @@ const FilteringCounterBadge = inject("alertStore")(
   observer(
     class FilteringCounterBadge extends BaseLabel {
       static propTypes = {
-        ...BaseLabel.propTypes,
+        alertStore: PropTypes.instanceOf(AlertStore).isRequired,
+        name: PropTypes.string.isRequired,
+        value: PropTypes.string.isRequired,
         counter: PropTypes.number.isRequired
       };
 

ui/src/Components/Labels/HistoryLabel/index.js

@@ -5,6 +5,7 @@ import { observer } from "mobx-react";
 
 import { DefaultLabelClass } from "Common/Colors";
 import { QueryOperators } from "Common/Query";
+import { AlertStore } from "Stores/AlertStore";
 import { BaseLabel } from "Components/Labels/BaseLabel";
 
 import "./index.css";
@@ -12,7 +13,9 @@ import "./index.css";
 const HistoryLabel = observer(
   class HistoryLabel extends BaseLabel {
     static propTypes = {
-      ...BaseLabel.propTypes,
+      alertStore: PropTypes.instanceOf(AlertStore).isRequired,
+      name: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
       matcher: PropTypes.string.isRequired
     };
 

ui/src/Components/MainModal/MainModalContent.js

@@ -13,14 +13,14 @@ import { Configuration } from "./Configuration";
 import { Help } from "./Help";
 
 const Tab = ({ title, active, onClick }) => (
-  <a
+  <span
     className={`nav-item nav-link cursor-pointer ${
       active ? "active" : "text-primary"
     }`}
     onClick={onClick}
   >
     {title}
-  </a>
+  </span>
 );
 Tab.propTypes = {
   title: PropTypes.string.isRequired,

ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap

@@ -11,12 +11,12 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
     <div class=\\"modal-content\\">
       <div class=\\"modal-header py-2\\">
         <nav class=\\"nav nav-pills nav-justified w-100\\">
-          <a class=\\"nav-item nav-link cursor-pointer active\\">
+          <span class=\\"nav-item nav-link cursor-pointer active\\">
             Configuration
-          </a>
-          <a class=\\"nav-item nav-link cursor-pointer text-primary\\">
+          </span>
+          <span class=\\"nav-item nav-link cursor-pointer text-primary\\">
             Help
-          </a>
+          </span>
           <button type=\\"button\\"
                   class=\\"close\\"
           >

ui/src/Components/MainModal/index.js

@@ -46,9 +46,12 @@ const MainModal = observer(
       return (
         <React.Fragment>
           <li className="nav-item">
-            <a className="nav-link cursor-pointer" onClick={this.toggle.toggle}>
+            <span
+              className="nav-link cursor-pointer"
+              onClick={this.toggle.toggle}
+            >
               <FontAwesomeIcon icon={faCog} />
-            </a>
+            </span>
           </li>
           <MountFade in={this.toggle.show} unmountOnExit>
             <MainModalContent

ui/src/Components/NavBar/__snapshots__/index.test.js.snap

@@ -25,7 +25,7 @@ exports[`<NavBar /> matches snapshot with 0 alerts 1`] = `
     </span>
     <ul class=\\"navbar-nav float-right d-flex flex-row\\">
       <li class=\\"nav-item\\">
-        <a class=\\"nav-link cursor-pointer\\">
+        <span class=\\"nav-link cursor-pointer\\">
           <svg aria-hidden=\\"true\\"
                data-prefix=\\"fas\\"
                data-icon=\\"bell-slash\\"
@@ -39,10 +39,10 @@ exports[`<NavBar /> matches snapshot with 0 alerts 1`] = `
             >
             </path>
           </svg>
-        </a>
+        </span>
       </li>
       <li class=\\"nav-item\\">
-        <a class=\\"nav-link cursor-pointer\\">
+        <span class=\\"nav-link cursor-pointer\\">
           <svg aria-hidden=\\"true\\"
                data-prefix=\\"fas\\"
                data-icon=\\"cog\\"
@@ -56,7 +56,7 @@ exports[`<NavBar /> matches snapshot with 0 alerts 1`] = `
             >
             </path>
           </svg>
-        </a>
+        </span>
       </li>
     </ul>
     <form class=\\"form-inline mw-100\\"
@@ -156,7 +156,7 @@ exports[`<NavBar /> matches snapshot with 5 alerts 1`] = `
     </span>
     <ul class=\\"navbar-nav float-right d-flex flex-row\\">
       <li class=\\"nav-item\\">
-        <a class=\\"nav-link cursor-pointer\\">
+        <span class=\\"nav-link cursor-pointer\\">
           <svg aria-hidden=\\"true\\"
                data-prefix=\\"fas\\"
                data-icon=\\"bell-slash\\"
@@ -170,10 +170,10 @@ exports[`<NavBar /> matches snapshot with 5 alerts 1`] = `
             >
             </path>
           </svg>
-        </a>
+        </span>
       </li>
       <li class=\\"nav-item\\">
-        <a class=\\"nav-link cursor-pointer\\">
+        <span class=\\"nav-link cursor-pointer\\">
           <svg aria-hidden=\\"true\\"
                data-prefix=\\"fas\\"
                data-icon=\\"cog\\"
@@ -187,7 +187,7 @@ exports[`<NavBar /> matches snapshot with 5 alerts 1`] = `
             >
             </path>
           </svg>
-        </a>
+        </span>
       </li>
     </ul>
     <form class=\\"form-inline mw-100\\"

ui/src/Components/SilenceModal/DateTimeSelect/index.js

@@ -36,12 +36,12 @@ OffsetBadge.propTypes = {
 
 const Tab = ({ title, active, onClick }) => (
   <li className="nav-item">
-    <a
+    <span
       className={`nav-link cursor-pointer ${active ? "active" : ""}`}
       onClick={onClick}
     >
       {title}
-    </a>
+    </span>
   </li>
 );
 Tab.propTypes = {

ui/src/Components/SilenceModal/SilenceForm.js

@@ -174,14 +174,14 @@ const SilenceForm = observer(
             onChange={this.onCommentChange}
           />
           <div className="d-flex flex-row justify-content-between">
-            <a
+            <span
               className="btn px-0 cursor-pointer text-muted"
               onClick={this.previewCollapse.toggle}
             >
               <FontAwesomeIcon
                 icon={this.previewCollapse.hidden ? faChevronUp : faChevronDown}
               />
-            </a>
+            </span>
             <span>
               {silenceFormStore.data.silenceID === null ? null : (
                 <button

ui/src/Components/SilenceModal/SilenceForm.test.js

@@ -110,7 +110,7 @@ describe("<SilenceForm /> preview", () => {
 
   it("clicking on the toggle icon toggles SilencePreview", () => {
     const tree = ShallowSilenceForm();
-    const button = tree.find("a.btn.cursor-pointer.text-muted");
+    const button = tree.find(".btn.cursor-pointer.text-muted");
     expect(tree.find("SilencePreview")).toHaveLength(0);
     button.simulate("click");
     expect(tree.find("SilencePreview")).toHaveLength(1);

ui/src/Components/SilenceModal/index.js

@@ -53,9 +53,12 @@ const SilenceModal = observer(
       return (
         <React.Fragment>
           <li className="nav-item">
-            <a className="nav-link cursor-pointer" onClick={this.toggleModal}>
+            <span
+              className="nav-link cursor-pointer"
+              onClick={this.toggleModal}
+            >
               <FontAwesomeIcon icon={faBellSlash} />
-            </a>
+            </span>
           </li>
           <MountFade in={silenceFormStore.toggle.visible} unmountOnExit>
             <SilenceModalContent