fix(console): use authService for auth user page (#5233)

* auth grant

* fix: add missing attributes to ListMyUserGrantsResponse

* user grants typing

* typing

* auth grant link

* disable without role

* edit with auth grant

* chore(console): auto organize imports (#5293)

fix(console): auto organize imports

* Update console/src/app/modules/user-grants/user-grants-datasource.ts

Co-authored-by: Elio Bischof <[email protected]>

* Update console/src/app/modules/user-grants/user-grants-datasource.ts

Co-authored-by: Elio Bischof <[email protected]>

* Update console/src/app/modules/user-grants/user-grants-datasource.ts

Co-authored-by: Elio Bischof <[email protected]>

* linter, rm unused import

* add examples again

* lint

---------

Co-authored-by: Livio Spring <[email protected]>
Co-authored-by: Elio Bischof <[email protected]>

console/src/app/modules/filter-events/filter-events.component.ts

@@ -1,8 +1,6 @@
 import { ConnectedPosition, ConnectionPositionPair } from '@angular/cdk/overlay';
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
-import { MatLegacyOptionSelectionChange } from '@angular/material/legacy-core';
-import { MatLegacySelectChange } from '@angular/material/legacy-select';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { take } from 'rxjs';

console/src/app/modules/footer/footer.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input } from '@angular/core';
-import { LabelPolicy, PrivacyPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
+import { Component } from '@angular/core';
+import { PrivacyPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 
 @Component({

console/src/app/modules/header/header.component.ts

@@ -3,7 +3,6 @@ import { Component, ElementRef, EventEmitter, Input, OnDestroy, Output, ViewChil
 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';

console/src/app/modules/metadata/metadata-dialog/metadata-dialog.component.ts

@@ -3,10 +3,8 @@ import {
   MatLegacyDialogRef as MatDialogRef,
   MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
 } from '@angular/material/legacy-dialog';
-import { Buffer } from 'buffer';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';
-import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
 @Component({

console/src/app/modules/nav/nav.component.ts

@@ -5,7 +5,7 @@ import { HttpClient } from '@angular/common/http';
 import { Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { Router } from '@angular/router';
-import { BehaviorSubject, combineLatest, map, Observable, Subject, take, tap } from 'rxjs';
+import { BehaviorSubject, combineLatest, map, Observable, Subject, take } from 'rxjs';
 import { Org } from 'src/app/proto/generated/zitadel/org_pb';
 import { User } from 'src/app/proto/generated/zitadel/user_pb';
 import { AdminService } from 'src/app/services/admin.service';

console/src/app/modules/onboarding-card/onboarding-card.module.ts

@@ -1,18 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatRippleModule } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
-import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
-import { ShortcutsModule } from 'src/app/modules/shortcuts/shortcuts.module';
 
 import { RouterModule } from '@angular/router';
 import { EventPipeModule } from 'src/app/pipes/event-pipe/event-pipe.module';
-import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
-import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
 import { OnboardingCardComponent } from './onboarding-card.component';
 
 @NgModule({

console/src/app/modules/org-table/org-table.component.ts

@@ -5,7 +5,7 @@ import { MatSort, Sort } from '@angular/material/sort';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
-import { BehaviorSubject, catchError, finalize, from, map, Observable, of, Subject, switchMap, take, takeUntil } from 'rxjs';
+import { BehaviorSubject, catchError, finalize, from, map, Observable, of, Subject, switchMap, takeUntil } from 'rxjs';
 import { Org, OrgFieldName, OrgQuery, OrgState } from 'src/app/proto/generated/zitadel/org_pb';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 import { ToastService } from 'src/app/services/toast.service';

console/src/app/modules/paginator/paginator.component.ts

@@ -1,5 +1,4 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { EventManager } from '@angular/platform-browser';
 import { Timestamp } from 'src/app/proto/generated/google/protobuf/timestamp_pb';
 
 export interface PageEvent {

console/src/app/modules/policies/notification-settings/notification-settings.component.ts

@@ -8,7 +8,6 @@ import {
   AddSMTPConfigResponse,
   UpdateSMSProviderTwilioRequest,
   UpdateSMTPConfigPasswordRequest,
-  UpdateSMTPConfigPasswordResponse,
   UpdateSMTPConfigRequest,
   UpdateSMTPConfigResponse,
 } from 'src/app/proto/generated/zitadel/admin_pb';

console/src/app/modules/project-roles-table/project-roles-table.component.ts

@@ -1,5 +1,5 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { MatLegacyTable as MatTable } from '@angular/material/legacy-table';
 import { Router } from '@angular/router';

console/src/app/modules/user-grant-role-dialog/user-grant-role-dialog.component.ts

@@ -3,7 +3,6 @@ import {
   MatLegacyDialogRef as MatDialogRef,
   MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
 } from '@angular/material/legacy-dialog';
-import { Role } from 'src/app/proto/generated/zitadel/project_pb';
 
 @Component({
   selector: 'cnsl-user-grant-role-dialog',

console/src/app/modules/user-grants/user-grants-datasource.ts

@@ -1,33 +1,37 @@
 import { DataSource } from '@angular/cdk/collections';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
-import { BehaviorSubject, from, Observable, of } from 'rxjs';
-import { catchError, finalize, map } from 'rxjs/operators';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { ListMyUserGrantsResponse, UserGrant as AuthUserGrant } from 'src/app/proto/generated/zitadel/auth_pb';
 import { ListUserGrantResponse } from 'src/app/proto/generated/zitadel/management_pb';
 import {
-  UserGrant,
+  UserGrant as MgmtUserGrant,
   UserGrantProjectGrantIDQuery,
   UserGrantProjectIDQuery,
   UserGrantQuery,
   UserGrantUserIDQuery,
 } from 'src/app/proto/generated/zitadel/user_pb';
+import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 
 export enum UserGrantContext {
   NONE = 'none',
+  AUTHUSER = 'authuser',
   USER = 'user',
   OWNED_PROJECT = 'owned',
   GRANTED_PROJECT = 'granted',
 }
 
-export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
+type UserGrantAsObject = AuthUserGrant.AsObject | MgmtUserGrant.AsObject;
+
+export class UserGrantsDataSource extends DataSource<UserGrantAsObject> {
   public totalResult: number = 0;
   public viewTimestamp!: Timestamp.AsObject;
 
-  public grantsSubject: BehaviorSubject<UserGrant.AsObject[]> = new BehaviorSubject<UserGrant.AsObject[]>([]);
+  public grantsSubject: BehaviorSubject<Array<UserGrantAsObject>> = new BehaviorSubject<Array<UserGrantAsObject>>([]);
   private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   public loading$: Observable<boolean> = this.loadingSubject.asObservable();
 
-  constructor(private userService: ManagementService) {
+  constructor(private authService: GrpcAuthService, private userService: ManagementService) {
     super();
   }
 
@@ -43,6 +47,13 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
     queries?: UserGrantQuery[],
   ): void {
     switch (context) {
+      case UserGrantContext.AUTHUSER:
+        if (data && data.userId) {
+          this.loadingSubject.next(true);
+          const promise = this.authService.listMyUserGrants(pageSize, pageSize * pageIndex);
+          this.loadResponse(promise);
+        }
+        break;
       case UserGrantContext.USER:
         if (data && data.userId) {
           this.loadingSubject.next(true);
@@ -114,34 +125,33 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
     }
   }
 
-  private loadResponse(promise: Promise<ListUserGrantResponse.AsObject>): void {
-    from(promise)
-      .pipe(
-        map((resp) => {
-          if (resp.details?.totalResult) {
-            this.totalResult = resp.details.totalResult;
-          } else {
-            this.totalResult = 0;
-          }
-          if (resp.details?.viewTimestamp) {
+  private loadResponse(promise: Promise<ListUserGrantResponse.AsObject | ListMyUserGrantsResponse.AsObject>): void {
+    promise
+      .then((resp) => {
+        this.loadingSubject.next(false);
+        if (resp.resultList) {
+          this.grantsSubject.next(resp.resultList);
+        }
+        if (resp.details) {
+          this.totalResult = resp.details.totalResult;
+          if (resp.details.viewTimestamp) {
             this.viewTimestamp = resp.details.viewTimestamp;
           }
-          return resp.resultList;
-        }),
-        catchError(() => of([])),
-        finalize(() => this.loadingSubject.next(false)),
-      )
-      .subscribe((grants) => {
-        this.grantsSubject.next(grants);
+        }
+      })
+      .catch((error) => {
+        console.error(error);
+        this.grantsSubject.next([]);
+        this.loadingSubject.next(false);
       });
   }
 
   /**
    * Connect this data source to the table. The table will only update when
-   * the returned stream emits new items.
-   * @returns A stream of the items to be rendered.
+   * the returned stream emits new lists of items.
+   * @returns A stream of item lists to be rendered.
    */
-  public connect(): Observable<UserGrant.AsObject[]> {
+  public connect(): Observable<Array<UserGrantAsObject>> {
     return this.grantsSubject.asObservable();
   }
 

console/src/app/modules/user-grants/user-grants.component.html

@@ -155,6 +155,7 @@
               actions
               matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
               color="warn"
+              [disabled]="disableDelete"
               (click)="deleteGrant($event, grant)"
               mat-icon-button
             >
@@ -170,8 +171,8 @@
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr
-        (click)="openEditDialog(grant)"
-        class="highlight pointer"
+        (click)="!disableWrite ? openEditDialog(grant) : null"
+        [ngClass]="{ 'highlight pointer': !disableWrite }"
         mat-row
         *matRowDef="let grant; columns: displayedColumns"
       ></tr>

console/src/app/modules/user-grants/user-grants.component.ts

@@ -2,13 +2,14 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { MatLegacyInput as MatInput } from '@angular/material/legacy-input';
-import { MatLegacySelectChange as MatSelectChange } from '@angular/material/legacy-select';
 import { MatLegacyTable as MatTable } from '@angular/material/legacy-table';
 import { Router } from '@angular/router';
 import { tap } from 'rxjs/operators';
 import { enterAnimations } from 'src/app/animations';
+import { UserGrant as AuthUserGrant } from 'src/app/proto/generated/zitadel/auth_pb';
 import { Role } from 'src/app/proto/generated/zitadel/project_pb';
-import { Type, UserGrant, UserGrantQuery } from 'src/app/proto/generated/zitadel/user_pb';
+import { Type, UserGrant as MgmtUserGrant, UserGrantQuery } from 'src/app/proto/generated/zitadel/user_pb';
+import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
@@ -24,6 +25,9 @@ export enum UserGrantListSearchKey {
   PROJECT_NAME,
   ROLE_KEY,
 }
+
+type UserGrantAsObject = AuthUserGrant.AsObject | MgmtUserGrant.AsObject;
+
 @Component({
   selector: 'cnsl-user-grants',
   templateUrl: './user-grants.component.html',
@@ -38,10 +42,10 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
   @Input() context: UserGrantContext = UserGrantContext.NONE;
   @Input() refreshOnPreviousRoutes: string[] = [];
 
-  public dataSource: UserGrantsDataSource = new UserGrantsDataSource(this.userService);
-  public selection: SelectionModel<UserGrant.AsObject> = new SelectionModel<UserGrant.AsObject>(true, []);
+  public dataSource: UserGrantsDataSource = new UserGrantsDataSource(this.authService, this.userService);
+  public selection: SelectionModel<UserGrantAsObject> = new SelectionModel<UserGrantAsObject>(true, []);
   @ViewChild(PaginatorComponent) public paginator?: PaginatorComponent;
-  @ViewChild(MatTable) public table?: MatTable<UserGrant.AsObject>;
+  @ViewChild(MatTable) public table?: MatTable<UserGrantAsObject>;
 
   @Input() disableWrite: boolean = false;
   @Input() disableDelete: boolean = false;
@@ -66,6 +70,7 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
   public filterOpen: boolean = false;
 
   constructor(
+    private authService: GrpcAuthService,
     private userService: ManagementService,
     private toast: ToastService,
     private dialog: MatDialog,
@@ -88,14 +93,12 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
     switch (this.context) {
       case UserGrantContext.OWNED_PROJECT:
         if (this.projectId) {
-          // this.getProjectRoleOptions(this.projectId);
           this.routerLink = ['/grant-create', 'project', this.projectId];
         }
         break;
       case UserGrantContext.GRANTED_PROJECT:
         if (this.grantId) {
           this.routerLink = ['/grant-create', 'project', this.projectId, 'grant', this.grantId];
-          // this.getGrantRoleOptions(this.grantId, this.projectId);
         }
         break;
       case UserGrantContext.USER:
@@ -103,6 +106,11 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
           this.routerLink = ['/grant-create', 'user', this.userId];
         }
         break;
+      case UserGrantContext.AUTHUSER:
+        if (this.grantId) {
+          this.routerLink = ['/grant-create', 'user', this.userId];
+        }
+        break;
       case UserGrantContext.NONE:
         this.routerLink = ['/grant-create'];
     }
@@ -119,7 +127,7 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
     this.loadGrantsPage(type);
   }
 
-  public getType(grant: UserGrant.AsObject): string {
+  public getType(grant: UserGrantAsObject): string {
     if (grant.projectGrantId) {
       return 'Project Grant';
     } else if (grant.projectId) {
@@ -161,11 +169,11 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
       : this.dataSource.grantsSubject.value.forEach((row) => this.selection.select(row));
   }
 
-  public openEditDialog(grant: UserGrant.AsObject): void {
+  public openEditDialog(grant: UserGrantAsObject): void {
     const dialogRef = this.dialog.open(UserGrantRoleDialogComponent, {
       data: {
         projectId: grant.projectId,
-        grantId: grant.projectGrantId,
+        grantId: grant?.projectGrantId,
         selectedRoleKeysList: grant.roleKeysList,
         i18nTitle: 'GRANTS.EDIT.TITLE',
       },
@@ -175,7 +183,11 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
     dialogRef.afterClosed().subscribe((resp) => {
       if (resp && resp.roles) {
         this.userService
-          .updateUserGrant(grant.id, grant.userId, resp.roles)
+          .updateUserGrant(
+            (grant as MgmtUserGrant.AsObject).id ?? (grant as AuthUserGrant.AsObject).grantId,
+            grant.userId,
+            resp.roles,
+          )
           .then(() => {
             this.toast.showInfo('GRANTS.TOAST.UPDATED', true);
             grant.roleKeysList = resp.roles;
@@ -187,18 +199,7 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
     });
   }
 
-  updateRoles(grant: UserGrant.AsObject, selectionChange: MatSelectChange): void {
-    this.userService
-      .updateUserGrant(grant.id, grant.userId, selectionChange.value)
-      .then(() => {
-        this.toast.showInfo('GRANTS.TOAST.UPDATED', true);
-      })
-      .catch((error) => {
-        this.toast.showError(error);
-      });
-  }
-
-  public deleteGrant(event: any, grant: UserGrant.AsObject): void {
+  public deleteGrant(event: any, grant: MgmtUserGrant.AsObject): void {
     event.stopPropagation();
 
     const dialogRef = this.dialog.open(WarnDialogComponent, {
@@ -219,7 +220,9 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
             this.toast.showInfo('GRANTS.TOAST.REMOVED', true);
             const data = this.dataSource.grantsSubject.getValue();
 
-            const index = data.findIndex((i) => i.id === grant.id);
+            const index = data.findIndex(
+              (i) => (i as MgmtUserGrant.AsObject).id && (i as MgmtUserGrant.AsObject).id === grant.id,
+            );
             if (index > -1) {
               data.splice(index, 1);
               this.dataSource.grantsSubject.next(data);
@@ -246,12 +249,12 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
     dialogRef.afterClosed().subscribe((resp) => {
       if (resp) {
         this.userService
-          .bulkRemoveUserGrant(this.selection.selected.map((grant) => grant.id))
+          .bulkRemoveUserGrant(this.selection.selected.map((grant) => (grant as MgmtUserGrant.AsObject).id))
           .then(() => {
             this.toast.showInfo('GRANTS.TOAST.BULKREMOVED', true);
             const data = this.dataSource.grantsSubject.getValue();
             this.selection.selected.forEach((item) => {
-              const index = data.findIndex((i) => i.id === item.id);
+              const index = data.findIndex((i) => (i as MgmtUserGrant.AsObject).id === (item as MgmtUserGrant.AsObject).id);
               if (index > -1) {
                 data.splice(index, 1);
                 this.dataSource.grantsSubject.next(data);