use dynamic columns from ADF (#889)

* upgrade to latest ADF 3.0.0 alpha

* migrate to ADF column components

* use dynamic column from ADF

* fix e2e tests

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

@@ -1,8 +1,6 @@
 <app-page-layout>
-
   <app-page-layout-header>
-    <adf-breadcrumb root="APP.BROWSE.RECENT.TITLE">
-    </adf-breadcrumb>
+    <adf-breadcrumb root="APP.BROWSE.RECENT.TITLE"> </adf-breadcrumb>
 
     <adf-toolbar class="inline">
       <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
@@ -13,70 +11,75 @@
 
   <app-page-layout-content>
     <div class="main-content">
-        <adf-document-list #documentList
-            acaDocumentList
-            acaContextActions
-            [display]="documentDisplayMode$ | async"
-            currentFolderId="-recent-"
-            selectionMode="multiple"
-            [navigate]="false"
-            [sorting]="[ 'modifiedAt', 'desc' ]"
-            [imageResolver]="imageResolver"
-            (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
-            (name-click)="onNodeDoubleClick($event.detail?.node)">
+      <adf-document-list
+        #documentList
+        acaDocumentList
+        acaContextActions
+        [display]="documentDisplayMode$ | async"
+        currentFolderId="-recent-"
+        selectionMode="multiple"
+        [navigate]="false"
+        [sorting]="['modifiedAt', 'desc']"
+        [imageResolver]="imageResolver"
+        (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
+        (name-click)="onNodeDoubleClick($event.detail?.node)"
+      >
+        <empty-folder-content>
+          <ng-template>
+            <adf-empty-content
+              icon="access_time"
+              [title]="'APP.BROWSE.RECENT.EMPTY_STATE.TITLE'"
+              subtitle="APP.BROWSE.RECENT.EMPTY_STATE.TEXT"
+            >
+            </adf-empty-content>
+          </ng-template>
+        </empty-folder-content>
 
-            <empty-folder-content>
-                <ng-template>
-                    <adf-empty-content
-                        icon="access_time"
-                        [title]="'APP.BROWSE.RECENT.EMPTY_STATE.TITLE'"
-                        subtitle="APP.BROWSE.RECENT.EMPTY_STATE.TEXT">
-                    </adf-empty-content>
+        <data-columns>
+          <ng-container *ngFor="let column of columns; trackBy: trackById">
+            <ng-container
+              *ngIf="column.template && !(column.desktopOnly && isSmallScreen)"
+            >
+              <data-column
+                [key]="column.key"
+                [title]="column.title"
+                [type]="column.type"
+                [format]="column.format"
+                [class]="column.class"
+                [sortable]="column.sortable"
+              >
+                <ng-template let-context>
+                  <adf-dynamic-column
+                    [id]="column.template"
+                    [context]="context"
+                  >
+                  </adf-dynamic-column>
                 </ng-template>
-            </empty-folder-content>
+              </data-column>
+            </ng-container>
 
-            <data-columns>
-              <ng-container *ngFor="let column of columns; trackBy: trackById">
+            <ng-container
+              *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)"
+            >
+              <data-column
+                [key]="column.key"
+                [title]="column.title"
+                [type]="column.type"
+                [format]="column.format"
+                [class]="column.class"
+                [sortable]="column.sortable"
+              >
+              </data-column>
+            </ng-container>
+          </ng-container>
+        </data-columns>
+      </adf-document-list>
 
-                <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
-                  <data-column
-                    [key]="column.key"
-                    [title]="column.title"
-                    [type]="column.type"
-                    [format]="column.format"
-                    [class]="column.class"
-                    [sortable]="column.sortable">
-                    <ng-template let-context>
-                      <app-dynamic-column
-                        [id]="column.template"
-                        [context]="context">
-                      </app-dynamic-column>
-                    </ng-template>
-                  </data-column>
-                </ng-container>
-
-                <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
-                  <data-column
-                    [key]="column.key"
-                    [title]="column.title"
-                    [type]="column.type"
-                    [format]="column.format"
-                    [class]="column.class"
-                    [sortable]="column.sortable">
-                  </data-column>
-                </ng-container>
-
-              </ng-container>
-            </data-columns>
-
-        </adf-document-list>
-
-        <adf-pagination acaPagination [target]="documentList">
-        </adf-pagination>
+      <adf-pagination acaPagination [target]="documentList"> </adf-pagination>
     </div>
 
-    <div class="sidebar" *ngIf="infoDrawerOpened$ | async">
-        <aca-info-drawer [node]="selection.last"></aca-info-drawer>
+    <div class="sidebar" *ngIf="(infoDrawerOpened$ | async)">
+      <aca-info-drawer [node]="selection.last"></aca-info-drawer>
     </div>
   </app-page-layout-content>
 </app-page-layout>