feat: rehauled console (#3525)

* new console * move npm ci to angular build * rel path for assets * local grpc copy * login policy, rm clear views, features rel path * lock Co-authored-by: Livio Amstutz <[email protected]>
2026-10-22 23:42:16 +00:00 · 2022-04-28 10:35:02 +00:00
parent 00f7dbe875
commit 08ae39ae19
668 changed files with 47746 additions and 19117 deletions
@@ -0,0 +1,76 @@
+import { ConnectedPosition, ConnectionPositionPair } from '@angular/cdk/overlay';
+import { Component, ElementRef, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
+import { Org } from 'src/app/proto/generated/zitadel/org_pb';
+import { LabelPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
+import { User } from 'src/app/proto/generated/zitadel/user_pb';
+import { AuthenticationService } from 'src/app/services/authentication.service';
+import { 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 { ActionKeysType } from '../action-keys/action-keys.component';
+
+@Component({
+  selector: 'cnsl-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss'],
+})
+export class HeaderComponent implements OnDestroy {
+  @ViewChild('input', { static: false }) input!: ElementRef;
+
+  @Input() public isDarkTheme: boolean = true;
+  @Input() public user!: User.AsObject;
+  @Input() public labelpolicy!: LabelPolicy.AsObject;
+  public showOrgContext: boolean = false;
+
+  public orgs$: Observable<Org.AsObject[]> = of([]);
+  @Input() public org!: Org.AsObject;
+  @Output() public changedActiveOrg: EventEmitter<Org.AsObject> = new EventEmitter();
+  public orgLoading$: BehaviorSubject<any> = new BehaviorSubject(false);
+  public showAccount: boolean = false;
+  private destroy$: Subject<void> = new Subject();
+  public BreadcrumbType: any = BreadcrumbType;
+  public ActionKeysType: any = ActionKeysType;
+
+  public positions: ConnectedPosition[] = [
+    new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }, 0, 10),
+    new ConnectionPositionPair({ originX: 'end', originY: 'bottom' }, { overlayX: 'end', overlayY: 'top' }, 0, 10),
+  ];
+  constructor(
+    public authenticationService: AuthenticationService,
+    private authService: GrpcAuthService,
+    public mgmtService: ManagementService,
+    public breadcrumbService: BreadcrumbService,
+    public router: Router,
+  ) {}
+
+  public ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  public closeAccountCard(): void {
+    if (this.showAccount) {
+      this.showAccount = false;
+    }
+  }
+
+  public setActiveOrg(org: Org.AsObject): void {
+    this.org = org;
+    this.authService.setActiveOrg(org);
+    this.changedActiveOrg.emit(org);
+  }
+
+  public get isOnSystem(): boolean {
+    return (
+      ['/system', '/views', '/failed-events', '/system/members', '/system/features'].includes(this.router.url) ||
+      new RegExp('/system/policy/*').test(this.router.url)
+    );
+  }
+
+  public get isOnMe(): boolean {
+    return this.router.url === '/users/me';
+  }
+}