[CST-16756] listen to form saves and add errors to live region

Author: Andrea Barbasso

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts

@@ -59,12 +59,23 @@ import {
   DynamicNGBootstrapTextAreaComponent,
   DynamicNGBootstrapTimePickerComponent,
 } from '@ng-dynamic-forms/ui-ng-bootstrap';
+import { Actions } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxMaskModule } from 'ngx-mask';
-import { of } from 'rxjs';
+import {
+  of,
+  ReplaySubject,
+} from 'rxjs';
 
 import { environment } from '../../../../../environments/environment';
+import {
+  SaveForLaterSubmissionFormErrorAction,
+  SaveSubmissionFormErrorAction,
+  SaveSubmissionFormSuccessAction,
+  SaveSubmissionSectionFormErrorAction,
+  SaveSubmissionSectionFormSuccessAction,
+} from '../../../../submission/objects/submission-objects.actions';
 import { SubmissionService } from '../../../../submission/submission.service';
 import { SubmissionObjectService } from '../../../../submission/submission-object.service';
 import { LiveRegionService } from '../../../live-region/live-region.service';
@@ -208,6 +219,8 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
   const testItem: Item = new Item();
   const testWSI: WorkspaceItem = new WorkspaceItem();
   testWSI.item = of(createSuccessfulRemoteDataObject(testItem));
+  const actions$: ReplaySubject<any> = new ReplaySubject<any>(1);
+
   beforeEach(waitForAsync(() => {
 
     TestBed.configureTestingModule({
@@ -241,6 +254,7 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
         { provide: APP_DATA_SERVICES_MAP, useValue: {} },
         { provide: DYNAMIC_FORM_CONTROL_MAP_FN, useValue: dsDynamicFormControlMapFn },
         { provide: LiveRegionService, useValue: getLiveRegionServiceStub() },
+        { provide: Actions, useValue: actions$ },
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents().then(() => {
@@ -382,4 +396,40 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
     expect(testFn(formModel[25])).toEqual(DsDynamicFormGroupComponent);
   });
 
+  describe('store action subscriptions', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should call announceErrorMessages on SAVE_SUBMISSION_FORM_SUCCESS', () => {
+      spyOn(component, 'announceErrorMessages');
+      actions$.next(new SaveSubmissionFormSuccessAction('1234', [] as any));
+      expect(component.announceErrorMessages).toHaveBeenCalled();
+    });
+
+    it('should call announceErrorMessages on SAVE_SUBMISSION_SECTION_FORM_SUCCESS', () => {
+      spyOn(component, 'announceErrorMessages');
+      actions$.next(new SaveSubmissionSectionFormSuccessAction('1234', [] as any));
+      expect(component.announceErrorMessages).toHaveBeenCalled();
+    });
+
+    it('should call announceErrorMessages on SAVE_SUBMISSION_FORM_ERROR', () => {
+      spyOn(component, 'announceErrorMessages');
+      actions$.next(new SaveSubmissionFormErrorAction('1234'));
+      expect(component.announceErrorMessages).toHaveBeenCalled();
+    });
+
+    it('should call announceErrorMessages on SAVE_FOR_LATER_SUBMISSION_FORM_ERROR', () => {
+      spyOn(component, 'announceErrorMessages');
+      actions$.next(new SaveForLaterSubmissionFormErrorAction('1234'));
+      expect(component.announceErrorMessages).toHaveBeenCalled();
+    });
+
+    it('should call announceErrorMessages on SAVE_SUBMISSION_SECTION_FORM_ERROR', () => {
+      spyOn(component, 'announceErrorMessages');
+      actions$.next(new SaveSubmissionSectionFormErrorAction('1234'));
+      expect(component.announceErrorMessages).toHaveBeenCalled();
+    });
+  });
+
 });

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts

@@ -94,6 +94,10 @@ import {
   DynamicFormValidationService,
   DynamicTemplateDirective,
 } from '@ng-dynamic-forms/core';
