[AAE-5280] Better error handling for user task (#7070)

* [AAE-5280] [ADF] Better error handling for user task

* * fixed comments

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

@@ -9,7 +9,8 @@
                 (taskClaimed)="onClaimTask()"
                 (taskCompleted)="onTaskCompleted()"
                 (taskUnclaimed)="onUnclaimTask()"
-                (formSaved)="onFormSaved()">
+                (formSaved)="onFormSaved()"
+                (error)="onError($event)">
             </adf-cloud-task-form>
         </div>
         <adf-cloud-task-header fxFlex

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

@@ -64,4 +64,13 @@ export class CommunityTaskDetailsCloudDemoComponent {
     onFormSaved() {
         this.notificationService.openSnackMessage('Task has been saved successfully');
     }
+
+    onError({ message: error }: Error) {
+        let errorMessage;
+        try {
+            errorMessage = JSON.parse(error).message || JSON.parse(error).entry?.message;
+            errorMessage = JSON.parse(errorMessage).message;
+        } catch {}
+        this.notificationService.showError(errorMessage || error);
+    }
 }

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

@@ -9,7 +9,8 @@
                 (cancelClick)="goBack()"
                 (taskCompleted)="onTaskCompleted()"
                 (formContentClicked)="onFormContentClicked($event)"
-                (formSaved)="onFormSaved()">
+                (formSaved)="onFormSaved()"
+                (error)="onError($event)">
             </adf-cloud-task-form>
         </div>
         <adf-cloud-task-header #taskHeader fxFlex

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

@@ -67,4 +67,13 @@ export class TaskDetailsCloudDemoComponent {
     onFormSaved() {
         this.notificationService.openSnackMessage('Task has been saved successfully');
     }
+
+    onError({ message: error }: Error) {
+        let errorMessage;
+        try {
+            errorMessage = JSON.parse(error).message || JSON.parse(error).entry?.message;
+            errorMessage = JSON.parse(errorMessage).message;
+        } catch {}
+        this.notificationService.showError(errorMessage || error);
+    }
 }

lib/process-services-cloud/src/lib/task/directives/claim-task-cloud.directive.spec.ts

@@ -18,7 +18,7 @@ import { Component, ContentChildren, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { setupTestBed } from '@alfresco/adf-core';
 import { TaskCloudService } from '../services/task-cloud.service';
-import { of } from 'rxjs';
+import { of, throwError } from 'rxjs';
 import { ClaimTaskCloudDirective } from './claim-task-cloud.directive';
 import { taskClaimCloudMock } from '../task-header/mocks/fake-claim-task.mock';
 import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
@@ -28,7 +28,7 @@ describe('ClaimTaskCloudDirective', () => {
 
     @Component({
         selector:  'adf-cloud-claim-test-component',
-        template: '<button adf-cloud-claim-task [taskId]="taskMock" [appName]="appNameMock"></button>'
+        template: '<button adf-cloud-claim-task [taskId]="taskMock" [appName]="appNameMock" (error)="onError($event)"></button>'
     })
     class TestComponent {
 
@@ -37,6 +37,10 @@ describe('ClaimTaskCloudDirective', () => {
 
         @ViewChild(ClaimTaskCloudDirective, { static: false })
         claimTaskDirective: ClaimTaskCloudDirective;
+
+        onError(error: Error) {
+            return error;
+        }
     }
 
     let fixture: ComponentFixture<TestComponent>;
@@ -64,6 +68,17 @@ describe('ClaimTaskCloudDirective', () => {
         button.click();
         expect(taskCloudService.claimTask).toHaveBeenCalled();
     });
+
+    it('should emit error on api fail', async () => {
+        const error = { message: 'task key not found' };
+        spyOn(taskCloudService, 'claimTask').and.returnValue(throwError(error));
+        spyOn(fixture.componentInstance, 'onError').and.callThrough();
+        const button = fixture.nativeElement.querySelector('button');
+        button.click();
+        await fixture.whenStable();
+        expect(taskCloudService.claimTask).toHaveBeenCalled();
+        expect(fixture.componentInstance.onError).toHaveBeenCalledWith(error);
+    });
 });
 
 describe('Claim Task Directive validation errors', () => {

lib/process-services-cloud/src/lib/task/directives/complete-task.directive.spec.ts

@@ -18,7 +18,7 @@ import { Component, ViewChild, ContentChildren } from '@angular/core';
 import { CompleteTaskDirective } from './complete-task.directive';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { setupTestBed } from '@alfresco/adf-core';
-import { of } from 'rxjs';
+import { of, throwError } from 'rxjs';
 import { taskCompleteCloudMock } from '../task-header/mocks/fake-complete-task.mock';
 import { TaskCloudService } from '../services/task-cloud.service';
 import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
@@ -28,7 +28,7 @@ describe('CompleteTaskDirective', () => {
 
     @Component({
         selector:  'adf-cloud-test-component',
-        template: `<button adf-cloud-complete-task [taskId]='taskMock' [appName]='appNameMock' (success)="onCompleteTask($event)"></button>`
+        template: `<button adf-cloud-complete-task [taskId]='taskMock' [appName]='appNameMock' (success)="onCompleteTask($event)" (error)="onError($event)"></button>`
     })
     class TestComponent {
 
@@ -41,6 +41,10 @@ describe('CompleteTaskDirective', () => {
         onCompleteTask(event: any) {
             return event;
         }
+
+        onError(error: Error) {
+            return error;
+        }
     }
 
     let fixture: ComponentFixture<TestComponent>;
@@ -68,6 +72,17 @@ describe('CompleteTaskDirective', () => {
         button.click();
         expect(taskCloudService.completeTask).toHaveBeenCalled();
     });
+
+    it('should emit error on api fail',  async () => {
+        const error = { message: 'process key not found' };
+        spyOn(taskCloudService, 'completeTask').and.returnValue(throwError(error));
+        spyOn(fixture.componentInstance, 'onError').and.callThrough();
+        const button = fixture.nativeElement.querySelector('button');
+        button.click();
+        await fixture.whenStable();
+        expect(taskCloudService.completeTask).toHaveBeenCalled();
+        expect(fixture.componentInstance.onError).toHaveBeenCalledWith(error);
+    });
 });
 
 describe('Complete Task Directive validation errors', () => {

lib/process-services-cloud/src/lib/task/directives/unclaim-task-cloud.directive.spec.ts

@@ -18,7 +18,7 @@ import { Component, ContentChildren, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { setupTestBed } from '@alfresco/adf-core';
 import { TaskCloudService } from '../services/task-cloud.service';
-import { of } from 'rxjs';
+import { of, throwError } from 'rxjs';
 import { UnClaimTaskCloudDirective } from './unclaim-task-cloud.directive';
 import { taskClaimCloudMock } from '../task-header/mocks/fake-claim-task.mock';
 import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
@@ -28,7 +28,7 @@ describe('UnClaimTaskCloudDirective', () => {
 
     @Component({
         selector:  'adf-cloud-test-component',
-        template: '<button adf-cloud-unclaim-task [taskId]="taskIdMock" [appName]="appName"></button>'
+        template: '<button adf-cloud-unclaim-task [taskId]="taskIdMock" [appName]="appName" (error)="onError($event)"></button>'
     })
     class TestComponent {
 
@@ -37,6 +37,10 @@ describe('UnClaimTaskCloudDirective', () => {
 
         @ContentChildren(UnClaimTaskCloudDirective)
         unclaimTaskDirective: UnClaimTaskCloudDirective;
+
+        onError(error: Error) {
+            return error;
+        }
     }
 
     let fixture: ComponentFixture<TestComponent>;
@@ -64,6 +68,17 @@ describe('UnClaimTaskCloudDirective', () => {
         button.click();
         expect(taskCloudService.unclaimTask).toHaveBeenCalled();
     });
+
+    it('should emit error on api fail', async () => {
+        const error = { message: 'task key not found' };
+        spyOn(taskCloudService, 'unclaimTask').and.returnValue(throwError(error));
+        spyOn(fixture.componentInstance, 'onError').and.callThrough();
+        const button = fixture.nativeElement.querySelector('button');
+        button.click();
+        await fixture.whenStable();
+        expect(taskCloudService.unclaimTask).toHaveBeenCalled();
+        expect(fixture.componentInstance.onError).toHaveBeenCalledWith(error);
+    });
 });
 
 describe('UnClaim Task Directive validation errors', () => {

lib/process-services-cloud/src/lib/task/directives/unclaim-task-cloud.directive.ts

@@ -72,16 +72,10 @@ export class UnClaimTaskCloudDirective implements OnInit {
     @HostListener('click')
     async onClick() {
         try {
-            await this.unclaimTask();
+            await this.taskListService.unclaimTask(this.appName, this.taskId).toPromise();
+            this.success.emit(this.taskId);
         } catch (error) {
             this.error.emit(error);
         }
     }
-
-    private async unclaimTask() {
-        await this.taskListService.unclaimTask(this.appName, this.taskId).subscribe(
-            () => {
-                this.success.emit(this.taskId);
-            });
-    }
 }

lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.html

@@ -13,6 +13,7 @@
                     (formSaved)="onFormSaved($event)"
                     (formCompleted)="onFormCompleted($event)"
                     (formError)="onError($event)"
+                    (error)="onError($event)"
                     (formContentClicked)="onFormContentClicked($event)">
         <adf-cloud-form-custom-outcomes>
             <ng-template [ngTemplateOutlet]="taskFormCloudButtons">
@@ -42,7 +43,7 @@
                 <ng-template [ngTemplateOutlet]="taskFormCloudButtons">
                 </ng-template>
                 <button mat-button *ngIf="canCompleteTask()" adf-cloud-complete-task [appName]="appName"
-                        [taskId]="taskId" (success)="onCompleteTask()" color="primary" id="adf-form-complete">
+                        [taskId]="taskId" (success)="onCompleteTask()" (error)="onError($event)" color="primary" id="adf-form-complete">
                     {{'ADF_CLOUD_TASK_FORM.EMPTY_FORM.BUTTONS.COMPLETE' | translate}}
                 </button>
             </mat-card-actions>
@@ -53,11 +54,11 @@
             {{'ADF_CLOUD_TASK_FORM.EMPTY_FORM.BUTTONS.CANCEL' | translate}}
         </button>
         <button mat-button *ngIf="canClaimTask()" adf-cloud-claim-task [appName]="appName" [taskId]="taskId"
-                (success)="onClaimTask()">
+                (success)="onClaimTask()" (error)="onError($event)">
             {{'ADF_CLOUD_TASK_FORM.EMPTY_FORM.BUTTONS.CLAIM' | translate}}
         </button>
         <button mat-button *ngIf="hasCandidateUsersOrGroups()" adf-cloud-unclaim-task [appName]="appName" [taskId]="taskId"
-                (success)="onUnclaimTask()">
+                (success)="onUnclaimTask()" (error)="onError($event)">
             {{'ADF_CLOUD_TASK_FORM.EMPTY_FORM.BUTTONS.UNCLAIM' | translate}}
         </button>
     </ng-template>