fix(console): routing on org change (#4369)

fix: console routing on org change

Co-authored-by: Silvan <silvan.reusser@gmail.com>
Co-authored-by: Fabi <38692350+hifabienne@users.noreply.github.com>

console/src/app/app.component.ts

@@ -184,20 +184,6 @@ export class AppComponent implements OnDestroy {
       this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/arrow-decision-outline.svg'),
     );
 
-    this.activatedRoute.queryParams.pipe(takeUntil(this.destroy$)).subscribe((route) => {
-      const { org } = route;
-      if (org) {
-        this.authService
-          .getActiveOrg(org)
-          .then((queriedOrg) => {
-            this.org = queriedOrg;
-          })
-          .catch((error) => {
-            this.router.navigate(['/users/me']);
-          });
-      }
-    });
-
     this.getProjectCount();
 
     this.authService.activeOrgChanged.pipe(takeUntil(this.destroy$)).subscribe((org) => {
@@ -265,9 +251,7 @@ export class AppComponent implements OnDestroy {
 
   public changedOrg(org: Org.AsObject): void {
     this.themeService.loadPrivateLabelling();
-    this.authService.zitadelPermissions$.pipe(take(1)).subscribe(() => {
+    this.router.navigate(['/org']);
-      this.router.navigate(['/org'], { fragment: org.id });
-    });
   }
 
   private setLanguage(): void {
@@ -276,7 +260,6 @@ export class AppComponent implements OnDestroy {
 
     this.authService.user.subscribe((userprofile) => {
       if (userprofile) {
-        // this.user = userprofile;
         const cropped = navigator.language.split('-')[0] ?? 'en';
         const fallbackLang = cropped.match(/en|de|it|zh/) ? cropped : 'en';
 

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

@@ -23,18 +23,9 @@
     matSort
     (matSortChange)="sortChange($event)"
   >
-    <ng-container matColumnDef="select">
-      <th class="selection" mat-header-cell *matHeaderCellDef>
-        {{ 'ORG.PAGES.ACTIVE' | translate }}
-      </th>
-      <td class="selection" mat-cell *matCellDef="let org">
-        <mat-radio-button (change)="selectOrg(org)" color="primary" [checked]="org.id === activeOrg.id"> </mat-radio-button>
-      </td>
-    </ng-container>
-
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef>{{ 'ORG.PAGES.ID' | translate }}</th>
-      <td mat-cell *matCellDef="let org" (change)="selectOrg(org)">{{ org.id }}</td>
+      <td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">{{ org.id }}</td>
     </ng-container>
 
     <ng-container matColumnDef="primaryDomain">
@@ -58,7 +49,6 @@
     </ng-container>
 
     <ng-container matColumnDef="name">
-      <!-- mat-sort-header -->
       <th mat-header-cell *matHeaderCellDef>
         {{ 'ORG.PAGES.NAME' | translate }}
       </th>

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

@@ -94,14 +94,6 @@ export class OrgTableComponent {
     );
   }
 
-  public selectOrg(item: Org.AsObject, event?: any): void {
-    this.authService.setActiveOrg(item);
-    this.themeService.loadPrivateLabelling();
-    this.authService.zitadelPermissions$.pipe(take(1)).subscribe(() => {
-      this.router.navigate(['/org'], { fragment: item.id });
-    });
-  }
-
   public refresh(): void {
     this.requestOrgs$.next({
       limit: this.paginator.length,
@@ -146,9 +138,7 @@ export class OrgTableComponent {
   public setAndNavigateToOrg(org: Org.AsObject): void {
     this.authService.setActiveOrg(org);
     this.themeService.loadPrivateLabelling();
-    this.authService.zitadelPermissions$.pipe(take(1)).subscribe(() => {
+    this.router.navigate(['/org']);
-      this.router.navigate(['/org'], { fragment: org.id });
-    });
   }
 
   public changePage(): void {

console/src/app/pages/orgs/org-detail/org-detail.component.ts

@@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject, from, Observable, of, Subject, takeUntil } from 'rxjs';
-import { catchError, finalize, map } from 'rxjs/operators';
+import { catchError, finalize, map, take } from 'rxjs/operators';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
 import { ChangeType } from 'src/app/modules/changes/changes.component';
 import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
@@ -12,6 +12,7 @@ import { Member } from 'src/app/proto/generated/zitadel/member_pb';
 import { Org, OrgState } from 'src/app/proto/generated/zitadel/org_pb';
 import { User } from 'src/app/proto/generated/zitadel/user_pb';
 import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
+import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
@@ -36,12 +37,12 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
 
   public InfoSectionType: any = InfoSectionType;
   constructor(
+    auth: GrpcAuthService,
     private dialog: MatDialog,
     public mgmtService: ManagementService,
     private toast: ToastService,
     private router: Router,
     breadcrumbService: BreadcrumbService,
-    activatedRoute: ActivatedRoute,
   ) {
     const bread: Breadcrumb = {
       type: BreadcrumbType.ORG,
@@ -49,7 +50,7 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
     };
     breadcrumbService.setBreadcrumb([bread]);
 
-    activatedRoute.fragment.pipe(takeUntil(this.destroy$)).subscribe((orgId) => {
+    auth.activeOrgChanged.pipe(takeUntil(this.destroy$)).subscribe((org) => {
       this.getData();
     });
   }