feat(docs-infra): add useful links if landed on 404 page and no search results found (#34978)

Added additional links which can help user find the things they are
looking for when there are no search results (when searching or on a 404
page).

Note:
This commit increases the main bundle's payload size due to the extra
content of the `aio-search-results` component.

Fixes #31532

PR Close #34978

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
       }
     }

aio/src/app/shared/search-results/search-results.component.html

@@ -1,30 +1,57 @@
-<div class="search-results">
+<div class="search-results" [ngSwitch]="searchState">
-  <div *ngIf="searchAreas.length; then searchResults; else notFound"></div>
+
+  <ng-container *ngSwitchCase="'in-progress'">
+    <p class="no-results">Searching ...</p>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'results-found'">
+    <h2 class="visually-hidden">Search Results</h2>
+    <div class="search-area" *ngFor="let area of searchAreas">
+      <h3 class="search-section-header">{{area.name}} ({{area.pages.length + area.priorityPages.length}})</h3>
+      <ul class="priority-pages" >
+        <li class="search-page" *ngFor="let page of area.priorityPages">
+          <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page, $event)">
+            <span class="symbol {{page.type}}" *ngIf="area.name === 'api'"></span>
+            <span [class.deprecated-api-item]="page.deprecated">{{ page.title }}</span>
+          </a>
+        </li>
+      </ul>
+      <ul>
+        <li class="search-page" *ngFor="let page of area.pages">
+          <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page, $event)">
+            <span class="symbol {{page.type}}" *ngIf="area.name === 'api'"></span>
+            <span [class.deprecated-api-item]="page.deprecated">{{ page.title }}</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </ng-container>
+  
+  <ng-container *ngSwitchCase="'no-results-found'">
+    <div class="search-area">
+      <p class="no-results">
+        No results found.<br>
+        Here are a few links that might be helpful in finding what you are looking for:
+      </p>
+      <ul class="priority-pages">
+        <li class="search-page">
+          <a class="search-result-item" href="api">API reference</a>
+        </li>
+        <li class="search-page">
+          <a class="search-result-item" href="resources">Resources</a>
+        </li>
+        <li class="search-page">
+          <a class="search-result-item" href="guide/glossary">Glossary</a>
+        </li>
+        <li class="search-page">
+          <a class="search-result-item" href="guide/cheatsheet">Cheat-sheet</a>
+        </li>
+        <li class="search-page">
+          <a class="search-result-item" href="https://blog.angular.io/">Angular blog</a>
+        </li>
+      </ul>
+    </div>
+  </ng-container>
 </div>
 
-<ng-template #searchResults>
-  <h2 class="visually-hidden">Search Results</h2>
-  <div class="search-area" *ngFor="let area of searchAreas">
-    <h3 class="search-section-header">{{area.name}} ({{area.pages.length + area.priorityPages.length}})</h3>
-    <ul class="priority-pages" >
-      <li class="search-page" *ngFor="let page of area.priorityPages">
-        <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page, $event)">
-          <span class="symbol {{page.type}}" *ngIf="area.name === 'api'"></span>
-          <span [class.deprecated-api-item]="page.deprecated">{{ page.title }}</span>
-        </a>
-      </li>
-    </ul>
-    <ul>
-      <li class="search-page" *ngFor="let page of area.pages">
-        <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page, $event)">
-          <span class="symbol {{page.type}}" *ngIf="area.name === 'api'"></span>
-          <span [class.deprecated-api-item]="page.deprecated">{{ page.title }}</span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</ng-template>
 
-<ng-template #notFound>
-  <p class="not-found">{{notFoundMessage}}</p>
-</ng-template>

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/',
+      ]);
+    });
   });
 });

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<SearchResult>();
 
   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

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;
+      }
     }
   }
 }