[ADF-2361] added breadcrumb transform function to the breadcrumb comp… (#3050)

* [ADF-2361] added breadcrumb transform function to the breadcrumb component

* [ADF-2361] added PR review changes

lib/content-services/breadcrumb/breadcrumb.component.spec.ts

@@ -205,4 +205,28 @@ describe('Breadcrumb', () => {
         expect(route[0].id).toBe('custom-id');
         expect(route[0].name).toBe('custom-name');
     });
+
+    it('should apply the transformation function when there is one', () => {
+        const node: any = {
+            id: null,
+            name: null,
+            path: {
+                elements: [
+                    { id: 'element-1-id', name: 'element-1-name' },
+                    { id: 'element-2-id', name: 'element-2-name' },
+                    { id: 'element-3-id', name: 'element-3-name' }
+                ]
+            }
+        };
+        component.transform = ((transformNode) => {
+            transformNode.id = 'test-id';
+            transformNode.name = 'test-name';
+            return transformNode;
+        });
+        let change = new SimpleChange(null, node, true);
+        component.ngOnChanges({'folderNode': change});
+        expect(component.route.length).toBe(4);
+        expect(component.route[3].id).toBe('test-id');
+        expect(component.route[3].name).toBe('test-name');
+    });
 });

lib/content-services/breadcrumb/breadcrumb.component.ts

@@ -15,7 +15,14 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { Component,
+         EventEmitter,
+         Input,
+         OnChanges,
+         Output,
+         SimpleChanges,
+         ViewEncapsulation,
+         OnInit } from '@angular/core';
 import { MinimalNodeEntryEntity, PathElementEntity } from 'alfresco-js-api';
 import { DocumentListComponent } from '../document-list';
 
@@ -28,7 +35,7 @@ import { DocumentListComponent } from '../document-list';
         'class': 'adf-breadcrumb'
     }
 })
-export class BreadcrumbComponent implements OnChanges {
+export class BreadcrumbComponent implements OnInit, OnChanges {
 
     /** Active node, builds UI based on folderNode.path.elements collection. */
     @Input()
@@ -53,6 +60,9 @@ export class BreadcrumbComponent implements OnChanges {
     @Input()
     target: DocumentListComponent;
 
+    @Input()
+    transform: (node) => any;
+
     route: PathElementEntity[] = [];
 
     get hasRoot(): boolean {
@@ -63,9 +73,14 @@ export class BreadcrumbComponent implements OnChanges {
     @Output()
     navigate: EventEmitter<PathElementEntity> = new EventEmitter<PathElementEntity>();
 
+    ngOnInit() {
+        this.transform = this.transform ? this.transform : null ;
+    }
+
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.folderNode) {
-            const node: MinimalNodeEntryEntity = changes.folderNode.currentValue;
+            let node: MinimalNodeEntryEntity = null;
+            node = this.transform ? this.transform(changes.folderNode.currentValue) : changes.folderNode.currentValue;
             this.route = this.parseRoute(node);
         }
     }

lib/content-services/content-node-selector/content-node-selector-panel.component.html

@@ -40,6 +40,7 @@
                 class="adf-content-node-selector-content-breadcrumb"
                 (navigate)="clear()"
                 [target]="documentList"
+                [transform]="breadcrumbTransform"
                 [folderNode]="breadcrumbFolderNode"
                 data-automation-id="content-node-selector-content-breadcrumb">
             </adf-dropdown-breadcrumb>

lib/content-services/content-node-selector/content-node-selector-panel.component.spec.ts

@@ -261,7 +261,7 @@ describe('ContentNodeSelectorComponent', () => {
             });
 
             it('should make changes to breadcrumb\'s folderNode if breadcrumbTransform is defined', (done) => {
-                const transformedFolderNode = <MinimalNodeEntryEntity> { path: { elements: [{id: 'testId', name: 'testName'}] } };
+                const transformedFolderNode = <MinimalNodeEntryEntity> { id: 'trans-node', name: 'trans-node-name', path: { elements: [{id: 'testId', name: 'testName'}] } };
                 component.breadcrumbTransform = (() => {
                     return transformedFolderNode;
                 });
@@ -272,7 +272,8 @@ describe('ContentNodeSelectorComponent', () => {
                     expect(component.breadcrumbTransform).not.toBeNull();
 
                     const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent));
-                    expect(breadcrumb.componentInstance.folderNode).toBe(transformedFolderNode);
+                    expect(breadcrumb.componentInstance.route[0].name).toBe('testName');
+                    expect(breadcrumb.componentInstance.route[0].id).toBe('testId');
                     done();
                 });
             });

lib/content-services/content-node-selector/content-node-selector-panel.component.ts

@@ -174,7 +174,7 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
             folderNode = this.documentList.folderNode;
         }
 
-        return this.breadcrumbTransform ? this.breadcrumbTransform(folderNode) : folderNode;
+        return folderNode;
     }
 
     /**