fixes #482 - allow scope for non oauth security schemes

Author: mrin9

src/components/api-request.js

@@ -1057,7 +1057,6 @@ export default class ApiRequest extends LitElement {
     fetchUrl = this.path;
     const fetchOptions = {
       method: this.method.toUpperCase(),
-      headers: {},
     };
     // Generate URL using Path Params
     pathParamEls.map((el) => {
@@ -1154,28 +1153,28 @@ export default class ApiRequest extends LitElement {
       curlUrl = fetchUrl;
     }
     curl = `curl -X ${this.method.toUpperCase()} "${curlUrl}" \\\n`;
-
+    const reqHeaders = new Headers();
     if (acceptHeader) {
       // Uses the acceptHeader from Response panel
-      fetchOptions.headers.Accept = acceptHeader;
+      reqHeaders.append('Accept', acceptHeader);
       curlHeaders += ` -H "Accept: ${acceptHeader}" \\\n`;
     } else if (this.accept) {
-      fetchOptions.headers.Accept = this.accept;
+      reqHeaders.append('Accept', this.accept);
       curlHeaders += ` -H "Accept: ${this.accept}" \\\n`;
     }
 
     // Add Authentication Header if provided
     this.api_keys
       .filter((v) => (v.in === 'header'))
       .forEach((v) => {
-        fetchOptions.headers[v.name] = v.finalKeyValue;
+        reqHeaders.append(v.name, v.finalKeyValue);
         curlHeaders += ` -H "${v.name}: ${v.finalKeyValue}" \\\n`;
       });
 
     // Add Header Params
     headerParamEls.map((el) => {
       if (el.value) {
-        fetchOptions.headers[el.dataset.pname] = el.value;
+        reqHeaders.append(el.dataset.pname, el.value);
         curlHeaders += ` -H "${el.dataset.pname}: ${el.value}" \\\n`;
       }
     });
@@ -1272,7 +1271,7 @@ export default class ApiRequest extends LitElement {
       // Common for all request-body
       if (!requestBodyType.includes('form-data')) {
         // For multipart/form-data dont set the content-type to allow creation of browser generated part boundaries
-        fetchOptions.headers['Content-Type'] = requestBodyType;
+        reqHeaders.append('Content-Type', requestBodyType);
       }
       curlHeaders += ` -H "Content-Type: ${requestBodyType}" \\\n`;
     }
@@ -1291,6 +1290,7 @@ export default class ApiRequest extends LitElement {
     if (this.fetchCredentials) {
       fetchOptions.credentials = this.fetchCredentials;
     }
+    fetchOptions.headers = reqHeaders;
     const fetchRequest = new Request(fetchUrl, fetchOptions);
     this.dispatchEvent(new CustomEvent('before-try', {
       bubbles: true,

src/templates/security-scheme-template.js

@@ -1,3 +1,4 @@
+/* eslint-disable arrow-body-style */
 import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import marked from 'marked';
@@ -449,19 +450,18 @@ export function pathSecurityTemplate(pathSecurity) {
     pathSecurity.forEach((pSecurity) => {
       const andSecurityKeys1 = [];
       const andKeyTypes = [];
-      let pathScopes = '';
       Object.keys(pSecurity).forEach((pathSecurityKey) => {
+        let pathScopes = '';
         const s = this.resolvedSpec.securitySchemes.find((ss) => ss.securitySchemeId === pathSecurityKey);
-        if (!pathScopes && Array.isArray(pSecurity[pathSecurityKey])) {
+        if (pSecurity[pathSecurityKey] && Array.isArray(pSecurity[pathSecurityKey])) {
           pathScopes = pSecurity[pathSecurityKey].join(', ');
         }
         if (s) {
           andKeyTypes.push(s.typeDisplay);
-          andSecurityKeys1.push(s);
+          andSecurityKeys1.push({ ...s, ...({ scopes: pathScopes }) });
         }
       });
       orSecurityKeys1.push({
-        pathScopes,
         securityTypes: andKeyTypes.length > 1 ? `${andKeyTypes[0]} + ${andKeyTypes.length - 1} more` : andKeyTypes[0],
         securityDefs: andSecurityKeys1,
       });
@@ -485,7 +485,20 @@ export function pathSecurityTemplate(pathSecurity) {
                 <div class="tooltip-text" style="position:absolute; color: var(--fg); top:26px; right:0; border:1px solid var(--border-color);padding:2px 4px; display:block;">
                   ${orSecurityItem1.securityDefs.length > 1 ? html`<div>Requires <b>all</b> of the following </div>` : ''}
                   <div style="padding-left: 8px">
-                    ${orSecurityItem1.securityDefs.map((andSecurityItem, j) => html`
+                    ${orSecurityItem1.securityDefs.map((andSecurityItem, j) => {
+                      const scopeHtml = html`${andSecurityItem.scopes !== ''
+                        ? html`
+                          <div>
+                            <b>Required scopes:</b> 
+                            <br/> 
+                            <div style="margin-left:8px">  
+                              ${andSecurityItem.scopes.split(',').map((scope, cnt) => html`${cnt === 0 ? '' : '┃'}<span>${scope}</span>`)}
+                            </div>  
+                          </div>`
+                        : ''
+                      }`;
+
+                      return html`
                       ${andSecurityItem.type === 'oauth2'
                         ? html`
                           <div>
@@ -494,31 +507,23 @@ export function pathSecurityTemplate(pathSecurity) {
                               : 'Needs'
                             }
                             OAuth Token <span style="font-family:var(--font-mono); color:var(--primary-color);">${andSecurityItem.securitySchemeId}</span> in <b>Authorization header</b>
-                            ${orSecurityItem1.pathScopes !== ''
-                              ? html`
-                                <div>
-                                  <b>Required scopes:</b> 
-                                  <br/> 
-                                  <div style="margin-left:8px">  
-                                    ${orSecurityItem1.pathScopes.split(',').map((scope, cnt) => html`${cnt === 0 ? '' : '┃'}<span>${scope}</span>`)}
-                                  </div>  
-                                </div>`
-                              : ''
-                            }
+                            ${scopeHtml}
                           </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>
+                              ${scopeHtml}
                             </div>`
                           : html`
                             <div>
                               ${orSecurityItem1.securityDefs.length > 1 ? html`<b>${j + 1}.</b> &nbsp;` : html`Requires`} 
                               Token in <b>${andSecurityItem.name} ${andSecurityItem.in}</b>
+                              ${scopeHtml}
                             </div>`
-                      }
-                    `)}
+                      }`;
+                    })}
                   </div>  
                 </div>
               </div>