From a85f3810aa072aae80b4b12139f525640b8e6c38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 16 Oct 2018 18:43:16 +0100
Subject: [PATCH] fix(ui): move ul to a dedicated div to prevent bottom border

The way list-group-flush is styled any extra element on the ul level seems to be causing top/bottom borders to show up, move it under a dedicated div to prevent that from happening, with list-group-flush we want borders only between label set elements
---
 .../__snapshots__/index.test.js.snap          |  78 +++++-----
 ui/src/Components/LabelSetList/index.js       |  46 +++---
 .../__snapshots__/index.test.js.snap          | 144 +++++++++---------
 3 files changed, 137 insertions(+), 131 deletions(-)

diff --git a/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap b/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap
index ecb061e13..7f0088f71 100644
--- a/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap
@@ -6,48 +6,50 @@ exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
   <p class=\\"lead text-center\\">
     Affected alerts
   </p>
-  <ul class=\\"list-group list-group-flush mb-3\\">
-    <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-      <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
-        <span class=\\"components-label-name\\">
-          foo:
+  <div>
+    <ul class=\\"list-group list-group-flush mb-3\\">
+      <li class=\\"list-group-item px-0 pt-2 pb-1\\">
+        <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
+          <span class=\\"components-label-name\\">
+            foo:
+          </span>
+          <span class=\\"components-label-value\\">
+            bar
+          </span>
         </span>
-        <span class=\\"components-label-value\\">
-          bar
+      </li>
+      <li class=\\"list-group-item px-0 pt-2 pb-1\\">
+        <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
+          <span class=\\"components-label-name\\">
+            job:
+          </span>
+          <span class=\\"components-label-value\\">
+            node_exporter
+          </span>
         </span>
-      </span>
-    </li>
-    <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-      <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
-        <span class=\\"components-label-name\\">
-          job:
+      </li>
+      <li class=\\"list-group-item px-0 pt-2 pb-1\\">
+        <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
+          <span class=\\"components-label-name\\">
+            instance:
+          </span>
+          <span class=\\"components-label-value\\">
+            server1
+          </span>
         </span>
-        <span class=\\"components-label-value\\">
-          node_exporter
+      </li>
+      <li class=\\"list-group-item px-0 pt-2 pb-1\\">
+        <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
+          <span class=\\"components-label-name\\">
+            cluster:
+          </span>
+          <span class=\\"components-label-value\\">
+            prod
+          </span>
         </span>
