From 2748aac024fef53aafb2598d835cb3ac874b348a Mon Sep 17 00:00:00 2001
From: Peter Golm <golm.peter@gmail.com>
Date: Tue, 4 Jul 2017 09:15:22 +0200
Subject: [PATCH] feat: Add special rendering for deprecated operations (#290)

* Add special rendering for deprecated operations

* Change styling of deprecated operation header
---
 demo/swagger.yaml                            |  1 +
 lib/components/Operation/operation.html      |  2 +-
 lib/components/Operation/operation.scss      | 12 ++++++++++++
 lib/components/Operation/operation.ts        |  2 ++
 lib/components/SideMenu/side-menu-items.html |  2 +-
 lib/components/SideMenu/side-menu-items.scss |  5 +++++
 lib/services/menu.service.ts                 |  3 ++-
 7 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/demo/swagger.yaml b/demo/swagger.yaml
index 63a0bcbb1d..7ffec7508d 100644
--- a/demo/swagger.yaml
+++ b/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
diff --git a/lib/components/Operation/operation.html b/lib/components/Operation/operation.html
index 4fa9a34522..67bf81334a 100644
--- a/lib/components/Operation/operation.html
+++ b/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"
diff --git a/lib/components/Operation/operation.scss b/lib/components/Operation/operation.scss
index d6cdfaf432..f1e02b6754 100644
--- a/lib/components/Operation/operation.scss
+++ b/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 {
diff --git a/lib/components/Operation/operation.ts b/lib/components/Operation/operation.ts
index 0ad54e6b9c..dc86e7e67b 100644
--- a/lib/components/Operation/operation.ts
+++ b/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: {
diff --git a/lib/components/SideMenu/side-menu-items.html b/lib/components/SideMenu/side-menu-items.html
index 8010e40485..726900cd3f 100644
--- a/lib/components/SideMenu/side-menu-items.html
+++ b/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">
diff --git a/lib/components/SideMenu/side-menu-items.scss b/lib/components/SideMenu/side-menu-items.scss
index 386cbeb6b9..ebdec6698f 100644
--- a/lib/components/SideMenu/side-menu-items.scss
+++ b/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;
 
diff --git a/lib/services/menu.service.ts b/lib/services/menu.service.ts
index 7ff779558e..b0873b27c8 100644
--- a/lib/services/menu.service.ts
+++ b/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
       };