diff --git a/console/package.json b/console/package.json index 5a3900d11..ef9570878 100644 --- a/console/package.json +++ b/console/package.json @@ -82,7 +82,7 @@ "@zitadel/client": "workspace:*", "@zitadel/proto": "workspace:*", "eslint": "^8.57.1", - "jasmine-core": "~5.6.0", + "jasmine-core": "~5.12.0", "jasmine-spec-reporter": "~7.0.0", "karma": "^6.4.4", "karma-chrome-launcher": "^3.2.0", diff --git a/console/src/app/app-routing.module.ts b/console/src/app/app-routing.module.ts index 9366305ae..4e11c2c03 100644 --- a/console/src/app/app-routing.module.ts +++ b/console/src/app/app-routing.module.ts @@ -75,14 +75,6 @@ const routes: Routes = [ }, { path: 'actions', - loadChildren: () => import('./pages/actions/actions.module'), - canActivate: [authGuard, roleGuard], - data: { - roles: ['iam.read', 'iam.read'], - }, - }, - { - path: 'actions-v1', loadChildren: () => import('./pages/org-actions/actions.module'), canActivate: [authGuard, roleGuard], data: { diff --git a/console/src/app/app.component.ts b/console/src/app/app.component.ts index 94089e705..94bd2c539 100644 --- a/console/src/app/app.component.ts +++ b/console/src/app/app.component.ts @@ -1,27 +1,16 @@ import { BreakpointObserver } from '@angular/cdk/layout'; import { OverlayContainer } from '@angular/cdk/overlay'; import { ViewportScroller } from '@angular/common'; -import { - Component, - DestroyRef, - effect, - HostBinding, - HostListener, - Inject, - OnDestroy, - ViewChild, - DOCUMENT, -} from '@angular/core'; +import { Component, DestroyRef, HostBinding, HostListener, Inject, ViewChild, DOCUMENT } from '@angular/core'; import { MatIconRegistry } from '@angular/material/icon'; import { MatDrawer } from '@angular/material/sidenav'; import { DomSanitizer } from '@angular/platform-browser'; import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; import { LangChangeEvent, TranslateService } from '@ngx-translate/core'; import { Observable, of } from 'rxjs'; -import { filter, map, startWith } from 'rxjs/operators'; +import { filter, map, startWith, switchMap } from 'rxjs/operators'; import { accountCard, adminLineAnimation, navAnimations, routeAnimations, toolbarAnimation } from './animations'; -import { Org } from './proto/generated/zitadel/org_pb'; import { PrivacyPolicy } from './proto/generated/zitadel/policy_pb'; import { AuthenticationService } from './services/authentication.service'; import { GrpcAuthService } from './services/grpc-auth.service'; @@ -55,15 +44,12 @@ export class AppComponent { @HostListener('window:scroll', ['$event']) onScroll(event: Event): void { this.yoffset = this.viewPortScroller.getScrollPosition()[1]; } - public orgs$: Observable = of([]); public showAccount: boolean = false; public isDarkTheme: Observable = of(true); public showProjectSection: boolean = false; public activeOrganizationQuery = this.newOrganizationService.activeOrganizationQuery(); - private listMyZitadelPermissionsQuery = this.newAuthService.listMyZitadelPermissionsQuery(); - public language: string = 'en'; public privacyPolicy!: PrivacyPolicy.AsObject; constructor( @@ -216,9 +202,8 @@ export class AppComponent { this.getProjectCount(); - effect(() => { - const orgId = this.newOrganizationService.orgId(); - if (orgId) { + this.authService.activeOrgChanged.pipe(takeUntilDestroyed()).subscribe((org) => { + if (org?.id) { this.getProjectCount(); } }); @@ -227,30 +212,22 @@ export class AppComponent { .pipe( map((params) => params.get('org')), filter(Boolean), - takeUntilDestroyed(this.destroyRef), + takeUntilDestroyed(), ) - .subscribe((orgId) => this.newOrganizationService.setOrgId(orgId)); + .subscribe((orgId) => this.authService.getActiveOrg(orgId)); - effect(() => { - const permissions = this.listMyZitadelPermissionsQuery.data(); - const error = this.listMyZitadelPermissionsQuery.error(); - - if (!permissions && !error) { - // not loaded yet - return; - } - - // if we have an error this is gonna be false anyway as permissions will be undefined - if (permissions?.includes('org.read')) { - return; - } - - if (error) { - console.error(error); - } - - this.router.navigate(['/users/me']).then(); - }); + this.authenticationService.authenticationChanged + .pipe( + filter(Boolean), + switchMap(() => this.authService.getActiveOrg()), + takeUntilDestroyed(), + ) + .subscribe({ + error: async (err) => { + console.error(err); + return this.router.navigate(['/users/me']); + }, + }); this.isDarkTheme = this.themeService.isDarkTheme; this.isDarkTheme.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((dark) => { @@ -264,8 +241,6 @@ export class AppComponent { }); } - // TODO implement Console storage - // private startIntroWorkflow(): void { // setTimeout(() => { // const cb = () => { @@ -317,8 +292,8 @@ export class AppComponent { private getProjectCount(): void { this.authService.isAllowed(['project.read']).subscribe((allowed) => { if (allowed) { - this.mgmtService.listProjects(0, 0); - this.mgmtService.listGrantedProjects(0, 0); + this.mgmtService.listProjects(0, 0).then(); + this.mgmtService.listGrantedProjects(0, 0).then(); } }); } diff --git a/console/src/app/app.module.ts b/console/src/app/app.module.ts index f4b1c68f0..9182c1cec 100644 --- a/console/src/app/app.module.ts +++ b/console/src/app/app.module.ts @@ -75,7 +75,6 @@ import { ThemeService } from './services/theme.service'; import { ToastService } from './services/toast.service'; import { LanguagesService } from './services/languages.service'; import { PosthogService } from './services/posthog.service'; -import { NewHeaderComponent } from './modules/new-header/new-header.component'; import { provideTanStackQuery, QueryClient } from '@tanstack/angular-query-experimental'; import { withDevtools } from '@tanstack/angular-query-experimental/devtools'; import { CdkOverlayOrigin } from '@angular/cdk/overlay'; @@ -181,7 +180,6 @@ const authConfig: AuthConfig = { MatDialogModule, KeyboardShortcutsModule, ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }), - NewHeaderComponent, CdkOverlayOrigin, ], providers: [ @@ -253,10 +251,7 @@ const authConfig: AuthConfig = { LanguagesService, PosthogService, { provide: 'windowObject', useValue: window }, - provideTanStackQuery( - new QueryClient(), - withDevtools(() => ({ loadDevtools: 'auto' })), - ), + provideTanStackQuery(new QueryClient(), withDevtools()), provideNgIconsConfig({ size: '1rem', }), diff --git a/console/src/app/modules/header/header.component.html b/console/src/app/modules/header/header.component.html index 379c0f2f7..1764d3eff 100644 --- a/console/src/app/modules/header/header.component.html +++ b/console/src/app/modules/header/header.component.html @@ -4,11 +4,7 @@ - + - + + + + + + + + + + + + + + + + +
+ + {{ org.name ? org.name : 'NO NAME' }} + +
+ + + + + + +
+
+
+ + + + + + + + + @@ -55,6 +185,33 @@ + +