[ADF-1466] Ng2-activiti-tasklist module uses NO_ERRORS_SCHEMA schema, which hides underlying error (#2271)

* [ADF-1466] Ng2-activiti-tasklist module uses NO_ERRORS_SCHEMA schema, which hides underlying error

* Added directives for the custom tags

* Replaced empty list tags with new directives

* Removed CUSTOM_ELEMENTS_SCHEMA document-list, task-list and process-list

* Handled empty attachment list sceeenario in attachment list

* [ADF-1466] Ng2-activiti-tasklist module uses NO_ERRORS_SCHEMA schema, which hides underlying error

* Added tests for disabled and non empty attachments scenario

ng2-components/ng2-activiti-processlist/index.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { CUSTOM_ELEMENTS_SCHEMA, ModuleWithProviders, NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import {
     MdButtonModule,
     MdCardModule,
@@ -148,8 +148,7 @@ export const ACTIVITI_PROCESSLIST_PROVIDERS: [any] = [
     ],
     exports: [
         ...ACTIVITI_PROCESSLIST_DIRECTIVES
-    ],
+    ]
-    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
 })
 export class ActivitiProcessListModule {
     static forRoot(): ModuleWithProviders {

ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.html

@@ -1,21 +1,14 @@
 <adf-datatable [rows]="attachments" [actions]="true" [loading]="isLoading" (rowDblClick)="openContent($event)" (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)">
-    <adf-empty-list *ngIf="!isDisabled()">
+    <adf-empty-list *ngIf="isEmpty()">
-        <adf-empty-list-header>
+        <div adf-empty-list-header class="adf-empty-list-header"> {{'PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}} </div>
-            <div> {{'PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}} </div>
+        <div adf-empty-list-body *ngIf="!isDisabled()">
-        </adf-empty-list-header>
-        <adf-empty-list-body>
             <div class="adf-empty-list-drag_drop">{{'PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}</div>
             <div class="adf-empty-list__any-files-here-to-add"> {{'PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}} </div>
-        </adf-empty-list-body>
+        </div>
-        <adf-empty-list-footer>
+        <div adf-empty-list-footer *ngIf="!isDisabled()">
-            <div><img class="adf-empty-list__empty_doc_lib" [src]="emptyListImageUrl"></div>
+            <img class="adf-empty-list__empty_doc_lib" [src]="emptyListImageUrl">
-        </adf-empty-list-footer>
+        </div>
-    </adf-empty-list>
-    <adf-empty-list *ngIf="isDisabled()">
-        <adf-empty-list-header>
-            <div> {{'PROCESS-ATTACHMENT.EMPTY-LIST.HEADER' | translate}} </div>
-        </adf-empty-list-header>
     </adf-empty-list>
     <data-columns>
         <data-column key="icon" type="icon" srTitle="Thumbnail" [sortable]="false"></data-column>

ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.scss

@@ -1,6 +1,5 @@
-adf-datatable /deep/ .column-header {
+adf-datatable /deep/ th span {
     color: #232323;
-    font-size: 15px;
 }
 
 adf-datatable /deep/ .data-cell {
@@ -12,7 +11,7 @@ adf-datatable /deep/ .data-cell {
     margin-right: calc((100% - 100px) / 2);
 }
 
-adf-empty-list-header /deep/ div {
+.adf-empty-list-header {
     height: 32px;
     opacity: 0.26 !important;
     font-family: Muli, Helvetica, Arial, sans-serif;

ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange } from '@angular/core';
+import { SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MdProgressSpinnerModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
@@ -52,8 +52,7 @@ describe('ProcessAttachmentListComponent', () => {
             providers: [
                 { provide: AlfrescoTranslationService, useClass: TranslationMock },
                 ActivitiContentService
-            ],
+            ]
-            schemas: [CUSTOM_ELEMENTS_SCHEMA]
         }).compileComponents();
     }));
 
@@ -213,7 +212,7 @@ describe('ProcessAttachmentListComponent', () => {
         component.ngOnChanges({'processInstanceId': change});
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('adf-empty-list-header').innerText.trim()).toEqual('PROCESS-ATTACHMENT.EMPTY.HEADER');
+            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual('PROCESS-ATTACHMENT.EMPTY.HEADER');
         });
     }));
 
@@ -245,7 +244,19 @@ describe('ProcessAttachmentListComponent', () => {
 
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('adf-empty-list-header').innerText.trim()).toEqual('PROCESS-ATTACHMENT.EMPTY-LIST.HEADER');
+            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual('PROCESS-ATTACHMENT.EMPTY.HEADER');
+        });
+    }));
+
+    it('should not show the empty list component when the attachments list is not empty for completed process', async(() => {
+        getProcessRelatedContentSpy.and.returnValue(Observable.of(mockAttachment));
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({'processInstanceId': change});
+        component.disabled = true;
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]')).toBeNull();
         });
     }));
 

