feat(filter-field): Added an overlay if the tag value is being ellipsed.

To provide the full value on an ellipsed filter field tag, we have added
a DtOverlay to the element, if it is being ellipsed. The overlay should
not show up if the value is not ellipsed.

Fixes #392

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

@@ -23,56 +23,92 @@ import {
   input,
   clearAll,
   filterTags,
+  tagOverlay,
 } from './filter-field.po';
 import { Selector } from 'testcafe';
 
-fixture('Filter Field').page('http://localhost:4200/filter-field');
+fixture.only('Filter Field').page('http://localhost:4200/filter-field');
 
-test('should not show a error box if there is no validator provided', async (testController: TestController) => {
-  await clickOption(1);
-  await testController.typeText(input, 'abc');
-  await testController.expect(await errorBox.exists).notOk();
+test('should not show a error box if there is no validator provided', async () => {
+  await clickOption(1)
+    .typeText(input, 'abc')
+    .expect(errorBox.exists)
+    .notOk();
 });
 
-test('should show a error box if does not meet the validation function', async (testController: TestController) => {
-  await clickOption(3);
-  await testController.typeText(input, 'a');
-  await testController.expect(await errorBox.exists).ok();
-  await testController
-    .expect(await errorBox.innerText)
+test('should show a error box if does not meet the validation function', async () => {
+  await clickOption(3)
+    .typeText(input, 'a')
+    .expect(errorBox.exists)
+    .ok()
+    .expect(errorBox.innerText)
     .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 (testController: TestController) => {
-  await clickOption(3);
-  await testController.typeText(input, 'a');
-  await testController.pressKey('backspace');
-  await testController.expect(await errorBox.exists).ok();
-  await testController
-    .expect(await errorBox.innerText)
+test.skip('should show is required error when the input is dirty', async () => {
+  await clickOption(3)
+    .typeText(input, 'a')
+    .pressKey('backspace')
+    .expect(errorBox.exists)
+    .ok()
+    .expect(errorBox.innerText)
     .match(/field is required/gm);
 });
 
-test('should hide the error box when the node was deleted', async (testController: TestController) => {
-  await clickOption(3);
-  await testController.pressKey('backspace').pressKey('backspace');
-  await testController.expect(await errorBox.exists).notOk();
+test('should hide the error box when the node was deleted', async () => {
+  await clickOption(3)
+    .pressKey('backspace')
+    .pressKey('backspace')
+    .expect(errorBox.exists)
+    .notOk();
 });
 
-test('should remove all filters when clicking the clear-all button', async (testController: TestController) => {
+test('should remove all filters when clicking the clear-all button', async () => {
   // Create a new filter by clicking the outer- and inner-option
   await clickOption(4);
-  await clickOption(1);
 
-  // Click somewhere outside so the clear-all button appears
-  await testController.click(Selector('.outside'));
-  await testController.wait(300);
-  await testController.expect(await clearAll.exists).ok();
+  await clickOption(1)
+    // Click somewhere outside so the clear-all button appears
+    .click(Selector('.outside'))
+    .wait(300)
+    .expect(clearAll.exists)
+    .ok()
+    // Click the clear all-button, the created filter should be removed
+    .click(clearAll)
+    .wait(300)
+    .expect(filterTags.exists)
+    .notOk();
+});
+
+test('should not show the overlay on a tag because the tag value is not ellipsed', async () => {
+  await clickOption(1)
+    .typeText(input, 'abcdefghijklmno')
+    // Wait for a certain amount of time to let the filterfield refresh
+    .wait(250)
+    // Select the free text node and start typing
+    .pressKey('enter')
+    .wait(250)
+    // Hover the filter field tag
+    .hover(filterTags)
+    .expect(tagOverlay.exists)
+    .notOk();
+});
 
-  // Click the clear all-button, the created filter should be removed
-  await testController.click(clearAll);
-  await testController.wait(300);
-  await testController.expect(await filterTags.exists).notOk();
+test('should show the overlay on a tag because the tag value is ellipsed', async () => {
+  await clickOption(1)
+    .typeText(
+      input,
+      'abcdefghijklmnopqrstuvwxyz, 1234567890, abcdefghijklmnopqrstuvwxyz',
+    )
+    // Wait for a certain amount of time to let the filterfield refresh
+    .wait(250)
+    // Select the free text node and start typing
+    .pressKey('enter')
+    .wait(250)
+    // Hover the filter field tag
+    .hover(filterTags)
+    .expect(tagOverlay.exists)
+    .ok();
 });

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

@@ -21,15 +21,15 @@ export const filterField = Selector('#filter-field');
 export const option = (nth: number) => Selector(`.dt-option:nth-child(${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');
 
 export const input = Selector('input');
 
-export async function clickOption(
+export function clickOption(
   nth: number,
   testController?: TestController,
-): Promise<void> {
+): TestControllerPromise {
   const controller = testController || t;
 
-  await controller.click(filterField);
-  await controller.click(option(nth));
+  return controller.click(filterField).click(option(nth));
 }

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

@@ -24,6 +24,7 @@ import { DtOptionModule } from '@dynatrace/barista-components/core';
 import { DtIconModule } from '@dynatrace/barista-components/icon';
 import { DtInputModule } from '@dynatrace/barista-components/input';
 import { DtLoadingDistractorModule } from '@dynatrace/barista-components/loading-distractor';
+import { DtOverlayModule } from '@dynatrace/barista-components/overlay';
 
 import { DtFilterField } from './filter-field';
 import { DtFilterFieldRange } from './filter-field-range/filter-field-range';
@@ -40,6 +41,7 @@ import { DtFilterFieldTag } from './filter-field-tag/filter-field-tag';
     DtInputModule,
     DtButtonGroupModule,
     DtLoadingDistractorModule,
+    DtOverlayModule,
   ],
   exports: [
     DtAutocompleteModule,

components/filter-field/src/filter-field-tag/filter-field-tag.html

@@ -1,10 +1,4 @@
-<button
-  dt-button
-  variant="nested"
-  class="dt-filter-field-tag-label"
-  [disabled]="!editable"
-  (click)="_handleEdit($event)"
->
+<ng-template #tagContent>
   <div
     class="dt-filter-field-tag-container"
     [class.dt-filter-field-tag-value-isfreetext]="data && data.isFreeText"
@@ -14,9 +8,25 @@
       class="dt-filter-field-tag-key"
       [attr.data-separator]="data.separator ? data.separator! : ':'"
     >{{data.key}}</span>
-    <span class="dt-filter-field-tag-value" *ngIf="data?.value">{{data.value}}</span>
+    <span class="dt-filter-field-tag-value" *ngIf="data?.value" #valueSpan>{{data.value}}</span>
   </div>
-</button>
+</ng-template>
+
+<div
+  [dtOverlay]="tagContent"
+  [dtOverlayConfig]="_overlayConfig"
+  [disabled]="_tooltipDisabled"
+>
+  <button
+    dt-button
+    variant="nested"
+    class="dt-filter-field-tag-label"
+    [disabled]="!editable"
+    (click)="_handleEdit($event)"
+  >
+    <ng-container *ngTemplateOutlet="tagContent"></ng-container>
+  </button>
+</div>
 <button
   dt-icon-button
   variant="nested"

components/filter-field/src/filter-field-tag/filter-field-tag.scss

@@ -73,8 +73,12 @@
 
 .dt-filter-field-tag-value {
   color: $turquoise-600;
-  max-width: 300px;
   margin-left: 4px;
+}
+
+.dt-filter-field-tag-label .dt-filter-field-tag-value {
+  --dt-filter-field-max-width: 300px;
+  max-width: var(--dt-filter-field-max-width);
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;