[ACS-8782] list of frozen files under a hold (#10663)

* [ACS-8782] Added possibility to hide drag and drop hint from document list

* [ACS-8782] Unit tests for changes in document list component

* [ACS-8782] Added documentation for displayDragAndDropHint property

* [ACS-8782] Corrected path

Author: AleksanderSklorz

docs/content-services/components/document-list.component.md

@@ -67,6 +67,7 @@ Displays the documents from a repository.
 | contextMenuActions | `boolean` | false | Toggles context menus for each row |
 | currentFolderId | `string` | null | The ID of the folder node to display or a reserved string alias for special sources |
 | displayCheckboxesOnHover | `boolean` | false | Enables checkboxes in datatable rows being displayed on hover only. |
+| displayDragAndDropHint | `boolean` | true | Display drag and drop hint. |
 | emptyFolderImageUrl | `string` |  | Custom image for empty folder. Default value: './assets/images/empty_doc_lib.svg' |
 | filterValue | `any` |  | Initial value for filter. |
 | headerFilters | `boolean` | false | Toggles the header filters mode. |

lib/content-services/src/lib/document-list/components/document-list.component.html

@@ -43,8 +43,10 @@
             <adf-empty-list *ngIf="!customNoContentTemplate">
                 <div class="adf-empty-list_template adf-empty-folder">
                     <div class="adf-empty-folder-this-space-is-empty">{{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}}</div>
-                    <div class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
-                    <div class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
+                    <ng-container *ngIf="displayDragAndDropHint">
+                        <div class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
+                        <div class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
+                    </ng-container>
                     <img [alt]="'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate" class="adf-empty-folder-image" [src]="emptyFolderImageUrl">
                 </div>
             </adf-empty-list>

lib/content-services/src/lib/document-list/components/document-list.component.spec.ts

@@ -25,21 +25,13 @@ import {
     DataTableComponent,
     ObjectDataTableAdapter,
     ShowHeaderMode,
-    ThumbnailService
+    ThumbnailService,
+    UnitTestingUtils
 } from '@alfresco/adf-core';
 import { FavoritePaging, FavoritePagingList, Node, NodeEntry, NodePaging } from '@alfresco/js-api';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import {
-    Component,
-    CUSTOM_ELEMENTS_SCHEMA,
-    Injector,
-    QueryList,
-    runInInjectionContext,
-    SimpleChange,
-    SimpleChanges,
-    ViewChild
-} from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Injector, QueryList, runInInjectionContext, SimpleChange, SimpleChanges, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { MatProgressSpinnerHarness } from '@angular/material/progress-spinner/testing';
 import { By } from '@angular/platform-browser';
@@ -94,6 +86,12 @@ describe('DocumentList', () => {
     let spyFolderNode: any;
     let authenticationService: AuthenticationService;
     let injector: Injector;
+    let unitTestingUtils: UnitTestingUtils;
+
+    const getEmptyFolderDragDropTitle = (): string => unitTestingUtils.getByCSS('.adf-empty-folder-drag-drop')?.nativeElement?.textContent;
+
+    const getEmptyFolderDragDropSubtitle = (): string =>
+        unitTestingUtils.getByCSS('.adf-empty-folder-any-files-here-to-add')?.nativeElement?.textContent;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -109,6 +107,7 @@ describe('DocumentList', () => {
 
         element = fixture.nativeElement;
         documentList = fixture.componentInstance;
+        unitTestingUtils = new UnitTestingUtils(fixture.debugElement);
 
         documentListService = TestBed.inject(DocumentListService);
         customResourcesService = TestBed.inject(CustomResourcesService);
@@ -1139,7 +1138,7 @@ describe('DocumentList', () => {
         fixture.detectChanges();
         runInInjectionContext(injector, () => {
             documentList.dataTable = new DataTableComponent(null, null, matIconRegistryMock, domSanitizerMock);
-        })
+        });
         expect(documentList.dataTable).toBeDefined();
         expect(fixture.debugElement.query(By.css('adf-empty-list'))).not.toBeNull();
     });
@@ -1160,7 +1159,7 @@ describe('DocumentList', () => {
     it('should empty folder NOT show the pagination', () => {
         runInInjectionContext(injector, () => {
             documentList.dataTable = new DataTableComponent(null, null, matIconRegistryMock, domSanitizerMock);
-        })
+        });
 
         expect(documentList.isEmpty()).toBeTruthy();
         expect(element.querySelector('alfresco-pagination')).toBe(null);
@@ -1651,6 +1650,44 @@ describe('DocumentList', () => {
         expect(dialog.open).toHaveBeenCalledWith(FileAutoDownloadComponent, { disableClose: true, data: node });
     });
 
+    it('should display drag and drop title by default', () => {
+        fixture.detectChanges();
+        expect(getEmptyFolderDragDropTitle()).toBe('ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE');
+    });
+
+    it('should display drag and drop title if displayDragAndDropHint is set to true', () => {
+        documentList.displayDragAndDropHint = true;
+
+        fixture.detectChanges();
+        expect(getEmptyFolderDragDropTitle()).toBe('ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE');
+    });
+
+    it('should not display drag and drop title if displayDragAndDropHint is set to false', () => {
+        documentList.displayDragAndDropHint = false;
+
+        fixture.detectChanges();
+        expect(getEmptyFolderDragDropTitle()).toBeUndefined();
+    });
+
+    it('should display drag and drop subtitle by default', () => {
+        fixture.detectChanges();
+        expect(getEmptyFolderDragDropSubtitle()).toBe('ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE');
+    });
+
+    it('should display drag and drop subtitle if displayDragAndDropHint is set to true', () => {
+        documentList.displayDragAndDropHint = true;
+
+        fixture.detectChanges();
+        expect(getEmptyFolderDragDropSubtitle()).toBe('ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE');
+    });
+
+    it('should not display drag and drop subtitle if displayDragAndDropHint is set to false', () => {
+        documentList.displayDragAndDropHint = false;
+
+        fixture.detectChanges();
+        expect(getEmptyFolderDragDropSubtitle()).toBeUndefined();
+    });
+
     describe('Preselect nodes', () => {
         beforeEach(() => {
             spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue(`assets/images/ft_ic_created.svg`);

lib/content-services/src/lib/document-list/components/document-list.component.ts

@@ -371,6 +371,10 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
     @Input()
     displayCheckboxesOnHover = false;
 
+    /** Display drag and drop hint. */
+    @Input()
+    displayDragAndDropHint = true;
+
     /** Emitted when the user clicks a list node */
     @Output()
     nodeClick = new EventEmitter<NodeEntityEvent>();