diff --git a/console/src/app/modules/nav/nav.component.html b/console/src/app/modules/nav/nav.component.html index d61b750d9f..73338a4831 100644 --- a/console/src/app/modules/nav/nav.component.html +++ b/console/src/app/modules/nav/nav.component.html @@ -1,7 +1,7 @@
{{ 'MENU.SETTINGS' | translate }} diff --git a/console/src/app/modules/new-header/header-button/header-button.component.html b/console/src/app/modules/new-header/header-button/header-button.component.html index 33dc99ad73..504ac5c1ce 100644 --- a/console/src/app/modules/new-header/header-button/header-button.component.html +++ b/console/src/app/modules/new-header/header-button/header-button.component.html @@ -1,6 +1,6 @@ - diff --git a/console/src/app/modules/new-header/header-button/header-button.component.scss b/console/src/app/modules/new-header/header-button/header-button.component.scss index 93bf6dc03c..7bd84a5e6e 100644 --- a/console/src/app/modules/new-header/header-button/header-button.component.scss +++ b/console/src/app/modules/new-header/header-button/header-button.component.scss @@ -1,5 +1,4 @@ -.header-button { - width: unset; +:host { display: flex; flex-direction: row; align-items: center; @@ -8,4 +7,23 @@ padding-right: 0; height: 32px; max-height: 32px; + cursor: pointer; +} + +.header-text { + font-size: 1.1rem; +} + +@mixin header-button-theme($theme) { + $foreground: map-get($theme, foreground); + + .header-button { + border: 0; + background: transparent; + border-radius: 4px; + padding: 0; + height: 100%; + cursor: pointer; + color: map-get($foreground, text); + } } diff --git a/console/src/app/modules/new-header/header-button/header-button.component.ts b/console/src/app/modules/new-header/header-button/header-button.component.ts index ae43c88132..b31573c065 100644 --- a/console/src/app/modules/new-header/header-button/header-button.component.ts +++ b/console/src/app/modules/new-header/header-button/header-button.component.ts @@ -1,6 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { NgIconComponent, provideIcons } from '@ng-icons/core'; import { heroChevronUpDown } from '@ng-icons/heroicons/outline'; +import { MatRippleModule } from '@angular/material/core'; @Component({ selector: 'cnsl-header-button', @@ -8,7 +9,7 @@ import { heroChevronUpDown } from '@ng-icons/heroicons/outline'; styleUrls: ['./header-button.component.scss'], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, - imports: [NgIconComponent], + imports: [NgIconComponent, MatRippleModule], providers: [provideIcons({ heroChevronUpDown })], }) export class HeaderButtonComponent {} diff --git a/console/src/app/modules/new-header/new-header.component.html b/console/src/app/modules/new-header/new-header.component.html index cd308b399c..055e5f7e17 100644 --- a/console/src/app/modules/new-header/new-header.component.html +++ b/console/src/app/modules/new-header/new-header.component.html @@ -1,12 +1,12 @@
- CONSOLE + CONSOLE Instance{{ instance.name }} + + + + + {{ bread.name }} + + +
diff --git a/console/src/app/modules/new-header/new-header.component.ts b/console/src/app/modules/new-header/new-header.component.ts index 398bf77e37..261d940983 100644 --- a/console/src/app/modules/new-header/new-header.component.ts +++ b/console/src/app/modules/new-header/new-header.component.ts @@ -1,8 +1,8 @@ -import { ChangeDetectionStrategy, Component, effect, Signal, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, computed, effect, Signal, signal } from '@angular/core'; import { MatToolbarModule } from '@angular/material/toolbar'; import { NewOrganizationService } from '../../services/new-organization.service'; import { ToastService } from '../../services/toast.service'; -import { AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common'; +import { AsyncPipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common'; import { injectQuery } from '@tanstack/angular-query-experimental'; import { OrganizationSelectorComponent } from './organization-selector/organization-selector.component'; import { CdkOverlayOrigin } from '@angular/cdk/overlay'; @@ -18,6 +18,8 @@ import { BreakpointObserver } from '@angular/cdk/layout'; import { NewAdminService } from '../../services/new-admin.service'; import { NewAuthService } from '../../services/new-auth.service'; import { RouterLink } from '@angular/router'; +import { Breadcrumb, BreadcrumbService, BreadcrumbType } from '../../services/breadcrumb.service'; +import { MatRippleModule } from '@angular/material/core'; @Component({ selector: 'cnsl-new-header', @@ -39,6 +41,8 @@ import { RouterLink } from '@angular/router'; AsyncPipe, HasRolePipeModule, RouterLink, + NgForOf, + MatRippleModule, ], }) export class NewHeaderComponent { @@ -53,6 +57,7 @@ export class NewHeaderComponent { protected readonly instanceSelectorSecondStep = signal(false); protected readonly activeOrganizationQuery = this.newOrganizationService.activeOrganizationQuery(); protected readonly isHandset: Signal; + protected readonly breadcrumbs: Signal; constructor( private readonly newOrganizationService: NewOrganizationService, @@ -60,8 +65,10 @@ export class NewHeaderComponent { private readonly breakpointObserver: BreakpointObserver, private readonly adminService: NewAdminService, private readonly newAuthService: NewAuthService, + private readonly breadcrumbService: BreadcrumbService, ) { this.isHandset = this.getIsHandset(); + this.breadcrumbs = this.getBreadcrumbs(); effect(() => { if (this.listMyZitadelPermissionsQuery.isError()) { @@ -87,4 +94,13 @@ export class NewHeaderComponent { const isHandset$ = this.breakpointObserver.observe(mediaQuery).pipe(map(({ matches }) => matches)); return toSignal(isHandset$, { initialValue: this.breakpointObserver.isMatched(mediaQuery) }); } + + private getBreadcrumbs() { + const breadcrumbs = toSignal(this.breadcrumbService.breadcrumbs$, { initialValue: [] }); + return computed(() => + breadcrumbs().filter( + (breadcrumb) => breadcrumb.type === BreadcrumbType.PROJECT || breadcrumb.type === BreadcrumbType.APP, + ), + ); + } } diff --git a/console/src/app/modules/new-header/organization-selector/organization-selector.component.html b/console/src/app/modules/new-header/organization-selector/organization-selector.component.html index 50aeba32e4..45b77b18b6 100644 --- a/console/src/app/modules/new-header/organization-selector/organization-selector.component.html +++ b/console/src/app/modules/new-header/organization-selector/organization-selector.component.html @@ -24,21 +24,22 @@ {{ org.name }} - - + + {{ org.name }} - + diff --git a/console/src/app/modules/new-header/organization-selector/organization-selector.component.ts b/console/src/app/modules/new-header/organization-selector/organization-selector.component.ts index 20ccf977b6..c26e79f75b 100644 --- a/console/src/app/modules/new-header/organization-selector/organization-selector.component.ts +++ b/console/src/app/modules/new-header/organization-selector/organization-selector.component.ts @@ -1,4 +1,17 @@ -import { ChangeDetectionStrategy, Component, computed, effect, EventEmitter, Input, Output, Signal } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + computed, + DestroyRef, + effect, + ElementRef, + EventEmitter, + Input, + Output, + signal, + Signal, + ViewChild, +} from '@angular/core'; import { injectInfiniteQuery, injectMutation, keepPreviousData } from '@tanstack/angular-query-experimental'; import { NewOrganizationService } from 'src/app/services/new-organization.service'; import { NgForOf, NgIf } from '@angular/common'; @@ -20,13 +33,14 @@ import { Router } from '@angular/router'; import { NgIconComponent, provideIcons } from '@ng-icons/core'; import { heroCheck, heroMagnifyingGlass } from '@ng-icons/heroicons/outline'; import { heroArrowLeftCircleSolid } from '@ng-icons/heroicons/solid'; +import { UserService } from '../../../services/user.service'; type NameQuery = Extract< NonNullable['queries']>[number]['query'], { case: 'nameQuery' } >; -const QUERY_LIMIT = 5; +const QUERY_LIMIT = 20; @Component({ selector: 'cnsl-organization-selector', @@ -58,6 +72,13 @@ export class OrganizationSelectorComponent { @Output() public orgChanged = new EventEmitter(); + @ViewChild('moreButton', { static: false, read: ElementRef }) + public set moreButton(button: ElementRef) { + this.moreButtonSignal.set(button); + } + + private moreButtonSignal = signal | undefined>(undefined); + protected setOrgId = injectMutation(() => ({ mutationFn: (orgId: string) => this.newOrganizationService.setOrgId(orgId), })); @@ -65,7 +86,6 @@ export class OrganizationSelectorComponent { protected readonly form: ReturnType; private readonly nameQuery: Signal; protected readonly organizationsQuery: ReturnType; - protected loadedOrgsCount: Signal; protected activeOrg = this.newOrganizationService.activeOrganizationQuery(); protected activeOrgIfSearchMatches: Signal; @@ -73,12 +93,13 @@ export class OrganizationSelectorComponent { private readonly newOrganizationService: NewOrganizationService, private readonly formBuilder: FormBuilder, private readonly router: Router, + private readonly destroyRef: DestroyRef, + private readonly userService: UserService, toast: ToastService, ) { this.form = this.buildForm(); this.nameQuery = this.getNameQuery(this.form); this.organizationsQuery = this.getOrganizationsQuery(this.nameQuery); - this.loadedOrgsCount = this.getLoadedOrgsCount(this.organizationsQuery); this.activeOrgIfSearchMatches = this.getActiveOrgIfSearchMatches(this.nameQuery); effect(() => { @@ -99,12 +120,38 @@ export class OrganizationSelectorComponent { effect(() => { const orgId = newOrganizationService.orgId(); - const orgs = this.organizationsQuery.data()?.pages[0]?.result; + const orgs = this.organizationsQuery.data()?.orgs; if (orgId || !orgs || orgs.length === 0) { return; } const _ = newOrganizationService.setOrgId(orgs[0].id); }); + + this.infiniteScrollLoading(); + } + + private infiniteScrollLoading() { + const intersection = new IntersectionObserver(async (entries) => { + if (!entries[0]?.isIntersecting) { + return; + } + await this.organizationsQuery.fetchNextPage(); + }); + this.destroyRef.onDestroy(() => { + intersection.disconnect(); + }); + + effect((onCleanup) => { + const moreButton = this.moreButtonSignal()?.nativeElement; + if (!moreButton) { + return; + } + + intersection.observe(moreButton); + onCleanup(() => { + intersection.unobserve(moreButton); + }); + }); } private buildForm() { @@ -136,9 +183,12 @@ export class OrganizationSelectorComponent { private getOrganizationsQuery(nameQuery: Signal) { return injectInfiniteQuery(() => { const query = nameQuery(); + const exp = this.userService.exp(); + const isExpired = exp ? exp <= new Date() : true; return { queryKey: ['organization', 'listOrganizationsInfinite', query], queryFn: ({ pageParam, signal }) => this.newOrganizationService.listOrganizations(pageParam, signal), + enabled: !isExpired, initialPageParam: { query: { limit: QUERY_LIMIT, @@ -157,14 +207,14 @@ export class OrganizationSelectorComponent { }, } : undefined, + select: (data) => ({ + orgs: data.pages.flatMap((page) => page.result), + totalResult: Number(data.pages[data.pages.length - 1]?.details?.totalResult ?? 0), + }), }; }); } - private getLoadedOrgsCount(organizationsQuery: ReturnType) { - return computed(() => this.countLoadedOrgs(organizationsQuery.data()?.pages)); - } - private countLoadedOrgs(pages?: ListOrganizationsResponse[]) { if (!pages) { return BigInt(0); @@ -189,7 +239,7 @@ export class OrganizationSelectorComponent { await this.router.navigate(['/org']); } - protected trackOrg(_: number, { id }: Organization): string { + protected trackOrgResponse(_: number, { id }: Organization): string { return id; } diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts index 096bc04089..1ed66cff87 100644 --- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts +++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts @@ -112,20 +112,23 @@ export class AuthUserDetailComponent implements OnInit { filter(Boolean), ); - effect(() => { - const user = this.user.data(); - if (!user || user.type.case !== 'human') { - return; - } + effect( + () => { + const user = this.user.data(); + if (!user || user.type.case !== 'human') { + return; + } - this.breadcrumbService.setBreadcrumb([ - new Breadcrumb({ - type: BreadcrumbType.AUTHUSER, - name: user.type.value.profile?.displayName, - routerLink: ['/users', 'me'], - }), - ]); - }); + this.breadcrumbService.setBreadcrumb([ + new Breadcrumb({ + type: BreadcrumbType.AUTHUSER, + name: user.type.value.profile?.displayName, + routerLink: ['/users', 'me'], + }), + ]); + }, + { allowSignalWrites: true }, + ); effect(() => { const error = this.user.error(); diff --git a/console/src/app/services/grpc-auth.service.ts b/console/src/app/services/grpc-auth.service.ts index d9c1e12a66..5dc0ce9eca 100644 --- a/console/src/app/services/grpc-auth.service.ts +++ b/console/src/app/services/grpc-auth.service.ts @@ -121,7 +121,6 @@ export class GrpcAuthService { PrivacyPolicy.AsObject | undefined >(undefined); - public cachedOrgs: BehaviorSubject = new BehaviorSubject([]); private cachedLabelPolicies: { [orgId: string]: LabelPolicy.AsObject } = {}; private cachedPrivacyPolicies: { [orgId: string]: PrivacyPolicy.AsObject } = {}; @@ -272,11 +271,6 @@ export class GrpcAuthService { return this.grpcService.auth.getMyUser(new GetMyUserRequest(), null).then((resp) => resp.toObject()); } - public async revalidateOrgs() { - const orgs = (await this.listMyProjectOrgs(ORG_LIMIT, 0)).resultList; - this.cachedOrgs.next(orgs); - } - public listMyProjectOrgs( limit?: number, offset?: number, diff --git a/console/src/app/services/user.service.ts b/console/src/app/services/user.service.ts index 56db2b10a2..111100bf7d 100644 --- a/console/src/app/services/user.service.ts +++ b/console/src/app/services/user.service.ts @@ -1,4 +1,4 @@ -import { Injectable, signal } from '@angular/core'; +import { computed, Injectable, Signal, signal } from '@angular/core'; import { GrpcService } from './grpc.service'; import { AddHumanUserRequestSchema, @@ -48,8 +48,7 @@ import { import type { MessageInitShape } from '@bufbuild/protobuf'; import { create } from '@bufbuild/protobuf'; import { OAuthService } from 'angular-oauth2-oidc'; -import { EMPTY, of, switchMap } from 'rxjs'; -import { filter, map, startWith } from 'rxjs/operators'; +import { filter, map } from 'rxjs/operators'; import { toSignal } from '@angular/core/rxjs-interop'; import { injectQuery, queryOptions, skipToken } from '@tanstack/angular-query-experimental'; @@ -57,7 +56,9 @@ import { injectQuery, queryOptions, skipToken } from '@tanstack/angular-query-ex providedIn: 'root', }) export class UserService { - private userId = this.getUserId(); + private readonly payload: Signal; + private readonly userId: Signal; + public readonly exp: Signal; public userQuery() { return injectQuery(() => this.userQueryOptions()); @@ -74,35 +75,51 @@ export class UserService { constructor( private readonly grpcService: GrpcService, private readonly oauthService: OAuthService, - ) {} + ) { + this.payload = this.getPayload(); + this.userId = this.getUserId(this.payload); + this.exp = this.getExp(this.payload); + } - private getUserId() { - const userId$ = this.oauthService.events.pipe( + private getPayload() { + const idToken$ = this.oauthService.events.pipe( filter((event) => event.type === 'token_received'), // can actually return null // https://github.com/manfredsteyer/angular-oauth2-oidc/blob/c724ad73eadbb28338b084e3afa5ed49a0ea058c/projects/lib/src/oauth-service.ts#L2365 map(() => this.oauthService.getIdToken() as string | null), - startWith(this.oauthService.getIdToken() as string | null), - filter(Boolean), - switchMap((token) => { - // we do this in a try catch so the observable will retry this logic if it fails - try { - // split jwt and get base64 encoded payload - const unparsedPayload = atob(token.split('.')[1]); - // parse payload - const payload: unknown = JSON.parse(unparsedPayload); - // check if sub is in payload and is a string - if (payload && typeof payload === 'object' && 'sub' in payload && typeof payload.sub === 'string') { - return of(payload.sub); - } - return EMPTY; - } catch { - return EMPTY; - } - }), ); + const idToken = toSignal(idToken$, { initialValue: this.oauthService.getIdToken() as string | null }); - return toSignal(userId$, { initialValue: undefined }); + return computed(() => { + try { + // split jwt and get base64 encoded payload + const unparsedPayload = atob((idToken() ?? '').split('.')[1]); + // parse payload + return JSON.parse(unparsedPayload) as unknown; + } catch { + return undefined; + } + }); + } + + private getUserId(payloadSignal: Signal) { + return computed(() => { + const payload = payloadSignal(); + if (payload && typeof payload === 'object' && 'sub' in payload && typeof payload.sub === 'string') { + return payload.sub; + } + return undefined; + }); + } + + private getExp(payloadSignal: Signal) { + return computed(() => { + const payload = payloadSignal(); + if (payload && typeof payload === 'object' && 'exp' in payload && typeof payload.exp === 'number') { + return new Date(payload.exp * 1000); + } + return undefined; + }); } public addHumanUser(req: MessageInitShape): Promise { diff --git a/console/src/component-themes.scss b/console/src/component-themes.scss index f539f963a9..e9af16849a 100644 --- a/console/src/component-themes.scss +++ b/console/src/component-themes.scss @@ -81,6 +81,7 @@ @import 'src/app/modules/new-header/organization-selector/organization-selector.component.scss'; @import 'src/app/modules/new-header/instance-selector/instance-selector.component.scss'; @import 'src/app/modules/new-header/header-dropdown/header-dropdown.component.scss'; +@import 'src/app/modules/new-header/header-button/header-button.component.scss'; @mixin component-themes($theme) { @include cnsl-color-theme($theme); @@ -165,4 +166,5 @@ @include organization-selector-theme($theme); @include instance-selector-theme($theme); @include header-dropdown-theme($theme); + @include header-button-theme($theme); }