From e8d5715e04fcfcc7012425e5b40507da1681cd35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 25 Mar 2019 21:24:55 -0700
Subject: [PATCH 1/4] fix(ui): use flex for ordering filter elements

---
 .../Labels/FilterInputLabel/index.css         |  2 +-
 .../Labels/FilterInputLabel/index.js          | 48 +++++++++----------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/ui/src/Components/Labels/FilterInputLabel/index.css b/ui/src/Components/Labels/FilterInputLabel/index.css
index 3de3f2cad..97fcc246d 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.css
+++ b/ui/src/Components/Labels/FilterInputLabel/index.css
@@ -22,5 +22,5 @@
 
 .badge.components-filteredinputlabel > .close {
   /* make close button bigger, to match font size of the badge */
-  font-size: 1rem;
+  font-size: 100%;
 }
diff --git a/ui/src/Components/Labels/FilterInputLabel/index.js b/ui/src/Components/Labels/FilterInputLabel/index.js
index 9f225b40d..db41f6050 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.js
+++ b/ui/src/Components/Labels/FilterInputLabel/index.js
@@ -56,32 +56,18 @@ const FilterInputLabel = observer(
           f => f.hits !== alertStore.info.totalAlerts
         ).length > 0;
 
+      const rootClasses = filter.applied
+        ? cs.className
+        : [
+            "badge-secondary components-filteredinputlabel",
+            ...cs.baseClassNames
+          ].join(" ");
+
       return (
         <span
-          className={
-            filter.applied
-              ? cs.className
-              : [
-                  "badge-secondary components-filteredinputlabel",
-                  ...cs.baseClassNames
-                ].join(" ")
-          }
+          className={`${rootClasses} d-inline-flex flex-row`}
           style={cs.style}
         >
-          <button
-            type="button"
-            className="close ml-1"
-            style={cs.style}
-            onClick={() => alertStore.filters.removeFilter(filter.raw)}
-          >
-            <span
-              className={`align-text-bottom ${cs.colorClassNames
-                .filter(c => !c.match(/badge-/))
-                .join(" ")}`}
-            >
-              &times;
-            </span>
-          </button>
           {filter.isValid ? (
             filter.applied ? (
               showCounter ? (
@@ -99,9 +85,9 @@ const FilterInputLabel = observer(
               <FontAwesomeIcon icon={faExclamationCircle} />
             </span>
           )}
-          <TooltipWrapper title="Click to edit this filter">
+          <TooltipWrapper title="Click to edit this filter" className="my-auto">
             <RIEInput
-              className={showCounter ? "" : "align-middle"}
+              className="align-middle"
               defaultValue=""
               value={filter.raw}
               propName="raw"
@@ -109,6 +95,20 @@ const FilterInputLabel = observer(
               classEditing="py-0 border-0 bg-light"
             />
           </TooltipWrapper>
+          <button
+            type="button"
+            className="close ml-1 align-middle"
+            style={cs.style}
+            onClick={() => alertStore.filters.removeFilter(filter.raw)}
+          >
+            <span
+              className={cs.colorClassNames
+                .filter(c => !c.match(/badge-/))
+                .join(" ")}
+            >
+              &times;
+            </span>
+          </button>
         </span>
       );
     }

From 7bd9cc641a061fadbe149107784a42b504d2982a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 26 Mar 2019 21:32:48 -0700
Subject: [PATCH 2/4] fix(ui): cleanup filter input css classes

---
 ui/src/Components/Labels/FilterInputLabel/index.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/src/Components/Labels/FilterInputLabel/index.css b/ui/src/Components/Labels/FilterInputLabel/index.css
index 97fcc246d..eb22f0467 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.css
+++ b/ui/src/Components/Labels/FilterInputLabel/index.css
@@ -11,9 +11,12 @@
   margin-bottom: 1px;
 }
 
-.badge.components-filteredinputlabel > .badge {
+.badge.components-filteredinputlabel > .badge,
+.badge.components-filteredinputlabel > svg {
   /* match outer badge font size */
   font-size: 90%;
+  line-height: 100%;
+  padding-bottom: 0.1em;
 
   /* we have badge inside a badge, make the inner one a little brighter
      in case both use same color classes */

From d4032ea816e7e057a71ae748a7eb934ccecf7104 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 26 Mar 2019 22:03:21 -0700
Subject: [PATCH 3/4] fix(ui): only set custom colors on filters that are
 applied

---
 ui/src/Components/Labels/FilterInputLabel/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/Components/Labels/FilterInputLabel/index.js b/ui/src/Components/Labels/FilterInputLabel/index.js
index db41f6050..ab1f05a5a 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.js
+++ b/ui/src/Components/Labels/FilterInputLabel/index.js
@@ -66,7 +66,7 @@ const FilterInputLabel = observer(
       return (
         <span
           className={`${rootClasses} d-inline-flex flex-row`}
-          style={cs.style}
+          style={filter.applied ? cs.style : {}}
         >
           {filter.isValid ? (
             filter.applied ? (
@@ -98,7 +98,7 @@ const FilterInputLabel = observer(
           <button
             type="button"
             className="close ml-1 align-middle"
-            style={cs.style}
+            style={filter.applied ? cs.style : {}}
             onClick={() => alertStore.filters.removeFilter(filter.raw)}
           >
             <span

From 07566c9e878f409fc6663f325ed01fc0851e559b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 26 Mar 2019 22:04:37 -0700
Subject: [PATCH 4/4] fix(ui): remove padding from the spinner

When filter is not yet applied we draw a spinner icon that uses badge class on the parent element, remove padding from parent so we don't end up resizing parent
---
 ui/src/Components/Labels/FilterInputLabel/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/Components/Labels/FilterInputLabel/index.js b/ui/src/Components/Labels/FilterInputLabel/index.js
index ab1f05a5a..9256a066f 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.js
+++ b/ui/src/Components/Labels/FilterInputLabel/index.js
@@ -76,7 +76,7 @@ const FilterInputLabel = observer(
                 </span>
               ) : null
             ) : (
-              <span className="badge mr-1">
+              <span className="badge mr-1 p-0">
                 <FontAwesomeIcon icon={faSpinner} spin />
               </span>
             )