build(docs-infra): expose deprecated status on items more clearly (#25750)

PR Close #25750

aio/src/app/custom-elements/api/api-list.component.html

@@ -22,11 +22,14 @@
 
 <article class="api-list-container l-content-small docs-content">
   <div *ngFor="let section of filteredSections | async" >
-    <h2 *ngIf="section.items"><a [href]="section.path">{{section.title}}</a></h2>
+    <h2 *ngIf="section.items"><a [href]="section.path" [class.deprecated-api-item]="section.deprecated">{{section.title}}</a></h2>
     <ul class="api-list" *ngIf="section.items?.length">
       <ng-container *ngFor="let item of section.items">
         <li class="api-item">
-          <a [href]="item.path"><span class="symbol {{item.docType}}"></span> {{item.title}}</a>
+          <a [href]="item.path" [class.deprecated-api-item]="item.stability === 'deprecated'">
+            <span class="symbol {{item.docType}}"></span>
+            {{item.title}}
+          </a>
         </li>
       </ng-container>
     </ul>

aio/src/app/custom-elements/api/api-list.component.spec.ts

@@ -226,6 +226,7 @@ const apiSections: ApiSection[] = [
     "name": "common",
     "title": "common",
     "path": "api/common",
+    "deprecated": false,
     "items": [
       {
         "name": "class_1",
@@ -233,7 +234,7 @@ const apiSections: ApiSection[] = [
         "path": "api/common/class_1",
         "docType": "class",
         "stability": "experimental",
-        "securityRisk": false
+        "securityRisk": false,
       },
       {
         "name": "class_2",
@@ -241,7 +242,7 @@ const apiSections: ApiSection[] = [
         "path": "api/common/class_2",
         "docType": "class",
         "stability": "stable",
-        "securityRisk": false
+        "securityRisk": false,
       },
       {
         "name": "directive_1",
@@ -249,7 +250,7 @@ const apiSections: ApiSection[] = [
         "path": "api/common/directive_1",
         "docType": "directive",
         "stability": "stable",
-        "securityRisk": true
+        "securityRisk": true,
       },
       {
         "name": "pipe_1",
@@ -257,7 +258,7 @@ const apiSections: ApiSection[] = [
         "path": "api/common/pipe_1",
         "docType": "pipe",
         "stability": "stable",
-        "securityRisk": true
+        "securityRisk": true,
       },
     ]
   },
@@ -265,6 +266,7 @@ const apiSections: ApiSection[] = [
     "name": "core",
     "title": "core",
     "path": "api/core",
+    "deprecated": false,
     "items": [
       {
         "name": "class_3",
@@ -272,7 +274,7 @@ const apiSections: ApiSection[] = [
         "path": "api/core/class_3",
         "docType": "class",
         "stability": "experimental",
-        "securityRisk": false
+        "securityRisk": false,
       },
       {
         "name": "function_1",
@@ -280,7 +282,7 @@ const apiSections: ApiSection[] = [
         "path": "api/core/function 1",
         "docType": "function",
         "stability": "deprecated",
-        "securityRisk": true
+        "securityRisk": true,
       },
       {
         "name": "const_1",
@@ -288,7 +290,7 @@ const apiSections: ApiSection[] = [
         "path": "api/core/const_1",
         "docType": "const",
         "stability": "stable",
-        "securityRisk": false
+        "securityRisk": false,
       }
     ]
   }

aio/src/app/custom-elements/api/api.service.spec.ts

@@ -50,7 +50,10 @@ describe('ApiService', () => {
   describe('#sections', () => {
 
     it('first subscriber should fetch sections', done => {
-      const data = [{name: 'a', title: 'A', path: '', items: []}, {name: 'b', title: 'B', path: '', items: []}];
+      const data = [
+        {name: 'a', title: 'A', path: '', items: [], deprecated: false},
+        {name: 'b', title: 'B', path: '', items: [], deprecated: false},
+      ];
 
       service.sections.subscribe(sections => {
         expect(sections).toEqual(data);
@@ -61,7 +64,10 @@ describe('ApiService', () => {
     });
 
     it('second subscriber should get previous sections and NOT trigger refetch', done => {
-      const data = [{name: 'a', title: 'A', path: '', items: []}, {name: 'b', title: 'B', path: '', items: []}];
+      const data = [
+        {name: 'a', title: 'A', path: '', items: [], deprecated: false},
+        {name: 'b', title: 'B', path: '', items: [], deprecated: false},
+      ];
       let subscriptions = 0;
 
       service.sections.subscribe(sections => {
@@ -91,7 +97,10 @@ describe('ApiService', () => {
 
       let call = 0;
 
-      let data = [{name: 'a', title: 'A', path: '', items: []}, {name: 'b', title: 'B', path: '', items: []}];
+      let data = [
+        {name: 'a', title: 'A', path: '', items: [], deprecated: false},
+        {name: 'b', title: 'B', path: '', items: [], deprecated: false},
+      ];
 
       service.sections.subscribe(sections => {
         // called twice during this test
@@ -103,7 +112,7 @@ describe('ApiService', () => {
       httpMock.expectOne({}).flush(data);
 
       // refresh/refetch
-      data = [{name: 'c', title: 'C', path: '', items: []}];
+      data = [{name: 'c', title: 'C', path: '', items: [], deprecated: false}];
       service.fetchSections();
       httpMock.expectOne({}).flush(data);
 

aio/src/app/custom-elements/api/api.service.ts

@@ -20,6 +20,7 @@ export interface ApiSection {
   path: string;
   name: string;
   title: string;
+  deprecated: boolean;
   items: ApiItem[]|null;
 }
 
@@ -47,7 +48,12 @@ export class ApiService implements OnDestroy {
       this._sections.subscribe(sections => this.logger.log('ApiService got API sections') );
     }
 
-    return this._sections;
+    return this._sections.pipe(tap(sections => {
+      sections.forEach(section => {
+        section.deprecated = !!section.items &&
+            section.items.every(item => item.stability === 'deprecated');
+      });
+    }));
   };
 
   constructor(private http: HttpClient, private logger: Logger) { }