fix no permission template (#4256)

rename correctly template demo

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

@@ -3,7 +3,7 @@
     *ngIf="data" class="adf-full-width"
     [class.adf-data-table-card]="display === 'gallery'"
     [class.adf-data-table]="display === 'list'"
-    [class.adf-data-table--empty]="isEmpty()">
+    [class.adf-data-table--empty]="!isHeaderVisible()">
     <div *ngIf="isHeaderVisible()" class="adf-datatable-header" role="rowgroup">
         <div class="adf-datatable-row" *ngIf="display === 'list'" role="row">
             <!-- Actions (left) -->
@@ -214,7 +214,7 @@
         <div *ngIf="loading"
              [class.adf-datatable-row]="display === 'list'"
              [class.adf-data-table-card-loading]="display === 'gallery'">
-            <div class="adf-datatable-table-cell">
+            <div class="adf-no-content-container adf-datatable-table-cell">
                 <ng-template *ngIf="loadingTemplate"
                              ngFor [ngForOf]="[data]"
                              [ngForTemplate]="loadingTemplate">
@@ -222,4 +222,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

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

@@ -176,6 +176,22 @@ describe('DataTable', () => {
         expect(element.querySelector('.adf-datatable-header')).toBe(null);
     });
 
+    it('should hide the header if noPermission is true', () => {
+        let newData = new ObjectDataTableAdapter(
+        );
+
+        dataTable.noPermission = true;
+        dataTable.loading = false;
+
+        dataTable.ngOnChanges({
+            data: new SimpleChange(null, newData, false)
+        });
+
+        fixture.detectChanges();
+
+        expect(element.querySelector('.adf-datatable-header')).toBe(null);
+    });
+
     it('should show the header if showHeader is true', () => {
         let newData = new ObjectDataTableAdapter(
             [

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

@@ -641,7 +641,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
     }
 
     isHeaderVisible() {
-        return this.showHeader && !this.loading && !this.isEmpty();
+        return this.showHeader && !this.loading && !this.isEmpty() && !this.noPermission;
     }
 
     private emitRowSelectionEvent(name: string, row: DataRow) {