[ADF-3606] added extra icon for special folders and fixed link navigation folder (#3960)

* [ADF-3606] added extra icon for special folders

* [ADF-3606] changed icons and added tests

* [ADF-3606] added navigation via linked folder

* [ADF-3606] fixed problem in test

* [ADF-3606] added extra documentation

* [ADF-3606] fixed problem with folderchange event

docs/content-services/document-list.component.md

@@ -99,6 +99,9 @@ Displays the documents from a repository.
 The properties `currentFolderId`, `folderNode` and `node` set the initial folder shown by
 the Document List. They cannot be used together, so choose the one that suits your use case
 best.
+Document list will automatically show special icons for : `Smart Folder`, `Link to a Folder` and `Folder with rules` as showed in the picture below : 
+
+![Document List Folders](../docassets/images/document-list-special-folder-icon.png)
 
 ### DOM Events
 

lib/content-services/document-list/components/document-list.component.spec.ts

@@ -720,6 +720,18 @@ describe('DocumentList', () => {
         expect(documentList.performNavigation(null)).toBeFalsy();
     });
 
+    it('should perform navigation through corret linked folder', () => {
+        let linkFolder = new FolderNode();
+        linkFolder.entry.id = 'link-folder';
+        linkFolder.entry.nodeType = 'app:folderlink';
+        linkFolder.entry.properties['cm:destination'] = 'normal-folder';
+
+        spyOn(documentList, 'loadFolder').and.stub();
+
+        expect(documentList.performNavigation(linkFolder)).toBeTruthy();
+        expect(documentList.currentFolderId).toBe('normal-folder');
+    });
+
     it('should require valid node for file preview', () => {
         let file = new FileNode();
         file.entry = null;
@@ -977,6 +989,16 @@ describe('DocumentList', () => {
         documentList.loadFolderByNodeId('123');
     });
 
+    it('should emit folderChange event when a folder node is clicked', (done) => {
+        spyOn(documentList, 'reload').and.stub();
+
+        documentList.folderChange.subscribe((folderNode) => {
+            expect(folderNode.value.id).toBe('fake-node');
+            done();
+        });
+        documentList.onNodeDblClick({ entry: { id: 'fake-node', isFolder: true } });
+    });
+
     it('should set no permission when getFolderNode fails with 403', (done) => {
         const error = { message: '{ "error": { "statusCode": 403 } }' };
         spyOn(documentListService, 'getFolderNode').and.returnValue(throwError(error));

lib/content-services/document-list/components/document-list.component.ts

@@ -539,9 +539,18 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
 
     updateFolderData(node: MinimalNodeEntity): void {
         this.resetNewFolderPagination();
-        this.currentFolderId = node.entry.id;
+        this.currentFolderId = this.getNodeFolderDestinationId(node);
+        this.folderChange.emit(new NodeEntryEvent({ id: this.currentFolderId }));
         this.reload();
-        this.folderChange.emit(new NodeEntryEvent(node.entry));
+    }
+
+    private getNodeFolderDestinationId(node: MinimalNodeEntity) {
+        return this.isLinkFolder(node) ? node.entry.properties['cm:destination'] : node.entry.id;
+    }
+
+    private isLinkFolder(node: MinimalNodeEntity) {
+        return node.entry.nodeType === 'app:folderlink' && node.entry.properties &&
+            node.entry.properties['cm:destination'];
     }
 
     updateCustomSourceData(nodeId: string): void {

lib/content-services/document-list/data/share-datatable-adapter.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { DataColumn, DataRow, DataSorting, ContentService } from '@alfresco/adf-core';
-import { FileNode, FolderNode, SmartFolderNode } from './../../mock';
+import { FileNode, FolderNode, SmartFolderNode, RuleFolderNode, LinkFolderNode } from './../../mock';
 import { DocumentListService } from './../services/document-list.service';
 import { ShareDataRow } from './share-data-row.model';
 import { ShareDataTableAdapter } from './share-datatable-adapter';
@@ -222,6 +222,32 @@ describe('ShareDataTableAdapter', () => {
         expect(value).toContain(`svg`);
     });
 
+    it('should resolve link folder icon', () => {
+        spyOn(documentListService, 'getMimeTypeIcon').and.returnValue(`assets/images/ft_ic_folder_shortcut_link.svg`);
+
+        let adapter = new ShareDataTableAdapter(documentListService, null, null);
+
+        let row = new ShareDataRow(new LinkFolderNode(), documentListService, null);
+        let col = <DataColumn> { type: 'folder', key: '$thumbnail' };
+
+        let value = adapter.getValue(row, col);
+        expect(value).toContain(`assets/images/ft_ic_folder_shortcut_link`);
+        expect(value).toContain(`svg`);
+    });
+
+    it('should resolve rule folder icon', () => {
+        spyOn(documentListService, 'getMimeTypeIcon').and.returnValue(`assets/images/ft_ic_folder_rule.svg`);
+
+        let adapter = new ShareDataTableAdapter(documentListService, null, null);
+
+        let row = new ShareDataRow(new RuleFolderNode(), documentListService, null);
+        let col = <DataColumn> { type: 'folder', key: '$thumbnail' };
+
+        let value = adapter.getValue(row, col);
+        expect(value).toContain(`assets/images/ft_ic_folder_rule`);
+        expect(value).toContain(`svg`);
+    });
+
     it('should resolve file thumbnail', () => {
         let imageUrl = 'http://<addresss>';
         let adapter = new ShareDataTableAdapter(documentListService, null, null);

lib/content-services/document-list/data/share-datatable-adapter.ts

@@ -104,11 +104,7 @@ export class ShareDataTableAdapter implements DataTableAdapter {
             const node = (<ShareDataRow> row).node;
 
             if (node.entry.isFolder) {
-                if (this.isSmartFolder(node)) {
+                return this.getFolderIcon(node);
-                    return this.documentListService.getMimeTypeIcon('smartFolder');
-                } else {
-                    return this.documentListService.getMimeTypeIcon('folder');
-                }
             }
 
             if (node.entry.isFile) {
@@ -167,12 +163,35 @@ export class ShareDataTableAdapter implements DataTableAdapter {
         this.imageResolver = resolver;
     }
 
+    private getFolderIcon(node: any) {
+        if (this.isSmartFolder(node)) {
+            return this.documentListService.getMimeTypeIcon('smartFolder');
+        } else if (this.isRuleFolder(node)) {
+            return this.documentListService.getMimeTypeIcon('ruleFolder');
+        } else if (this.isALinkFolder(node)) {
+            return this.documentListService.getMimeTypeIcon('linkFolder');
+        } else {
+            return this.documentListService.getMimeTypeIcon('folder');
+        }
+    }
+
     isSmartFolder(node: any) {
         let nodeAspects = this.getNodeAspectNames(node);
         return nodeAspects.indexOf('smf:customConfigSmartFolder') > -1 ||
             (nodeAspects.indexOf('smf:systemConfigSmartFolder') > -1);
     }
 
+    isRuleFolder(node: any) {
+        let nodeAspects = this.getNodeAspectNames(node);
+        return nodeAspects.indexOf('rule:rules') > -1 ||
+            (nodeAspects.indexOf('rule:rules') > -1);
+    }
+
+    isALinkFolder(node: any) {
+        const nodeType = node.entry ? node.entry.nodeType : node.nodeType;
+        return nodeType === 'app:folderlink';
+    }
+
     private getNodeAspectNames(node: any): any[] {
         return node.entry && node.entry.aspectNames ? node.entry.aspectNames : node.aspectNames ? node.aspectNames : [];
     }

lib/content-services/mock/document-library.model.mock.ts

@@ -71,3 +71,29 @@ export class SmartFolderNode extends NodeMinimalEntry {
         this.entry.aspectNames = ['smf:systemConfigSmartFolder'];
     }
 }
+
+export class RuleFolderNode extends NodeMinimalEntry {
+    constructor(name?: string) {
+        super();
+        this.entry = new NodeMinimal();
+        this.entry.id = 'rule-folder-id';
+        this.entry.isFile = false;
+        this.entry.isFolder = true;
+        this.entry.name = name;
+        this.entry.path = new PathInfoEntity();
+        this.entry.aspectNames = ['rule:rules'];
+    }
+}
+
+export class LinkFolderNode extends NodeMinimalEntry {
+    constructor(name?: string) {
+        super();
+        this.entry = new NodeMinimal();
+        this.entry.id = 'link-folder-id';
+        this.entry.isFile = false;
+        this.entry.isFolder = true;
+        this.entry.nodeType = 'app:folderlink';
+        this.entry.name = name;
+        this.entry.path = new PathInfoEntity();
+    }
+}

lib/core/assets/images/ft_ic_folder_rule.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>folder-with-rule copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="folder-with-rule-copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="systemicon/folder-with-rules-active">
+            <g id="folder-with-rules">
+                <g id="Group">
+                    <polygon id="Fill-1" points="0 24 24 24 24 0 0 0"></polygon>
+                    <path d="M10,4 L4,4 C2.895,4 2.01,4.895 2.01,6 L2,18 C2,19.105 2.895,20 4,20 L20,20 C21.105,20 22,19.105 22,18 L22,8 C22,6.895 21.105,6 20,6 L12,6 L10,4 Z" id="Fill-2" fill="#D9E021"></path>
+                    <polygon id="Fill-1-Copy" fill="#FFFFFF" points="14.8620241 9 16.4361035 10.574375 13.4948433 13.5155 10.5501462 10.574375 12.124913 9 8 9 8 13.125 9.57476682 11.550625 12.8109092 14.78875 12.8109092 18 14.1863384 18 14.1863384 14.776375 17.4121702 11.550625 18.9862497 13.125 18.9862497 9"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

lib/core/assets/images/ft_ic_folder_shortcut_link.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>folder-shortcut-link copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="folder-shortcut-link-copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="systemicon/folder-shortcut-link-active">
+            <g id="folder-shortcut-link">
+                <g id="Group-9">
+                    <polygon id="Fill-1" points="0 24 24 24 24 0 0 0"></polygon>
+                    <path d="M2.70933755,4.54327602 L2,5.924926 L2,18.8121399 L2.69466158,19.5150573 C2.88252616,19.7051546 3.13866895,19.8121399 3.40593302,19.8121399 L20.6045166,19.8121399 L21.3116234,19.1050331 C21.4991598,18.9174967 21.6045166,18.6631428 21.6045166,18.3979263 L21.6045166,7.00924449 L20.9015261,6.24697884 C20.7122055,6.04169503 20.4456711,5.924926 20.1664154,5.924926 L11.1733882,5.924926 C10.8510886,5.924926 10.548546,5.76958526 10.3607292,5.50766556 L9.57882415,4.41726045 C9.39100739,4.15534074 9.08846483,4 8.76616517,4 L3.59894601,4 C3.2240117,4 2.88057904,4.20973129 2.70933755,4.54327602 Z" id="Path-2-Copy" fill="#D9E021"></path>
+                    <path d="M15.75,10 L13.15,10 L13.15,11.235 L15.75,11.235 C16.8615,11.235 17.765,12.1385 17.765,13.25 C17.765,14.3615 16.8615,15.265 15.75,15.265 L13.15,15.265 L13.15,16.5 L15.75,16.5 C17.544,16.5 19,15.044 19,13.25 C19,11.456 17.544,10 15.75,10 L15.75,10 Z M9.9,13.9 L15.1,13.9 L15.1,12.6 L9.9,12.6 L9.9,13.9 Z M7.235,13.25 C7.235,12.1385 8.1385,11.235 9.25,11.235 L11.85,11.235 L11.85,10 L9.25,10 C7.456,10 6,11.456 6,13.25 C6,15.044 7.456,16.5 9.25,16.5 L11.85,16.5 L11.85,15.265 L9.25,15.265 C8.1385,15.265 7.235,14.3615 7.235,13.25 L7.235,13.25 Z" id="Fill-2" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

lib/core/services/thumbnail.service.ts

@@ -149,6 +149,8 @@ export class ThumbnailService {
         'application/x-cpio': './assets/images/ft_ic_document.svg',
         'folder': './assets/images/ft_ic_folder.svg',
         'smartFolder': './assets/images/ft_ic_smart_folder.svg',
+        'ruleFolder': './assets/images/ft_ic_folder_rule.svg',
+        'linkFolder': './assets/images/ft_ic_folder_shortcut_link.svg',
         'disable/folder': './assets/images/ft_ic_folder_disable.svg',
         'selected': './assets/images/ft_ic_selected.svg'
     };