ATLAS-3282 : UI : use search suggestions API for quick-search

dashboardv2/public/css/bootstrap-sidebar.css

@@ -59,7 +59,7 @@
 
 .sidebar-nav>li {
     line-height: 50px;
-    padding: 0 20px;
+    padding: 5px 20px;
     border-bottom: 1px #1c1e2a solid;
 }
 

dashboardv2/public/css/scss/common.scss

@@ -86,7 +86,7 @@
 
 .detail-page {
     .details-backbutton {
-        display: block !important;
+        display: table-cell !important;
     }
 }
 

dashboardv2/public/css/scss/theme.scss

@@ -25,50 +25,36 @@ body {
     overflow-x: hidden;
 }
 
-.detail-page {
-    header.atlas-header {
-        .nav.navbar-nav {
-            width: 16%;
-
-            @media screen and (max-width: 1024px) {
-                width: 24%;
-            }
-        }
-
-        .global-search-container {
-            width: 65%;
-
-            @media screen and (max-width: 1024px) {
-                width: 45%;
-            }
-        }
-    }
-}
-
 header.atlas-header {
     background-color: $white;
     border-bottom: 1px $color_mystic_approx solid;
 
-    .nav.navbar-nav {
-        width: 5%;
-    }
+    .navbar-nav {
+        display: table;
 
-    .global-search-container {
-        top: 8px;
-        width: 76%;
+        li {
+            float: none;
+            display: table-cell;
+            padding: 0px 5px;
 
-        @media screen and (max-width: 1024px) {
-            width: 65%;
         }
     }
 
-    .header-menu {
-        width: 18%;
+    &>table {
+        td {
+            padding: 3px 2px;
+            position: relative;
+            transition: width 0.3s !important;
 
-        @media screen and (max-width: 1024px) {
-            width: 30%;
+            .global-search-container {
+                width: input {
+                    width: 100%;
+                }
+            }
+        }
     }
 
+    .header-menu {
         .dropdown-menu>li>a {
             color: $color_ironside_gray_approx;
 
@@ -81,7 +67,7 @@ header.atlas-header {
             }
         }
 
-        >a {
+        td>a {
             display: inline-block;
             color: $color_ironside_gray_approx;
             padding: 15px 14px;
@@ -149,7 +135,7 @@ header.atlas-header {
 
 .page-title {
     background-color: $color_white_lilac_approx;
-    padding: 10px 15px 0px 15px;
+    padding: 15px 15px 0px 15px;
 
     .title {
         padding-top: 0;
@@ -480,6 +466,25 @@ hr[size="10"] {
 .ui-menu.ui-widget-content.ui-autocomplete {
     box-shadow: 0px 11px 30px -8px grey;
     max-width: 60% !important;
+    max-height: 70vh;
+    overflow-y: auto;
+    /* prevent horizontal scrollbar */
+    overflow-x: hidden;
+
+    .ui-autocomplete-category {
+        padding: 10px;
+        color: #acacac;
+        text-transform: capitalize;
+    }
+
+    li.empty {
+        padding: 5px 2px;
+        line-height: 45px;
+
+        span.empty-message {
+            padding: 10px;
+        }
+    }
 
     .ui-menu-item {
         padding: 5px 2px;
@@ -496,17 +501,9 @@ hr[size="10"] {
 
         .ui-state-active {
             margin: 0px;
-
-            &.empty {
-                background: transparent;
-                color: inherit !important;
-                cursor: default;
-            }
-
             border: none;
             background: #cee0fa;
             color: $black !important;
-            //color: #686868 !important;
         }
 
         a,

dashboardv2/public/js/templates/site/Header.html

@@ -15,20 +15,30 @@
  * limitations under the License.
 -->
 <header class="clearfix atlas-header">
+    <table>
+        <tr>
+            <td>
                 <ul class="nav navbar-nav">
                     <li>
                         <a href="javascript:void(0);" data-id="menuHamburger"><i class="fa fa-bars"></i></a>
                     </li>
                     <li class="details-backbutton"><a href="javascript:void(0);" data-id="backButton"><i class="fa fa-chevron-left"></i> Back To Results</a></li>
                 </ul>
-    <div class="form-group has-feedback align-left-right-icon search-box pull-left global-search-container">
+            </td>
+            <td class="global-search-container">
+                <div class="has-feedback align-left-right-icon search-box">
                     <span class="fa fa-search form-control-feedback"></span>
                     <input type="text" class="form-control global-search" name="global search" placeholder="Search entities" data-id="globalSearch" />
                     <span class="fa fa-times form-control-feedback clearable" data-id="clearGlobalSearch"></span>
                 </div>
-    <div class="btn-group pull-right header-menu">
-        <a class="show-stat" href="javascript:void(0);" title="Statistics"><i class="fa fa-bar-chart"></i></a>
-        <a target="_blank" href="http://atlas.apache.org/"><i class="fa  fa-question-circle"></i></a>
+            </td>
+            <td>
+                <!-- <div class="btn-group pull-right header-menu"> -->
+                <table class="header-menu">
+                    <tr>
+                        <td><a class="show-stat" href="javascript:void(0);" title="Statistics"><i class="fa fa-bar-chart"></i></a></td>
+                        <td><a target="_blank" href="http://atlas.apache.org/"><i class="fa  fa-question-circle"></i></a></td>
+                        <td>
                             <a href="javascript:void(0);" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="user-dropdown"><i class="fa fa-user user-circle "></i><span class="userName"></span></a>
                             <ul class="dropdown-menu">
                                 <li class="aboutAtlas"><a href="javascript:void(0)">About</a></li>
@@ -37,5 +47,10 @@
                                     <a href="logout.html"><i class="fa fa-sign-out"></i>Logout</a>
                                 </li>
                             </ul>
-    </div>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
 </header>
\ No newline at end of file

dashboardv2/public/js/utils/CommonViewFunction.js

@@ -688,7 +688,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
                 collection = options.collection,
                 isGlossaryView = options.isGlossaryView,
                 data = ref.ui[(isGlossaryView ? "glossaryForm" : "categoryTermForm")].serializeArray().reduce(function(obj, item) {
-                    obj[item.name] = item.value;
+                    obj[item.name] = item.value.trim();
                     return obj;
                 }, {}),
                 newModel = new options.collection.model(),

dashboardv2/public/js/utils/Helper.js

@@ -18,7 +18,8 @@
 define(['require',
     'utils/Utils',
     'd3',
-    'marionette'
+    'marionette',
+    'jquery-ui'
 ], function(require, Utils, d3) {
     'use strict';
     _.mixin({
@@ -201,6 +202,29 @@ define(['require',
             return adapter;
         });
 
+    $.widget("custom.atlasAutoComplete", $.ui.autocomplete, {
+        _create: function() {
+            this._super();
+            this.widget().menu("option", "items", "> :not(.ui-autocomplete-category,.empty)");
+        },
+        _renderMenu: function(ul, items) {
+            var that = this,
+                currentCategory = "";
+            items = _.sortBy(items, 'order');
+            $.each(items, function(index, item) {
+                var li;
+                if (item.category != currentCategory) {
+                    ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
+                    currentCategory = item.category;
+                }
+                that._renderItemData(ul, item);
+            });
+        },
+        _renderItemData: function(ul, item) {
+            return this._renderItem(ul, item);
+        }
+    });
+
     // For placeholder support 
     if (!('placeholder' in HTMLInputElement.prototype)) {
         var originalRender = Backbone.Marionette.LayoutView.prototype.render;

dashboardv2/public/js/views/graph/LineageUtils.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-define(['require', ''], function(require) {
+define(['require'], function(require) {
     'use strict';
     var LinegaeUtils = {};
     LinegaeUtils.DragNode = function(options) {