fixes #846 #829 show deprecation for array type fields in schema views

rapi-doc · Sep 20, 2024 · 6b1836d · 6b1836d
1 parent e58bebc
commit 6b1836d
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 13 deletions.
diff --git a/docs/examples/deprecated-test.html b/docs/examples/deprecated-test.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+  <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src='https://www.googletagmanager.com/gtag/js?id=UA-132775238-1'></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-132775238-1');
+    </script>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes'>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&family=Roboto+Mono&display=swap" rel="stylesheet">
+    <link href='../index.css' rel='stylesheet'>
+    <script type='module' src='../rapidoc-min.js'></script>
+  </head>
+  <body>
+    <rapi-doc spec-url="../specs/deprecated-test.yaml"
+      id = "thedoc"
+      allow-authentication = "false" 
+      allow-search = "false"
+      show-info = "false"
+      show-header = "false"
+      render-style = "read"
+      allow-try = "false" 
+      regular-font = 'Open Sans'
+      mono-font = "Roboto Mono"
+      theme = "dark"
+      schema-style='table'
+    > 
+      <div slot="nav-logo" style="width:100%; display: flex; flex-direction:column;">
+        <div style="text-align: center; padding: 0 0 12px 0; color:#47AFE8"> Schema Display Style </div>
+        <div style="display: flex;justify-content: center; margin: 2px 0">
+          <button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('schema-style', 'tree')" >Tree</button>
+          <button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('schema-style', 'table')" >Table</button>
+        </div>
+      </div>
+  </rapi-doc>
+  </body>
+</html>
diff --git a/docs/specs/deprecated-test.yaml b/docs/specs/deprecated-test.yaml
@@ -0,0 +1,78 @@
+openapi: 3.1.0
+info:
+  title: test
+  version: '1.0'
+servers:
+  - url: 'http://localhost:3000'
+paths:
+  /regular-path:
+    get:
+      summary: Non Deprecated path
+  /deprecated-path:
+    get:
+      summary: Deprecated path
+      deprecated: true
+      parameters:
+        - name: query-param
+          in: query
+          required: true
+          schema:
+            type: string
+        - name: query-param-deprecated
+          in: query
+          deprecated: true
+          schema:
+            type: string
+      responses:
+        '200':
+          description: Test
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  f1-string:
+                    type: string
+                  f1-string-deprecated:
+                    type: string
+                    deprecated: true
+                  f2-obj-array:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/Foo'
+                  f2-obj-array-deprecated:
+                    type: array
+                    deprecated: true
+                    items:
+                      $ref: '#/components/schemas/Foo'
+                  f3-int-array:
+                    type: array
+                    items:
+                      type: integer
+                  f3-int-array-deprecated:
+                    type: array
+                    deprecated: true
+                    items:
+                      type: integer
+                  f4-object:
+                    type: object
+                    properties:
+                      id:
+                        type: string
+                  f4-object-deprecated:
+                    type: object
+                    deprecated: true
+                    properties:
+                      id:
+                        type: string
+
+      operationId: get-test
+      description: Test
+components:
+  schemas:
+    Foo:
+      title: Foo
+      type: object
+      properties:
+        id:
+          type: string
diff --git a/index.html b/index.html
@@ -31,11 +31,11 @@
     https://cesdev.eng.sonicwall.com/api/q/openapi
 -->
 <rapi-doc 
-  spec-url = "https://api.apis.guru/v2/specs/azure.com/azureactivedirectory/2017-04-01/swagger.yaml" 
+  spec-url = "./specs/temp.yaml" 
   id="thedoc" 
   theme = "dark"
   render-style="read" 
-  schema-style="table"
+  schema-style="tree"
   show-method-in-nav-bar = "true"
   use-path-in-nav-bar = "true"
   show-components = "true"

diff --git a/src/components/schema-table.js b/src/components/schema-table.js
@@ -199,7 +199,7 @@ export default class SchemaTable extends LitElement {
         ${newSchemaLevel >= 0 && key
           ? html`
             <div class='tr ${newSchemaLevel <= this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}' data-obj='${keyLabel}' title="${isDeprecated || data['::deprecated'] ? 'Deprecated' : ''}">
-              <div class="td key ${isDeprecated || data['::deprecated'] ? 'deprecated' : ''}" style='padding-left:${leftPadding}px'>
+              <div class="td key ${(isDeprecated || data['::deprecated']) ? 'deprecated' : ''}" style='padding-left:${leftPadding}px'>
                 ${(keyLabel || keyDescr)
                   ? html`
                     <span class='obj-toggle ${newSchemaLevel < this.schemaExpandLevel ? 'expanded' : 'collapsed'}' data-obj='${keyLabel}'>
@@ -210,8 +210,8 @@ export default class SchemaTable extends LitElement {
                 ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION')
                   ? html`<span class="xxx-of-key" style="margin-left:-6px">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>`
                   : keyLabel.endsWith('*')
-                    ? html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${isDeprecated || data['::deprecated'] ? '✗' : ''} ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>`
-                    : html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${isDeprecated || data['::deprecated'] ? '✗' : ''} ${keyLabel === '::props' ? '' : keyLabel}</span>`
+                    ? html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${(isDeprecated || data['::deprecated']) ? '✗' : ''} ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>`
+                    : html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${(isDeprecated || data['::deprecated']) ? '✗' : ''} ${keyLabel === '::props' ? '' : keyLabel}</span>`
                 }
                 ${data['::type'] === 'xxx-of' && dataType === 'array' ? html`<span style="color:var(--primary-color)">ARRAY</span>` : ''} 
               </div>
@@ -250,6 +250,7 @@ export default class SchemaTable extends LitElement {
                       newSchemaLevel,
                       newIndentLevel,
                       data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
+                      (isDeprecated || data[dataKey]['::deprecated']),
                     )}`
                   : ''
                 : html`${this.generateTree(
@@ -261,7 +262,7 @@ export default class SchemaTable extends LitElement {
                   newSchemaLevel,
                   newIndentLevel,
                   data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
-                  isDeprecated || data[dataKey]['::deprecated'],
+                  (isDeprecated || data[dataKey]['::deprecated']),
                 )}`
               }
             `)}

