Autofocus filter input

i18n/de/messages.de.xlf

@@ -1011,15 +1011,15 @@
         <target>Filter</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">28</context>
+          <context context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0b5c5a43ccd2f696d6e0ad2b745bcc9041d6e380" datatype="html">
         <source>Filter objects by name</source>
         <target>Objekte nach Namen filtern</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">32</context>
+          <context context-type="linenumber">33</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1baabee7b86d4d0935657f254c3b17b5fe4d1257" datatype="html">

i18n/fr/messages.fr.xlf

@@ -1015,15 +1015,15 @@
         <target>Filtrer</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">28</context>
+          <context context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0b5c5a43ccd2f696d6e0ad2b745bcc9041d6e380" datatype="html">
         <source>Filter objects by name</source>
         <target>Filtrer les objets par nom</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">32</context>
+          <context context-type="linenumber">33</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1baabee7b86d4d0935657f254c3b17b5fe4d1257" datatype="html">

i18n/ja/messages.ja.xlf

@@ -443,15 +443,15 @@
         <target>フィルター</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">28</context>
+          <context context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0b5c5a43ccd2f696d6e0ad2b745bcc9041d6e380" datatype="html">
         <source>Filter objects by name</source>
         <target>名前による絞り込み</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">32</context>
+          <context context-type="linenumber">33</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5403a767248e304199592271bba3366d2ca3f903" datatype="html">

i18n/ko/messages.ko.xlf

@@ -651,15 +651,15 @@
         <target>필터</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">28</context>
+          <context context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0b5c5a43ccd2f696d6e0ad2b745bcc9041d6e380" datatype="html">
         <source>Filter objects by name</source>
         <target>이름으로 오브젝트 필터하기</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">32</context>
+          <context context-type="linenumber">33</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5403a767248e304199592271bba3366d2ca3f903" datatype="html">

i18n/messages.xlf

@@ -580,14 +580,14 @@
         <source>Filter</source>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">28</context>
+          <context context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0b5c5a43ccd2f696d6e0ad2b745bcc9041d6e380" datatype="html">
         <source>Filter objects by name</source>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">32</context>
+          <context context-type="linenumber">33</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5403a767248e304199592271bba3366d2ca3f903" datatype="html">

i18n/zh-Hans-SG/messages.zh-Hans-SG.xlf

@@ -651,15 +651,15 @@
         <target>过滤</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">28</context>
+          <context context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0b5c5a43ccd2f696d6e0ad2b745bcc9041d6e380" datatype="html">
         <source>Filter objects by name</source>
         <target>按名称过滤对象</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">32</context>
+          <context context-type="linenumber">33</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5403a767248e304199592271bba3366d2ca3f903" datatype="html">

i18n/zh-Hans/messages.zh-Hans.xlf

@@ -651,15 +651,15 @@
         <target>过滤</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">28</context>
+          <context context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0b5c5a43ccd2f696d6e0ad2b745bcc9041d6e380" datatype="html">
         <source>Filter objects by name</source>
         <target>按名称过滤对象</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">32</context>
+          <context context-type="linenumber">33</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5403a767248e304199592271bba3366d2ca3f903" datatype="html">

i18n/zh-Hant-HK/messages.zh-Hant-HK.xlf

@@ -651,15 +651,15 @@
         <target>過濾</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">28</context>
+          <context context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0b5c5a43ccd2f696d6e0ad2b745bcc9041d6e380" datatype="html">
         <source>Filter objects by name</source>
         <target>按名字過濾對象</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">32</context>
+          <context context-type="linenumber">33</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5403a767248e304199592271bba3366d2ca3f903" datatype="html">

i18n/zh-Hant/messages.zh-Hant.xlf

@@ -651,15 +651,15 @@
         <target>過濾</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">28</context>
+          <context context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0b5c5a43ccd2f696d6e0ad2b745bcc9041d6e380" datatype="html">
         <source>Filter objects by name</source>
         <target>按名字過濾對象</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">32</context>
