feat(quick-filter): Add a new quick filter component inside an experi…

…mental package.

The quick filter component is used to provide a quick way to operate with the filter field inside a sidebar.
Inside the quick filter only an autocomplete with simple options can be displayed.

This is part of an experimental package and not meant to be used inside production.
The experimental package does not follow semantic versioning like the rest of the library does.

This means that we might break the api in every version. It is only meant to be used for testing and feedback purpose.

Fixes #453
Fixes #254

.vscode/settings.json

@@ -2,5 +2,6 @@
   "editor.tabSize": 2,
   "files.eol": "\n",
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "explorer.compactFolders": false
 }

angular.json

@@ -2522,6 +2522,46 @@
       },
       "schematics": {}
     },
+    "quick-filter": {
+      "projectType": "library",
+      "root": "libs/barista-components/experimental/quick-filter",
+      "sourceRoot": "libs/barista-components/experimental/quick-filter/src",
+      "prefix": "dt",
+      "architect": {
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/barista-components/experimental/quick-filter/tsconfig.lib.json",
+              "libs/barista-components/experimental/quick-filter/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/barista-components/experimental/quick-filter/**"
+            ]
+          }
+        },
+        "lint-styles": {
+          "builder": "@dynatrace/barista-builders:stylelint",
+          "options": {
+            "stylelintConfig": ".stylelintrc",
+            "reportFile": "dist/stylelint/report.xml",
+            "exclude": ["**/node_modules/**"],
+            "files": [
+              "libs/barista-components/experimental/quick-filter/**/*.scss"
+            ]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/barista-components/experimental/quick-filter/jest.config.js",
+            "tsConfig": "libs/barista-components/experimental/quick-filter/tsconfig.spec.json",
+            "setupFile": "libs/barista-components/experimental/quick-filter/src/test-setup.ts"
+          }
+        }
+      }
+    },
     "radial-chart": {
       "projectType": "library",
       "root": "libs/barista-components/radial-chart",

apps/components-e2e/src/app/app.routing.module.ts

@@ -19,6 +19,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 export const routes: Routes = [
+  {
+    // TODO: remove only for testing
+    path: '',
+    pathMatch: 'full',
+    redirectTo: '/quick-filter',
+  },
   {
     path: 'autocomplete',
     loadChildren: () =>
@@ -131,6 +137,13 @@ export const routes: Routes = [
         module => module.DtE2EProgressBarModule,
       ),
   },
+  {
+    path: 'quick-filter',
+    loadChildren: () =>
+      import('../components/quick-filter/quick-filter.module').then(
+        module => module.DtE2EQuickFilterModule,
+      ),
+  },
   {
     path: 'radial-chart',
     loadChildren: () =>

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

@@ -18,11 +18,17 @@ import { Selector, t, ClientFunction } from 'testcafe';
 
 export const errorBox = Selector('.dt-filter-field-error');
 export const filterField = Selector('#filter-field');
-export const option = (nth: number) => Selector(`.dt-option:nth-child(${nth})`);
+export const option = (nth: number) => Selector('.dt-option').nth(nth);
 export const clearAll = Selector('.dt-filter-field-clear-all-button');
 export const filterTags = Selector('dt-filter-field-tag');
 export const tagOverlay = Selector('.dt-overlay-container');
 
+/** Selector for the delete button (x) on a filter with a specific text */
+export const tagDeleteButton = (filterText: string) =>
+  Selector('dt-filter-field-tag')
+    .withText(filterText)
+    .child('.dt-filter-field-tag-button');
+
 export const input = Selector('input');
 
 export const switchToFirstDatasource = Selector('#switchToFirstDatasource');
@@ -36,17 +42,16 @@ export function clickOption(
   const controller = testController || t;
 
   return controller
-    .click(filterField, { speed: 0.2 })
-    .wait(250)
-    .click(option(nth), { speed: 0.2 });
+    .click(filterField, { speed: 0.4 })
+    .click(option(nth), { speed: 0.4 });
 }
 
 /** Focus the input of the filter field to send key events to it. */
 export const focusFilterFieldInput = ClientFunction(() => {
   (document.querySelector('#filter-field input') as HTMLElement).focus();
 });
 
-/** Retreive all set tags in the filter field and their values. */
+/** Retrieve all set tags in the filter field and their values. */
 export const getFilterfieldTags = ClientFunction(() => {
   const filterFieldTags: HTMLElement[] = [].slice.call(
     document.querySelectorAll('.dt-filter-field-tag'),

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

@@ -18,98 +18,24 @@
 // tslint:disable no-any max-file-line-count no-unbound-method use-component-selector
 
 import {
-  Component,
-  ViewChild,
   ChangeDetectorRef,
+  Component,
   OnDestroy,
+  ViewChild,
 } from '@angular/core';
-import { Validators } from '@angular/forms';
-
 import {
+  DtFilterField,
   DtFilterFieldDefaultDataSource,
   DtFilterFieldDefaultDataSourceType,
-  DtFilterField,
 } from '@dynatrace/barista-components/filter-field';
-import { takeUntil } from 'rxjs/operators';
+import {
+  FILTER_FIELD_TEST_DATA,
+  FILTER_FIELD_TEST_DATA_VALIDATORS,
+} from '@dynatrace/testing/fixtures';
 import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
-const TEST_DATA = {
-  autocomplete: [
-    {
-      name: 'custom normal',
-      suggestions: [],
-    },
-    {
-      name: 'custom required',
-      suggestions: [],
-      validators: [
-        { validatorFn: Validators.required, error: 'field is required' },
-      ],
-    },
-    {
-      name: 'custom with multiple',
-      suggestions: [],
-      validators: [
-        { validatorFn: Validators.required, error: 'field is required' },
-        { validatorFn: Validators.minLength(3), error: 'min 3 characters' },
-      ],
-    },
-    {
-      name: 'outer-option',
-      autocomplete: [
-        {
-          name: 'inner-option',
-        },
-      ],
-    },
-    {
-      name: 'Autocomplete with free text options',
-      autocomplete: [
-        { name: 'Autocomplete option 1' },
-        { name: 'Autocomplete option 2' },
-        { name: 'Autocomplete option 3' },
-        {
-          name: 'Autocomplete free text',
-          suggestions: ['Suggestion 1', 'Suggestion 2', 'Suggestion 3'],
-          validators: [],
-        },
-      ],
-    },
-  ],
-};
-
-const TEST_DATA_2 = {
-  autocomplete: [
-    {
-      name: 'AUT',
-      distinct: true,
-      autocomplete: [{ name: 'Linz' }, { name: 'Vienna' }, { name: 'Graz' }],
-    },
-    {
-      name: 'USA',
-      autocomplete: [
-        { name: 'San Francisco' },
-        { name: 'Los Angeles' },
-        { name: 'New York' },
-        { name: 'Custom', suggestions: [] },
-      ],
-    },
-    {
-      name: 'Requests per minute',
-      range: {
-        operators: {
-          range: true,
-          equal: true,
-          greaterThanEqual: true,
-          lessThanEqual: true,
-        },
-        unit: 's',
-      },
-    },
-  ],
-};
-
-const DATA = [TEST_DATA, TEST_DATA_2];
+const DATA = [FILTER_FIELD_TEST_DATA_VALIDATORS, FILTER_FIELD_TEST_DATA];
 
 @Component({
   selector: 'dt-e2e-filter-field',

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

@@ -0,0 +1,8 @@
+<dt-quick-filter [dataSource]="_dataSource" [filters]="_initialFilters">
+  <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>
+
+  my content
+</dt-quick-filter>

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

@@ -0,0 +1,44 @@
+/**
+ * @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 { DtQuickFilterDefaultDataSource } from '@dynatrace/barista-components/experimental/quick-filter';
+import { FILTER_FIELD_TEST_DATA } from '@dynatrace/testing/fixtures';
+
+@Component({
+  selector: 'dt-e2e-quick-filter',
+  templateUrl: 'quick-filter-initial-data.html',
+})
+export class DtE2EQuickFilterInitialData {
+  _dataSource = new DtQuickFilterDefaultDataSource(FILTER_FIELD_TEST_DATA, {
+    showInSidebar: () => true,
+  });
+
+  _initialFilters = [
+    [
+      FILTER_FIELD_TEST_DATA.autocomplete[0],
+      FILTER_FIELD_TEST_DATA.autocomplete[0].autocomplete![1],
+    ],
+    [
+      FILTER_FIELD_TEST_DATA.autocomplete[1],
+      FILTER_FIELD_TEST_DATA.autocomplete[1].autocomplete![2],
+    ],
+  ];
+
+  constructor() {
+    console.log(this._initialFilters);
+  }
+}