docs: Improve previous version navigation

JeanMeche · JeanMeche · commit caae8f782099 · 2023-03-17T08:29:06.000+01:00
In archive mode the link to the current doc will now point to same page. If the page doesn't exist anymore, it will show a contextualized warning message. See #46850
diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
@@ -67,7 +67,7 @@
 
     <main class="sidenav-content" [id]="pageId">
       <div id="main-content" tabindex="-1"></div>
-      <aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
+      <aio-mode-banner *ngIf="versionInfo" [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
       <aio-doc-viewer [class.no-animations]="disableAnimations" [doc]="currentDocument" (docReady)="onDocReady()" (docRemoved)="onDocRemoved()" (docInserted)="onDocInserted()" (docRendered)="onDocRendered()">
       </aio-doc-viewer>
       <aio-dt *ngIf="dtOn" [(doc)]="currentDocument"></aio-dt>
diff --git a/aio/src/app/custom-elements/search/file-not-found-search.component.ts b/aio/src/app/custom-elements/search/file-not-found-search.component.ts
@@ -1,26 +1,41 @@
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
-import { LocationService } from 'app/shared/location.service';
-import { SearchResults } from 'app/search/interfaces';
-import { SearchService } from 'app/search/search.service';
+import {Component, OnInit} from '@angular/core';
+import {Observable} from 'rxjs';
+import {switchMap} from 'rxjs/operators';
+import {LocationService} from 'app/shared/location.service';
+import {SearchResults} from 'app/search/interfaces';
+import {SearchService} from 'app/search/search.service';
 
 @Component({
   selector: 'aio-file-not-found-search',
-  template:
-  `<div class="alert is-helpful">
+  template: `<div class="alert is-helpful">
+      <p *ngIf="redirectedFrom">
+        You were redirected from the Angular v{{ redirectedFrom }} documentation, but this page doesn't
+        exist in this version.
+      </p>
       <p>Let's see if any of these search results help...</p>
-   </div>
-  <aio-search-results class="embedded" [searchResults]="searchResults | async"></aio-search-results>`
+    </div>
+    <aio-search-results
+      class="embedded"
+      [searchResults]="searchResults | async"
+    ></aio-search-results>`,
 })
 export class FileNotFoundSearchComponent implements OnInit {
   searchResults: Observable<SearchResults>;
+  redirectedFrom: number | null = null;
   constructor(private location: LocationService, private search: SearchService) {}
 
   ngOnInit() {
     this.searchResults = this.location.currentPath.pipe(switchMap(path => {
       const query = path.split(/\W+/).join(' ');
       return this.search.search(query);
     }));
+
+    this.redirectedFrom = this.getRedirectedFromParam();
+  }
+
+  private getRedirectedFromParam(): number | null {
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const redirected_from = urlSearchParams.get('redirected_from');
+    return redirected_from ? parseInt(redirected_from, 10) : null;
   }
 }
diff --git a/aio/src/app/layout/mode-banner/mode-banner.component.ts b/aio/src/app/layout/mode-banner/mode-banner.component.ts
@@ -1,3 +1,4 @@
+import { Location } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { VersionInfo } from 'app/navigation/navigation.service';
 
@@ -6,13 +7,20 @@ import { VersionInfo } from 'app/navigation/navigation.service';
   template: `
     <div *ngIf="mode === 'archive'" class="mode-banner alert archive-warning">
       <p>
-        This is the <strong>archived documentation for Angular v{{ version?.major }}.</strong> Please visit
-        <a href="https://angular.io/">angular.io</a> to see documentation for the current version of Angular.
+        This is the <strong>archived documentation for Angular v{{ version.major }}.</strong> Please visit
+        <a href="https://angular.io{{currentPath}}?redirected_from={{version.major}}">angular.io</a>
+         to see this page for the current version of Angular.
       </p>
     </div>
   `,
 })
 export class ModeBannerComponent {
   @Input() mode: string;
-  @Input() version: VersionInfo | undefined;
+  @Input() version: VersionInfo;
+
+  currentPath: string;
+
+  constructor(private location: Location) {
+    this.currentPath = this.location.path();
+  }
 }
diff --git a/goldens/size-tracking/aio-payloads.json b/goldens/size-tracking/aio-payloads.json
@@ -5,8 +5,8 @@
       "main": 468041,
       "polyfills": 33938,
       "styles": 74561,
-      "light-theme": 92890,
-      "dark-theme": 93036
+      "light-theme": 92905,
+      "dark-theme": 93051
     }
   },
   "aio-local": {
@@ -15,8 +15,8 @@
       "main": 470131,
       "polyfills": 33836,
       "styles": 74561,
-      "light-theme": 92890,
-      "dark-theme": 93036
+      "light-theme": 92905,
+      "dark-theme": 93051
     }
   }
-}
+}
