Improved path specific servers

Author: mrin9

docs/specs/server-override.yaml

@@ -6,19 +6,19 @@ info:
 servers:
   - url: http://www.defaultserver.com
 paths:
-  /simple:
+  /global-api-server:
     get:
-      summary: Test override servers
+      summary: This path sends request to API servers defined at global level
       responses:
         '200':
           description: successful operation
           content:
             application/json:
               schema:
                 type: string
-  /simple-override:
+  /path-specific-api-server:
     get:
-      summary: Test override servers
+      summary: This path sends request to API servers defined at Path level
       responses:
         '200':
           description: successful operation
@@ -27,5 +27,18 @@ paths:
               schema:
                 type: string
     servers:
-      - url: 'https://www.customserver1.com'
-      - url: 'https://www.customserver2.com'
+      - url: 'http://example.com/api'
+        description: Test server
+      - url: '/api'
+      - url: '{protocol}://dev.com/api'
+        description: Server with Variable
+        variables:
+          protocol:
+            default: https          
+            description: >
+              Server choices:
+                * `http` Not Secured server
+                * `https` Secured server
+            enum:
+              - http
+              - https

src/components/api-request.js

@@ -505,19 +505,31 @@ export default class ApiRequest extends LitElement {
 
   apiCallTemplate() {
     // use default server url, if multiple overrides exists show select
-    let containerServer = this.serverUrl
-      ? html`${this.serverUrl}`
-      : html`<div style="font-weight:bold;color:var(--red)">Not Set</div>`;
+    let selectedServerHtml = this.serverUrl
+      ? html`<div style="font-weight:bold;padding-right:5px;">API SERVER: </div> ${this.serverUrl}`
+      : html`<div style="font-weight:bold;color:var(--red)">NO API Server Selected</div>`;
+
     if (this.servers && this.servers.length > 0) {
-      const opts = this.servers.map((value) => html`<option value="${value.url}" selected="${value.url === this.serverUrl}" >${value.url}</option>`);
-      containerServer = html`<select @change='${(e) => { this.serverUrl = e.target.value; }}'>${opts}</select>`;
+      // this.serverUrl = this.servers[0].url;
+      selectedServerHtml = html`
+      <div style="display:flex; flex-direction:column;">
+        <select style="min-width:100px;" @change='${(e) => { this.serverUrl = e.target.value; }}'>
+          ${this.servers.map((v) => html`<option value="${v.url}">${v.url} - ${v.description}</option>`)}
+        </select>
+        
+        <div style="display:flex; flex-direction:row; align-items:center; margin-top:10px;">
+          <div style="font-weight:bold;padding-right:5px;">API SERVER: </div>
+          <div> ${this.serverUrl ? this.serverUrl : html`<div style="font-weight:bold;color:var(--red)">NO API Server Selected</div>`}</div>
+        </div>
+      </div>
+      `;
     }
+
     return html`
     <div style="display:flex; align-items: center; margin:16px 0; font-size:var(--font-size-small);">
       <div style="display:flex; flex-direction:column; margin:0; width:calc(100% - 60px);">
         <div style="display:flex; flex-direction:row; align-items:center; overflow:hidden;"> 
-          <div style="font-weight:bold;padding-right:5px;">API SERVER: </div> 
-          ${containerServer}
+          ${selectedServerHtml}
         </div>
         <div style="display:flex;">
           <div style="padding-right:5px;">Authentication: </div>
@@ -532,7 +544,7 @@ export default class ApiRequest extends LitElement {
           }
         </div>
       </div>
-      <button class="m-btn primary try-btn" style="padding: 6px 0px;width:60px; align-self:flex-end;" @click="${this.onTryClick}">TRY</button>
+      <button class="m-btn primary try-btn" style="padding: 6px 0px;width:60px; align-self:flex-start; margin:1px 0 0 5px;" @click="${this.onTryClick}">TRY</button>
     </div>
     ${this.responseMessage === ''
       ? ''

src/styles/input-styles.js

@@ -1,5 +1,6 @@
 import { html } from 'lit-element';
 
+/* eslint-disable max-len */
 export default html`
 <style>
 .m-select, input, select, button {
@@ -64,7 +65,7 @@ input[type="password"] {
 
 select {
   padding: 6px 35px 6px 5px;
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20d%3D%22M10.3%203.3L6%207.6%201.7%203.3A1%201%200%2000.3%204.7l5%205a1%201%200%20001.4%200l5-5a1%201%200%2010-1.4-1.4z%22%20fill%3D%22%23777777%22%2F%3E%3C%2Fsvg%3E");
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20d%3D%22M10.3%203.3L6%207.6%201.7%203.3A1%201%200%2000.3%204.7l5%205a1%201%200%20001.4%200l5-5a1%201%200%2010-1.4-1.4z%22%20fill%3D%22%23777777%22%2F%3E%3C%2Fsvg%3E"); 
   background-position: calc(100% - 5px) center;
   background-repeat: no-repeat;  
   background-size: 10px;

src/templates/endpoint-template.js

@@ -45,7 +45,6 @@ function endpointBodyTemplate(path) {
   }
   accept = accept.replace(/,\s*$/, ''); // remove trailing comma
   const nonEmptyApiKeys = this.resolvedSpec.securitySchemes.filter((v) => (v.finalKeyValue)) || [];
-  const selectedServer = path.servers && path.servers.length > 0 ? path.servers[0].uri : this.selectedServer.computedUrl;
   return html`
   <div class='endpoint-body ${path.method}'>
     ${path.summary || path.description
@@ -70,7 +69,7 @@ function endpointBodyTemplate(path) {
         .request_body = "${path.requestBody}"
         .api_keys = "${nonEmptyApiKeys}"
         .servers = "${path.servers}" 
-        server-url = "${selectedServer}" 
+        server-url = "${path.servers && path.servers.length > 0 ? path.servers[0].url : this.selectedServer.computedUrl}" 
         active-schema-tab = "${this.defaultSchemaTab}" 
         allow-try = "${this.allowTry}"
         accept = "${accept}"

src/templates/expanded-endpoint-template.js

@@ -100,7 +100,8 @@ function endpointBodyTemplate(path) {
         .parameters = "${path.parameters}" 
         .request_body = "${path.requestBody}"
         .api_keys = "${nonEmptyApiKeys}"
-        server-url = "${this.selectedServer.computedUrl}" 
+        .servers = "${path.servers}" 
+        server-url = "${path.servers && path.servers.length > 0 ? path.servers[0].url : this.selectedServer.computedUrl}" 
         allow-try = "${this.allowTry}"
         accept = "${accept}"
         render-style="${this.renderStyle}"