From 610e08356ed5da278ecfa705f7d4bcdca865f196 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 14 Jul 2019 19:32:57 +0100
Subject: [PATCH] chore(ui): disable tooltips on the overview modal

These get triggered too often, blocking view of other labels
---
 .../__snapshots__/index.test.js.snap          | 21 +----
 .../Labels/LabelWithPercent/index.js          |  5 +-
 .../OverviewModalContent.test.js.snap         | 91 +++----------------
 3 files changed, 18 insertions(+), 99 deletions(-)

diff --git a/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.js.snap b/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.js.snap
index a6b248c68..b9de37a3c 100644
--- a/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.js.snap
@@ -2,12 +2,7 @@
 
 exports[`<LabelWithPercent /> matches snapshot with isActive=true 1`] = `
 "
-<div class
-     style=\\"display: inline-block; max-width: 100%;\\"
-     data-tooltipped
-     aria-describedby=\\"tippy-tooltip-3\\"
-     data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
->
+<div class=\\"d-inline-block mw-100\\">
   <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
     <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
       25
@@ -52,12 +47,7 @@ exports[`<LabelWithPercent /> matches snapshot with isActive=true 1`] = `
 
 exports[`<LabelWithPercent /> matches snapshot with offset=0 1`] = `
 "
-<div class
-     style=\\"display: inline-block; max-width: 100%;\\"
-     data-tooltipped
-     aria-describedby=\\"tippy-tooltip-1\\"
-     data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
->
+<div class=\\"d-inline-block mw-100\\">
   <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
     <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
       25
@@ -87,12 +77,7 @@ exports[`<LabelWithPercent /> matches snapshot with offset=0 1`] = `
 
 exports[`<LabelWithPercent /> matches snapshot with offset=25 1`] = `
 "
-<div class
-     style=\\"display: inline-block; max-width: 100%;\\"
-     data-tooltipped
-     aria-describedby=\\"tippy-tooltip-2\\"
-     data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
->
+<div class=\\"d-inline-block mw-100\\">
   <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
     <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
       25
diff --git a/ui/src/Components/Labels/LabelWithPercent/index.js b/ui/src/Components/Labels/LabelWithPercent/index.js
index 896f2b248..a5e1f5430 100644
--- a/ui/src/Components/Labels/LabelWithPercent/index.js
+++ b/ui/src/Components/Labels/LabelWithPercent/index.js
@@ -8,7 +8,6 @@ import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
 
 import { AlertStore } from "Stores/AlertStore";
 import { QueryOperators, FormatQuery } from "Common/Query";
-import { TooltipWrapper } from "Components/TooltipWrapper";
 import { BaseLabel } from "Components/Labels/BaseLabel";
 
 import "./index.scss";
@@ -50,7 +49,7 @@ const LabelWithPercent = inject("alertStore")(
             : "bg-success";
 
         return (
-          <TooltipWrapper title="Click to only show alerts with this label or Alt+Click to hide them">
+          <div className="d-inline-block mw-100">
             <span className={cs.className} style={cs.style}>
               <span className="mr-1 px-1 bg-primary text-white components-labelWithPercent-percent">
                 {hits}
@@ -88,7 +87,7 @@ const LabelWithPercent = inject("alertStore")(
                 aria-valuemax="100"
               />
             </div>
-          </TooltipWrapper>
+          </div>
         );
       }
     }
diff --git a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
index 5f8dae447..8b8df63a6 100644
--- a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
+++ b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
@@ -34,12 +34,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
           <td width=\\"75%\\"
               class=\\"mw-100 p-1\\"
           >
-            <div class
-                 style=\\"display: inline-block; max-width: 100%;\\"
-                 data-tooltipped
-                 aria-describedby=\\"tippy-tooltip-1\\"
-                 data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
-            >
+            <div class=\\"d-inline-block mw-100\\">
               <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
                 <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   8
@@ -64,12 +59,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </div>
               </div>
             </div>
-            <div class
-                 style=\\"display: inline-block; max-width: 100%;\\"
-                 data-tooltipped
-                 aria-describedby=\\"tippy-tooltip-2\\"
-                 data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
-            >
+            <div class=\\"d-inline-block mw-100\\">
               <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
                 <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   4
@@ -102,12 +92,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </div>
               </div>
             </div>
-            <div class
-                 style=\\"display: inline-block; max-width: 100%;\\"
-                 data-tooltipped
-                 aria-describedby=\\"tippy-tooltip-3\\"
-                 data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
-            >
+            <div class=\\"d-inline-block mw-100\\">
               <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
                 <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   4
@@ -156,12 +141,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
           <td width=\\"75%\\"
               class=\\"mw-100 p-1\\"
           >
-            <div class
-                 style=\\"display: inline-block; max-width: 100%;\\"
-                 data-tooltipped
-                 aria-describedby=\\"tippy-tooltip-4\\"
-                 data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
-            >
+            <div class=\\"d-inline-block mw-100\\">
               <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
                 <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
@@ -186,12 +166,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </div>
               </div>
             </div>
-            <div class
-                 style=\\"display: inline-block; max-width: 100%;\\"
-                 data-tooltipped
-                 aria-describedby=\\"tippy-tooltip-5\\"
-                 data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
-            >
+            <div class=\\"d-inline-block mw-100\\">
               <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
                 <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
@@ -224,12 +199,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </div>
               </div>
             </div>
-            <div class
-                 style=\\"display: inline-block; max-width: 100%;\\"
-                 data-tooltipped
-                 aria-describedby=\\"tippy-tooltip-6\\"
-                 data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
-            >
+            <div class=\\"d-inline-block mw-100\\">
               <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
                 <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
@@ -262,12 +232,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </div>
               </div>
             </div>
-            <div class
-                 style=\\"display: inline-block; max-width: 100%;\\"
-                 data-tooltipped
-                 aria-describedby=\\"tippy-tooltip-7\\"
-                 data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
-            >
+            <div class=\\"d-inline-block mw-100\\">
               <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
                 <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
@@ -300,12 +265,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </div>
               </div>
             </div>
-            <div class
-                 style=\\"display: inline-block; max-width: 100%;\\"
-                 data-tooltipped
-                 aria-describedby=\\"tippy-tooltip-8\\"
-                 data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
-            >
+            <div class=\\"d-inline-block mw-100\\">
               <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
                 <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
@@ -338,12 +298,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </div>
               </div>
             </div>
-            <div class
-                 style=\\"display: inline-block; max-width: 100%;\\"
-                 data-tooltipped
-                 aria-describedby=\\"tippy-tooltip-9\\"
-                 data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
-            >
+            <div class=\\"d-inline-block mw-100\\">
               <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
                 <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
@@ -376,12 +331,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </div>
               </div>
             </div>
-            <div class
-                 style=\\"display: inline-block; max-width: 100%;\\"
-                 data-tooltipped
-                 aria-describedby=\\"tippy-tooltip-10\\"
-                 data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
-            >
+            <div class=\\"d-inline-block mw-100\\">
               <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
                 <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
@@ -414,12 +364,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </div>
               </div>
             </div>
-            <div class
-                 style=\\"display: inline-block; max-width: 100%;\\"
-                 data-tooltipped
-                 aria-describedby=\\"tippy-tooltip-11\\"
-                 data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
-            >
+            <div class=\\"d-inline-block mw-100\\">
               <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
                 <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
@@ -452,12 +397,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </div>
               </div>
             </div>
-            <div class
-                 style=\\"display: inline-block; max-width: 100%;\\"
-                 data-tooltipped
-                 aria-describedby=\\"tippy-tooltip-12\\"
-                 data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
-            >
+            <div class=\\"d-inline-block mw-100\\">
               <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
                 <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
@@ -509,12 +449,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
           <td width=\\"75%\\"
               class=\\"mw-100 p-1\\"
           >
-            <div class
-                 style=\\"display: inline-block; max-width: 100%;\\"
-                 data-tooltipped
-                 aria-describedby=\\"tippy-tooltip-13\\"
-                 data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
-            >
+            <div class=\\"d-inline-block mw-100\\">
               <span class=\\"components-label badge badge-dark components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
                 <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   5