ng2-components/ng2-activiti-tasklist/index.ts

@@ -16,7 +16,7 @@
  */
 
 import { DatePipe } from '@angular/common';
-import { ModuleWithProviders, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { MdAutocompleteModule, MdButtonModule, MdCardModule, MdDatepickerModule, MdGridListModule,
     MdIconModule, MdInputModule, MdNativeDateModule, MdProgressSpinnerModule, MdRippleModule, MdSelectModule } from '@angular/material';
 import { ActivitiFormModule } from 'ng2-activiti-form';
@@ -33,7 +33,7 @@ import { CommentsComponent } from './src/components/comments.component';
 import { AttachmentComponent } from './src/components/create-task-attachment.component';
 import { NoTaskDetailsTemplateDirective } from './src/components/no-task-detail-template.directive';
 import { PeopleListComponent } from './src/components/people-list.component';
-import { PeopleSearchComponent } from './src/components/people-search.component';
+import { PeopleSearchActionLabelDirective, PeopleSearchComponent, PeopleSearchTitleDirective } from './src/components/people-search.component';
 import { PeopleComponent } from './src/components/people.component';
 import { StartTaskComponent } from './src/components/start-task.component';
 import { TaskAttachmentListComponent } from './src/components/task-attachment-list.component';
@@ -55,7 +55,7 @@ export {TaskFiltersComponent } from './src/components/task-filters.component';
 export {TaskDetailsComponent } from './src/components/task-details.component';
 export {TaskAuditDirective } from './src/components/task-audit.directive';
 export {StartTaskComponent } from './src/components/start-task.component';
-export {PeopleSearchComponent } from './src/components/people-search.component';
+export {PeopleSearchComponent, PeopleSearchTitleDirective } from './src/components/people-search.component';
 export {AttachmentComponent } from './src/components/create-task-attachment.component';
 export {PeopleListComponent } from './src/components/people-list.component';
 export {CommentListComponent } from './src/components/comment-list.component';
@@ -118,6 +118,8 @@ export const ACTIVITI_TASKLIST_DIRECTIVES: any[] = [
     TaskHeaderComponent,
     StartTaskComponent,
     PeopleSearchComponent,
+    PeopleSearchTitleDirective,
+    PeopleSearchActionLabelDirective,
     TaskAttachmentListComponent,
     AttachmentComponent,
     PeopleListComponent,
@@ -185,8 +187,7 @@ export const ACTIVITI_TASKLIST_PROVIDERS: any[] = [
         ...ACTIVITI_TASKLIST_DIRECTIVES,
         MdIconModule,
         MdButtonModule
-    ],
+    ]
-    schemas: [ NO_ERRORS_SCHEMA ]
 })
 export class ActivitiTaskListModule {
     static forRoot(): ModuleWithProviders {

ng2-components/ng2-activiti-tasklist/src/components/people-search.component.html

@@ -1,5 +1,5 @@
 <div class="search-text-header">
-    <ng-content select="header-title"></ng-content>
+    <ng-content select="[people-search-title]"></ng-content>
 </div>
 <md-input-container class="search-text-container">
 	<input mdInput placeholder="{{'PEOPLE.SEARCH_USER'|translate}}" type="text" id="userSearchText" [value]="" [formControl]="searchUser">
@@ -33,6 +33,6 @@
         {{'PEOPLE.DIALOG_CLOSE' | translate }}
     </button>
     <button md-button type="button" id="add-people" (click)="involveUserAndClose()">
-        <ng-content select="action-button-label"></ng-content>
+        <ng-content select="[people-search-action-label]"></ng-content>
     </button>
 </div>

ng2-components/ng2-activiti-tasklist/src/components/people-search.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Observable } from 'rxjs/Observable';
 import { User } from '../models/user.model';
@@ -111,3 +111,6 @@ export class PeopleSearchComponent implements OnInit {
         }
     }
 }
+
+@Directive({ selector: 'people-search-title' }) export class PeopleSearchTitleDirective { }
+@Directive({ selector: 'people-search-action-label' }) export class PeopleSearchActionLabelDirective { }

