UI: rule chain selector search code cleanup

ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.html

@@ -33,7 +33,7 @@
     <mat-option *ngIf="!(filteredRuleChains | async)?.length" [value]="null" class="tb-not-found">
       <div class="tb-not-found-content" (click)="$event.stopPropagation()">
         <span>
-          {{ translate.get('rulechain.no-rulechains-matching', {entity: searchText}) | async }}
+          {{ 'rulechain.no-rulechains-matching' | translate : {entity: searchText} }}
         </span>
       </div>
     </mat-option>

ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.ts

@@ -14,18 +14,10 @@
 /// limitations under the License.
 ///
 
-import {
+import { AfterViewInit, Component, ElementRef, Inject, InjectionToken, ViewChild } from '@angular/core';
-  AfterViewInit,
-  Component,
-  ElementRef,
-  Inject,
-  InjectionToken,
-  OnDestroy,
-  ViewChild
-} from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { Observable, of, Subject } from 'rxjs';
+import { Observable, of } from 'rxjs';
-import { catchError, debounceTime, distinctUntilChanged, map, switchMap, takeUntil, startWith, share } from 'rxjs/operators';
+import { catchError, debounceTime, distinctUntilChanged, map, share, startWith, switchMap } from 'rxjs/operators';
 import { PageLink } from '@shared/models/page/page-link';
 import { Direction } from '@shared/models/page/sort-order';
 import { emptyPageData, PageData } from '@shared/models/page/page-data';
@@ -33,7 +25,6 @@ import { OverlayRef } from '@angular/cdk/overlay';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { RuleChain, RuleChainType } from '@shared/models/rule-chain.models';
 import { RuleChainService } from '@core/http/rule-chain.service';
-import { TranslateService } from '@ngx-translate/core';
 
 export const RULE_CHAIN_SELECT_PANEL_DATA = new InjectionToken<any>('RuleChainSelectPanelData');
 
@@ -47,10 +38,10 @@ export interface RuleChainSelectPanelData {
   templateUrl: './rule-chain-select-panel.component.html',
   styleUrls: ['./rule-chain-select-panel.component.scss']
 })
-export class RuleChainSelectPanelComponent implements AfterViewInit, OnDestroy {
+export class RuleChainSelectPanelComponent implements AfterViewInit {
 
   ruleChainId: string;
-  ruleChainType: RuleChainType;
+  private readonly ruleChainType: RuleChainType;
 
   selectRuleChainGroup: FormGroup;
 
@@ -65,11 +56,9 @@ export class RuleChainSelectPanelComponent implements AfterViewInit, OnDestroy {
   result?: RuleChain;
 
   private dirty = false;
-  private destroy$ = new Subject<void>();
 
   constructor(@Inject(RULE_CHAIN_SELECT_PANEL_DATA) public data: RuleChainSelectPanelData,
-              public overlayRef: OverlayRef,
+              private overlayRef: OverlayRef,
-              public translate: TranslateService,
               private fb: FormBuilder,
               private ruleChainService: RuleChainService) {
     this.ruleChainId = data.ruleChainId;
@@ -83,8 +72,7 @@ export class RuleChainSelectPanelComponent implements AfterViewInit, OnDestroy {
         startWith(''),
         distinctUntilChanged((a: string, b: string) => a.trim() === b.trim()),
         switchMap(name => this.fetchRuleChains(name)),
-        share(),
+        share()
-        takeUntil(this.destroy$)
       );
   }
 
@@ -94,11 +82,6 @@ export class RuleChainSelectPanelComponent implements AfterViewInit, OnDestroy {
     }, 0);
   }
 
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
   selected(event: MatAutocompleteSelectedEvent): void {
     this.clear();
     this.ruleChainSelected = true;
@@ -108,7 +91,7 @@ export class RuleChainSelectPanelComponent implements AfterViewInit, OnDestroy {
     this.overlayRef.dispose();
   }
 
-  fetchRuleChains(searchText?: string): Observable<Array<RuleChain>> {
+  private fetchRuleChains(searchText?: string): Observable<Array<RuleChain>> {
     this.searchText = searchText;
     const pageLink = new PageLink(50, 0, searchText, {
       property: 'name',

ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss

@@ -29,12 +29,7 @@
       }
     }
   }
-}
+  .disabled {
-
+    opacity: 0.5;
-.cursor-pointer {
+  }
-  cursor: pointer;
-}
-
-.disabled {
-  opacity: 0.5;
 }

ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts

@@ -18,7 +18,6 @@ import { Component, forwardRef, Injector, Input, StaticProvider, ViewContainerRe
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TooltipPosition } from '@angular/material/tooltip';
 import { RuleChain, RuleChainType } from '@shared/models/rule-chain.models';
-import { RuleChainService } from '@core/http/rule-chain.service';
 import { isDefinedAndNotNull } from '@core/utils';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
@@ -61,8 +60,7 @@ export class RuleChainSelectComponent implements ControlValueAccessor {
 
   private propagateChange = (v: any) => { };
 
-  constructor(private ruleChainService: RuleChainService,
+  constructor(private overlay: Overlay,
-              private overlay: Overlay,
               private viewContainerRef: ViewContainerRef) {
   }