openapi-explorer 0.8.290 → 0.8.293

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openapi-explorer",
-  "version": "0.8.290",
+  "version": "0.8.293",
   "description": "OpenAPI Explorer - API viewer with dynamically generated components, documentation, and interaction console",
   "author": "Rhosys Developers <developers@rhosys.ch>",
   "repository": {

package/src/components/api-request.js

@@ -245,7 +245,7 @@ export default class ApiRequest extends LitElement {
     return html`
     <div class="table-title top-gap">${title}${paramType === 'path' ? html`<span style='color:var(--red);'>*</span>` : ''}</div>
     <div style="display:block; overflow-x:auto; max-width:100%;">
-      <table class="m-table" style="width:100%; word-break:break-word;">
+      <table role="presentation" class="m-table" style="width:100%; word-break:break-word;">
         ${tableRows}
       </table>
     </div>`;
@@ -313,7 +313,7 @@ export default class ApiRequest extends LitElement {
     reqBodyTypeSelectorHtml = requestBodyTypes.length === 1
       ? ''
       : html`
-        <select style="min-width:100px; max-width:100%;  margin-bottom:-1px;" @change = '${(e) => this.onMimeTypeChange(e)}'>
+        <select aria-label="mime type" style="min-width:100px; max-width:100%;  margin-bottom:-1px;" @change = '${(e) => this.onMimeTypeChange(e)}'>
           ${requestBodyTypes.map((reqBody) => html`
             <option value = '${reqBody.mimeType}' ?selected = '${reqBody.mimeType === this.selectedRequestBodyType}'>
               ${reqBody.mimeType}
@@ -348,7 +348,7 @@ export default class ApiRequest extends LitElement {
               ${reqBodyExamples.length === 1
                 ? ''
                 : html`
-                  <select style="min-width:100px; max-width:100%;  margin-bottom:-1px;" @change='${(e) => this.onSelectExample(e)}'>
+                  <select aria-label='request body example' style="min-width:100px; max-width:100%;  margin-bottom:-1px;" @change='${(e) => this.onSelectExample(e)}'>
                     ${reqBodyExamples.map((v) => html`<option value="${v.exampleId}" ?selected=${v.exampleId === this.selectedRequestBodyExample} > 
                       ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary ? v.exampleSummary : v.exampleId} 
                     </option>`)}
@@ -683,7 +683,7 @@ export default class ApiRequest extends LitElement {
         }`);
       }
       return html`
-        <table style="width:100%;" class="m-table">
+        <table role="presentation" style="width:100%;" class="m-table">
           ${formDataTableRows}
         </table>
       `;

package/src/components/api-response.js

@@ -216,7 +216,7 @@ export default class ApiResponse extends LitElement {
   responseHeaderListTemplate(respHeaders) {
     return html`
       <div style="padding:16px 0 8px 0" class="resp-headers small-font-size bold-text">RESPONSE HEADERS</div> 
-      <table style="border-collapse: collapse; margin-bottom:16px; border:1px solid var(--border-color); border-radius: var(--border-radius)" class="small-font-size mono-font">
+      <table role="presentation" style="border-collapse: collapse; margin-bottom:16px; border:1px solid var(--border-color); border-radius: var(--border-radius)" class="small-font-size mono-font">
         ${respHeaders.map((v) => html`
           <tr>
             <td style="padding:8px; vertical-align: baseline; min-width:120px; border-top: 1px solid var(--light-border-color); text-overflow: ellipsis;">
@@ -238,7 +238,7 @@ export default class ApiResponse extends LitElement {
 
   mimeTypeDropdownTemplate(mimeTypes) {
     return html`
-      <select @change="${(e) => { this.selectedMimeType = e.target.value; }}" style='margin-bottom: -1px; z-index:1'>
+      <select aria-label='mime type' @change="${(e) => { this.selectedMimeType = e.target.value; }}" style='margin-bottom: -1px; z-index:1'>
         ${mimeTypes.map((mimeType) => html`<option value='${mimeType}' ?selected = '${mimeType === this.selectedMimeType}'> ${mimeType} </option>`)}
       </select>`;
   }
@@ -276,7 +276,7 @@ export default class ApiResponse extends LitElement {
           }`
         : html`
           <span class = 'example-panel generic-tree ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}'>
-            <select @change='${(e) => this.onSelectExample(e)}'>
+            <select aria-label='response body example' @change='${(e) => this.onSelectExample(e)}'>
               ${mimeRespDetails.examples.map((v) => html`<option value="${v.exampleId}" ?selected=${v.exampleId === mimeRespDetails.selectedExample} > 
                 ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary} 
               </option>`)}

package/src/openapi-explorer.js

@@ -510,16 +510,15 @@ export default class OpenApiExplorer extends LitElement {
       this.resolvedSpec = null;
       this.loading = true;
       this.loadFailed = false;
-      const isServerUrl = typeof specUrlOrObject === 'string' && specUrlOrObject.match(/^http/);
-      if (!this.serverUrl && isServerUrl) {
-        this.serverUrl = new URL(specUrlOrObject).origin;
-      }
-      const spec = await ProcessSpec(isServerUrl, specUrlOrObject, this.serverUrl);
+      const spec = await ProcessSpec(specUrlOrObject, this.serverUrl);
       this.loading = false;
       if (spec === undefined || spec === null) {
         console.error('Unable to resolve the API spec. '); // eslint-disable-line no-console
         return;
       }
+      if (!this.serverUrl) {
+        this.serverUrl = spec.servers[0].url;
+      }
       this.afterSpecParsedAndValidated(spec);
     } catch (err) {
       this.loading = false;

package/src/templates/security-scheme-template.js

@@ -270,7 +270,7 @@ function oAuthFlowTemplate(flowName, securityObj, authFlow) {
             ${flowName === 'clientCredentials'
               ? html`
                 <input type="password" part="textbox textbox-auth-client-secret" value = "" placeholder="Client Secret" spellcheck="false" class="oauth-client-secret" style = "margin:0 5px;">
-                <select style="margin-right:5px;" class="oauth-send-client-secret-in">
+                <select aria-label='oauth client secret location' style="margin-right:5px;" class="oauth-send-client-secret-in">
                   <option value = 'header' selected> Authorization Header </option> 
                   <option value = 'request-body'> Request Body </option> 
                 </select>`
@@ -314,7 +314,7 @@ export default function securitySchemeTemplate() {
         </div>
         ${schemes.length > 0
           ? html`  
-            <table class='m-table' style = "width:100%">
+            <table role="presentation" class='m-table' style="width:100%">
               ${schemes.map((v) => html`
                 <tr>  
                   <td style="max-width:500px; overflow-wrap: break-word;">

package/src/templates/server-template.js

@@ -26,7 +26,7 @@ function serverVarsTemplate() {
   return this.selectedServer && this.selectedServer.variables
     ? html`
     <div class="table-title"> SERVER VARIABLES</div>
-    <table class='m-table'>
+    <table role="presentation" class='m-table'>
       ${Object.entries(this.selectedServer.variables).map((kv) => html`
         <tr>
           <td style="vertical-align: middle;" >${kv[0]}</td>

package/src/utils/spec-parser.js

@@ -3,7 +3,8 @@ import { marked } from 'marked';
 import yaml from 'js-yaml';
 import { invalidCharsRegEx } from './common-utils';
 
-export default async function ProcessSpec(requiresLookup, specUrlOrObject, serverUrl = '') {
+export default async function ProcessSpec(specUrlOrObject, serverUrl = '') {
+  const inputSpecIsAUrl = typeof specUrlOrObject === 'string' && specUrlOrObject.match(/^http/);
   let specMeta;
 
   // Dynamically resolve non yaml or json files and insert their descriptions where necessary
@@ -14,7 +15,7 @@ export default async function ProcessSpec(requiresLookup, specUrlOrObject, serve
     return val;
   }
 
-  if (requiresLookup) {
+  if (inputSpecIsAUrl) {
     specMeta = await SwaggerClient({ allowMetaPatches: false, url: specUrlOrObject, responseInterceptor });
   } else if (typeof specUrlOrObject === 'string') {
     specMeta = await SwaggerClient({ allowMetaPatches: false, spec: yaml.load(specUrlOrObject), responseInterceptor });
@@ -71,7 +72,7 @@ export default async function ProcessSpec(requiresLookup, specUrlOrObject, serve
 
   // Servers
   let servers = [];
-  if (jsonParsedSpec.servers && Array.isArray(jsonParsedSpec.servers) && jsonParsedSpec.servers.length) {
+  if (Array.isArray(jsonParsedSpec.servers) && jsonParsedSpec.servers.length) {
     jsonParsedSpec.servers.forEach((v) => {
       let computedUrl = v.url.trim();
       if (!(computedUrl.startsWith('http') || computedUrl.startsWith('//') || computedUrl.startsWith('{'))) {
@@ -90,11 +91,13 @@ export default async function ProcessSpec(requiresLookup, specUrlOrObject, serve
       }
       v.computedUrl = computedUrl;
     });
-    if (serverUrl) {
+    if (serverUrl && !jsonParsedSpec.servers.some(s => s.url === serverUrl || s.computedUrl === serverUrl)) {
       jsonParsedSpec.servers.push({ url: serverUrl, computedUrl: serverUrl });
     }
   } else if (serverUrl) {
     jsonParsedSpec.servers = [{ url: serverUrl, computedUrl: serverUrl }];
+  } else if (inputSpecIsAUrl) {
+    jsonParsedSpec.servers = [{ url: new URL(specUrlOrObject).origin, computedUrl: new URL(specUrlOrObject).origin }];
   } else if (window.location.origin.startsWith('http')) {
     jsonParsedSpec.servers = [{ url: window.location.origin, computedUrl: window.location.origin }];
   } else {