feat(filter-field, quick-filter): Improved typing across the filter-f…

…ield, it's node definitions, data-sources and the quick-filter component. BREAKING CHANGE: The filter-field data source as well as the quick-filter data source and their transform methods have Generics in place to define the structure of the passed in data. The filter-fields default data-source no longer takes a generic, as the structure of the data is already defined there. The Node definitions now take optional generics for the consumer to specify the structure of the data.
dynatrace-oss · May 20, 2020 · f9db6a5 · f9db6a5
1 parent 9e7aa5a
commit f9db6a5
Show file tree

Hide file tree

Showing 21 changed files with 229 additions and 248 deletions.
diff --git a/apps/components-e2e/src/components/filter-field/filter-field.ts b/apps/components-e2e/src/components/filter-field/filter-field.ts
@@ -44,18 +44,14 @@ const DATA = [FILTER_FIELD_TEST_DATA_VALIDATORS, FILTER_FIELD_TEST_DATA];
 export class DtE2EFilterField implements OnDestroy {
   destroy$ = new Subject<void>();
 
-  _dataSource = new DtFilterFieldDefaultDataSource<
-    DtFilterFieldDefaultDataSourceType
-  >(DATA[0]);
+  _dataSource = new DtFilterFieldDefaultDataSource(DATA[0]);
 
   @ViewChild(DtFilterField, { static: true }) _filterfield: DtFilterField<
     DtFilterFieldDefaultDataSourceType
   >;
 
   switchToDatasource(targetIndex: number): void {
-    this._dataSource = new DtFilterFieldDefaultDataSource<
-      DtFilterFieldDefaultDataSourceType
-    >(DATA[targetIndex]);
+    this._dataSource = new DtFilterFieldDefaultDataSource(DATA[targetIndex]);
   }
 
   constructor(private _changeDetectorRef: ChangeDetectorRef) {}

diff --git a/apps/dev/src/filter-field/filter-field-demo.component.ts b/apps/dev/src/filter-field/filter-field-demo.component.ts
@@ -132,7 +132,7 @@ export class FilterFieldDemo implements AfterViewInit, OnDestroy {
   private _timerHandle: number;
   _firstTag: DtFilterFieldTag;
 
-  _dataSource = new DtFilterFieldDefaultDataSource<any>(TEST_DATA);
+  _dataSource = new DtFilterFieldDefaultDataSource(TEST_DATA);
   _loading = false;
   _disabled = false;
 

diff --git a/libs/barista-components/experimental/quick-filter/src/quick-filter-data-source.ts b/libs/barista-components/experimental/quick-filter/src/quick-filter-data-source.ts
@@ -21,13 +21,13 @@ import {
 } from '@dynatrace/barista-components/filter-field';
 
 export abstract class DtQuickFilterDataSource<T = any>
-  implements DtFilterFieldDataSource {
+  implements DtFilterFieldDataSource<T> {
   /**
    * Used by the DtFilterFieldControl. Called when it connects to the data source.
    * Should return a stream of data that will be transformed, filtered and
    * displayed by the DtFilterField and the DtFilterFieldControl.
    */
-  abstract connect(): Observable<DtNodeDef | null>;
+  abstract connect(): Observable<DtNodeDef<T> | null>;
 
   /** Used by the DtFilterField. Called when it is destroyed. */
   abstract disconnect(): void;
@@ -55,42 +55,42 @@ export abstract class DtQuickFilterDataSource<T = any>
     data: T,
     parent: DtNodeDef | null,
     existingDef: DtNodeDef | null,
-  ): DtNodeDef;
+  ): DtNodeDef<T>;
 
   /** Transforms the provided data into a DtNodeDef which contains a DtOptionDef. */
   abstract transformOption(
     data: T,
     parentAutocompleteOrOption: DtNodeDef | null,
     existingDef: DtNodeDef | null,
-  ): DtNodeDef;
+  ): DtNodeDef<T>;
 
   /** Transforms the provided data into a DtNodeDef which contains a DtGroupDef. */
   abstract transformGroup(
     data: T,
     parentAutocomplete: DtNodeDef | null,
     existingDef: DtNodeDef | null,
-  ): DtNodeDef;
+  ): DtNodeDef<T>;
 
   /** Transforms the provided data into a DtNodeDef which contains a DtFreeTextDef. */
   abstract transformFreeText(
     data: T,
     parent: DtNodeDef | null,
     existingDef: DtNodeDef | null,
-  ): DtNodeDef;
+  ): DtNodeDef<T>;
 
   /** Transforms the provided data into a DtNodeDef which contains a DtRangeDef. */
   abstract transformRange(
     data: T,
     parent: DtNodeDef | null,
     existingDef: DtNodeDef | null,
-  ): DtNodeDef;
+  ): DtNodeDef<T>;
 
   /** Transforms the provided data into a DtNodeDef. */
   abstract transformObject(
     data: T | null,
     parent: DtNodeDef | null,
-  ): DtNodeDef | null;
+  ): DtNodeDef<T> | null;
 
   /** Transforms the provided list of data objects into an array of DtNodeDefs. */
