[ACA-3304] FE - Add a drop down to select running application on start process component

demo-shell/src/app/components/process-service/process-service.component.html

@@ -217,10 +217,11 @@
                      *ngIf="isStartProcessMode()">
                     <adf-start-process
                         #activitiStartProcess
-                        [appId]="appId"
+                        [appId]="applicationId"
+                        [processDefinitionName]="processDefinitionName"
+                        [showSelectApplicationDropdown]="showApplications"
                         [title]="'ADF_PROCESS_LIST.START_PROCESS.FORM.TITLE'"
                         [name]="defaultProcessName"
-                        [processDefinitionName]="defaultProcessDefinitionName"
                         (formContentClicked)="onContentClick($event)"
                         (start)="onStartProcessInstance($event)"
                         (cancel)="onCancelProcessInstance()">
@@ -291,6 +292,24 @@
                 <div>
                     <mat-slide-toggle id="adf-process-context-menu" [(ngModel)]="processContextMenu" >Show Process list Context menu</mat-slide-toggle>
                 </div>
+                <div>
+                    <mat-slide-toggle id="adf-start-process-app-drop-down" [(ngModel)]="showApplications" >Show Application dropdown on start process</mat-slide-toggle>
+                    <mat-card class="example-card" *ngIf="showApplications">
+                        <mat-card-header >
+                          <mat-card-title>Filter Process definitions</mat-card-title>
+                        </mat-card-header>
+                        <mat-card-content  fxLayout="column" fxLayoutAlign="space-around stretch">
+                            <mat-form-field>
+                                <mat-label>ApplicationId</mat-label>
+                                <input matInput [(ngModel)]="applicationId">
+                              </mat-form-field>
+                              <mat-form-field>
+                                <mat-label>ProcessDefinitionName</mat-label>
+                                <input matInput [(ngModel)]="processDefinitionName">
+                              </mat-form-field>
+                        </mat-card-content>
+                      </mat-card>
+                </div>
                 <br>
                 <mat-radio-group [(ngModel)]="selectionMode">
                     <mat-radio-button value="multiple">multiple</mat-radio-button>

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -153,6 +153,9 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
 
     showProcessFilterIcon: boolean;
     showTaskFilterIcon: boolean;
