[ADF-3889] [Start Process Cloud] - APS2 - error displayed when try to create a process with a name bigger the 255 characters (#4182)

* [ADF-3889] [Start Process Cloud] - APS2 - error displayed when try to create an process with an name bigger the 255 characters* Fixed  error displayed when try to create an process with an name bigger the 255 characters

* * Fixed comments* Updated doc * Added unit tests to the recent changes

* * Added validation to check whitespace
* Prevented starting a process just with the whitespace
* Fixed Error displayed in console when start a process

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

@@ -26,6 +26,7 @@ Starts a process.
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
 | appName | `string` |  | (required) Name of the app. |
+| maxNameLength | `number` |  | Maximum length of the process name. |
 | name | `string` | "" | Name of the process. |
 | processDefinitionName | `string` |  | Name of the process definition. |
 | showSelectProcessDropdown | `boolean` | true | Show/hide the process dropdown list. |

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

@@ -28,7 +28,8 @@
         "LOAD_PROCESS_DEFS": "Couldn't load process definitions, check you have access.",
         "START": "Couldn't start new process instance, check you have access.",
         "PROCESS_NAME_REQUIRED": "Process Name is required",
-        "PROCESS_DEFINITION_REQUIRED": "Process Definition is required"
+        "PROCESS_DEFINITION_REQUIRED": "Process Definition is required",
+        "MAXIMUM_LENGTH": "Length exceeded, {{characters}} characters max."
       }
     }
   },

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html

@@ -1,4 +1,4 @@
-<mat-accordion>
+<mat-accordion *ngIf="processFilter">
     <mat-expansion-panel>
         <mat-expansion-panel-header id="adf-edit-process-filter-expansion-header">
             <mat-panel-title id="adf-edit-process-filter-title-id">{{processFilter.name | translate}}</mat-panel-title>

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

@@ -15,9 +15,12 @@
                     matInput
                     formControlName="processInstanceName" 
                     id="processName">
-                <mat-error *ngIf="processInstanceName.hasError('required')">
+                <mat-error id="adf-start-process-required-error" *ngIf="processInstanceName.hasError('required')">
                     {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
                 </mat-error>
+                <mat-error id="adf-start-process-maxlength-error" *ngIf="processInstanceName.hasError('maxlength')">
+                    {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxNameLength } }}
+                </mat-error>
             </mat-form-field>
 
             <mat-form-field class="adf-process-input-container">

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

@@ -376,5 +376,29 @@ describe('StartProcessCloudComponent', () => {
 
             component.startProcess();
         });
+
+        it('should emit error when process name exceeds maximum length', () => {
+            component.maxNameLength = 2;
+            component.ngOnInit();
+            fixture.detectChanges();
+            let processInstanceName = component.processForm.controls['processInstanceName'];
+            processInstanceName.setValue('task');
+            fixture.detectChanges();
+            expect(processInstanceName.valid).toBeFalsy();
+            processInstanceName.setValue('ta');
+            fixture.detectChanges();
+            expect(processInstanceName.valid).toBeTruthy();
+        });
+
+        it('should emit error when process name field is empty', () => {
+            fixture.detectChanges();
+            let processInstanceName = component.processForm.controls['processInstanceName'];
+            processInstanceName.setValue('');
+            fixture.detectChanges();
+            expect(processInstanceName.valid).toBeFalsy();
+            processInstanceName.setValue('task');
+            fixture.detectChanges();
+            expect(processInstanceName.valid).toBeTruthy();
+        });
     });
 });

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

@@ -36,6 +36,8 @@ import { ProcessDefinitionCloud } from '../models/process-definition-cloud.model
 })
 export class StartProcessCloudComponent implements OnChanges, OnInit {
 
+    static MAX_NAME_LENGTH: number = 255;
+
     @ViewChild(MatAutocompleteTrigger)
     inputAutocomplete: MatAutocompleteTrigger;
 
@@ -43,6 +45,10 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
     @Input()
     appName: string;
 
+    /** Maximum length of the process name. */
+    @Input()
+    maxNameLength: number = StartProcessCloudComponent.MAX_NAME_LENGTH;
+
     /** Name of the process. */
     @Input()
     name: string = '';
@@ -77,14 +83,13 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
     processPayloadCloud = new ProcessPayloadCloud();
     filteredProcesses: ProcessDefinitionCloud[] = [];
     isLoading = false;
-
     constructor(private startProcessCloudService: StartProcessCloudService,
                 private formBuilder: FormBuilder) {
     }
 
     ngOnInit() {
         this.processForm = this.formBuilder.group({
-            processInstanceName: new FormControl(this.name, Validators.required),
+            processInstanceName: new FormControl(this.name, [Validators.required, Validators.maxLength(this.getMaxNameLength()), this.whitespaceValidator]),
             processDefinition: new FormControl('', [Validators.required, this.processDefinitionNameValidator()])
         });
 
@@ -105,6 +110,11 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
         }
     }
 
+    private getMaxNameLength(): number {
+        return this.maxNameLength > StartProcessCloudComponent.MAX_NAME_LENGTH ?
+            StartProcessCloudComponent.MAX_NAME_LENGTH : this.maxNameLength;
+    }
+
     setProcessDefinitionOnForm(processDefinitionName: string) {
         this.filteredProcesses = this.getProcessDefinitionList(processDefinitionName);
         const selectedProcess = this.getProcessIfExists(processDefinitionName);
@@ -227,6 +237,12 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
         };
     }
 
+    public whitespaceValidator(control: FormControl) {
+        const isWhitespace = (control.value || '').trim().length === 0;
+        const isValid = !isWhitespace;
+        return isValid ? null : { 'whitespace': true };
+    }
+
     get processInstanceName(): AbstractControl {
         return this.processForm.get('processInstanceName');
     }

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

@@ -123,7 +123,7 @@ export class StartTaskCloudComponent implements OnInit, OnDestroy {
 
     buildForm() {
         this.taskForm = this.formBuilder.group({
-            name: new FormControl(this.name, [Validators.required, Validators.maxLength(this.getMaxNameLength())]),
+            name: new FormControl(this.name, [Validators.required, Validators.maxLength(this.getMaxNameLength()), this.whitespaceValidator]),
             priority: new FormControl(),
             description: new FormControl()
         });
@@ -192,6 +192,12 @@ export class StartTaskCloudComponent implements OnInit, OnDestroy {
         this.assigneeName = assignee ? assignee.username : '';
     }
 
+    public whitespaceValidator(control: FormControl) {
+        const isWhitespace = (control.value || '').trim().length === 0;
+        const isValid = !isWhitespace;
+        return isValid ? null : { 'whitespace': true };
+    }
+
     get nameController(): AbstractControl {
         return this.taskForm.get('name');
     }