+          <context context-type="linenumber">33</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5403a767248e304199592271bba3366d2ca3f903" datatype="html">

i18n/zh/messages.zh.xlf

@@ -651,15 +651,15 @@
         <target>过滤</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">28</context>
+          <context context-type="linenumber">29</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0b5c5a43ccd2f696d6e0ad2b745bcc9041d6e380" datatype="html">
         <source>Filter objects by name</source>
         <target>按名称过滤对象</target>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/common/components/list/filter/template.html</context>
-          <context context-type="linenumber">32</context>
+          <context context-type="linenumber">33</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5403a767248e304199592271bba3366d2ca3f903" datatype="html">

src/app/frontend/common/components/list/filter/component.ts

@@ -15,25 +15,31 @@
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
 
-import {Component, ElementRef, EventEmitter, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, EventEmitter, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {ReplaySubject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
 import {Subject} from 'rxjs/Subject';
 
 @Component({
   selector: 'kd-card-list-filter',
   templateUrl: './template.html',
   styleUrls: ['style.scss'],
 })
-export class CardListFilterComponent implements OnInit {
-  @ViewChild('filterInput', {static: true}) private readonly filterInput_: ElementRef;
-  private hidden_ = true;
-  keyUpEvent = new Subject<string>();
+export class CardListFilterComponent implements OnInit, OnDestroy {
   query = '';
-  filterEvent: EventEmitter<boolean> = new EventEmitter<boolean>();
+  keyUpEvent = new Subject<string>();
+  filterEvent = new EventEmitter<boolean>();
+  openedChange = new ReplaySubject<boolean>();
+
+  private hidden_ = true;
+  private readonly debounceTime_ = 500;
+  private readonly unsubscribe_ = new Subject<void>();
 
   ngOnInit(): void {
     this.keyUpEvent
-      .debounceTime(500)
+      .debounceTime(this.debounceTime_)
       .distinctUntilChanged()
+      .pipe(takeUntil(this.unsubscribe_))
       .subscribe(this.onFilterTriggered_.bind(this));
   }
 
@@ -49,18 +55,7 @@ export class CardListFilterComponent implements OnInit {
   switchSearchVisibility(event: Event): void {
     event.stopPropagation();
     this.hidden_ = !this.hidden_;
-
-    if (!this.hidden_) {
-      this.focusInput();
-    }
-  }
-
-  focusInput(): void {
-    // Small timeout is required as input is not yet rendered when method is fired right after
-    // clicking on filter button.
-    setTimeout(() => {
-      this.filterInput_.nativeElement.focus();
-    }, 150);
+    this.openedChange.next(!this.hidden_);
   }
 
   clearInput(event: Event): void {
@@ -71,4 +66,9 @@ export class CardListFilterComponent implements OnInit {
       this.filterEvent.emit(true);
     }
   }
+
+  ngOnDestroy(): void {
+    this.unsubscribe_.next();
+    this.unsubscribe_.complete();
+  }
 }

src/app/frontend/common/components/list/filter/template.html

@@ -19,10 +19,11 @@
   <div class="kd-search-container"
        fxFlex
        fxLayoutAlign="flex-end">
-    <input #filterInput
-           *ngIf="isSearchVisible()"
+    <input *ngIf="isSearchVisible()"
            (keyup)="keyUpEvent.next($event.target.value)"
            (click)="$event.stopPropagation()"
+           kdAutofocus
+           [opened]="openedChange"
            name="search"
            i18n-placeholder
            placeholder="Filter"

src/app/frontend/common/components/module.ts

@@ -15,6 +15,7 @@
 import {NgModule} from '@angular/core';
 
 import {SharedModule} from '../../shared.module';
+import {DirectivesModule} from '../directives/module';
 
 import {ActionbarComponent} from './actionbar/component';
 import {ActionbarDetailActionsComponent} from './actionbar/detailactions/component';
@@ -29,9 +30,9 @@ import {DefaultActionbar} from './actionbars/default/component';
 import {LogsDefaultActionbar} from './actionbars/logsdefault/component';
 import {LogsExecDefaultActionbar} from './actionbars/logsexecdefault/component';
 import {LogsScaleDefaultActionbar} from './actionbars/logsscaledefault/component';
+import {PinDefaultActionbar} from './actionbars/pindefault/component';
 import {ScaleDefaultActionbar} from './actionbars/scaledefault/component';
 import {TriggerDefaultActionbar} from './actionbars/triggerdefault/component';
-import {PinDefaultActionbar} from './actionbars/pindefault/component';
 import {BreadcrumbsComponent} from './breadcrumbs/component';
 import {CardComponent} from './card/component';
 import {ChipDialog} from './chips/chipdialog/dialog';
@@ -47,7 +48,6 @@ import {GraphComponent} from './graph/component';
 import {GraphCardComponent} from './graphcard/component';
 import {GraphMetricsComponent} from './graphmetrics/component';
 import {HiddenPropertyComponent} from './hiddenproperty/component';
-import {HorizontalPodAutoscalerListComponent} from './resourcelist/horizontalpodautoscaler/component';
 import {ResourceLimitListComponent} from './limits/component';
 import {ColumnComponent} from './list/column/component';
 import {MenuComponent} from './list/column/menu/component';
@@ -72,6 +72,7 @@ import {CronJobListComponent} from './resourcelist/cronjob/component';
 import {DaemonSetListComponent} from './resourcelist/daemonset/component';
 import {DeploymentListComponent} from './resourcelist/deployment/component';
 import {EventListComponent} from './resourcelist/event/component';
+import {HorizontalPodAutoscalerListComponent} from './resourcelist/horizontalpodautoscaler/component';
 import {IngressListComponent} from './resourcelist/ingress/component';
 import {JobListComponent} from './resourcelist/job/component';
 import {NamespaceListComponent} from './resourcelist/namespace/component';
@@ -191,7 +192,7 @@ const components = [
 ];
 
 @NgModule({
-  imports: [SharedModule],
+  imports: [SharedModule, DirectivesModule],
   declarations: [...components],
   exports: [...components],
   entryComponents: [ChipDialog, RowDetailComponent, MenuComponent, NamespaceChangeDialog],

src/app/frontend/common/directives/autofocus/directive.ts

@@ -0,0 +1,42 @@
+// Copyright 2017 The Kubernetes Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import {AfterViewInit, Directive, ElementRef, Input, OnDestroy} from '@angular/core';
+import {Observable, Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
+
+@Directive({
+  selector: '[kdAutofocus]',
+})
+export class AutofocusDirective implements AfterViewInit, OnDestroy {
+  @Input() opened: Observable<boolean>;
+
+  private readonly _unsubscribe = new Subject<void>();
+
+  constructor(private readonly _el: ElementRef) {}
+
+  ngAfterViewInit(): void {
+    if (!this.opened) {
+      throw new Error('[opened] event binding is undefined');
+    }
+
+    this.opened
+      .pipe(takeUntil(this._unsubscribe))
+      .subscribe(opened => (opened ? setTimeout(() => this._el.nativeElement.focus()) : null));
+  }
+
+  ngOnDestroy(): void {
+    this._unsubscribe.next();
+    this._unsubscribe.complete();
+  }
+}

src/app/frontend/common/directives/module.ts

@@ -0,0 +1,27 @@
+// Copyright 2017 The Kubernetes Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {NgModule} from '@angular/core';
+
+import {SharedModule} from '../../shared.module';
+import {AutofocusDirective} from './autofocus/directive';
+
+const directives = [AutofocusDirective];
+
+@NgModule({
+  imports: [SharedModule],
+  declarations: [...directives],
+  exports: [...directives],
+})
+export class DirectivesModule {}