+import {
+  Actions,
+  ofType,
+} from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import {
   TranslateModule,
@@ -113,6 +117,7 @@ import {
 } from 'rxjs/operators';
 
 import { AppState } from '../../../../app.reducer';
+import { SubmissionObjectActionTypes } from '../../../../submission/objects/submission-objects.actions';
 import { SubmissionService } from '../../../../submission/submission.service';
 import { SubmissionObjectService } from '../../../../submission/submission-object.service';
 import { LiveRegionService } from '../../../live-region/live-region.service';
@@ -174,6 +179,8 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
    */
   private subs: Subscription[] = [];
 
+  private liveRegionErrorMessagesShownAlready = false;
+
   /* eslint-disable @angular-eslint/no-output-rename */
   @Output('dfBlur') blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
   @Output('dfChange') change: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
@@ -215,6 +222,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     protected metadataService: MetadataService,
     @Inject(APP_CONFIG) protected appConfig: AppConfig,
     @Inject(DYNAMIC_FORM_CONTROL_MAP_FN) protected dynamicFormControlFn: DynamicFormControlMapFn,
+    private actions$: Actions,
   ) {
     super(ref, componentFactoryResolver, layoutService, validationService, dynamicFormComponentService, relationService);
     this.fetchThumbnail = this.appConfig.browseBy.showThumbnails;
@@ -227,6 +235,18 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     this.isRelationship = hasValue(this.model.relationship);
     const isWrapperAroundRelationshipList = hasValue(this.model.relationshipConfig);
 
+    // Subscribe to specified submission actions to announce error messages
+    const errorAnnounceActionsSub = this.actions$.pipe(
+      ofType(
+        SubmissionObjectActionTypes.SAVE_SUBMISSION_FORM_SUCCESS,
+        SubmissionObjectActionTypes.SAVE_SUBMISSION_SECTION_FORM_SUCCESS,
+        SubmissionObjectActionTypes.SAVE_SUBMISSION_FORM_ERROR,
+        SubmissionObjectActionTypes.SAVE_FOR_LATER_SUBMISSION_FORM_ERROR,
+        SubmissionObjectActionTypes.SAVE_SUBMISSION_SECTION_FORM_ERROR,
+      ),
+    ).subscribe(() => this.announceErrorMessages());
+    this.subs.push(errorAnnounceActionsSub);
+
     if (this.isRelationship || isWrapperAroundRelationshipList) {
       const config = this.model.relationshipConfig || this.model.relationship;
       const relationshipOptions = Object.assign(new RelationshipOptions(), config);
@@ -359,15 +379,20 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
    * Announce error messages to the user
    */
   announceErrorMessages() {
-    const numberOfInvalidInputs = this.getNumberOfInvalidInputs() ?? 1;
-    setTimeout(() => {
+    if (!this.liveRegionErrorMessagesShownAlready) {
+      this.liveRegionErrorMessagesShownAlready = true;
+      const numberOfInvalidInputs = this.getNumberOfInvalidInputs() ?? 1;
+      const timeoutMs = numberOfInvalidInputs * 3500;
       this.errorMessages.forEach((errorMsg) => {
         // set timer based on the number of the invalid inputs
-        this.liveRegionService.setMessageTimeOutMs(numberOfInvalidInputs * 3500);
+        this.liveRegionService.setMessageTimeOutMs(timeoutMs);
         const message = this.translateService.instant(errorMsg);
         this.liveRegionService.addMessage(message);
       });
-    }, 14000);// wait for the general deposit alert to be announced
+      setTimeout(() => {
+        this.liveRegionErrorMessagesShownAlready = false;
+      }, timeoutMs);
+    }
   }
 
   /**

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.spec.ts

@@ -16,13 +16,17 @@ import {
   DynamicFormValidationService,
   DynamicInputModel,
 } from '@ng-dynamic-forms/core';
+import { provideMockActions } from '@ngrx/effects/testing';
 import { provideMockStore } from '@ngrx/store/testing';
 import {
   TranslateModule,
   TranslateService,
 } from '@ngx-translate/core';
 import { NgxMaskModule } from 'ngx-mask';
-import { of } from 'rxjs';
+import {
+  Observable,
+  of,
+} from 'rxjs';
 import { LiveRegionService } from 'src/app/shared/live-region/live-region.service';
 
 import { environment } from '../../../../../../../environments/environment.test';
@@ -61,6 +65,7 @@ describe('DsDynamicFormArrayComponent', () => {
         { provide: TranslateService, useValue: translateServiceStub },
         { provide: HttpClient, useValue: {} },
         { provide: SubmissionService, useValue: {} },
+        provideMockActions(() => new Observable<any>()),
         { provide: APP_CONFIG, useValue: environment },
         { provide: DYNAMIC_FORM_CONTROL_MAP_FN, useValue: dsDynamicFormControlMapFn },
         { provide: LiveRegionService, useValue: getLiveRegionServiceStub() },

src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.spec.ts

@@ -35,8 +35,10 @@ import {
   DynamicFormLayoutService,
   DynamicFormValidationService,
 } from '@ng-dynamic-forms/core';
+import { provideMockActions } from '@ngrx/effects/testing';
 import { provideMockStore } from '@ngrx/store/testing';
 import { TranslateModule } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
 
 import { environment } from '../../../../../../../environments/environment.test';
 import { SubmissionService } from '../../../../../../submission/submission.service';
@@ -171,6 +173,7 @@ describe('DsDynamicRelationGroupComponent test suite', () => {
         FormComponent,
         FormService,
         provideMockStore({ initialState }),
+        provideMockActions(() => new Observable<any>()),
         { provide: VocabularyService, useValue: vocabularyServiceStub },
         { provide: DsDynamicTypeBindRelationService, useClass: DsDynamicTypeBindRelationService },
         { provide: SubmissionObjectService, useValue: {} },
@@ -183,6 +186,11 @@ describe('DsDynamicRelationGroupComponent test suite', () => {
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     })
+      .overrideComponent(DsDynamicRelationGroupComponent, {
+        remove: {
+          imports: [FormComponent],
+        },
+      })
       .compileComponents();
 
   }));

src/app/shared/resource-policies/form/resource-policy-form.component.spec.ts

@@ -44,11 +44,15 @@ import {
 import { isNotEmptyOperator } from '@dspace/shared/utils/empty.util';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { DYNAMIC_FORM_CONTROL_MAP_FN } from '@ng-dynamic-forms/core';
+import { provideMockActions } from '@ngrx/effects/testing';
 import { provideMockStore } from '@ngrx/store/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { getTestScheduler } from 'jasmine-marbles';
 import { NgxMaskModule } from 'ngx-mask';
-import { of } from 'rxjs';
+import {
+  Observable,
+  of,
+} from 'rxjs';
 import { delay } from 'rxjs/operators';
 import { TestScheduler } from 'rxjs/testing';
 
@@ -237,6 +241,7 @@ describe('ResourcePolicyFormComponent test suite', () => {
         { provide: APP_DATA_SERVICES_MAP, useValue: {} },
         { provide: DYNAMIC_FORM_CONTROL_MAP_FN, useValue: dsDynamicFormControlMapFn },
         provideMockStore({}),
+        provideMockActions(() => new Observable<any>()),
         { provide: LiveRegionService, useValue: getLiveRegionServiceStub() },
       ],
       schemas: [

src/app/submission/sections/accesses/section-accesses.component.spec.ts

@@ -130,6 +130,11 @@ describe('SubmissionSectionAccessesComponent', () => {
           provideMockStore({}),
         ],
       })
+        .overrideComponent(SubmissionSectionAccessesComponent, {
+          remove: {
+            imports: [FormComponent],
+          },
+        })
         .compileComponents();
     });
 
@@ -229,6 +234,11 @@ describe('SubmissionSectionAccessesComponent', () => {
 
         ],
       })
+        .overrideComponent(SubmissionSectionAccessesComponent, {
+          remove: {
+            imports: [FormComponent],
+          },
+        })
         .compileComponents();
     });
 

src/app/submission/sections/license/section-license.component.spec.ts

@@ -40,10 +40,14 @@ import {
   DynamicFormControlEvent,
   DynamicFormControlEventType,
 } from '@ng-dynamic-forms/core';
+import { provideMockActions } from '@ngrx/effects/testing';
 import { provideMockStore } from '@ngrx/store/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { cold } from 'jasmine-marbles';
-import { of } from 'rxjs';
+import {
+  Observable,
+  of,
+} from 'rxjs';
 import { take } from 'rxjs/operators';
 
 import { environment } from '../../../../environments/environment.test';
@@ -182,6 +186,7 @@ describe('SubmissionSectionLicenseComponent test suite', () => {
         { provide: 'submissionIdProvider', useValue: submissionId },
         ChangeDetectorRef,
         provideMockStore({ initialState }),
+        provideMockActions(() => new Observable<any>()),
         FormBuilderService,
         { provide: DsDynamicTypeBindRelationService, useValue: getMockDsDynamicTypeBindRelationService() },
         { provide: APP_CONFIG, useValue: environment },