Add special rendering for deprecated operations

demo/swagger.yaml

@@ -336,6 +336,7 @@ paths:
       summary: Finds Pets by tags
       description: 'Muliple tags can be provided with comma seperated strings. Use tag1, tag2, tag3 for testing.'
       operationId: findPetsByTags
+      deprecated: true
       produces:
         - application/xml
         - application/json

lib/components/Operation/operation.html

@@ -5,6 +5,9 @@
     </h2>
     <endpoint-link *ngIf="pathInMiddlePanel"
       [verb]="operation.verb" [path]="operation.path"> </endpoint-link>
+    <div class="operation-deprecated" *ngIf="operation.deprecated">
+        Warning: Deprecated
+    </div>
     <div class="operation-tags" *ngIf="operation.info.tags.length">
         <a *ngFor="let tag of operation.info.tags" attr.href="#tag/{{tag}}"> {{tag}} </a>
     </div>

lib/components/Operation/operation.scss

@@ -18,6 +18,10 @@
   margin-bottom: calc(1em - 6px);
 }
 
+.operation-deprecated {
+  font-weight: bold;
+}
+
 .operation-tags {
   margin-top: 20px;
 

lib/components/Operation/operation.ts

@@ -7,6 +7,7 @@ import { OptionsService, MenuService } from '../../services/';
 import { SwaggerBodyParameter } from '../../utils/swagger-typings';
 
 export interface OperationInfo {
+  deprecated: boolean;
   verb: string;
   path: string;
   info: {
@@ -50,6 +51,7 @@ export class Operation extends BaseComponent implements OnInit {
     this.operationId = this.componentSchema.operationId;
 
     this.operation = {
+      deprecated: this.componentSchema.deprecated,
       verb: JsonPointer.baseName(this.pointer),
       path: JsonPointer.baseName(this.pointer, 2),
       info: {

lib/components/SideMenu/side-menu-items.html

@@ -1,6 +1,6 @@
 <li *ngFor="let item of items; let idx = index" class="menu-item"
   ngClass="menu-item-depth-{{item.depth}} {{item.active ? 'active' : ''}} menu-item-for-{{item.metadata?.type}}">
-  <label class="menu-item-header" [ngClass]="{disabled: !item.ready}" (click)="activateItem(item)">
+  <label class="menu-item-header" [ngClass]="{disabled: !item.ready, deprecated: item?.metadata?.deprecated}" (click)="activateItem(item)">
     <span class="operation-type" [ngClass]="item?.metadata?.operation" *ngIf="item?.metadata?.operation"> {{item?.metadata?.operation}} </span><!--
  --><span class="menu-item-title">{{item.name}}</span>
    <svg *ngIf="item.items?.length" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">

lib/components/SideMenu/side-menu-items.scss

@@ -21,6 +21,11 @@
     color: lighten($text-color, 60%);
   }
 
+  &.deprecated {
+    text-decoration: line-through;
+    color: lighten($text-color, 60%);
+  }
+
   display: flex;
   justify-content: space-between;
 

lib/services/menu.service.ts

@@ -340,7 +340,8 @@ export class MenuService {
           type: 'operation',
           pointer: operationInfo._pointer,
           operationId: operationInfo.operationId,
-          operation: operationInfo.operation
+          operation: operationInfo.operation,
+          deprecated: !!operationInfo.deprecated
         },
         parent: parent
       };