Merge pull request #80 from advanced-rest-client/feat/W-16450169/map-type

Feat/w-16450169/map type

Author: leandrogilcarrano

src/ApiTypeDocument.js

@@ -819,6 +819,14 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
     return this._multiTypeTemplate({ label, items, typeName, selected, selectTypeCallback, type });
   }
 
+  _getItemLabel(item){
+    if(item.label==='Unknown type' && item.avroValue){
+      return item.avroValue 
+    }
+    return item.label
+
+  }
+
   /**
    *
    * @param {Object} args
@@ -843,8 +851,8 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
             aria-pressed="${selected === index ? 'true' : 'false'}"
             @click="${selectTypeCallback}"
             ?compatibility="${this.compatibility}"
-            title="Select ${item.label} type"
-            >${item.label}</anypoint-button
+            title="Select ${this._getItemLabel(item)} type"
+            >${this._getItemLabel(item)}</anypoint-button
           >`
     )}
       </div>

src/PropertyDocumentMixin.js

@@ -361,6 +361,37 @@ const mxFunction = (base) => {
       return this._hasProperty(range, this.ns.w3.shacl.and);
     }
 
+     /**
+   * Computes source values of the property. Only for async / avro
+   *
+   * @param {Object} data Range object of current shape.
+   */
+   _computeAvroSourceMap(data) {
+    try{
+      const sourcesKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.sources)
+      const avroSchemaKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.avroSchema)
+      const valueKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.value)
+      if(data[sourcesKey] && data[sourcesKey][0][avroSchemaKey]){
+         const avroValues = this._ensureArray(data[sourcesKey][0][avroSchemaKey])
+         return avroValues[0][valueKey][0]['@value']
+      }
+      return undefined
+    }catch(_){
+      return undefined
+    }
+   
+  }
+
+    /**
+   * Computes source values of the property. Only for async / avro
+   *
+   * @param {Object} data Range object of current shape.
+   * @return {Object} Size of the property
+   */
+  _computeAvroShapeRangeSourceMap(data) {
+    return this._computeAvroSourceMap(data)
+   }
+
     /**
      * Computes list of type labels to render.
      *
@@ -374,6 +405,7 @@ const mxFunction = (base) => {
         return undefined;
       }
       return list.map((obj) => {
+        const avroValue = this._computeAvroShapeRangeSourceMap(obj) || null
         let item = obj;
         if (Array.isArray(item)) {
           [item] = item;
@@ -424,6 +456,7 @@ const mxFunction = (base) => {
           isArray,
           isType,
           label,
+          avroValue
         };
       });
     }

src/PropertyShapeDocument.js

@@ -739,13 +739,24 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     ></api-type-document>`;
   }
 
+  _getTypeLabelData(){
+    const { propertyDataType, avroValue } = this;
+    if(avroValue==='map'){
+      return {dataType:'Map',customValue:false}
+    }
+    if(propertyDataType==='Unknown type' && avroValue){
+      return {dataType:avroValue,customValue:true}
+    }
+    return {dataType:propertyDataType,customValue:false}
+  }
+
   /**
    * @return {TemplateResult} Template for a type name label
    */
   _getTypeNameTemplate() {
-    let dataType = this.propertyDataType;
-    const id = this._targetTypeId;
     const { isScalarArray } = this;
+    let {dataType} = this._getTypeLabelData();
+    const id = this._targetTypeId;
     if (id) {
       const label = this._targetTypeName;
       return html`
@@ -781,6 +792,18 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       <div class="fixed-type-size"><span>Size: ${size}</span></div>`;
   }
 
+  /**
+   * @return {TemplateResult | String} Template size value (only for async / avro)
+   */
+  _getCustomAvroValueTemplate() {
+    const {customValue} = this._getTypeLabelData()
+    if(!customValue){
+      return ''
+    }
+    return html`
+      <div class="fixed-type-size"><span>This is a custom avro value</span></div>`;
+  }
+
   /**
    * @return {TemplateResult | String} Template size value (only for async / avro)
    */
@@ -868,8 +891,9 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       displayName,
       propertyName,
       parentTypeName,
-      hasParentTypeName,
+      hasParentTypeName
     } = this;
