Skip to content

Commit

Permalink
[ACA-4454] The create library button should get disabled after being …
Browse files Browse the repository at this point in the history 
…clicked once (#7046)
  • Loading branch information
@dhrn
dhrn committed May 24, 2021
1 parent a5c8586 commit 4c1e462
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 44 deletions.
2 changes: 1 addition & 1 deletion lib/content-services/src/lib/dialogs/library/library.dialog.html
View file
Expand Up @@ -87,7 +87,7 @@ <h2 mat-dialog-title>{{ createTitle | translate }}</h2>
color="primary"
mat-button
(click)="submit()"
[disabled]="!form.valid"
[disabled]="!form.valid || disableCreateButton"
data-automation-id="create-library-id"
>
{{ 'LIBRARY.DIALOG.CREATE' | translate }}
Expand Down
79 changes: 46 additions & 33 deletions lib/content-services/src/lib/dialogs/library/library.dialog.spec.ts
View file
Expand Up @@ -16,16 +16,19 @@
*/

import { LibraryDialogComponent } from './library.dialog';
import { TestBed, fakeAsync, tick, flush } from '@angular/core/testing';
import { TestBed, fakeAsync, tick, flush, ComponentFixture, flushMicrotasks } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { AlfrescoApiService, setupTestBed } from '@alfresco/adf-core';
import { AlfrescoApiService, setupTestBed, SitesService } from '@alfresco/adf-core';
import { ContentTestingModule } from '../../testing/content.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { of, throwError } from 'rxjs';
import { delay } from 'rxjs/operators';

describe('LibraryDialogComponent', () => {
let fixture;
let component;
let fixture: ComponentFixture<LibraryDialogComponent>;
let component: LibraryDialogComponent;
let sitesService: SitesService;
let alfrescoApi;
let findSitesSpy;
const findSitesResponse = { list: { entries: [] } };
Expand All @@ -48,6 +51,7 @@ describe('LibraryDialogComponent', () => {
fixture = TestBed.createComponent(LibraryDialogComponent);
component = fixture.componentInstance;
alfrescoApi = TestBed.inject(AlfrescoApiService);
sitesService = TestBed.inject(SitesService);
findSitesSpy = spyOn(alfrescoApi.getInstance().core.queriesApi, 'findSites');
});

Expand All @@ -57,8 +61,8 @@ describe('LibraryDialogComponent', () => {

it('should set library id automatically on title input', fakeAsync(() => {
findSitesSpy.and.returnValue(Promise.resolve(findSitesResponse));
spyOn(alfrescoApi.sitesApi, 'getSite').and.callFake(() => {
return Promise.reject();
spyOn(sitesService, 'getSite').and.callFake(() => {
return throwError('error');
});

fixture.detectChanges();
Expand All @@ -72,8 +76,8 @@ describe('LibraryDialogComponent', () => {

it('should translate library title space character to dash for library id', fakeAsync(() => {
findSitesSpy.and.returnValue(Promise.resolve(findSitesResponse));
spyOn(alfrescoApi.sitesApi, 'getSite').and.callFake(() => {
return Promise.reject();
spyOn(sitesService, 'getSite').and.callFake(() => {
return throwError('error');
});

fixture.detectChanges();
Expand All @@ -87,8 +91,8 @@ describe('LibraryDialogComponent', () => {

it('should not change custom library id on title input', fakeAsync(() => {
findSitesSpy.and.returnValue(Promise.resolve(findSitesResponse));
spyOn(alfrescoApi.sitesApi, 'getSite').and.callFake(() => {
return Promise.reject();
spyOn(sitesService, 'getSite').and.callFake(() => {
return throwError('error');
});

fixture.detectChanges();
Expand All @@ -107,7 +111,7 @@ describe('LibraryDialogComponent', () => {
}));

it('should invalidate form when library id already exists', fakeAsync(() => {
spyOn(alfrescoApi.sitesApi, 'getSite').and.returnValue(Promise.resolve());
spyOn(sitesService, 'getSite').and.returnValue(of(null));

fixture.detectChanges();
component.form.controls.id.setValue('existingLibrary');
Expand All @@ -123,11 +127,11 @@ describe('LibraryDialogComponent', () => {

it('should create site when form is valid', fakeAsync(() => {
findSitesSpy.and.returnValue(Promise.resolve(findSitesResponse));
spyOn(alfrescoApi.sitesApi, 'createSite').and.returnValue(
Promise.resolve()
spyOn(sitesService, 'createSite').and.returnValue(
of({entry: {id: 'fake-id'}}).pipe(delay(100))
);
spyOn(alfrescoApi.sitesApi, 'getSite').and.callFake(() => {
return Promise.reject();
spyOn(sitesService, 'getSite').and.callFake(() => {
return throwError('error');
});

fixture.detectChanges();
Expand All @@ -138,9 +142,18 @@ describe('LibraryDialogComponent', () => {

component.submit();
fixture.detectChanges();
flush();
const confirmButton = fixture.nativeElement.querySelector(`[data-automation-id="create-library-id"]`);
expect(component.disableCreateButton).toBe(true);
expect(confirmButton.disabled).toBe(true);

tick(500);
flushMicrotasks();
fixture.detectChanges();

expect(confirmButton.disabled).toBe(false);
expect(component.disableCreateButton).toBe(false);

expect(alfrescoApi.sitesApi.createSite).toHaveBeenCalledWith({
expect(sitesService.createSite).toHaveBeenCalledWith({
id: 'library-title',
title: 'library title',
description: '',
Expand All @@ -150,10 +163,10 @@ describe('LibraryDialogComponent', () => {

it('should not create site when form is invalid', fakeAsync(() => {
findSitesSpy.and.returnValue(Promise.resolve(findSitesResponse));
spyOn(alfrescoApi.sitesApi, 'createSite').and.returnValue(
spyOn(sitesService, 'createSite').and.returnValue(
Promise.resolve({})
);
spyOn(alfrescoApi.sitesApi, 'getSite').and.returnValue(Promise.resolve());
spyOn(sitesService, 'getSite').and.returnValue(of(null));

fixture.detectChanges();
component.form.controls.title.setValue('existingLibrary');
Expand All @@ -165,11 +178,11 @@ describe('LibraryDialogComponent', () => {
fixture.detectChanges();
flush();

expect(alfrescoApi.sitesApi.createSite).not.toHaveBeenCalled();
expect(sitesService.createSite).not.toHaveBeenCalled();
}));

it('should notify when library title is already used', fakeAsync(() => {
spyOn(alfrescoApi.sitesApi, 'getSite').and.returnValue(Promise.resolve());
spyOn(sitesService, 'getSite').and.returnValue(of(null));
findSitesSpy.and.returnValue(Promise.resolve(
{ list: { entries: [{ entry: { title: 'TEST', id: 'library-id' } }] } }
));
Expand All @@ -186,11 +199,11 @@ describe('LibraryDialogComponent', () => {
it('should notify on 409 conflict error (might be in trash)', fakeAsync(() => {
findSitesSpy.and.returnValue(Promise.resolve(findSitesResponse));
const error = { message: '{ "error": { "statusCode": 409 } }' };
spyOn(alfrescoApi.sitesApi, 'createSite').and.callFake(() => {
return Promise.reject(error);
spyOn(sitesService, 'createSite').and.callFake(() => {
return throwError(error);
});
spyOn(alfrescoApi.sitesApi, 'getSite').and.callFake(() => {
return Promise.reject();
spyOn(sitesService, 'getSite').and.callFake(() => {
return throwError('error');
});

fixture.detectChanges();
Expand All @@ -210,8 +223,8 @@ describe('LibraryDialogComponent', () => {

it('should not translate library title if value is not a valid id', fakeAsync(() => {
findSitesSpy.and.returnValue(Promise.resolve(findSitesResponse));
spyOn(alfrescoApi.sitesApi, 'getSite').and.callFake(() => {
return Promise.reject();
spyOn(sitesService, 'getSite').and.callFake(() => {
return throwError('error');
});

fixture.detectChanges();
Expand All @@ -225,8 +238,8 @@ describe('LibraryDialogComponent', () => {

it('should translate library title partially for library id', fakeAsync(() => {
findSitesSpy.and.returnValue(Promise.resolve(findSitesResponse));
spyOn(alfrescoApi.sitesApi, 'getSite').and.callFake(() => {
return Promise.reject();
spyOn(sitesService, 'getSite').and.callFake(() => {
return throwError('error');
});

fixture.detectChanges();
Expand All @@ -240,8 +253,8 @@ describe('LibraryDialogComponent', () => {

it('should translate library title multiple space character to one dash for library id', fakeAsync(() => {
findSitesSpy.and.returnValue(Promise.resolve(findSitesResponse));
spyOn(alfrescoApi.sitesApi, 'getSite').and.callFake(() => {
return Promise.reject();
spyOn(sitesService, 'getSite').and.callFake(() => {
return throwError('error');
});

fixture.detectChanges();
Expand All @@ -255,8 +268,8 @@ describe('LibraryDialogComponent', () => {

it('should invalidate library title if is too short', fakeAsync(() => {
findSitesSpy.and.returnValue(Promise.resolve(findSitesResponse));
spyOn(alfrescoApi.sitesApi, 'getSite').and.callFake(() => {
return Promise.reject();
spyOn(sitesService, 'getSite').and.callFake(() => {
return throwError('error');
});

fixture.detectChanges();
Expand Down
19 changes: 10 additions & 9 deletions lib/content-services/src/lib/dialogs/library/library.dialog.ts
View file
Expand Up @@ -15,7 +15,7 @@
* limitations under the License.
*/

import { Observable, Subject, from } from 'rxjs';
import { Observable, Subject } from 'rxjs';
import {
Component,
OnInit,
Expand All @@ -33,8 +33,8 @@ import {
} from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
import { SiteBodyCreate, SiteEntry, SitePaging } from '@alfresco/js-api';
import { AlfrescoApiService } from '@alfresco/adf-core';
import { debounceTime, mergeMap, takeUntil } from 'rxjs/operators';
import { AlfrescoApiService, SitesService } from '@alfresco/adf-core';
import { debounceTime, finalize, mergeMap, takeUntil } from 'rxjs/operators';

@Component({
selector: 'adf-library-dialog',
Expand Down Expand Up @@ -70,9 +70,11 @@ export class LibraryDialogComponent implements OnInit, OnDestroy {
disabled: false
}
];
disableCreateButton = false;

constructor(
private alfrescoApiService: AlfrescoApiService,
private sitesService: SitesService,
private formBuilder: FormBuilder,
private dialog: MatDialogRef<LibraryDialogComponent>
) {}
Expand Down Expand Up @@ -152,7 +154,8 @@ export class LibraryDialogComponent implements OnInit, OnDestroy {
return;
}

this.create().subscribe(
this.disableCreateButton = true;
this.create().pipe(finalize(() => this.disableCreateButton = false)).subscribe(
(node: SiteEntry) => {
this.success.emit(node);
dialog.close(node);
Expand All @@ -174,7 +177,7 @@ export class LibraryDialogComponent implements OnInit, OnDestroy {
visibility
};

return from(this.alfrescoApiService.sitesApi.createSite(siteBody));
return this.sitesService.createSite(siteBody);
}

private sanitize(input: string) {
Expand Down Expand Up @@ -219,7 +222,7 @@ export class LibraryDialogComponent implements OnInit, OnDestroy {
}
}

private async findLibraryByTitle(libraryTitle: string): Promise<SitePaging> {
private findLibraryByTitle(libraryTitle: string): Promise<SitePaging> {
return this.alfrescoApiService
.getInstance()
.core.queriesApi.findSites(libraryTitle, {
Expand Down Expand Up @@ -267,9 +270,7 @@ export class LibraryDialogComponent implements OnInit, OnDestroy {

return new Promise((resolve) => {
timer = setTimeout(() => {
return from(
this.alfrescoApiService.sitesApi.getSite(control.value)
).subscribe(
return this.sitesService.getSite(control.value).subscribe(
() => resolve({ message: 'LIBRARY.ERRORS.EXISTENT_SITE' }),
() => resolve(null)
);
Expand Down
17 changes: 16 additions & 1 deletion lib/core/services/sites.service.ts
View file
Expand Up @@ -20,7 +20,10 @@ import { from, Observable, throwError } from 'rxjs';
import { AlfrescoApiService } from './alfresco-api.service';
import {
MinimalNode,
SiteEntry, SiteGroupEntry, SiteGroupPaging,
SiteBodyCreate,
SiteEntry,
SiteGroupEntry,
SiteGroupPaging,
SiteMemberEntry,
SiteMemberPaging,
SiteMembershipBodyCreate,
Expand All @@ -42,6 +45,18 @@ export class SitesService {
this.sitesApi = new SitesApi(apiService.getInstance());
}

/**
* Create a site
* @param siteBody SiteBodyCreate to create site
* @returns site SiteEntry
*/
createSite(siteBody: SiteBodyCreate): Observable<SiteEntry> {
return from(this.sitesApi.createSite(siteBody))
.pipe(
catchError((err: any) => this.handleError(err))
);
}

/**
* Gets a list of all sites in the repository.
* @param opts Options supported by JS-API
Expand Down

0 comments on commit 4c1e462

Please sign in to comment.