Tag filters in search (#10521)

* tag filter: initial react component

* dashboard: move tag filter to filterbox

* tag filter: customize value rendering

* tag filter: get color from name

* tag filter:  custom option renderer

* tag filter: mode with tags in different container

* tag filter: refactor

* refactoring PR #10519

* tag filter: refactor of PR #10521

public/sass/base/_type.scss

@@ -413,4 +413,5 @@ a.external-link {
 .highlight-search-match {
   background: transparent;
   color: $yellow;
+  padding: 0;
 }

public/sass/components/_form_select_box.scss

@@ -26,18 +26,41 @@ $select-menu-box-shadow: $menu-dropdown-shadow;
   @include box-shadow($shadow);
 }
 
+// react-select tweaks
 .gf-form-input--form-dropdown {
   padding: 0;
   border: 0;
   overflow: visible;
 
   .Select-placeholder {
-    color: $gray-4;
+    color: $input-color-placeholder;
   }
 
   > .Select-control {
     @include select-control();
     border-color: $dark-3;
+
+    input {
+      min-width: 1rem;
+    }
+
+    .Select-clear,
+    .Select-arrow {
+      margin-right: 8px;
+    }
+
+    .Select-value {
+      display: inline-block;
+      padding: 2px 4px;
+      font-size: $font-size-base * 0.846;
+      font-weight: bold;
+      line-height: 14px; // ensure proper line-height if floated
+      color: $white;
+      vertical-align: baseline;
+      white-space: nowrap;
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+      background-color: $gray-1;
+    }
   }
 
   &.is-open > .Select-control {
@@ -50,6 +73,11 @@ $select-menu-box-shadow: $menu-dropdown-shadow;
     @include select-control-focus();
   }
 
+  &.is-focused:not(.is-open) > .Select-control {
+    background-color: $input-bg;
+    @include select-control-focus();
+  }
+
   .Select-menu-outer {
     border: 0;
     width: auto;

public/sass/components/_gf-form.scss

@@ -51,6 +51,11 @@ $input-border: 1px solid $input-border-color;
       color: $text-muted;
     }
   }
+
+  .Select--multi .Select-multi-value-wrapper,
+  .Select-placeholder {
+    padding-left: 30px;
+  }
 }
 
 .gf-form-disabled {

public/sass/components/_search.scss

@@ -26,7 +26,7 @@
   box-shadow: $navbarShadow;
   position: relative;
 
-  input {
+  & > input {
     max-width: 653px;
     //padding: 0.5rem 1.5rem 0.5rem 0;
     padding: 1rem 1rem 0.75rem 1rem;
@@ -38,6 +38,13 @@
     background-color: $navbarButtonBackground;
     flex-grow: 10;
   }
+
+  // .tag-filter {
+  //   .Select-control {
+  //     width: 300px;
+  //     background-color: $navbarBackground;
+  //   }
+  // }
 }
 
 .search-field-spacer {
@@ -67,13 +74,16 @@
   flex-grow: 1;
   height: 100%;
   padding-top: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
 .search-filter-box {
   background: $search-filter-box-bg;
   border-radius: 2px;
   padding: $spacer*1.5;
-  max-width: 340px;
+  min-width: 340px;
   margin-bottom: $spacer * 1.5;
   margin-left: $spacer * 1.5;
 }

public/sass/components/_tags.scss

@@ -21,7 +21,7 @@
   border-radius: 3px;
   text-shadow: none;
   font-size: 13px;
-  padding: 2px 6px;
+  padding: 3px 6px 1px 6px;
   border-width: 1px;
   border-style: solid;
   box-shadow: 0 0 1px rgba($white, 0.2);

public/sass/components/_tagsinput.scss

@@ -21,16 +21,15 @@
     margin-right: 2px;
     color: white;
 
-    [data-role="remove"] {
+    [data-role='remove'] {
       margin-left: 8px;
       cursor: pointer;
       &::after {
-        content: "x";
+        content: 'x';
         padding: 0px 2px;
       }
       &:hover {
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
-          0 1px 2px rgba(0, 0, 0, 0.05);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
         &:active {
           box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
         }
@@ -38,3 +37,51 @@
     }
   }
 }
+
+.tag-filter {
+  line-height: 22px;
+  flex-grow: 1;
+
+  .label-tag {
+    margin-left: 6px;
+    font-size: 11px;
+    cursor: pointer;
+
+    .fa.fa-remove {
+      margin-right: 3px;
+    }
+  }
+
+  .tag-filter-option {
+    position: relative;
+    text-align: left;
+    width: 100%;
+    display: block;
+    border-radius: 0;
+  }
+
+  .tag-count-label {
+    margin-left: 3px;
+  }
+
+  .gf-form-input--form-dropdown {
+    .Select-menu-outer {
+      border: 0;
+      width: 100%;
+    }
+  }
+}
+
+.tag-filter-values {
+  display: inline;
+
+  .label-tag {
+    margin: 6px 6px 0px 0px;
+    font-size: 11px;
+    cursor: pointer;
+
+    .fa.fa-remove {
+      margin-right: 3px;
+    }
+  }
+}