[ADF-2304] Add option to Content Node Selector to transform the breadcrumb folder node (#2952)

* [ADF-2304] Add option to Content Node Selector to transform the breadcrumb folder node

* [ADF-2304] update documentation with recent changes

* [ADF-2304] added example of using the breadcrumbTransform

docs/content-node-selector-panel.component.md

@@ -25,12 +25,52 @@ Opens a [Content Node Selector](content-node-selector.component.md) in its own d
 | rowFilter | RowFilter | null | Custom row filter function. [See More](document-list.component.md#custom-row-filter) |
 | imageResolver | ImageResolver | null | Custom image resolver function. [See More](document-list.component.md#custom-image-resolver) |
 | pageSize | number | 10 | Number of items shown per page in the list |
+| isSelectionValid | ValidationFunction | defaultValidation | Function used to decide if the selected node has permission to be the chosen. The defaultValidation always returns true.  |
+| breadcrumbTransform | (node) => any | null | Action to be performed to the chosen/folder node before building the breadcrumb UI. Can be useful in case a custom formatting is needed to the breadcrumb, so changing the node's path elements that help build the breadcrumb can be done through this function. |
+
+#### Using breadcrumbTransform example
+
+Before opening the Content Node Selector, you can add a breadcrumbTransform function to the ContentNodeSelectorComponentData to make changes to what is displayed on the breadcrumb. For example, something like this:
+```
+    const data: ContentNodeSelectorComponentData = {
+        title: title,
+        actionName: action,
+        currentFolderId: contentEntry.parentId,
+        imageResolver: this.imageResolver.bind(this),
+        rowFilter : this.rowFilter.bind(this, contentEntry.id),
+        isSelectionValid: this.hasEntityCreatePermission.bind(this),
+        breadcrumbTransform: this.changeBreadcrumbPath.bind(this), // here is the transform function
+        select: select
+    };
+
+    this.openContentNodeDialog(data, 'adf-content-node-selector-dialog', '630px');
+```
+where the transform function could be something like this:
+```
+    private changeBreadcrumbPath(node: MinimalNodeEntryEntity) {
+
+        if (node && node.path && node.path.elements) {
+            const elements = node.path.elements;
+
+            if (elements.length > 1) {
+                if (elements[1].name === 'Sites') {
+                    elements.splice(1, 1);
+                }
+            }
+        }
+
+        return node;
+    }
+```
+and here is the display of the breadcrumb before and after transform:
+![Content Node Selector breadcrumbTransfrom before/after screenshot](docassets/images/breadcrumbTransform.png)
+
 
 ### Events
 
 | Name | Description |
 | ---- | ----------- |
-| select | Emitted when the user has selected an item |
+| select | Emitted when the user has chosen an item |
 
 ## Details
 

docs/content-node-selector.component.md

@@ -43,9 +43,14 @@ to work with the Dialog's
 ```ts
 interface ContentNodeSelectorComponentData {
     title: string;
-    currentFolderId?: string;
+    actionName?: string;
+    currentFolderId: string;
+    dropdownHideMyFiles?: boolean;
+    dropdownSiteList?: SitePaging;
     rowFilter?: RowFilter;
     imageResolver?: ImageResolver;
+    isSelectionValid?: (entry: MinimalNodeEntryEntity) => boolean;
+    breadcrumbTransform?: (node) => any;
     select: EventEmitter<MinimalNodeEntryEntity[]>;
 }
 ```

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

@@ -260,6 +260,36 @@ describe('ContentNodeSelectorComponent', () => {
                     done();
                 }, 300);
             });
+
+            it('should keep breadcrumb\'s folderNode unchanged if breadcrumbTransform is NOT defined', (done) => {
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    expect(component.breadcrumbTransform).toBeNull();
+
+                    const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent));
+                    expect(breadcrumb.componentInstance.folderNode).toBe(expectedDefaultFolderNode);
+                    done();
+                });
+            });
+
+            it('should make changes to breadcrumb\'s folderNode if breadcrumbTransform is defined', (done) => {
+                const transformedFolderNode = <MinimalNodeEntryEntity> { path: { elements: [{id: 'testId', name: 'testName'}] } };
+                component.breadcrumbTransform = (() => {
+                    return transformedFolderNode;
+                });
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    expect(component.breadcrumbTransform).not.toBeNull();
+
+                    const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent));
+                    expect(breadcrumb.componentInstance.folderNode).toBe(transformedFolderNode);
+                    done();
+                });
+            });
         });
 
         describe('Search functionality', () => {

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

@@ -70,6 +70,9 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
     @Input()
     isSelectionValid: ValidationFunction = defaultValidation;
 
+    @Input()
+    breadcrumbTransform: (node) => any;
+
     @Output()
     select: EventEmitter<MinimalNodeEntryEntity[]> = new EventEmitter<MinimalNodeEntryEntity[]>();
 
@@ -123,6 +126,8 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
     ngOnInit() {
         this.folderIdToShow = this.currentFolderId;
         this.paginationStrategy = PaginationStrategy.Infinite;
+
+        this.breadcrumbTransform = this.breadcrumbTransform ? this.breadcrumbTransform : null ;
     }
 
     /**
@@ -159,11 +164,15 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
      * Returns the actually selected|entered folder node or null in case of searching for the breadcrumb
      */
     get breadcrumbFolderNode(): MinimalNodeEntryEntity | null {
+        let folderNode: MinimalNodeEntryEntity;
+
         if (this.showingSearchResults && this.chosenNode) {
-            return this.chosenNode;
+            folderNode = this.chosenNode;
         } else {
-            return this.documentList.folderNode;
+            folderNode = this.documentList.folderNode;
         }
+
+        return this.breadcrumbTransform ? this.breadcrumbTransform(folderNode) : folderNode;
     }
 
     /**

lib/content-services/content-node-selector/content-node-selector.component-data.interface.ts

@@ -27,5 +27,6 @@ export interface ContentNodeSelectorComponentData {
     rowFilter?: any;
     imageResolver?: any;
     isSelectionValid?: (entry: MinimalNodeEntryEntity) => boolean;
+    breadcrumbTransform?: (node) => any;
     select: Subject<MinimalNodeEntryEntity[]>;
 }

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

@@ -12,6 +12,7 @@
         [rowFilter]="rowFilter || data?.rowFilter"
         [imageResolver]="imageResolver || data?.imageResolver"
         [isSelectionValid]="data?.isSelectionValid"
+        [breadcrumbTransform]="data?.breadcrumbTransform"
         (select)="onSelect($event)">
     </adf-content-node-selector-panel>
 </section>