[AAE-4483] Add empty list drag and drop template in upload from local tab (#6916)

lib/content-services/src/lib/content-node-selector/content-node-selector.component.html

@@ -53,9 +53,19 @@
             </mat-icon>
         </ng-template>
         <adf-upload-drag-area [rootFolderId]="currentDirectoryId">
-            <div class="adf-upload-dialog-container">
+            <div [class.adf-upload-dialog-container]="uploadStarted">
                 <adf-file-uploading-dialog [alwaysVisible]="true"></adf-file-uploading-dialog>
             </div>
+            <adf-empty-list data-automation-id="adf-empty-list" *ngIf="!uploadStarted">
+                <div class="adf-empty-list_template adf-empty-folder">
+                    <div fxHide.lt-md="true"
+                         class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
+                    <div fxHide.lt-md="true"
+                         class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
+                    <img [alt]="'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate" class="adf-empty-folder-image"
+                         [src]="emptyFolderImageUrl">
+                </div>
+            </adf-empty-list>
         </adf-upload-drag-area>
     </mat-tab>
 </mat-tab-group>

lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss

@@ -11,6 +11,7 @@
         }
 
         .adf-upload-dialog {
+            box-shadow: none;
 
             &__content {
                 max-height: 64%;

lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts

@@ -21,7 +21,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ContentNodeSelectorComponent } from './content-node-selector.component';
 import { Node, NodeEntry } from '@alfresco/js-api';
 import { By } from '@angular/platform-browser';
-import { SitesService, ContentService } from '@alfresco/adf-core';
+import { SitesService, ContentService, UploadService, FileModel, FileUploadEvent } from '@alfresco/adf-core';
 import { of } from 'rxjs';
 import { ContentTestingModule } from '../testing/content.testing.module';
 import { DocumentListService } from '../document-list/services/document-list.service';
@@ -35,6 +35,7 @@ describe('ContentNodeSelectorComponent', () => {
     let component: ContentNodeSelectorComponent;
     let fixture: ComponentFixture<ContentNodeSelectorComponent>;
     let data: any;
+    let uploadService: UploadService;
 
     beforeEach(() => {
         data = {
@@ -71,6 +72,7 @@ describe('ContentNodeSelectorComponent', () => {
 
         const documentListService = TestBed.inject(DocumentListService);
         const sitesService: SitesService = TestBed.inject(SitesService);
+        uploadService = TestBed.inject(UploadService);
 
         spyOn(documentListService, 'getFolder').and.callThrough();
         spyOn(documentListService, 'getFolderNode').and.callThrough();
@@ -393,4 +395,44 @@ describe('ContentNodeSelectorComponent', () => {
             expect(tabGroup).toBe(undefined);
         });
     });
+
+    describe('Drag and drop area', () => {
+        it('should uploadStarted be false by default', () => {
+            expect(component.uploadStarted).toBe(false);
+        });
+
+        it('should uploadStarted become true when the first upload gets started', () => {
+            const fileUploadEvent  = new FileUploadEvent(new FileModel(<File> { name: 'fake-name', size: 100 }));
+            uploadService.fileUploadStarting.next(fileUploadEvent);
+
+            expect(component.uploadStarted).toBe(true);
+        });
+
+        it('should show drag and drop area with the empty list template when no upload has started', async () => {
+            enableLocalUpload();
+            const uploadFromLocalTab = fixture.debugElement.queryAll(By.css('.mat-tab-label'))[1];
+            uploadFromLocalTab.nativeElement.click();
+
+            fixture.detectChanges();
+            await fixture.whenRenderingDone();
+            const emptyListTemplate = fixture.nativeElement.querySelector('[data-automation-id="adf-empty-list"]');
+            const dragAndDropArea = fixture.debugElement.query(By.css('.adf-upload-drag-area'));
+
+            expect(emptyListTemplate).not.toBeNull();
+            expect(dragAndDropArea).not.toBeNull();
+        });
+
+        it('should not show the empty list template when an upload has started', async () => {
+            enableLocalUpload();
+            const uploadFromLocalTab = fixture.debugElement.queryAll(By.css('.mat-tab-label'))[1];
+            uploadFromLocalTab.nativeElement.click();
+
+            component.uploadStarted = true;
+            fixture.detectChanges();
+            await fixture.whenRenderingDone();
+            const emptyListTemplate = fixture.nativeElement.querySelector('[data-automation-id="adf-empty-list"]');
+
+            expect(emptyListTemplate).toBeNull();
+        });
+    });
 });

lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts

@@ -39,6 +39,9 @@ export class ContentNodeSelectorComponent implements OnInit {
     hasAllowableOperations = false;
     isLoading = true;
     selectedTabIndex: number = 0;
+    uploadStarted: boolean = false;
+
+    emptyFolderImageUrl: string = '../assets/images/empty_doc_lib.svg';
     breadcrumbFolderNode: Node;
 
     constructor(private translation: TranslationService,
@@ -66,6 +69,10 @@ export class ContentNodeSelectorComponent implements OnInit {
         this.dialog.backdropClick().subscribe(() => {
            this.close();
         });
+
+        this.uploadService.fileUploadStarting.subscribe(() => {
+            this.uploadStarted = true;
+        });
     }
 
     close() {