diff --git a/src/components/schema-tree.js b/src/components/schema-tree.js
@@ -121,7 +121,7 @@ export default class SchemaTree extends LitElement {
     `;
   }
 
-  generateTree(data, dataType = 'object', arrayType = '', key = '', description = '', schemaLevel = 0, indentLevel = 0, readOrWrite = '') {
+  generateTree(data, dataType = 'object', arrayType = '', key = '', description = '', schemaLevel = 0, indentLevel = 0, readOrWrite = '', isDeprecated = false) {
     if (this.schemaHideReadOnly === 'true') {
       if (dataType === 'array') {
         if (readOrWrite === 'readonly') {
@@ -212,15 +212,15 @@ export default class SchemaTree extends LitElement {
     }
     if (typeof data === 'object') {
       return html`
-        <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type']?.startsWith('xxx-of') ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}${data['::nullable'] ? ' nullable' : ''}" title="${data['::deprecated'] ? 'Deprecated' : ''}">
-          <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style='min-width:${minFieldColWidth}px'>
+        <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type']?.startsWith('xxx-of') ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}${data['::nullable'] ? ' nullable' : ''}" title="${(isDeprecated || data['::deprecated']) ? 'Deprecated' : ''}">
+          <div class="td key ${(isDeprecated || data['::deprecated']) ? 'deprecated' : ''}" style='min-width:${minFieldColWidth}px'>
             ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION')
               ? html`<span class='key-label xxx-of-key'> ${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>`
               : keyLabel === '::props' || keyLabel === '::ARRAY~OF'
                 ? ''
                 : schemaLevel > 0
                   ? html`<span class="key-label" title="${readOrWrite === 'readonly' ? 'Read-Only' : readOrWrite === 'writeonly' ? 'Write-Only' : ''}">
-                      ${data['::deprecated'] ? '✗' : ''}
+                      ${(isDeprecated || data['::deprecated']) ? '✗' : ''}
                       ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? html`<span style="color:var(--red)">*</span>` : ''}${readOrWrite === 'readonly' ? html` 🆁` : readOrWrite === 'writeonly' ? html` 🆆` : readOrWrite}:
                     </span>`
                   : ''
@@ -231,7 +231,7 @@ export default class SchemaTree extends LitElement {
         </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, data[0]['::readwrite'])}`
+            ? html`${this.generateTree(data[0], 'xxx-of-option', '', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel, data[0]['::readwrite'], (isDeprecated || data[0]['::deprecated']))}`
             : html`
               ${Object.keys(data).map((dataKey) => html`
                 ${['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite', '::dataTypeLabel', '::nullable'].includes(dataKey)
@@ -245,6 +245,7 @@ export default class SchemaTree extends LitElement {
                         newSchemaLevel,
                         newIndentLevel,
                         data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
+                        (isDeprecated || data[dataKey]['::deprecated']),
                       )}`
                     : ''
                   : html`${this.generateTree(
@@ -256,6 +257,7 @@ export default class SchemaTree extends LitElement {
                     newSchemaLevel,
                     newIndentLevel,
                     data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
+                    (isDeprecated || data[dataKey]['::deprecated']),
                   )}`
                 }
               `)}
@@ -300,8 +302,8 @@ export default class SchemaTree extends LitElement {
 
     return html`
       <div class = "tr primitive" title="${deprecated ? 'Deprecated' : ''}">
-        <div class="td key ${deprecated}" style='min-width:${minFieldColWidth}px'>
-          ${deprecated ? html`<span style='color:var(--red);'>✗</span>` : ''}
+        <div class="td key ${isDeprecated || deprecated}" style='min-width:${minFieldColWidth}px'>
+          ${isDeprecated || deprecated ? html`<span style='color:var(--red);'>✗</span>` : ''}
           ${keyLabel.endsWith('*')
             ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>:`
             : key.startsWith('::OPTION')