fix(quick-filter): Use internal uid for the filter generation.

This issue should be a further step to make the quick filter stable.

Fixes #1647
Fixes #1522

apps/components-e2e/src/components/filter-field/filter-field.module.ts

@@ -19,12 +19,24 @@ import { NgModule } from '@angular/core';
 import { Route, RouterModule } from '@angular/router';
 import { DtFilterFieldModule } from '@dynatrace/barista-components/filter-field';
 import { DtE2EFilterField } from './filter-field';
+import {
+  DtExampleFilterFieldAsync,
+  DtFilterFieldExamplesModule,
+} from '@dynatrace/examples/filter-field';
 
-const routes: Route[] = [{ path: '', component: DtE2EFilterField }];
+const routes: Route[] = [
+  { path: '', component: DtE2EFilterField },
+  { path: 'async', component: DtExampleFilterFieldAsync },
+];
 
 @NgModule({
   declarations: [DtE2EFilterField],
-  imports: [CommonModule, RouterModule.forChild(routes), DtFilterFieldModule],
+  imports: [
+    CommonModule,
+    DtFilterFieldExamplesModule,
+    RouterModule.forChild(routes),
+    DtFilterFieldModule,
+  ],
   exports: [],
   providers: [],
 })

apps/components-e2e/src/components/quick-filter/quick-filter-async/quick-filter-async.html

@@ -0,0 +1,14 @@
+<dt-quick-filter
+  [dataSource]="_dataSource"
+  (currentFilterChanges)="currentFilterChanges($event)"
+  aria-label="Filter By Input value"
+  label="Filter by"
+  clearAllLabel="Clear all"
+>
+  <dt-quick-filter-title>Quick-filter</dt-quick-filter-title>
+  <dt-quick-filter-sub-title>
+    All options in the filter field above
+  </dt-quick-filter-sub-title>
+
+  Quick-filter async example
+</dt-quick-filter>

apps/components-e2e/src/components/quick-filter/quick-filter-async/quick-filter-async.ts

@@ -0,0 +1,77 @@
+/**
+ * @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';
+import { isObject } from '@dynatrace/barista-components/core';
+import {
+  DtQuickFilterDefaultDataSource,
+  DtQuickFilterDefaultDataSourceConfig,
+  DtQuickFilterCurrentFilterChangeEvent,
+  DtQuickFilterDefaultDataSourceType,
+} from '@dynatrace/barista-components/experimental/quick-filter';
+
+const filterFieldData = {
+  autocomplete: [
+    {
+      name: 'AUT (async)',
+      async: true,
+      autocomplete: [],
+    },
+    {
+      name: 'USA',
+      autocomplete: [
+        { name: 'San Francisco' },
+        { name: 'Los Angeles' },
+        { name: 'New York' },
+      ],
+    },
+  ],
+};
+
+const asyncData = {
+  name: 'AUT (async)',
+  autocomplete: [{ name: 'Linz' }, { name: 'Vienna' }, { name: 'Graz' }],
+};
+
+@Component({
+  selector: 'dt-e2e-quick-filter-async',
+  templateUrl: './quick-filter-async.html',
+  // template: ''
+})
+export class DtE2EQuickFilterAsync {
+  /** configuration for the quick filter */
+  private _config: DtQuickFilterDefaultDataSourceConfig = {
+    // Method to decide if a node should be displayed in the quick filter
+    showInSidebar: (node) =>
+      isObject(node) && node.name && node.name !== 'AUT (async)',
+  };
+
+  _dataSource = new DtQuickFilterDefaultDataSource<
+    DtQuickFilterDefaultDataSourceType
+  >(filterFieldData, this._config);
+
+  currentFilterChanges(
+    event: DtQuickFilterCurrentFilterChangeEvent<
+      DtQuickFilterDefaultDataSourceType
+    >,
+  ): void {
+    if (event.added[0] === filterFieldData.autocomplete[0]) {
+      setTimeout(() => {
+        this._dataSource.data = asyncData;
+      }, 1000);
+    }
+  }
+}

apps/components-e2e/src/components/quick-filter/quick-filter-initial-data/quick-filter-initial-data.html

@@ -6,3 +6,7 @@
 
   my content
 </dt-quick-filter>
+
+<button class="change-filter-binding" (click)="changeInitialFilters()">
+  Change Initial Filters
+</button>

apps/components-e2e/src/components/quick-filter/quick-filter-initial-data/quick-filter-initial-data.ts

@@ -37,4 +37,13 @@ export class DtE2EQuickFilterInitialData {
       FILTER_FIELD_TEST_DATA.autocomplete[1].autocomplete![2],
     ],
   ];
+
+  changeInitialFilters(): void {
+    this._initialFilters = [
+      [
+        FILTER_FIELD_TEST_DATA.autocomplete[1],
+        FILTER_FIELD_TEST_DATA.autocomplete[1].autocomplete![2],
+      ],
+    ];
+  }
 }