ng2-components/ng2-activiti-tasklist/src/components/people.component.html

@@ -16,8 +16,8 @@
         (success)="involveUser($event)"
         (closeSearch)="onCloseSearch()"
         [results]="peopleSearch$">
-            <header-title>{{ 'TASK_DETAILS.LABELS.ADD_PEOPLE' | translate }}</header-title>
+            <ng-container people-search-title>{{ 'TASK_DETAILS.LABELS.ADD_PEOPLE' | translate }}</ng-container>
-            <action-button-label>{{ 'PEOPLE.ADD_USER' | translate }}</action-button-label>
+            <ng-container people-search-action-label>{{ 'PEOPLE.ADD_USER' | translate }}</ng-container>
         </adf-people-search>
     </div>
     <div class="assignment-list-container" id="assignment-people-list" *ngIf="hasPeople()">

ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.html

@@ -1,21 +1,14 @@
 <adf-datatable [rows]="attachments" [actions]="true" [loading]="isLoading" (rowDblClick)="openContent($event)" (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)">
-    <adf-empty-list *ngIf="!isDisabled()">
+    <adf-empty-list *ngIf="isEmpty()">
-        <adf-empty-list-header>
+        <div adf-empty-list-header class="adf-empty-list-header"> {{'TASK-ATTACHMENT.EMPTY.HEADER' | translate}} </div>
-            <div class="adf-empty-list-header"> {{'TASK-ATTACHMENT.EMPTY.HEADER' | translate}} </div>
+        <div adf-empty-list-body *ngIf="!isDisabled()">
-        </adf-empty-list-header>
-        <adf-empty-list-body>
             <div class="adf-empty-list-drag_drop">{{'TASK-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}</div>
             <div class="adf-empty-list__any-files-here-to-add"> {{'TASK-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}} </div>
-        </adf-empty-list-body>
+        </div>
-        <adf-empty-list-footer>
+        <div adf-empty-list-footer *ngIf="!isDisabled()">
-            <div><img class="adf-empty-list__empty_doc_lib" [src]="emptyListImageUrl"></div>
+            <img class="adf-empty-list__empty_doc_lib" [src]="emptyListImageUrl">
-        </adf-empty-list-footer>
+        </div>
-    </adf-empty-list>
-    <adf-empty-list *ngIf="isDisabled()">
-        <adf-empty-list-header>
-            <div> {{'TASK-ATTACHMENT.EMPTY-LIST.HEADER' | translate}} </div>
-        </adf-empty-list-header>
     </adf-empty-list>
     <data-columns>
         <data-column key="icon" type="icon" srTitle="Thumbnail" [sortable]="false"></data-column>

ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.scss

@@ -1,6 +1,5 @@
-adf-datatable  /deep/ .column-header {
+adf-datatable  /deep/ th span {
     color: #232323;
-    font-size: 15px;
 }
 
 adf-datatable  /deep/ .data-cell {
@@ -12,7 +11,7 @@ adf-datatable  /deep/ .data-cell {
     margin-right: calc((100% - 100px) / 2);
 }
 
-adf-empty-list-header /deep/ div {
+.adf-empty-list-header {
     height: 32px;
     opacity: 0.26;
     font-family: Muli, Helvetica, Arial, sans-serif;

ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange } from '@angular/core';
+import { SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MdProgressSpinnerModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
@@ -54,8 +54,7 @@ describe('TaskAttachmentList', () => {
                 ActivitiContentService,
                 { provide: AppConfigService, useClass: AppConfigServiceMock },
                 { provide: TranslationService, useClass: TranslationMock }
-            ],
+            ]
-            schemas: [CUSTOM_ELEMENTS_SCHEMA]
         }).compileComponents();
 
     }));
@@ -203,7 +202,7 @@ describe('TaskAttachmentList', () => {
 
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('adf-empty-list-header').innerText.trim()).toEqual('TASK-ATTACHMENT.EMPTY.HEADER');
+            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual('TASK-ATTACHMENT.EMPTY.HEADER');
         });
     }));
 
@@ -236,7 +235,19 @@ describe('TaskAttachmentList', () => {
 
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('adf-empty-list-header').innerText.trim()).toEqual('TASK-ATTACHMENT.EMPTY-LIST.HEADER');
+            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual('TASK-ATTACHMENT.EMPTY.HEADER');
+        });
+    }));
+
+    it('should not show the empty list component when the attachments list is not empty for completed task', async(() => {
+        getTaskRelatedContentSpy.and.returnValue(Observable.of(mockAttachment));
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({'taskId': change});
+        component.disabled = true;
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]')).toBeNull();
         });
     }));
 

