Skip to content

Commit

Permalink
Improve code search filter UI
Browse files Browse the repository at this point in the history 
 - Always show total code search result counts, and additionally show filtered result counts near filter input when a filter is applied

 - Show spinner if filter or sort tasks are running
  • Loading branch information
@lonelyghost @kategengler
lonelyghost authored and kategengler committed Sep 15, 2017
1 parent e59c625 commit 4b8c4f4
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 32 deletions.
14 changes: 13 additions & 1 deletion app/components/code-search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,20 @@ export default Ember.Component.extend({

codeSearch: inject.service(),

usageCounts: computed.mapBy('results.filteredResults', 'count'),
usageCounts: computed.mapBy('results.rawResults', 'count'),

filteredUsageCounts: computed.mapBy('results.filteredResults', 'count'),

totalUsageCount: computed.sum('usageCounts'),

totalFilteredUsageCount: computed.sum('filteredUsageCounts'),

isFilterApplied: computed.notEmpty('fileFilter'),

showFilteredUsages: computed('isFilterApplied', 'isUpdatingFilter', function() {
return this.get('isFilterApplied') && !this.get('isUpdatingFilter');
}),

init() {
this._super(...arguments);
this.set('searchInput', this.get('codeQuery') || '');
Expand Down Expand Up @@ -132,6 +140,10 @@ export default Ember.Component.extend({
this.$(this.get('focusNode')).focus();
},

isUpdatingResults: computed.or('applyFileFilter.isRunning', 'clearFileFilter.isRunning', 'sortBy.isRunning'),

isUpdatingFilter: computed.or('applyFileFilter.isRunning', 'clearFileFilter.isRunning'),

actions: {
clearSearch() {
this.set('codeQuery', '');
Expand Down
6 changes: 6 additions & 0 deletions app/styles/components/_code-search.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@

.result-controls {
padding: 0 .25rem;
height: 100px;
border: 1px solid $light-gray;
border-width: 0 0 1px 0;
margin-top: 1rem;
Expand Down Expand Up @@ -104,6 +105,11 @@
margin-top: -.7rem;
}
}

.filter-results {
display: inline-block;
padding-top: 2px;
}
}
}

Expand Down
48 changes: 27 additions & 21 deletions app/templates/components/code-search.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,7 @@
<div class="result-details">
<h4 class="test-last-search">Results for {{quotedLastSearch}}</h4>
<h5 class="test-result-info">
Found {{pluralize-this results.filteredResultLength 'addon'}} ({{pluralize-this totalUsageCount 'usage'}})
{{#if isFilterApplied}}
in files matching /{{fileFilter}}/
{{/if}}
Found {{pluralize-this results.length 'addon'}} ({{pluralize-this totalUsageCount 'usage'}})
</h5>
</div>
<div class="result-controls">
Expand All @@ -45,10 +42,15 @@
value={{fileFilter}}
oninput={{action (perform applyFileFilter) value="target.value"}}
class="test-file-filter-input">
{{#if isFilterApplied}}
{{#if showFilteredUsages}}
<button type="button" {{action (perform clearFileFilter)}} class="icon-close test-clear-file-filter"></button>
{{/if}}
</div>
{{#if showFilteredUsages}}
<span class="filter-results test-filtered-result-info">
Filtered to {{pluralize-this results.filteredResultLength 'addon'}} ({{pluralize-this totalFilteredUsageCount 'usage'}})
</span>
{{/if}}
</div>
<div class="sort-controls">
Sort by:
Expand All @@ -59,22 +61,26 @@
</div>
</div>
<ul class="addon-list">
{{#each results.displayingResults as |result|}}
<li data-id="{{result.addon.id}}">
{{addon-details addon=result.addon}}
{{addon-source-usages
addon=result.addon
count=result.count
query=codeQuery
regex=regex
fileFilter=fileFilter
}}
</li>
{{/each}}
{{#if canViewMore}}
<a href="#" {{action (perform viewMore)}} class="view-more test-view-more">
<li>See more results</li>
</a>
{{#if isUpdatingResults}}
{{dot-spinner}}
{{else}}
{{#each results.displayingResults as |result|}}
<li data-id="{{result.addon.id}}">
{{addon-details addon=result.addon}}
{{addon-source-usages
addon=result.addon
count=result.count
query=codeQuery
regex=regex
fileFilter=fileFilter
}}
</li>
{{/each}}
{{#if canViewMore}}
<a href="#" {{action (perform viewMore)}} class="view-more test-view-more">
<li>See more results</li>
</a>
{{/if}}
{{/if}}
</ul>
{{else if search.isRunning}}
Expand Down
22 changes: 12 additions & 10 deletions tests/acceptance/code-search-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -341,8 +341,10 @@ test('filtering search results by file path', function(assert) {

andThen(function() {
assert.equal(find('.test-addon-name').length, 2, 'shows only matching addons after filtering');
assert.contains('.test-result-info', '2 addons', 'filtered result count shows when filter is applied');
assert.contains('.test-result-info', '3 usages', 'filtered usage count shows when filter is applied');
assert.contains('.test-result-info', '3 addons', 'full result count shows when filter is applied');
assert.contains('.test-result-info', '6 usages', 'full usage count shows when filter is applied');
assert.contains('.test-filtered-result-info', '2 addons', 'filtered result count shows when filter is applied');
assert.contains('.test-filtered-result-info', '3 usages', 'filtered usage count shows when filter is applied');
});

click('.test-clear-file-filter');
Expand All @@ -356,8 +358,8 @@ test('filtering search results by file path', function(assert) {

andThen(function() {
assert.equal(find('.test-addon-name').length, 1, 'shows only matching addons after filtering');
assert.contains('.test-result-info', '1 addon', 'filtered result count is correct after regex search');
assert.contains('.test-result-info', '1 usage', 'filtered usage count is correct after regex search');
assert.contains('.test-filtered-result-info', '1 addon', 'filtered result count is correct after regex search');
assert.contains('.test-filtered-result-info', '1 usage', 'filtered usage count is correct after regex search');
});
});

Expand Down Expand Up @@ -496,8 +498,8 @@ test('filtering works with sorting and pagination', function(assert) {

andThen(function() {
assert.equal(find('.test-addon-name').length, 3, 'shows one page worth of addons after filtering');
assert.contains('.test-result-info', '4 addons', 'filtered addon count shows when filter is applied');
assert.contains('.test-result-info', '6 usages', 'filtered usage count shows when filter is applied');
assert.contains('.test-filtered-result-info', '4 addons', 'filtered addon count shows when filter is applied');
assert.contains('.test-filtered-result-info', '6 usages', 'filtered usage count shows when filter is applied');
assert.contains('.test-addon-name:eq(0)', 'ember-cli-thing', 'addons are sorted by usage count');
});

Expand All @@ -511,8 +513,8 @@ test('filtering works with sorting and pagination', function(assert) {

andThen(function() {
assert.equal(find('.test-addon-name').length, 3, 'resets to first page after sorting');
assert.contains('.test-result-info', '4 addons', 'filtered addon count still shows after sorting');
assert.contains('.test-result-info', '6 usages', 'filtered usage count still shows after sorting');
assert.contains('.test-filtered-result-info', '4 addons', 'filtered addon count still shows after sorting');
assert.contains('.test-filtered-result-info', '6 usages', 'filtered usage count still shows after sorting');
assert.contains('.test-addon-name:eq(0)', 'ember-cli-matches', 'addons are sorted by name');
});

Expand All @@ -521,8 +523,8 @@ test('filtering works with sorting and pagination', function(assert) {

andThen(function() {
assert.equal(find('.test-addon-name').length, 3, 'shows first page of addons after clearing filter');
assert.contains('.test-result-info', '6 addons', 'un-filtered addon count shows');
assert.contains('.test-result-info', '17 usages', 'un-filtered usage count shows');
assert.notExists('.test-filtered-result-info', 'filtered result counts are gone after clearing');
assert.exists('.test-result-info', 'total result counts are still showing');
assert.contains('.test-addon-name:eq(0)', 'ember-blanket', 'addons are sorted by name');
});
});
Expand Down

0 comments on commit 4b8c4f4

Please sign in to comment.