From b2125ab20edeeab390c3e5998ebed3256621acb6 Mon Sep 17 00:00:00 2001
From: Mykyta Maliarchuk <mykyta.maliarchuk@hyland.com>
Date: Fri, 26 Jul 2024 15:42:54 +0200
Subject: [PATCH 1/2] [ACS-8247] fixed empty context menu of datatable row

---
 .../datatable/datatable.component.html        |  7 +++-
 .../datatable/datatable.component.scss        |  4 ++
 .../datatable/datatable.component.spec.ts     | 37 +++++++++++++++++++
 .../datatable/datatable.component.ts          |  7 ++++
 4 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
index d4a46a8bdf3..7c871323ee5 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
@@ -182,7 +182,12 @@
                     </mat-menu>
                 </div>
 
-                <label *ngIf="multiselect" [for]="'select-file-' + idx" class="adf-datatable-cell adf-datatable-checkbox adf-datatable-checkbox-single">
+                <label *ngIf="multiselect"
+                       (keydown.enter)="onEnterKeyPressed(row, $any($event))"
+                       (click)="onCheckboxLabelClick(row, $event)"
+                       [for]="'select-file-' + idx"
+                       class="adf-datatable-cell adf-datatable-checkbox adf-datatable-checkbox-single"
+                       tabindex="0">
                     <mat-checkbox
                         [id]="'select-file-' + idx"
                         [class.adf-datatable-checkbox-selected]="row.isSelected"
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
index 1259a90ba72..f5af0349db2 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
@@ -151,6 +151,10 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
             &:last-child {
                 border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
             }
+
+            label {
+                cursor: inherit;
+            }
         }
     }
 
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
index f53a2e142bc..6f0c0e20fa3 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
@@ -923,6 +923,43 @@ describe('DataTable', () => {
         expect(rows[1].isSelected).toBe(true);
     });
 
+    it('should call onRowClick when checkbox label clicked and target is not checkbox', () => {
+        dataTable.data = new ObjectDataTableAdapter(
+            [{ name: '1' }, { name: '2' }],
+            [new ObjectDataColumn({ key: 'name', sortable: false }), new ObjectDataColumn({ key: 'other', sortable: false })]
+        );
+        const rows = dataTable.data.getRows();
+        const event = new MouseEvent('click');
+        Object.defineProperty(event, 'target', { value: { tagName: 'label', closest: () => null} });
+        spyOn(dataTable, 'onRowClick');
+
+        dataTable.onCheckboxLabelClick(rows[0], event);
+        expect(dataTable.onRowClick).toHaveBeenCalledWith(rows[0], event);
+    });
+
+    it('should not call onRowClick when checkbox label clicked and target is checkbox', () => {
+        const data = new ObjectDataTableAdapter([{}, {}], []);
+        const rows = data.getRows();
+        const event = new MouseEvent('click');
+        // eslint-disable-next-line @alfresco/eslint-angular/no-angular-material-selectors
+        Object.defineProperty(event, 'target', { value: { tagName: 'MAT-CHECKBOX', closest: () => null} });
+        spyOn(dataTable, 'onRowClick');
+
+        dataTable.onCheckboxLabelClick(rows[0], event);
+        expect(dataTable.onRowClick).not.toHaveBeenCalled();
+    });
+
+    it('should not call onRowClick when checkbox label clicked and target is inside checkbox', () => {
+        const data = new ObjectDataTableAdapter([{}, {}], []);
+        const rows = data.getRows();
+        const event = new MouseEvent('click');
+        Object.defineProperty(event, 'target', { value: { tagName: 'div', closest: () => 'element'} });
+        spyOn(dataTable, 'onRowClick');
+
+        dataTable.onCheckboxLabelClick(rows[0], event);
+        expect(dataTable.onRowClick).not.toHaveBeenCalled();
+    });
+
     it('should require multiselect option to toggle row state', () => {
         const data = new ObjectDataTableAdapter([{}, {}, {}], []);
         const rows = data.getRows();
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
index 7c0c01d3036..2ddb48fa3e8 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
@@ -717,6 +717,13 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
         }
     }
 
