[ACA-1574] DocumentList - single click navigation (#513)

* single click navigation

* fix tests

* allow action on row

* use adf link class

* update tests

e2e/components/data-table/data-table.ts

@@ -44,6 +44,7 @@ export class DataTable extends Component {
         selectedRow: '.adf-datatable-row.is-selected',
         cell: '.adf-data-table-cell',
         locationLink: 'aca-location-link',
+        linkCell: '.adf-location-cell',
 
         selectedIcon: '.mat-icon',
 
@@ -59,6 +60,7 @@ export class DataTable extends Component {
     body: ElementFinder = this.component.element(by.css(DataTable.selectors.body));
     cell = by.css(DataTable.selectors.cell);
     locationLink = by.css(DataTable.selectors.locationLink);
+    linkCell: ElementFinder = this.component.element(by.css(DataTable.selectors.linkCell));
     emptyList: ElementFinder = this.component.element(by.css(DataTable.selectors.emptyListContainer));
     emptyFolderDragAndDrop: ElementFinder = this.component.element(by.css(DataTable.selectors.emptyFolderDragAndDrop));
     emptyListTitle: ElementFinder = this.component.element(by.css(DataTable.selectors.emptyListTitle));
@@ -139,10 +141,18 @@ export class DataTable extends Component {
         return this.body.element(by.cssContainingText(`.adf-data-table-cell span`, name));
     }
 
+    getRowLink(name: string): ElementFinder {
+        return this.body.element(by.cssContainingText(`.adf-data-table-cell a`, name));
+    }
+
     getItemNameTooltip(name: string): promise.Promise<string> {
         return this.getRowName(name).getAttribute('title');
     }
 
+    getLinkCellTooltip(name: string): promise.Promise<string> {
+        return this.getRowLink(name).getAttribute('title');
+    }
+
     countRows(): promise.Promise<number> {
         return this.getRows().count();
     }

e2e/suites/list-views/file-libraries.test.ts

@@ -150,12 +150,12 @@ describe('File Libraries', () => {
     });
 
     it('Tooltip for sites without description [C217096]', () => {
-        const tooltip = dataTable.getItemNameTooltip(sitePrivate);
+        const tooltip = dataTable.getLinkCellTooltip(sitePrivate);
         expect(tooltip).toBe(`${sitePrivate}`);
     });
 
     it('Tooltip for sites with description [C217097]', () => {
-        const tooltip = dataTable.getItemNameTooltip(siteModerated);
+        const tooltip = dataTable.getLinkCellTooltip(siteModerated);
         expect(tooltip).toBe(`${siteDescription}`);
     });
 });

src/app/components/files/files.component.html

@@ -147,7 +147,7 @@
                     [allowDropFiles]="true"
                     [navigate]="false"
                     [imageResolver]="imageResolver"
-                    (node-dblclick)="onNodeDoubleClick($event.detail?.node)">
+                    (node-dblclick)="navigateTo($event.detail?.node)">
 
                     <data-columns>
                         <data-column
@@ -158,11 +158,15 @@
                         </data-column>
 
                         <data-column
-                            class="adf-data-table-cell--ellipsis__name"
+                            class="adf-data-table-cell--ellipsis__name adf-location-cell"
                             key="name"
                             title="APP.DOCUMENT_LIST.COLUMNS.NAME">
                             <ng-template let-value="value" let-context>
-                                <span class="adf-datatable-cell" title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
+                                <a
+                                    title="{{ context?.row?.obj | adfNodeNameTooltip }}"
+                                    (click)="navigateTo(context?.row?.obj)">
+                                    {{ value }}
+                                </a>
                             </ng-template>
                         </data-column>
 

src/app/components/files/files.component.ts

@@ -118,7 +118,7 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
         });
     }
 
-    onNodeDoubleClick(node: MinimalNodeEntity) {
+    navigateTo(node: MinimalNodeEntity) {
         if (node && node.entry) {
             const { id, isFolder } = node.entry;
 

src/app/components/libraries/libraries.component.html

@@ -49,7 +49,7 @@
                 selectionMode="single"
                 [navigate]="false"
                 [sorting]="[ 'title', 'asc' ]"
-                (node-dblclick)="onNodeDoubleClick($event)">
+                (node-dblclick)="navigateTo($event.detail?.node)">
 
                 <empty-folder-content>
                     <ng-template>
@@ -70,13 +70,15 @@
                     </data-column>
 
                     <data-column
-                        class="adf-data-table-cell--ellipsis__name"
+                        class="adf-data-table-cell--ellipsis__name adf-location-cell"
                         key="title"
                         title="APP.DOCUMENT_LIST.COLUMNS.TITLE">
                         <ng-template let-context>
-                            <span class="adf-datatable-cell" title="{{ makeLibraryTooltip(context.row.obj.entry) }}">
+                            <a
+                                title="{{ makeLibraryTooltip(context.row.obj.entry) }}"
+                                (click)="navigateTo(context?.row?.obj)">
                                 {{ makeLibraryTitle(context.row.obj.entry) }}
-                            </span>
+                            </a>
                         </ng-template>
                     </data-column>
 

src/app/components/libraries/libraries.component.spec.ts

@@ -163,35 +163,23 @@ describe('LibrariesComponent', () => {
         });
     });
 
-    describe('onNodeDoubleClick', () => {
+    describe('navigateTo', () => {
-        it('navigates to document', () => {
+        it('navigates into library folder', () => {
             spyOn(component, 'navigate');
 
-            const event: any = {
+            const site: any = {
-                detail: {
+                entry: { guid: 'node-guid' }
-                    node: {
-                        entry: { guid: 'node-guid' }
-                    }
-                }
             };
 
-            component.onNodeDoubleClick(event);
+            component.navigateTo(site);
 
             expect(component.navigate).toHaveBeenCalledWith('node-guid');
         });
 
-        it(' does not navigate when document is not provided', () => {
+        it(' does not navigate when library is not provided', () => {
             spyOn(component, 'navigate');
 
-            const event: any = {
+            component.navigateTo(null);
-                detail: {
-                    node: {
-                        entry: null
-                    }
-                }
-            };
-
-            component.onNodeDoubleClick(event);
 
             expect(component.navigate).not.toHaveBeenCalled();
         });

src/app/components/libraries/libraries.component.ts

@@ -84,11 +84,9 @@ export class LibrariesComponent extends PageComponent implements OnInit {
         return isDuplicate ? `${title} (${id})` : `${title}`;
     }
 
-    onNodeDoubleClick(e: CustomEvent) {
+    navigateTo(node: SiteEntry) {
-        const node: any = e.detail.node.entry;
+        if (node && node.entry.guid) {
-
+            this.navigate(node.entry.guid);
-        if (node && node.guid) {
-            this.navigate(node.guid);
         }
     }