Experiments with passing helpers

app/components/repository-filter.js

@@ -3,6 +3,7 @@ import { task, timeout } from 'ember-concurrency';
 import config from 'travis/config/environment';
 import { service } from 'ember-decorators/service';
 import { computed, action } from 'ember-decorators/object';
+import fuzzyMatch from 'travis/utils/fuzzy-match';
 
 export default Ember.Component.extend({
   tagName: '',
@@ -41,4 +42,51 @@ export default Ember.Component.extend({
 
     this.set('filteredRepositories', repositories);
   }).restartable(),
+
+  computeSlug(slug, isFiltering, query) {
+    if (isFiltering) {
+      // TODO: we can't call html safe here on the entire string
+      return Ember.String.htmlSafe(fuzzyMatch(slug, query));
+    } else {
+      return slug;
+    }
+  },
+
+  computeOwnerLogin(slug, isFiltering, query) {
+    if (isFiltering) {
+      let result = fuzzyMatch(slug, query, '{{', '}}');
+      // we need to match the entire slug and then split it into 2, but we also
+      // need to take into account that the highlight might include the slash,
+      // for example travis-{{ci/foo}} if a user searches for ci/foo
+      let [owner, name] = result.split('/');
+      let match = owner.match(new RegExp('\{\{|\}\}', 'g'));
+      if (match && match.length % 2 === 1) {
+        // the number of parens is odd, we need to close
+        owner = `${owner}}}`
+      }
+      owner = owner.replace(new RegExp('{{', 'g'), '<b>').replace(new RegExp('}}', 'g'), '</b>')
+      return Ember.String.htmlSafe(owner);
+    } else {
+      return slug.split('/')[0];
+    }
+  },
+
+  computeRepoName(slug, isFiltering, query) {
+    if (isFiltering) {
+      let result = fuzzyMatch(slug, query, '{{', '}}');
+      // we need to match the entire slug and then split it into 2, but we also
+      // need to take into account that the highlight might include the slash,
+      // for example travis-{{ci/foo}} if a user searches for ci/foo
+      let [owner, name] = result.split('/');
+      let match = name.match(new RegExp('\{\{|\}\}', 'g'));
+      if (match && match.length % 2 === 1) {
+        // the number of parens is odd, we need to open
+        name = `{{${name}`
+      }
+      name = name.replace(new RegExp('{{', 'g'), '<b>').replace(new RegExp('}}', 'g'), '</b>')
+      return Ember.String.htmlSafe(name);
+    } else {
+      return slug.split('/')[1];
+    }
+  },
 });

app/controllers/dashboard/repositories.js

@@ -1,7 +1,7 @@
 import Ember from 'ember';
 import { task, taskGroup } from 'ember-concurrency';
 import { service } from 'ember-decorators/service';
