From bc48a3923e88576892eeee05f27fdf3cef4ea4e2 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Thu, 23 Nov 2017 14:05:13 +0000
Subject: [PATCH] [ADF-2005] Cannot view document in tasklist attachment list
 (#2701)

---
 demo-shell/src/app/app.module.ts              | 26 ++++-----
 demo-shell/src/app/app.routes.ts              | 22 ++++----
 .../activiti-task-attachments.component.html  | 32 -----------
 .../file-view/file-view.component.ts          |  6 ++-
 .../apps-view.component.html                  |  0
 .../apps-view.component.ts                    |  4 +-
 .../custom-editor/custom-editor.component.ts  |  2 +-
 .../demo-field-validator.ts                   |  0
 .../form-node-viewer.component.css            |  0
 .../form-node-viewer.component.html           |  0
 .../form-node-viewer.component.ts             |  0
 .../form-viewer.component.css                 |  0
 .../form-viewer.component.html                |  0
 .../form-viewer.component.ts                  |  2 +-
 .../process-attachments.component.css}        |  0
 .../process-attachments.component.html}       | 10 ++--
 .../process-attachments.component.ts}         | 14 ++---
 .../process-service.component.html}           | 54 +++++++------------
 .../process-service.component.scss}           | 14 ++---
 .../process-service.component.ts}             | 12 ++---
 .../show-diagram.component.css}               |  0
 .../show-diagram.component.html}              |  0
 .../show-diagram.component.ts}                |  8 +--
 .../task-attachments.component.css}           |  0
 .../task-attachments.component.html           | 39 ++++++++++++++
 .../task-attachments.component.ts}            |  8 +--
 .../app/services/in-memory-form.service.ts    |  6 +--
 demo-shell/tslint.json                        |  2 +-
 28 files changed, 128 insertions(+), 133 deletions(-)
 delete mode 100644 demo-shell/src/app/components/activiti/activiti-task-attachments.component.html
 rename demo-shell/src/app/components/{activiti => process-service}/apps-view.component.html (100%)
 rename demo-shell/src/app/components/{activiti => process-service}/apps-view.component.ts (93%)
 rename demo-shell/src/app/components/{activiti => process-service}/custom-editor/custom-editor.component.ts (93%)
 rename demo-shell/src/app/components/{activiti => process-service}/demo-field-validator.ts (100%)
 rename demo-shell/src/app/components/{activiti => process-service}/form-node-viewer.component.css (100%)
 rename demo-shell/src/app/components/{activiti => process-service}/form-node-viewer.component.html (100%)
 rename demo-shell/src/app/components/{activiti => process-service}/form-node-viewer.component.ts (100%)
 rename demo-shell/src/app/components/{activiti => process-service}/form-viewer.component.css (100%)
 rename demo-shell/src/app/components/{activiti => process-service}/form-viewer.component.html (100%)
 rename demo-shell/src/app/components/{activiti => process-service}/form-viewer.component.ts (97%)
 rename demo-shell/src/app/components/{activiti/activiti-process-attachments.component.css => process-service/process-attachments.component.css} (100%)
 rename demo-shell/src/app/components/{activiti/activiti-process-attachments.component.html => process-service/process-attachments.component.html} (76%)
 rename demo-shell/src/app/components/{activiti/activiti-process-attachments.component.ts => process-service/process-attachments.component.ts} (82%)
 rename demo-shell/src/app/components/{activiti/activiti.component.html => process-service/process-service.component.html} (76%)
 rename demo-shell/src/app/components/{activiti/activiti.component.scss => process-service/process-service.component.scss} (90%)
 rename demo-shell/src/app/components/{activiti/activiti.component.ts => process-service/process-service.component.ts} (97%)
 rename demo-shell/src/app/components/{activiti/activiti-show-diagram.component.css => process-service/show-diagram.component.css} (100%)
 rename demo-shell/src/app/components/{activiti/activiti-show-diagram.component.html => process-service/show-diagram.component.html} (100%)
 rename demo-shell/src/app/components/{activiti/activiti-show-diagram.component.ts => process-service/show-diagram.component.ts} (85%)
 rename demo-shell/src/app/components/{activiti/activiti-task-attachments.component.css => process-service/task-attachments.component.css} (100%)
 create mode 100644 demo-shell/src/app/components/process-service/task-attachments.component.html
 rename demo-shell/src/app/components/{activiti/activiti-task-attachments.component.ts => process-service/task-attachments.component.ts} (89%)

diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts
index f7e67cf675..985735a566 100644
--- a/demo-shell/src/app/app.module.ts
+++ b/demo-shell/src/app/app.module.ts
@@ -22,13 +22,11 @@ import { FormComponent } from './components/form/form.component';
 import { FormListComponent } from './components/form/form-list.component';
 import { CustomSourcesComponent } from './components/files/custom-sources.component';
 
