AAE-24573 Refactoring upload button component to avoid unwanted page …

…refresh after click (#10008) * AAE-24573 Refactoring upload button component to avoid unwanted page refresh after click * AAE-24573 Code improvements * AAE-24573 Fixing unit test * AAE-24573 Fixing e2e * AAE-24573 Fixing e2e
Alfresco · Jul 29, 2024 · 548592b · 548592b
1 parent d1b6da9
commit 548592b
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 69 deletions.
diff --git a/e2e/core/pages/content-services.page.ts b/e2e/core/pages/content-services.page.ts
@@ -35,7 +35,7 @@ export class ContentServicesPage {
     uploadBorder = $('#document-list-container');
     currentFolder = $('div[class*="adf-breadcrumb-item adf-active"] div');
     createFolderButton = $('button[data-automation-id="create-new-folder"]');
-    uploadFileButton = $('.adf-upload-button-file-container button');
+    uploadFileButton = $('.adf-upload-button-file-container label');
     uploadFileButtonInput = $('input[data-automation-id="upload-single-file"]');
     uploadMultipleFileButton = $('input[data-automation-id="upload-multiple-files"]');
     uploadFolderButton = $('input[data-automation-id="uploadFolder"]');

diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
@@ -84,7 +84,7 @@ adf-content-node-selector {
         justify-content: space-between;
         color: var(--adf-theme-foreground-text-color);
 
-        button {
+        label {
             text-transform: uppercase;
             font-weight: normal;
         }

diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts
@@ -294,7 +294,7 @@ describe('ContentNodeSelectorComponent', () => {
             const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button'));
 
             expect(adfUploadButton).not.toBeNull();
-            expect(adfUploadButton.nativeElement.textContent).toEqual('file_uploadFORM.FIELD.UPLOAD');
+            expect(adfUploadButton.nativeElement.textContent).toEqual('file_upload FORM.FIELD.UPLOAD');
         });
 
         it('should be able to disable UploadButton if showingSearch set to true', async () => {
@@ -303,7 +303,7 @@ describe('ContentNodeSelectorComponent', () => {
             component.hasAllowableOperations = true;
 
             fixture.detectChanges();
-            const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button button'));
+            const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button input'));
 
             expect(adfUploadButton).not.toBeNull();
             expect(adfUploadButton.nativeElement.disabled).toBe(true);
@@ -315,7 +315,7 @@ describe('ContentNodeSelectorComponent', () => {
             component.hasAllowableOperations = true;
 
             fixture.detectChanges();
-            const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button button'));
+            const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button input'));
 
             expect(adfUploadButton).not.toBeNull();
             expect(adfUploadButton.nativeElement.disabled).toBe(false);
@@ -354,7 +354,7 @@ describe('ContentNodeSelectorComponent', () => {
             component.onTabSelectionChange(1);
 
             fixture.detectChanges();
-            const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button button'));
+            const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button input'));
 
             expect(adfUploadButton).not.toBeNull();
             expect(adfUploadButton.nativeElement.disabled).toBe(true);
@@ -365,7 +365,7 @@ describe('ContentNodeSelectorComponent', () => {
             component.hasAllowableOperations = true;
 
             fixture.detectChanges();
-            const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button button'));
+            const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button input'));
 
             expect(adfUploadButton).not.toBeNull();
             expect(adfUploadButton.nativeElement.disabled).toBe(false);

diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.module.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector.module.ts
@@ -26,9 +26,9 @@ import { SearchModule } from '../search/search.module';
 import { CoreModule } from '@alfresco/adf-core';
 import { DocumentListModule } from '../document-list/document-list.module';
 import { NameLocationCellComponent } from './name-location-cell/name-location-cell.component';
-import { UploadModule } from '../upload/upload.module';
+import { CONTENT_UPLOAD_DIRECTIVES } from '../upload/upload.module';
 import { SearchQueryBuilderService } from '../search/services/search-query-builder.service';
-import { ContentDirectiveModule } from '../directives/content-directive.module';
+import { CONTENT_DIRECTIVES } from '../directives/content-directive.module';
 import { DropdownSitesComponent } from './site-dropdown/sites-dropdown.component';
 
 @NgModule({
@@ -42,9 +42,9 @@ import { DropdownSitesComponent } from './site-dropdown/sites-dropdown.component
         ...BREADCRUMB_DIRECTIVES,
         SearchModule,
         DocumentListModule,
-        UploadModule,
-        ContentDirectiveModule,
-        NameLocationCellComponent
+        NameLocationCellComponent,
+        CONTENT_DIRECTIVES,
+        ...CONTENT_UPLOAD_DIRECTIVES
     ],
     exports: [ContentNodeSelectorPanelComponent, NameLocationCellComponent, ContentNodeSelectorComponent],
     declarations: [ContentNodeSelectorPanelComponent, ContentNodeSelectorComponent],

diff --git a/lib/content-services/src/lib/upload/components/upload-button.component.html b/lib/content-services/src/lib/upload/components/upload-button.component.html
@@ -3,16 +3,8 @@
     <div *ngIf="!uploadFolders">
 
         <!--Single Files Upload-->
-        <button *ngIf="!multipleFiles"
-            [disabled]="isButtonDisabled()"
-            mat-raised-button
-            (click)="uploadSingleFile.click()">
-            <mat-icon class="adf-upload-button-icon">file_upload</mat-icon>
-            <span id="upload-single-file-label"
-                *ngIf="!staticTitle">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
-            <span id="upload-single-file-label-static"
-                *ngIf="staticTitle">{{ staticTitle }}</span>
-            <input #uploadSingleFile
+        <ng-container *ngIf="!multipleFiles">
+            <input
                 id="upload-single-file"
                 data-automation-id="upload-single-file"
                 [type]="file ? 'button' : 'file'"
@@ -21,22 +13,19 @@
                 [attr.disabled]="isButtonDisabled()"
                 [title]="tooltip"
                 (change)="onFilesAdded($event)"
-                (click)="onClickUploadButton()">
-        </button>
+                (click)="onClickUploadButton()"/>
+            <label for="upload-single-file" class="adf-upload-button-label">
+                <mat-icon class="adf-upload-button-icon">file_upload</mat-icon>
+                <span id="upload-single-file-label" *ngIf="!staticTitle">
+                    {{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
+                <span id="upload-single-file-label-static" *ngIf="staticTitle">
+                    {{ staticTitle }}</span>
+            </label>
+        </ng-container>
 
         <!--Multiple Files Upload-->
-        <button *ngIf="multipleFiles"
-            [disabled]="isButtonDisabled()"
-            mat-raised-button
-            (click)="uploadMultipleFiles.click()">
-            <mat-icon>file_upload</mat-icon>
-
-            <span id="upload-multiple-file-label"
-                *ngIf="!staticTitle">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
-            <span
-                id="upload-multiple-file-label-static"
-                *ngIf="staticTitle">{{ staticTitle }}</span>
-            <input #uploadMultipleFiles
+        <ng-container *ngIf="multipleFiles">
+            <input
                 id="upload-multiple-files"
                 data-automation-id="upload-multiple-files"
                 type="file"
@@ -45,32 +34,36 @@
                 accept="{{acceptedFilesType}}"
                 [attr.disabled]="isButtonDisabled()"
                 [title]="tooltip"
-                (change)="onFilesAdded($event)">
-        </button>
+                (change)="onFilesAdded($event)"/>
+            <label for="upload-multiple-file" data-automation-id="upload-multiple-files" class="adf-upload-button-label">
+                <mat-icon class="adf-upload-button-icon">file_upload</mat-icon>
+                <span id="upload-multiple-file-label" *ngIf="!staticTitle">
+                    {{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
+                <span id="upload-multiple-file-label-static" *ngIf="staticTitle">
+                    {{ staticTitle }}</span>
+            </label>
+        </ng-container>
     </div>
 
     <!--Folders Upload-->
-    <div *ngIf="uploadFolders">
-        <button
-            [disabled]="isButtonDisabled()"
-            mat-raised-button
-            (click)="uploadFolders.click()">
-            <mat-icon>file_upload</mat-icon>
-            <span id="uploadFolder-label"
-                *ngIf="!staticTitle">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</span>
-            <span id="uploadFolder-label-static"
-                *ngIf="staticTitle">{{ staticTitle }}</span>
-            <input #uploadFolders
-                id="uploadFolder"
-                data-automation-id="uploadFolder"
-                type="file"
-                name="uploadFiles"
-                multiple="multiple"
-                accept="{{acceptedFilesType}}"
-                webkitdirectory directory
-                [attr.disabled]="isButtonDisabled()"
-                [title]="tooltip"
-                (change)="onDirectoryAdded($event)">
-        </button>
-    </div>
+    <ng-container *ngIf="uploadFolders">
+        <input
+            id="uploadFolder"
+            data-automation-id="uploadFolder"
+            type="file"
+            name="uploadFiles"
+            multiple="multiple"
+            accept="{{acceptedFilesType}}"
+            webkitdirectory directory
+            [attr.disabled]="isButtonDisabled()"
+            [title]="tooltip"
+            (change)="onDirectoryAdded($event)"/>
+        <label for="uploadFolder" data-automation-id="uploadFolder" class="adf-upload-button-label">
+            <mat-icon class="adf-upload-button-icon">file_upload</mat-icon>
+            <span id="uploadFolder-label" *ngIf="!staticTitle">
+                {{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</span>
+            <span id="uploadFolder-label-static" *ngIf="staticTitle">
+                {{ staticTitle }}</span>
+        </label>
+    </ng-container>
 </form>
diff --git a/lib/content-services/src/lib/upload/components/upload-button.component.scss b/lib/content-services/src/lib/upload/components/upload-button.component.scss
@@ -11,4 +11,17 @@
             display: none;
         }
     }
+
+    &-upload-button-label {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        padding: 8px 16px;
+        box-shadow: 0 3px 1px -2px #0003, 0 2px 2px rgba(0, 0, 0, 0.14), 0 1px 5px rgba(0, 0, 0, 0.12);
+        border-radius: 4px;
+
+        &:active {
+            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);
+        }
+    }
 }
diff --git a/lib/content-services/src/lib/upload/components/upload-button.component.spec.ts b/lib/content-services/src/lib/upload/components/upload-button.component.spec.ts
@@ -189,15 +189,15 @@ describe('UploadButtonComponent', () => {
         component.multipleFiles = false;
 
         fixture.detectChanges();
-        expect(compiled.querySelector('#upload-single-file-label-static').textContent).toEqual('test-text');
+        expect(compiled.querySelector('#upload-single-file-label-static').textContent.trim()).toEqual('test-text');
 
         component.multipleFiles = true;
         fixture.detectChanges();
-        expect(compiled.querySelector('#upload-multiple-file-label-static').textContent).toEqual('test-text');
+        expect(compiled.querySelector('#upload-multiple-file-label-static').textContent.trim()).toEqual('test-text');
 
         component.uploadFolders = true;
         fixture.detectChanges();
-        expect(compiled.querySelector('#uploadFolder-label-static').textContent).toEqual('test-text');
+        expect(compiled.querySelector('#uploadFolder-label-static').textContent.trim()).toEqual('test-text');
     });
 
     describe('fileSize', () => {

diff --git a/lib/process-services-cloud/src/lib/form/form-cloud.module.ts b/lib/process-services-cloud/src/lib/form/form-cloud.module.ts
@@ -23,7 +23,12 @@ import { MaterialModule } from '../material.module';
 import { FormCloudComponent } from './components/form-cloud.component';
 import { FormDefinitionSelectorCloudComponent } from './components/form-definition-selector-cloud.component';
 import { FormCustomOutcomesComponent } from './components/form-cloud-custom-outcomes.component';
-import { AlfrescoViewerModule, ContentMetadataModule, ContentNodeSelectorModule, UploadModule } from '@alfresco/adf-content-services';
+import {
+    AlfrescoViewerComponent,
+    CONTENT_METADATA_DIRECTIVES,
+    CONTENT_UPLOAD_DIRECTIVES,
+    ContentNodeSelectorModule
+} from '@alfresco/adf-content-services';
 
 import { DateCloudWidgetComponent } from './components/widgets/date/date-cloud.widget';
 import { DropdownCloudWidgetComponent } from './components/widgets/dropdown/dropdown-cloud.widget';
@@ -57,13 +62,13 @@ import { FormCloudSpinnerService } from './services/spinner/form-cloud-spinner.s
         ContentNodeSelectorModule,
         PeopleCloudModule,
         GroupCloudModule,
-        ContentMetadataModule,
-        UploadModule,
-        AlfrescoViewerModule,
         RichTextEditorModule,
         ToolbarModule,
         A11yModule,
-        FormatSpacePipe
+        FormatSpacePipe,
+        AlfrescoViewerComponent,
+        ...CONTENT_UPLOAD_DIRECTIVES,
+        ...CONTENT_METADATA_DIRECTIVES
     ],
     declarations: [
         FormCloudComponent,