openapi-explorer 0.8.291 → 0.8.294

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openapi-explorer",
-  "version": "0.8.291",
+  "version": "0.8.294",
   "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

@@ -65,7 +65,6 @@ export default class OpenApiExplorer extends LitElement {
       defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },
       responseAreaHeight: { type: String, attribute: 'response-area-height' },
       fillRequestWithDefault: { type: String, attribute: 'fill-defaults' },
-      onNavTagClick: { type: String, attribute: 'on-nav-tag-click' },
 
       // Schema Styles
       schemaStyle: { type: String, attribute: 'schema-style' },
@@ -379,7 +378,6 @@ export default class OpenApiExplorer extends LitElement {
     this.schemaHideReadOnly = ['post', 'put', 'patch'].join(',');
     this.schemaHideWriteOnly = true;
     if (!this.fillRequestWithDefault || !'true, false,'.includes(`${this.fillRequestWithDefault},`)) { this.fillRequestWithDefault = 'true'; }
-    if (!this.onNavTagClick || !'expand-collapse, show-description,'.includes(`${this.onNavTagClick},`)) { this.onNavTagClick = 'expand-collapse'; }
     if (!this.responseAreaHeight) {
       this.responseAreaHeight = '300px';
     }
@@ -510,16 +508,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/styles/nav-styles.js

@@ -29,14 +29,11 @@ export default css`
   justify-content: space-between;
   flex-direction: row;
 }
-.nav-bar.read .nav-bar-tag-icon {
-  display:none;
-}
 
 .nav-bar-tag-icon {
+  font-size: 16px;
+  padding-right: 1px;
   color: var(--nav-text-color);
-  font-size: 20px; 
-  margin-right: -16px;
 }
 .nav-bar-tag-icon:hover {
   color:var(--nav-hover-text-color);
@@ -44,15 +41,15 @@ export default css`
 .nav-bar.focused .nav-bar-tag-and-paths.collapsed .nav-bar-paths-under-tag {
   display:none;
 }
-.nav-bar.focused .nav-bar-tag-and-paths .nav-bar-tag-icon::after {
-  content: '▸';
-  font-size: 16px;
-  text-align: center;
-  display: inline-block;
+
+.nav-bar-tag-and-paths.collapsed .nav-bar-tag-icon.collapse-button-arrow {
+  display: none;
 }
-.nav-bar.focused .nav-bar-tag-and-paths.expanded .nav-bar-tag-icon::after {
-  transform: rotate(90deg);
+
+.nav-bar-tag-and-paths.expanded .nav-bar-tag-icon.expand-button-arrow {
+  display: none;
 }
+
 .nav-bar.focused, .nav-scroll {
   border-top: 1px solid var(--secondary-color);
 }
@@ -71,7 +68,7 @@ export default css`
   color: var(--secondary-color);
   border-left:4px solid transparent;
   font-weight:bold;
-  padding: 15px 30px 15px 10px;
+  padding: 15px 15px 15px 10px;
   text-transform: capitalize;
 }
 
@@ -108,9 +105,13 @@ export default css`
   font-size: var(--font-size-small);
   color: var(--nav-text-color);
   padding: 15px 15px 5px 5px;
-  filter:opacity(0.5);
   font-weight:bold;
   border-bottom: 1px solid var(--nav-text-color);
+  background: var(--nav-bg-color);
+}
+.sticky-scroll-element {
+  position: sticky;
+  top: 0;
 }
 
 .nav-bar-h2 {margin-left:12px;}

package/src/templates/focused-endpoint-template.js

@@ -1,6 +1,4 @@
 import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import { marked } from 'marked';
 import { expandedEndpointBodyTemplate } from './expanded-endpoint-template';
 import '../components/api-request';
 import '../components/api-response';
@@ -31,21 +29,7 @@ function defaultContentTemplate() {
 
 /* eslint-disable indent */
 function focusedTagBodyTemplate(tag) {
-  return html`
-    <h1 id="${tag.elementId}">${tag.name}</h1>
-    ${this.onNavTagClick === 'show-description' && tag.description
-      ? html`
-        <div class="m-markdown">
-          ${
-            unsafeHTML(`
-            <div class="m-markdown regular-font">
-              ${marked(tag.description || '')}
-            </div>`)
-          }
-        </div>`
-      : ''
-    }
-  `;
+  return html`<h1 id="${tag.elementId}">${tag.name}</h1>`;
 }
 
 export default function focusedEndpointTemplate() {

package/src/templates/navbar-template.js

@@ -8,32 +8,44 @@ export function expandCollapseNavBarTag(navLinkEl, action = 'toggle') {
     if (expand) {
       tagAndPathEl.classList.remove('collapsed');
       tagAndPathEl.classList.add('expanded');
-    } else {
-      tagAndPathEl.classList.remove('expanded');
-      tagAndPathEl.classList.add('collapsed');
+      return;
     }
-  }
-}
 
-export function expandCollapseAll(navEl, action = 'expand-all') {
-  const elList = [...navEl.querySelectorAll('.nav-bar-tag-and-paths')];
-  if (action === 'expand-all') {
-    elList.map((el) => {
-      expandCollapseNavBarTag(el, 'expand');
-    });
-  } else {
-    elList.map((el) => {
-      expandCollapseNavBarTag(el, 'collapse');
-    });
+    tagAndPathEl.classList.remove('expanded');
+    tagAndPathEl.classList.add('collapsed');
   }
 }
 
-function onExpandCollapse(e) {
+function onExpandCollapse(tagId, e) {
+  const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId);
+  if (!tag) {
+    return;
+  }
   expandCollapseNavBarTag(e.target, 'toggle');
+  tag.expanded = !tag.expanded;
+
+  if (this.resolvedSpec.tags.some(t => t.expanded)) {
+    this.operationsCollapsed = false;
+  }
+
+  if (this.resolvedSpec.tags.every(t => !t.expanded)) {
+    this.operationsCollapsed = true;
+  }
 }
 
-function onExpandCollapseAll(e, action = 'expand-all') {
-  expandCollapseAll(e.target.closest('.nav-scroll'), action);
+export function expandCollapseAll(e, action = 'expand-all') {
+  const navEl = e.target.closest('.nav-scroll');
+
+  const elList = [...navEl.querySelectorAll('.nav-bar-tag-and-paths')];
+  if (action === 'expand-all') {
+    elList.map((el) => { expandCollapseNavBarTag(el, 'expand'); });
+    this.resolvedSpec.tags.forEach(t => { t.expanded = true; });
+    this.operationsCollapsed = false;
+  } else {
+    elList.map((el) => { expandCollapseNavBarTag(el, 'collapse'); });
+    this.resolvedSpec.tags.forEach(t => { t.expanded = false; });
+    this.operationsCollapsed = true;
+  }
 }
 
 /* eslint-disable indent */
@@ -96,17 +108,19 @@ export default function navbarTemplate() {
       <slot name="nav-section" class="custom-nav-section" data-content-id='section' @click = '${(e) => this.scrollToEventTarget(e, false)}'></slot>
 
       <slot name="operations-header">
-        <div id='link-paths' class='nav-bar-section' part="navbar-operations-header">
-        <div class='nav-bar-section-title'>OPERATIONS</div>  
-        <div style="display:flex; margin-left:10px;">
-            ${this.renderStyle === 'focused' && this.resolvedSpec.tags.length > 1
-              ? html`
-                ${this.operationsCollapsed
-                  ? html`<div @click="${(e) => { onExpandCollapseAll.call(this, e, 'expand-all'); this.operationsCollapsed = false; }}" style="font-size: 16px; transform: rotate(0deg); cursor: pointer;">▸</div>`
-                  : html`<div @click="${(e) => { onExpandCollapseAll.call(this, e, 'collapse-all'); this.operationsCollapsed = true; }}" style="font-size: 16px;  transform: rotate(90deg); cursor: pointer;">▸</div>`
-                }`
-              : ''
-            }  
+        <div class="sticky-scroll-element">
+          <div id='link-paths' class='nav-bar-section' part="navbar-operations-header">
+          <div class='nav-bar-section-title'>OPERATIONS</div>  
+          <div style="display:flex; margin-left:10px;">
+              ${this.renderStyle === 'focused' && this.resolvedSpec.tags.length > 1
+                ? html`
+                  ${this.operationsCollapsed
+                    ? html`<div @click="${(e) => { expandCollapseAll.call(this, e, 'expand-all'); }}" style="font-size: 16px; transform: rotate(0deg); cursor: pointer;">▸</div>`
+                    : html`<div @click="${(e) => { expandCollapseAll.call(this, e, 'collapse-all'); }}" style="font-size: 16px;  transform: rotate(90deg); cursor: pointer;">▸</div>`
+                  }`
+                : ''
+              }  
+            </div>
           </div>
         </div>
       </slot>
@@ -118,25 +132,15 @@ export default function navbarTemplate() {
           <slot name="nav-${tag.elementId}">
             <div class='nav-bar-tag-and-paths ${tag.expanded ? 'expanded' : 'collapsed'}'>
               ${tag.name === 'General ⦂'
-                ? html`<hr style="border:none; border-top: 1px dotted var(--nav-text-color); opacity:0.4; margin-top:-1px;"/>`
+                ? html``
                 : html`
-                  <div 
-                    class='nav-bar-tag' 
-                    id="link-${tag.elementId}" 
-                    data-content-id='${tag.elementId}'
-                    @click='${(e) => {
-                      if (this.renderStyle === 'focused' && this.onNavTagClick === 'expand-collapse') {
-                        onExpandCollapse.call(this, e);
-                      } else {
-                        this.scrollToEventTarget(e, false);
-                      }
-                    }}'>
-                    <div>${tag.name}</div>
-                    <div class="nav-bar-tag-icon" @click="${(e) => {
-                      if (this.renderStyle === 'focused' && this.onNavTagClick === 'show-description') {
-                        onExpandCollapse.call(this, e);
-                      }
-                    }}">
+                  <div  class='nav-bar-tag' id="link-${tag.elementId}" data-content-id='${tag.elementId}'
+                    @click='${(e) => { onExpandCollapse.call(this, tag.elementId, e); }}'>
+
+                    <div style="display: flex; justify-content: space-between; width: 100%;">
+                      <div>${tag.name}</div>
+                      <div class="nav-bar-tag-icon expand-button-arrow">▸</div>
+                      <div class="nav-bar-tag-icon collapse-button-arrow">▾</div>
                     </div>
                   </div>
                 `
@@ -170,8 +174,10 @@ export default function navbarTemplate() {
       <!-- COMPONENTS -->
       ${this.resolvedSpec.components && this.showComponents === 'true'
         ? html`
-          <div id='link-components' class='nav-bar-section'>
-            <div class='nav-bar-section-title'>COMPONENTS</div>
+          <div class="sticky-scroll-element">
+            <div id='link-components' class='nav-bar-section'>
+              <div class='nav-bar-section-title'>COMPONENTS</div>
+            </div>
           </div>
           ${this.resolvedSpec.components.map((component) => (component.subComponents.length
             ? html`

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 {