[ACS-8113] UX bug - Checkbox selections checked state should be Hyland blue not green- edit summary (#9861) (#9911)

Co-authored-by: jacekpluta <73617938+jacekpluta@users.noreply.github.com>

lib/content-services/src/lib/breadcrumb/breadcrumb.component.html

@@ -57,7 +57,7 @@
         </a>
 
         <div *ngSwitchDefault class="adf-breadcrumb-item-current" aria-current="location">
-            {{ item.name | translate }}
+            {{ (selectedRowItemsCount < 1 ? item.name : 'BREADCRUMB.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
         </div>
 
         <mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last">

lib/content-services/src/lib/breadcrumb/breadcrumb.component.spec.ts

@@ -33,6 +33,9 @@ describe('Breadcrumb', () => {
     });
     let documentListComponent: DocumentListComponent;
 
+    const getBreadcrumbActionText = (): string =>
+        fixture.debugElement.nativeElement.querySelector('.adf-breadcrumb-item-current').textContent.trim();
+
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ContentTestingModule],
@@ -300,4 +303,26 @@ describe('Breadcrumb', () => {
         expect(component.route[3].id).toBe('test-id');
         expect(component.route[3].name).toBe('test-name');
     });
+
+    it('should set title based on selectedRowItemsCount', () => {
+        component.transform = (transformNode) => {
+            transformNode.id = 'test-id';
+            transformNode.name = 'test-name';
+            return transformNode;
+        };
+
+        component.folderNode = {
+            path: { elements: [{ id: 'element-1-id', name: 'element-1-name' }] }
+        } as Node;
+
+        component.ngOnChanges();
+        fixture.detectChanges();
+
+        expect(getBreadcrumbActionText()).toEqual('test-name');
+
+        component.selectedRowItemsCount = 2;
+        fixture.detectChanges();
+
+        expect(getBreadcrumbActionText()).toEqual('BREADCRUMB.HEADER.SELECTED');
+    });
 });

lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts

@@ -77,6 +77,10 @@ export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy {
     @Input()
     maxItems: number;
 
+    /** Number of table rows that are currently selected.  */
+    @Input()
+    selectedRowItemsCount = 0;
+
     previousNodes: PathElement[];
     lastNodes: PathElement[];
 

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

@@ -17,11 +17,13 @@
     [allowFiltering]="allowFiltering"
     [isResizingEnabled]="isResizingEnabled"
     [blurOnResize]="blurOnResize"
+    [displayCheckboxesOnHover]="displayCheckboxesOnHover"
     (showRowContextMenu)="onShowRowContextMenu($event)"
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)"
     (columnsWidthChanged)="onColumnsWidthChange($event)"
     (columnOrderChanged)="onColumnOrderChange($event)"
+    (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
     (rowClick)="onNodeClick($event.value?.node)"
     (rowDblClick)="onNodeDblClick($event.value?.node)"
     (row-select)="onNodeSelect($any($event).detail)"

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

@@ -1467,6 +1467,12 @@ describe('DocumentList', () => {
         expect(documentList.reload).not.toHaveBeenCalled();
     });
 
+    it('should emit custom date range on date picker closed', () => {
+        const selectedItemsCountChangedSpy = spyOn(documentList.selectedItemsCountChanged, 'emit');
+        documentList.onSelectedItemsCountChanged(1);
+        expect(selectedItemsCountChangedSpy).toHaveBeenCalledWith(1);
+    });
+
     it('should add includeFields in the server request when present', () => {
         documentList.includeFields = ['test-include'];
         documentList.currentFolderId = 'fake-id';

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

@@ -340,6 +340,10 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
     @Input()
     blurOnResize = true;
 
+    /** Display checkboxes in datatable rows on hover only */
+    @Input()
+    displayCheckboxesOnHover = false;
+
     /** Emitted when the user clicks a list node */
     @Output()
     nodeClick = new EventEmitter<NodeEntityEvent>();
@@ -388,6 +392,10 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
     @Output()
     columnsOrderChanged = new EventEmitter<string[] | undefined>();
 
+    /** Emitted when the selected row items count in the table changed. */
+    @Output()
+    selectedItemsCountChanged = new EventEmitter<number | undefined>();
+
     @ViewChild('dataTable', { static: true })
     dataTable: DataTableComponent;
 
@@ -832,6 +840,10 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
         this.columnsWidthChanged.emit(this.columnsWidths);
     }
 
+    onSelectedItemsCountChanged(count: number) {
+        this.selectedItemsCountChanged.emit(count);
+    }
+
     onNodeClick(nodeEntry: NodeEntry) {
         const domEvent = new CustomEvent('node-click', {
             detail: {

lib/content-services/src/lib/i18n/en.json

@@ -656,6 +656,9 @@
     "ARIA-LABEL": {
       "BREADCRUMB": "Breadcrumb",
       "DROPDOWN": "Dropdown"
+    },
+    "HEADER": {
+      "SELECTED": "Selected ({{ count }})"
     }
   },
   "NAME_COLUMN_LINK": {

lib/core/src/lib/datatable/components/datatable/datatable.component.html

@@ -182,11 +182,14 @@
                     </mat-menu>
                 </div>
 
-                <label *ngIf="multiselect" [for]="'select-file-' + idx" class="adf-datatable-cell adf-datatable-checkbox">
+                <label *ngIf="multiselect" [for]="'select-file-' + idx" class="adf-datatable-cell adf-datatable-checkbox adf-datatable-checkbox-single">
                     <mat-checkbox
                         [id]="'select-file-' + idx"
+                        [class.adf-datatable-checkbox-selected]="row.isSelected"
+                        [class.adf-datatable-hover-only]="displayCheckboxesOnHover"
                         [checked]="row.isSelected"
                         [attr.aria-checked]="row.isSelected"
+                        [aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate"
                         role="checkbox"
                         (change)="onCheckboxChange(row, $event)"
                         class="adf-checkbox-sr-only">

lib/core/src/lib/datatable/components/datatable/datatable.component.scss

@@ -159,6 +159,20 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         display: flex;
         align-items: center;
 
+        &:hover {
+            .adf-datatable-hover-only {
+                visibility: visible;
+            }
+        }
+
+        .adf-datatable-hover-only {
+            visibility: hidden;
+
+            &.adf-datatable-checkbox-selected {
+                visibility: visible;
+            }
+        }
+
         .adf-datatable-checkbox {
             max-width: $data-table-thumbnail-width;
             width: $data-table-thumbnail-width;
@@ -290,6 +304,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         padding-right: 15px;
     }
 
+    .adf-datatable-checkbox {
+        display: flex;
+        justify-content: center;
+    }
+
     .adf-cell-value {
         display: flex;
         min-height: inherit;
@@ -438,6 +457,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         display: none;
     }
 
+    /* stylelint-disable media-feature-range-notation */
+
     /* mobile phone */
     @media all and (width <= 768px) {
         .adf-desktop-only.adf-ellipsis-cell {
@@ -501,11 +522,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         right: -3px;
     }
 
-    &.adf-datatable-checkbox {
-        display: flex;
-        align-items: center;
-    }
-
     .adf-datatable-cell-header-content {
         display: flex;
         flex-grow: 1;

lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts

@@ -157,6 +157,7 @@ describe('DataTable', () => {
     });
 
     it('should preserve the historical selection order', () => {
+        spyOn(dataTable.selectedItemsCountChanged, 'emit');
         dataTable.data = new ObjectDataTableAdapter([{ id: 0 }, { id: 1 }, { id: 2 }], [new ObjectDataColumn({ key: 'id' })]);
 
         const rows = dataTable.data.getRows();
@@ -169,6 +170,25 @@ describe('DataTable', () => {
         expect(selection[0].getValue('id')).toBe(2);
         expect(selection[1].getValue('id')).toBe(0);
         expect(selection[2].getValue('id')).toBe(1);
+
+        expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledTimes(3);
+    });
+
+    it('should selectedItemsCountChanged be emitted 4 times', () => {
+        spyOn(dataTable.selectedItemsCountChanged, 'emit');
+        dataTable.data = new ObjectDataTableAdapter([{ id: 0 }, { id: 1 }, { id: 2 }], [new ObjectDataColumn({ key: 'id' })]);
+
+        const rows = dataTable.data.getRows();
+
+        dataTable.selectRow(rows[2], true);
+        dataTable.selectRow(rows[0], true);
+        dataTable.selectRow(rows[1], true);
+        dataTable.selectRow(rows[1], false);
+
+        expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledWith(1);
+        expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledWith(2);
+        expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledWith(3);
+        expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledTimes(4);
     });
 
     it('should update schema if columns change', fakeAsync(() => {
@@ -540,6 +560,7 @@ describe('DataTable', () => {
     });
 
     it('should unselect the row searching it by row id, when row id is defined', () => {
+        spyOn(dataTable.selectedItemsCountChanged, 'emit');
         const findSelectionByIdSpy = spyOn(dataTable, 'findSelectionById');
         dataTable.data = new ObjectDataTableAdapter([], [new ObjectDataColumn({ key: 'name' })]);
 
@@ -555,6 +576,8 @@ describe('DataTable', () => {
 
         expect(indexOfSpy).not.toHaveBeenCalled();
         expect(findSelectionByIdSpy).toHaveBeenCalledWith(fakeDataRows[0].id);
+        expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledTimes(1);
+        expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledWith(2);
     });
 
     it('should unselect the row by searching for the exact same reference of it (indexOf), when row id is not defined ', () => {
@@ -872,16 +895,13 @@ describe('DataTable', () => {
         dataTable.multiselect = true;
         dataTable.onCheckboxChange(rows[0], { checked: true } as MatCheckboxChange);
         expect(dataTable.isSelectAllIndeterminate).toBe(true);
-        expect(dataTable.isSelectAllChecked).toBe(false);
 
         dataTable.onCheckboxChange(rows[1], { checked: true } as MatCheckboxChange);
         expect(dataTable.isSelectAllIndeterminate).toBe(false);
-        expect(dataTable.isSelectAllChecked).toBe(true);
 
         dataTable.onCheckboxChange(rows[0], { checked: false } as MatCheckboxChange);
         dataTable.onCheckboxChange(rows[1], { checked: false } as MatCheckboxChange);
         expect(dataTable.isSelectAllIndeterminate).toBe(false);
-        expect(dataTable.isSelectAllChecked).toBe(false);
     });
 
     it('should allow select row when multi-select enabled', () => {
@@ -1309,6 +1329,36 @@ describe('DataTable', () => {
         expect(rows[1].getValue('icon')).toBe('directions_car');
         expect(rows[2].getValue('icon')).toBe('local_shipping');
     });
+
+    describe('displayCheckboxesOnHover', () => {
+        const getCheckboxes = () =>
+            fixture.debugElement.queryAll(By.css('.adf-datatable-checkbox-single .adf-checkbox-sr-only')).map((row) => row.nativeElement);
+
+        beforeEach(() => {
+            dataTable.data = new ObjectDataTableAdapter([{ name: '1' }, { name: '2' }], [new ObjectDataColumn({ key: 'name' })]);
+            dataTable.multiselect = true;
+        });
+
+        it('should always display checkboxes when displayCheckboxesOnHover is set to false', () => {
+            dataTable.displayCheckboxesOnHover = false;
+            fixture.detectChanges();
+
+            const checkboxes = getCheckboxes();
+            checkboxes.forEach((checkbox) => {
+                expect(checkbox.classList).not.toContain('adf-datatable-hover-only');
+            });
+        });
+
+        it('should display checkboxes on hover when displayCheckboxesOnHover is set to true', () => {
+            dataTable.displayCheckboxesOnHover = true;
+            fixture.detectChanges();
+
+            const checkboxes = getCheckboxes();
+            checkboxes.forEach((checkbox) => {
+                expect(checkbox.classList).toContain('adf-datatable-hover-only');
+            });
+        });
+    });
 });
 
 describe('Accesibility', () => {

lib/core/src/lib/datatable/components/datatable/datatable.component.ts

@@ -241,6 +241,10 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
     @Output()
     columnsWidthChanged = new EventEmitter<DataColumn[]>();
 
+    /** Emitted when the selected row items count in the table changed. */
+    @Output()
+    selectedItemsCountChanged = new EventEmitter<number>();
+
     /**
      * Flag that indicates if the datatable is in loading state and needs to show the
      * loading template (see the docs to learn how to configure a loading template).
@@ -284,6 +288,12 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
     @Input()
     blurOnResize = true;
 
+    /**
+     * Flag that indicates if selection checkboxes inside row should be displayed on hover only.
+     */
+    @Input()
+    displayCheckboxesOnHover = false;
+
     headerFilterTemplate: TemplateRef<any>;
     noContentTemplate: TemplateRef<any>;
     noPermissionTemplate: TemplateRef<any>;
@@ -316,7 +326,12 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
         this.keyManager.onKeydown(event);
     }
 
-    constructor(private elementRef: ElementRef, differs: IterableDiffers, private matIconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) {
+    constructor(
+        private elementRef: ElementRef,
+        differs: IterableDiffers,
+        private matIconRegistry: MatIconRegistry,
+        private sanitizer: DomSanitizer
+    ) {
         if (differs) {
             this.differ = differs.find([]).create(null);
         }
@@ -566,35 +581,38 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
     }
 
     private handleRowSelection(row: DataRow, e: KeyboardEvent | MouseEvent) {
-        if (this.data) {
-            if (this.isSingleSelectionMode()) {
-                if (row.isSelected) {
-                    this.resetSelection();
-                    this.emitRowSelectionEvent('row-unselect', null);
-                } else {
-                    this.resetSelection();
-                    this.selectRow(row, true);
-                    this.emitRowSelectionEvent('row-select', row);
-                }
-            }
+        if (!this.data) {
+            return;
+        }
 
-            if (this.isMultiSelectionMode()) {
-                const modifier = e && (e.metaKey || e.ctrlKey);
-                let newValue: boolean;
-                if (this.selection.length === 1) {
-                    newValue = !row.isSelected;
-                } else {
-                    newValue = modifier ? !row.isSelected : true;
-                }
-                const domEventName = newValue ? 'row-select' : 'row-unselect';
-
-                if (!modifier) {
-                    this.resetSelection();
-                }
-                this.selectRow(row, newValue);
-                this.emitRowSelectionEvent(domEventName, row);
+        if (this.isSingleSelectionMode()) {
+            if (row.isSelected) {
+                this.resetSelection();
+                this.emitRowSelectionEvent('row-unselect', null);
+            } else {
+                this.resetSelection();
+                this.selectRow(row, true);
+                this.emitRowSelectionEvent('row-select', row);
             }
         }
+
+        if (this.isMultiSelectionMode()) {
+            const modifier = e && (e.metaKey || e.ctrlKey);
+            let newValue: boolean;
+            if (this.selection.length === 1) {
+                newValue = !row.isSelected;
+            } else {
+                newValue = modifier ? !row.isSelected : true;
+            }
+            const domEventName = newValue ? 'row-select' : 'row-unselect';
+
+            if (!modifier) {
+                this.resetSelection();
+            }
+            this.selectRow(row, newValue);
+            this.emitRowSelectionEvent(domEventName, row);
+            this.checkSelectAllCheckboxState();
+        }
     }
 
     resetSelection(): void {
@@ -849,6 +867,8 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
                     this.selection.splice(idx, 1);
                 }
             }
+
+            this.selectedItemsCountChanged.emit(this.selection.length);
         }
     }