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
 }

README.md

@@ -8,7 +8,7 @@
 [Barista](https://barista.dynatrace.com) is the name of
 [Dynatrace](https://www.dynatrace.com)'s design system, that contains all
 ingredients to create extraordinary user experiences. Like a barista picks the
-best ingredients for their coffee – and we love coffee!
+best ingredients for their coffee – and we love coffee!
 
 One major part of the Barista design system is our
 [components library](https://github.com/dynatrace-oss/barista/tree/master/components)

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

@@ -138,6 +138,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.e2e.ts

@@ -47,7 +47,7 @@ test('should not show a error box if there is no validator provided', async () =
 
 test('should show a error box if does not meet the validation function', async () => {
   await clickOption(3)
-    .typeText(input, 'a')
+    .typeText(input, 'a', { speed: 0.1 })
     // Wait for the filter field to refresh the error message.
     .wait(250)
     .expect(errorBox.exists)
@@ -56,12 +56,10 @@ test('should show a error box if does not meet the validation function', async (
     .match(/min 3 characters/gm);
 });
 
-// TODO: lukas.holzer investigate why this test is flaky on Browserstack
-// tslint:disable-next-line: dt-no-focused-tests
-test.skip('should show is required error when the input is dirty', async () => {
+test('should show is required error when the input is dirty', async () => {
   await clickOption(3)
-    .typeText(input, 'a')
-    .pressKey('backspace')
+    .typeText(input, 'a', { speed: 0.1 })
+    .pressKey('backspace', { speed: 0.1 })
     .expect(errorBox.exists)
     .ok()
     .expect(errorBox.innerText)
@@ -173,7 +171,7 @@ test('should choose a freetext node with the mouse and submit the correct value
 
   // Select the free text node and start typing
   await clickOption(4)
-    // Wait for a certain amout fo time to let the filterfield refresh
+    // Wait for a certain amount fo time to let the filterfield refresh
     .wait(250)
     // Send the correct value into the input field
     .typeText(input, 'Custom selection');
@@ -190,7 +188,7 @@ test('should choose a freetext node with the mouse and submit the correct value
     .expect(tags.length)
     .eql(1)
     .expect(tags[0])
-    .eql('Autocomplete with free text optionsCustom selection');
+    .match(/Autocomplete with free text options/);
 });
 
 test('should choose a freetext node with the mouse and submit an empty value immediately', async (testController: TestController) => {

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

@@ -23,6 +23,12 @@ 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);
+  }
+}