feat(console-v2): save table filters as queryparams, smtp update (#3624)

* show warn for missing smtp

* org table, failed events, views table fallback, org table filters

* log notification providers, user filter, copy to clip fix

* lint

Co-authored-by: Livio Amstutz <[email protected]>

console/src/app/modules/org-table/org-table.component.html

@@ -1,5 +1,4 @@
 <cnsl-refresh-table
-  *ngIf="dataSource"
   [hideRefresh]="true"
   (refreshed)="refresh()"
   [dataSize]="dataSource.data.length"
@@ -33,7 +32,7 @@
 
     <ng-container matColumnDef="primaryDomain">
       <th mat-header-cell *matHeaderCellDef>{{ 'ORG.PAGES.PRIMARYDOMAIN' | translate }}</th>
-      <td mat-cell *matCellDef="let org">
+      <td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">
         <span>{{ org.primaryDomain }}</span>
         <button
           color="primary"
@@ -101,6 +100,6 @@
     [length]="totalResult || 0"
     [pageSize]="initialLimit"
     [pageSizeOptions]="[10, 20, 50, 100]"
-    (page)="changePage($event)"
+    (page)="changePage()"
   ></cnsl-paginator>
 </cnsl-refresh-table>

console/src/app/modules/org-table/org-table.component.ts

@@ -2,16 +2,19 @@ import { Component, Input, ViewChild } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
-import { BehaviorSubject, catchError, finalize, from, map, Observable, of } from 'rxjs';
+import { BehaviorSubject, catchError, finalize, from, map, Observable, of, Subject, switchMap, takeUntil } from 'rxjs';
 import { Org, OrgQuery, OrgState } from 'src/app/proto/generated/zitadel/org_pb';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
+import { ToastService } from 'src/app/services/toast.service';
 
-import { PageEvent, PaginatorComponent } from '../paginator/paginator.component';
+import { PaginatorComponent } from '../paginator/paginator.component';
 
 enum OrgListSearchKey {
   NAME = 'NAME',
 }
 
+type Request = { limit: number; offset: number; queries: OrgQuery[] };
+
 @Component({
   selector: 'cnsl-org-table',
   templateUrl: './org-table.component.html',
@@ -23,7 +26,7 @@ export class OrgTableComponent {
   @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
   @ViewChild('input') public filter!: Input;
 
-  public dataSource!: MatTableDataSource<Org.AsObject>;
+  public dataSource: MatTableDataSource<Org.AsObject> = new MatTableDataSource<Org.AsObject>([]);
   public displayedColumns: string[] = ['name', 'state', 'primaryDomain', 'creationDate', 'changeDate'];
   private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@@ -35,27 +38,40 @@ export class OrgTableComponent {
   public filterOpen: boolean = false;
   public OrgState: any = OrgState;
   public copied: string = '';
-  constructor(private authService: GrpcAuthService, private router: Router) {
-    this.loadOrgs(this.initialLimit, 0);
+
+  private searchQueries: OrgQuery[] = [];
+  private destroy$: Subject<void> = new Subject();
+  private requestOrgs$: BehaviorSubject<Request> = new BehaviorSubject<Request>({
+    limit: this.initialLimit,
+    offset: 0,
+    queries: [],
+  });
+  private requestOrgsObservable$ = this.requestOrgs$.pipe(takeUntil(this.destroy$));
+
+  constructor(private authService: GrpcAuthService, private router: Router, private toast: ToastService) {
+    this.requestOrgs$.next({ limit: this.initialLimit, offset: 0, queries: this.searchQueries });
     this.authService.getActiveOrg().then((org) => (this.activeOrg = org));
+
+    this.requestOrgsObservable$.pipe(switchMap((req) => this.loadOrgs(req))).subscribe((orgs) => {
+      this.dataSource = new MatTableDataSource<Org.AsObject>(orgs);
+    });
   }
 
-  public loadOrgs(limit: number, offset: number, queries?: OrgQuery[]): void {
+  public loadOrgs(request: Request): Observable<Org.AsObject[]> {
     this.loadingSubject.next(true);
 
-    from(this.authService.listMyProjectOrgs(limit, offset, queries))
-      .pipe(
-        map((resp) => {
-          this.timestamp = resp.details?.viewTimestamp;
-          this.totalResult = resp.details?.totalResult ?? 0;
-          return resp.resultList;
-        }),
-        catchError(() => of([])),
-        finalize(() => this.loadingSubject.next(false)),
-      )
-      .subscribe((views) => {
-        this.dataSource = new MatTableDataSource(views);
-      });
+    return from(this.authService.listMyProjectOrgs(request.limit, request.offset, request.queries)).pipe(
+      map((resp) => {
+        this.timestamp = resp.details?.viewTimestamp;
+        this.totalResult = resp.details?.totalResult ?? 0;
+        return resp.resultList;
+      }),
+      catchError((error) => {
+        this.toast.showError(error);
+        return of([]);
+      }),
+      finalize(() => this.loadingSubject.next(false)),
+    );
   }
 
   public selectOrg(item: Org.AsObject, event?: any): void {
@@ -63,11 +79,20 @@ export class OrgTableComponent {
   }
 
   public refresh(): void {
-    this.loadOrgs(this.paginator.length, this.paginator.pageSize * this.paginator.pageIndex);
+    this.requestOrgs$.next({
+      limit: this.paginator.length,
+      offset: this.paginator.pageSize * this.paginator.pageIndex,
+      queries: this.searchQueries,
+    });
   }
 
   public applySearchQuery(searchQueries: OrgQuery[]): void {
-    this.loadOrgs(this.paginator.pageSize, this.paginator.pageSize * this.paginator.pageIndex, searchQueries);
+    this.searchQueries = searchQueries;
+    this.requestOrgs$.next({
+      limit: this.paginator ? this.paginator.pageSize : this.initialLimit,
+      offset: this.paginator ? this.paginator.pageSize * this.paginator.pageIndex : 0,
+      queries: this.searchQueries,
+    });
   }
 
   public setFilter(key: OrgListSearchKey): void {
@@ -90,8 +115,8 @@ export class OrgTableComponent {
     this.router.navigate(['/org']);
   }
 
-  public changePage(event: PageEvent): void {
-    this.loadOrgs(event.pageSize, event.pageIndex * event.pageSize);
+  public changePage(): void {
+    this.refresh();
   }
 
   public gotoRouterLink(rL: any) {