apps/components-e2e/src/components/quick-filter/quick-filter.e2e.ts

@@ -26,6 +26,7 @@ import {
   getSelectedItem,
 } from './quick-filter.po';
 import { resetWindowSizeToDefault } from '../../utils';
+import { Selector } from 'testcafe';
 
 fixture('Quick Filter')
   .page('http://localhost:4200/quick-filter')
@@ -156,3 +157,19 @@ test('when the distinct group get set to the any option, then remove the group f
     .expect(getSelectedItem('AUT').textContent)
     .match(/Graz/);
 });
+
+test('should be possible to change the filters via binding on the quick-filter', async (testController: TestController) => {
+  await testController
+    .expect(getFilterfieldTags())
+    .eql(['AUTVienna', 'USANew York'])
+    .click(tagDeleteButton('New York'), { speed: 0.4 })
+    .expect(getFilterfieldTags())
+    .eql(['AUTVienna'])
+    .click(Selector('.change-filter-binding'))
+    .expect(getFilterfieldTags())
+    .eql(['USANew York'])
+    .expect(getSelectedItem('USA').textContent)
+    .match(/New York/)
+    .expect(getSelectedItem('AUT').textContent)
+    .match(/Any/);
+});

apps/components-e2e/src/components/quick-filter/quick-filter.module.ts

@@ -20,15 +20,21 @@ import { Route, RouterModule } from '@angular/router';
 import { DtQuickFilterModule } from '@dynatrace/barista-components/experimental/quick-filter';
 import { DtE2EQuickFilter } from './quick-filter/quick-filter';
 import { DtE2EQuickFilterInitialData } from './quick-filter-initial-data/quick-filter-initial-data';
+import { DtE2EQuickFilterAsync } from './quick-filter-async/quick-filter-async';
 
 const routes: Route[] = [
   { path: '', component: DtE2EQuickFilter },
   { path: 'initial-data', component: DtE2EQuickFilterInitialData },
+  { path: 'async', component: DtE2EQuickFilterAsync },
 ];
 
 @NgModule({
-  declarations: [DtE2EQuickFilter, DtE2EQuickFilterInitialData],
-  imports: [CommonModule, RouterModule.forChild(routes), DtQuickFilterModule],
+  declarations: [
+    DtE2EQuickFilter,
+    DtE2EQuickFilterInitialData,
+    DtE2EQuickFilterAsync,
+  ],
+  imports: [CommonModule, DtQuickFilterModule, RouterModule.forChild(routes)],
   exports: [],
   providers: [],
 })

apps/components-e2e/src/components/quick-filter/quick-filter/quick-filter.ts

@@ -24,13 +24,13 @@ import {
   FILTER_FIELD_TEST_DATA,
   FILTER_FIELD_TEST_DATA_VALIDATORS,
 } from '@dynatrace/testing/fixtures';