+    onCheckboxLabelClick(row: DataRow, event: MouseEvent) {
+        const target = event.target as HTMLElement;
+        if (!(target.tagName === 'MAT-CHECKBOX' || target.closest('mat-checkbox'))) {
+            this.onRowClick(row, event);
+        }
+    }
+
     onCheckboxChange(row: DataRow, event: MatCheckboxChange) {
         const newValue = event.checked;
 

From a0b0dd05d96b02a89e5db024162f487ec810ce35 Mon Sep 17 00:00:00 2001
From: Mykyta Maliarchuk <mykyta.maliarchuk@hyland.com>
Date: Mon, 5 Aug 2024 15:15:40 +0200
Subject: [PATCH 2/2] [ACS-8247] replace selector on attribute

---
 .../components/datatable/datatable.component.html   |  1 +
 .../datatable/datatable.component.spec.ts           | 13 +++++++++----
 .../components/datatable/datatable.component.ts     |  2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
index 7c871323ee5..0dec3aa6ec0 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
@@ -196,6 +196,7 @@
                         [attr.aria-checked]="row.isSelected"
                         [aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate"
                         role="checkbox"
+                        data-adf-datatable-row-checkbox
                         (change)="onCheckboxChange(row, $event)"
                         class="adf-checkbox-sr-only">
                         {{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate }}
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
index 6f0c0e20fa3..e3227ef2bde 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
@@ -930,7 +930,7 @@ describe('DataTable', () => {
         );
         const rows = dataTable.data.getRows();
         const event = new MouseEvent('click');
-        Object.defineProperty(event, 'target', { value: { tagName: 'label', closest: () => null} });
+        Object.defineProperty(event, 'target', { value: { hasAttribute: () => null, closest: () => null} });
         spyOn(dataTable, 'onRowClick');
 
         dataTable.onCheckboxLabelClick(rows[0], event);
@@ -941,8 +941,13 @@ describe('DataTable', () => {
         const data = new ObjectDataTableAdapter([{}, {}], []);
         const rows = data.getRows();
         const event = new MouseEvent('click');
-        // eslint-disable-next-line @alfresco/eslint-angular/no-angular-material-selectors
-        Object.defineProperty(event, 'target', { value: { tagName: 'MAT-CHECKBOX', closest: () => null} });
+        Object.defineProperty(event, 'target', {
+            value: {
+                getAttribute: (attr: string) => attr === 'data-adf-datatable-row-checkbox' ? 'data-adf-datatable-row-checkbox' : null,
+                hasAttribute: (attr: string) => attr === 'data-adf-datatable-row-checkbox',
+                closest: () => null
+            }
+        });
         spyOn(dataTable, 'onRowClick');
 
         dataTable.onCheckboxLabelClick(rows[0], event);
@@ -953,7 +958,7 @@ describe('DataTable', () => {
         const data = new ObjectDataTableAdapter([{}, {}], []);
         const rows = data.getRows();
         const event = new MouseEvent('click');
-        Object.defineProperty(event, 'target', { value: { tagName: 'div', closest: () => 'element'} });
+        Object.defineProperty(event, 'target', { value: { hasAttribute: () => null, closest: () => 'element'} });
         spyOn(dataTable, 'onRowClick');
 
         dataTable.onCheckboxLabelClick(rows[0], event);
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
index 2ddb48fa3e8..568a42f22fa 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
@@ -719,7 +719,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
 
     onCheckboxLabelClick(row: DataRow, event: MouseEvent) {
         const target = event.target as HTMLElement;
-        if (!(target.tagName === 'MAT-CHECKBOX' || target.closest('mat-checkbox'))) {
+        if (!(target.hasAttribute('data-adf-datatable-row-checkbox') || target.closest('[data-adf-datatable-row-checkbox]'))) {
             this.onRowClick(row, event);
         }
     }