Merge pull request #148 from fbacker/feature/override-server

Override server if provided at path

Author: mrin9

docs/specs/server-override.yaml

@@ -0,0 +1,31 @@
+openapi: 3.0.2
+info:
+  version: '1.0'
+  title: Server Override
+  description: For testing operation server override. Possible to list servers for specific operation that overrides default list.
+servers:
+  - url: http://www.defaultserver.com
+paths:
+  /simple:
+    get:
+      summary: Test override servers
+      responses:
+        '200':
+          description: successful operation
+          content:
+            application/json:
+              schema:
+                type: string
+  /simple-override:
+    get:
+      summary: Test override servers
+      responses:
+        '200':
+          description: successful operation
+          content:
+            application/json:
+              schema:
+                type: string
+    servers:
+      - url: 'https://www.customserver1.com'
+      - url: 'https://www.customserver2.com'

src/components/api-request.js

@@ -29,6 +29,7 @@ export default class ApiRequest extends LitElement {
   static get properties() {
     return {
       serverUrl: { type: String, attribute: 'server-url' },
+      servers: { type: Array },
       method: { type: String },
       path: { type: String },
       parameters: { type: Array },
@@ -503,15 +504,20 @@ 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>`;
+    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>`;
+    }
     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;overflow:hidden;"> 
           <div style="font-weight:bold;padding-right:5px;">API SERVER: </div> 
-          ${this.serverUrl
-            ? html`${this.serverUrl}`
-            : html`<div style="font-weight:bold;color:var(--red)">Not Set</div>`
-          }
+          ${containerServer}
         </div>
         <div style="display:flex;">
           <div style="padding-right:5px;">Authentication: </div>

src/templates/endpoint-template.js

@@ -45,6 +45,7 @@ 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
@@ -68,7 +69,8 @@ function endpointBodyTemplate(path) {
         .parameters = "${path.parameters}"
         .request_body = "${path.requestBody}"
         .api_keys = "${nonEmptyApiKeys}"
-        server-url = "${this.selectedServer.computedUrl}" 
+        .servers = "${path.servers}" 
+        server-url = "${selectedServer}" 
         active-schema-tab = "${this.defaultSchemaTab}" 
         allow-try = "${this.allowTry}"
         accept = "${accept}"