+    showApplications: boolean;
+    applicationId: number;
+    processDefinitionName: string;
 
     fieldValidators = [
         ...FORM_FIELD_VALIDATORS,
@@ -176,7 +179,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         this.defaultProcessName = this.appConfig.get<string>('adf-start-process.name');
         this.defaultProcessDefinitionName = this.appConfig.get<string>('adf-start-process.processDefinitionName');
         this.defaultTaskName = this.appConfig.get<string>('adf-start-task.name');
-
+        this.processDefinitionName = this.defaultProcessDefinitionName;
         // Uncomment this line to replace all 'text' field editors with custom component
         // formRenderingService.setComponentTypeResolver('text', () => CustomEditorComponent, true);
 
@@ -251,6 +254,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
 
             if (applicationId && applicationId !== '0') {
                 this.appId = params['appId'];
+                this.applicationId = this.appId;
             }
 
             this.taskFilter = null;

docs/process-services/components/start-process.component.md

@@ -43,6 +43,7 @@ Starts a process.
 | processDefinitionName | `string` |  | (optional) Definition name of the process to start. |
 | processFilterSelector | `boolean` | true | (optional) Parameter to enable selection of process when filtering. |
 | showSelectProcessDropdown | `boolean` | true | Hide or show the process selection dropdown. |
+| showSelectApplicationDropdown | `boolean` | false | application selection dropdown. |
 | title | `string` |  | (optional) Define the header of the component. |
 | values | [`FormValues`](../../../lib/core/form/components/widgets/core/form-values.ts) |  | Parameter to pass form field values in the start form if one is associated. |
 | variables | [`ProcessInstanceVariable`](../../../lib/process-services/src/lib/process-list/models/process-instance-variable.model.ts)`[]` |  | Variables in the input to the process [`RestVariable`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/activiti-rest-api/docs/RestVariable.md). |
@@ -175,6 +176,25 @@ The result will be the start form prefilled with the file data:
 
 ![Start process load file](../../docassets/images/start_process.png)
 
+### Starting a process with a selected application
+
+Now you can start process based on selected application from the dropdown. The process definition dropdown will display based on the selected application. The application dropdown will be selected application based on the given `appId` otherwise first application will be selected as default.
+
+```html
+ <adf-start-process 
+      [appId]="YOUR_APP_ID"
+      [title]="'ADF_PROCESS_LIST.START_PROCESS.FORM.TITLE'"
+      [name]="PROCESS_NAME"
+      [showSelectApplicationDropdown]="true"
+      [processDefinitionName]="PROCESS_DEFINITION_NAME">
+ </adf-start-process>		 
+```
+
+You can use the `showSelectApplicationDropdown` property to Hide or show application drop down.
+
+![Start process with selected application](../../docassets/images/start-process-with-selected-application.png)
+
+
 ## See also
 
 -   [Select Apps Dialog component](select-apps-dialog.component.md)

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss

@@ -1,19 +1,11 @@
 @mixin adf-cloud-start-service-theme($theme) {
     .adf {
         &-start-process {
-            .mat-select-trigger {
-                font-size: 14px !important;
-            }
 
             mat-form-field {
                 width: 100%;
             }
 
-            mat-select {
-                width: 100%;
-                padding: 16px 0 0;
-            }
-
             .mat-form-field-label {
                 color: mat-color($mat-grey, A400);
             }

lib/process-services/src/lib/form/start-form.component.spec.ts

@@ -88,7 +88,7 @@ describe('StartFormComponent', () => {
     });
 
     it('should not load start form when changes notified but no change to processDefinitionId', () => {
-        component.processDefinitionId = exampleId1;
+        component.processDefinitionId = undefined;
         component.ngOnChanges({ otherProp: new SimpleChange(exampleId1, exampleId2, true) });
         expect(formService.getStartFormDefinition).not.toHaveBeenCalled();
     });

lib/process-services/src/lib/form/start-form.component.ts

@@ -82,8 +82,12 @@ export class StartFormComponent extends FormComponent implements OnChanges, OnIn
     ngOnChanges(changes: SimpleChanges) {
         const processDefinitionId = changes['processDefinitionId'];
         if (processDefinitionId && processDefinitionId.currentValue) {
+            this.processDefinitionId = processDefinitionId.currentValue;
+        }
+
+        if (this.processDefinitionId) {
             this.visibilityService.cleanProcessVariable();
-            this.getStartFormDefinition(processDefinitionId.currentValue);
+            this.getStartFormDefinition(this.processDefinitionId);
             return;
         }
 

lib/process-services/src/lib/i18n/en.json

@@ -276,6 +276,7 @@
       "FORM": {
         "TITLE": "Start Process",
         "LABEL": {
+          "SELECT_APPLICATION": "Select Application",
           "TYPE": "Select Process",
           "NAME": "Process Name"
         },

lib/process-services/src/lib/process-list/components/start-process.component.html

@@ -4,35 +4,50 @@
         <div class="subtitle" id="error-message" *ngIf="errorMessageId">
             {{errorMessageId|translate}}
         </div>
-        <mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
-            <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE' | translate}}</mat-label>
-            <input
-                type="text"
-                matInput
-                [formControl]="processDefinitionInput"
-                [matAutocomplete]="auto"
-                id="processDefinitionName"
-                #inputAutocomplete>
-            <div class="adf-process-input-autocomplete">
-                <mat-autocomplete
-                    #auto="matAutocomplete"
-                    id="processDefinitionOptions"
-                    [displayWith]="displayFn">
-                    <mat-option *ngFor="let processDef of filteredProcesses | async" [value]="processDef.name"
-                    (click)="processDefinitionSelectionChanged(processDef)">
-                        {{ processDef.name }}
+        <div class="adf-start-process-definition-container">
+            <mat-form-field *ngIf="showSelectApplicationDropdown" [floatLabel]="'always'" class="adf-start-process-app-list">
+                <mat-select
+                    placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.SELECT_APPLICATION' | translate}}"
+                    (selectionChange)="onAppSelectionChange($event)"
+                    [(ngModel)]="selectedApplication"
+                    data-automation-id="adf-start-process-apps-drop-down">
+                    <mat-option 
+                        *ngFor="let application of applications"
+                        [value]="application"
+                        [attr.data-automation-id]="'adf-start-process-apps-option' + application.name">
+                        {{ application.name }}
                     </mat-option>
-                </mat-autocomplete>
-                <button
-                    id="adf-select-process-dropdown"
-                    *ngIf="showSelectProcessDropdown"
-                    mat-icon-button
-                    (click)="displayDropdown($event)">
-                    <mat-icon>arrow_drop_down</mat-icon>
-                </button>
-            </div>
-        </mat-form-field>
-
+                </mat-select>
+            </mat-form-field>
+            <mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
+                <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE' | translate}}</mat-label>
+                <input
+                    type="text"
+                    matInput
+                    [formControl]="processDefinitionInput"
+                    [matAutocomplete]="auto"
+                    id="processDefinitionName"
+                    #inputAutocomplete>
+                <div class="adf-process-input-autocomplete">
+                    <mat-autocomplete
+                        #auto="matAutocomplete"
+                        id="processDefinitionOptions"
+                        [displayWith]="displayFn">
+                        <mat-option *ngFor="let processDef of filteredProcessesDefinitions$ | async" [value]="processDef.name"
+                        (click)="processDefinitionSelectionChanged(processDef)">
+                            {{ processDef.name }}
+                        </mat-option>
+                    </mat-autocomplete>
+                    <button
+                        id="adf-select-process-dropdown"
+                        *ngIf="showSelectProcessDropdown"
+                        mat-icon-button
+                        (click)="displayDropdown($event)">
+                        <mat-icon>arrow_drop_down</mat-icon>
+                    </button>
+                </div>
+            </mat-form-field>
+        </div>
         <mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
             <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.NAME' | translate}}</mat-label>
             <input

lib/process-services/src/lib/process-list/components/start-process.component.scss

@@ -5,16 +5,9 @@
             margin-left: auto;
             margin-right: auto;
             margin-top: 10px;
-            .mat-select-trigger {
-                font-size: 14px !important;
-            }
             mat-form-field {
                 width: 100%;
             }
-            mat-select {
-                width: 100%;
-                padding: 16px 0 0;
-            }
             .mat-form-field-label {
                 color: mat-color($mat-grey, A400);
             }
@@ -50,6 +43,15 @@
         &-start-form-actions {
             text-align: right !important;
         }
+        &-start-process-definition-container {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            align-items: baseline;
+        }
+        &-start-process-app-list {
+            margin-right: 10px;
+        }
     }
     @media (max-width: 600px) {
         .adf-start-process {