feat: Add special rendering for deprecated operations (#290)

* Add special rendering for deprecated operations

* Change styling of deprecated operation header

Author: pgolm

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

@@ -1,6 +1,6 @@
 <div class="operation" *ngIf="operation">
   <div class="operation-content">
-    <h2 class="operation-header sharable-header">
+    <h2 class="operation-header sharable-header" [ngClass]="{deprecated: operation.deprecated}">
         <a class="share-link" href="#{{operation.anchor}}"></a>{{operation.summary}}
     </h2>
     <endpoint-link *ngIf="pathInMiddlePanel"

lib/components/Operation/operation.scss

@@ -16,6 +16,18 @@
 
 .operation-header {
   margin-bottom: calc(1em - 6px);
+
+  &.deprecated {
+    &:after {
+      content: 'Deprecated';
+      color: $black;
+      background: $yellow;
+      padding: 3px 10px;
+      text-transform: uppercase;
+      display: inline-block;
+      margin: 0;
+    }
+  }
 }
 
 .operation-tags {

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