-import { ActivitiComponent } from './components/activiti/activiti.component';
-import { ActivitiTaskAttachmentsComponent } from './components/activiti/activiti-task-attachments.component';
-import { ActivitiProcessAttachmentsComponent } from './components/activiti/activiti-process-attachments.component';
-import { ActivitiShowDiagramComponent } from './components/activiti/activiti-show-diagram.component';
-import { FormViewerComponent } from './components/activiti/form-viewer.component';
-import { FormNodeViewerComponent } from './components/activiti/form-node-viewer.component';
-import { ActivitiAppsViewComponent } from './components/activiti/apps-view.component';
+import { ProcessServiceComponent } from './components/process-service/process-service.component';
+import { ShowDiagramComponent } from './components/process-service/show-diagram.component';
+import { FormViewerComponent } from './components/process-service/form-viewer.component';
+import { FormNodeViewerComponent } from './components/process-service/form-node-viewer.component';
+import { AppsViewComponent } from './components/process-service/apps-view.component';
 import { DataTableComponent } from './components/datatable/datatable.component';
 import { FilesComponent } from './components/files/files.component';
 import { FileViewComponent } from './components/file-view/file-view.component';
@@ -43,6 +41,8 @@ import { DebugAppConfigService } from './services/debug-app-config.service';
 import { routing } from './app.routes';
 import { TranslateModule } from '@ngx-translate/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { TaskAttachmentsComponent } from './components/process-service/task-attachments.component';
