[ADF-1431] Destination Picker: Display path of the folder in search results (#2762)

* Add initial implementation with style fixes

* Further style fixes

* Add tests, styling fixes

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

@@ -1,31 +1,31 @@
 <header matDialogTitle
-        class="adf-content-node-selector-title"
-        data-automation-id="content-node-selector-title">{{title}}
+    class="adf-content-node-selector-title"
+    data-automation-id="content-node-selector-title">{{title}}
 </header>
 
 <section matDialogContent
-         class="adf-content-node-selector-content"
-         (node-select)="onNodeSelect($event)">
+    class="adf-content-node-selector-content"
+    (node-select)="onNodeSelect($event)">
 
     <mat-form-field floatPlaceholder="never" class="adf-content-node-selector-content-input">
         <input matInput
-               id="searchInput"
-               [formControl]="searchInput"
-               type="text"
-               placeholder="Search"
-               [value]="searchTerm"
-               data-automation-id="content-node-selector-search-input">
+            id="searchInput"
+            [formControl]="searchInput"
+            type="text"
+            placeholder="Search"
+            [value]="searchTerm"
+            data-automation-id="content-node-selector-search-input">
 
         <mat-icon *ngIf="searchTerm.length > 0"
-                  matSuffix (click)="clear()"
-                  class="adf-content-node-selector-content-input-icon"
-                  data-automation-id="content-node-selector-search-clear">clear
+            matSuffix (click)="clear()"
+            class="adf-content-node-selector-content-input-icon"
+            data-automation-id="content-node-selector-search-clear">clear
         </mat-icon>
 
         <mat-icon *ngIf="searchTerm.length === 0"
-                  matSuffix
-                  class="adf-content-node-selector-content-input-icon"
-                  data-automation-id="content-node-selector-search-icon">search
+            matSuffix
+            class="adf-content-node-selector-content-input-icon"
+            data-automation-id="content-node-selector-search-icon">search
         </mat-icon>
 
     </mat-form-field>
@@ -40,20 +40,23 @@
     <adf-toolbar>
         <adf-toolbar-title>
             <adf-dropdown-breadcrumb *ngIf="needBreadcrumbs()"
-                                     class="adf-content-node-selector-content-breadcrumb"
-                                     (navigate)="clear()"
-                                     [target]="documentList"
-                                     [folderNode]="breadcrumbFolderNode"
-                                     data-automation-id="content-node-selector-content-breadcrumb">
+                class="adf-content-node-selector-content-breadcrumb"
+                (navigate)="clear()"
+                [target]="documentList"
+                [folderNode]="breadcrumbFolderNode"
+                data-automation-id="content-node-selector-content-breadcrumb">
             </adf-dropdown-breadcrumb>
         </adf-toolbar-title>
     </adf-toolbar>
 
-    <div class="adf-content-node-selector-content-list" data-automation-id="content-node-selector-content-list">
+    <div 
+        class="adf-content-node-selector-content-list"
+        [class.adf-content-node-selector-content-list-searchLayout]="showingSearchResults"
+        data-automation-id="content-node-selector-content-list">
         <adf-document-list
             #documentList
             adf-highlight
-            adf-highlight-selector=".cell-value adf-datatable-cell .adf-datatable-cell-value"
+            adf-highlight-selector="adf-name-location-cell .adf-name-location-cell-name"
             [node]="nodes"
             [maxItems]="pageSize"
             [skipCount]="skipCount"
@@ -74,6 +77,18 @@
                     <div>{{ 'NODE_SELECTOR.NO_RESULTS' | translate }}</div>
                 </ng-template>
             </empty-folder-content>
+
+            <data-columns>
+                <data-column key="$thumbnail" type="image"></data-column>
+                <data-column key="name" type="text" class="full-width ellipsis-cell">
+                    <ng-template let-context="$implicit">
+                        <adf-name-location-cell [data]="context.data" [column]="context.col" [row]="context.row"></adf-name-location-cell>                        
+                    </ng-template>
+                </data-column>
+                <data-column key="modifiedAt" type="date" format="timeAgo" class="adf-content-selector-modified-cell"></data-column>
+                <data-column key="modifiedByUser.displayName" type="text" class="adf-content-selector-modifier-cell"></data-column>
+            </data-columns>
+
         </adf-document-list>
 
         <adf-infinite-pagination
@@ -91,17 +106,17 @@
 <footer matDialogActions class="adf-content-node-selector-actions">
 
     <button *ngIf="inDialog"
-            mat-button
-            class="adf-content-node-selector-actions-cancel"
-            (click)="close()"
-            data-automation-id="content-node-selector-actions-cancel">{{ 'NODE_SELECTOR.CANCEL' | translate }}
+        mat-button
+        class="adf-content-node-selector-actions-cancel"
+        (click)="close()"
+        data-automation-id="content-node-selector-actions-cancel">{{ 'NODE_SELECTOR.CANCEL' | translate }}
     </button>
 
     <button mat-button
-            [disabled]="!chosenNode"
-            class="adf-content-node-selector-actions-choose"
-            (click)="choose()"
-            data-automation-id="content-node-selector-actions-choose">{{ buttonActionName | translate }}
+        [disabled]="!chosenNode"
+        class="adf-content-node-selector-actions-choose"
+        (click)="choose()"
+        data-automation-id="content-node-selector-actions-choose">{{ buttonActionName | translate }}
     </button>
 
 </footer>