ng2-components/ng2-activiti-tasklist/src/components/task-details.component.html

@@ -61,8 +61,8 @@
                         (success)="assignTaskToUser($event)"
                         (closeSearch)="onCloseSearch()"
                         [results]="peopleSearch$">
-                            <header-title>{{ 'TASK_DETAILS.LABELS.ADD_ASSIGNEE' | translate }}</header-title>
+                            <ng-container people-search-title>{{ 'TASK_DETAILS.LABELS.ADD_ASSIGNEE' | translate }}</ng-container>
-                            <action-button-label>{{ 'PEOPLE.ADD_ASSIGNEE' | translate }}</action-button-label>
+                            <ng-container people-search-action-label>{{ 'PEOPLE.ADD_ASSIGNEE' | translate }}</ng-container>
                         </adf-people-search>
                     </div>
                     <adf-task-header

ng2-components/ng2-alfresco-datatable/index.ts

@@ -30,7 +30,10 @@ export { DataRowActionEvent, DataRowActionModel } from './src/components/datatab
 
 import { DataTableCellComponent } from './src/components/datatable/datatable-cell.component';
 import { DataTableComponent } from './src/components/datatable/datatable.component';
-import { EmptyListComponent } from './src/components/datatable/empty-list.component';
+import { EmptyListBodyDirective,
+    EmptyListComponent,
+    EmptyListFooterDirective,
+    EmptyListHeaderDirective } from './src/components/datatable/empty-list.component';
 import { LocationCellComponent } from './src/components/datatable/location-cell.component';
 import { LoadingContentTemplateDirective } from './src/directives/loading-template.directive';
 import { NoContentTemplateDirective } from './src/directives/no-content-template.directive';
@@ -39,6 +42,9 @@ export function directives() {
     return [
         DataTableComponent,
         EmptyListComponent,
+        EmptyListHeaderDirective,
+        EmptyListBodyDirective,
+        EmptyListFooterDirective,
         DataTableCellComponent,
         LocationCellComponent,
         NoContentTemplateDirective,

ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.html

@@ -1,6 +1,6 @@
 <div class="adf-empty-list_template">
-    <ng-content select="adf-empty-list-header"></ng-content>
+    <ng-content select="[adf-empty-list-header]"></ng-content>
-    <ng-content select="adf-empty-list-body"></ng-content>
+    <ng-content select="[adf-empty-list-body]"></ng-content>
-    <ng-content select="adf-empty-list-footer"></ng-content>
+    <ng-content select="[adf-empty-list-footer]"></ng-content>
     <ng-content></ng-content>
 </div>

ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, Directive } from '@angular/core';
 
 @Component({
     selector: 'adf-empty-list',
@@ -23,3 +23,7 @@ import { Component } from '@angular/core';
     templateUrl: './empty-list.component.html'
 })
 export class EmptyListComponent {}
+
+@Directive({ selector: '[adf-empty-list-header]' }) export class EmptyListHeaderDirective {}
+@Directive({ selector: '[adf-empty-list-body]' }) export class EmptyListBodyDirective {}
+@Directive({ selector: '[adf-empty-list-footer]' }) export class EmptyListFooterDirective {}

ng2-components/ng2-alfresco-documentlist/index.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { CUSTOM_ELEMENTS_SCHEMA, ModuleWithProviders, NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
 
@@ -110,8 +110,7 @@ export const DOCUMENT_LIST_PROVIDERS: any[] = [
         DataTableModule,
         ...DOCUMENT_LIST_DIRECTIVES,
         MaterialModule
-    ],
+    ]
-    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
 })
 export class DocumentListModule {
     /** @deprecated in 1.8.0 */

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html

@@ -22,9 +22,7 @@
         <no-content-template>
             <ng-template>
                 <adf-empty-list>
-                    <adf-empty-list-header>
+                        <div adf-empty-list-header class="adf-empty-list-header"> {{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}} </div>
-                        <div> {{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}} </div>
-                    </adf-empty-list-header>
                 </adf-empty-list>
             </ng-template>
         </no-content-template>

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss

@@ -60,7 +60,7 @@
     height: 100%;
 }
 
-adf-empty-list-header >>> div {
+.adf-empty-list-header {
     height: 32px;
     opacity: 0.26 !important;
     font-family: Muli, Helvetica, Arial, sans-serif;