openapi-explorer 0.6.221 → 0.6.225

package/package.json

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

@@ -145,8 +145,8 @@ export default class ApiRequest extends LitElement {
       tableRows.push(html`
       <tr> 
         <td style="width:160px; min-width:50px;">
-          <div class="param-name">
-            ${param.required ? html`<span style='color:var(--red)'>*</span>` : ''}${param.name}
+          <div class="param-name ${paramSchema.deprecated ? 'deprecated' : ''}">
+            ${param.name}${!paramSchema.deprecated && param.required ? html`<span style='color:var(--red);'>*</span>` : ''}
           </div>
           <div class="param-type">
             ${paramSchema.type === 'array'
@@ -497,11 +497,8 @@ export default class ApiRequest extends LitElement {
         formDataTableRows.push(html`
         <tr> 
           <td style="width:160px; min-width:100px;">
-            <div class="param-name">
-              ${fieldSchema.required
-                ? html`<span style='color:var(--red);'>*</span>${fieldName}`
-                : html`${fieldName}`
-              }
+            <div class="param-name ${fieldSchema.deprecated ? 'deprecated' : ''}">
+              ${fieldName}${!fieldSchema.deprecated && (schema.required?.includes(fieldName) || fieldSchema.required) ? html`<span style='color:var(--red);'>*</span>` : ''}
             </div>
             <div class="param-type">${paramSchema.type}</div>
           </td>  
@@ -813,7 +810,7 @@ export default class ApiRequest extends LitElement {
     fetchUrl = this.path;
     const fetchOptions = {
       method: this.method.toUpperCase(),
-      headers: {},
+      headers: new Headers()
     };
     // Generate URL using Path Params
     pathParamEls.map((el) => {
@@ -896,7 +893,7 @@ export default class ApiRequest extends LitElement {
       }
 
       // Otherwise put it in the header
-      fetchOptions.headers[v.name] = v.finalKeyValue;
+      fetchOptions.headers.append(v.name, v.finalKeyValue);
       curlHeaders += ` -H "${v.name}: ${v.finalKeyValue}" \\\n`;
     });
 
@@ -912,17 +909,17 @@ export default class ApiRequest extends LitElement {
 
     if (acceptHeader) {
       // Uses the acceptHeader from Response panel
-      fetchOptions.headers.Accept = acceptHeader;
+      fetchOptions.headers.append('Accept', acceptHeader);
       curlHeaders += ` -H "Accept: ${acceptHeader}" \\\n`;
     } else if (this.accept) {
-      fetchOptions.headers.Accept = this.accept;
+      fetchOptions.headers.append('Accept', this.accept);
       curlHeaders += ` -H "Accept: ${this.accept}" \\\n`;
     }
 
     // Add Header Params
     headerParamEls.map((el) => {
       if (el.value) {
-        fetchOptions.headers[el.dataset.pname] = el.value;
+        fetchOptions.headers.append(el.dataset.pname, el.value);
         curlHeaders += ` -H "${el.dataset.pname}: ${el.value}" \\\n`;
       }
     });
@@ -1004,18 +1001,22 @@ export default class ApiRequest extends LitElement {
         const exampleTextAreaEl = requestPanelEl.querySelector('.request-body-param-user-input');
         if (exampleTextAreaEl && exampleTextAreaEl.value) {
           fetchOptions.body = exampleTextAreaEl.value;
-          // curlData = ` -d ${JSON.stringify(exampleTextAreaEl.value.replace(/(\r\n|\n|\r)/gm, '')).replace(/\\"/g, "'")} \\ \n`;
-          try {
-            curlData = ` -d '${JSON.stringify(JSON.parse(exampleTextAreaEl.value))}' \\\n`;
-          } catch (err) {
-            curlData = ` -d '${exampleTextAreaEl.value.replace(/(\r\n|\n|\r)/gm, '')}' \\\n`;
+          if (requestBodyType.includes('json')) {
+            try {
+              curlData = ` -d '${JSON.stringify(JSON.parse(exampleTextAreaEl.value))}' \\\n`;
+            } catch (err) { /* Ignore unparseable JSON */ }
+          }
+
+          if (!curlData) {
+            // Save single quotes wrapped => 'text' => `"'"text"'"`
+            curlData = ` -d '${exampleTextAreaEl.value.replace(/'/g, '\'"\'"\'')}' \\\n`;
           }
         }
       }
       // Common for all request-body
       if (!requestBodyType.includes('form-data')) {
         // For multipart/form-data don't set the content-type to allow creation of browser generated part boundaries
-        fetchOptions.headers['Content-Type'] = requestBodyType;
+        fetchOptions.headers.append('Content-Type', requestBodyType);
       }
       curlHeaders += ` -H "Content-Type: ${requestBodyType}" \\\n`;
     }

package/src/openapi-explorer.js

@@ -199,23 +199,6 @@ export default class OpenApiExplorer extends LitElement {
         background-image: linear-gradient(to right, rgba(0,0,0,0), var(--border-color), rgba(0,0,0,0));
       }
 
-      .section-tag-header:hover::after {
-        position:absolute;
-        margin-left:-24px;
-        font-size:20px;
-        top: calc(50% - 14px);
-        color:var(--primary-color);
-        content: '⬆'; 
-      }
-
-      .collapsed .section-tag-header::after {
-        position:absolute;
-        margin-left:-24px;
-        font-size:20px;
-        top: calc(50% - 14px);
-        color: var(--border-color);
-        content: '⬇'; 
-      }
       .collapsed .section-tag-header:hover::after {
         color:var(--primary-color);
       }

package/src/styles/api-request-styles.js

@@ -19,6 +19,9 @@ export default css`
   color: var(--fg); 
   font-family: var(--font-mono);
 }
+.api-request .param-name.deprecated {
+  text-decoration: line-through;
+}
 .api-request .param-type {
   color: var(--light-fg); 
   font-family: var(--font-regular);

package/src/templates/endpoint-template.js

@@ -21,21 +21,33 @@ function toggleExpand(path) {
   this.requestUpdate();
 }
 
-export function expandCollapseAll(operationsRootEl, action = 'expand-all') {
-  const elList = [...operationsRootEl.querySelectorAll('.section-tag')];
-  if (action === 'expand-all') {
-    elList.map((el) => {
-      el.classList.replace('collapsed', 'expanded');
-    });
+function toggleTag(tagElement, tagId) {
+  const sectionTag = tagElement.target.closest('.section-tag');
+  const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId);
+  tag.expanded = !tag.expanded;
+  if (tag.expanded) {
+    sectionTag.classList.remove('collapsed');
+    sectionTag.classList.add('expanded');
   } else {
-    elList.map((el) => {
-      el.classList.replace('expanded', 'collapsed');
-    });
+    sectionTag.classList.remove('expanded');
+    sectionTag.classList.add('collapsed');
   }
+  this.requestUpdate();
 }
-
-function onExpandCollapseAll(e, action = 'expand-all') {
-  expandCollapseAll.call(this, e.target.closest('.operations-root'), action);
+export function expandCollapseAll(currentElement, action = 'expand-all') {
+  const operationsRootEl = currentElement.target.closest('.operations-root');
+  const elList = [...operationsRootEl.querySelectorAll('.section-tag')];
+  const expand = action === 'expand-all';
+  this.resolvedSpec.tags.forEach(t => t.expanded = expand);
+  elList.map((el) => {
+    if (expand) {
+      el.classList.remove('collapsed');
+      el.classList.add('expanded');
+    } else {
+      el.classList.remove('expanded');
+      el.classList.add('collapsed');
+    }
+  });
 }
 
 /* eslint-disable indent */
@@ -127,14 +139,14 @@ function endpointBodyTemplate(path) {
 export default function endpointTemplate() {
   return html`
     <div style="display:flex; justify-content:flex-end; padding-right: 1rem; font-size: 14px;"> 
-      <span @click="${(e) => onExpandCollapseAll(e, 'expand-all')}" style="color:var(--primary-color); cursor: pointer;">Expand</span> 
+      <span @click="${(e) => expandCollapseAll.call(this, e, 'expand-all')}" style="color:var(--primary-color); cursor: pointer;">Expand</span> 
       &nbsp;|&nbsp; 
-      <span @click="${(e) => onExpandCollapseAll(e, 'collapse-all')}" style="color:var(--primary-color); cursor: pointer;">Collapse</span>
+      <span @click="${(e) => expandCollapseAll.call(this, e, 'collapse-all')}" style="color:var(--primary-color); cursor: pointer;">Collapse</span>
     </div>
     ${(this.resolvedSpec && this.resolvedSpec.tags || []).map((tag) => html`
     <div class='regular-font section-gap section-tag ${tag.expanded ? 'expanded' : 'collapsed'}' > 
     
-      <div class='section-tag-header' @click="${() => { tag.expanded = !tag.expanded; this.requestUpdate(); }}">
+      <div class='section-tag-header' @click="${(e) => toggleTag.call(this, e, tag.elementId)}">
         <div id='${tag.elementId}' class="sub-title tag" style="color:var(--primary-color)">${tag.name}</div>
       </div>
       <div class='section-tag-body'>

package/src/templates/navbar-template.js

@@ -5,11 +5,13 @@ import { pathIsInSearch } from '../utils/common-utils';
 export function expandCollapseNavBarTag(navLinkEl, action = 'toggle') {
   const tagAndPathEl = navLinkEl && navLinkEl.closest('.nav-bar-tag-and-paths');
   if (tagAndPathEl) {
-    const isExpanded = tagAndPathEl.classList.contains('expanded');
-    if (isExpanded && (action === 'toggle' || action === 'collapse')) {
-      tagAndPathEl.classList.replace('expanded', 'collapsed');
-    } else if (!isExpanded && (action === 'toggle' || action === 'expand')) {
-      tagAndPathEl.classList.replace('collapsed', 'expanded');
+    const expand = tagAndPathEl.classList.contains('collapsed') && action === 'toggle' || action === 'expand';
+    if (expand) {
+      tagAndPathEl.classList.remove('collapsed');
+      tagAndPathEl.classList.add('expanded');
+    } else {
+      tagAndPathEl.classList.remove('expanded');
+      tagAndPathEl.classList.add('collapsed');
     }
   }
 }
@@ -18,11 +20,11 @@ export function expandCollapseAll(navEl, action = 'expand-all') {
   const elList = [...navEl.querySelectorAll('.nav-bar-tag-and-paths')];
   if (action === 'expand-all') {
     elList.map((el) => {
-      el.classList.replace('collapsed', 'expanded');
+      expandCollapseNavBarTag(el, 'expand');
     });
   } else {
     elList.map((el) => {
-      el.classList.replace('expanded', 'collapsed');
+      expandCollapseNavBarTag(el, 'collapse');
     });
   }
 }

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

@@ -386,25 +386,35 @@ export default function securitySchemeTemplate() {
 `;
 }
 
+function getOauthScopeTemplate(scopes) {
+  if (!scopes || !scopes.length || !Array.isArray(scopes)) {
+    return '';
+  }
+
+  return html`
+    <div>
+      <b>Required scopes:</b> 
+      <br/> 
+      <div style="margin-left:8px">  
+        ${scopes.map(scope => html`<span>${scope}</span>&nbsp;`)}
+      </div>  
+    </div>`;
+}
+
 export function pathSecurityTemplate(pathSecurity) {
   if (this.resolvedSpec.securitySchemes && pathSecurity) {
     const orSecurityKeys1 = [];
     pathSecurity.forEach((pSecurity) => {
       const andSecurityKeys1 = [];
       const andKeyTypes = [];
-      let pathScopes = '';
       Object.keys(pSecurity).forEach((pathSecurityKey) => {
         const s = this.resolvedSpec.securitySchemes.find((ss) => ss.apiKeyId === pathSecurityKey);
-        if (!pathScopes) {
-          pathScopes = pSecurity[pathSecurityKey].join(', ');
-        }
         if (s) {
           andKeyTypes.push(s.typeDisplay);
-          andSecurityKeys1.push(s);
+          andSecurityKeys1.push({ ...s, scopes: pSecurity[pathSecurityKey] });
         }
       });
       orSecurityKeys1.push({
-        pathScopes,
         securityTypes: andKeyTypes.length > 1 ? `${andKeyTypes[0]} + ${andKeyTypes.length - 1} more` : andKeyTypes[0],
         securityDefs: andSecurityKeys1,
       });
@@ -430,22 +440,21 @@ export function pathSecurityTemplate(pathSecurity) {
                     ? html`
                       <div>
                         ${orSecurityItem1.securityDefs.length > 1 ? html`<b>${j + 1}.</b> &nbsp;` : html`Requires`}
-                        OAuth Token (${andSecurityItem.apiKeyId}) in <b>Authorization header</b>
-                        ${orSecurityItem1.pathScopes !== ''
-                          ? html`. Required scopes: <ul>${orSecurityItem1.pathScopes.split(',').map((scope) => html`<li>${scope}</li>`)}</ul>`
-                          : ''
-                        }
+                        OAuth token (${andSecurityItem.apiKeyId}) in <b>Authorization header</b>
+                        ${getOauthScopeTemplate(andSecurityItem.scopes)}
                       </div>`
                     : andSecurityItem.type === 'http'
                       ? html`
                         <div>
                           ${orSecurityItem1.securityDefs.length > 1 ? html`<b>${j + 1}.</b> &nbsp;` : html`Requires`} 
                           ${andSecurityItem.scheme === 'basic' ? 'Base 64 encoded username:password' : 'Bearer Token'} in <b>Authorization header</b>
+                          ${getOauthScopeTemplate(andSecurityItem.scopes)}
                         </div>`
                       : html`
                         <div>
                           ${orSecurityItem1.securityDefs.length > 1 ? html`<b>${j + 1}.</b> &nbsp;` : html`Requires`} 
                           Token in <b>${andSecurityItem.name} ${andSecurityItem.in}</b>
+                          ${getOauthScopeTemplate(andSecurityItem.scopes)}
                         </div>`
                   }
                 `)}

package/src/utils/schema-utils.js

@@ -631,7 +631,8 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
 }
 
 /* Create Example object */
-export function generateExample(examples, example, schema, mimeType, includeReadOnly = true, includeWriteOnly = true, outputType) {
+export function generateExample(examples, example, schema, rawMimeType, includeReadOnly = true, includeWriteOnly = true, outputType) {
+  const mimeType = rawMimeType || 'application/json';
   const finalExamples = [];
   // First check if examples is provided
   if (examples) {

package/src/utils/spec-parser.js

@@ -54,7 +54,7 @@ export default async function ProcessSpec(requiresLookup, specUrlOrObject, gener
     } else if (v.type === 'apiKey') {
       v.typeDisplay = `API Key (${v.name})`;
     } else if (v.type === 'oauth2') {
-      v.typeDisplay = `OAuth (${v.apiKeyId})`;
+      v.typeDisplay = 'OAuth2.0';
     } else {
       v.typeDisplay = v.type;
     }
@@ -281,6 +281,18 @@ function groupByTags(openApiSpec, generateMissingTags = false) {
             finalParameters = pathOrHookObj.parameters ? pathOrHookObj.parameters.slice(0) : [];
           }
 
+          // Remove bad callbacks
+          if (pathOrHookObj.callbacks) {
+            for (const [callbackName, callbackConfig] of Object.entries(pathOrHookObj.callbacks)) {
+              const originalCallbackEntries = Object.entries(callbackConfig);
+              const filteredCallbacks = originalCallbackEntries.filter((entry) => typeof entry[1] === 'object') || [];
+              pathOrHookObj.callbacks[callbackName] = Object.fromEntries(filteredCallbacks);
+              if (filteredCallbacks.length !== originalCallbackEntries.length) {
+                console.warn(`OpenAPI Explorer: Invalid Callback found in ${callbackName}`); // eslint-disable-line no-console
+              }
+            }
+          }
+
           // Update Responses
           tagObj.paths.push({
             show: true,