fix(console): policy reset for custom, header org filter, idp add dialog (#865)

* remove reset button if not default, rem load

* dirty focus fix

* use idptype in dialog

* remove logs

* lint

* revert idp add changes

* log error

* lint

console/src/app/app.component.ts

@@ -2,13 +2,14 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { DOCUMENT, ViewportScroller } from '@angular/common';
 import { Component, ElementRef, HostBinding, Inject, OnDestroy, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
 import { MatIconRegistry } from '@angular/material/icon';
 import { MatDrawer } from '@angular/material/sidenav';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Router, RouterOutlet } from '@angular/router';
 import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
-import { Observable, of, Subscription } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { BehaviorSubject, from, Observable, of, Subscription } from 'rxjs';
+import { catchError, debounceTime, finalize, map, take } from 'rxjs/operators';
 
 import { accountCard, navAnimations, routeAnimations, toolbarAnimation } from './animations';
 import {
@@ -48,17 +49,18 @@ export class AppComponent implements OnDestroy {
 
     public showAccount: boolean = false;
     public org!: Org.AsObject;
-    public orgs: Org.AsObject[] = [];
+    public orgs$: Observable<Org.AsObject[]> = of([]);
     public profile!: UserProfileView.AsObject;
     public isDarkTheme: Observable<boolean> = of(true);
 
-    public orgLoading: boolean = false;
+    public orgLoading$: BehaviorSubject<any> = new BehaviorSubject(false);
 
     public showProjectSection: boolean = false;
 
     public grantedProjectsCount: number = 0;
     public ownedProjectsCount: number = 0;
 
+    public filterControl: FormControl = new FormControl('');
     private authSub: Subscription = new Subscription();
     private orgSub: Subscription = new Subscription();
 
@@ -148,7 +150,6 @@ export class AppComponent implements OnDestroy {
 
         this.orgSub = this.authService.activeOrgChanged.subscribe(org => {
             this.org = org;
-
             this.getProjectCount();
         });
 
@@ -172,6 +173,12 @@ export class AppComponent implements OnDestroy {
         this.translate.onLangChange.subscribe((language: LangChangeEvent) => {
             this.document.documentElement.lang = language.lang;
         });
+
+        this.filterControl.valueChanges.pipe(debounceTime(300)).subscribe(value => {
+            this.loadOrgs(
+                value.trim().toLowerCase(),
+            );
+        });
     }
 
     public ngOnDestroy(): void {
@@ -188,14 +195,17 @@ export class AppComponent implements OnDestroy {
             query.setValue(filter);
         }
 
-        this.orgLoading = true;
-        this.authService.SearchMyProjectOrgs(10, 0, query ? [query] : undefined).then(res => {
-            this.orgs = res.toObject().resultList;
-            this.orgLoading = false;
-        }).catch(error => {
-            this.toast.showError(error);
-            this.orgLoading = false;
-        });
+        this.orgLoading$.next(true);
+        this.orgs$ = from(this.authService.SearchMyProjectOrgs(10, 0, query ? [query] : undefined)).pipe(
+            map(resp => {
+                return resp.toObject().resultList;
+            }),
+            catchError(() => of([])),
+            finalize(() => {
+                this.orgLoading$.next(false);
+                this.focusFilter();
+            }),
+        );
     }
 
     public prepareRoute(outlet: RouterOutlet): boolean {
@@ -231,7 +241,9 @@ export class AppComponent implements OnDestroy {
     public setActiveOrg(org: Org.AsObject): void {
         this.org = org;
         this.authService.setActiveOrg(org);
-        this.router.navigate(['/']);
+        this.authService.zitadelPermissionsChanged.pipe(take(1)).subscribe(() => {
+            this.router.navigate(['/']);
+        });
     }
 
     private getProjectCount(): void {
@@ -248,13 +260,6 @@ export class AppComponent implements OnDestroy {
         });
     }
 
-    public applyFilter(event: Event): void {
-        const filterValue = (event.target as HTMLInputElement).value;
-        this.loadOrgs(
-            filterValue.trim().toLowerCase(),
-        );
-    }
-
     focusFilter(): void {
         setTimeout(() => {
             this.input.nativeElement.focus();