[RFC] Re-enable search input

app/components/search-input.js

@@ -1,4 +1,3 @@
-import { later } from '@ember/runloop';
 import { denodeify } from 'rsvp';
 import { A } from '@ember/array';
 import { alias } from '@ember/object/computed';
@@ -9,6 +8,7 @@ import set from 'ember-metal/set';
 import { task, timeout } from 'ember-concurrency';
 
 const SEARCH_DEBOUNCE_PERIOD = 300;
+const SEARCH_CLOSE_PERIOD = 200;
 
 export default Component.extend({
   // Public API
@@ -19,7 +19,7 @@ export default Component.extend({
   // Private API
   classNames: ['search-input'],
   _projectService: service('project'),
-  _projectVersion: alias('_projectService.standardisedVersion'),
+  _projectVersion: alias('_projectService.version'),
   _results: A(),
   _focused: false,
   _resultTetherConstraints: [
@@ -37,18 +37,25 @@ export default Component.extend({
     const projectVersion = get(this, '_projectVersion');
 
     // Hide and don't run query if there's no search query
-    // if (!query) {
-    //   return set(this, '_focused', false);
-    // }
+    if (!query) {
+      return set(this, '_focused', false);
+    }
+
+    // ensure search results are visible if the menu was previously closed above
+    set(this, '_focused', true);
 
     const params = {
       hitsPerPage: 15,
-      restrictSearchableAttributes: ['hierarchy.lvl0', 'hierarchy.lvl1', 'hierarchy.lvl2', 'hierarchy.lvl3', 'hierarchy.lvl4'],
-      facetFilters: [[`version:${projectVersion}`,'tags:api']]
+      restrictSearchableAttributes: [
+        'hierarchy.lvl0',
+        'hierarchy.lvl1',
+        'hierarchy.lvl2'
+      ],
+      tagFilters: [`version:${projectVersion}`]
     };
 
     const searchObj = {
-      indexName: 'emberjs_versions',
+      indexName: 'methods',
       query
     };
 
@@ -61,16 +68,20 @@ export default Component.extend({
       .addObjects(results);
   }).restartable(),
 
+  closeMenu: task(function * () {
+    yield timeout(SEARCH_CLOSE_PERIOD);
+
+    set(this, '_focused', false);
+  }),
+
   actions: {
 
     onfocus() {
       set(this, '_focused', true);
     },
 
     onblur() {
-      later(this, function () {
-        set(this, '_focused', false);
-      }, 200);
+      this.get('closeMenu').perform();
     }
 
   }

app/components/search-input/dropdown-result.js

@@ -12,7 +12,15 @@ export default Component.extend({
   // Private API
   classNames: ['ds-suggestion'],
   attributeBindings: ['role'],
+  url: computed('result.{project,class,module,name}', function() {
+    const project = this.get('result.project') || 'ember';
+    const versionTag = this.get('result._tags').find(_tag => _tag.indexOf('version:') > -1);
+    const versionSegments = versionTag.replace('version:', '').split('.');
+    const methodClass = this.get('result.class');
+    const methodName = this.get('result.name');
 
+    return `/${project}/${versionSegments[0]}.${versionSegments[1]}/classes/${methodClass}?anchor=${methodName}`;
+  }),
   // Left sidebar should only be displayed for the first result in the group
   _primaryColumn: computed('groupPosition,groupName', function () {
     const { groupName, groupPosition } = this.getProperties('groupName', 'groupPosition');

app/components/search-input/dropdown.js

@@ -14,7 +14,6 @@ export default Component.extend({
   classNames: ['ds-dropdown-menu','ds-with-1'],
   attributeBindings: ['role'],
 
-
   // Massage data to make it easier for displaying on the template
   // Returned object:
   /**

app/services/project.js

@@ -1,16 +1,8 @@
-import { computed } from '@ember/object';
 import Service from '@ember/service';
-import get from 'ember-metal/get';
 
 export default Service.extend({
   version: '0.0.0',
 
-  standardisedVersion: computed('version', function () {
-    const version = String(get(this, 'version'));
-    const versionFragments = version.split('.');
-    return `v${versionFragments[0]}.${versionFragments[1]}.0`;
-  }),
-
   setVersion(version) {
     this.set('version', version);
   },

app/templates/application.hbs

@@ -10,9 +10,9 @@
       <li><a href="/community">Community</a></li>
       <li><a href="/blog">Blog</a></li>
       <li><a href="/builds">Builds</a></li>
-      {{!--<li class="header-search">
+      <li class="header-search">
         {{search-input}}
-      </li>--}}
+      </li>
     </ul>
   </nav>
 </header>

app/templates/components/search-input.hbs

@@ -5,7 +5,7 @@
   oninput={{perform search value='target.value'}}
   onfocus={{action 'onfocus'}}
   onblur={{action 'onblur'}}
-  placeholder="Search the guides"
+  placeholder="Search"
   >
 
 {{!-- Search results dropdown --}}

app/templates/components/search-input/dropdown-result.hbs

@@ -5,7 +5,7 @@
       <span class="algolia-docsearch-suggestion--subcategory-column-text">{{_primaryColumn}}</span>
     </div>
     <div class="algolia-docsearch-suggestion--content">
-      <a href={{result.url}}>
+      <a href={{url}}>
         <div class="algolia-docsearch-suggestion--subcategory-inline">
           {{!-- Sometimes hierarchy lvl1 is null, fall-back to lvl0 --}}
           {{#if result._highlightResult.hierarchy.lvl1}}

config/environment.js

@@ -1,7 +1,7 @@
 /* eslint-env node */
 module.exports = function(environment) {
-  let ALGOLIA_APP_ID = process.env.ALGOLIA_APP_ID || 'BH4D9OD16A';
-  let ALGOLIA_API_KEY = process.env.ALGOLIA_API_KEY || '760969ef081fcadc7e0e60faefdb0907';
+  let ALGOLIA_APP_ID = process.env.ALGOLIA_APP_ID || 'Y1OMR4C7MF';
+  let ALGOLIA_API_KEY = process.env.ALGOLIA_API_KEY || 'c35425b69b31be1bb4786f0a72146306';
 
   let ENV = {
     modulePrefix: 'ember-api-docs',
@@ -75,7 +75,7 @@ module.exports = function(environment) {
   ENV.contentSecurityPolicy = {
     "default-src": "'self' *.fastly.net",
     "connect-src": "'self' *.algolia.net *.algolianet.com *.fastly.net",
-    "script-src": "'self' unsafe-inline use.typekit.net 'sha256-LEXBvGgYbhXJLZxA/dKnIx07iQsbEcS9SDWq01pWVAk=' *.fastly.net https://www.google-analytics.com",
+    "script-src": "'self' 'unsafe-inline' use.typekit.net 'sha256-lKBtcUDKd1YsXApz3zgfFp4g7TuIVPSsYg/ic+77Ljo=' *.fastly.net https://www.google-analytics.com",
     "font-src": "'self' data://* https://fonts.gstatic.com  *.fastly.net",
     "img-src": "'self' data://*  *.fastly.net https://www.google-analytics.com",
     "style-src": "'self' 'unsafe-inline' https://fonts.googleapis.com  *.fastly.net"