+    
     return html` ${hasDisplayName
       ? html`<div class="property-display-name">${displayName}</div>`
       : ''}
@@ -890,6 +914,20 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     return html`<div class="deprecated-warning">Warning: Deprecated</div>`
   }
 
+  _noNameAvroClass() {
+    const {
+      hasDisplayName,
+      propertyName,
+      isComplex,
+      avroValue,
+      _renderToggleButton
+    } = this;
+    if(!hasDisplayName && !propertyName && isComplex && avroValue && _renderToggleButton){
+      return ' no-name'
+    }
+    return ''
+  }
+
   /**
    * @return {TemplateResult} Main render function.
    */
@@ -898,7 +936,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
         ${this.styles}
       </style>
       ${this._headerTemplate()}
-      <div class="property-traits">
+      <div class="property-traits${this._noNameAvroClass()}">
         ${this._getTypeNameTemplate()}
         ${this.isRequired
           ? html`<span
@@ -922,6 +960,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
             >`
           : ''}
       </div>
+      ${this._getCustomAvroValueTemplate()}
       ${this._getDefaultValueAvroTemplate()}
       ${this._getFixedTypeSizeAvroTemplate()}
       ${this._getTypeNamespaceAvroTemplate()}

src/ShapeStyles.js

@@ -1,17 +1,11 @@
-import { css } from 'lit-element';
+import { css } from "lit-element";
 
 export default css`
   :host {
     display: block;
     border-bottom-width: 1px;
-    border-bottom-color: var(
-      --property-shape-document-border-bottom-color,
-      #cfd8dc
-    );
-    border-bottom-style: var(
-      --property-shape-document-border-bottom-style,
-      dashed
-    );
+    border-bottom-color: var(--property-shape-document-border-bottom-color, #cfd8dc);
+    border-bottom-style: var(--property-shape-document-border-bottom-style, dashed);
     padding: var(--property-shape-document-padding);
   }
 
@@ -24,38 +18,20 @@ export default css`
   }
 
   .property-title {
-    font-family: var(
-      --property-shape-document-title-font-family,
-      var(--arc-font-subhead-font-family)
-    );
-    font-size: var(
-      --property-shape-document-title-font-size,
-      var(--arc-font-subhead-font-size, 1rem)
-    );
-    font-weight: var(
-      --property-shape-document-title-font-weight,
-      var(--arc-font-subhead-font-weight)
-    );
-    line-height: var(
-      --property-shape-document-title-line-height,
-      var(--arc-font-subhead-line-height)
-    );
-
-    margin: var(
-      --property-shape-document-title-margin,
-      4px 0 4px 0
-    );
+    font-family: var(--property-shape-document-title-font-family, var(--arc-font-subhead-font-family));
+    font-size: var(--property-shape-document-title-font-size, var(--arc-font-subhead-font-size, 1rem));
+    font-weight: var(--property-shape-document-title-font-weight, var(--arc-font-subhead-font-weight));
+    line-height: var(--property-shape-document-title-line-height, var(--arc-font-subhead-line-height));
+
+    margin: var(--property-shape-document-title-margin, 4px 0 4px 0);
     font-size: 1rem;
     font-weight: var(--api-type-document-property-title-font-weight, 500);
     word-break: break-word;
     color: var(--api-type-document-property-title-color);
   }
 
   .property-title[secondary] {
-    font-weight: var(
-      --api-type-document-property-title-secondary-font-weight,
-      400
-    );
+    font-weight: var(--api-type-document-property-title-secondary-font-weight, 400);
     color: var(--api-type-document-property-title-secondary-color, #616161);
   }
 
@@ -65,10 +41,7 @@ export default css`
 
   .property-display-name {
     font-weight: var(--api-type-document-property-name-font-weight, 500);
-    color: var(
-      --api-type-document-property-name-color,
-      var(--api-type-document-property-color, #212121)
-    );
+    color: var(--api-type-document-property-name-color, var(--api-type-document-property-color, #212121));
     margin: 4px 0 4px 0;
     font-size: var(--api-type-document-property-name-font-size, 16px);
   }
@@ -117,6 +90,10 @@ export default css`
     margin-bottom: 8px;
   }
 
+  .property-traits.no-name {
+    margin-top: -33px;
+  }
+
   .property-traits > span {
     display: inline-block;
     margin-right: 8px;
@@ -163,7 +140,7 @@ export default css`
     -ms-flex: 1;
     flex: 1;
   }
-  
+
   .property-traits > span.readonly-type {
     background-color: var(--api-type-readonly-property-background-color, #ff9292);
     color: var(--api-type-readonly-property-color, black);