[ADF-4067] Process Service Cloud change applicationName input (#4299)

* [ADF-4047] Process Service Cloud change applicationName input

* [ADF-4067] Change applicationName properties and route param name

demo-shell/src/app/app.routes.ts

@@ -153,7 +153,7 @@ export const appRoutes: Routes = [
                         component: PeopleGroupCloudDemoComponent
                     },
                     {
-                        path: ':applicationName',
+                        path: ':appName',
                         children: [
                             {
                                 path: '',

demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.html

@@ -1,7 +1,7 @@
 <adf-toolbar>
   <div fxLayout="column" fxLayoutAlign="center">
     <div fxLayout="row">
-      <div class="adf-app-crumb">{{applicationName + ' >'}} </div>
+      <div class="adf-app-crumb">{{appName + ' >'}} </div>
       <div class="adf-filter-crumb"> {{filterName | translate}}</div>
     </div>
   </div>

demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.ts

@@ -25,7 +25,7 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class CloudBreadcrumbsComponent implements OnInit {
 
-  applicationName: string;
+  appName: string;
   filterName: string;
 
   constructor(private route: ActivatedRoute) { }
@@ -33,7 +33,7 @@ export class CloudBreadcrumbsComponent implements OnInit {
   ngOnInit() {
     this.route.parent.params.subscribe((
       params) => {
-      this.applicationName = params.applicationName;
+      this.appName = params.appName;
     });
     this.route.queryParams.subscribe((params) => {
       if (params.filterName) {

demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.html

@@ -24,7 +24,7 @@
                 </button>
               </div>
             </adf-sidebar-action-menu>
-            <app-cloud-filters-demo [appName]="applicationName"></app-cloud-filters-demo>
+            <app-cloud-filters-demo [appName]="appName"></app-cloud-filters-demo>
           </ng-template>
         </adf-sidenav-layout-navigation>
         <adf-sidenav-layout-content>

demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.ts

@@ -26,7 +26,7 @@ import { CloudLayoutService } from './services/cloud-layout.service';
 })
 export class CloudLayoutComponent implements OnInit {
     displayMenu = true;
-    applicationName: string;
+    appName: string;
 
     constructor(
         private router: Router,
@@ -37,7 +37,7 @@ export class CloudLayoutComponent implements OnInit {
     ngOnInit() {
         let root: string = '';
         this.route.params.subscribe((params) => {
-            this.applicationName = params.applicationName;
+            this.appName = params.appName;
         });
 
         if (this.route.snapshot && this.route.snapshot.firstChild) {
@@ -56,10 +56,10 @@ export class CloudLayoutComponent implements OnInit {
     }
 
     onStartTask() {
-        this.router.navigate([`/cloud/${this.applicationName}/start-task/`]);
+        this.router.navigate([`/cloud/${this.appName}/start-task/`]);
     }
 
     onStartProcess() {
-        this.router.navigate([`/cloud/${this.applicationName}/start-process/`]);
+        this.router.navigate([`/cloud/${this.appName}/start-process/`]);
     }
 }

demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.html

@@ -1,28 +1,26 @@
 <div fxLayout="column" fxFill fxLayoutGap="2px">
     <adf-cloud-edit-process-filter
-        [appName]="applicationName"
+        [appName]="appName"
         [id]="filterId"
         [filterProperties]="processFilterProperties"
         (filterChange)="onFilterChange($event)"
         (action)="onProcessFilterAction($event)">
     </adf-cloud-edit-process-filter>
     <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
-        <adf-cloud-process-list
+        <adf-cloud-process-list fxFlex class="adf-cloud-layout-overflow"
-            fxFlex 
+                                [appName]="editedFilter.appName"
-            class="adf-cloud-layout-overflow"
+                                [initiator]="editedFilter.initiator"
-            [applicationName]="editedFilter.appName"
+                                [processDefinitionId]="editedFilter.processDefinitionId"
-            [initiator]="editedFilter.initiator"
+                                [processDefinitionKey]="editedFilter.processDefinitionKey"
-            [processDefinitionId]="editedFilter.processDefinitionId"
+                                [id]="editedFilter.processInstanceId"
-            [processDefinitionKey]="editedFilter.processDefinitionKey"
+                                [status]="editedFilter.state"
-            [id]="editedFilter.processInstanceId"
+                                [name]="editedFilter.processName"
-            [status]="editedFilter.state"
+                                [sorting]="sortArray"
-            [name]="editedFilter.processName"
+                                [selectionMode]="selectionMode"
-            [sorting]="sortArray"
+                                [multiselect]="multiselect"
-            [selectionMode]="selectionMode"
+                                (rowClick)="onRowClick($event)"
-            [multiselect]="multiselect"
+                                (rowsSelected)="onRowsSelected($event)"
-            (rowClick)="onRowClick($event)"
+                                #processCloud>
-            (rowsSelected)="onRowsSelected($event)"
-            #processCloud>
         </adf-cloud-process-list>
         <adf-pagination
             [target]="processCloud"

demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.ts

@@ -42,7 +42,7 @@ export class ProcessesCloudDemoComponent implements OnInit {
     @ViewChild('processFiltersCloud')
     processFiltersCloud: ProcessFiltersCloudComponent;
 
-    applicationName: string = '';
+    appName: string = '';
     isFilterLoaded: boolean;
 
     filterId: string = '';
@@ -71,7 +71,7 @@ export class ProcessesCloudDemoComponent implements OnInit {
     ngOnInit() {
         this.isFilterLoaded = false;
         this.route.parent.params.subscribe((params) => {
-            this.applicationName = params.applicationName;
+            this.appName = params.appName;
         });
 
         this.route.queryParams.subscribe((params) => {
@@ -116,7 +116,7 @@ export class ProcessesCloudDemoComponent implements OnInit {
     onProcessFilterAction(filterAction: any) {
         this.cloudLayoutService.setCurrentProcessFilterParam({ id: filterAction.filter.id });
         if (filterAction.actionType === ProcessesCloudDemoComponent.ACTION_SAVE_AS) {
-            this.router.navigate([`/cloud/${this.applicationName}/processes/`], { queryParams: filterAction.filter });
+            this.router.navigate([`/cloud/${this.appName}/processes/`], { queryParams: filterAction.filter });
         }
     }
 

demo-shell/src/app/components/app-layout/cloud/start-process-cloud-demo.component.html

@@ -1,5 +1,5 @@
 <adf-cloud-start-process
-    [appName]="applicationName" 
+    [appName]="appName"
     [name]="processName"
     (error)="openSnackMessage($event)"
     (success)="onStartProcessSuccess()"

demo-shell/src/app/components/app-layout/cloud/start-process-cloud-demo.component.ts

@@ -25,7 +25,7 @@ import { CloudLayoutService } from './services/cloud-layout.service';
 })
 export class StartProcessCloudDemoComponent implements OnInit {
 
-    applicationName;
+    appName;
     processName: string;
 
     constructor(private appConfig: AppConfigService,
@@ -37,7 +37,7 @@ export class StartProcessCloudDemoComponent implements OnInit {
 
     ngOnInit() {
         this.route.parent.params.subscribe((params) => {
-            this.applicationName = params.applicationName;
+            this.appName = params.appName;
         });
 
         this.processName = this.appConfig.get<string>('adf-start-process.name');
@@ -45,12 +45,12 @@ export class StartProcessCloudDemoComponent implements OnInit {
 
     onStartProcessSuccess() {
         this.cloudLayoutService.setCurrentProcessFilterParam({ key: 'running-processes' });
-        this.router.navigate([`/cloud/${this.applicationName}/processes`]);
+        this.router.navigate([`/cloud/${this.appName}/processes`]);
     }
 
     onCancelStartProcess() {
         this.cloudLayoutService.setCurrentProcessFilterParam({ key: 'all-processes' });
-        this.router.navigate([`/cloud/${this.applicationName}/processes`]);
+        this.router.navigate([`/cloud/${this.appName}/processes`]);
     }
 
     openSnackMessage(event: any) {

demo-shell/src/app/components/app-layout/cloud/start-task-cloud-demo.component.html

@@ -1,5 +1,5 @@
 <adf-cloud-start-task
-    [appName]="applicationName"
+    [appName]="appName"
     (error)="openSnackMessage($event)"
     (success)="onStartTaskSuccess()"
     (cancel)="onCancelStartTask()">

demo-shell/src/app/components/app-layout/cloud/start-task-cloud-demo.component.ts

@@ -25,7 +25,7 @@ import { CloudLayoutService } from './services/cloud-layout.service';
 })
 export class StartTaskCloudDemoComponent implements OnInit {
 
-    applicationName;
+    appName;
 
     constructor(
         private cloudLayoutService: CloudLayoutService,
@@ -36,18 +36,18 @@ export class StartTaskCloudDemoComponent implements OnInit {
 
     ngOnInit() {
         this.route.parent.params.subscribe((params) => {
-            this.applicationName = params.applicationName;
+            this.appName = params.appName;
         });
     }
 
     onStartTaskSuccess() {
         this.cloudLayoutService.setCurrentTaskFilterParam({key: 'my-tasks'});
-        this.router.navigate([`/cloud/${this.applicationName}/tasks`]);
+        this.router.navigate([`/cloud/${this.appName}/tasks`]);
     }
 
     onCancelStartTask() {
         this.cloudLayoutService.setCurrentTaskFilterParam({key: 'my-tasks'});
-        this.router.navigate([`/cloud/${this.applicationName}/tasks`]);
+        this.router.navigate([`/cloud/${this.appName}/tasks`]);
     }
 
     openSnackMessage(event: any) {

demo-shell/src/app/components/app-layout/cloud/task-details-cloud-demo.component.html

@@ -3,10 +3,10 @@
     <mat-icon>arrow_back</mat-icon> Go Back
 </button>
 
-<h4>Simple page to show the taskId: {{ taskId }} of the app: {{ applicationName }}</h4>
+<h4>Simple page to show the taskId: {{ taskId }} of the app: {{ appName }}</h4>
 
 <adf-cloud-task-header
-    [appName]="applicationName"
+    [appName]="appName"
     [taskId]="taskId"
     [readOnly]="readOnly">
 </adf-cloud-task-header>

demo-shell/src/app/components/app-layout/cloud/task-details-cloud-demo.component.ts

@@ -25,7 +25,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 export class TaskDetailsCloudDemoComponent {
 
     taskId: string;
-    applicationName: string;
+    appName: string;
     readOnly = false;
 
     constructor(private route: ActivatedRoute, private router: Router) {
@@ -33,12 +33,12 @@ export class TaskDetailsCloudDemoComponent {
             this.taskId = params.taskId;
         });
         this.route.parent.params.subscribe((params) => {
-            this.applicationName = params.applicationName;
+            this.appName = params.appName;
         });
     }
 
     onGoBack() {
-        this.router.navigate([`/cloud/${this.applicationName}/`]);
+        this.router.navigate([`/cloud/${this.appName}/`]);
 
     }
 }

demo-shell/src/app/components/app-layout/cloud/tasks-cloud-demo.component.html

@@ -1,16 +1,14 @@
 <div fxLayout="column" fxFill fxLayoutGap="2px">
     <adf-cloud-edit-task-filter
-        [appName]="applicationName"
+        [appName]="appName"
         [id]="filterId"
         [filterProperties]="taskFilterProperties"
         (action)="onTaskFilterAction($event)"
         (filterChange)="onFilterChange($event)">
     </adf-cloud-edit-task-filter>
     <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
-        <adf-cloud-task-list 
+        <adf-cloud-task-list #taskCloud
-            fxFlex
+            [appName]="editedFilter.appName"
-            class="adf-cloud-layout-overflow"
-            [applicationName]="editedFilter.appName"
             [processDefinitionId]="editedFilter.processDefinitionId"
             [processInstanceId]="editedFilter.processInstanceId"
             [name]="editedFilter.taskName"

demo-shell/src/app/components/app-layout/cloud/tasks-cloud-demo.component.ts

@@ -33,7 +33,7 @@ export class TasksCloudDemoComponent implements OnInit {
     @ViewChild('taskCloud')
     taskCloud: TaskListCloudComponent;
 
-    applicationName: string = '';
+    appName: string = '';
 
     isFilterLoaded = false;
 
@@ -65,7 +65,7 @@ export class TasksCloudDemoComponent implements OnInit {
     ngOnInit() {
         this.isFilterLoaded = false;
         this.route.parent.params.subscribe((params) => {
-            this.applicationName = params.applicationName;
+            this.appName = params.appName;
         });
 
         this.route.queryParams.subscribe((params) => {
@@ -100,7 +100,7 @@ export class TasksCloudDemoComponent implements OnInit {
 
     onRowClick(taskId) {
         if (!this.multiselect && this.selectionMode !== 'multiple') {
-            this.router.navigate([`/cloud/${this.applicationName}/task-details/${taskId}`]);
+            this.router.navigate([`/cloud/${this.appName}/task-details/${taskId}`]);
         }
     }
 
@@ -117,7 +117,7 @@ export class TasksCloudDemoComponent implements OnInit {
     onTaskFilterAction(filterAction: any) {
         this.cloudLayoutService.setCurrentTaskFilterParam({ id: filterAction.filter.id });
         if (filterAction.actionType === TasksCloudDemoComponent.ACTION_SAVE_AS) {
-            this.router.navigate([`/cloud/${this.applicationName}/tasks/`], { queryParams: filterAction.filter });
+            this.router.navigate([`/cloud/${this.appName}/tasks/`], { queryParams: filterAction.filter });
         }
     }
 }

docs/process-services-cloud/edit-process-filter-cloud.component.md

@@ -27,8 +27,8 @@ Shows Process Filter Details.
 ```html
 <adf-cloud-edit-process-filter
     [id]="processFilterId"
-    [appName]="applicationName"
+    [appName]="appName"
-    [filterProperties]="filterProperties"
+    [filterProperties]="filterProperties"s
     (filterChange)="onFilterChange($event)"
     (action)="onAction($event)">
 </adf-cloud-edit-process-filter>
@@ -62,7 +62,7 @@ Use the `appName` and `id` properties to choose which process filter to edit:
 ```html
 <adf-cloud-edit-process-filter
     [id]="processFilterId"
-    [appName]="applicationName">
+    [appName]="appName">
 </adf-cloud-edit-process-filter>
 ```
 

docs/process-services-cloud/edit-task-filter-cloud.component.md

@@ -16,7 +16,7 @@ Edits Task Filter Details.
 ```html
 <adf-cloud-edit-task-filter
     [id]="taskFilterId"
-    [appName]="applicationName"
+    [appName]="appName"
     [filterProperties]="filterProperties"
     (filterChange)="onFilterChange($event)"
     (action)="onAction($event)">
@@ -51,7 +51,7 @@ Use the `appName` and `id` properties to choose which task filter to edit:
 ```html
 <adf-cloud-edit-task-filter
     [id]="taskFilterId"
-    [appName]="applicationName">
+    [appName]="appName">
 </adf-cloud-edit-task-filter>
 ```
 

docs/process-services-cloud/process-list-cloud.component.md

@@ -27,7 +27,7 @@ Renders a list containing all the process instances matched by the parameters sp
 
 ```html
 <adf-cloud-process-list
-    [applicationName]="'app-name'">
+    [appName]="'app-name'">
 </adf-cloud-process-list>
 ```
 
@@ -51,7 +51,7 @@ when the process list is empty:
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
 | appVersion | `string` | "" | The related application version. |
-| applicationName | `string` | "" | The name of the application. |
+| appName | `string` | "" | The name of the application. |
 | businessKey | `string` | "" | Filter the tasks to display only the ones with this businessKey value. |
 | id | `string` | "" | Filter the processes to display only the ones with this ID. |
 | initiator | `string` | "" | Name of the initiator of the process. |
@@ -100,7 +100,7 @@ You can define a custom schema for the list in the `app.config.json` file and ac
 
 ```html
 <adf-cloud-process-list
-    [applicationName]="'appName'">
+    [appName]="'appName'">
 </adf-cloud-process-list>
 ```
 
@@ -133,7 +133,7 @@ information defined in `app.config.json` as in the example below:
 
 ```html
 <adf-cloud-process-list
-    [applicationName]="'appName'" >
+    [appName]="'appName'" >
     <data-columns>
         <data-column key="key" title="title" class="full-width name-column">
             <ng-template let-entry="$implicit">
@@ -157,7 +157,7 @@ let sorting = [{ orderBy: 'status', direction: 'desc' }];
 
 ```html
 <adf-cloud-process-list
-    [applicationName]="'appName'"
+    [appName]="'appName'"
     [sort]="sorting">
 </adf-cloud-process-list>
 ```

docs/process-services-cloud/task-header-cloud.component.md

@@ -15,7 +15,7 @@ Shows all the information related to a task.
 
 ```html
 <adf-cloud-task-header
-    [appName]="applicationName"
+    [appName]="appName"
     [taskId]="taskId">
 </adf-cloud-task-header>
 ```

docs/process-services-cloud/task-list-cloud.component.md

@@ -28,7 +28,7 @@ Renders a list containing all the tasks matched by the parameters specified.
 
 ```html
 <adf-cloud-task-list
-    [applicationName]="'APPLICATION-NAME'" >
+    [appName]="'APPLICATION-NAME'" >
 </adf-cloud-task-list>
 ```
 
@@ -51,7 +51,7 @@ when the task list is empty:
 
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
-| applicationName | `string` | "" | The name of the application. |
+| appName | `string` | "" | The name of the application. |
 | assignee | `string` | "" | The assignee of the process. Possible values are: "assignee" (the current user is the assignee), "candidate" (the current user is a task candidate", "group_x" (the task is assigned to a group where the current user is a member, no value (the current user is involved). |
 | createdDate | `string` | "" | Filter the tasks. Display only tasks created on the supplied date. |
 | dueDate | `string` | "" | Filter the tasks. Display only tasks with dueDate equal to the supplied date. |
@@ -153,7 +153,7 @@ You can use an HTML-based schema and an `app.config.json` custom schema declarat
 
 ```html
 <adf-cloud-task-list
-    [applicationName]="'ApplicationName'">
+    [appName]="'appName'">
     <data-columns>
         <data-column key="assignee" title="Assignee" class="full-width name-column">
             <ng-template let-entry="$implicit">
@@ -187,7 +187,7 @@ The Tasklist also supports pagination as shown in the example below:
 
 ```html
 <adf-cloud-task-list #taskCloud
-                        [applicationName]="'APPLICATION-NAME'">
+                        [appName]="'APPLICATION-NAME'">
 </adf-cloud-task-list>
 <adf-pagination [target]="taskCloud"
                 (changePageSize)="onChangePageSize($event)">

lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts

@@ -146,13 +146,13 @@ describe('ProcessListCloudComponent', () => {
 
             done();
         });
-        component.applicationName = appName.currentValue;
+        component.appName = appName.currentValue;
         component.ngOnChanges({ 'appName': appName });
         fixture.detectChanges();
     });
 
     it('should reload tasks when reload() is called', (done) => {
-        component.applicationName = 'fake';
+        component.appName = 'fake';
         spyOn(processListCloudService, 'getProcessByRequest').and.returnValue(of(fakeProcessCloudList));
         component.success.subscribe((res) => {
             expect(res).toBeDefined();

lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts

@@ -43,7 +43,7 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
 
     /** The name of the application. */
     @Input()
-    applicationName: string = '';
+    appName: string = '';
 
     /** The related application version. */
     @Input()
@@ -221,7 +221,7 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
 
     private createRequestNode(): ProcessQueryCloudRequestModel {
         let requestNode = {
-            appName: this.applicationName,
+            appName: this.appName,
             appVersion: this.appVersion,
             maxItems: this.size,
             skipCount: this.skipCount,

lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts

@@ -155,13 +155,13 @@ describe('TaskListCloudComponent', () => {
             expect(component.rows[0].entry['standAlone']).toBeTruthy();
             done();
         });
-        component.applicationName = appName.currentValue;
+        component.appName = appName.currentValue;
         component.ngOnChanges({ 'appName': appName });
         fixture.detectChanges();
     });
 
     it('should reload tasks when reload() is called', (done) => {
-        component.applicationName = 'fake';
+        component.appName = 'fake';
         spyOn(taskListCloudService, 'getTaskByRequest').and.returnValue(of(fakeGlobalTask));
         component.success.subscribe((res) => {
             expect(res).toBeDefined();
@@ -204,7 +204,7 @@ describe('TaskListCloudComponent', () => {
 
         it('should reload the task list when input parameters changed', () => {
             const getTaskByRequestSpy = spyOn(taskListCloudService, 'getTaskByRequest').and.returnValue(of(fakeGlobalTask));
-            component.applicationName = 'mock-app-name';
+            component.appName = 'mock-app-name';
             component.priority = 1;
             component.status = 'mock-status';
             component.lastModifiedFrom = 'mock-lastmodified-date';

lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.ts

@@ -42,7 +42,7 @@ export class TaskListCloudComponent extends DataTableSchema implements OnChanges
 
     /** The name of the application. */
     @Input()
-    applicationName: string = '';
+    appName: string = '';
 
     /**
      * The assignee of the process. Possible values are: "assignee" (the current user is the assignee),
@@ -251,7 +251,7 @@ export class TaskListCloudComponent extends DataTableSchema implements OnChanges
     private createRequestNode() {
 
         let requestNode = {
-            appName: this.applicationName,
+            appName: this.appName,
             assignee: this.assignee,
             id: this.id,
             name: this.name,