[ADF-2298] Process Header - Make it customizable from config file (#2944)

* [ADF-2298] Process Header - Make it customizable from config file

* Added customization to process instance header through config file

* [ADF-2298] Process Header - Make it customizable from config file

* Fixed tests
* Added documentation

docs/process-instance-header.component.md

@@ -17,3 +17,21 @@ Sub-component of the process details component, which renders some general infor
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
 | processInstance | `ProcessInstance` |  | (**required**) Full details of the process instance to display information about.  |
+
+## Customise the properties showed
+By default all the properties are showed :
+***status***, ***ended***, ***category***, ***businessKey***, ***assignee***, ***created***,***id***, ***description***. 
+
+It is possible to customise the showed properties via "app.config.json".
+This is how the configuration looks like:
+
+```json
+
+    "adf-process-instance-header": {
+      "presets": {
+          "properties" : [ "status", "ended", "created", "id"]
+      }
+    }
+
+```
+In this way only the listed properties will be showed.

lib/core/app-config/schema.json

@@ -388,6 +388,24 @@
                 }
             }
         },
+        "adf-process-instance-header": {
+            "description": "Process instance header component configuration",
+            "type": "object",
+            "properties": {
+                "presets": {
+                    "description": "Presets for process instance header component",
+                    "type": "object",
+                    "properties": {
+                        "properties": {
+                              "type": "array",
+                              "items": {
+                                "enum": [ "status", "ended", "category", "businessKey", "assignee", "created", "id", "description" ]
+                              }
+                        }
+                    }
+                }
+            }
+        },
         "adf-process-list": {
             "description": "Process list component configuration",
             "type": "object",

lib/process-services/process-list/components/process-instance-header.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { CardViewUpdateService } from '@alfresco/adf-core';
+import { AppConfigService, CardViewUpdateService } from '@alfresco/adf-core';
 import { MaterialModule } from '../../material.module';
 
 import { ProcessInstance } from '../models/process-instance.model';
@@ -28,6 +28,7 @@ describe('ProcessInstanceHeaderComponent', () => {
 
     let component: ProcessInstanceHeaderComponent;
     let fixture: ComponentFixture<ProcessInstanceHeaderComponent>;
+    let appConfigService: AppConfigService;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -39,7 +40,8 @@ describe('ProcessInstanceHeaderComponent', () => {
             ],
             providers: [
                 ProcessService,
-                CardViewUpdateService
+                CardViewUpdateService,
+                AppConfigService
             ]
         }).compileComponents();
     }));
@@ -49,6 +51,7 @@ describe('ProcessInstanceHeaderComponent', () => {
         component = fixture.componentInstance;
 
         component.processInstance = new ProcessInstance(exampleProcess);
+        appConfigService = TestBed.get(AppConfigService);
     });
 
     it('should render empty component if no process details provided', () => {
@@ -160,4 +163,38 @@ describe('ProcessInstanceHeaderComponent', () => {
         let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-businessKey"]');
         expect(valueEl.innerText).toBe('ADF_PROCESS_LIST.PROPERTIES.BUSINESS_KEY_DEFAULT');
     });
+
+    describe('Config Filtering', () => {
+
+        it('should show only the properties from the configuration file', () => {
+            appConfigService.config = Object.assign(appConfigService.config, {
+                'adf-process-instance-header': {
+                    'presets': {
+                        'properties': ['status', 'ended']
+                    }
+                }
+            });
+            component.ngOnChanges({});
+            fixture.detectChanges();
+            const propertyList = fixture.nativeElement.querySelectorAll('.adf-property-list .adf-property');
+            expect(propertyList).toBeDefined();
+            expect(propertyList).not.toBeNull();
+            expect(propertyList.length).toBe(2);
+            expect(propertyList[0].innerText).toContain('ADF_PROCESS_LIST.PROPERTIES.STATUS');
+            expect(propertyList[1].innerText).toContain('ADF_PROCESS_LIST.PROPERTIES.END_DATE');
+        });
+
+        it('should show all the default properties if there is no configuration', () => {
+            appConfigService.config = Object.assign(appConfigService.config, {});
+            component.ngOnChanges({});
+            fixture.detectChanges();
+            const propertyList = fixture.nativeElement.querySelectorAll('.adf-property-list .adf-property');
+            expect(propertyList).toBeDefined();
+            expect(propertyList).not.toBeNull();
+            expect(propertyList.length).toBe(component.properties.length);
+            expect(propertyList[0].innerText).toContain('ADF_PROCESS_LIST.PROPERTIES.STATUS');
+            expect(propertyList[2].innerText).toContain('ADF_PROCESS_LIST.PROPERTIES.CATEGORY');
+        });
+
+    });
 });

lib/process-services/process-list/components/process-instance-header.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { CardViewDateItemModel, CardViewItem, CardViewTextItemModel, TranslationService } from '@alfresco/adf-core';
+import { AppConfigService, CardViewDateItemModel, CardViewItem, CardViewBaseItemModel, CardViewTextItemModel, TranslationService } from '@alfresco/adf-core';
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { ProcessInstance } from '../models/process-instance.model';
 
