[ACS-6842] [ACA] Clicking "Create" button multiple times in folder creation modal sends the same folder creation request multiple times (#9554)

* ACS-6842 add disable mode to submit button

* ACS-6842 refactor ts and spec files

* ACS-6842 add setFormValues function

---------

Co-authored-by: DaryaBalvanovich <darya.balvanovich1@hyland.com>

lib/content-services/src/lib/dialogs/folder.dialog.html

@@ -63,7 +63,7 @@
             id="adf-folder-create-button"
             mat-button
             (click)="submit()"
-            [disabled]="!form.valid">
+            [disabled]="!form.valid || disableSubmitButton">
         {{
         (editing
         ? 'CORE.FOLDER_DIALOG.UPDATE_BUTTON.LABEL'

lib/content-services/src/lib/dialogs/folder.dialog.spec.ts

@@ -20,7 +20,7 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { NodesApiService } from '../common/services/nodes-api.service';
 
 import { FolderDialogComponent } from './folder.dialog';
-import { of, throwError } from 'rxjs';
+import { BehaviorSubject, throwError } from 'rxjs';
 import { ContentTestingModule } from '../testing/content.testing.module';
 import { By } from '@angular/platform-browser';
 
@@ -28,9 +28,16 @@ describe('FolderDialogComponent', () => {
     let fixture: ComponentFixture<FolderDialogComponent>;
     let component: FolderDialogComponent;
     let nodesApi: NodesApiService;
+
+    let submitButton: HTMLButtonElement;
     const dialogRef = {
         close: jasmine.createSpy('close')
     };
+    let updateNodeSpy: jasmine.Spy;
+    let createFolderSpy: jasmine.Spy;
+
+    const updateNode$ = new BehaviorSubject(null);
+    const createFolderNode$ = new BehaviorSubject(null);
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -41,6 +48,10 @@ describe('FolderDialogComponent', () => {
         fixture = TestBed.createComponent(FolderDialogComponent);
         component = fixture.componentInstance;
         nodesApi = TestBed.inject(NodesApiService);
+
+        createFolderSpy = spyOn(nodesApi, 'createFolder').and.returnValue(createFolderNode$);
+        updateNodeSpy = spyOn(nodesApi, 'updateNode').and.returnValue(updateNode$);
+        submitButton = fixture.nativeElement.querySelector('#adf-folder-create-button');
     });
 
     afterEach(() => {
@@ -77,9 +88,7 @@ describe('FolderDialogComponent', () => {
         });
 
         it('should update form input', () => {
-            component.form.controls['name'].setValue('folder-name-update');
+            setFormValues();
-            component.form.controls['title'].setValue('folder-title-update');
-            component.form.controls['description'].setValue('folder-description-update');
 
             expect(component.name).toBe('folder-name-update');
             expect(component.title).toBe('folder-title-update');
@@ -87,14 +96,17 @@ describe('FolderDialogComponent', () => {
         });
 
         it('should submit updated values if form is valid', () => {
-            spyOn(nodesApi, 'updateNode').and.returnValue(of(null));
+            updateNode$.next(null);
 
-            component.form.controls['name'].setValue('folder-name-update');
+            setFormValues();
-            component.form.controls['title'].setValue('folder-title-update');
-            component.form.controls['description'].setValue('folder-description-update');
 
-            component.submit();
+            fixture.detectChanges();
+            submitButton.click();
+            fixture.detectChanges();
 
+            expect(component.form.valid).toBeTrue();
+            expect(submitButton.disabled).toBeTrue();
+            expect(component.disableSubmitButton).toBeTrue();
             expect(nodesApi.updateNode).toHaveBeenCalledWith('node-id', {
                 name: 'folder-name-update',
                 properties: {
@@ -104,24 +116,35 @@ describe('FolderDialogComponent', () => {
             });
         });
 
-        it('should call dialog to close with form data when submit is successfully', () => {
+        it('should not submit if form is invalid', () => {
-            const folder: any = {
+            component.form.controls['name'].setValue('');
-                data: 'folder-data'
+            component.form.controls['description'].setValue('');
-            };
 
-            spyOn(nodesApi, 'updateNode').and.returnValue(of(folder));
+            fixture.detectChanges();
+            submitButton.click();
+            fixture.detectChanges();
 
+            expect(submitButton.disabled).toBeTrue();
+            expect(component.form.valid).toBeFalse();
+            expect(updateNodeSpy).not.toHaveBeenCalled();
+        });
+
+        describe('when submit is successfully', () => {
+            const folder: any = { data: 'folder-data' };
+
+            beforeAll(() => {
+                updateNode$.next(folder);
+            });
+
+            it('should call dialog to close with form data', () => {
                 component.submit();
 
                 expect(dialogRef.close).toHaveBeenCalledWith(folder);
             });
 
-        it('should emit success output event with folder when submit is successful', async () => {
+            it('should emit success output event with folder', async () => {
-            const folder: any = { data: 'folder-data' };
                 let expectedNode = null;
 
-            spyOn(nodesApi, 'updateNode').and.returnValue(of(folder));
-
                 component.success.subscribe((node) => {
                     expectedNode = node;
                 });
@@ -132,21 +155,10 @@ describe('FolderDialogComponent', () => {
 
                 expect(expectedNode).toBe(folder);
             });
-
-        it('should not submit if form is invalid', () => {
-            spyOn(nodesApi, 'updateNode');
-
-            component.form.controls['name'].setValue('');
-            component.form.controls['description'].setValue('');
-
-            component.submit();
-
-            expect(component.form.valid).toBe(false);
-            expect(nodesApi.updateNode).not.toHaveBeenCalled();
         });
 
         it('should not call dialog to close if submit fails', () => {
-            spyOn(nodesApi, 'updateNode').and.returnValue(throwError('error'));
+            updateNode$.error(throwError('error'));
             spyOn(component, 'handleError').and.callFake((val) => val);
 
             component.submit();
@@ -177,23 +189,23 @@ describe('FolderDialogComponent', () => {
         });
 
         it('should update form input', () => {
-            component.form.controls['name'].setValue('folder-name-update');
+            setFormValues();
-            component.form.controls['description'].setValue('folder-description-update');
 
             expect(component.name).toBe('folder-name-update');
             expect(component.description).toBe('folder-description-update');
         });
 
-        it('should submit updated values if form is valid', () => {
+        describe('when form is valid', () => {
-            spyOn(nodesApi, 'createFolder').and.returnValue(of(null));
+            beforeEach(() => {
-
+                createFolderNode$.next(null);
-            component.form.controls['name'].setValue('folder-name-update');
+                setFormValues();
-            component.form.controls['title'].setValue('folder-title-update');
+            });
-            component.form.controls['description'].setValue('folder-description-update');
 
+            it('should submit updated values', () => {
                 component.submit();
 
-            expect(nodesApi.createFolder).toHaveBeenCalledWith('parentNodeId', {
+                expect(component.disableSubmitButton).toBeTrue();
+                expect(createFolderSpy).toHaveBeenCalledWith('parentNodeId', {
                     name: 'folder-name-update',
                     properties: {
                         'cm:title': 'folder-title-update',
@@ -203,17 +215,17 @@ describe('FolderDialogComponent', () => {
                 });
             });
 
-        it('should submit updated values if form is valid (with custom nodeType)', () => {
+            it('should submit updated values (with custom nodeType)', () => {
-            spyOn(nodesApi, 'createFolder').and.returnValue(of(null));
-
-            component.form.controls['name'].setValue('folder-name-update');
-            component.form.controls['title'].setValue('folder-title-update');
-            component.form.controls['description'].setValue('folder-description-update');
                 component.nodeType = 'cm:sushi';
 
-            component.submit();
+                fixture.detectChanges();
+                submitButton.click();
+                fixture.detectChanges();
 
-            expect(nodesApi.createFolder).toHaveBeenCalledWith('parentNodeId', {
+                expect(component.form.valid).toBeTrue();
+                expect(submitButton.disabled).toBeTrue();
+                expect(component.disableSubmitButton).toBeTrue();
+                expect(createFolderSpy).toHaveBeenCalledWith('parentNodeId', {
                     name: 'folder-name-update',
                     properties: {
                         'cm:title': 'folder-title-update',
@@ -222,17 +234,16 @@ describe('FolderDialogComponent', () => {
                     nodeType: 'cm:sushi'
                 });
             });
+        });
 
         it('should call dialog to close with form data when submit is successfully', () => {
             const folder: any = {
                 data: 'folder-data'
             };
 
-            component.form.controls['name'].setValue('name');
+            setFormValues();
-            component.form.controls['title'].setValue('title');
-            component.form.controls['description'].setValue('description');
 
-            spyOn(nodesApi, 'createFolder').and.returnValue(of(folder));
+            createFolderNode$.next(folder);
 
             component.submit();
 
@@ -240,19 +251,16 @@ describe('FolderDialogComponent', () => {
         });
 
         it('should not submit if form is invalid', () => {
-            spyOn(nodesApi, 'createFolder');
-
             component.form.controls['name'].setValue('');
             component.form.controls['description'].setValue('');
 
-            component.submit();
+            expect(submitButton.disabled).toBeTrue();
-
+            expect(component.form.valid).toBeFalse();
-            expect(component.form.valid).toBe(false);
+            expect(createFolderSpy).not.toHaveBeenCalled();
-            expect(nodesApi.createFolder).not.toHaveBeenCalled();
         });
 
         it('should not call dialog to close if submit fails', () => {
-            spyOn(nodesApi, 'createFolder').and.returnValue(throwError('error'));
+            createFolderNode$.error(throwError('error'));
             spyOn(component, 'handleError').and.callFake((val) => val);
 
             component.form.controls['name'].setValue('name');
@@ -264,19 +272,22 @@ describe('FolderDialogComponent', () => {
             expect(dialogRef.close).not.toHaveBeenCalled();
         });
 
-        describe('Error events ', () => {
+        describe('Error events', () => {
+            afterEach(() => {
+                createFolderNode$.next(null);
+            });
+
             it('should raise error for 409', (done) => {
                 const error = {
                     message: '{ "error": {  "statusCode" : 409 } }'
                 };
+                createFolderNode$.error(error);
 
                 component.error.subscribe((message) => {
                     expect(message).toBe('CORE.MESSAGES.ERRORS.EXISTENT_FOLDER');
                     done();
                 });
 
-                spyOn(nodesApi, 'createFolder').and.returnValue(throwError(error));
-
                 component.form.controls['name'].setValue('name');
                 component.form.controls['description'].setValue('description');
 
@@ -287,14 +298,13 @@ describe('FolderDialogComponent', () => {
                 const error = {
                     message: '{ "error": {  "statusCode" : 123 } }'
                 };
+                createFolderNode$.error(error);
 
                 component.error.subscribe((message) => {
                     expect(message).toBe('CORE.MESSAGES.ERRORS.GENERIC');
                     done();
                 });
 
-                spyOn(nodesApi, 'createFolder').and.returnValue(throwError(error));
-
                 component.form.controls['name'].setValue('name');
                 component.form.controls['description'].setValue('description');
 
@@ -302,4 +312,13 @@ describe('FolderDialogComponent', () => {
             });
         });
     });
+
+    /**
+     * Set mock values to form
+     */
+    function setFormValues() {
+        component.form.controls['name'].setValue('folder-name-update');
+        component.form.controls['title'].setValue('folder-title-update');
+        component.form.controls['description'].setValue('folder-description-update');
+    }
 });

lib/content-services/src/lib/dialogs/folder.dialog.ts

@@ -34,11 +34,6 @@ import { forbidEndingDot, forbidOnlySpaces, forbidSpecialCharacters } from './fo
     encapsulation: ViewEncapsulation.None
 })
 export class FolderDialogComponent implements OnInit {
-
-    form: UntypedFormGroup;
-
-    folder: Node = null;
-
     /**
      * Emitted when the edit/create folder give error for example a folder with same name already exist
      */
@@ -49,12 +44,40 @@ export class FolderDialogComponent implements OnInit {
      * Emitted when the edit/create folder is successfully created/modified
      */
     @Output()
-    success: EventEmitter<any> = new EventEmitter<Node>();
+    success: EventEmitter<Node> = new EventEmitter<Node>();
+
+    form: UntypedFormGroup;
+    folder: Node = null;
 
     editTitle = 'CORE.FOLDER_DIALOG.EDIT_FOLDER_TITLE';
     createTitle = 'CORE.FOLDER_DIALOG.CREATE_FOLDER_TITLE';
     nodeType = 'cm:folder';
 
+    disableSubmitButton = false;
+
+    get editing(): boolean {
+        return !!this.data.folder;
+    }
+
+    get name(): string {
+        return this.getTrimmedValue(this.form.value.name);
+    }
+
+    get title(): string {
+        return this.getTrimmedValue(this.form.value.title);
+    }
+
+    get description(): string {
+        return this.getTrimmedValue(this.form.value.description);
+    }
+
+    private get properties(): { [key: string]: string } {
+        return {
+            'cm:title': this.title,
+            'cm:description': this.description
+        };
+    }
+
     constructor(
         private formBuilder: UntypedFormBuilder,
         private dialog: MatDialogRef<FolderDialogComponent>,
@@ -71,10 +94,6 @@ export class FolderDialogComponent implements OnInit {
         }
     }
 
-    get editing(): boolean {
-        return !!this.data.folder;
-    }
-
     ngOnInit() {
         const { folder } = this.data;
         let name = '';
@@ -90,70 +109,23 @@ export class FolderDialogComponent implements OnInit {
         }
 
         const validators = {
-            name: [
+            name: [Validators.required, forbidSpecialCharacters, forbidEndingDot, forbidOnlySpaces]
-                Validators.required,
-                forbidSpecialCharacters,
-                forbidEndingDot,
-                forbidOnlySpaces
-            ]
         };
 
         this.form = this.formBuilder.group({
-            name: [ name, validators.name ],
+            name: [name, validators.name],
-            title: [ title ],
+            title: [title],
-            description: [ description ]
+            description: [description]
         });
     }
 
-    get name(): string {
-        const { name } = this.form.value;
-
-        return (name || '').trim();
-    }
-
-    get title(): string {
-        const { title } = this.form.value;
-
-        return (title || '').trim();
-    }
-
-    get description(): string {
-        const { description } = this.form.value;
-
-        return (description || '').trim();
-    }
-
-    private get properties(): any {
-        const { title, description } = this;
-
-        return {
-            'cm:title': title,
-            'cm:description': description
-        };
-    }
-
-    private create(): Observable<Node> {
-        const { name, properties, nodeType, nodesApi, data: { parentNodeId} } = this;
-        return nodesApi.createFolder(parentNodeId, { name, properties, nodeType });
-    }
-
-    private edit(): Observable<Node> {
-        const { name, properties, nodesApi, data: { folder: { id: nodeId }} } = this;
-        return nodesApi.updateNode(nodeId, { name, properties });
-    }
-
     submit() {
-        const { form, dialog, editing } = this;
+        this.disableSubmitButton = true;
 
-        if (!form.valid) {
+        (this.editing ? this.edit() : this.create()).subscribe(
-            return;
-        }
-
-        (editing ? this.edit() : this.create())
-            .subscribe(
             (folder: Node) => {
                 this.success.emit(folder);
-                    dialog.close(folder);
+                this.dialog.close(folder);
             },
             (error) => this.handleError(error)
         );
@@ -163,15 +135,35 @@ export class FolderDialogComponent implements OnInit {
         let errorMessage = 'CORE.MESSAGES.ERRORS.GENERIC';
 
         try {
-            const { error: { statusCode } } = JSON.parse(error.message);
+            const {
+                error: { statusCode }
+            } = JSON.parse(error.message);
 
             if (statusCode === 409) {
                 errorMessage = 'CORE.MESSAGES.ERRORS.EXISTENT_FOLDER';
             }
-        } catch (err) { /* Do nothing, keep the original message */ }
+        } catch (err) {
+            /* Do nothing, keep the original message */
+        }
 
         this.error.emit(this.translation.instant(errorMessage));
 
         return error;
     }
+
+    private create(): Observable<Node> {
+        const parentNodeId = this.data.parentNodeId;
+
+        return this.nodesApi.createFolder(parentNodeId, { name: this.name, properties: this.properties, nodeType: this.nodeType });
+    }
+
+    private edit(): Observable<Node> {
+        const nodeId = this.data.folder.id;
+
+        return this.nodesApi.updateNode(nodeId, { name: this.name, properties: this.properties });
+    }
+
+    private getTrimmedValue(value: string): string {
+        return (value || '').trim();
+    }
 }