-import { computed } from 'ember-decorators/object';
+import { computed, action } from 'ember-decorators/object';
 import dashboardRepositoriesSort from 'travis/utils/dashboard-repositories-sort';
 
 export default Ember.Controller.extend({
@@ -101,6 +101,17 @@ export default Ember.Controller.extend({
     return filteredAccount[0];
   },
 
+  @action
+  filterQuery(query) {
+    return this.get('store')
+      .query('repo', {
+        slug_matches: query,
+        sort_by: 'slug_match:desc',
+        limit: 10,
+        active: true
+      });
+  },
+
   actions: {
     selectOrg(org) {
       let login = Ember.isBlank(org) ? undefined : org.get('login');

app/templates/account.hbs

@@ -69,9 +69,9 @@
            <ul class="profile-repositorylist">
              {{#each filter.repositories as |repository|}}
                {{repository-status-toggle
-                 repository=repository
-                 isFiltering=filter.isFiltering
-                 query=filter.query}}
+                   repository=repository
+                   slug=(compute filter.computeSlug repository.slug filter.isFiltering filter.query)
+               }}
              {{else}}
                {{#if filter.isFiltering}}
                  <li>Sorry, no results found.</li>

app/templates/components/dashboard-row.hbs

@@ -1,3 +1,4 @@
+{{slug}}
 <div class="dash-head">
   <button {{action "starRepo"}} class="dash-star {{if repo.starred 'is-starred'}}" title="{{if repo.starred 'un'}}star this repo">
     {{svg-jar 'icon-star' class="icon--m"}}
@@ -10,8 +11,8 @@
 <div class="dash-body">
   <div class="dash-main">
     <header class="fade-out dash-header">
-      <h2 class="row-label">{{#link-to "owner" repo.owner.login title=repo.owner.login}}{{repo.owner.login}}{{/link-to}}</h2>
-      <h1 class="row-content">{{#link-to "repo" repo.owner.login repo.name title=repo.name}}{{repo.name}}{{/link-to}}</h1>
+      <h2 class="row-label">{{#link-to "owner" repo.owner.login title=repo.owner.login}}{{ownerLogin}}{{/link-to}}</h2>
+      <h1 class="row-content">{{#link-to "repo" repo.owner.login repo.name title=repo.name}}{{repoName}}{{/link-to}}</h1>
     </header>
 
   {{#if repo.active}}

app/templates/components/repository-filter.hbs

@@ -4,5 +4,8 @@
     isLoading=search.isRunning
     form=(component 'repository-filter-form' onSearch=(action 'onSearch'))
     query=lastQuery
+    computeSlug=computeSlug
+    computeOwnerLogin=computeOwnerLogin
+    computeRepoName=computeRepoName
   )
 }}

app/templates/components/repository-status-toggle.hbs

@@ -20,11 +20,7 @@
 
 {{#link-to "repo" repository.owner.login repository.name class="profile-repo"
   classNameBindings="admin:admin:non-admin"}}
-  {{#if isFiltering}}
-    {{fuzzy-highlight repository.slug query}}
-  {{else}}
-    {{repository.slug}}
-  {{/if}}
+  {{slug}}
   <span>{{repository.description}}</span>
 {{/link-to}}
 

app/templates/dashboard/repositories.hbs

@@ -9,7 +9,7 @@
       <h2 class="small-title">Starred repositories</h2>
       <ul class="repo-list">
       {{#each starredRepos as |repo|}}
-        {{dashboard-row repo=repo star=star unstar=unstar}}
+        {{dashboard-row ownerLogin=repo.owner.login repoName=repo.name repo=repo star=star unstar=unstar}}
       {{else}}
         <div class="starred-empty">
           {{svg-jar 'icon-star' class="icon--m"}} You can keep track of your favorite repositories here once you start starring!
@@ -18,19 +18,45 @@
       </ul>
     </section>
 
-    <section class="dashboard-section dashboard-active">
-      <h2 class="small-title">All active repositories</h2>
-      <ul class="repo-list">
-        {{#each filteredRepos as |repo|}}
-          {{dashboard-row repo=repo star=star unstar=unstar}}
-        {{else}}
-          {{no-repos}}
-        {{/each}}
-      </ul>
+    {{#repository-filter
+       repositories=filteredRepos
+       queryFunction=(action 'filterQuery') as |filter| }}
+      <section class="dashboard-section dashboard-active">
+        <h2 class="small-title">All active repositories</h2>
 
-      {{pagination-navigation collection=model.repos route="dashboard.repositories"}}
-    </section>
+        {{#component filter.form as |form|}}
+          {{#if features.repositoryFiltering}}
+            <div class="repository-filter">
+              <label>Filter repositories:</label>
+              {{component form.searchField}}
+            </div>
+          {{/if}}
+        {{/component}}
+
+       {{#if filter.isLoading}}
+         {{loading-indicator}}
+       {{else}}
+         <ul class="repo-list">
+           {{#each filter.repositories as |repo|}}
+           {{dashboard-row
+               ownerLogin=(compute filter.computeOwnerLogin repo.slug filter.isFiltering filter.query)
+               repoName=(compute filter.computeRepoName repo.slug filter.isFiltering filter.query)
+               repo=repo star=star unstar=unstar}}
+           {{else}}
+             {{#if filter.isFiltering}}
+               <li>Sorry, no results found.</li>
+             {{else}}
+               {{no-repos}}
+             {{/if}}
+           {{/each}}
+         </ul>
+       {{/if}}
 
+        {{#unless filter.isFiltering}}
+          {{pagination-navigation collection=model.repos route="dashboard.repositories"}}
+        {{/unless}}
+      </section>
+    {{/repository-filter}}
     <!-- <section class="dashboard-section dashboard-inactive">
       <h2 class="small-title">Inactive repositories</h2>
       <ul class="repo-list">

package.json

@@ -49,6 +49,7 @@
     "ember-cli-sri": "^2.1.0",
     "ember-cli-test-loader": "^2.1.0",
     "ember-cli-uglify": "^1.2.0",
+    "ember-composable-helpers": "^2.0.3",
     "ember-concurrency": "0.8.7",
     "ember-data": "2.15.0",
     "ember-data-filter": "1.13.0",
@@ -65,6 +66,7 @@
     "ember-percy": "1.2.13",
     "ember-prism": "0.1.0",
     "ember-qunit-nice-errors": "1.1.2",
+    "ember-reactive-helpers": "^0.5.0",
     "ember-resolver": "4.1.0",
     "ember-route-action-helper": "^2.0.3",
     "ember-router-service-polyfill": "^1.0.1",