From fc9f04c6c6cabcfb2b03d944c9404d46285bf8ff Mon Sep 17 00:00:00 2001
From: davidcanonieto <david.cano.nieto@gmail.com>
Date: Mon, 13 May 2019 07:02:36 +0100
Subject: [PATCH] [ADF-4498] Disable Sticky header on Datatable if header is
 not visible (#4701)

* [ADF-4498] Disable Sticky header on Datatable if header is not visible

* [ADF-4498] Improve flag check
---
 .../datatable/datatable.component.html        |  2 +-
 .../datatable/datatable.component.spec.ts     | 67 +++++++++++++++++++
 .../datatable/datatable.component.ts          |  4 ++
 3 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html
index 4c42a77fc8..abb42066bd 100644
--- a/lib/core/datatable/components/datatable/datatable.component.html
+++ b/lib/core/datatable/components/datatable/datatable.component.html
@@ -3,7 +3,7 @@
     *ngIf="data" class="adf-full-width"
     [class.adf-datatable-card]="display === 'gallery'"
     [class.adf-datatable-list]="display === 'list'"
-    [class.adf-sticky-header]="stickyHeader"
+    [class.adf-sticky-header]="isStickyHeaderEnabled()"
     [class.adf-datatable--empty]="!isHeaderVisible()">
     <div *ngIf="showHeader && isHeaderVisible()" class="adf-datatable-header" role="rowgroup">
         <div class="adf-datatable-row" *ngIf="display === 'list'" role="row">
diff --git a/lib/core/datatable/components/datatable/datatable.component.spec.ts b/lib/core/datatable/components/datatable/datatable.component.spec.ts
index 07ee637dc6..2f78dc570d 100644
--- a/lib/core/datatable/components/datatable/datatable.component.spec.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.spec.ts
@@ -978,6 +978,73 @@ describe('DataTable', () => {
 
         expect(emitted).toBe(2);
     });
+
+    it('should enable sticky header if the stickyHeader is set to true and header is visible', () => {
+        dataTable.data = new ObjectDataTableAdapter(
+            [
+                { name: '1' },
+                { name: '2' },
+                { name: '3' },
+                { name: '4' }
+            ],
+            [new ObjectDataColumn({ key: 'name', title: 'Name' })]
+        );
+
+        dataTable.stickyHeader = true;
+        dataTable.loading = false;
+        dataTable.noPermission = false;
+        fixture.detectChanges();
+        expect(element.querySelector('.adf-sticky-header')).not.toBeNull();
+    });
+
+    it('should disable sticky header if component is loading', () => {
+        dataTable.data = new ObjectDataTableAdapter(
+            [
+                { name: '1' },
+                { name: '2' },
+                { name: '3' },
+                { name: '4' }
+            ],
+            [new ObjectDataColumn({ key: 'name', title: 'Name' })]
+        );
+
+        dataTable.stickyHeader = true;
+        dataTable.loading = true;
+        dataTable.noPermission = false;
+        fixture.detectChanges();
+        expect(element.querySelector('.adf-sticky-header')).toBeNull();
+    });
+
+    it('should disable sticky header if user has no permissions', () => {
+        dataTable.data = new ObjectDataTableAdapter(
+            [
+                { name: '1' },
+                { name: '2' },
+                { name: '3' },
+                { name: '4' }
+            ],
+            [new ObjectDataColumn({ key: 'name', title: 'Name' })]
+        );
+
+        dataTable.stickyHeader = true;
+        dataTable.loading = false;
+        dataTable.noPermission = true;
+        fixture.detectChanges();
+        expect(element.querySelector('.adf-sticky-header')).toBeNull();
+    });
+
+    it('should disable sticky header if user has no content', () => {
+        dataTable.data = new ObjectDataTableAdapter(
+            [],
+            [new ObjectDataColumn({ key: 'name', title: 'Name' })]
+        );
+
+        dataTable.stickyHeader = true;
+        dataTable.loading = false;
+        dataTable.noPermission = false;
+        fixture.detectChanges();
+        expect(element.querySelector('.adf-sticky-header')).toBeNull();
+    });
 });
 
 describe('Accesibility', () => {
diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts
index 82785b92af..1263ac371f 100644
--- a/lib/core/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.ts
@@ -645,6 +645,10 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
         return !this.loading && !this.isEmpty() && !this.noPermission;
     }
 
+    isStickyHeaderEnabled() {
+        return this.stickyHeader && this.isHeaderVisible();
+    }
+
     private emitRowSelectionEvent(name: string, row: DataRow) {
         const domEvent = new CustomEvent(name, {
             detail: {