ATLAS-3628 : Beta UI: Wildcard Search for classifications doesn't fire any search

dashboardv3/public/css/scss/leftsidebar.scss

@@ -207,11 +207,29 @@
                     span {
                         color: #fff !important;
                     }
+
+                    .clear-icon {
+                        color: $color_ironside_gray_approx !important;
+                    }
+
+                    .wildcard-btn {
+                        color: $color_jungle_green_approx !important;
+                    }
+                }
+
+                .wildcard-btn {
+                    margin: 0px;
+                    color: $color_jungle_green_approx !important;
+                }
+
+                .wildcard-btn:hover {
+                    margin: 0px;
+                    color: $white !important;
                 }
 
                 input {
                     color: $color_ironside_gray_approx !important;
-                    width: 150px;
+                    width: 130px;
                     display: inline-block;
                 }
 
@@ -219,7 +237,8 @@
                     background-color: #fff;
                 }
 
-                &:hover .clear-icon {
+
+                .clear-icon {
                     color: $color_ironside_gray_approx !important;
                 }
 
@@ -237,12 +256,23 @@
             .clear-icon {
                 color: $color_ironside_gray_approx !important;
                 position: absolute;
-                top: 30%;
-                right: 12px;
+                z-index: 3;
+                top: 29%;
+                right: 48px;
+            }
+
+            .has-feedback input {
+                padding: 6px 25px 6px 6px;
+
+            }
+
+            .has-feedback input:focus {
+                border-color: $color_havelock_blue_approx !important;
+
             }
 
-            .has-feedback .form-control {
-                padding: 6px 12px;
+            .wildcard-search:hover {
+                background-color: $white;
             }
         }
 

dashboardv3/public/js/templates/search/tree/ClassificationTreeLayoutView_tmpl.html

@@ -34,14 +34,18 @@
                     </li>
                     <li data-id="createTag" data-type="classification"> <i class="fa fa-plus"></i><span>Create Classification</span>
                     </li>
-                    <li data-id="wildCardClick" data-type="classification">
+                    <li class="wildcard-search" data-type="classification" data-id="wildCardContainer">
                         <div class="has-feedback align-left-right-icon search-box">
-                            <input type="text" class="form-control" name="wildcard search" placeholder="Wildcard search" data-id="wildCardValue" />
-                            <span class="fa fa-times clear-icon" data-id="clearWildCard"> </span>
+                            <div class="input-group">
+                                <input type="text" class="form-control" name="wildcard search" placeholder="Wildcard search" data-id="wildCardValue" />
+                                <span class="fa fa-times clear-icon" data-id="clearWildCard"> </span>
+                                <div class="input-group-btn">
+                                    <span class="btn  btn-md wildcard-btn btn-action" data-id="wildCardSearch" data-original-title="Wildcard Search"><i class="fa fa-search"></i></span>
+                                </div>
+                            </div>
                         </div>
                     </li>
-            </button>
-            </ul>
+                </ul>
             </button>
         </div>
     </div>

dashboardv3/public/js/views/search/tree/ClassificationTreeLayoutView.js

@@ -52,6 +52,7 @@ define([
             wildCardClick: '[data-id="wildCardClick"]',
             wildCardSearch: '[data-id="wildCardSearch"]',
             wildCardValue: '[data-id="wildCardValue"]',
+            wildCardContainer: '[data-id="wildCardContainer"]',
             clearWildCard: '[data-id="clearWildCard"]'
         },
         templateHelpers: function() {
@@ -69,7 +70,8 @@ define([
                 that.refresh({ type: type });
             };
 
-            events["click " + this.ui.createTag] = function() {
+            events["click " + this.ui.createTag] = function(e) {
+                e.stopPropagation();
                 that.onClickCreateTag();
             };
 
@@ -96,7 +98,9 @@ define([
             events["click " + this.ui.wildCardSearch] = function(e) {
                 e.stopPropagation();
                 var tagValue = this.ui.wildCardValue.val();
-                that.findSearchResult(tagValue);
+                if (tagValue.indexOf("*") != -1) {
+                    that.findSearchResult(tagValue);
+                }
             };
             events["click " + this.ui.wildCardValue] = function(e) {
                 e.stopPropagation();
@@ -104,8 +108,12 @@ define([
             events["click " + this.ui.clearWildCard] = function(e) {
                 e.stopPropagation();
                 that.ui.wildCardValue.val("");
+                that.ui.clearWildCard.addClass('hide-icon');
             }
-            events["keyup " + this.ui.wildCardValue] = function(e) {
+            events["click " + this.ui.wildCardContainer] = function(e) {
+                e.stopPropagation();
+            }
+            events["keydown " + this.ui.wildCardValue] = function(e) {
                 e.stopPropagation();
                 var code = e.which;
                 if (this.ui.wildCardValue.val().length > 0) {
@@ -114,14 +122,17 @@ define([
                     this.ui.clearWildCard.addClass('hide-icon');
                 }
                 if (code == 13) {
+                    e.preventDefault();
                     var tagValue = this.ui.wildCardValue.val();
                     if (tagValue.indexOf("*") != -1) {
                         that.findSearchResult(tagValue);
                     }
-
                 }
             };
-
+            events["keyup " + this.ui.wildCardValue] = function(e) {
+                e.stopPropagation();
+                e.preventDefault();
+            };
             return events;
         },
         initialize: function(options) {