-  abstract transformList(list: T[], parent: DtNodeDef | null): DtNodeDef[];
+  abstract transformList(list: T[], parent: DtNodeDef | null): DtNodeDef<T>[];
 }
diff --git a/libs/barista-components/experimental/quick-filter/src/state/actions.ts b/libs/barista-components/experimental/quick-filter/src/state/actions.ts
@@ -62,8 +62,8 @@ export const updateFilter = (item: DtNodeDef) =>
   action<DtNodeDef>(ActionType.UPDATE_FILTER, item);
 
 /** Action that subscribes to a new data source */
-export const switchDataSource = (item: DtFilterFieldDataSource) =>
-  action<DtFilterFieldDataSource>(ActionType.SWITCH_DATA_SOURCE, item);
+export const switchDataSource = (item: DtFilterFieldDataSource<any>) =>
+  action<DtFilterFieldDataSource<any>>(ActionType.SWITCH_DATA_SOURCE, item);
 
 /** Action that updates the data source */
 export const updateDataSource = (nodeDef: DtNodeDef) =>

diff --git a/libs/barista-components/experimental/quick-filter/src/state/effects.ts b/libs/barista-components/experimental/quick-filter/src/state/effects.ts
@@ -38,7 +38,7 @@ export const ofType = <T>(
 /** Connects to a new Data dataSource */
 export const switchDataSourceEffect: Effect = (action$: Observable<Action>) =>
   action$.pipe(
-    ofType<DtFilterFieldDataSource>(ActionType.SWITCH_DATA_SOURCE),
+    ofType<DtFilterFieldDataSource<any>>(ActionType.SWITCH_DATA_SOURCE),
     switchMap((action) => action.payload!.connect()),
     map((nodeDef: DtNodeDef) => updateDataSource(nodeDef)),
   );
diff --git a/libs/barista-components/experimental/quick-filter/src/state/selectors.ts b/libs/barista-components/experimental/quick-filter/src/state/selectors.ts
@@ -22,6 +22,7 @@ import { Observable } from 'rxjs';
 import { filter, map, pluck, tap, withLatestFrom } from 'rxjs/operators';
 import { DtQuickFilterDataSource } from '../quick-filter-data-source';
 import { QuickFilterState } from './store';
+import { isDefined } from '@dynatrace/barista-components/core';
 
 /** @internal Select all autocompletes from the root Node Def from the store */
 export const getAutocompletes = (
@@ -35,13 +36,15 @@ export const getAutocompletes = (
       }
     }),
     pluck('nodeDef'),
-    filter(isDtAutocompleteDef),
+    filter((state) => isDefined(state) && isDtAutocompleteDef(state)),
     withLatestFrom(
       getDataSource(state$).pipe(filter<DtQuickFilterDataSource>(Boolean)),
     ),