-      </span>
-    </li>
-    <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-      <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
-        <span class=\\"components-label-name\\">
-          instance:
-        </span>
-        <span class=\\"components-label-value\\">
-          server1
-        </span>
-      </span>
-    </li>
-    <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-      <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
-        <span class=\\"components-label-name\\">
-          cluster:
-        </span>
-        <span class=\\"components-label-value\\">
-          prod
-        </span>
-      </span>
-    </li>
-  </ul>
+      </li>
+    </ul>
+  </div>
 </div>
 "
 `;
diff --git a/ui/src/Components/LabelSetList/index.js b/ui/src/Components/LabelSetList/index.js
index 2dd272d3b..efb69ed22 100644
--- a/ui/src/Components/LabelSetList/index.js
+++ b/ui/src/Components/LabelSetList/index.js
@@ -61,28 +61,30 @@ const LabelSetList = observer(
       return labelsList.length > 0 ? (
         <div>
           <p className="lead text-center">Affected alerts</p>
-          <ul className="list-group list-group-flush mb-3">
-            {labelsList
-              .slice(
-                (this.pagination.activePage - 1) * this.maxPerPage,
-                this.pagination.activePage * this.maxPerPage
-              )
-              .map(labels => (
-                <li
-                  key={hash(labels)}
-                  className="list-group-item px-0 pt-2 pb-1"
-                >
-                  {Object.entries(labels).map(([name, value]) => (
-                    <StaticLabel
-                      key={name}
-                      alertStore={alertStore}
-                      name={name}
-                      value={value}
-                    />
-                  ))}
-                </li>
-              ))}
-          </ul>
+          <div>
+            <ul className="list-group list-group-flush mb-3">
+              {labelsList
+                .slice(
+                  (this.pagination.activePage - 1) * this.maxPerPage,
+                  this.pagination.activePage * this.maxPerPage
+                )
+                .map(labels => (
+                  <li
+                    key={hash(labels)}
+                    className="list-group-item px-0 pt-2 pb-1"
+                  >
+                    {Object.entries(labels).map(([name, value]) => (
+                      <StaticLabel
+                        key={name}
+                        alertStore={alertStore}
+                        name={name}
+                        value={value}
+                      />
+                    ))}
+                  </li>
+                ))}
+            </ul>
+          </div>
           {labelsList.length > this.maxPerPage ? (
             <div className="mt-3">
               <Pagination
diff --git a/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap b/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap
index fd966fc22..5b3c1c050 100644
--- a/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap
@@ -7,86 +7,88 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
     <p class=\\"lead text-center\\">
       Affected alerts
     </p>
-    <ul class=\\"list-group list-group-flush mb-3\\">
-      <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-        <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-dark components-label-dark\\">
-          <span class=\\"components-label-name\\">
-            alertname:
+    <div>
+      <ul class=\\"list-group list-group-flush mb-3\\">
+        <li class=\\"list-group-item px-0 pt-2 pb-1\\">
+          <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-dark components-label-dark\\">
+            <span class=\\"components-label-name\\">
+              alertname:
+            </span>
+            <span class=\\"components-label-value\\">
+              foo
+            </span>
           </span>
-          <span class=\\"components-label-value\\">
-            foo
+          <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
+            <span class=\\"components-label-name\\">
+              job:
+            </span>
+            <span class=\\"components-label-value\\">
+              foo
+            </span>
           </span>
-        </span>
-        <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
-          <span class=\\"components-label-name\\">
-            job:
+          <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
+            <span class=\\"components-label-name\\">
+              instance:
+            </span>
+            <span class=\\"components-label-value\\">
+              foo1
+            </span>
           </span>
-          <span class=\\"components-label-value\\">
-            foo
+        </li>
+        <li class=\\"list-group-item px-0 pt-2 pb-1\\">
+          <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-dark components-label-dark\\">
+            <span class=\\"components-label-name\\">
+              alertname:
+            </span>
+            <span class=\\"components-label-value\\">
+              bar
+            </span>
           </span>
-        </span>
-        <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
-          <span class=\\"components-label-name\\">
-            instance:
+          <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
+            <span class=\\"components-label-name\\">
+              job:
+            </span>
+            <span class=\\"components-label-value\\">
+              bar
+            </span>
           </span>
-          <span class=\\"components-label-value\\">
-            foo1
+          <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
+            <span class=\\"components-label-name\\">
+              instance:
+            </span>
+            <span class=\\"components-label-value\\">
+              bar1
+            </span>
           </span>
-        </span>
-      </li>
-      <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-        <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-dark components-label-dark\\">
-          <span class=\\"components-label-name\\">
-            alertname:
+        </li>
+        <li class=\\"list-group-item px-0 pt-2 pb-1\\">
+          <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-dark components-label-dark\\">
+            <span class=\\"components-label-name\\">
+              alertname:
+            </span>
+            <span class=\\"components-label-value\\">
+              bar
+            </span>
           </span>
-          <span class=\\"components-label-value\\">
-            bar
+          <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
+            <span class=\\"components-label-name\\">
+              job:
+            </span>
+            <span class=\\"components-label-value\\">
+              bar
+            </span>
           </span>
-        </span>
-        <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
-          <span class=\\"components-label-name\\">
-            job:
+          <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
+            <span class=\\"components-label-name\\">
+              instance:
+            </span>
+            <span class=\\"components-label-value\\">
+              bar2
+            </span>
           </span>
-          <span class=\\"components-label-value\\">
-            bar
-          </span>
-        </span>
-        <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
-          <span class=\\"components-label-name\\">
-            instance:
-          </span>
-          <span class=\\"components-label-value\\">
-            bar1
-          </span>
-        </span>
-      </li>
-      <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-        <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-dark components-label-dark\\">
-          <span class=\\"components-label-name\\">
-            alertname:
-          </span>
-          <span class=\\"components-label-value\\">
-            bar
-          </span>
-        </span>
-        <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
-          <span class=\\"components-label-name\\">
-            job:
-          </span>
-          <span class=\\"components-label-value\\">
-            bar
-          </span>
-        </span>
-        <span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
-          <span class=\\"components-label-name\\">
-            instance:
-          </span>
-          <span class=\\"components-label-value\\">
-            bar2
-          </span>
-        </span>
-      </li>
-    </ul>
+        </li>
+      </ul>
+    </div>
   </div>
 </div>
 "