[ACS-8994] the upload new version button is not disabled when clicked and the uploading starts (#10391)

* [ACS-8994] Disable upload button when new version is uploading

* [ACS-8994] Disable upload button when new version is uploading

lib/content-services/src/lib/upload/components/upload-button.component.html

@@ -5,6 +5,7 @@
         <!--Single Files Upload-->
         <ng-container *ngIf="!multipleFiles">
             <input
+                class="adf-upload-button-file-container-upload-single-file"
                 id="upload-single-file"
                 data-automation-id="upload-single-file"
                 [type]="file ? 'button' : 'file'"

lib/content-services/src/lib/upload/components/upload-button.component.scss

@@ -24,4 +24,11 @@
             box-shadow: 0 5px 5px -3px #0003, 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
         }
     }
+
+    &-upload-button-file-container-upload-single-file[disabled] + &-upload-button-label {
+        background-color: var(--adf-disabled-button-background);
+        color: var(--adf-theme-foreground-disabled-text-color);
+        box-shadow: none;
+        cursor: default;
+    }
 }

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

@@ -22,6 +22,9 @@ import { ContentTestingModule } from '../testing/content.testing.module';
 import { Node } from '@alfresco/js-api';
 import { UploadService } from '../common/services/upload.service';
 import { ContentService } from '../common/services/content.service';
+import { Subject } from 'rxjs';
+import { FileUploadErrorEvent, FileUploadEvent, UploadVersionButtonComponent } from '@alfresco/adf-content-services';
+import { By } from '@angular/platform-browser';
 
 describe('VersionUploadComponent', () => {
     let component: VersionUploadComponent;
@@ -58,40 +61,12 @@ describe('VersionUploadComponent', () => {
         contentService = TestBed.inject(ContentService);
         spyOn(contentService, 'hasAllowableOperations').and.returnValue(true);
         component.node = node;
-
-        fixture.detectChanges();
     });
 
     afterEach(() => {
         fixture.destroy();
     });
 
-    it('should disabled upload button on upload starts', () => {
-        component.uploadStarted.subscribe(() => {
-            expect(component.disabled).toEqual(true);
-        });
-
-        uploadService.fileUploadStarting.next(undefined);
-    });
-
-    it('should enable upload button on error', () => {
-        spyOn(component, 'canUpload').and.returnValue(true);
-        component.error.subscribe(() => {
-            expect(component.disabled).toEqual(false);
-        });
-        component.onError({} as any);
-        fixture.detectChanges();
-    });
-
-    it('should enable upload button on success', () => {
-        spyOn(component, 'canUpload').and.returnValue(true);
-        component.success.subscribe(() => {
-            expect(component.disabled).toEqual(false);
-        });
-        component.onSuccess(true);
-        fixture.detectChanges();
-    });
-
     it('should update next major version', () => {
         let majorVersion = component.getNextMajorVersion('1.0');
         expect(majorVersion).toEqual('2.0');
@@ -105,4 +80,64 @@ describe('VersionUploadComponent', () => {
         minorVersion = component.getNextMinorVersion('1.10');
         expect(minorVersion).toEqual('1.11');
     });
+
+    describe('Upload version button', () => {
+        let uploadVersionButtonComponent: UploadVersionButtonComponent;
+        let upload$: Subject<FileUploadEvent>;
+        let uploadEvent: FileUploadEvent;
+
+        beforeEach(() => {
+            upload$ = new Subject<FileUploadEvent>();
+            uploadService.fileUploadStarting = upload$;
+            fixture.detectChanges();
+            uploadVersionButtonComponent = fixture.debugElement.query(By.directive(UploadVersionButtonComponent)).componentInstance;
+            uploadEvent = {
+                file: {
+                    name: 'some file'
+                }
+            } as FileUploadEvent;
+            spyOn(component.uploadStarted, 'emit');
+            upload$.next(uploadEvent);
+            fixture.detectChanges();
+        });
+
+        it('should be disabled when uploading', () => {
+            expect(uploadVersionButtonComponent.disabled).toBeTrue();
+        });
+
+        it('should be disabled when uploading is successful', () => {
+            uploadVersionButtonComponent.success.next({});
+            fixture.detectChanges();
+            expect(uploadVersionButtonComponent.disabled).toBeTrue();
+        });
+
+        it('should be enabled when uploading is failed', () => {
+            uploadVersionButtonComponent.error.next({} as FileUploadErrorEvent);
+            fixture.detectChanges();
+            expect(uploadVersionButtonComponent.disabled).toBeFalse();
+        });
+
+        it('should be emitted uploadStarted when started uploading', () => {
+            expect(component.uploadStarted.emit).toHaveBeenCalledWith(uploadEvent);
+        });
+
+        it('should be emitted success when uploading is successful', () => {
+            spyOn(component.success, 'emit');
+
+            uploadVersionButtonComponent.success.next({});
+            fixture.detectChanges();
+            expect(component.success.emit).toHaveBeenCalledWith({});
+        });
+
+        it('should be emitted error when uploading is failed', () => {
+            spyOn(component.error, 'emit');
+            const errorEvent = {
+                error: 'Some error'
+            } as FileUploadErrorEvent;
+
+            uploadVersionButtonComponent.error.next(errorEvent);
+            fixture.detectChanges();
+            expect(component.error.emit).toHaveBeenCalledWith(errorEvent);
+        });
+    });
 });

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

@@ -138,7 +138,6 @@ export class VersionUploadComponent implements OnInit, OnDestroy {
     }
 
     onSuccess(event: any) {
-        this.disabled = false;
         this.success.emit(event);
     }
 

lib/core/src/lib/styles/_components-variables.scss

@@ -89,6 +89,7 @@
         --adf-error-color: $adf-error-color,
         --adf-secondary-button-background: $adf-secondary-button-background,
         --adf-secondary-modal-text-color: $adf-secondary-modal-text-color,
+        --adf-disabled-button-background: $adf-disabled-button-background,
 
         --adf-display-external-property-widget-preview-selection-color: mat.get-color-from-palette($foreground, secondary-text)
     );

lib/core/src/lib/styles/_reference-variables.scss

@@ -28,3 +28,4 @@ $adf-ref-header-icon-border-radius: 50%;
 $adf-error-color: #ba1b1b;
 $adf-secondary-button-background: #2121210d;
 $adf-secondary-modal-text-color: #212121;
+$adf-disabled-button-background: rgba(0, 0, 0, 0.12);