feat(operators): add searchbar

src/app/operators/operators.component.html

@@ -5,6 +5,13 @@
                [fixedInViewport]="true"
                class="operator-list-sidenav"
                #operatorSidenav>
+    <form>
+      <mat-form-field class="full-width-form">
+        <mat-label>Search</mat-label>
+        <input matInput value="" [formControl]="searchInput">
+        <mat-icon matSuffix>search</mat-icon>
+      </mat-form-field>
+    </form>
     <mat-nav-list *ngFor="let category of categories"
                   class="operator-list">
       <h3 mat-subheader

src/app/operators/operators.component.scss

@@ -27,3 +27,9 @@ $subheader-color: #333;
   bottom: 10px;
   z-index: 4;
 }
+
+.full-width-form{
+  width: 95%;
+  height: 48px;
+  padding: 6px;
+}

src/app/operators/operators.component.ts

@@ -5,7 +5,6 @@ import {
   OnInit,
   OnDestroy,
   AfterContentInit,
-  ChangeDetectionStrategy,
   ViewChild
 } from '@angular/core';
 import {
@@ -15,15 +14,20 @@ import {
   animate,
   transition
 } from '@angular/animations';
-import { Router, ActivatedRoute } from '@angular/router';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { MatSidenav } from '@angular/material';
-import { Subscription } from 'rxjs/Subscription';
 import { Subject } from 'rxjs/Subject';
-import { Observable } from 'rxjs/Observable';
-import { filter, takeUntil } from 'rxjs/operators';
+import {
+  filter,
+  takeUntil,
+  flatMap,
+  toArray,
+  debounceTime
+} from 'rxjs/operators';
 import { OperatorDoc } from '../../operator-docs/operator.model';
 import { OperatorMenuService } from '../core/services/operator-menu.service';
+import { FormControl } from '@angular/forms';
+import { from } from 'rxjs/observable/from';
 
 const OPERATOR_MENU_GAP_LARGE = 64;
 const OPERATOR_MENU_GAP_SMALL = 54;
@@ -66,15 +70,35 @@ export class OperatorsComponent implements OnInit, AfterContentInit, OnDestroy {
   public categories: string[];
   private _onDestroy = new Subject();
 
+  public searchInput: FormControl;
+
   constructor(
     private _breakpointObserver: BreakpointObserver,
     private _operatorMenuService: OperatorMenuService,
     @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[]
   ) {}
 
   ngOnInit() {
-    this.groupedOperators = groupOperatorsByType(this.operators);
-    this.categories = Object.keys(this.groupedOperators);
+    this.initOperatorList(this.operators);
+    this.searchInput = new FormControl();
+    const search$ = this.searchInput.valueChanges;
+    const entries$ = from(this.operators);
+    const searchResult$ = search$.pipe(
+      debounceTime(300),
+      flatMap(options =>
+        entries$.pipe(
+          filter(
+            (value: OperatorDoc) =>
+              value.name.indexOf(options) !== -1 ||
+              value.operatorType.indexOf(options) !== -1
+          ),
+          toArray()
+        )
+      )
+    );
+    searchResult$.subscribe((search: OperatorDoc[]) => {
+      this.initOperatorList(search);
+    });
   }
 
   ngAfterContentInit() {
@@ -105,6 +129,11 @@ export class OperatorsComponent implements OnInit, AfterContentInit, OnDestroy {
   ngOnDestroy() {
     this._onDestroy.next();
   }
+
+  private initOperatorList(operators: OperatorDoc[]) {
+    this.groupedOperators = groupOperatorsByType(operators);
+    this.categories = Object.keys(this.groupedOperators);
+  }
 }
 
 export function groupOperatorsByType(operators: OperatorDoc[]): OperatorDocMap {

src/app/operators/operators.module.ts

@@ -21,6 +21,7 @@ import { WalkthroughComponent } from './components/walkthrough/walkthrough.compo
 import { HighlightJsDirective } from './directives/highlight-js.directive';
 import { SafeUrlPipe } from './pipes/safe-url.pipe';
 import { MaterialModule } from '../material/material.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -42,6 +43,8 @@ import { MaterialModule } from '../material/material.module';
     MaterialModule,
     OperatorsRoutingModule,
     LayoutModule,
+    FormsModule,
+    ReactiveFormsModule,
     TranslateModule
   ],
   providers: [