Feat/w 15607551/show servers name

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-method-documentation",
   "description": "A HTTP method documentation build from AMF model",
-  "version": "5.2.21",
+  "version": "5.2.22",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

src/ApiMethodDocumentation.js

@@ -232,6 +232,14 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
       * This is a map of the type name to the binding name.
       */
       bindings: {type: Array},
+      /**
+       * Adds a servers to async API
+       *
+       * @param {string} url - The URL of the server.
+       * @param {object} [description] - An object containing a string `description` property.
+       */
+      servers: {type:Array},
+      _servers: {type:Array},
     };
   }
 
@@ -335,6 +343,21 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
     this._processServerInfo();
   }
 
+  get servers() {
+    return this._servers;
+  }
+
+  set servers(value) {
+
+    const old = this._servers;
+    /* istanbul ignore if */
+    if (old === value) {
+      return;
+    }
+    this._servers = value;
+    this.requestUpdate('servers', old);
+  }
+
   get _titleHidden() {
     if (!this.noTryIt) {
       return false;
@@ -897,6 +920,7 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
     <api-url
       .amf="${this.amf}"
       .server="${this.server}"
+      .servers="${this.servers}"
       .endpoint="${this.endpoint}"
       .apiVersion="${this.apiVersion}"
       .baseUri="${this.baseUri}"
@@ -1225,6 +1249,7 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
       amf,
       compatibility,
       graph,
+      servers
     } = this;
     return html`
       <div class="callback-section">
@@ -1233,6 +1258,7 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
           .amf="${amf}"
           .method="${method}"
           .endpoint="${endpoint}"
+          .servers="${servers}"
           ?compatibility="${compatibility}"
           ?graph="${graph}"
           noTryit

src/ApiUrl.js

@@ -59,6 +59,14 @@ export class ApiUrl extends AmfHelperMixin(LitElement) {
        * Optional, operation id that is render only for async api
        */
       operationId:{type: String},
+      /**
+       * Adds a servers to async API
+       *
+       * @param {string} url - The URL of the server.
+       * @param {object} [description] - An object containing a string `description` property.
+       */
+      servers: {type:Array},
+      _servers: {type:Array},
       _url: { type: String },
       _method: { type: String },
       _protocol: { type: String },
@@ -117,6 +125,19 @@ export class ApiUrl extends AmfHelperMixin(LitElement) {
     this._updateUrl();
   }
 
+  get servers() {
+    return this._servers;
+  }
+
+  set servers(value) {
+    const old = this._servers;
+    if (old === value) {
+      return;
+    }
+    this._servers = value;
+    this.requestUpdate('servers', old);
+  }
+
   get endpoint() {
     return this._endpoint;
   }
@@ -173,16 +194,11 @@ export class ApiUrl extends AmfHelperMixin(LitElement) {
 
 
   get asyncServersNames(){
-    if(!this.endpoint){
-      return ''
-    }
-    const endpoint = Array.isArray(this.endpoint) ? this.endpoint[0]: this.endpoint
-    const apiContractServerKey = this._getAmfKey( this.ns.aml.vocabularies.apiContract.server)
-    const endpointServers = this._ensureArray(endpoint[apiContractServerKey])
+    const servers = this._ensureArray(this.servers)
 
     // try to find servers in channel level
-    if(endpointServers){
-      return endpointServers.map((item)=>(this._getValue(item, this.ns.aml.vocabularies.core.name)));  
+    if(servers){
+      return servers.map((item)=>(this._getValue(item, this.ns.aml.vocabularies.core.name)));  
     }
 
     // try to find root server (only one) that is received by property
@@ -278,11 +294,9 @@ export class ApiUrl extends AmfHelperMixin(LitElement) {
   }
 
   renderAsyncApi(asyncServersNames){
-    const { url, _endpoint } = this;
-    if(!_endpoint){
-      return ''
-    }
-    return html`
+    const { url } = this;
+
+   return html`
       <style>${this.styles}</style>
       <section class="async-servers-names-area">
         ${this._getMethodTemplate()}

test/api-url.test.js

@@ -166,8 +166,8 @@ describe('<api-url>', () => {
 				await nextFrame();
 				await nextFrame();
 
-				const url = 'mqtt://api.streetlights.smartylighting.com:{port}'
-				assert.equal(element.shadowRoot.querySelector('.url-value').textContent.trim(), url);
+				const expectedServer = 'production'
+				assert.equal(element.shadowRoot.querySelector('.url-value').textContent.trim(), expectedServer);
 			});
 		});
 	});