[ADF-4631] Start Process Cloud - Add the start form as part of a process (#4820)

* Add the start form as part of a process
Ability to pre-fill a form with values
Ability to send variables

* Fix unit test

* remove empty before each

demo-shell/src/app.config.json

@@ -744,6 +744,9 @@
     "name": "My Default Name",
     "processDefinitionName": "My default process def name"
   },
+  "adf-cloud-start-process": {
+    "name": "My Default Cloud Name"
+   },
   "adf-process-list": {
     "presets": {
       "default": [

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

@@ -1,6 +1,8 @@
 <adf-cloud-start-process
     [appName]="appName"
     [name]="processName"
+    [values]="formValues"
+    [variables]="variables"
     (error)="openSnackMessage($event)"
     (success)="onStartProcessSuccess()"
     (cancel)="onCancelStartProcess()">

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

@@ -28,6 +28,8 @@ export class StartProcessCloudDemoComponent implements OnInit {
 
     appName;
     processName: string;
+    formValues: string;
+    variables: any;
 
     constructor(private appConfig: AppConfigService,
                 private cloudLayoutService: CloudLayoutService,
@@ -41,7 +43,9 @@ export class StartProcessCloudDemoComponent implements OnInit {
             this.appName = params.appName;
         });
 
-        this.processName = this.appConfig.get<string>('adf-start-process.name');
+        this.processName = this.appConfig.get<string>('adf-cloud-start-process.name');
+        this.formValues = this.appConfig.get<string>('adf-cloud-start-process.values');
+        this.variables = this.appConfig.get<string>('adf-cloud-start-process.variables');
     }
 
     onStartProcessSuccess() {

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

@@ -30,7 +30,8 @@ Starts a process.
 | name | `string` | "" | Name of the process. |
 | processDefinitionName | `string` |  | Name of the process definition. |
 | showSelectProcessDropdown | `boolean` | true | Show/hide the process dropdown list. |
-| variables | `Map<string, object>[]` |  | Variables to attach to the payload. |
+| variables | `Object` |  | Variables to attach to the payload. |
+| values | `TaskVariableCloud` |  | Values to attach to a form. |
 
 ### Events
 
@@ -55,3 +56,22 @@ Starts a process.
 You can use the `processDefinitionName` property to select which process will be selected by default on the dropdown (when there is more than one process to choose from). Use the `name` property to set the name shown on the dropdown item.
 
 If the app contains only one process definition, this process definition will be selected by default
+
+
+### Starting a process with variables
+
+```html
+ <adf-cloud-start-process 
+      [appId]="YOUR_APP_ID"
+      [variables]="{ 'my-key1' : 'myvalue', 'my-key2' : 'myvalue2'}">
+ </adf-cloud-start-process>		 
+```
+
+### Starting a process with values passed to the form
+
+```html
+ <adf-cloud-start-process 
+      [appId]="YOUR_APP_ID"
+      [values]="[{'name': 'firstName', 'value': 'MyName'}, {'name': 'lastName', 'value': 'MyLastName'}]">
+ </adf-cloud-start-process>		 
+```

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

@@ -46,8 +46,30 @@
                     </mat-error>
             </mat-form-field>
         </form>
+
+        <ng-container *ngIf="hasForm() else taskFormCloudButtons">
+            <adf-cloud-form *ngIf="hasForm()" [appName]="appName" [data]="values" [formId]="processDefinitionCurrent.formKey"
+                [showSaveButton]="false" [showCompleteButton]="false" [showRefreshButton]="false" [showValidationIcon]="false"
+                [showTitle]="false" #formCloud>
+                <adf-cloud-form-custom-outcomes>
+                    <ng-template [ngTemplateOutlet]="taskFormCloudButtons">
+                    </ng-template>
+                </adf-cloud-form-custom-outcomes>
+            </adf-cloud-form>
+        </ng-container>
+
     </mat-card-content>
 
+    <ng-template #taskFormCloudButtons>
+        <button mat-button (click)="cancelStartProcess()" id="cancel_process">
+            {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.CANCEL' | translate | uppercase}}
+        </button>
+        <button color="primary" mat-button [disabled]="!processForm.valid || isLoading" (click)="startProcess()"
+            data-automation-id="btn-start" id="button-start" class="btn-start">
+            {{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.START' | translate | uppercase}}
+        </button>
+    </ng-template>
+
     <ng-template #emptyProcessDefinitionsList>
         <mat-card-content>
             <mat-card-subtitle class="error-message" id="no-process-message">
@@ -55,19 +77,4 @@
             </mat-card-subtitle>
         </mat-card-content>
     </ng-template>
-
+</mat-card>
-    <mat-card-actions>
-        <button mat-button (click)="cancelStartProcess()" id="cancel_process">
-            {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.CANCEL' | translate | uppercase}}
-        </button>
-        <button
-            color="primary"
-            mat-button
-            [disabled]="!processForm.valid || isLoading"
-            (click)="startProcess()"
-            data-automation-id="btn-start"
-            id="button-start" class="btn-start">
-            {{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.START' | translate | uppercase}}
-        </button>
-    </mat-card-actions>
-</mat-card>

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

@@ -20,18 +20,19 @@ import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core
 import { setupTestBed } from '@alfresco/adf-core';
 import { of, throwError } from 'rxjs';
 import { StartProcessCloudService } from '../services/start-process-cloud.service';
+import { FormCloudService } from '../../../form/services/form-cloud.service';
 
 import { StartProcessCloudComponent } from './start-process-cloud.component';
 import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
 import { ProcessCloudModule } from '../../process-cloud.module';
-import { fakeProcessDefinitions, fakeProcessInstance, fakeProcessPayload, fakeNoNameProcessDefinitions } from '../mock/start-process.component.mock';
+import { fakeProcessDefinitions, fakeStartForm, fakeProcessInstance, fakeProcessPayload, fakeNoNameProcessDefinitions } from '../mock/start-process.component.mock';
-import { By } from '@angular/platform-browser';
 
 describe('StartProcessCloudComponent', () => {
 
     let component: StartProcessCloudComponent;
     let fixture: ComponentFixture<StartProcessCloudComponent>;
     let processService: StartProcessCloudService;
+    let formCloudService: FormCloudService;
     let getDefinitionsSpy: jasmine.Spy;
     let startProcessSpy: jasmine.Spy;
 
@@ -44,6 +45,7 @@ describe('StartProcessCloudComponent', () => {
 
     beforeEach(() => {
         processService = TestBed.get(StartProcessCloudService);
+        formCloudService = TestBed.get(FormCloudService);
         fixture = TestBed.createComponent(StartProcessCloudComponent);
         component = fixture.componentInstance;
 
@@ -60,51 +62,100 @@ describe('StartProcessCloudComponent', () => {
         expect(fixture.componentInstance instanceof StartProcessCloudComponent).toBe(true, 'should create StartProcessInstanceComponent');
     });
 
-    describe('first step', () => {
+    describe('start a process without start form', () => {
 
-        describe('without start form', () => {
+        it('should enable start button when name and process filled out', async(() => {
+            component.name = 'My new process';
+            component.processDefinitionName = 'processwithoutform2';
+            fixture.detectChanges();
 
-            beforeEach(() => {
+            const change = new SimpleChange(null, 'MyApp', true);
-                fixture.detectChanges();
+            component.ngOnChanges({ 'appName': change });
-                component.name = 'My new process';
+            fixture.detectChanges();
-                component.appName = 'myApp';
+
-                fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                const startBtn = fixture.nativeElement.querySelector('#button-start');
+                expect(startBtn.disabled).toBe(false);
             });
+        }));
 
-            it('should enable start button when name and process filled out', async(() => {
+        it('should have start button disabled when name not filled out', async(() => {
-                spyOn(component, 'loadProcessDefinitions').and.callThrough();
+            component.name = '';
-                component.processDefinitionList = fakeProcessDefinitions;
+            component.processDefinitionName = 'processwithoutform2';
-                component.processForm.controls['processInstanceName'].setValue('My Process 1');
+            fixture.detectChanges();
-                component.processForm.controls['processDefinition'].setValue('NewProcess 1');
 
-                fixture.detectChanges();
+            const change = new SimpleChange(null, 'MyApp', true);
+            component.ngOnChanges({ 'appName': change });
+            fixture.detectChanges();
 
-                fixture.whenStable().then(() => {
+            fixture.whenStable().then(() => {
-                    const startBtn = fixture.nativeElement.querySelector('#button-start');
+                const startBtn = fixture.nativeElement.querySelector('#button-start');
-                    expect(startBtn.disabled).toBe(false);
+                expect(startBtn.disabled).toBe(true);
-                });
+            });
-            }));
+        }));
 
-            it('should have start button disabled when name not filled out', async(() => {
+        it('should have start button disabled when no process is selected', async(() => {
-                spyOn(component, 'loadProcessDefinitions').and.callThrough();
+            component.name = '';
-                component.processForm.controls['processInstanceName'].setValue('');
+            component.processDefinitionName = '';
-                component.processForm.controls['processDefinition'].setValue(fakeProcessInstance.name);
+            fixture.detectChanges();
-                fixture.detectChanges();
-                fixture.whenStable().then(() => {
-                    const startBtn = fixture.nativeElement.querySelector('#button-start');
-                    expect(startBtn.disabled).toBe(true);
-                });
-            }));
 
-            it('should have start button disabled when no process is selected', async(() => {
+            const change = new SimpleChange(null, 'MyApp', true);
-                component.processPayloadCloud.processDefinitionKey = null;
+            component.ngOnChanges({ 'appName': change });
-                fixture.detectChanges();
+            fixture.detectChanges();
-                fixture.whenStable().then(() => {
+
-                    const startBtn = fixture.nativeElement.querySelector('#button-start');
+            fixture.whenStable().then(() => {
-                    expect(startBtn.disabled).toBe(true);
+                const startBtn = fixture.nativeElement.querySelector('#button-start');
-                });
+                expect(startBtn.disabled).toBe(true);
-            }));
+            });
+        }));
+    });
+
+    describe('start a process with start form', () => {
+
+        beforeEach(() => {
+            component.name = 'My new process with form';
         });
+
+        it('should show a form if the process definition has one', async(() => {
+            component.processDefinitionName = 'processwithform';
+            fixture.detectChanges();
+            getDefinitionsSpy = spyOn(formCloudService, 'getForm').and.returnValue(of(fakeStartForm));
+
+            const change = new SimpleChange(null, 'MyApp', true);
+            component.ngOnChanges({ 'appName': change });
+            fixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                const firstNameEl = fixture.nativeElement.querySelector('#firstName');
+                expect(firstNameEl).toBeDefined();
+                const lastNameEl = fixture.nativeElement.querySelector('#lastName');
+                expect(lastNameEl).toBeDefined();
+                const startBtn = fixture.nativeElement.querySelector('#button-start');
+                expect(startBtn.disabled).toBe(false);
+            });
+        }));
+
+        it('should show a prefilled form if the values are passed as input', async(() => {
+            component.processDefinitionName = 'processwithform';
+            component.values = [{'name': 'firstName', 'value': 'FakeName'}, {'name': 'lastName', 'value': 'FakeLastName'}];
+            fixture.detectChanges();
+            getDefinitionsSpy = spyOn(formCloudService, 'getForm').and.returnValue(of(fakeStartForm));
+
+            const change = new SimpleChange(null, 'MyApp', true);
+            component.ngOnChanges({ 'appName': change });
+            fixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                const firstNameEl = fixture.nativeElement.querySelector('#firstName');
+                expect(firstNameEl).toBeDefined();
+                expect(firstNameEl.value).toEqual('FakeName');
+                const lastNameEl = fixture.nativeElement.querySelector('#lastName');
+                expect(lastNameEl).toBeDefined();
+                expect(lastNameEl.value).toEqual('FakeLastName');
+                const startBtn = fixture.nativeElement.querySelector('#button-start');
+                expect(startBtn.disabled).toBe(false);
+            });
+        }));
     });
 
     describe('process definitions list', () => {
@@ -185,12 +236,16 @@ describe('StartProcessCloudComponent', () => {
         }));
 
         it('should select processDefinition based on processDefinition input', async(() => {
-            getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of(fakeProcessDefinitions));
+            component.name = 'My new process';
-            component.processForm.controls['processInstanceName'].setValue('NewProcess 1');
+            component.processDefinitionName = 'processwithoutform1';
-            component.processForm.controls['processDefinition'].setValue('NewProcess 1');
             fixture.detectChanges();
+
+            const change = new SimpleChange(null, 'MyApp', true);
+            component.ngOnChanges({ 'appName': change });
+            fixture.detectChanges();
+
             fixture.whenStable().then(() => {
-                expect(component.processPayloadCloud.processDefinitionKey).toBe(JSON.parse(JSON.stringify(fakeProcessDefinitions[0])).name);
+                expect(component.processPayloadCloud.processDefinitionKey).toBe(JSON.parse(JSON.stringify(fakeProcessDefinitions[0])).key);
             });
         }));
 
@@ -320,15 +375,6 @@ describe('StartProcessCloudComponent', () => {
             });
         }));
 
-        it('should avoid calling service to start process if required fields NOT provided', async(() => {
-            component.processForm.controls['processInstanceName'].setValue('');
-            component.processForm.controls['processDefinition'].setValue('');
-            fixture.whenStable().then(() => {
-                const startProcessButton = fixture.debugElement.query(By.css('[data-automation-id="btn-start"]'));
-                expect(startProcessButton.nativeElement.disabled).toBeTruthy();
-            });
-        }));
-
         it('should call service to start process with the correct parameters', async(() => {
             component.processPayloadCloud = fakeProcessPayload;
             component.startProcess();

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

@@ -28,6 +28,8 @@ import { ProcessPayloadCloud } from '../models/process-payload-cloud.model';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { ProcessDefinitionCloud } from '../models/process-definition-cloud.model';
 import { Subject } from 'rxjs';
+import { FormCloudComponent } from '../../../form/components/form-cloud.component';
+import { TaskVariableCloud } from '../../../form/models/task-variable-cloud.model';
 
 @Component({
     selector: 'adf-cloud-start-process',
@@ -42,6 +44,9 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
     @ViewChild(MatAutocompleteTrigger)
     inputAutocomplete: MatAutocompleteTrigger;
 
+    @ViewChild(FormCloudComponent)
+    formCloud: FormCloudComponent;
+
     /** (required) Name of the app. */
     @Input()
     appName: string;
@@ -60,7 +65,11 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
 
     /** Variables to attach to the payload. */
     @Input()
-    variables: Map<string, object>[];
+    variables: {};
+
+    /** Parameter to pass form field values in the start form if one is associated. */
+    @Input()
+    values: TaskVariableCloud[];
 
     /** Show/hide the process dropdown list. */
     @Input()
@@ -79,6 +88,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
     error: EventEmitter<ProcessInstanceCloud> = new EventEmitter<ProcessInstanceCloud>();
 
     processDefinitionList: ProcessDefinitionCloud[] = [];
+    processDefinitionCurrent: ProcessDefinitionCloud;
     errorMessageId: string = '';
     processForm: FormGroup;
     processPayloadCloud = new ProcessPayloadCloud();
@@ -92,7 +102,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
     ngOnInit() {
         this.processForm = this.formBuilder.group({
             processInstanceName: new FormControl(this.name, [Validators.required, Validators.maxLength(this.getMaxNameLength()), this.whitespaceValidator]),
-            processDefinition: new FormControl('', [Validators.required, this.processDefinitionNameValidator()])
+            processDefinition: new FormControl(this.processDefinitionName, [Validators.required, this.processDefinitionNameValidator()])
         });
 
         this.processDefinition.valueChanges
@@ -115,6 +125,10 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
         }
     }
 
+    hasForm(): boolean {
+        return this.processDefinitionCurrent && !!this.processDefinitionCurrent.formKey;
+    }
+
     private getMaxNameLength(): number {
         return this.maxNameLength > StartProcessCloudComponent.MAX_NAME_LENGTH ?
             StartProcessCloudComponent.MAX_NAME_LENGTH : this.maxNameLength;
@@ -149,7 +163,8 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
     private selectDefaultProcessDefinition() {
         const selectedProcess = this.getProcessDefinitionByName(this.processDefinitionName);
         if (selectedProcess) {
-            this.processForm.controls['processDefinition'].setValue(selectedProcess.name);
+            this.processDefinitionCurrent = selectedProcess;
+            this.processDefinition.setValue(selectedProcess.name);
             this.processPayloadCloud.processDefinitionKey = selectedProcess.key;
         }
     }
@@ -176,7 +191,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
 
     private getProcessDefinition(option: ProcessDefinitionCloud, processDefinition: string): boolean {
         return (this.isValidName(option.name) && option.name.toLowerCase().includes(processDefinition.toLowerCase())) ||
-                 (option.key.toLowerCase().includes(processDefinition.toLowerCase()));
+                 (option.key && option.key.toLowerCase().includes(processDefinition.toLowerCase()));
     }
 
     isProcessDefinitionsEmpty(): boolean {
@@ -191,6 +206,10 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
             this.processPayloadCloud.variables = this.variables;
         }
 
+        if (this.hasForm()) {
+            this.processPayloadCloud.variables = Object.assign(this.processPayloadCloud.variables, this.formCloud.form.values);
+        }
+
         this.startProcessCloudService.startProcess(this.appName, this.processPayloadCloud).subscribe(
             (res) => {
                 this.success.emit(res);
@@ -213,7 +232,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
     }
 
     private resetProcessDefinitionList() {
-        this.processForm.controls['processDefinition'].setValue('');
+        this.processDefinition.setValue('');
         this.filteredProcesses = this.processDefinitionList;
     }
 

lib/process-services-cloud/src/lib/process/start-process/mock/start-process.component.mock.ts

@@ -36,15 +36,24 @@ export let fakeProcessDefinitions: ProcessDefinitionCloud[] = [
         appName: 'myApp',
         appVersion: 0,
         id: 'NewProcess:1',
-        key: 'NewProcess 1',
+        name: 'processwithoutform1',
-        name: 'NewProcess 1'
+        key: 'process-12345-f992-4ee6-9742-3a04617469fe',
+        formKey: ''
     }),
     new ProcessDefinitionCloud({
         appName: 'myApp',
         appVersion: 0,
         id: 'NewProcess:2',
-        key: 'NewProcess 2',
+        name: 'processwithoutform2',
-        name: 'NewProcess 2'
+        key: 'process-5151ad1d-f992-4ee6-9742-3a04617469fe',
+        formKey: ''
+    }),
+    new ProcessDefinitionCloud({
+        appName: 'startformwithoutupload',
+        formKey: 'form-a5d50817-5183-4850-802d-17af54b2632f',
+        id: 'd00c0237-8772-11e9-859a-428f83d5904f',
+        key: 'process-5151ad1d-f992-4ee6-9742-3a04617469fe',
+        name: 'processwithform'
     })
 ];
 
@@ -70,3 +79,67 @@ export let fakeProcessPayload = new ProcessPayloadCloud({
     name: 'NewProcess 1',
     payloadType: 'string'
 });
+
+export let fakeStartForm = {
+    'formRepresentation': {
+      'id': 'form-a5d50817-5183-4850-802d-17af54b2632f',
+      'name': 'simpleform',
+      'description': '',
+      'version': 0,
+      'formDefinition': {
+        'tabs': [],
+        'fields': [
+          {
+            'type': 'container',
+            'id': '5a6b24c1-db2b-45e9-9aff-142395433d23',
+            'name': 'Label',
+            'tab': null,
+            'fields': {
+              '1': [
+                {
+                  'type': 'text',
+                  'id': 'firstName',
+                  'name': 'firstName',
+                  'colspan': 1,
+                  'params': {
+                    'existingColspan': 1,
+                    'maxColspan': 2
+                  },
+                  'visibilityCondition': null,
+                  'placeholder': null,
+                  'value': null,
+                  'required': false,
+                  'minLength': 0,
+                  'maxLength': 0,
+                  'regexPattern': null
+                }
+              ],
+              '2': [
+                {
+                  'type': 'text',
+                  'id': 'lastName',
+                  'name': 'lastName',
+                  'colspan': 1,
+                  'params': {
+                    'existingColspan': 1,
+                    'maxColspan': 2
+                  },
+                  'visibilityCondition': null,
+                  'placeholder': null,
+                  'value': null,
+                  'required': false,
+                  'minLength': 0,
+                  'maxLength': 0,
+                  'regexPattern': null
+                }
+              ]
+            },
+            'numberOfColumns': 2
+          }
+        ],
+        'outcomes': [],
+        'metadata': {},
+        'variables': []
+      }
+    }
+  };

lib/process-services-cloud/src/lib/process/start-process/models/process-definition-cloud.model.ts

@@ -19,6 +19,7 @@ export class ProcessDefinitionCloud {
     id: string;
     appName: string;
     key: string;
+    formKey?: string;
     appVersion: number;
     version: number;
     name: string;
@@ -28,6 +29,7 @@ export class ProcessDefinitionCloud {
         this.name = obj && obj.name || null;
         this.appName = obj && obj.appName || null;
         this.key = obj && obj.key || null;
+        this.formKey = obj && obj.formKey || null;
         this.version = obj && obj.version || 0;
         this.appVersion = obj && obj.appVersion || 0;
     }

lib/process-services-cloud/src/lib/process/start-process/models/process-payload-cloud.model.ts

@@ -19,7 +19,7 @@ export class ProcessPayloadCloud {
     processDefinitionKey: string;
     name: string;
     businessKey: string;
-    variables: Map<string, object>[];
+    variables: {};
     payloadType: string = 'StartProcessPayload';
 
     constructor(obj?: any) {

lib/process-services-cloud/src/lib/process/start-process/start-process-cloud.module.ts

@@ -20,12 +20,14 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MaterialModule } from '../../material.module';
+import { FormCloudModule } from '../../form/form-cloud.module';
 import { StartProcessCloudComponent } from './components/start-process-cloud.component';
 import { CoreModule } from '@alfresco/adf-core';
 @NgModule({
     imports: [
         FormsModule,
         CommonModule,
+        FormCloudModule,
         MaterialModule,
         FlexLayoutModule,
         ReactiveFormsModule,