+import { ProcessAttachmentsComponent } from './components/process-service/process-attachments.component';
 
 
 @NgModule({
@@ -69,13 +69,11 @@ import { ReactiveFormsModule } from '@angular/forms';
         SearchBarComponent,
         SearchResultComponent,
         AboutComponent,
-        ActivitiComponent,
-        ActivitiTaskAttachmentsComponent,
-        ActivitiProcessAttachmentsComponent,
-        ActivitiShowDiagramComponent,
+        ProcessServiceComponent,
+        ShowDiagramComponent,
         FormViewerComponent,
         FormNodeViewerComponent,
-        ActivitiAppsViewComponent,
+        AppsViewComponent,
         DataTableComponent,
         FilesComponent,
         FileViewComponent,
@@ -85,7 +83,9 @@ import { ReactiveFormsModule } from '@angular/forms';
         TagComponent,
         SocialComponent,
         CustomSourcesComponent,
-        VersionManagerDialogAdapterComponent
+        VersionManagerDialogAdapterComponent,
+        TaskAttachmentsComponent,
+        ProcessAttachmentsComponent
     ],
     providers: [
         TranslateService,
diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts
index 5505e4da96..f9a7b5938f 100644
--- a/demo-shell/src/app/app.routes.ts
+++ b/demo-shell/src/app/app.routes.ts
@@ -23,11 +23,11 @@ import { LoginComponent } from './components/login/login.component';
 import { SettingsComponent } from './components/settings/settings.component';
 import { HomeComponent } from './components/home/home.component';
 import { AboutComponent } from './components/about/about.component';
-import { ActivitiComponent } from './components/activiti/activiti.component';
-import { ActivitiShowDiagramComponent } from './components/activiti/activiti-show-diagram.component';
-import { FormViewerComponent } from './components/activiti/form-viewer.component';
-import { FormNodeViewerComponent } from './components/activiti/form-node-viewer.component';
-import { ActivitiAppsViewComponent } from './components/activiti/apps-view.component';
+import { ProcessServiceComponent } from './components/process-service/process-service.component';
+import { ShowDiagramComponent } from './components/process-service/show-diagram.component';
+import { FormViewerComponent } from './components/process-service/form-viewer.component';
+import { FormNodeViewerComponent } from './components/process-service/form-node-viewer.component';
+import { AppsViewComponent } from './components/process-service/apps-view.component';
 import { SearchResultComponent } from './components/search/search-result.component';
 
 import { DataTableComponent } from './components/datatable/datatable.component';
@@ -91,33 +91,33 @@ export const appRoutes: Routes = [
             },
             {
                 path: 'activiti',
-                component: ActivitiAppsViewComponent,
+                component: AppsViewComponent,
                 canActivate: [AuthGuardBpm]
             },
             {
                 path: 'activiti/apps',
-                component: ActivitiAppsViewComponent,
+                component: AppsViewComponent,
                 canActivate: [AuthGuardBpm]
             },
             {
                 path: 'activiti/apps/:appId/tasks',
-                component: ActivitiComponent,
+                component: ProcessServiceComponent,
                 canActivate: [AuthGuardBpm]
             },
             {
                 path: 'activiti/apps/:appId/processes',
-                component: ActivitiComponent,
+                component: ProcessServiceComponent,
                 canActivate: [AuthGuardBpm]
             },
             {
                 path: 'activiti/apps/:appId/diagram/:processDefinitionId',
-                component: ActivitiShowDiagramComponent,
+                component: ShowDiagramComponent,
                 canActivate: [AuthGuardBpm]
             },
             // TODO: check if neeeded
             {
                 path: 'activiti/appId/:appId',
-                component: ActivitiComponent,
+                component: ProcessServiceComponent,
                 canActivate: [AuthGuardBpm]
             },
             // TODO: check if needed
diff --git a/demo-shell/src/app/components/activiti/activiti-task-attachments.component.html b/demo-shell/src/app/components/activiti/activiti-task-attachments.component.html
deleted file mode 100644
index 614eb855bf..0000000000
--- a/demo-shell/src/app/components/activiti/activiti-task-attachments.component.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<div id="attachment-task-list" *ngIf="taskId">
-    <h5>Attachments</h5>
-    <div class="adf-no-form-container">
-        <adf-upload-drag-area
-            [parentId]="taskId"
-            [disabled]="isCompletedTask()"
-            [showNotificationBar]="false">
-            <adf-task-attachment-list #taskAttachList
-                *ngIf="taskId"
-                [taskId]="taskId"
-                [disabled]="isCompletedTask()"
-                (attachmentClick)="onAttachmentClick($event)">
-            </adf-task-attachment-list>
-        </adf-upload-drag-area>
-
-        <adf-create-task-attachment
-            *ngIf="!isCompletedTask()"
-            [taskId]="taskId"
-            (success)="onFileUploadComplete($event)">
-        </adf-create-task-attachment>
-
-    </div>
-</div>
-
-<div *ngIf="fileShowed">
-    <adf-viewer
-        [(showViewer)]="fileShowed"
-        [blobFile]="content"
-        [displayName]="contentName"
-        [overlayMode]="true">
-    </adf-viewer>
-</div>
diff --git a/demo-shell/src/app/components/file-view/file-view.component.ts b/demo-shell/src/app/components/file-view/file-view.component.ts
index 0362474ed4..3b0da5f72d 100644
--- a/demo-shell/src/app/components/file-view/file-view.component.ts
+++ b/demo-shell/src/app/components/file-view/file-view.component.ts
@@ -20,7 +20,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { AlfrescoApiService } from '@alfresco/adf-core';
 
 @Component({
-    selector: 'adf-file-view',
+    selector: 'app-file-view',
     templateUrl: 'file-view.component.html'
 })
 export class FileViewComponent implements OnInit {
@@ -33,6 +33,10 @@ export class FileViewComponent implements OnInit {
         private apiService: AlfrescoApiService) {}
 
     ngOnInit() {
+        this.route
+            .data
+            .subscribe(v => console.log(v));
+
         this.route.params.subscribe(params => {
             const id = params.nodeId;
             if (id) {
diff --git a/demo-shell/src/app/components/activiti/apps-view.component.html b/demo-shell/src/app/components/process-service/apps-view.component.html
similarity index 100%
rename from demo-shell/src/app/components/activiti/apps-view.component.html
rename to demo-shell/src/app/components/process-service/apps-view.component.html
diff --git a/demo-shell/src/app/components/activiti/apps-view.component.ts b/demo-shell/src/app/components/process-service/apps-view.component.ts
similarity index 93%
rename from demo-shell/src/app/components/activiti/apps-view.component.ts
rename to demo-shell/src/app/components/process-service/apps-view.component.ts
index fcd2331524..9ea602b13b 100644
--- a/demo-shell/src/app/components/activiti/apps-view.component.ts
+++ b/demo-shell/src/app/components/process-service/apps-view.component.ts
@@ -20,10 +20,10 @@ import { Router } from '@angular/router';
 import { AppDefinitionRepresentationModel } from '@alfresco/adf-process-services';
 
 @Component({
-    selector: 'activiti-apps-view',
+    selector: 'app-process-list-view',
     templateUrl: './apps-view.component.html'
 })
-export class ActivitiAppsViewComponent {
+export class AppsViewComponent {
 
     constructor(private router: Router) {
     }
diff --git a/demo-shell/src/app/components/activiti/custom-editor/custom-editor.component.ts b/demo-shell/src/app/components/process-service/custom-editor/custom-editor.component.ts
similarity index 93%
rename from demo-shell/src/app/components/activiti/custom-editor/custom-editor.component.ts
rename to demo-shell/src/app/components/process-service/custom-editor/custom-editor.component.ts
index bbe39dd559..830cba9850 100644
--- a/demo-shell/src/app/components/activiti/custom-editor/custom-editor.component.ts
+++ b/demo-shell/src/app/components/process-service/custom-editor/custom-editor.component.ts
@@ -35,7 +35,7 @@ export class CustomEditorComponent extends WidgetComponent {
 
 @Component({
     selector: 'custom-stencil-01',
-    template: `<div style="color: green">ADF version of custom Activiti stencil</div>`
+    template: `<div style="color: green">ADF version of custom ProcessService stencil</div>`
 })
 export class CustomStencil01 extends WidgetComponent {
 
diff --git a/demo-shell/src/app/components/activiti/demo-field-validator.ts b/demo-shell/src/app/components/process-service/demo-field-validator.ts
similarity index 100%
rename from demo-shell/src/app/components/activiti/demo-field-validator.ts
rename to demo-shell/src/app/components/process-service/demo-field-validator.ts
diff --git a/demo-shell/src/app/components/activiti/form-node-viewer.component.css b/demo-shell/src/app/components/process-service/form-node-viewer.component.css
similarity index 100%
rename from demo-shell/src/app/components/activiti/form-node-viewer.component.css
rename to demo-shell/src/app/components/process-service/form-node-viewer.component.css
diff --git a/demo-shell/src/app/components/activiti/form-node-viewer.component.html b/demo-shell/src/app/components/process-service/form-node-viewer.component.html
similarity index 100%
rename from demo-shell/src/app/components/activiti/form-node-viewer.component.html
rename to demo-shell/src/app/components/process-service/form-node-viewer.component.html
diff --git a/demo-shell/src/app/components/activiti/form-node-viewer.component.ts b/demo-shell/src/app/components/process-service/form-node-viewer.component.ts
similarity index 100%
rename from demo-shell/src/app/components/activiti/form-node-viewer.component.ts
rename to demo-shell/src/app/components/process-service/form-node-viewer.component.ts
diff --git a/demo-shell/src/app/components/activiti/form-viewer.component.css b/demo-shell/src/app/components/process-service/form-viewer.component.css
similarity index 100%
rename from demo-shell/src/app/components/activiti/form-viewer.component.css
rename to demo-shell/src/app/components/process-service/form-viewer.component.css
diff --git a/demo-shell/src/app/components/activiti/form-viewer.component.html b/demo-shell/src/app/components/process-service/form-viewer.component.html
similarity index 100%
rename from demo-shell/src/app/components/activiti/form-viewer.component.html
rename to demo-shell/src/app/components/process-service/form-viewer.component.html
diff --git a/demo-shell/src/app/components/activiti/form-viewer.component.ts b/demo-shell/src/app/components/process-service/form-viewer.component.ts
similarity index 97%
rename from demo-shell/src/app/components/activiti/form-viewer.component.ts
rename to demo-shell/src/app/components/process-service/form-viewer.component.ts
index 3ecdf36d80..5fb3346fe0 100644
--- a/demo-shell/src/app/components/activiti/form-viewer.component.ts
+++ b/demo-shell/src/app/components/process-service/form-viewer.component.ts
@@ -20,7 +20,7 @@ import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
 
 @Component({
-    selector: 'form-viewer',
+    selector: 'app-form-viewer',
     templateUrl: './form-viewer.component.html',
     styleUrls: ['./form-viewer.component.css']
 })
diff --git a/demo-shell/src/app/components/activiti/activiti-process-attachments.component.css b/demo-shell/src/app/components/process-service/process-attachments.component.css
similarity index 100%
rename from demo-shell/src/app/components/activiti/activiti-process-attachments.component.css
rename to demo-shell/src/app/components/process-service/process-attachments.component.css
diff --git a/demo-shell/src/app/components/activiti/activiti-process-attachments.component.html b/demo-shell/src/app/components/process-service/process-attachments.component.html
similarity index 76%
rename from demo-shell/src/app/components/activiti/activiti-process-attachments.component.html
rename to demo-shell/src/app/components/process-service/process-attachments.component.html
index 40c432c332..484772dd41 100644
--- a/demo-shell/src/app/components/activiti/activiti-process-attachments.component.html
+++ b/demo-shell/src/app/components/process-service/process-attachments.component.html
@@ -1,21 +1,21 @@
-<div id="attachment-process-list" *ngIf="processId">
+<div id="attachment-process-list" *ngIf="processInstanceId">
     <h5>Attachments</h5>
     <div class="adf-no-form-container">
         <adf-upload-drag-area
-            [parentId]="processId"
+            [parentId]="processInstanceId"
             [disabled]="isCompletedProcess()"
             [showNotificationBar]="false">
             <adf-process-attachment-list #processAttachList
-                *ngIf="processId"
+                *ngIf="processInstanceId"
                 [disabled]="isCompletedProcess()"
-                [processInstanceId]="processId"
+                [processInstanceId]="processInstanceId"
                 (attachmentClick)="onAttachmentClick($event)">
             </adf-process-attachment-list>
         </adf-upload-drag-area>
 
         <adf-create-process-attachment
             *ngIf="!isCompletedProcess()"
-            [processInstanceId]="processId"
+            [processInstanceId]="processInstanceId"
             (success)="onFileUploadComplete($event)">
         </adf-create-process-attachment>
 
diff --git a/demo-shell/src/app/components/activiti/activiti-process-attachments.component.ts b/demo-shell/src/app/components/process-service/process-attachments.component.ts
similarity index 82%
rename from demo-shell/src/app/components/activiti/activiti-process-attachments.component.ts
rename to demo-shell/src/app/components/process-service/process-attachments.component.ts
index 8ff15ade3f..26a3baa9ab 100644
--- a/demo-shell/src/app/components/activiti/activiti-process-attachments.component.ts
+++ b/demo-shell/src/app/components/process-service/process-attachments.component.ts
@@ -21,18 +21,18 @@ import { ProcessInstance, ProcessService ,
 import { UploadService } from '@alfresco/adf-core';
 
 @Component({
-    selector: 'activiti-process-attachments',
-    templateUrl: './activiti-process-attachments.component.html',
-    styleUrls: ['./activiti-process-attachments.component.css'],
+    selector: 'app-process-attachments',
+    templateUrl: './process-attachments.component.html',
+    styleUrls: ['./process-attachments.component.css'],
     providers: [
         {provide: UploadService, useClass: ProcessUploadService}
     ]
 })
 
-export class ActivitiProcessAttachmentsComponent implements OnInit, OnChanges {
+export class ProcessAttachmentsComponent implements OnInit, OnChanges {
 
     @Input()
-    processId: string;
+    processInstanceId: string;
 
     @ViewChild(ProcessAttachmentListComponent)
     processAttachList: ProcessAttachmentListComponent;
@@ -50,8 +50,8 @@ export class ActivitiProcessAttachmentsComponent implements OnInit, OnChanges {
     }
 
     ngOnChanges() {
-        if (this.processId) {
-            this.processService.getProcess(this.processId).subscribe((processInstance: ProcessInstance) => {
+        if (this.processInstanceId) {
+            this.processService.getProcess(this.processInstanceId).subscribe((processInstance: ProcessInstance) => {
                 this.processInstance = processInstance;
             });
         }
diff --git a/demo-shell/src/app/components/activiti/activiti.component.html b/demo-shell/src/app/components/process-service/process-service.component.html
similarity index 76%
rename from demo-shell/src/app/components/activiti/activiti.component.html
rename to demo-shell/src/app/components/process-service/process-service.component.html
index 2e51276ee8..81130280f0 100644
--- a/demo-shell/src/app/components/activiti/activiti.component.html
+++ b/demo-shell/src/app/components/process-service/process-service.component.html
@@ -1,10 +1,10 @@
 <mat-tab-group [(selectedIndex)]="activeTab">
     <mat-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
         <div class="page-content">
-            <div class="activiti-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-                <div class="activiti-grid-item activiti-tasks-menu" fxFlex.gt-md="225px">
-                    <div class="activiti-list-buttons">
-                        <button color="primary" mat-raised-button data-automation-id="btn-start-task" class="activiti-list-buttons-start" (click)="navigateStartTask()">
+            <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+                <div class="adf-grid-item adf-tasks-menu" fxFlex.gt-md="225px">
+                    <div class="adf-list-buttons">
+                        <button color="primary" mat-raised-button data-automation-id="btn-start-task" class="adf-list-buttons-start" (click)="navigateStartTask()">
                             <mat-icon>add</mat-icon>
                             <span>{{'PS-TAB.START-TASK' | translate}}</span>
                         </button>
@@ -23,7 +23,7 @@
                         </adf-accordion-group>
                     </adf-accordion>
                 </div>
-                <div class="activiti-grid-item activiti-tasks-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
+                <div class="adf-grid-item adf-tasks-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
                      *ngIf="taskFilter && !isStartTaskMode()">
                     <adf-tasklist
                         [appId]="taskFilter?.appId"
@@ -60,7 +60,7 @@
                         [supportedPageSizes]="[2, 4, 6, 8, 10, 12]">
                     </adf-pagination>
                 </div>
-                <div class="activiti-grid-item activiti-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto">
+                <div class="adf-grid-item adf-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto">
                     <adf-task-details #activitidetails
                                            [debugMode]="true"
                                            [taskId]="currentTaskId"
@@ -85,24 +85,11 @@
                     </div>
                     <mat-card>
                         <mat-card-content>
-                                <adf-upload-drag-area
-                                   [parentId]="currentTaskId"
-                                   [showNotificationBar]="false">
-                                   <adf-task-attachment-list #taskAttachList  
-                                       [taskId]="currentTaskId">
-                                       <div adf-empty-list>
-                                           <div adf-empty-list-header class="adf-empty-list-header"> {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}} </div>
-                                               <div adf-empty-list-body>
-                                                   <div fxHide.lt-md="true" class="adf-empty-list-drag_drop">{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}</div>
-                                                   <div fxHide.lt-md="true" class="adf-empty-list__any-files-here-to-add"> {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}} </div> 
-                                            </div>        
-                                        </div>
-                                   </adf-task-attachment-list>
-                                </adf-upload-drag-area>
+                            <app-task-attachments [taskId]="currentTaskId" ></app-task-attachments>
                         </mat-card-content>
                     </mat-card>
                 </div>
-                <div class="activiti-grid-item activiti-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
+                <div class="adf-grid-item adf-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
                     <adf-start-task
                         [appId]="appId"
                         (success)="onStartTaskSuccess($event)"
@@ -115,13 +102,13 @@
     <mat-tab id="processes-header" href="#processes"
             label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
         <div class="page-content">
-            <div class="activiti-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-                <div class="activiti-grid-item activiti-processes-menu" fxFlex.gt-md="225px">
-                    <div class="activiti-list-buttons">
+            <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+                <div class="adf-grid-item adf-processes-menu" fxFlex.gt-md="225px">
+                    <div class="adf-list-buttons">
                         <button
                             color="primary"
                             mat-raised-button
-                            class="activiti-list-buttons-start"
+                            class="adf-list-buttons-start"
                             data-automation-id="btn-start-process"
                             (click)="navigateStartProcess()">
                             <mat-icon>add</mat-icon>
@@ -140,7 +127,7 @@
                         </adf-accordion-group>
                     </adf-accordion>
                 </div>
-                <div class="activiti-grid-item activiti-processes-list activiti-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
+                <div class="adf-grid-item adf-processes-list adf-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
                      *ngIf="processFilter && !isStartProcessMode()">
                     <adf-process-instance-list
                         *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
@@ -162,7 +149,7 @@
 
                     </adf-process-instance-list>
                 </div>
-                <div class="activiti-grid-item activiti-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
+                <div class="adf-grid-item adf-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
                     <adf-process-instance-details
                         [processInstanceId]="currentProcessInstanceId"
                         (processCancelled)="processCancelled()"
@@ -184,14 +171,11 @@
                     </div>
                     <mat-card>
                         <mat-card-content>
-                            <adf-process-attachment-list
-                                [processInstanceId]="currentProcessInstanceId"
-                                (attachmentClick)="onContentClick($event)">
-                            </adf-process-attachment-list>
+                            <app-process-attachments [processInstanceId]="currentProcessInstanceId" ></app-process-attachments>
                         </mat-card-content>
                     </mat-card>
                 </div>
-                <div class="activiti-grid-item activiti-processes-start" fxFlex.gt-md="1 1 auto"
+                <div class="adf-grid-item adf-processes-start" fxFlex.gt-md="1 1 auto"
                      *ngIf="isStartProcessMode()">
                     <adf-start-process
                         [appId]="appId"
@@ -204,8 +188,8 @@
     </mat-tab>
     <mat-tab id="report-header" href="#report"
             label="{{'PS-TAB.REPORTS-TAB' | translate}}">
-        <div class="activiti-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-            <div class="activiti-grid-item activiti-reports-menu" fxFlex.gt-md="300px">
+        <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+            <div class="adf-grid-item adf-reports-menu" fxFlex.gt-md="300px">
                 <span><h5>Report List</h5></span>
                 <hr>
                 <analytics-report-list
@@ -215,7 +199,7 @@
                     #analyticsreportlist>
                 </analytics-report-list>
             </div>
-            <div class="activiti-grid-item activiti-reports-details" fxFlex.gt-md="1 1 auto">
+            <div class="adf-grid-item adf-reports-details" fxFlex.gt-md="1 1 auto">
                 <adf-analytics
                     *ngIf="report"
                     [appId]="appId"
diff --git a/demo-shell/src/app/components/activiti/activiti.component.scss b/demo-shell/src/app/components/process-service/process-service.component.scss
similarity index 90%
rename from demo-shell/src/app/components/activiti/activiti.component.scss
rename to demo-shell/src/app/components/process-service/process-service.component.scss
index d6dd7bebde..e8e97b5f4e 100644
--- a/demo-shell/src/app/components/activiti/activiti.component.scss
+++ b/demo-shell/src/app/components/process-service/process-service.component.scss
@@ -5,24 +5,24 @@
     font-size: 18px;
 }
 
-.activiti-grid {
+.adf-grid {
 
-    .activiti-grid-item {
+    .adf-grid-item {
         margin: 4px;
         box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
         padding: 10px;
     }
 
-    .activiti-list-buttons {
+    .adf-list-buttons {
         margin-bottom: 24px;
     }
 
-    .activiti-list-buttons-start {
+    .adf-list-buttons-start {
         width: 100%;
     }
 
-    .activiti-tasks-list.small-pagination,
-    .activiti-processes-list.small-pagination {
+    .adf-tasks-list.small-pagination,
+    .adf-processes-list.small-pagination {
         .adf-pagination {
 
             flex-wrap: wrap;
@@ -68,7 +68,7 @@
         }
     }
 
-    .activiti-list {
+    .adf-list {
         .adf-data-table {
             border: none;
         }
diff --git a/demo-shell/src/app/components/activiti/activiti.component.ts b/demo-shell/src/app/components/process-service/process-service.component.ts
similarity index 97%
rename from demo-shell/src/app/components/activiti/activiti.component.ts
rename to demo-shell/src/app/components/process-service/process-service.component.ts
index a0ee23ca9e..abbeba92b1 100644
--- a/demo-shell/src/app/components/activiti/activiti.component.ts
+++ b/demo-shell/src/app/components/process-service/process-service.component.ts
@@ -68,15 +68,15 @@ const currentProcessIdNew = '__NEW__';
 const currentTaskIdNew = '__NEW__';
 
 @Component({
-    selector: 'adf-activiti',
-    templateUrl: './activiti.component.html',
-    styleUrls: ['./activiti.component.scss'],
+    selector: 'app-process-service',
+    templateUrl: './process-service.component.html',
+    styleUrls: ['./process-service.component.scss'],
     providers: [
                 { provide: UploadService, useClass: ProcessUploadService }
                ],
     encapsulation: ViewEncapsulation.None
 })
-export class ActivitiComponent implements AfterViewInit, OnDestroy, OnInit {
+export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit {
 
     @ViewChild(TaskFiltersComponent)
     activitifilter: TaskFiltersComponent;
@@ -422,10 +422,10 @@ export class ActivitiComponent implements AfterViewInit, OnDestroy, OnInit {
     }
 
     ngAfterViewInit() {
-        this.loadStencilScriptsInPageFromActiviti();
+        this.loadStencilScriptsInPageFromProcessService();
     }
 
-    loadStencilScriptsInPageFromActiviti() {
+    loadStencilScriptsInPageFromProcessService() {
         this.apiService.getInstance().activiti.scriptFileApi.getControllers().then(response => {
             if (response) {
                 let s = document.createElement('script');
diff --git a/demo-shell/src/app/components/activiti/activiti-show-diagram.component.css b/demo-shell/src/app/components/process-service/show-diagram.component.css
similarity index 100%
rename from demo-shell/src/app/components/activiti/activiti-show-diagram.component.css
rename to demo-shell/src/app/components/process-service/show-diagram.component.css
diff --git a/demo-shell/src/app/components/activiti/activiti-show-diagram.component.html b/demo-shell/src/app/components/process-service/show-diagram.component.html
similarity index 100%
rename from demo-shell/src/app/components/activiti/activiti-show-diagram.component.html
rename to demo-shell/src/app/components/process-service/show-diagram.component.html
diff --git a/demo-shell/src/app/components/activiti/activiti-show-diagram.component.ts b/demo-shell/src/app/components/process-service/show-diagram.component.ts
similarity index 85%
rename from demo-shell/src/app/components/activiti/activiti-show-diagram.component.ts
rename to demo-shell/src/app/components/process-service/show-diagram.component.ts
index 12cf2537e9..982eb9a818 100644
--- a/demo-shell/src/app/components/activiti/activiti-show-diagram.component.ts
+++ b/demo-shell/src/app/components/process-service/show-diagram.component.ts
@@ -19,11 +19,11 @@ import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
-    selector: 'activiti-show-diagram',
-    templateUrl: './activiti-show-diagram.component.html',
-    styleUrls: ['./activiti-show-diagram.component.css']
+    selector: 'app-show-diagram',
+    templateUrl: './show-diagram.component.html',
+    styleUrls: ['./show-diagram.component.css']
 })
-export class ActivitiShowDiagramComponent {
+export class ShowDiagramComponent {
 
     processDefinitionId: string;
     appId: string;
diff --git a/demo-shell/src/app/components/activiti/activiti-task-attachments.component.css b/demo-shell/src/app/components/process-service/task-attachments.component.css
similarity index 100%
rename from demo-shell/src/app/components/activiti/activiti-task-attachments.component.css
rename to demo-shell/src/app/components/process-service/task-attachments.component.css
diff --git a/demo-shell/src/app/components/process-service/task-attachments.component.html b/demo-shell/src/app/components/process-service/task-attachments.component.html
new file mode 100644
index 0000000000..f77be75d7b
--- /dev/null
+++ b/demo-shell/src/app/components/process-service/task-attachments.component.html
@@ -0,0 +1,39 @@
+<div id="attachment-task-list" *ngIf="taskId">
+    <div class="adf-no-form-container">
+        <adf-upload-drag-area
+            [parentId]="currentTaskId"
+            [showNotificationBar]="false">
+
+            <adf-task-attachment-list #taskAttachList
+                                      [disabled]="isCompletedTask()"
+                                      (attachmentClick)="onAttachmentClick($event)"
+                                      [taskId]="currentTaskId">
+                <div adf-empty-list>
+                    <div adf-empty-list-header class="adf-empty-list-header"> {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}} </div>
+                    <div adf-empty-list-body>
+                        <div fxHide.lt-md="true" class="adf-empty-list-drag_drop">{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}</div>
+                        <div fxHide.lt-md="true" class="adf-empty-list__any-files-here-to-add"> {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}} </div>
+                    </div>
+                </div>
+            </adf-task-attachment-list>
+
+        </adf-upload-drag-area>
+
+
+        <adf-create-task-attachment
+            *ngIf="!isCompletedTask()"
+            [taskId]="taskId"
+            (success)="onFileUploadComplete($event)">
+        </adf-create-task-attachment>
+
+    </div>
+</div>
+
+<div *ngIf="fileShowed">
+    <adf-viewer
+        [(showViewer)]="fileShowed"
+        [blobFile]="content"
+        [displayName]="contentName"
+        [overlayMode]="true">
+    </adf-viewer>
+</div>
diff --git a/demo-shell/src/app/components/activiti/activiti-task-attachments.component.ts b/demo-shell/src/app/components/process-service/task-attachments.component.ts
similarity index 89%
rename from demo-shell/src/app/components/activiti/activiti-task-attachments.component.ts
rename to demo-shell/src/app/components/process-service/task-attachments.component.ts
index 8582f80160..6e3694b7b9 100644
--- a/demo-shell/src/app/components/activiti/activiti-task-attachments.component.ts
+++ b/demo-shell/src/app/components/process-service/task-attachments.component.ts
@@ -20,15 +20,15 @@ import { ProcessUploadService, TaskListService, TaskAttachmentListComponent } fr
 import { UploadService } from '@alfresco/adf-core';
 
 @Component({
-    selector: 'activiti-task-attachments',
-    templateUrl: './activiti-task-attachments.component.html',
-    styleUrls: ['./activiti-task-attachments.component.css'],
+    selector: 'app-task-attachments',
+    templateUrl: './task-attachments.component.html',
+    styleUrls: ['./task-attachments.component.css'],
     providers: [
         { provide: UploadService, useClass: ProcessUploadService }
     ]
 })
 
-export class ActivitiTaskAttachmentsComponent implements OnInit, OnChanges {
+export class TaskAttachmentsComponent implements OnInit, OnChanges {
 
     @Input()
     taskId: string;
diff --git a/demo-shell/src/app/services/in-memory-form.service.ts b/demo-shell/src/app/services/in-memory-form.service.ts
index 9456e832fd..fdf6857943 100644
--- a/demo-shell/src/app/services/in-memory-form.service.ts
+++ b/demo-shell/src/app/services/in-memory-form.service.ts
@@ -22,7 +22,7 @@ import { AppConfigService, AlfrescoApiService, EcmModelService, LogService,
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
 
-interface ActivitiData {
+interface ProcessServiceData {
     rest: {
         fields: Array<{
             processId?: string,
@@ -39,7 +39,7 @@ interface ActivitiData {
 @Injectable()
 export class InMemoryFormService extends FormService {
 
-    private data: ActivitiData;
+    private data: ProcessServiceData;
 
     executeOutcome = new Subject<FormOutcomeEvent>();
 
@@ -48,7 +48,7 @@ export class InMemoryFormService extends FormService {
                 apiService: AlfrescoApiService,
                 protected logService: LogService) {
         super(ecmModelService, apiService, logService);
-        this.data = appConfig.get<ActivitiData>('activiti');
+        this.data = appConfig.get<ProcessServiceData>('activiti');
     }
 
     /** @override */
diff --git a/demo-shell/tslint.json b/demo-shell/tslint.json
index a4886b4596..7e834c0ab2 100644
--- a/demo-shell/tslint.json
+++ b/demo-shell/tslint.json
@@ -100,7 +100,7 @@
     ],
 
     "directive-selector": [true, "attribute", "app", "camelCase"],
-    "component-selector": [true, "element", "adf", "kebab-case"],
+    "component-selector": [true, "element", "app", "kebab-case"],
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
     "use-host-property-decorator": true,