feat(console): authorizations from user context, add grants to auth user view, fix app saving (#895)

* user grant on project

* grant in auth user, enable creation, fix inv regex

* use autocomplete solutions, section for usre ctx

* user grant create for user context

* fix edit from table

* fix create context

* fix authorization to write

* grant overview component

* fix user grants without context

* lint

* turn table highlighting off, rm logs

* fix app name saving

* fix table refresh for project grants

* translate toast

* i18n

* lint

* Update console/src/assets/i18n/de.json

Co-authored-by: Florian Forster <[email protected]>

Co-authored-by: Florian Forster <[email protected]>

console/src/app/modules/idp-table/idp-table.component.html

@@ -1,5 +1,5 @@
 <app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
-    emitRefreshOnPreviousRoute="/iam/idp/create" [timestamp]="idpResult?.viewTimestamp" [selection]="selection">
+    [emitRefreshOnPreviousRoutes]="['/iam/idp/create']" [timestamp]="idpResult?.viewTimestamp" [selection]="selection">
     <ng-template appHasRole [appHasRole]="['iam.write']" actions>
         <button (click)="deactivateSelectedIdps()" matTooltip="{{'IDP.DEACTIVATE' | translate}}" class="icon-button"
             mat-icon-button *ngIf="selection.hasValue()" [disabled]="disabled">
@@ -101,4 +101,4 @@
     </div>
     <mat-paginator #paginator class="paginator" [length]="idpResult?.totalResult || 0" [pageSize]="10"
         [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
-</app-refresh-table>
+</app-refresh-table>

console/src/app/modules/project-roles/project-roles.component.html

@@ -1,5 +1,5 @@
 <app-refresh-table *ngIf="projectId" (refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult"
-    emitRefreshOnPreviousRoute="/projects/{{projectId}}/roles/create" [selection]="selection"
+    [emitRefreshOnPreviousRoutes]="['/projects/'+projectId+'/roles/create']" [selection]="selection"
     [loading]="dataSource?.loading$ | async" [timestamp]="dataSource?.viewTimestamp">
     <ng-template appHasRole [appHasRole]="['project.role.delete', 'project.role.delete:' + projectId]" actions>
         <button color="warn" class="icon-button" [disabled]="disabled"

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

@@ -33,7 +33,7 @@ export class RefreshTableComponent implements OnInit {
     @Input() public dataSize: number = 0;
     @Input() public emitRefreshAfterTimeoutInMs: number = 0;
     @Input() public loading: boolean = false;
-    @Input() public emitRefreshOnPreviousRoute: string = '';
+    @Input() public emitRefreshOnPreviousRoutes: string[] = [];
     @Output() public refreshed: EventEmitter<void> = new EventEmitter();
 
     constructor(private refreshService: RefreshService) { }
@@ -45,7 +45,8 @@ export class RefreshTableComponent implements OnInit {
             }, this.emitRefreshAfterTimeoutInMs);
         }
 
-        if (this.emitRefreshOnPreviousRoute && this.refreshService.previousUrls.includes(this.emitRefreshOnPreviousRoute)) {
+        if (this.emitRefreshOnPreviousRoutes.length && this.refreshService.previousUrls
+            .some(url => this.emitRefreshOnPreviousRoutes.includes(url))) {
             setTimeout(() => {
                 console.log('refresh now');
                 this.emitRefresh();

console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html

@@ -1,5 +1,5 @@
 <form>
-    <mat-form-field *ngIf="target == UserTarget.SELF" appearance="outline" class="full-width">
+    <mat-form-field *ngIf="target && target == UserTarget.SELF" appearance="outline" class="full-width">
         <mat-label>Organizations User Loginname</mat-label>
 
         <input matInput *ngIf="singleOutput" type="text" placeholder="Search for the user loginname" #usernameInput
@@ -28,12 +28,21 @@
                 <small>{{user.preferredLoginName}}</small>
             </mat-option>
         </mat-autocomplete>
+
+        <mat-hint class="target-desc">
+            {{'USER.TARGET.SELF'| translate}}
+            <a (click)="changeTarget()">{{'USER.TARGET.CLICKHERE' | translate}}</a>
+        </mat-hint>
     </mat-form-field>
 
-    <div *ngIf="target == UserTarget.EXTERNAL" class="line">
+    <div *ngIf="target && target == UserTarget.EXTERNAL" class="line">
         <mat-form-field class="form-field" appearance="outline">
             <mat-label>Global User Loginname</mat-label>
             <input matInput type="text" [formControl]="globalLoginNameControl" />
+            <mat-hint class="target-desc">
+                {{(target == UserTarget.SELF ? 'USER.TARGET.SELF' : 'USER.TARGET.EXTERNAL') | translate}}
+                <a (click)="changeTarget()">{{'USER.TARGET.CLICKHERE' | translate}}</a>
+            </mat-hint>
         </mat-form-field>
 
         <button color="primary" mat-icon-button (click)="getGlobalUser()">
@@ -41,17 +50,25 @@
         </button>
     </div>
 
-    <div *ngIf="target == UserTarget.EXTERNAL && users.length > 0">
+    <div class="found" *ngIf="target == UserTarget.EXTERNAL && users.length > 0">
         <span class="found-label">{{'USER.SEARCH.FOUND' | translate}}:</span>
         <div class="found-user-row" *ngFor="let user of users; index as i">
+            <div class="circle">
+                <app-avatar
+                    *ngIf="user.human && user.human.displayName && user.human?.firstName && user.human?.lastName; else cog"
+                    class="avatar" [name]="user.human.displayName" [size]="32">
+                </app-avatar>
+                <ng-template #cog>
+                    <div class="sa-icon">
+                        <i class="las la-user-cog"></i>
+                    </div>
+                </ng-template>
+            </div>
+
             <span>{{user.preferredLoginName}}</span>
-            <button mat-icon-button>
+            <button mat-icon-button color="warn">
                 <i class="las la-minus-circle" (click)="users.splice(i, 1)"></i>
             </button>
         </div>
     </div>
-
-    <p class="target-desc">{{(target == UserTarget.SELF ? 'USER.TARGET.SELF' : 'USER.TARGET.EXTERNAL') | translate}}
-        <a (click)="changeTarget()">{{'USER.TARGET.CLICKHERE' | translate}}</a>
-    </p>
 </form>

console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss

@@ -3,11 +3,6 @@
 }
 
 .target-desc {
-  color: var(--grey);
-  font-size: .8rem;
-  margin: 0;
-  margin-bottom: 1rem;
-
   a {
     color: #4072b4;
 
@@ -37,12 +32,35 @@
   font-size: .8rem;
 }
 
-.found-user-row {
-  display: flex;
-  align-items: center;
+.found {
+  margin: .5rem 0;
+  background: #4072b410;
+  border-radius: .5rem;
+  padding: .5rem;
+
+  .found-user-row {
+    padding: .5rem 0;
+    display: flex;
+    align-items: center;
+    min-height: 56px;
+
+    button {
+      visibility: hidden;
+    }
+
+    &:hover {
+      button {
+        visibility: visible;
+      }
+    }
+  }
+
+  .found-label {
+    font-size: .9rem;
+    color: var(--grey);
+  }
 }
 
-.found-label {
-  font-size: .9rem;
-  color: var(--grey);
+.circle {
+  margin-right: .5rem;
 }

console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts

@@ -1,5 +1,15 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import {
+    AfterContentChecked,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+    ViewChild,
+} from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatChipInputEvent } from '@angular/material/chips';
@@ -19,7 +29,7 @@ export enum UserTarget {
     templateUrl: './search-user-autocomplete.component.html',
     styleUrls: ['./search-user-autocomplete.component.scss'],
 })
-export class SearchUserAutocompleteComponent {
+export class SearchUserAutocompleteComponent implements OnInit, AfterContentChecked {
     public selectable: boolean = true;
     public removable: boolean = true;
     public addOnBlur: boolean = true;
@@ -32,7 +42,7 @@ export class SearchUserAutocompleteComponent {
     @Input() public users: Array<UserView.AsObject> = [];
     public filteredUsers: Array<UserView.AsObject> = [];
     public isLoading: boolean = false;
-    public target: UserTarget = UserTarget.SELF;
+    @Input() public target: UserTarget = UserTarget.SELF;
     public hint: string = '';
     public UserTarget: any = UserTarget;
     @ViewChild('usernameInput') public usernameInput!: ElementRef<HTMLInputElement>;
@@ -41,8 +51,19 @@ export class SearchUserAutocompleteComponent {
     @Input() public singleOutput: boolean = false;
 
     private unsubscribed$: Subject<void> = new Subject();
-    constructor(private userService: ManagementService, private toast: ToastService) {
-        this.getFilteredResults();
+    constructor(private userService: ManagementService, private toast: ToastService, private cdref: ChangeDetectorRef) { }
+
+    public ngOnInit(): void {
+        if (this.target === UserTarget.EXTERNAL) {
+            this.filteredUsers = [];
+            this.unsubscribed$.next(); // clear old subscription
+        } else if (this.target === UserTarget.SELF) {
+            this.getFilteredResults(); // new subscription
+        }
+    }
+
+    public ngAfterContentChecked(): void {
+        this.cdref.detectChanges();
     }
 
     private getFilteredResults(): void {
@@ -143,10 +164,11 @@ export class SearchUserAutocompleteComponent {
 
     public getGlobalUser(): void {
         this.userService.GetUserByLoginNameGlobal(this.globalLoginNameControl.value).then(user => {
-            this.users = [user.toObject()];
             if (this.singleOutput) {
+                this.users = [user.toObject()];
                 this.selectionChanged.emit(this.users[0]);
             } else {
+                this.users.push(user.toObject());
                 this.selectionChanged.emit(this.users);
             }
         }).catch(error => {

console/src/app/modules/search-user-autocomplete/search-user-autocomplete.module.ts

@@ -11,6 +11,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { AvatarModule } from '../avatar/avatar.module';
 import { SearchUserAutocompleteComponent } from './search-user-autocomplete.component';
 
 
@@ -29,6 +30,7 @@ import { SearchUserAutocompleteComponent } from './search-user-autocomplete.comp
         FormsModule,
         TranslateModule,
         MatSelectModule,
+        AvatarModule,
     ],
     exports: [SearchUserAutocompleteComponent],
 })

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

@@ -13,7 +13,7 @@ import {
 import { ManagementService } from 'src/app/services/mgmt.service';
 
 export enum UserGrantContext {
-    // AUTHUSER = 'authuser',
+    NONE = 'none',
     USER = 'user',
     OWNED_PROJECT = 'owned',
     GRANTED_PROJECT = 'granted',
@@ -42,14 +42,13 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
         },
         queries?: UserGrantSearchQuery[],
     ): void {
-        const offset = pageIndex * pageSize;
-
         switch (context) {
             case UserGrantContext.USER:
                 if (data && data.userId) {
                     this.loadingSubject.next(true);
                     const userfilter = new UserGrantSearchQuery();
                     userfilter.setKey(UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID);
+                    userfilter.setMethod(SearchMethod.SEARCHMETHOD_EQUALS);
                     userfilter.setValue(data.userId);
                     if (queries) {
                         queries.push(userfilter);
@@ -57,7 +56,7 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
                         queries = [userfilter];
                     }
 
-                    const promise = this.userService.SearchUserGrants(10, 0, queries);
+                    const promise = this.userService.SearchUserGrants(pageSize, pageSize * pageIndex, queries);
                     this.loadResponse(promise);
                 }
                 break;
@@ -66,6 +65,7 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
                     this.loadingSubject.next(true);
                     const projectfilter = new UserGrantSearchQuery();
                     projectfilter.setKey(UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID);
+                    projectfilter.setMethod(SearchMethod.SEARCHMETHOD_EQUALS);
                     projectfilter.setValue(data.projectId);
                     if (queries) {
                         queries.push(projectfilter);
@@ -73,7 +73,7 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
                         queries = [projectfilter];
                     }
 
-                    const promise1 = this.userService.SearchUserGrants(10, 0, queries);
+                    const promise1 = this.userService.SearchUserGrants(pageSize, pageSize * pageIndex, queries);
                     this.loadResponse(promise1);
                 }
                 break;
@@ -97,10 +97,15 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
                         queries = [projectfilter, grantquery];
                     }
 
-                    const promise2 = this.userService.SearchUserGrants(10, 0, queries);
+                    const promise2 = this.userService.SearchUserGrants(pageSize, pageSize * pageIndex, queries);
                     this.loadResponse(promise2);
                 }
                 break;
+            default:
+                this.loadingSubject.next(true);
+                const promise3 = this.userService.SearchUserGrants(pageSize, pageSize * pageIndex, []);
+                this.loadResponse(promise3);
+                break;
         }
     }
 

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

@@ -1,12 +1,12 @@
 <app-refresh-table [loading]="dataSource?.loading$ | async" (refreshed)="changePage()"
-    [emitRefreshOnPreviousRoute]="refreshOnPreviousRoute" [timestamp]="dataSource?.viewTimestamp"
+    [emitRefreshOnPreviousRoutes]="refreshOnPreviousRoutes" [timestamp]="dataSource?.viewTimestamp"
     [dataSize]="dataSource?.totalResult" [selection]="selection">
     <button color="warn" matTooltip="{{'GRANTS.DELETE' | translate}}" class="icon-button" mat-icon-button actions
-        (click)="deleteGrantSelection()" *ngIf="selection.hasValue() && allowDelete">
+        (click)="deleteGrantSelection()" *ngIf="selection.hasValue() && disableDelete == false">
         <i class="las la-trash"></i>
     </button>
-    <a *ngIf="allowWrite && context !== UserGrantContext.USER" matTooltip="{{'GRANTS.ADD' | translate}}" actions
-        color="primary" color="primary" mat-raised-button [routerLink]="routerLink">
+    <a *ngIf="disableWrite == false" matTooltip="{{'GRANTS.ADD' | translate}}" actions color="primary" color="primary"
+        mat-raised-button [routerLink]="routerLink">
         <mat-icon class="icon">add</mat-icon>{{ 'GRANTS.ADD_BTN' | translate }}
     </a>
 
@@ -14,75 +14,81 @@
         <table mat-table multiTemplateDataRows class="table" aria-label="Elements" [dataSource]="dataSource">
             <ng-container matColumnDef="select">
                 <th class="selection" mat-header-cell *matHeaderCellDef>
-                    <mat-checkbox [disabled]="allowWrite == false" color="primary"
-                        (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
+                    <mat-checkbox [disabled]="disableWrite" color="primary" (change)="$event ? masterToggle() : null"
+                        [checked]="selection.hasValue() && isAllSelected()"
                         [indeterminate]="selection.hasValue() && !isAllSelected()">
                     </mat-checkbox>
                 </th>
                 <td class="selection" mat-cell *matCellDef="let row">
-                    <mat-checkbox [disabled]="allowWrite == false" color="primary" (click)="$event.stopPropagation()"
+                    <mat-checkbox
+                        [disabled]="disableWrite || !((['user.grant.write$'] | hasRole | async) || ((context === UserGrantContext.OWNED_PROJECT ? ['user.grant.write:' + row?.projectId] : context === UserGrantContext.GRANTED_PROJECT ? ['user.grant.write:' + row?.grantId] : []) | hasRole | async))"
+                        color="primary" (click)="$event.stopPropagation()"
                         (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
-                        <app-avatar *ngIf="row && row?.displayName && row.firstName && row.lastName" class="avatar"
-                            [name]="row.displayName" [size]="32">
+                        <app-avatar
+                            *ngIf="context !== UserGrantContext.USER && row && row?.displayName && row.firstName && row.lastName"
+                            class="avatar" [name]="row.displayName" [size]="32">
                         </app-avatar>
                     </mat-checkbox>
                 </td>
             </ng-container>
 
-
             <ng-container matColumnDef="user">
                 <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.USER' | translate }} </th>
-                <td class="pointer" mat-cell *matCellDef="let grant">
+                <td mat-cell *matCellDef="let grant">
                     {{grant?.displayName}}</td>
             </ng-container>
 
             <ng-container matColumnDef="org">
                 <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.GRANTEDORGDOMAIN' | translate }} </th>
-                <td class="pointer" mat-cell *matCellDef="let grant">
+                <td mat-cell *matCellDef="let grant">
                     {{grant.orgName}} </td>
             </ng-container>
 
             <ng-container matColumnDef="projectId">
                 <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.PROJECTNAME' | translate }} </th>
-                <td class="pointer" mat-cell *matCellDef="let grant">
+                <td mat-cell *matCellDef="let grant">
                     {{grant.projectName}} </td>
             </ng-container>
 
             <ng-container matColumnDef="creationDate">
                 <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CREATIONDATE' | translate }} </th>
-                <td class="pointer" mat-cell *matCellDef="let grant">
+                <td mat-cell *matCellDef="let grant">
                     {{grant.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }} </td>
             </ng-container>
 
             <ng-container matColumnDef="changeDate">
                 <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CHANGEDATE' | translate }} </th>
-                <td class="pointer" mat-cell *matCellDef="let grant">
+                <td mat-cell *matCellDef="let grant">
                     {{grant.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }} </td>
             </ng-container>
 
             <ng-container matColumnDef="roleNamesList">
                 <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }} </th>
                 <td mat-cell *matCellDef="let grant; let i = index">
-                    <ng-container *ngIf="context === UserGrantContext.USER">
-                        <span class="no-roles"
-                            *ngIf="grant.roleKeysList?.length === 0">{{'PROJECT.GRANT.NOROLES' | translate}}</span>
-                        <span
-                            *ngFor="let role of grant.roleKeysList">{{ (role.length>8)? (role | slice:0:8)+'..':(role) }}</span>
+                    <ng-container *ngIf="context === UserGrantContext.USER || context === UserGrantContext.NONE">
+                        <ng-container
+                            *ngIf="(grant.grantId && loadedGrantId !== grant.grantId) || (loadedProjectId !== grant.projectId)">
+                            <div class="flex-row">
+                                <span class="role" *ngFor="let role of grant.roleKeysList">{{ role }}</span>
+                                <button mat-stroked-button
+                                    *ngIf="grant.grantId ? loadedGrantId !== grant.grantId : loadedProjectId !== grant.projectId"
+                                    [disabled]="disableWrite || !((['user.grant.write$'] | hasRole | async) || ((context === UserGrantContext.OWNED_PROJECT ? ['user.grant.write:' + grant?.projectId] : context === UserGrantContext.GRANTED_PROJECT ? ['user.grant.write:' + grant?.grantId] : []) | hasRole | async))"
+                                    (click)="grant.grantId ? getGrantRoleOptions(grant.grantId, grant.projectId) : getProjectRoleOptions(grant.projectId)"
+                                    matTooltip="{{'ACTIONS.CHANGE' | translate}}">
+                                    <i class="las la-edit"></i>
+                                    {{'ACTIONS.EDIT' | translate}}
+                                </button>
+                            </div>
+                        </ng-container>
                     </ng-container>
 
-                    <ng-container *ngIf="context === UserGrantContext.OWNED_PROJECT">
-                        <ng-container *ngIf="loadedProjectId !== grant.projectId">
-                            <span class="role app-label"
-                                *ngFor="let role of grant.roleKeysList">{{ (role.length>6)? (role | slice:0:6)+'..':(role) }}</span>
-                            <button mat-icon-button (click)="getProjectRoleOptions(grant.projectId)"
-                                matTooltip="{{'ACTIONS.CHANGE' | translate}}">
-                                <i class="las la-edit"></i>
-                            </button>
-                        </ng-container>
+                    <ng-container
+                        *ngIf="context === UserGrantContext.OWNED_PROJECT || context === UserGrantContext.USER || context === UserGrantContext.NONE">
                         <mat-form-field class="form-field" appearance="outline"
-                            *ngIf="loadedProjectId === grant.projectId">
+                            *ngIf="loadedProjectId && loadedProjectId === grant.projectId">
                             <mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
-                            <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowWrite == false"
+                            <mat-select [(ngModel)]="grant.roleKeysList" multiple
+                                [disabled]="disableWrite || !((['user.grant.write$'] | hasRole | async) || ((context === UserGrantContext.OWNED_PROJECT ? ['user.grant.write:' + grant?.projectId] : context === UserGrantContext.GRANTED_PROJECT ? ['user.grant.write:' + grant?.grantId] : []) | hasRole | async))"
                                 (selectionChange)="updateRoles(grant, $event)">
                                 <mat-option *ngFor="let role of projectRoleOptions" [value]="role.key">
                                     {{role.key}}
@@ -91,10 +97,13 @@
                         </mat-form-field>
                     </ng-container>
 
-                    <ng-container *ngIf="context === UserGrantContext.GRANTED_PROJECT">
-                        <mat-form-field class="form-field" appearance="outline">
+                    <ng-container
+                        *ngIf="context === UserGrantContext.GRANTED_PROJECT || context === UserGrantContext.USER || context === UserGrantContext.NONE">
+                        <mat-form-field class="form-field" appearance="outline"
+                            *ngIf="loadedGrantId && loadedGrantId === grant.grantId">
                             <mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
-                            <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowWrite == false"
+                            <mat-select [(ngModel)]="grant.roleKeysList" multiple
+                                [disabled]="disableWrite || !((['user.grant.write$'] | hasRole | async) || ((context === UserGrantContext.OWNED_PROJECT ? ['user.grant.write:' + grant?.projectId] : context === UserGrantContext.GRANTED_PROJECT ? ['user.grant.write:' + grant?.grantId] : []) | hasRole | async))"
                                 (selectionChange)="updateRoles(grant, $event)">
                                 <mat-option *ngFor="let role of grantRoleOptions" [value]="role">
                                     {{role}}
@@ -106,11 +115,11 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;">
             </tr>
         </table>
 
-        <mat-paginator class="paginator" #paginator [length]="dataSource.totalResult" [pageSize]="50"
+        <mat-paginator class="paginator" #paginator [length]="dataSource.totalResult" [pageSize]="INITIAL_PAGE_SIZE"
             [length]="dataSource.totalResult" [pageSizeOptions]="[2, 3, 25, 50, 100, 250]" (page)="changePage($event)">
         </mat-paginator>
     </div>

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

@@ -25,20 +25,38 @@
       width: 50px;
       max-width: 50px;
     }
+  }
+}
 
-    .role {
-      display: inline-block;
-      margin: .25rem;
+.no-roles {
+  font-size: 13px;
+  color: var(--grey);
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: column;
+  max-width: 400px;
+
+  .role {
+    display: block;
+    margin: .25rem;
+    font-size: 14px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  button {
+    margin: .5rem 0;
+    max-width: 120px;
+
+    i {
+      font-size: 1.2rem;
+      margin-bottom: 5px;
     }
   }
 }
 
-.pointer {
-  outline: none;
-  cursor: pointer;
-}
-
-.no-roles {
-  font-size: 14px;
-  color: var(--grey);
+.fill-space {
+  flex: 1;
 }

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

@@ -4,14 +4,7 @@ import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSelectChange } from '@angular/material/select';
 import { MatTable } from '@angular/material/table';
 import { tap } from 'rxjs/operators';
-import {
-    ProjectRoleView,
-    SearchMethod,
-    UserGrant,
-    UserGrantSearchKey,
-    UserGrantSearchQuery,
-    UserGrantView,
-} from 'src/app/proto/generated/management_pb';
+import { ProjectRoleView, UserGrant, UserGrantView } from 'src/app/proto/generated/management_pb';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
@@ -23,8 +16,9 @@ import { UserGrantContext, UserGrantsDataSource } from './user-grants-datasource
     styleUrls: ['./user-grants.component.scss'],
 })
 export class UserGrantsComponent implements OnInit, AfterViewInit {
-    @Input() context: UserGrantContext = UserGrantContext.USER;
-    @Input() refreshOnPreviousRoute: string = '';
+    public INITIAL_PAGE_SIZE: number = 50;
+    @Input() context: UserGrantContext = UserGrantContext.NONE;
+    @Input() refreshOnPreviousRoutes: string[] = [];
     public grants: UserGrantView.AsObject[] = [];
 
     public dataSource!: UserGrantsDataSource;
@@ -32,8 +26,8 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
     @ViewChild(MatPaginator) public paginator!: MatPaginator;
     @ViewChild(MatTable) public table!: MatTable<UserGrantView.AsObject>;
 
-    @Input() allowWrite: boolean = false;
-    @Input() allowDelete: boolean = false;
+    @Input() disableWrite: boolean = false;
+    @Input() disableDelete: boolean = false;
 
     @Input() userId: string = '';
     @Input() projectId: string = '';
@@ -80,15 +74,11 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
                     this.routerLink = ['/grant-create', 'user', this.userId];
                 }
                 break;
-            default:
+            case UserGrantContext.NONE:
                 this.routerLink = ['/grant-create'];
         }
 
-        this.dataSource.loadGrants(this.context, 0, 25, {
-            projectId: this.projectId,
-            grantId: this.grantId,
-            userId: this.userId,
-        });
+        this.loadGrantsPage();
     }
 
     public ngAfterViewInit(): void {
@@ -102,11 +92,12 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
     private loadGrantsPage(): void {
         this.dataSource.loadGrants(
             this.context,
-            this.paginator.pageIndex,
-            this.paginator.pageSize,
+            this.paginator?.pageIndex ?? 0,
+            this.paginator?.pageSize ?? this.INITIAL_PAGE_SIZE,
             {
                 projectId: this.projectId,
                 grantId: this.grantId,
+                userId: this.userId,
             },
         );
     }
@@ -125,7 +116,7 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
 
     public getGrantRoleOptions(grantId: string, projectId: string): void {
         this.mgmtService.GetGrantedProjectByID(projectId, grantId).then(resp => {
-            this.loadedGrantId = projectId;
+            this.loadedGrantId = grantId;
             this.grantRoleOptions = resp.toObject().roleKeysList;
         }).catch(error => {
             this.toast.showError(error);
@@ -140,33 +131,12 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
     }
 
     updateRoles(grant: UserGrant.AsObject, selectionChange: MatSelectChange): void {
-        switch (this.context) {
-            case UserGrantContext.OWNED_PROJECT:
-                if (grant.id && grant.projectId) {
-                    this.userService.UpdateUserGrant(grant.id, grant.userId, selectionChange.value)
-                        .then(() => {
-                            this.toast.showInfo('GRANTS.TOAST.UPDATED', true);
-                        }).catch(error => {
-                            this.toast.showError(error);
-                        });
-                }
-                break;
-            case UserGrantContext.GRANTED_PROJECT:
-                if (this.grantId && this.projectId) {
-                    const projectQuery: UserGrantSearchQuery = new UserGrantSearchQuery();
-                    projectQuery.setKey(UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID);
-                    projectQuery.setMethod(SearchMethod.SEARCHMETHOD_EQUALS);
-                    projectQuery.setValue(this.projectId);
-                    this.userService.UpdateUserGrant(
-                        grant.id, grant.userId, selectionChange.value)
-                        .then(() => {
-                            this.toast.showInfo('GRANTS.TOAST.UPDATED', true);
-                        }).catch(error => {
-                            this.toast.showError(error);
-                        });
-                }
-                break;
-        }
+        this.userService.UpdateUserGrant(grant.id, grant.userId, selectionChange.value)
+            .then(() => {
+                this.toast.showInfo('GRANTS.TOAST.UPDATED', true);
+            }).catch(error => {
+                this.toast.showError(error);
+            });
     }
 
     deleteGrantSelection(): void {