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]>
2026-11-14 01:45:12 +00:00 · 2020-10-27 10:29:14 +01:00
parent afa38aa2c2
commit 78e5c26015
41 changed files with 483 additions and 178 deletions
@@ -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;
        }
    }

@@ -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>
@@ -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;
 }
@@ -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 {