Merge pull request #222 from ember-learn/69/update-search-indexer

Update search indexer

Author: samselikoff

addon/components/docs-header/search-box/component.js

@@ -2,9 +2,16 @@ import Component from '@ember/component';
 import layout from './template';
 import { EKMixin, keyUp } from 'ember-keyboard';
 import { on } from '@ember/object/evented';
+import { task } from 'ember-concurrency';
+import config from 'dummy/config/environment';
+import { inject as service } from '@ember/service';
+
+const projectName = config['ember-cli-addon-docs'].projectName;
 
 export default Component.extend(EKMixin, {
   layout,
+  store: service(),
+
   classNames: 'ad-ml-auto',
 
   query: null,
@@ -13,8 +20,18 @@ export default Component.extend(EKMixin, {
     this._super();
 
     this.set('keyboardActivated', true);
+    this.get('fetchProject').perform();
   },
 
+  // TODO: The searchbox doesn't work without the project being fetched.
+  // We should move this logic (and everywhere else in the code that's fetching
+  // the project) within a new addonDocs service that wires all that up together.
+  // I think it's fine if our Docs-* components assume there is a single global
+  // project.
+  fetchProject: task(function*() {
+    yield this.get('store').findRecord('project', projectName);
+  }),
+
   focusSearch: on(keyUp('Slash'), function() {
     this.element.querySelector('input').focus();
   }),

addon/components/docs-header/search-box/styles.scss

@@ -10,6 +10,7 @@
   <input oninput={{action on-input value='target.value'}}
     value={{query}}
     type="text"
+    disabled={{fetchProject.isRunning}}
     placeholder='Search'
     class='ad-w-24 ad-text-xs ad-p-2 ad-pl-6 ad-rounded focus:ad-bg-grey-lighter outline-none'
     data-search-box-input

addon/components/docs-header/search-box/template.hbs

@@ -14,8 +14,9 @@ export default Component.extend({
     let type = this.get('result.document.type');
     if (type === 'template') {
       args = [ this.get('result.document.route') ];
-    } else if (type === 'class') {
-      args = [ 'docs.api.class', this.get('result.document.class.id') ];
+
+    } else {
+      args = [ 'docs.api.item', this.get('result.model.routingId') ];
     }
 
     return args;
@@ -32,7 +33,7 @@ export default Component.extend({
     if (this.get('result.document.type') === 'template') {
       return 'guide';
     } else {
-      return 'class';
+      return 'api-item';
     }
   }),
 
@@ -80,7 +81,7 @@ export default Component.extend({
   }),
 
   _highlight(text, start, length) {
-    return `${text.slice(0, start)}<em class='docs-viewer-search__result-item__text--emphasis'>${text.slice(start, start + length)}</em>${text.slice(start + length)}`;
+    return `${text.slice(0, start)}<em class='ad-bg-yellow'>${text.slice(start, start + length)}</em>${text.slice(start + length)}`;
   },
 
   'data-test-search-result': true,

addon/components/docs-header/search-result/component.js

@@ -1,15 +1,17 @@
 {{#link-to
   params=linkArgs
   class=(concat
-    "docs-viewer-search__result-item "
-    (if selected "docs-viewer-search__result-item--selected")
+    "ad-block ad-py-2 ad-px-3 ad-text-black ad-no-underline hover:ad-bg-grey-lighter "
+    (if selected "ad-bg-grey-lighter")
   )
 }}
-  <div class="docs-viewer-search__result-item__label">
-    {{svg-jar icon height=28 width=28 class="docs-viewer-search__result-icon"}}
-    {{result.document.title}}
+  <div class="ad-flex ad-items-center">
+    {{svg-jar icon height=28 width=28 class="ad-mr-2 ad-flex-no-shrink"}}
+    <span class='ad-truncate'>
+      {{result.document.title}}
+    </span>
   </div>
-  <small class='docs-viewer-search__result-item__text'>
+  <small class='ad-text-grey-dark ad-inline-block'>
     {{{matches}}}
   </small>
 {{/link-to}}

addon/components/docs-header/search-result/template.hbs

@@ -5,12 +5,16 @@ import { EKMixin, keyUp, keyDown } from 'ember-keyboard';
 import { on } from '@ember/object/evented';
 import { computed } from '@ember/object';
 import { task } from 'ember-concurrency';
+import config from 'dummy/config/environment';
+
+const projectName = config['ember-cli-addon-docs'].projectName;
 
 export default Component.extend(EKMixin, {
   layout,
 
   docsSearch: service(),
   router: service(),
+  store: service(),
 
   query: null, // passed in
   selectedIndex: null,
@@ -30,6 +34,10 @@ export default Component.extend(EKMixin, {
     this.get('search').perform();
   },
 
+  project: computed(function() {
+    return this.get('store').peekRecord('project', projectName);
+  }),
+
   trimmedQuery: computed('query', function() {
     return this.get('query').trim();
   }),
@@ -51,17 +59,44 @@ export default Component.extend(EKMixin, {
     let routerMicrolib = router._router._routerMicrolib || router._router.router;
 
     if (rawSearchResults) {
-      let filteredSearchResults = this.get('rawSearchResults')
+      return this.get('rawSearchResults')
+        // If the doc has a route, ensure it exists
         .filter(({ document }) => {
-          let routeExists = routerMicrolib.recognizer.names[document.route];
-          return routeExists && document.route !== 'not-found';
+          if (document.route) {
+            let routeExists = routerMicrolib.recognizer.names[document.route];
+
+            return routeExists && document.route !== 'not-found' && document.route !== 'application';
+          } else {
+            return true;
+          }
         })
+
+        // Filter out the templates of the API items' pages, since we handle them separately
         .filter(({ document }) => {
-          let isClassTemplate = (document.route === 'docs.api.class' && document.type === 'template');
-          return !isClassTemplate;
-        });
+          let isApiItemTemplate = (document.route === 'docs.api.item' && document.type === 'template');
+          return !isApiItemTemplate;
+        })
+
+        // Filter out modules that are not in the navigationIndex
+        .filter(({ document }) => {
+          if (document.type === 'module') {
+            let navigableModules = this.get('project.navigationIndex.modules').map(x => x.name);
+            return navigableModules.includes(document.title);
+          } else {
+            return true;
+          }
+        })
+
+        // Add a reference to the Ember Data model to each API item search result
+        .map(searchResult => {
+          let { document } = searchResult;
+          if (document.type !== 'template') {
+            let store = this.get('store');
+            searchResult.model = store.peekRecord(document.type, document.item.id)
+          }
 
-      return filteredSearchResults;
+          return searchResult;
+        });
     }
   }),
 
@@ -70,8 +105,8 @@ export default Component.extend(EKMixin, {
       let selectedResult = this.get('searchResults')[this.get('selectedIndex')];
       if (selectedResult.document.type === 'template') {
         this.get('router').transitionTo(selectedResult.document.route);
-      } else if (selectedResult.document.type === 'class') {
-        this.get('router').transitionTo('docs.api.class', selectedResult.document.class.id);
+      } else {
+        this.get('router').transitionTo('docs.api.item', selectedResult.model.get('routingId'));
       }
     }
 

addon/components/docs-header/search-results/component.js

@@ -6,7 +6,8 @@
     onClose=(action 'clearSearch')
     targetAttachment='bottom left'
     constraints=(array (hash to='window' attachment='together' pin=true))}}
-    <ul class="docs-viewer-search__result-list" data-test-search-result-list>
+
+    <ul class="ad-w-76 ad-bg-white ad-shadow-md ad-list-reset" data-test-search-result-list>
       {{#each (take 5 searchResults) as |result index|}}
         <li>
           {{docs-header/search-result
@@ -17,10 +18,11 @@
             on-click=(action 'clearSearch')}}
         </li>
       {{else}}
-        <li class='docs-viewer-search__result-item docs-viewer-search__result-item--disabled'>
+        <li class='ad-block ad-py-1 ad-px-3 ad-text-grey-dark ad-no-underline'>
           No results.
         </li>
       {{/each}}
     </ul>
+
   {{/modal-dialog}}
 {{/if}}

addon/components/docs-header/search-results/template.hbs

@@ -1,5 +1,7 @@
 import DS from 'ember-data';
 import { filterBy, or } from '@ember/object/computed';
+import { dasherize } from '@ember/string';
+import { computed } from '@ember/object';
 
 import Class from './class';
 import { memberUnion, hasMemberType } from '../utils/computed';
@@ -61,5 +63,17 @@ export default Class.extend({
     function(member) {
       return member.tags && member.tags.find(t => t.name === 'deprecated');
     }
-  )
+  ),
+
+  /*
+    This gives us a way to link to a model, since we don't always link by the actual ID:
+
+      {{link-to 'item' model.routingId}}
+
+    Possible refactoring is to always link by actual ID, and implement redirects.
+  */
+  routingId: computed('name', function() {
+    return `components/${dasherize(this.get('name'))}`;
+  })
+
 });

addon/models/component.js

@@ -1,4 +1,5 @@
 import DS from 'ember-data';
+import { computed } from '@ember/object';
 
 const { attr, hasMany } = DS;
 
@@ -8,5 +9,17 @@ export default DS.Model.extend({
   functions: attr(),
 
   classes: hasMany('class', { async: false, }),
-  components: hasMany('class', { async: false, })
+  components: hasMany('class', { async: false, }),
+
+  /*
+    This gives us a way to link to a model, since we don't always link by the actual ID:
+
+      {{link-to 'item' model.routingId}}
+
+    Possible refactoring is to always link by actual ID, and implement redirects.
+  */
+  routingId: computed('id', function() {
+    return `modules/${this.get('id')}`;
+  })
+
 });

addon/models/module.js

@@ -34,6 +34,7 @@ export default {
   '32': '8rem',
   '48': '12rem',
   '64': '16rem',
+  '76': '19rem',
   '1/2': '50%',
   '1/3': '33.33333%',
   '2/3': '66.66667%',