[ACA-4325] - disable upload button on upload new file version begin (#7017)

* [ACA-4325] - disable upload button on upload version begin

* Update upload-base.spec.ts

* disable upload button only on version upload component

* PR changes

* change to started

Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>

lib/content-services/src/lib/version-manager/version-upload.component.spec.ts

@@ -0,0 +1,96 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { VersionUploadComponent } from 'content-services';
+import { ContentService, setupTestBed, UploadService } from '@alfresco/adf-core';
+import { ContentTestingModule } from '../testing/content.testing.module';
+import { Node } from '@alfresco/js-api';
+
+describe('VersionUploadComponent', () => {
+    let component: VersionUploadComponent;
+    let fixture: ComponentFixture<VersionUploadComponent>;
+    let uploadService: UploadService;
+    let contentService: ContentService;
+
+    const node: Node = new Node({
+        id: '1234',
+        name: 'TEST-NODE',
+        isFile: true,
+        nodeType: 'FAKE',
+        isFolder: false,
+        modifiedAt: new Date(),
+        modifiedByUser: null,
+        createdAt: new Date(),
+        createdByUser: null,
+        content: {
+            mimeType: 'text/html',
+            mimeTypeName: 'HTML',
+            sizeInBytes: 13
+        }
+    });
+
+    setupTestBed({
+        imports: [
+            TranslateModule.forRoot(),
+            ContentTestingModule
+        ],
+        providers: [UploadService],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(VersionUploadComponent);
+        component = fixture.componentInstance;
+        uploadService = TestBed.inject(UploadService);
+        contentService = TestBed.inject(ContentService);
+        spyOn(contentService, 'hasAllowableOperations').and.returnValue(true);
+        component.node = node;
+    });
+
+    it('should disabled upload button on upload starts',  fakeAsync(() => {
+        component.uploadStarted.subscribe(() => {
+            expect(component.disabled).toEqual(true);
+        });
+        uploadService.fileUploadStarting.next();
+        tick(500);
+        fixture.detectChanges();
+    }));
+
+    it('should enable upload button on error', (done) => {
+        spyOn(component, 'canUpload').and.returnValue(true);
+        component.error.subscribe(() => {
+            expect(component.disabled).toEqual(false);
+            done();
+        });
+        component.onError(true);
+        fixture.detectChanges();
+    });
+
+    it('should enable upload button on success', (done) => {
+        spyOn(component, 'canUpload').and.returnValue(true);
+        component.success.subscribe(() => {
+            expect(component.disabled).toEqual(false);
+            done();
+        });
+        component.onSuccess(true);
+        fixture.detectChanges();
+    });
+
+});

lib/content-services/src/lib/version-manager/version-upload.component.ts

@@ -15,9 +15,11 @@
  * limitations under the License.
  */
 
-import { Component, Input, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
+import { Component, Input, ViewEncapsulation, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
 import { Node } from '@alfresco/js-api';
-import { ContentService } from '@alfresco/adf-core';
+import { ContentService, FileUploadEvent, UploadService } from '@alfresco/adf-core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'adf-version-upload',
@@ -26,11 +28,13 @@ import { ContentService } from '@alfresco/adf-core';
     encapsulation: ViewEncapsulation.None,
     host: { 'class': 'adf-version-upload' }
 })
-export class VersionUploadComponent {
+export class VersionUploadComponent implements OnInit, OnDestroy {
 
     semanticVersion: string = 'minor';
     comment: string;
     uploadVersion: boolean = false;
+    disabled: boolean = false;
+    onDestroy$ = new Subject();
 
     /** The target node. */
     @Input()
@@ -68,11 +72,24 @@ export class VersionUploadComponent {
     @Output()
     commentChanged = new EventEmitter<string>();
 
-    constructor(private contentService: ContentService) {
+    /** Emitted when the upload starts */
+    @Output()
+    uploadStarted = new EventEmitter<FileUploadEvent>();
+
+    constructor(private contentService: ContentService, private uploadService: UploadService) {
+    }
+
+    ngOnInit() {
+        this.uploadService.fileUploadStarting
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((event: FileUploadEvent) => {
+                this.disabled = true;
+                this.uploadStarted.emit(event);
+            });
     }
 
     canUpload(): boolean {
-        return this.contentService.hasAllowableOperations(this.node, 'update');
+        return this.contentService.hasAllowableOperations(this.node, 'update') && !this.disabled;
     }
 
     isMajorVersion(): boolean {
@@ -80,6 +97,7 @@ export class VersionUploadComponent {
     }
 
     cancelUpload() {
+        this.disabled = false;
         this.cancel.emit();
     }
 
@@ -92,11 +110,18 @@ export class VersionUploadComponent {
     }
 
     onSuccess(event: any) {
+        this.disabled = false;
         this.success.emit(event);
     }
 
     onError(event: any) {
+        this.disabled = false;
         this.error.emit(event);
     }
 
+    ngOnDestroy() {
+        this.onDestroy$.next();
+        this.onDestroy$.complete();
+    }
+
 }