Merge pull request #287 from theseyi/feature/DSS-5477

Feature/dss 5477 + Typeahead fixes

web/app/views/index.scala.html

@@ -359,7 +359,8 @@
 
 <script type="text/x-handlebars" id="components/dataset-owner-list">
   {{#if owners}}
-    <header>Dataset is owned by</header>
+    <header>
+      Owners:
       <ul>
         {{#each owners as |owner|}}
           <li>
@@ -374,6 +375,12 @@
           </li>
         {{/each}}
       </ul>
+      {{#if ownersEmailList}}
+        <span>
+          <a title="Email all dataset owners" href="mailto: {{ownersEmailList}}">Ask a question?</a>
+        </span>
+      {{/if}}
+    </header>
   {{else}}
     No known owners for this dataset
   {{/if}}

web/app/views/main.scala.html

@@ -92,7 +92,7 @@
 							</ul>
 						</li>
 					</ul>
-					<form class="navbar-form navbar-left" role="search">
+					<form class="navbar-form navbar-left" role="search" id="nav-keyword-search-form">
 						<div class="row">
 							<div id="searchcategorybtngroup" class="btn-group" role="group">
 							    <button style="height: 30px;margin-right:-4px;"
@@ -177,6 +177,28 @@
 							</ul>
 						</li>
 					</ul>
+
+        <div class="nav nabar-nav navbar-right nav-help-menu dropdown">
+          <button class="nav-help-button dropdown-toggle"
+              type="button" id="nav-help-dropdown"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              title="WhereHows Help"
+              aria-expanded="true">
+                Help
+                <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
+                <i class="fa fa-angle-down" aria-hidden="true"></i>
+          </button>
+          <ul class="dropdown-menu" aria-labelledby="nav-help-dropdown">
+            <li>
+              <a href="https://iwww.corp.linkedin.com/wiki/cf/display/ENGS/Metadata+Coverage"
+                 title="Metadata Coverage"
+                 target="_blank">
+                     Metadata Coverage
+              </a>
+            </li>
+          </ul>
+        </div>
 				} else {
 					<form class="navbar-form navbar-right" method="POST"
 						action="@routes.Application.authenticate()?csrfToken=@csrfToken">

web/public/javascripts/components/components.js

@@ -168,7 +168,12 @@ App.DatasetImpactComponent = Ember.Component.extend({
 
 App.DatasetOwnerListComponent = Ember.Component.extend({
   tagName: 'section',
-  classNames: ['dataset-owner-list']
+  classNames: ['dataset-owner-list'],
+
+  ownersEmailList: Ember.computed('owners', function () {
+    // Reduce owner email to a string containing emails, each separated by comma
+    return this.get('owners').mapBy('email').filter(email => email).join(', ');
+  }),
 });
 
 App.DatasetAuthorComponent = Ember.Component.extend({

web/public/javascripts/search.js

@@ -1,10 +1,30 @@
-(function (window, $) {
+(function (global, $) {
+  const searchForm = document.querySelector('#nav-keyword-search-form');
+  const searchInput = searchForm.querySelector('#searchInput');
+
+  // Prevent `enter` key on single input from triggering default form action resulting in page reload
+  searchForm && searchForm.addEventListener('submit', e => e.preventDefault());
+
+  /**
+   * Implements handler for search functionality on Navigation Bar search form.
+   * Updates location hash which will trigger Ember Search route model refresh
+   * *Unfortunately current application model does not abide by Ember recommended approach, hence manual plumbing
+   * *will be refactored in eventual `purge`
+   */
+  const handleSearchInput = function () {
+    if (searchInput) {
+      const {value: keyword} = searchInput;
+      const searchRouteHash = `#/search?keywords=${btoa(keyword)}&category=${global.g_currentCategory}&source=default&page=1`;
+      keyword && (document.location.hash = searchRouteHash);
+    }
+  };
+
   $('#advsearchtabs').find('a:first').tab('show');
   $('#datasetAdvSearchLink').addClass('active');
   String.prototype.replaceAll = function (target, replacement) {
     return this.split(target).join(replacement);
   };
-  window.g_currentCategory = 'Datasets';
+  global.g_currentCategory = 'Datasets';
   function renderAdvSearchDatasetSources(parent, sources) {
     let content = '';
     if ((!parent) || (!sources) || sources.length == 0) {
@@ -67,7 +87,7 @@
         $(objs[index]).parent().removeClass('active');
       });
     }
-    window.g_currentCategory = e.target.text;
+    global.g_currentCategory = e.target.text;
     updateSearchCategories(e.target.text);
     //$(e.target).parent().addClass( 'active' );
     e.preventDefault();
@@ -147,7 +167,7 @@
 
         return false;
       }
-    }).on('autocompleteselect', () => document.querySelector('#searchBtn').click());
+    }).on('autocompleteselect', handleSearchInput);
   });
 
   $.get('/api/v1/advsearch/scopes', function (data) {
@@ -322,27 +342,10 @@
     });
   });
 
-  $('#searchBtn').click(function () {
+  document.querySelector('#searchBtn').addEventListener('click', handleSearchInput);
-    var inputObj = $('#searchInput');
-    if (inputObj) {
-      var keyword = inputObj.val();
-      if (keyword) {
-        window.location = '/#/search?keywords=' + btoa(keyword) +
-            '&category=' + window.g_currentCategory + '&source=default&page=1';
-
-        window._paq.push(['trackSiteSearch', keyword, window.g_currentCategory, false]);
-
-      }
-    }
-  });
 
   // This is a stop gap implementation to solve the issue with handling the enter key on user search
-  document.querySelector('#searchInput')
+  document.querySelector('#searchInput').addEventListener('keypress', e => e.keyCode === 13 && handleSearchInput(e));
-      .addEventListener('keypress', ({keyCode}) => {
-        if (keyCode === 13) {
-          document.querySelector('#searchBtn').click();
-        }
-      });
 
   function advSearchForDataset() {
     var empty = true;
@@ -429,7 +432,7 @@
     advSearchOpts.fields = {'any': fieldAny, 'all': fieldAll, 'not': fieldNotIn};
     advSearchOpts.comments = comments;
     advSearchOpts.sources = sources;
-    window.location = '/#/advsearch/?query=' + btoa(JSON.stringify(advSearchOpts)) + '&page=1';
+    global.location = '/#/advsearch/?query=' + btoa(JSON.stringify(advSearchOpts)) + '&page=1';
   }
 
   function advSearchForFlow() {
@@ -492,7 +495,7 @@
     advSearchOpts.appcode = {'in': appcodeIn, 'not': appcodeNotIn};
     advSearchOpts.flow = {'in': flowIn, 'not': flowNotIn};
     advSearchOpts.job = {'in': jobIn, 'not': jobNotIn};
-    window.location = '/#/advsearch/?query=' + btoa(JSON.stringify(advSearchOpts)) + '&page=1';
+    global.location = '/#/advsearch/?query=' + btoa(JSON.stringify(advSearchOpts)) + '&page=1';
   }
 
   $('#advSearchBtn').click(function () {

web/public/stylesheets/wherehows.css

@@ -96,6 +96,20 @@ a.dropdown-toggle:hover {
     color: inherit;
 }
 
+.nav-help-button {
+    height: 60px;
+    display: inline-block;
+    margin-bottom: 0;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    border: 1px solid transparent;
+    background: none;
+}
+
 /* Uncomment when ready to replace logo
 .navbar-header:before {
     content: url(/assets/images/icons/logo-white.png);
@@ -420,22 +434,16 @@ ul.breadcrumbs a {
 
 .dataset-owner-list {
     display: flex;
-    flex-direction: column;
-    max-width: 500px;
     padding: 15px 0;
 }
 
-.dataset-owner-list header {
-    font-size: 16px;
-}
-
 .dataset-owner-list ul {
-    display: flex;
+    display: inline-flex;
     list-style-type: none;
     padding: 0;
 }
 
 .dataset-owner-list li {
-    margin-right: 15px;
+    margin-right: 10px;
     line-height: 2;
 }