From 2f3f5ae02bdc07934046573dcc44a97d2a542c02 Mon Sep 17 00:00:00 2001
From: Mykyta Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com>
Date: Tue, 4 Jul 2023 11:10:31 +0200
Subject: [PATCH] [ACS-5314] Data table row should be clickable anywhere
 (#8671)

* [ACS-5314] bug fix

* [ACS-5314] empty commit

* rebase

* [ACS-5314] rebase

* [ACS-5314] fixed multiselect on checkbox

* [ACS-5314] fixed checkbox selector for e2e
---
 .../components/datatable/datatable.component.html    |  4 ++--
 .../components/datatable/datatable.component.scss    | 12 ++++++++++--
 .../core/pages/data-table-component.page.ts          |  2 +-
 3 files changed, 13 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 83066fc6b6..7717b32dd3 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
@@ -192,7 +192,7 @@
                     </mat-menu>
                 </div>
 
-                <div *ngIf="multiselect" class="adf-datatable-cell adf-datatable-checkbox">
+                <label *ngIf="multiselect" class="adf-datatable-cell adf-datatable-checkbox">
                     <mat-checkbox
                         [checked]="row.isSelected"
                         [attr.aria-checked]="row.isSelected"
@@ -201,7 +201,7 @@
                         class="adf-checkbox-sr-only">
                         {{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate }}
                     </mat-checkbox>
-                </div>
+                </label>
                 <div *ngFor="let col of (data.getColumns() | filterOutEvery:'isHidden':true);"
                      role="gridcell"
                      class="adf-datatable-cell adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}}"
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 0e658de1ea..e21a17f0ef 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
@@ -296,8 +296,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default;
     .adf-datatable-row {
         display: flex;
         align-items: center;
-        padding-left: 15px;
-        padding-right: 15px;
 
         .adf-datatable-checkbox {
             max-width: $data-table-thumbnail-width;
@@ -385,6 +383,16 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default;
         display: flex;
         min-height: inherit;
 
+        &:first-child {
+            padding-left: 15px;
+            box-sizing: content-box;
+        }
+
+        &:last-child {
+            padding-right: 15px;
+            box-sizing: content-box;
+        }
+
         .adf-datatable-cell-container {
             overflow: hidden;
             min-height: inherit;
diff --git a/lib/testing/src/lib/protractor/core/pages/data-table-component.page.ts b/lib/testing/src/lib/protractor/core/pages/data-table-component.page.ts
index 62f45982af..a9c8e791e3 100644
--- a/lib/testing/src/lib/protractor/core/pages/data-table-component.page.ts
+++ b/lib/testing/src/lib/protractor/core/pages/data-table-component.page.ts
@@ -494,7 +494,7 @@ export class DataTableComponentPage {
     }
 
     async clickRowByContentCheckbox(name: string): Promise<void> {
-        const resultElement = this.rootElement.$$(`div[data-automation-id='${name}']`).first().element(by.xpath(`ancestor::adf-datatable-row/div/mat-checkbox`));
+        const resultElement = this.rootElement.$$(`div[data-automation-id='${name}']`).first().element(by.xpath(`ancestor::adf-datatable-row/label/mat-checkbox`));
         await browser.actions().mouseMove(resultElement);
         await BrowserActions.click(resultElement);
     }