feat(filter-field): Display a hint when partial options are loaded.

Fixes #APM-277597
dynatrace-oss · May 31, 2021 · f08b4a9 · f08b4a9
1 parent bee825d
commit f08b4a9
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 26 deletions.
diff --git a/libs/barista-components/filter-field/src/filter-field-config.ts b/libs/barista-components/filter-field/src/filter-field-config.ts
@@ -21,6 +21,21 @@ import {
 } from './filter-field-util';
 import { DtFilterValue, DtFilterFieldTagData } from './types';
 
+/** InjectionToken of the Filter Field options. */
+export const DT_FILTER_FIELD_CONFIG = new InjectionToken<string>(
+  'DT_FILTER_FIELD_CONFIG',
+);
+
+/** The config that can be passed to the dt-filter-field component for customization */
+export interface DtFilterFieldConfig {
+  /** Message displayed in the options panel when partial results are listed */
+  partialHintMessage: string;
+}
+
+export const DT_FILTER_FIELD_DEFAULT_CONFIG: DtFilterFieldConfig = {
+  partialHintMessage: 'Pick or provide free text',
+};
+
 /** User defined parser function for tag key:values, overrides default parser function */
 export type TagParserFunction = (
   filterValues: DtFilterValue[],

diff --git a/libs/barista-components/filter-field/src/filter-field.html b/libs/barista-components/filter-field/src/filter-field.html
@@ -87,34 +87,42 @@
           >
         </dt-option>
       </ng-container>
-      <ng-container
-        *ngFor="let optionOrGroupDef of _autocompleteOptionsOrGroups"
-      >
-        <dt-optgroup
-          *ngIf="optionOrGroupDef.group; else options"
-          [label]="optionOrGroupDef.group!.label"
+      <ng-container>
+        <div
+          class="dt-filter-field-hint-partial"
+          *ngIf="_currentDef?.autocomplete?.partial"
         >
-          <dt-option
-            *ngFor="let optionDef of optionOrGroupDef.group!.options"
-            [value]="optionDef"
-            [disabled]="optionDef.option!.disabled"
-            [attr.title]="_getTitle(optionDef.option)"
-          >
-            <dt-highlight [term]="_inputValue">{{
-              optionDef.option!.viewValue
-            }}</dt-highlight>
-          </dt-option>
-        </dt-optgroup>
-        <ng-template #options>
-          <dt-option
-            [value]="optionOrGroupDef"
-            [attr.title]="_getTitle(optionOrGroupDef.option)"
+          {{ _filterFieldConfig.partialHintMessage }}
+        </div>
+        <ng-container
+          *ngFor="let optionOrGroupDef of _autocompleteOptionsOrGroups"
+        >
+          <dt-optgroup
+            *ngIf="optionOrGroupDef.group; else options"
+            [label]="optionOrGroupDef.group!.label"
           >
-            <dt-highlight [term]="_inputValue">{{
-              optionOrGroupDef.option!.viewValue
-            }}</dt-highlight>
-          </dt-option>
-        </ng-template>
+            <dt-option
+              *ngFor="let optionDef of optionOrGroupDef.group!.options"
+              [value]="optionDef"
+              [disabled]="optionDef.option!.disabled"
+              [attr.title]="_getTitle(optionDef.option)"
+            >
+              <dt-highlight [term]="_inputValue">{{
+                optionDef.option!.viewValue
+              }}</dt-highlight>
+            </dt-option>
+          </dt-optgroup>
+          <ng-template #options>
+            <dt-option
+              [value]="optionOrGroupDef"
+              [attr.title]="_getTitle(optionOrGroupDef.option)"
+            >
+              <dt-highlight [term]="_inputValue">{{
+                optionOrGroupDef.option!.viewValue
+              }}</dt-highlight>
+            </dt-option>
+          </ng-template>
+        </ng-container>
       </ng-container>
     </dt-autocomplete>
 

diff --git a/libs/barista-components/filter-field/src/filter-field.scss b/libs/barista-components/filter-field/src/filter-field.scss
@@ -67,6 +67,7 @@ $dt-filter-field-inner-height: 30px;
   height: $dt-filter-field-inner-height;
   align-items: center;
   margin-right: 8px;
+
   ::ng-deep svg {
     width: 16px;
     height: 16px;
@@ -179,6 +180,17 @@ button.dt-filter-field-clear-all-button-hidden {
   margin: 0;
 }
 
+::ng-deep .dt-filter-field-panel .dt-filter-field-hint-partial {
+  @include dt-text-ellipsis();
+  @include dt-custom-font-styles(
+    $custom-color: $gray-500,
+    $custom-font-size: 12px
+  );
+  text-align: center;
+  border-bottom: solid 1px $gray-200;
+  padding: 0 2px;
+}
+
 ::ng-deep .dt-filter-field-panel .dt-option {
   max-width: 100%;
   overflow: hidden;

diff --git a/libs/barista-components/filter-field/src/filter-field.spec.ts b/libs/barista-components/filter-field/src/filter-field.spec.ts
@@ -72,6 +72,7 @@ import {
   getInput,
   getTagButtons,
   isClearAllVisible,
+  getPartialResultsHintPanel,
 } from './testing/filter-field-test-helpers';
 import { DtAutocompleteValue, DtFilterValue } from './types';
 
@@ -1146,11 +1147,17 @@ describe('DtFilterField', () => {
       let options = getOptions(overlayContainerElement);
       expect(options).toHaveLength(0);
 
+      let hintPanel = getPartialResultsHintPanel(overlayContainerElement);
+      expect(hintPanel).toBeNull();
+
       fixture.componentInstance.dataSource.data = DATA_PARTIAL;
       fixture.detectChanges();
       advanceFilterfieldCycle(true, true);
       tick();
 
+      hintPanel = getPartialResultsHintPanel(overlayContainerElement);
+      expect(hintPanel).not.toBeNull();
+
       options = getOptions(overlayContainerElement);
       expect(options).toHaveLength(4);
       expect(options[0].textContent).toContain('Zürich');

diff --git a/libs/barista-components/filter-field/src/filter-field.ts b/libs/barista-components/filter-field/src/filter-field.ts
@@ -89,8 +89,11 @@ import {
 import {
   DT_FILTER_EDITION_VALUES_DEFAULT_PARSER_CONFIG,
   DT_FILTER_EDITION_VALUES_PARSER_CONFIG,
+  DT_FILTER_FIELD_CONFIG,
+  DT_FILTER_FIELD_DEFAULT_CONFIG,
   DT_FILTER_VALUES_DEFAULT_PARSER_CONFIG,
   DT_FILTER_VALUES_PARSER_CONFIG,
+  DtFilterFieldConfig,
   EditionParserFunction,
   TagParserFunction,
 } from './filter-field-config';
@@ -557,7 +560,13 @@ export class DtFilterField<T = any>
     @Optional()
     @Inject(DT_FILTER_EDITION_VALUES_PARSER_CONFIG)
     private editionValuesParser: EditionParserFunction,
+    @Optional()
+    @Inject(DT_FILTER_FIELD_CONFIG)
+    readonly _filterFieldConfig: DtFilterFieldConfig,
   ) {
+    this._filterFieldConfig =
+      this._filterFieldConfig || DT_FILTER_FIELD_DEFAULT_CONFIG;
+
     this.tagValuesParser =
       this.tagValuesParser || DT_FILTER_VALUES_DEFAULT_PARSER_CONFIG;
 

diff --git a/libs/barista-components/filter-field/src/testing/filter-field-test-helpers.ts b/libs/barista-components/filter-field/src/testing/filter-field-test-helpers.ts
@@ -239,6 +239,12 @@ export function customParser(
   return tagData;
 }
 
+export function getPartialResultsHintPanel(
+  overlayContainerElement: HTMLElement,
+): HTMLElement | null {
+  return overlayContainerElement.querySelector('.dt-filter-field-hint-partial');
+}
+
 export function getOptions(
   overlayContainerElement: HTMLElement,
 ): HTMLElement[] {