Add display name for tags

In go-swagger, the name of the tag determines the directory that
generated files end up in. Also, we want the tag names to be
consistent with operationIds.

Unfortunately, these make bad names for menu items, so we want
to have a way of specifying human-friendly names for the menu.

docs/redoc-vendor-extensions.md

@@ -54,6 +54,13 @@ Extends OpenAPI [Tag Object](http://swagger.io/specification/#tagObject)
 | :------------- | :------: | :---------- |
 | x-traitTag     | boolean  | In Swagger two operations can have multiply tags. This property distinguish between tags that are used to group operations (default) from tags that are used to mark operation with certain trait (`true` value) |
 
+#### x-displayName
+
+| Field Name     |	Type	  | Description |
+| :------------- | :------: | :---------- |
+| x-displayName  | string   | Define the text that is used for this tag in the menu and in section headings |
+
+
 ###### Usage in Redoc
 Tags that have `x-traitTag` set to `true` are listed in side-menu but don't have any subitems (operations). Tag `description` is rendered as well.
 This is useful for handling out common things like Pagination, Rate-Limits, etc.

lib/components/MethodsList/methods-list.html

@@ -1,7 +1,7 @@
 <div class="methods">
   <div class="tag" *ngFor="let tag of tags;let catIdx = index; trackBy:trackByTagName">
     <div class="tag-info" [attr.section]="tag.id" *ngIf="!tag.headless">
-      <h1 class="sharable-header"> <a class="share-link" href="#tag/{{tag.name | encodeURIComponent}}"></a>{{tag.name}} </h1>
+      <h1 class="sharable-header"> <a class="share-link" href="#{{tag.id}}"></a>{{tag.name}} </h1>
       <p *ngIf="tag.description" [innerHtml]="tag.description | marked"> </p>
     </div>
     <method *lazyFor="let method of tag.methods;let show = show;" [hidden]="!show" [pointer]="method.pointer" [attr.pointer]="method.pointer"

lib/services/schema-helper.service.spec.ts

@@ -7,7 +7,8 @@ describe('Spec Helper', () => {
     let suitSchema = {
       tags: [
         {name: 'tag1', description: 'info1', 'x-traitTag': true},
-        {name: 'tag2', description: 'info2'}
+        {name: 'tag2', description: 'info2'},
+        {name: 'tag4', description: 'info2', 'x-displayName': 'Tag Four'}
       ],
       paths: {
         test: {
@@ -19,6 +20,10 @@ describe('Spec Helper', () => {
             tags: ['tag1', 'tag2'],
             summary: 'test get'
           },
+          delete: {
+            tags: ['tag4'],
+            summary: 'test delete'
+          },
           // no tags
           post: {
             summary: 'test post'
@@ -41,19 +46,19 @@ describe('Spec Helper', () => {
     });
 
     it('should return Array with correct number of items', () => {
-      //2 - defined tags, 1 - tag3 and 1 [other] tag for no-tags method
-      menuTree.length.should.be.equal(2 + 1 + 1);
+      //3 - defined tags, 1 - tag3 and 1 [other] tag for no-tags method
+      menuTree.length.should.be.equal(3 + 1 + 1);
     });
 
     it('should append not defined tags to the end of list', () => {
-      let info = menuTree[2];
+      let info = menuTree[3];
       info.name.should.be.equal('tag3');
       info.methods.length.should.be.equal(1);
       info.methods[0].summary.should.be.equal('test put');
     });
 
     it('should append methods without tags to [other] tag', () => {
-      let info = menuTree[3];
+      let info = menuTree[4];
       info.name.should.be.equal('');
       info.methods.length.should.be.equal(1);
       info.methods[0].summary.should.be.equal('test post');
@@ -84,6 +89,12 @@ describe('Spec Helper', () => {
         }
       }
     });
+
+    it('should use x-displayName to set custom names', () => {
+      let info = menuTree[2];
+      info.id.should.be.equal('tag/tag4');
+      info.name.should.be.equal('Tag Four');
+    });
   });
 
   describe('injectors', () => {

lib/services/schema-helper.service.ts

@@ -315,7 +315,7 @@ export class SchemaHelper {
     for (let tag of schema.tags || []) {
       let id = 'tag/' + slugify(tag.name);
       tag2MethodMapping[id] = {
-        name: tag.name,
+        name: tag['x-displayName'] || tag.name,
         id: id,
         description: tag.description,
         headless: tag.name === '',