From e401da3cfa9723f2eaca9e74e937885117fbb372 Mon Sep 17 00:00:00 2001 From: Ramon Date: Fri, 16 Jan 2026 08:30:09 +0100 Subject: [PATCH] fix(console): remove rehauled navigation #10863 (#10912) # Which Problems Are Solved The new breadcrumbs were causing problems with some more advanced Zitadel setups. This pr removes the new breadcrumbs to revert to the old navigation behaviour. # How the Problems Are Solved Most of the changes could be kept but those specific to the navigation where mostly reverted. # Additional Changes Updated some dependencies. # Additional Context - Closes #10863 --- console/package.json | 2 +- console/src/app/app-routing.module.ts | 8 - console/src/app/app.component.ts | 65 ++-- console/src/app/app.module.ts | 7 +- .../app/modules/header/header.component.html | 169 ++++++++++- .../app/modules/header/header.component.ts | 14 +- .../src/app/modules/header/header.module.ts | 2 - .../modules/info-row/info-row.component.ts | 3 +- .../memberships-table.component.ts | 21 +- .../src/app/modules/nav/nav.component.html | 62 +--- .../src/app/modules/nav/nav.component.scss | 56 +--- console/src/app/modules/nav/nav.component.ts | 3 +- .../header-button.component.html | 4 - .../header-button.component.scss | 45 --- .../header-button/header-button.component.ts | 16 - .../header-dropdown.component.html | 15 - .../header-dropdown.component.scss | 46 --- .../header-dropdown.component.ts | 104 ------- .../instance-selector.component.html | 26 -- .../instance-selector.component.scss | 40 --- .../instance-selector.component.ts | 35 --- .../new-header/new-header.component.html | 82 ----- .../new-header/new-header.component.scss | 35 --- .../new-header/new-header.component.ts | 113 ------- .../organization-selector.component.html | 48 --- .../organization-selector.component.scss | 83 ----- .../organization-selector.component.ts | 286 ------------------ .../org-context/org-context.component.ts | 9 +- .../modules/org-table/org-table.component.ts | 2 +- .../domain-policy/domain-policy.component.ts | 83 +++-- .../app/modules/settings-grid/settinglinks.ts | 60 ++++ .../settings-list.component.html | 6 + .../src/app/modules/settings-list/settings.ts | 18 ++ .../modules/shortcuts/shortcuts.component.ts | 120 +++----- .../user-grants/user-grants.component.ts | 2 +- .../src/app/pages/actions/actions.module.ts | 2 - console/src/app/pages/home/home.component.ts | 19 +- .../app/pages/instance/instance.component.ts | 12 +- .../orgs/org-detail/org-detail.component.html | 16 +- .../orgs/org-detail/org-detail.component.ts | 22 +- .../project-grid/project-grid.component.ts | 1 - .../user-create-v2.component.ts | 6 +- .../user-table/user-table.component.ts | 25 +- console/src/app/services/grpc-auth.service.ts | 125 +++++++- .../app/services/new-organization.service.ts | 172 +++++------ console/src/app/services/storage.service.ts | 1 + console/src/component-themes.scss | 10 - pnpm-lock.yaml | 16 +- .../instance/settings/secret-generator.cy.ts | 2 +- 49 files changed, 667 insertions(+), 1452 deletions(-) delete mode 100644 console/src/app/modules/new-header/header-button/header-button.component.html delete mode 100644 console/src/app/modules/new-header/header-button/header-button.component.scss delete mode 100644 console/src/app/modules/new-header/header-button/header-button.component.ts delete mode 100644 console/src/app/modules/new-header/header-dropdown/header-dropdown.component.html delete mode 100644 console/src/app/modules/new-header/header-dropdown/header-dropdown.component.scss delete mode 100644 console/src/app/modules/new-header/header-dropdown/header-dropdown.component.ts delete mode 100644 console/src/app/modules/new-header/instance-selector/instance-selector.component.html delete mode 100644 console/src/app/modules/new-header/instance-selector/instance-selector.component.scss delete mode 100644 console/src/app/modules/new-header/instance-selector/instance-selector.component.ts delete mode 100644 console/src/app/modules/new-header/new-header.component.html delete mode 100644 console/src/app/modules/new-header/new-header.component.scss delete mode 100644 console/src/app/modules/new-header/new-header.component.ts delete mode 100644 console/src/app/modules/new-header/organization-selector/organization-selector.component.html delete mode 100644 console/src/app/modules/new-header/organization-selector/organization-selector.component.scss delete mode 100644 console/src/app/modules/new-header/organization-selector/organization-selector.component.ts create mode 100644 console/src/app/modules/settings-grid/settinglinks.ts 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 @@ - + - + + + + + + + +
+ + {{ 'MENU.INSTANCE' | translate }} + +
+ + + + + + + + +
+ + {{ org.name ? org.name : 'NO NAME' }} + +
+ + + + + + +
+
+ + + + + + + +
+ + + {{ bread.name }} + ... + + + {{ bread.name }} + + +
+ + @@ -55,6 +185,33 @@ +
+ +
+ {{ 'MENU.INSTANCE' | translate }} + +
+ + +
+ {{ 'MENU.ORGANIZATION' | translate }} + +
+ +
+