diff --git a/aio/scripts/_payload-limits.json b/aio/scripts/_payload-limits.json
index 3ef6d6bcdd..e83f14b8a1 100755
--- a/aio/scripts/_payload-limits.json
+++ b/aio/scripts/_payload-limits.json
@@ -3,7 +3,7 @@
"master": {
"uncompressed": {
"runtime-es2015": 2987,
- "main-es2015": 449683,
+ "main-es2015": 450612,
"polyfills-es2015": 52195
}
}
@@ -12,7 +12,7 @@
"master": {
"uncompressed": {
"runtime-es2015": 2987,
- "main-es2015": 450541,
+ "main-es2015": 451469,
"polyfills-es2015": 52195
}
}
@@ -21,7 +21,7 @@
"master": {
"uncompressed": {
"runtime-es2015": 3097,
- "main-es2015": 427026,
+ "main-es2015": 429230,
"polyfills-es2015": 52195
}
}
diff --git a/aio/src/app/shared/search-results/search-results.component.html b/aio/src/app/shared/search-results/search-results.component.html
index 2c6660ebf7..23e5994f62 100644
--- a/aio/src/app/shared/search-results/search-results.component.html
+++ b/aio/src/app/shared/search-results/search-results.component.html
@@ -1,30 +1,57 @@
-
-
+
+
+
+ Searching ...
+
+
+
+ Search Results
+
+
+
+
+
+
+ No results found.
+ Here are a few links that might be helpful in finding what you are looking for:
+
+
+
+
-
- Search Results
-
-
-
- {{notFoundMessage}}
-
diff --git a/aio/src/app/shared/search-results/search-results.component.spec.ts b/aio/src/app/shared/search-results/search-results.component.spec.ts
index c1ab3aad44..2dab9018af 100644
--- a/aio/src/app/shared/search-results/search-results.component.spec.ts
+++ b/aio/src/app/shared/search-results/search-results.component.spec.ts
@@ -170,6 +170,12 @@ describe('SearchResultsComponent', () => {
expect(getText()).toContain('Searching ...');
});
+ it('should not display default links while searching', () => {
+ fixture.detectChanges();
+ const resultLinks = fixture.debugElement.queryAll(By.css('.search-page a'));
+ expect(resultLinks.length).toEqual(0);
+ });
+
describe('when a search result anchor is clicked', () => {
let searchResult: SearchResult;
let selected: SearchResult|null;
@@ -214,9 +220,25 @@ describe('SearchResultsComponent', () => {
});
describe('when no query results', () => {
- it('should display "not found" message', () => {
+ beforeEach(() => {
setSearchResults('something', []);
+ });
+
+ it('should display "not found" message', () => {
expect(getText()).toContain('No results');
});
+
+ it('should contain reference links', () => {
+ const resultLinks = fixture.debugElement.queryAll(By.css('.search-page a'));
+ const resultHrefs = resultLinks.map(a => a.nativeNode.getAttribute('href'));
+ expect(resultHrefs.length).toEqual(5);
+ expect(resultHrefs).toEqual([
+ 'api',
+ 'resources',
+ 'guide/glossary',
+ 'guide/cheatsheet',
+ 'https://blog.angular.io/',
+ ]);
+ });
});
});
diff --git a/aio/src/app/shared/search-results/search-results.component.ts b/aio/src/app/shared/search-results/search-results.component.ts
index 79efb76e34..1f6b45c0da 100644
--- a/aio/src/app/shared/search-results/search-results.component.ts
+++ b/aio/src/app/shared/search-results/search-results.component.ts
@@ -1,6 +1,12 @@
import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
import { SearchResult, SearchResults, SearchArea } from 'app/search/interfaces';
+enum SearchState {
+ InProgress = 'in-progress',
+ ResultsFound = 'results-found',
+ NoResultsFound = 'no-results-found'
+}
+
/**
* A component to display search results in groups
*/
@@ -23,11 +29,18 @@ export class SearchResultsComponent implements OnChanges {
resultSelected = new EventEmitter
();
readonly defaultArea = 'other';
- notFoundMessage = 'Searching ...';
+ searchState: SearchState = SearchState.InProgress;
readonly topLevelFolders = ['guide', 'tutorial'];
searchAreas: SearchArea[] = [];
ngOnChanges() {
+ if (this.searchResults === null) {
+ this.searchState = SearchState.InProgress;
+ } else if (this.searchResults.results.length) {
+ this.searchState = SearchState.ResultsFound;
+ } else {
+ this.searchState = SearchState.NoResultsFound;
+ }
this.searchAreas = this.processSearchResults(this.searchResults);
}
@@ -43,7 +56,6 @@ export class SearchResultsComponent implements OnChanges {
if (!search) {
return [];
}
- this.notFoundMessage = 'No results found.';
const searchAreaMap: { [key: string]: SearchResult[] } = {};
search.results.forEach(result => {
if (!result.title) { return; } // bad data; should fix
diff --git a/aio/src/styles/2-modules/_search-results.scss b/aio/src/styles/2-modules/_search-results.scss
index a7aad90547..4eaee444a8 100644
--- a/aio/src/styles/2-modules/_search-results.scss
+++ b/aio/src/styles/2-modules/_search-results.scss
@@ -67,12 +67,17 @@ aio-search-results {
}
}
- .not-found {
+ .no-results {
color: $white;
text-align: center;
margin: 16px;
}
+ a {
+ color: $white;
+ font-weight: 500;
+ }
+
@media (max-width: 600px) {
display: block;
}
@@ -104,6 +109,10 @@ aio-search-results {
.not-found {
color: $darkgray;
}
+
+ a {
+ color: $blue;
+ }
}
}
}