fix(console): Improve default org selection method in new breadcrumbs (#10612)

# Which Problems Are Solved

e2e tests work again in chrome and all other browsers

# How the Problems Are Solved

If the user has no org selected we have to choose a default org to
select. The logic for this was faulty if a new organization was created
as the breadcrumb wasn't aware of the new org so it defaulted back to
the ZITADEL org.

# Additional changes

Improved the @zitadel/client package readme so the example code would
compile.

console/package.json

@@ -37,7 +37,7 @@
     "@ng-icons/core": "^25.0.0",
     "@ng-icons/heroicons": "^25.0.0",
     "@ngx-translate/core": "^15.0.0",
-    "@tanstack/angular-query-experimental": "^5.85.5",
+    "@tanstack/angular-query-experimental": "^5.85.6",
     "@zitadel/client": "workspace:*",
     "@zitadel/proto": "workspace:*",
     "angular-oauth2-oidc": "^15.0.1",

console/src/app/modules/new-header/organization-selector/organization-selector.component.ts

@@ -12,7 +12,7 @@ import {
   Signal,
   ViewChild,
 } from '@angular/core';
-import { injectInfiniteQuery, injectMutation, keepPreviousData } from '@tanstack/angular-query-experimental';
+import { injectInfiniteQuery, injectMutation, keepPreviousData, QueryClient } from '@tanstack/angular-query-experimental';
 import { NewOrganizationService } from 'src/app/services/new-organization.service';
 import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
 import { ToastService } from 'src/app/services/toast.service';
@@ -101,6 +101,7 @@ export class OrganizationSelectorComponent {
     private readonly destroyRef: DestroyRef,
     private readonly userService: UserService,
     private readonly newAuthService: NewAuthService,
+    private readonly queryClient: QueryClient,
     toast: ToastService,
   ) {
     this.form = this.buildForm();
@@ -133,13 +134,31 @@ export class OrganizationSelectorComponent {
         return;
       }
 
-      // use has a selected org and it was found
+      // no orgId set so we set it to the first org
-      if (orgId && orgs.some((org) => org.id === orgId)) {
+      if (!orgId) {
+        newOrganizationService.setOrgId(orgs[0].id).then();
         return;
       }
 
-      // user has no org selected or the selected org is not in the org list
+      // user has a selected org and it was found
-      newOrganizationService.setOrgId(orgs[0].id).then();
+      if (orgs.some((org) => org.id === orgId)) {
+        return;
+      }
+
+      // maybe the org is not yet loaded in the org selector so we try to fetch it
+      // if the user has permission to the org this will succeed and we do nothing
+      this.queryClient
+        .fetchQuery(this.newOrganizationService.organizationByIdQueryOptions(orgId))
+        .then((org) => {
+          if (org) {
+            return;
+          }
+          throw new Error('org not found');
+        })
+        .catch((_) => {
+          // user has no org selected or no permission for said org so we default to first org
+          return newOrganizationService.setOrgId(orgs[0].id);
+        });
     });
 
     this.infiniteScrollLoading();

packages/zitadel-client/README.md

@@ -24,6 +24,7 @@ You can import and use the services provided by this package to interact with ZI
 
 ```ts
 import { createSettingsServiceClient, makeReqCtx } from "@zitadel/client/v2";
+import { createServerTransport } from "@zitadel/client/node";
 
 // Example usage
 const transport = createServerTransport(process.env.ZITADEL_SERVICE_USER_TOKEN!, { baseUrl: process.env.ZITADEL_API_URL! });

pnpm-lock.yaml

@@ -300,8 +300,8 @@ importers:
         specifier: ^15.0.0
         version: 15.0.0(@angular/[email protected](@angular/[email protected]([email protected])([email protected]))([email protected]))(@angular/[email protected]([email protected])([email protected]))([email protected])
       '@tanstack/angular-query-experimental':
-        specifier: ^5.85.5
+        specifier: ^5.85.6
-        version: 5.85.5(@angular/[email protected](@angular/[email protected]([email protected])([email protected]))([email protected]))(@angular/[email protected]([email protected])([email protected]))
+        version: 5.85.6(@angular/[email protected](@angular/[email protected]([email protected])([email protected]))([email protected]))(@angular/[email protected]([email protected])([email protected]))
       '@zitadel/client':
         specifier: workspace:*
         version: link:../packages/zitadel-client
@@ -5065,14 +5065,14 @@ packages:
   '@tanem/[email protected]':
     resolution: {integrity: sha512-UkJajeR44u73ujtr5GVSbIlELDWD/mzjqWe54YMK61ljKxFcJoPd9RBSaO7xj02ISCWUqJW99GjrS+sVF0UnrA==}
 
-  '@tanstack/[email protected].5':
+  '@tanstack/[email protected].6':
-    resolution: {integrity: sha512-IhjAOcmrLK49P0w6dszIdfRlEmZkI+fuC+OvlhOT6Y0o6khWL0b3hEUTPFtFqzRes6WQMfUNfVDzEhTcHxLVRQ==}
+    resolution: {integrity: sha512-HUdexlhqpIdToIxQtN328ZBtc3FpqPbKK/irrW7ZMgjMk6zdAQeVlULwN7yigP9FnjWqu11MiKOk22JGdGeu6A==}
     peerDependencies:
       '@angular/common': '>=16.0.0'
       '@angular/core': '>=16.0.0'
 
-  '@tanstack/[email protected].5':
+  '@tanstack/[email protected].6':
-    resolution: {integrity: sha512-KO0WTob4JEApv69iYp1eGvfMSUkgw//IpMnq+//cORBzXf0smyRwPLrUvEe5qtAEGjwZTXrjxg+oJNP/C00t6w==}
+    resolution: {integrity: sha512-hCj0TktzdCv2bCepIdfwqVwUVWb+GSHm1Jnn8w+40lfhQ3m7lCO7ADRUJy+2unxQ/nzjh2ipC6ye69NDW3l73g==}
 
   '@tanstack/[email protected]':
     resolution: {integrity: sha512-fbF3n+z1rqhvd9EoGp5knHkv3p5B2Zml1yNRjh7sNXklngYI5RVIWUrUjZ1RIcEoscarUb0+bOvIs5x9dwzOXQ==}
@@ -20839,14 +20839,14 @@ snapshots:
       content-type: 1.0.5
       tslib: 2.8.1
 
-  '@tanstack/[email protected].5(@angular/[email protected](@angular/[email protected]([email protected])([email protected]))([email protected]))(@angular/[email protected]([email protected])([email protected]))':
+  '@tanstack/[email protected].6(@angular/[email protected](@angular/[email protected]([email protected])([email protected]))([email protected]))(@angular/[email protected]([email protected])([email protected]))':
     dependencies:
       '@angular/common': 16.2.12(@angular/[email protected]([email protected])([email protected]))([email protected])
       '@angular/core': 16.2.12([email protected])([email protected])
-      '@tanstack/query-core': 5.85.5
+      '@tanstack/query-core': 5.85.6
       '@tanstack/query-devtools': 5.84.0
 
-  '@tanstack/[email protected].5': {}
+  '@tanstack/[email protected].6': {}
 
   '@tanstack/[email protected]': {}