-import { isObject } from 'util';
+import { isObject } from 'lodash-es';
 
 const DATA = [FILTER_FIELD_TEST_DATA_VALIDATORS, FILTER_FIELD_TEST_DATA];
 
 const config: DtQuickFilterDefaultDataSourceConfig = {
   showInSidebar: (node) =>
-    isObject(node) && node.name && node.name !== 'Not in Quickfilter',
+    (isObject(node) as any) && node.name && node.name !== 'Not in Quickfilter',
 };
 
 @Component({

libs/barista-components/experimental/quick-filter/BUILD.bazel

@@ -22,16 +22,17 @@ ng_module_view_engine(
     module_name = "@dynatrace/barista-components/experimental/quick-filter",
     tsconfig = "tsconfig_lib",
     deps = [
-        "@npm//@angular/cdk",
-        "@npm//@angular/common",
-        "@npm//@angular/core",
-        "@npm//rxjs",
-        "//libs/barista-components/core:compile",
         "//libs/barista-components/checkbox:compile",
+        "//libs/barista-components/core:compile",
         "//libs/barista-components/drawer:compile",
         "//libs/barista-components/filter-field:compile",
         "//libs/barista-components/icon:compile",
         "//libs/barista-components/radio:compile",
+        "@npm//@angular/cdk",
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//lodash-es",
+        "@npm//rxjs",
     ],
 )
 
@@ -72,19 +73,19 @@ jest(
     ts_config = ":tsconfig_test",
     deps = [
         ":compile",
+        "//libs/barista-components/checkbox:compile",
+        "//libs/barista-components/core:compile",
+        "//libs/barista-components/drawer:compile",
+        "//libs/barista-components/filter-field:compile",
+        "//libs/barista-components/icon:compile",
+        "//libs/barista-components/radio:compile",
         "//libs/testing/browser",
         "//libs/testing/fixtures",
         "@npm//@angular/cdk",
         "@npm//@angular/common",
         "@npm//@angular/core",
-        "@npm//rxjs",
         "@npm//@angular/platform-browser",
-        "//libs/barista-components/core:compile",
-        "//libs/barista-components/checkbox:compile",
-        "//libs/barista-components/drawer:compile",
-        "//libs/barista-components/filter-field:compile",
-        "//libs/barista-components/icon:compile",
-        "//libs/barista-components/radio:compile",
+        "@npm//rxjs",
     ],
 )
 

libs/barista-components/experimental/quick-filter/src/quick-filter-group.html

@@ -9,7 +9,7 @@
 <ng-template [ngIf]="_isDistinct()" [ngIfElse]="notDistinct">
   <dt-radio-group
     class="dt-quick-filter-group-items"
-    (change)="_selectOption($event)"
+    (change)="_selectOption($event, _nodeDef)"
   >
     <dt-radio-button [checked]="_isNothingSelected()" (change)="_unsetGroup()">
       Any
@@ -30,7 +30,7 @@
       *ngFor="let item of _getOptions()"
       [value]="item"
       [checked]="_isActive(item)"
-      (change)="_selectCheckBox($event)"
+      (change)="_selectCheckBox($event, _nodeDef)"
     >
       {{ _getViewValue(item) }}
     </dt-checkbox>

libs/barista-components/experimental/quick-filter/src/quick-filter-group.ts

@@ -25,6 +25,7 @@ import {
 } from '@angular/core';
 import { DtCheckboxChange } from '@dynatrace/barista-components/checkbox';
 import {
+  DtAutocompleteValue,
   DtNodeDef,
   isDtOptionDef,
   isDtRenderType,
@@ -51,7 +52,7 @@ import {
     class: 'dt-quick-filter-group',
   },
 })
-export class DtQuickFilterGroup {
+export class DtQuickFilterGroup<T = any> {
   /**
    * @internal
    * The aria-level of the group headlines for the document outline.
@@ -63,7 +64,7 @@ export class DtQuickFilterGroup {
 
   /** @internal The list of all active filters */
   @Input()
-  set activeFilters(filters: any[][]) {
+  set activeFilters(filters: DtAutocompleteValue<T>[][]) {
     this._activeFilterPaths = buildIdPathsFromFilters(filters || []);
     this._changeDetectorRef.markForCheck();
   }
@@ -82,17 +83,17 @@ export class DtQuickFilterGroup {
   }
 
   /** @internal Updates a radio box */
-  _selectOption(change: DtRadioChange<DtNodeDef>): void {
+  _selectOption(change: DtRadioChange<DtNodeDef>, group: DtNodeDef): void {
     if (change.value) {
-      this.filterChange.emit(updateFilter(change.value));
+      this.filterChange.emit(updateFilter([group, change.value]));
     }
   }
 
   /** @internal Select or deselect a checkbox */
-  _selectCheckBox(change: DtCheckboxChange<DtNodeDef>): void {
+  _selectCheckBox(change: DtCheckboxChange<DtNodeDef>, group: DtNodeDef): void {
     const action = change.checked
-      ? addFilter(change.source.value)
-      : removeFilter(change.source.value);
+      ? addFilter([group, change.source.value])
+      : removeFilter(change.source.value.option!.uid!);
     this.filterChange.emit(action);
   }
 

libs/barista-components/experimental/quick-filter/src/quick-filter-utils.ts

@@ -14,13 +14,11 @@
  * limitations under the License.
  */
 
-import { DELIMITER } from '@dynatrace/barista-components/filter-field';
+import { DtAutocompleteValue } from '@dynatrace/barista-components/filter-field';
 
-export function buildIdPathsFromFilters(filters: any[][]): string[] {
-  return filters.map((path) =>
-    path.reduce(
-      (previousValue, currentValue) =>
-        `${previousValue.name}${DELIMITER}${currentValue.name}${DELIMITER}`,
-    ),
-  );
+/** @internal Build an array of uids from the options without the groups */
+export function buildIdPathsFromFilters(
+  filters: DtAutocompleteValue<any>[][],
+): string[] {
+  return filters.map((group) => group[group.length - 1].option?.uid || '');
 }

libs/barista-components/experimental/quick-filter/src/quick-filter.spec.ts

@@ -123,6 +123,7 @@ describe('dt-quick-filter', () => {
           FILTER_FIELD_TEST_DATA.autocomplete[0].autocomplete![0],
         ],
       ];
+      zone.simulateZoneExit();
       fixture.detectChanges();
 
       fixture.componentInstance._dataSource = new DtQuickFilterDefaultDataSource(
@@ -131,8 +132,8 @@ describe('dt-quick-filter', () => {
           showInSidebar: () => true,
         },
       );
+      zone.simulateZoneExit();
       fixture.detectChanges();
-
       expect(filterFieldInstance.filters).toMatchObject([]);
       expect(quickFilterInstance.filters).toMatchObject([]);
     });