fix: v2 user console errors (#9386)

# Which Problems Are Solved

- Fixed filtering in overview
- Only get users from current organization
- Use V2 api to get auth user

# How the Problems Are Solved

Added the organization filter to the List queries
Get current User ID from ID Token to get auth user by id

# Additional Changes

Refactored the UserList

# Additional Context
- Closes #9382

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, DestroyRef, OnInit } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { ActivatedRoute, Router } from '@angular/router';
 import { take } from 'rxjs';
@@ -27,9 +27,10 @@ export class FilterOrgComponent extends FilterComponent implements OnInit {
 
   constructor(
     router: Router,
+    destroyRef: DestroyRef,
     protected override route: ActivatedRoute,
   ) {
-    super(router, route);
+    super(router, route, destroyRef);
   }
 
   ngOnInit(): void {

console/src/app/modules/filter-project/filter-project.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, DestroyRef, OnInit } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { ActivatedRoute, Router } from '@angular/router';
 import { take } from 'rxjs';
@@ -23,8 +23,8 @@ export class FilterProjectComponent extends FilterComponent implements OnInit {
   public searchQueries: ProjectQuery[] = [];
 
   public states: ProjectState[] = [ProjectState.PROJECT_STATE_ACTIVE, ProjectState.PROJECT_STATE_INACTIVE];
-  constructor(router: Router, route: ActivatedRoute) {
-    super(router, route);
+  constructor(router: Router, route: ActivatedRoute, destroyRef: DestroyRef) {
+    super(router, route, destroyRef);
   }
 
   ngOnInit(): void {

console/src/app/modules/filter-user-grants/filter-user-grants.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, DestroyRef, OnInit } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { ActivatedRoute, Router } from '@angular/router';
 import { take } from 'rxjs';
@@ -29,8 +29,8 @@ export class FilterUserGrantsComponent extends FilterComponent implements OnInit
   public SubQuery: any = SubQuery;
   public searchQueries: UserGrantQuery[] = [];
 
-  constructor(router: Router, route: ActivatedRoute) {
-    super(router, route);
+  constructor(router: Router, route: ActivatedRoute, destroyRef: DestroyRef) {
+    super(router, route, destroyRef);
   }
 
   ngOnInit(): void {

console/src/app/modules/filter-user/filter-user.component.html

@@ -1,4 +1,4 @@
-<cnsl-filter (resetted)="resetFilter()" (trigger)="emitFilter()" [queryCount]="searchQueries.length">
+<cnsl-filter (resetted)="resetFilter()" (trigger)="emitFilter()" [queryCount]="(filterChanged | async)?.length ?? 0">
   <div class="filter-row" id="filtercomp">
     <div class="name-query">
       <mat-checkbox

console/src/app/modules/filter-user/filter-user.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, DestroyRef, OnInit } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { ActivatedRoute, Router } from '@angular/router';
 import { take } from 'rxjs';
@@ -13,6 +13,7 @@ import {
 } from 'src/app/proto/generated/zitadel/user_pb';
 
 import { FilterComponent } from '../filter/filter.component';
+import { filter, map } from 'rxjs/operators';
 
 enum SubQuery {
   STATE,
@@ -28,25 +29,27 @@ enum SubQuery {
 })
 export class FilterUserComponent extends FilterComponent implements OnInit {
   public SubQuery: any = SubQuery;
-  public searchQueries: UserSearchQuery[] = [];
+  private searchQueries: UserSearchQuery[] = [];
 
   public states: UserState[] = [
     UserState.USER_STATE_ACTIVE,
     UserState.USER_STATE_INACTIVE,
     UserState.USER_STATE_DELETED,
-    UserState.USER_STATE_INITIAL,
     UserState.USER_STATE_LOCKED,
-    UserState.USER_STATE_SUSPEND,
+    UserState.USER_STATE_INITIAL,
   ];
-  constructor(router: Router, route: ActivatedRoute) {
-    super(router, route);
+  constructor(router: Router, route: ActivatedRoute, destroyRef: DestroyRef) {
+    super(router, route, destroyRef);
   }
 
   ngOnInit(): void {
-    this.route.queryParams.pipe(take(1)).subscribe((params) => {
-      const { filter } = params;
-      if (filter) {
-        const stringifiedFilters = filter as string;
+    this.route.queryParamMap
+      .pipe(
+        take(1),
+        map((params) => params.get('filter')),
+        filter(Boolean),
+      )
+      .subscribe((stringifiedFilters) => {
         const filters: UserSearchQuery.AsObject[] = JSON.parse(stringifiedFilters) as UserSearchQuery.AsObject[];
 
         const userQueries = filters.map((filter) => {
@@ -94,8 +97,7 @@ export class FilterUserComponent extends FilterComponent implements OnInit {
         this.filterChanged.emit(this.searchQueries ? this.searchQueries : []);
         // this.showFilter = true;
         // this.filterOpen.emit(true);
-      }
-    });
+      });
   }
 
   public changeCheckbox(subquery: SubQuery, event: MatCheckboxChange) {

console/src/app/modules/filter/filter.component.ts

@@ -1,7 +1,6 @@
 import { ConnectedPosition, ConnectionPositionPair } from '@angular/cdk/overlay';
-import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
+import { Component, DestroyRef, EventEmitter, Input, Output } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Observable, Subject, takeUntil } from 'rxjs';
 import { SearchQuery as MemberSearchQuery } from 'src/app/proto/generated/zitadel/member_pb';
 import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';
 import { OrgQuery } from 'src/app/proto/generated/zitadel/org_pb';
@@ -9,6 +8,7 @@ import { ProjectQuery } from 'src/app/proto/generated/zitadel/project_pb';
 import { SearchQuery as UserSearchQuery, UserGrantQuery } from 'src/app/proto/generated/zitadel/user_pb';
 
 import { ActionKeysType } from '../action-keys/action-keys.component';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 type FilterSearchQuery = UserSearchQuery | MemberSearchQuery | UserGrantQuery | ProjectQuery | OrgQuery;
 type FilterSearchQueryAsObject =
@@ -23,7 +23,7 @@ type FilterSearchQueryAsObject =
   templateUrl: './filter.component.html',
   styleUrls: ['./filter.component.scss'],
 })
-export class FilterComponent implements OnDestroy {
+export class FilterComponent {
   @Output() public filterChanged: EventEmitter<FilterSearchQuery[]> = new EventEmitter();
   @Output() public filterOpen: EventEmitter<boolean> = new EventEmitter<boolean>(false);
 
@@ -32,9 +32,6 @@ export class FilterComponent implements OnDestroy {
 
   @Input() public queryCount: number = 0;
 
-  private destroy$: Subject<void> = new Subject();
-  public filterChanged$: Observable<FilterSearchQuery[]> = this.filterChanged.asObservable();
-
   public showFilter: boolean = false;
   public methods: TextQueryMethod[] = [
     TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE,
@@ -59,17 +56,13 @@ export class FilterComponent implements OnDestroy {
     this.trigger.emit();
   }
 
-  public ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
   constructor(
     private router: Router,
     protected route: ActivatedRoute,
+    destroyRef: DestroyRef,
   ) {
     const changes$ = this.filterChanged.asObservable();
-    changes$.pipe(takeUntil(this.destroy$)).subscribe((queries) => {
+    changes$.pipe(takeUntilDestroyed(destroyRef)).subscribe((queries) => {
       const filters: Array<FilterSearchQueryAsObject | {}> | undefined = queries
         ?.map((q) => q.toObject())
         .map((query) =>
@@ -81,15 +74,17 @@ export class FilterComponent implements OnDestroy {
         );
 
       if (filters && Object.keys(filters)) {
-        this.router.navigate([], {
-          relativeTo: this.route,
-          queryParams: {
-            ['filter']: JSON.stringify(filters),
-          },
-          replaceUrl: true,
-          queryParamsHandling: 'merge',
-          skipLocationChange: false,
-        });
+        this.router
+          .navigate([], {
+            relativeTo: this.route,
+            queryParams: {
+              ['filter']: JSON.stringify(filters),
+            },
+            replaceUrl: true,
+            queryParamsHandling: 'merge',
+            skipLocationChange: false,
+          })
+          .then();
       }
     });
   }