feat: console flat navigation, settings (#3581)

* instance routing * instance naming * org list * rm isonsystem * breadcrumb type * routing * instance members * fragment refresh org * settings pages * settings list, sidenav grouping, i18n * org-settings, policy changes * lint * grid * rename grid * fallback to general * cleanup * general settings, remove cards * sidenav for settings, label policy * i18n * header, nav backbuild * general, project nav rehaul * login text background adapt * org nav anim * org, instance settings, fix policy layout, roles * i18n, active route for project * lint
2026-10-19 22:14:25 +00:00 · 2022-05-09 15:01:36 +02:00
parent 94e420bb24
commit 06e3330d2e
188 changed files with 4046 additions and 3639 deletions
@@ -0,0 +1,103 @@
+import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { BehaviorSubject, from, Observable, of } from 'rxjs';
+import { catchError, finalize, map } from 'rxjs/operators';
+import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
+import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
+import { Member } from 'src/app/proto/generated/zitadel/member_pb';
+import { User } from 'src/app/proto/generated/zitadel/user_pb';
+import { AdminService } from 'src/app/services/admin.service';
+import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+@Component({
+  selector: 'cnsl-instance',
+  templateUrl: './instance.component.html',
+  styleUrls: ['./instance.component.scss'],
+})
+export class InstanceComponent {
+  public PolicyComponentServiceType: any = PolicyComponentServiceType;
+  private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+  public totalMemberResult: number = 0;
+  public membersSubject: BehaviorSubject<Member.AsObject[]> = new BehaviorSubject<Member.AsObject[]>([]);
+
+  constructor(
+    public adminService: AdminService,
+    private dialog: MatDialog,
+    private toast: ToastService,
+    breadcrumbService: BreadcrumbService,
+    private router: Router,
+  ) {
+    this.loadMembers();
+
+    const instanceBread = new Breadcrumb({
+      type: BreadcrumbType.INSTANCE,
+      name: 'Instance',
+      routerLink: ['/instance'],
+    });
+
+    breadcrumbService.setBreadcrumb([instanceBread]);
+  }
+
+  public loadMembers(): void {
+    this.loadingSubject.next(true);
+    from(this.adminService.listIAMMembers(100, 0))
+      .pipe(
+        map((resp) => {
+          if (resp.details?.totalResult) {
+            this.totalMemberResult = resp.details.totalResult;
+          } else {
+            this.totalMemberResult = 0;
+          }
+          return resp.resultList;
+        }),
+        catchError(() => of([])),
+        finalize(() => this.loadingSubject.next(false)),
+      )
+      .subscribe((members) => {
+        this.membersSubject.next(members);
+      });
+  }
+
+  public openAddMember(): void {
+    const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
+      data: {
+        creationType: CreationType.IAM,
+      },
+      width: '400px',
+    });
+
+    dialogRef.afterClosed().subscribe((resp) => {
+      if (resp) {
+        const users: User.AsObject[] = resp.users;
+        const roles: string[] = resp.roles;
+
+        if (users && users.length && roles && roles.length) {
+          Promise.all(
+            users.map((user) => {
+              return this.adminService.addIAMMember(user.id, roles);
+            }),
+          )
+            .then(() => {
+              this.toast.showInfo('IAM.TOAST.MEMBERADDED');
+              setTimeout(() => {
+                this.loadMembers();
+              }, 1000);
+            })
+            .catch((error) => {
+              this.toast.showError(error);
+              setTimeout(() => {
+                this.loadMembers();
+              }, 1000);
+            });
+        }
+      }
+    });
+  }
+
+  public showDetail(): void {
+    this.router.navigate(['/instance', 'members']);
+  }
+}