@@ -32,73 +32,84 @@ export class ProcessInstanceHeaderComponent implements OnChanges {
 
     properties: CardViewItem [];
 
-    constructor(private translationService: TranslationService) {
+    constructor(private translationService: TranslationService,
+                private appConfig: AppConfigService) {
     }
 
     ngOnChanges(changes: SimpleChanges) {
         this.refreshData();
     }
 
-    refreshData() {
+    refreshData(): void {
         if (this.processInstance) {
-            this.properties = [
+            const defaultProperties = this.initDefaultProperties();
-                new CardViewTextItemModel(
+            const filteredProperties: string[] = this.appConfig.get('adf-process-instance-header.presets.properties');
-                    {
+            this.properties = defaultProperties.filter((cardItem) => this.isValidSelection(filteredProperties, cardItem));
-                        label: 'ADF_PROCESS_LIST.PROPERTIES.STATUS',
-                        value: this.getProcessStatus(),
-                        key: 'status'
-                    }),
-                new CardViewDateItemModel(
-                    {
-                        label: 'ADF_PROCESS_LIST.PROPERTIES.END_DATE',
-                        value: this.processInstance.ended,
-                        format: 'MMM DD YYYY',
-                        key: 'ended',
-                        default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.END_DATE_DEFAULT')
-                    }),
-                new CardViewTextItemModel(
-                    {
-                        label: 'ADF_PROCESS_LIST.PROPERTIES.CATEGORY',
-                        value: this.processInstance.processDefinitionCategory,
-                        key: 'category',
-                        default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.CATEGORY_DEFAULT')
-                    }),
-                new CardViewTextItemModel(
-                    {
-                        label: 'ADF_PROCESS_LIST.PROPERTIES.BUSINESS_KEY',
-                        value: this.processInstance.businessKey,
-                        key: 'businessKey',
-                        default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.BUSINESS_KEY_DEFAULT')
-                    }),
-                new CardViewTextItemModel(
-                    {
-                        label: 'ADF_PROCESS_LIST.PROPERTIES.CREATED_BY',
-                        value: this.getStartedByFullName(),
-                        key: 'assignee',
-                        default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.CREATED_BY_DEFAULT')
-                    }),
-                new CardViewDateItemModel(
-                    {
-                        label: 'ADF_PROCESS_LIST.PROPERTIES.CREATED',
-                        value: this.processInstance.started,
-                        format: 'MMM DD YYYY',
-                        key: 'created'
-                    }),
-                new CardViewTextItemModel(
-                    {label: 'ADF_PROCESS_LIST.PROPERTIES.ID',
-                    value: this.processInstance.id,
-                    key: 'id'
-                }),
-                new CardViewTextItemModel(
-                    {label: 'ADF_PROCESS_LIST.PROPERTIES.DESCRIPTION',
-                    value: this.processInstance.processDefinitionDescription,
-                    key: 'description',
-                    default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.DESCRIPTION_DEFAULT')
-                })
-            ];
         }
     }
 
+    private initDefaultProperties(): any[] {
+        return [
+            new CardViewTextItemModel(
+                {
+                    label: 'ADF_PROCESS_LIST.PROPERTIES.STATUS',
+                    value: this.getProcessStatus(),
+                    key: 'status'
+                }),
+            new CardViewDateItemModel(
+                {
+                    label: 'ADF_PROCESS_LIST.PROPERTIES.END_DATE',
+                    value: this.processInstance.ended,
+                    format: 'MMM DD YYYY',
+                    key: 'ended',
+                    default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.END_DATE_DEFAULT')
+                }),
+            new CardViewTextItemModel(
+                {
+                    label: 'ADF_PROCESS_LIST.PROPERTIES.CATEGORY',
+                    value: this.processInstance.processDefinitionCategory,
+                    key: 'category',
+                    default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.CATEGORY_DEFAULT')
+                }),
+            new CardViewTextItemModel(
+                {
+                    label: 'ADF_PROCESS_LIST.PROPERTIES.BUSINESS_KEY',
+                    value: this.processInstance.businessKey,
+                    key: 'businessKey',
+                    default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.BUSINESS_KEY_DEFAULT')
+                }),
+            new CardViewTextItemModel(
+                {
+                    label: 'ADF_PROCESS_LIST.PROPERTIES.CREATED_BY',
+                    value: this.getStartedByFullName(),
+                    key: 'assignee',
+                    default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.CREATED_BY_DEFAULT')
+                }),
+            new CardViewDateItemModel(
+                {
+                    label: 'ADF_PROCESS_LIST.PROPERTIES.CREATED',
+                    value: this.processInstance.started,
+                    format: 'MMM DD YYYY',
+                    key: 'created'
+                }),
+            new CardViewTextItemModel(
+                {label: 'ADF_PROCESS_LIST.PROPERTIES.ID',
+                value: this.processInstance.id,
+                key: 'id'
+            }),
+            new CardViewTextItemModel(
+                {label: 'ADF_PROCESS_LIST.PROPERTIES.DESCRIPTION',
+                value: this.processInstance.processDefinitionDescription,
+                key: 'description',
+                default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.DESCRIPTION_DEFAULT')
+            })
+        ];
+    }
+
+    private isValidSelection(filteredProperties: string[], cardItem: CardViewBaseItemModel): boolean {
+        return filteredProperties ? filteredProperties.indexOf(cardItem.key) >= 0 : true;
+    }
+
     getProcessStatus(): string {
         if (this.processInstance) {
             return this.isRunning() ? 'Running' : 'Completed';