openapi-explorer 0.7.257 → 0.8.264

package/package.json

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

@@ -757,9 +757,6 @@ export default class ApiRequest extends LitElement {
       ${
         this.parameters.length > 0 || this.request_body
           ? html`
-            <button class="m-btn thin-border" part="btn btn-outline" style="margin-right:5px;" @click="${this.onFillRequestData}" title="Fills with example data (if provided)">
-              RESET
-            </button>
             <button class="m-btn thin-border" part="btn btn-outline" style="margin-right:5px;" @click="${this.onClearRequestData}">
               CLEAR
             </button>`
@@ -772,20 +769,6 @@ export default class ApiRequest extends LitElement {
   }
   /* eslint-enable indent */
 
-  onFillRequestData(e) {
-    const requestPanelEl = e.target.closest('.request-panel');
-    const requestPanelInputEls = [...requestPanelEl.querySelectorAll('input, tag-input, textarea:not(.is-hidden)')];
-    requestPanelInputEls.forEach((el) => {
-      if (el.dataset.default) {
-        if (el.tagName.toUpperCase() === 'TAG-INPUT') {
-          el.value = el.dataset.default.split('~|~');
-        } else {
-          el.value = el.dataset.default;
-        }
-      }
-    });
-  }
-
   onClearRequestData(e) {
     const requestPanelEl = e.target.closest('.request-panel');
     const requestPanelInputEls = [...requestPanelEl.querySelectorAll('input, tag-input, textarea:not(.is-hidden)')];
@@ -821,8 +804,8 @@ export default class ApiRequest extends LitElement {
     });
 
     // Query Params
+    const urlQueryParam = new URLSearchParams();
     if (queryParamEls.length > 0) {
-      const urlQueryParam = new URLSearchParams();
       queryParamEls.forEach((el) => {
         if (el.dataset.array === 'false') {
           if (el.value !== '') {
@@ -848,12 +831,10 @@ export default class ApiRequest extends LitElement {
           }
         }
       });
-      fetchUrl = `${fetchUrl}${urlQueryParam.toString() ? '?' : ''}${urlQueryParam.toString()}`;
     }
 
     // Query Params (Dynamic - create from JSON)
     if (queryParamObjTypeEls.length > 0) {
-      const urlDynQueryParam = new URLSearchParams();
       queryParamObjTypeEls.map((el) => {
         try {
           let queryParamObj = {};
@@ -864,24 +845,23 @@ export default class ApiRequest extends LitElement {
             if (typeof queryParamObj[key] === 'object') {
               if (Array.isArray(queryParamObj[key])) {
                 if (paramSerializeStyle === 'spaceDelimited') {
-                  urlDynQueryParam.append(key, queryParamObj[key].join(' '));
+                  urlQueryParam.append(key, queryParamObj[key].join(' '));
                 } else if (paramSerializeStyle === 'pipeDelimited') {
-                  urlDynQueryParam.append(key, queryParamObj[key].join('|'));
+                  urlQueryParam.append(key, queryParamObj[key].join('|'));
                 } else {
                   if (paramSerializeExplode === 'true') { // eslint-disable-line no-lonely-if
                     queryParamObj[key].forEach((v) => {
-                      urlDynQueryParam.append(key, v);
+                      urlQueryParam.append(key, v);
                     });
                   } else {
-                    urlDynQueryParam.append(key, queryParamObj[key]);
+                    urlQueryParam.append(key, queryParamObj[key]);
                   }
                 }
               }
             } else {
-              urlDynQueryParam.append(key, queryParamObj[key]);
+              urlQueryParam.append(key, queryParamObj[key]);
             }
           }
-          fetchUrl = `${fetchUrl}${urlDynQueryParam.toString() ? '?' : ''}${urlDynQueryParam.toString()}`;
         } catch (err) {
           console.log('OpenAPI Explorer: unable to parse %s into object', el.value); // eslint-disable-line no-console
         }
@@ -891,7 +871,7 @@ export default class ApiRequest extends LitElement {
     // Add Authentication api keys if provided
     this.api_keys.filter((v) => v.finalKeyValue).forEach((v) => {
       if (v.in === 'query') {
-        fetchUrl = `${fetchUrl}${fetchUrl.includes('?') ? '&' : '?'}${v.name}=${encodeURIComponent(v.finalKeyValue)}`;
+        urlQueryParam.append(v.name, v.finalKeyValue);
         return;
       }
 
@@ -900,6 +880,8 @@ export default class ApiRequest extends LitElement {
       curlHeaders += ` -H "${v.name}: ${v.finalKeyValue}" \\\n`;
     });
 
+    fetchUrl = `${fetchUrl}${urlQueryParam.toString() ? '?' : ''}${urlQueryParam.toString()}`;
+
     // Final URL for API call
     fetchUrl = `${this.serverUrl.replace(/\/$/, '')}${fetchUrl}`;
     if (fetchUrl.startsWith('http') === false) {

package/src/components/schema-tree.js

@@ -171,7 +171,16 @@ export default class SchemaTree extends LitElement {
         closeBracket = ']';
       }
     }
+
     if (typeof data === 'object') {
+      const flags = data['::flags'] || {};
+      if (flags['🆁'] && this.schemaHideReadOnly === 'true') {
+        return undefined;
+      }
+      if (flags['🆆'] && this.schemaHideWriteOnly === 'true') {
+        return undefined;
+      }
+      const displayLine = [flags['🆁'] || flags['🆆'], description].filter(v => v).join(' ');
       return html`
         <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type'] && data['::type'].startsWith('xxx-of') ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}">
           <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style='min-width:${minFieldColWidth}px'>
@@ -188,13 +197,17 @@ export default class SchemaTree extends LitElement {
             ${data['::type'] === 'xxx-of' && dataType === 'array' ? html`<span style="color:var(--primary-color)">ARRAY</span>` : ''} 
             ${openBracket}
           </div>
-          <div class='td key-descr m-markdown-small'>${unsafeHTML(marked(description || ''))}</div>
+          <div class="td key-descr">
+            <span class="m-markdown-small" style="font-family: var(--font-mono); vertical-align: middle;" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}">
+              ${unsafeHTML(marked(displayLine))}
+            </span>
+          </div>
         </div>
         <div class='inside-bracket ${data['::type'] || 'no-type-info'}' style='padding-left:${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' ? 0 : leftPadding}px;'>
           ${Array.isArray(data) && data[0] ? html`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}`
             : html`
               ${Object.keys(data).map((dataKey) =>
-                ['::title', '::description', '::type', '::props', '::deprecated'].includes(dataKey) && data[dataKey]['::type'] !== 'array' && data[dataKey]['::type'] !== 'object' ? ''
+                dataKey.startsWith('::') && data[dataKey]['::type'] !== 'array' && data[dataKey]['::type'] !== 'object' ? ''
                 : html`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey],
                       data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}`
               )}`

package/src/openapi-explorer.js

@@ -70,8 +70,6 @@ export default class OpenApiExplorer extends LitElement {
       schemaStyle: { type: String, attribute: 'schema-style' },
       schemaExpandLevel: { type: Number, attribute: 'schema-expand-level' },
       schemaDescriptionExpanded: { type: String, attribute: 'schema-description-expanded' },
-      schemaHideReadOnly: { type: String, attribute: 'schema-hide-read-only' },
-      schemaHideWriteOnly: { type: String, attribute: 'schema-hide-write-only' },
 
       // API Server
       serverUrl: { type: String, attribute: 'server-url' },
@@ -116,7 +114,7 @@ export default class OpenApiExplorer extends LitElement {
       loading: { type: Boolean }, // indicates spec is being loaded
       operationsCollapsed: { type: Boolean },
       showAdvancedSearchDialog: { type: Boolean },
-      advancedSearchMatches: { type: Object },
+      advancedSearchMatches: { type: Object }
     };
   }
 
@@ -376,17 +374,8 @@ export default class OpenApiExplorer extends LitElement {
     if (!this.defaultSchemaTab || !'body, model,'.includes(`${this.defaultSchemaTab},`)) { this.defaultSchemaTab = 'model'; }
     if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }
     if (!this.schemaDescriptionExpanded || !'true, false,'.includes(`${this.schemaDescriptionExpanded},`)) { this.schemaDescriptionExpanded = 'true'; }
-    const writeMethodsWithBody = ['post', 'put', 'patch'];
-    if (!this.schemaHideReadOnly) {
-      this.schemaHideReadOnly = writeMethodsWithBody;
-    } else if (this.schemaHideReadOnly !== 'never') {
-      this.schemaHideReadOnly = writeMethodsWithBody.filter((value) => this.schemaHideReadOnly.includes(value));
-      if (this.schemaHideReadOnly.length === 0) {
-        this.schemaHideReadOnly = writeMethodsWithBody;
-      }
-    }
-    this.schemaHideReadOnly += ['get', 'head', 'delete', 'options'];
-    this.schemaHideWriteOnly = this.schemaHideWriteOnly !== 'never';
+    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) {

package/src/utils/schema-utils.js

@@ -502,6 +502,7 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
     // 1. First iterate the regular properties
     if (schema.type === 'object' || schema.properties) {
       obj['::description'] = schema.description || '';
+      obj['::flags'] = { '🆁': schema.readOnly && '🆁', '🆆': schema.writeOnly && '🆆' };
       obj['::type'] = 'object';
       // obj['::deprecated'] = schema.deprecated || false;
       for (const key in schema.properties) {
@@ -580,6 +581,7 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
           const objTypeOption = {
             '::title': schema.title || '',
             '::description': schema.description || '',
+            '::flags': { '🆁': schema.readOnly && '🆁', '🆆': schema.writeOnly && '🆆' },
             '::type': 'object',
             '::deprecated': schema.deprecated || false
           };
@@ -595,8 +597,9 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
           multiTypeOptions[`::OPTION~${i + 1}`] = {
             '::title': schema.title || '',
             '::description': schema.description || '',
+            '::flags': { '🆁': schema.readOnly && '🆁', '🆆': schema.writeOnly && '🆆' },
             '::type': 'array',
-            '::props': schemaInObjectNotation(schema.items, {}, (level + 1)),
+            '::props': schemaInObjectNotation(Object.assign({ readOnly: schema.readOnly, writeOnly: schema.writeOnly }, schema.items), {}, (level + 1)),
           };
         }
       });
@@ -606,6 +609,7 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
   } else if (schema.type === 'object' || schema.properties) {
     obj['::title'] = schema.title || '';
     obj['::description'] = schema.description || '';
+    obj['::flags'] = { '🆁': schema.readOnly && '🆁', '🆆': schema.writeOnly && '🆆' };
     obj['::type'] = 'object';
     obj['::deprecated'] = schema.deprecated || false;
     for (const key in schema.properties) {
@@ -625,8 +629,9 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
       : (schema.items && schema.items.description)
         ? `array<${schema.items.description}>`
         : '';
+    obj['::flags'] = { '🆁': schema.readOnly && '🆁', '🆆': schema.writeOnly && '🆆' };
     obj['::type'] = 'array';
-    obj['::props'] = schemaInObjectNotation(schema.items, {}, (level + 1));
+    obj['::props'] = schemaInObjectNotation(Object.assign({ readOnly: schema.readOnly, writeOnly: schema.writeOnly }, schema.items), {}, (level + 1));
   } else {
     const typeObj = getTypeInfo(schema);
     if (typeObj && typeObj.html) {