Use ng-select for add_filter_select

frontend/src/app/components/filters/query-filters/query-filters.component.html

@@ -51,16 +51,19 @@
       </label>
 
       <div class="advanced-filters--add-filter-value">
-        <select class="advanced-filters--select"
+        <ng-select [items]="remainingFilters"
+                   [clearSearchOnAdd]="true"
+                   [multiple]="false"
+                   [clearable]="true"
+                   [clearOnBackspace]="true"
+                   [closeOnSelect]="true"
+                   [virtualScroll]="true"
+                   [placeholder]="text.please_select"
+                   (change)="onFilterAdded($event)"
                    id="add_filter_select"
-                [ngModel]="filterToBeAdded"
+                   bindLabel="name"
-                (ngModelChange)="onFilterAdded($event)">
+                   appendTo="body">
-          <option [textContent]="text.please_select" value="" disabled></option>
+        </ng-select>
-          <option *ngFor="let filter of remainingFilters"
-                  [textContent]="filter.name"
-                  [ngValue]="filter">
-          </option>
-        </select>
       </div>
 
       <enterprise-banner class="advanced-filters--add-filter-info"

frontend/src/app/components/filters/query-filters/query-filters.component.ts

@@ -28,7 +28,16 @@
 
 import {WorkPackageTableFiltersService} from '../../wp-fast-table/state/wp-table-filters.service';
 import {WorkPackageFiltersService} from "../../filters/wp-filters/wp-filters.service";
-import {ChangeDetectionStrategy, Component, Input, OnChanges, OnDestroy, OnInit, Output} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
 import {QueryFilterInstanceResource} from 'core-app/modules/hal/resources/query-filter-instance-resource';
 import {I18nService} from 'core-app/modules/common/i18n/i18n.service';
 import {componentDestroyed} from 'ng2-rx-componentdestroyed';
@@ -36,6 +45,7 @@ import {QueryFilterResource} from 'core-app/modules/hal/resources/query-filter-r
 import {DebouncedEventEmitter} from 'core-components/angular/debounced-event-emitter';
 import {AngularTrackingHelpers} from "core-components/angular/tracking-functions";
 import {BannersService} from "core-app/modules/common/enterprise/banners.service";
+import {NgSelectComponent} from "@ng-select/ng-select";
 
 const ADD_FILTER_SELECT_INDEX = -1;
 
@@ -46,12 +56,12 @@ const ADD_FILTER_SELECT_INDEX = -1;
 })
 export class QueryFiltersComponent implements OnInit, OnChanges, OnDestroy {
 
+  @ViewChild(NgSelectComponent) public ngSelectComponent:NgSelectComponent;
   @Input() public filters:QueryFilterInstanceResource[];
   @Input() public showCloseFilter:boolean = false;
   @Output() public filtersChanged = new DebouncedEventEmitter<QueryFilterInstanceResource[]>(componentDestroyed(this));
 
 
-  public filterToBeAdded:QueryFilterResource|undefined;
   public remainingFilters:any[] = [];
   public eeShowBanners:boolean = false;
   public focusElementIndex:number = 0;
@@ -92,13 +102,13 @@ export class QueryFiltersComponent implements OnInit, OnChanges, OnDestroy {
     if (filterToBeAdded) {
       let newFilter = this.wpTableFilters.instantiate(filterToBeAdded);
       this.filters.push(newFilter);
-      this.filterToBeAdded = undefined;
 
       const index = this.currentFilterLength();
       this.updateFilterFocus(index);
       this.updateRemainingFilters();
 
       this.filtersChanged.emit(this.filters);
+      this.ngSelectComponent.clearItem(filterToBeAdded);
     }
   }
 

spec/features/work_packages/table/queries/filter_spec.rb

@@ -214,10 +214,11 @@ describe 'filter work packages', js: true do
     end
 
     it 'allows filtering, saving and retrieving the saved filter' do
-      filters.open
 
-      expect(page).to have_selector('#add_filter_select option', text: list_cf.name, wait: 10)
+      # Wait for form to load
+      filters.expect_loaded
 
+      filters.open
       filters.add_filter_by(list_cf.name,
                             'is not',
                             list_cf.custom_options.last.value,

spec/support/components/ng_select_autocomplete_helpers.rb

@@ -33,7 +33,7 @@ module Components
       text = select_text.presence || query
 
       # click the element to select it
-      target_dropdown.find('.ng-option', text: text).click
+      target_dropdown.find('.ng-option', text: text, match: :first).click
     end
   end
 end

spec/support/components/work_packages/filters.rb

@@ -74,8 +74,15 @@ module Components
         expect(page).to have_conditional_selector(present, '.advanced-filters--add-filter-value option', text: name)
       end
 
+      def expect_loaded
+        expect(filter_button).to have_selector('.badge', wait: 20)
+      end
+
       def add_filter_by(name, operator, value, selector = nil)
-        select name, from: "add_filter_select"
+        select_autocomplete page.find('.advanced-filters--add-filter-value'),
+                            query: name,
+                            results_selector: '.ng-dropdown-panel-items'
+
 
         set_filter(name, operator, value, selector)
       end