Merge pull request #183 from prymitive/fix-filter-label

fix(ui): use correct classes for not yet applied filters

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

@@ -3,7 +3,7 @@
 exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=false 1`] = `
 "
 <li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item pl-1 pr-0 py-0 my-1 rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-danger\\">
-  <div class=\\"mb-1\\">
+  <div>
     <div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation\\">
       <svg aria-hidden=\\"true\\"
            data-prefix=\\"fas\\"

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

@@ -47,7 +47,7 @@ const Alert = observer(
 
       return (
         <li className={classNames.join(" ")}>
-          <div className="mb-1">
+          <div>
             {alert.annotations.filter(a => a.isLink === false).map(a => (
               <RenderNonLinkAnnotation
                 key={a.name}

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

@@ -56,7 +56,10 @@ const FilterInputLabel = observer(
           className={
             filter.applied
               ? cs.className
-              : ["badge-secondary", ...cs.baseClassNames].join(" ")
+              : [
+                  "badge-secondary components-filteredinputlabel",
+                  ...cs.baseClassNames
+                ].join(" ")
           }
           style={cs.style}
         >
@@ -67,7 +70,9 @@ const FilterInputLabel = observer(
             onClick={() => alertStore.filters.removeFilter(filter.raw)}
           >
             <span
-              className={`align-text-bottom ${cs.colorClassNames.join(" ")}`}
+              className={`align-text-bottom ${cs.colorClassNames
+                .filter(c => !c.match(/badge-/))
+                .join(" ")}`}
             >
               &times;
             </span>
@@ -78,7 +83,7 @@ const FilterInputLabel = observer(
                 {filter.hits}
               </span>
             ) : (
-              <span className="mr-1">
+              <span className="badge mr-1">
                 <FontAwesomeIcon icon={faSpinner} spin />
               </span>
             )
@@ -93,7 +98,6 @@ const FilterInputLabel = observer(
               value={filter.raw}
               propName="raw"
               change={this.onChange}
-              className={cs.colorClassNames.join(" ")}
               classEditing="py-0 border-0 bg-light"
             />
           </TooltipWrapper>