[ADF-4341] Customise the property title into the InfoDrawer from configuration (#5556)

* [ADF-4341] Customise the property title into the InfoDrawer from configuration

* * docs added

* * removed unnecessary logic and docs updated

demo-shell/src/app.config.json

@@ -818,7 +818,23 @@
     "presets": {
       "default": {
         "exif:exif": "*"
-      }
+      },
+      "custom-title": [{
+        "title": "Exif",
+        "items": [
+          {
+            "aspect": "exif:exif",
+            "editing": false,
+            "properties": [
+              "exif:pixelXDimension",
+              {
+                "title": "Custom YDimension Name",
+                "name": "exif:pixelYDimension"
+              }
+            ]
+          }
+        ]
+      }]
     },
     "multi-value-pipe-separator": ", ",
     "multi-value-chips": true

docs/content-services/components/content-metadata-card.component.md

@@ -212,6 +212,42 @@ A more complex config is shown in the example below:
   }
 ```
 
+#### Custom property title example
+
+In layout oriented configuration, the metadata property title can be overridden from ADF as below.
+
+```json
+  { 
+    "name": "exif:pixelYDimension", // your desired property  name
+    "title": "Custom YDimension Name" // your desired property title
+  }
+```
+
+```json
+  "content-metadata": {
+    "presets": {
+      "kittens": [
+      {
+        "title": "GROUP-TITLE1-TRANSLATION-KEY",
+        "items": [
+          {
+            "aspect": "exif:exif",
+            "properties": [
+              "exif:pixelXDimension",
+              {
+                "title": "Custom YDimension Name",
+                "name": "exif:pixelYDimension"
+              }
+            ]
+          }
+    ]
+  }
+```
+
+Note: The desired property title should be valid. otherwise it will take default value.
+
+![custom-ptoperty-title](../../docassets/images/content-meta-data-custom-ptoperty-title.png)
+
 The result of this config would be two accordion groups with the following properties:
 
 | GROUP-TITLE1-TRANSLATION-KEY |

lib/content-services/src/lib/content-metadata/interfaces/layout-oriented-config.interface.ts

@@ -15,10 +15,12 @@
  * limitations under the License.
  */
 
+import { Property } from './property.interface';
+
 export interface LayoutOrientedConfigItem {
     aspect?: string;
     type?: string;
-    properties: string | string[];
+    properties: string | string[] | Property[];
     includeAll?: boolean;
     exclude?: string | string[];
     editable?: boolean;

lib/content-services/src/lib/content-metadata/services/config/layout-oriented-config.service.spec.ts

@@ -16,7 +16,12 @@
  */
 
 import { LayoutOrientedConfigService } from './layout-oriented-config.service';
-import { LayoutOrientedConfig, Property, OrganisedPropertyGroup, PropertyGroupContainer } from '../../interfaces/content-metadata.interfaces';
+import {
+    LayoutOrientedConfig,
+    Property,
+    OrganisedPropertyGroup,
+    PropertyGroupContainer
+} from '../../interfaces/content-metadata.interfaces';
 
 describe('LayoutOrientedConfigService', () => {
 
@@ -269,7 +274,32 @@ describe('LayoutOrientedConfigService', () => {
                 expectations: [
                     { title: 'First group', properties: [property3, property4, property2] }
                 ]
+            },
+            {
+                name: 'Custom Title',
+                config: [
+                    {
+                        title: 'First group',
+                        items: [
+                            { aspect: 'zestiria', properties: 'property3' },
+                            { type: 'berseria', properties: ['property2', <any> { title: 'Custom title', name: 'property1' }] },
+                            { type: 'otherTales', properties: [<any> { title: 'Custom title', name: 'property5' }] }
+                        ]
+                    }
+                ],
+                expectations: [
+                    {
+                        title: 'First group',
+                        properties: [
+                            property3,
+                            property2,
+                            <Property> { name: 'property1', title: 'Custom title', editable: true },
+                            <Property> { name: 'property5', title: 'Custom title', editable: true }
+                        ]
+                    }
+                ]
             }
+
         ];
 
         testCases.forEach((testCase) => {
@@ -287,7 +317,7 @@ describe('LayoutOrientedConfigService', () => {
                     );
 
                     expectation.properties.forEach((property, j) => {
-                        expect(organisedPropertyGroups[i].properties[j]).toBe(property, `Property should match ${property.name}`);
+                        expect(organisedPropertyGroups[i].properties[j]).toEqual(property, `Property should match ${property.name}`);
                     });
                 });
             });

lib/content-services/src/lib/content-metadata/services/config/layout-oriented-config.service.ts

@@ -41,7 +41,10 @@ export class LayoutOrientedConfigService implements ContentMetadataConfig {
         const organisedPropertyGroup = layoutBlocks.map((layoutBlock) => {
             const flattenedItems = this.flattenItems(layoutBlock.items),
                 properties = flattenedItems.reduce((props, explodedItem) => {
-                    let property = getProperty(propertyGroups, explodedItem.groupName, explodedItem.propertyName) || [];
+                    const isProperty = typeof explodedItem.property  === 'object';
+                    const propertyName = isProperty ? explodedItem.property.name : explodedItem.property;
+                    let  property = getProperty(propertyGroups, explodedItem.groupName, propertyName) || [];
+                    if (isProperty) { property = this.setPropertyTitle(property, explodedItem.property); }
                     property = this.setEditableProperty(property, explodedItem);
                     return props.concat(property);
                 }, []);
@@ -101,13 +104,20 @@ export class LayoutOrientedConfigService implements ContentMetadataConfig {
         return propertyGroup;
     }
 
+    private setPropertyTitle(item: Property | Property[], property: Property): Property | Property[] {
+        if (!Array.isArray(item)) {
+            return { ...item, ...(item.name === property.name && !!property.title) && { title: property.title } };
+        }
+        return item;
+    }
+
     private flattenItems(items) {
         return items.reduce((accumulator, item) => {
             const properties = Array.isArray(item.properties) ? item.properties : [item.properties];
-            const flattenedProperties = properties.map((propertyName) => {
+            const flattenedProperties = properties.map((property) => {
                 return {
                     groupName: item.aspect || item.type,
-                    propertyName,
+                    property,
                     editable: item.editable
                 };
             });

lib/core/app-config/schema.json

@@ -461,7 +461,31 @@
                       },
                       "properties": {
                         "description": "list of type properties",
-                        "type": "array"
+                        "type": "array",
+                        "items": {
+                          "oneOf": [
+                            {
+                              "type": "string"
+                            },
+                            {
+                              "type": "object",
+                              "required": [
+                                "title",
+                                "name"
+                              ],
+                              "properties": {
+                                "title": {
+                                  "description": "Title of aspect properties",
+                                  "type": "string"
+                                },
+                                "name": {
+                                  "description": "Name of aspect properties",
+                                  "type": "string"
+                                }
+                              }
+                            }
+                          ]
+                        }
                       }
                     }
                   }