-    map(([{ autocomplete }, { showInSidebarFunction }]) =>
-      autocomplete.optionsOrGroups.filter(
-        (node) => isDtAutocompleteDef(node) && showInSidebarFunction(node.data),
+    map(([nodeDef, dataSource]) =>
+      nodeDef!.autocomplete!.optionsOrGroups.filter(
+        (node) =>
+          isDtAutocompleteDef(node) &&
+          dataSource.showInSidebarFunction(node.data),
       ),
     ),
   );

diff --git a/libs/barista-components/filter-field/src/filter-field-data-source.ts b/libs/barista-components/filter-field/src/filter-field-data-source.ts
@@ -17,13 +17,13 @@
 import { Observable } from 'rxjs';
 import { DtNodeDef } from './types';
 
-export abstract class DtFilterFieldDataSource {
+export abstract class DtFilterFieldDataSource<T> {
   /**
    * Used by the DtFilterFieldControl. Called when it connects to the data source.
    * Should return a stream of data that will be transformed, filtered and
    * displayed by the DtFilterField and the DtFilterFieldControl.
    */
-  abstract connect(): Observable<DtNodeDef | null>;
+  abstract connect(): Observable<DtNodeDef<T> | null>;
 
   /** Used by the DtFilterField. Called when it is destroyed. */
   abstract disconnect(): void;
@@ -50,55 +50,48 @@ export abstract class DtFilterFieldDataSource {
 
   /** Transforms the provided data into a DtNodeDef which contains a DtAutocompleteDef. */
   abstract transformAutocomplete(
-    // tslint:disable-next-line: no-any
-    data: any,
-    parent: DtNodeDef | null,
-    existingDef: DtNodeDef | null,
-  ): DtNodeDef;
+    data: T,
+    parent: DtNodeDef<T> | null,
+    existingDef: DtNodeDef<T> | null,
+  ): DtNodeDef<T>;
 
   /** Transforms the provided data into a DtNodeDef which contains a DtOptionDef. */
   abstract transformOption(
-    // tslint:disable-next-line: no-any
-    data: any,
-    parentAutocompleteOrOption: DtNodeDef | null,
-    existingDef: DtNodeDef | null,
-  ): DtNodeDef;
+    data: T,
+    parentAutocompleteOrOption: DtNodeDef<T> | null,
+    existingDef: DtNodeDef<T> | null,
+  ): DtNodeDef<T>;
 
   /** Transforms the provided data into a DtNodeDef which contains a DtGroupDef. */
   abstract transformGroup(
-    // tslint:disable-next-line: no-any
-    data: any,
-    parentAutocomplete: DtNodeDef | null,
-    existingDef: DtNodeDef | null,
-  ): DtNodeDef;
+    data: T,
+    parentAutocomplete: DtNodeDef<T> | null,
+    existingDef: DtNodeDef<T> | null,
+  ): DtNodeDef<T>;
 
   /** Transforms the provided data into a DtNodeDef which contains a DtFreeTextDef. */
   abstract transformFreeText(
-    // tslint:disable-next-line: no-any
-    data: any,
-    parent: DtNodeDef | null,
-    existingDef: DtNodeDef | null,
+    data: T,
+    parent: DtNodeDef<T> | null,
+    existingDef: DtNodeDef<T> | null,
   ): DtNodeDef;
 
   /** Transforms the provided data into a DtNodeDef which contains a DtRangeDef. */
   abstract transformRange(
-    // tslint:disable-next-line: no-any
     data: any,
-    parent: DtNodeDef | null,
-    existingDef: DtNodeDef | null,
+    parent: DtNodeDef<T> | null,
+    existingDef: DtNodeDef<T> | null,
   ): DtNodeDef;
 
   /** Transforms the provided data into a DtNodeDef. */
   abstract transformObject(
-    // tslint:disable-next-line: no-any
-    data: any | null,
-    parent: DtNodeDef | null,
-  ): DtNodeDef | null;
+    data: T | null,
+    parent: DtNodeDef<T> | null,
+  ): DtNodeDef<T> | null;
 
   /** Transforms the provided list of data objects into an array of DtNodeDefs. */
   abstract transformList(
-    // tslint:disable-next-line: no-any
     list: any[],
-    parent: DtNodeDef | null,
-  ): DtNodeDef[];
+    parent: DtNodeDef<T> | null,
+  ): DtNodeDef<T>[];
 }