feat(table): Don't show empty state while loading.

Fixes APM-266048

apps/components-e2e/src/components/table/BUILD.bazel

@@ -13,11 +13,14 @@ ng_module(
     ),
     angular_assets = [
         "table/table.html",
+        "table-simple/table-simple.html",
         "table-order-expandable/table-expandable.html",
     ],
     tsconfig = "//apps/components-e2e:tsconfig-app",
     deps = [
         "//libs/barista-components/core:compile",
+        "//libs/barista-components/empty-state:compile",
+        "//libs/barista-components/loading-distractor:compile",
         "//libs/barista-components/table:compile",
         "@npm//@angular/cdk",
         "@npm//@angular/common",

apps/components-e2e/src/components/table/table-simple/table-simple.html

@@ -0,0 +1,28 @@
+<dt-table [dataSource]="dataSource" [loading]="loading">
+  <dt-simple-text-column name="name" label="Rule name" sortable="false">
+  </dt-simple-text-column>
+
+  <dt-loading-distractor dtTableLoadingState>
+    Loading...
+  </dt-loading-distractor>
+
+  <dt-empty-state role="row">
+    <dt-empty-state-item role="cell">
+      <dt-empty-state-item-title aria-level="1">
+        No data that matches your query
+      </dt-empty-state-item-title>
+      Amend the timefrime you're querying within or review your query to make
+      your statement less restrictive.
+    </dt-empty-state-item>
+  </dt-empty-state>
+
+  <dt-header-row *dtHeaderRowDef="['name']"></dt-header-row>
+  <dt-row *dtRowDef="let row; columns: ['name']"></dt-row>
+</dt-table>
+
+<button dt-button (click)="toggleTableData()" id="set-empty-data">
+  Toggle table data
+</button>
+<button dt-button (click)="loading = !loading" id="set-loading">
+  Set loading
+</button>

apps/components-e2e/src/components/table/table-simple/table-simple.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+const DATA = [
+  { name: 'I' },
+  { name: 'II' },
+  { name: 'III' },
+  { name: 'IV' },
+  { name: 'V' },
+];
+
+@Component({
+  selector: 'dt-e2e-table-simple',
+  templateUrl: 'table-simple.html',
+})
+export class DtE2ETableSimple {
+  disabled = false;
+
+  loading = false;
+
+  dataSource = DATA;
+
+  toggleTableData(): void {
+    if (this.dataSource.length === 0) {
+      this.dataSource = DATA;
+    } else {
+      this.dataSource = [];
+    }
+  }
+}

apps/components-e2e/src/components/table/table.e2e.ts

@@ -23,6 +23,10 @@ import {
   getDragDistance,
   orderInputs,
   changeOrderButton,
+  setEmptyDataButton,
+  setLoadingButton,
+  loadingDistractor,
+  emptyState,
 } from './table.po';
 
 fixture('Table')
@@ -236,6 +240,29 @@ test('input - should not reorder the table if disabled', async (testController:
     .eql('II');
 });
 
+fixture('Default table')
+  .page('http://localhost:4200/table/simple')
+  .beforeEach(async () => {
+    await resetWindowSizeToDefault();
+    await waitForAngular();
+  });
+
+test('should show the empty state when removing the data', async (testController: TestController) => {
+  await testController.click(setEmptyDataButton).expect(emptyState.exists).ok();
+});
+
+test('should not show the empty state, when loading is set', async (testController: TestController) => {
+  await testController
+    .click(setEmptyDataButton)
+    .expect(emptyState.exists)
+    .ok()
+    .click(setLoadingButton)
+    .expect(emptyState.exists)
+    .notOk()
+    .expect(loadingDistractor.exists)
+    .ok();
+});
+
 fixture('Table Order Expandable')
   .page('http://localhost:4200/table/expandable')
   .beforeEach(async () => {

apps/components-e2e/src/components/table/table.module.ts

@@ -18,25 +18,31 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { Route, RouterModule } from '@angular/router';
 import { DtTableModule } from '@dynatrace/barista-components/table';
+import { DtEmptyStateModule } from '@dynatrace/barista-components/empty-state';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import {
   DT_UI_TEST_CONFIG,
   DT_DEFAULT_UI_TEST_CONFIG,
 } from '@dynatrace/barista-components/core';
 import { DtE2ETable } from './table/table';
+import { DtE2ETableSimple } from './table-simple/table-simple';
 import { DtE2ETableExpandable } from './table-order-expandable/table-expandable';
+import { DtLoadingDistractorModule } from '@dynatrace/barista-components/loading-distractor';
 
 const routes: Route[] = [
   { path: '', component: DtE2ETable },
+  { path: 'simple', component: DtE2ETableSimple },
   { path: 'expandable', component: DtE2ETableExpandable },
 ];
 
 @NgModule({
-  declarations: [DtE2ETable, DtE2ETableExpandable],
+  declarations: [DtE2ETable, DtE2ETableSimple, DtE2ETableExpandable],
   imports: [
     CommonModule,
     RouterModule.forChild(routes),
     DtTableModule,
+    DtLoadingDistractorModule,
+    DtEmptyStateModule,
     DragDropModule,
   ],
   exports: [],

apps/components-e2e/src/components/table/table.po.ts

@@ -18,6 +18,10 @@ import { Selector } from 'testcafe';
 
 export const disableButton = Selector('#disable-toggle');
 export const changeOrderButton = Selector('#change-order');
+export const setEmptyDataButton = Selector('#set-empty-data');
+export const setLoadingButton = Selector('#set-loading');
+export const emptyState = Selector('.dt-empty-state');
+export const loadingDistractor = Selector('dt-loading-distractor');
 export const dragHandles = Selector('.dt-order-cell-icon');
 export const orderInputs = Selector('.dt-order-cell-input');
 export const expandButtons = Selector('.dt-expandable-cell .dt-button');

apps/dev/src/table/table-demo.component.html

@@ -8,6 +8,7 @@
 <ng-container>
   <dt-table
     [dataSource]="dataSource"
+    [loading]="tableLoading"
     dtTableSelection
     [dtTableSelectionInitial]="data.slice(0, 1)"
     [dtTableIsRowDisabled]="disabledPredicate"
@@ -44,6 +45,18 @@
         ariaLabel="Expand the row"
       ></dt-expandable-cell>
     </ng-container>
+    <dt-loading-distractor dtTableLoadingState>
+      Loading...
+    </dt-loading-distractor>
+    <dt-empty-state role="row">
+      <dt-empty-state-item role="cell">
+        <dt-empty-state-item-title aria-level="1">
+          No data that matches your query
+        </dt-empty-state-item-title>
+        Amend the timefrime you're querying within or review your query to make
+        your statement less restrictive.
+      </dt-empty-state-item>
+    </dt-empty-state>
     <dt-header-row
       *dtHeaderRowDef="[
         'select',
@@ -65,7 +78,7 @@
         <dt-chart [options]="options" [series]="series">
           <dt-chart-tooltip>
             <ng-template let-tooltip>
-              <dt-key-value-list style="min-width: 100px;">
+              <dt-key-value-list style="min-width: 100px">
                 <dt-key-value-list-item *ngFor="let data of tooltip.points">
                   <dt-key-value-list-key>
                     {{ data.series.name }}
@@ -79,9 +92,7 @@
           </dt-chart-tooltip>
         </dt-chart>
       </ng-template>
-      <ng-template dtExpandableRowContent *ngIf="show">
-        no chart
-      </ng-template>
+      <ng-template dtExpandableRowContent *ngIf="show"> no chart </ng-template>
     </dt-expandable-row>
   </dt-table>
 

apps/dev/src/table/table-demo.component.ts

@@ -106,7 +106,8 @@ export class TableDemo implements OnInit, OnDestroy, AfterViewInit {
       traffic: '32.7 Mbit/s',
     },
   ];
-  dataSource: DtTableDataSource<HostUnit> = new DtTableDataSource(this.data);
+  dataSource: DtTableDataSource<HostUnit> = new DtTableDataSource();
+  tableLoading = true;
 
   private subscription: Subscription = Subscription.EMPTY;
 
@@ -132,6 +133,11 @@ export class TableDemo implements OnInit, OnDestroy, AfterViewInit {
         this.dataSource.pagination = null;
       }
     });
+
+    setTimeout(() => {
+      this.dataSource.data = this.data;
+      this.tableLoading = false;
+    }, 2000);
   }
 
   ngOnDestroy(): void {

libs/barista-components/table/src/table.html

@@ -5,6 +5,7 @@
 
 <ng-template #emptyStateTemplate>
   <ng-content
+    *ngIf="!loading"
     select="[dtTableEmptyState], dt-empty-state, [dtCustomEmptyState]"
   ></ng-content>
 </ng-template>