W-16854965 - The displayName is not being shown in the API documentation panel for elements of type "object."

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-type-document",
   "description": "A documentation table for type (resource) properties. Works with AMF data model",
-  "version": "4.2.30",
+  "version": "4.2.31",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

src/PropertyDocumentMixin.d.ts

@@ -25,7 +25,7 @@ interface PropertyDocumentMixin extends AmfHelperMixin {
    * This is used to select/generate examples according to current body
    * media type. When not set it only renders examples that were defined
    * in API spec file in a form as they were written.
-   * 
+   *
    * @attribute
    */
   mediaType: string;
@@ -55,7 +55,7 @@ interface PropertyDocumentMixin extends AmfHelperMixin {
    * @param range AMF property range object
    * @returns Data type of the property.
    */
-  _computeRangeDataType(range: Object): String|undefined;
+  _computeRangeDataType(range: Object): String | undefined;
 
   /**
    * Computes type from a scalar shape.
@@ -78,7 +78,7 @@ interface PropertyDocumentMixin extends AmfHelperMixin {
    * @param range Range object of current shape.
    * @returns List of Array items.
    */
-  _computeArrayProperties(range: Object): ArrayPropertyItem[]|undefined;
+  _computeArrayProperties(range: Object): ArrayPropertyItem[] | undefined;
 
   /**
    * Computes value for `isUnion` property.
@@ -110,7 +110,7 @@ interface PropertyDocumentMixin extends AmfHelperMixin {
   /**
    * Computes value for `isAnyOf` property.
    * AnyOf type is identified as a `http://www.w3.org/ns/shacl#or`
-   * 
+   *
    * @param range Range object of current shape.
    */
   _computeIsAnyOf(range: Object): boolean
@@ -141,7 +141,7 @@ interface PropertyDocumentMixin extends AmfHelperMixin {
    * @param items Array's items property or a single property
    * @returns Label for the union type.
    */
-  _computeArrayUnionLabel(items: object|object[]): string|undefined;
+  _computeArrayUnionLabel(items: object | object[]): string | undefined;
 
   /**
    * Computes name label for the shape.
@@ -150,7 +150,9 @@ interface PropertyDocumentMixin extends AmfHelperMixin {
    * @param shape The shape of the property.
    * @returns Display name of the property
    */
-  _computeDisplayName(range: Object, shape: Object): string|undefined;
+  _computeDisplayName(range: Object, shape: Object): string | undefined;
+
+  _computeParentName(range: Object, shape: Object): string | undefined;
 
   _computeHasMediaType(mediaType: string): boolean;
 
@@ -159,5 +161,5 @@ interface PropertyDocumentMixin extends AmfHelperMixin {
   _isPropertyReadOnly(property: any): boolean;
   _isReadOnly(property: any): boolean;
 }
-export {PropertyDocumentMixinConstructor};
-export {PropertyDocumentMixin};
+export { PropertyDocumentMixinConstructor };
+export { PropertyDocumentMixin };

src/PropertyDocumentMixin.js

@@ -379,7 +379,7 @@ const mxFunction = (base) => {
     }catch(_){
       return undefined
     }
-   
+
   }
 
     /**
@@ -493,6 +493,33 @@ const mxFunction = (base) => {
       if (!shape || !range) {
         return undefined;
       }
+
+      const coreName = this.ns.aml.vocabularies.core.name;
+      const shaclName = this.ns.w3.shacl.name;
+      const parameterType = this.ns.aml.vocabularies.apiContract.Parameter;
+      const nodeShapeType = this.ns.w3.shacl.NodeShape;
+
+      // Check if the shape is of type Parameter
+      if (this._hasType(shape, parameterType)) {
+        return /** @type string */ (this._getValue(range, coreName));
+      }
+
+      // Check if the range is of type NodeShape
+      if (this._hasType(range, nodeShapeType)) {
+        return (
+          /** @type string */ (this._getValue(range, coreName)) ||
+          /** @type string */ (this._getValue(shape, shaclName))
+        );
+      }
+
+      // Default case: return the core name from the range
+      return /** @type string */ (this._getValue(range, coreName));
+    }
+
+    _computeParentName(range, shape) {
+      if (!shape || !range) {
+        return undefined;
+      }
       // let name;
       if (
         this._hasType(shape, this.ns.aml.vocabularies.apiContract.Parameter)

src/PropertyShapeDocument.js

@@ -123,7 +123,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       /**
        * A description of the shape to render.
        */
-      shapeDescription: { type: String },      
+      shapeDescription: { type: String },
       /**
        * Computed value, true if description is set.
        */
@@ -319,15 +319,15 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
 
   _shapeRangeChanged(shape, range) {
     this.displayName = this._computeDisplayName(range, shape);
+    this.parentName = this.isObject ? this._computeParentName(range, shape) : undefined;
     this.propertyName = this._computePropertyName(range, shape);
     this.avroValue = this._computeAvroShapeRangeSourceMap(range, shape)
     const {size,namespace,aliases, defaultValue} = this._computeAvroProperties(range, shape)
     this.size = size
     this.namespace = namespace
     this.aliases = aliases
     this.defaultValue = defaultValue
-
-
+
     this.hasDisplayName = this._computeHasDisplayName(
       this.displayName,
       this.propertyName
@@ -498,7 +498,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     }catch(_){
       return undefined
     }
-   
+
   }
 
   /**
@@ -518,7 +518,6 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
 
 
 
-
 
   /**
    * Computes value for `hasDisplayName` property.
@@ -714,6 +713,16 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     return this._hasType(item, this.ns.aml.vocabularies.shapes.ScalarShape);
   }
 
+  _getParentTypeName() {
+    if (this.isArray) {
+      return 'item'
+    }
+    if(this.isObject){
+      return this.parentName
+    }
+    return this.displayName
+  }
+
   /**
    * @return {TemplateResult|string} Template for a complex shape (object/array/union)
    */
@@ -722,7 +731,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       return '';
     }
     const range = this._resolve(this.range);
-    const parentTypeName = this.isArray ? 'item' : this.displayName;
+    const parentTypeName = this._getParentTypeName();
     return html`<api-type-document
       class="children complex"
       .amf="${this.amf}"
@@ -843,7 +852,6 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
   `;
 }
 
-
 
   /**
    * @return {TemplateResult|string} Template for the description
@@ -893,7 +901,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       parentTypeName,
       hasParentTypeName
     } = this;
-    
+
     return html` ${hasDisplayName
       ? html`<div class="property-display-name">${displayName}</div>`
       : ''}