fix(console): cleanup structure, role guard, paginated requests, cleanup policies, toast i18n, view timestamp, preloading strategy, maennchenfindings, fix passwordchange (#483)

* routes, move grid to list comopnent

* rename app list component, move to project sub

* add owned-project-detail child module

* seperate pipes

* set password validators only if needed

* create org initialize without pwd

* no caps

* self xss message

* fix user table

* fix project member paginator

* fix project members pagination, user grant pag

* move project grants, fix imports

* fix owned project detail imports

* use pipe and directives

* ng content bindings, rem custom schemas

* i18n, fix error toast parameter

* toast i18n

* side background

* fix: sequence, add timestamp

* audit

* fix metanav background

* org domain label

* cleanup policy component

* shorten user grant roles, mk cols visible as bind

* move user components, show otp only if available

* preload modules

* fix password change

* fix org create buttons

* class css

console/src/app/modules/add-member-dialog/member-create-dialog.component.ts

@@ -33,8 +33,6 @@ export class MemberCreateDialogComponent {
         this.creationType = data.creationType;
         this.projectId = data.projectId;
 
-        console.log(this.creationType);
-
         if (this.creationType === CreationType.PROJECT_GRANTED) {
             this.projectService.GetProjectGrantMemberRoles().then(resp => {
                 this.memberRoleOptions = resp.toObject().rolesList;

console/src/app/modules/card/card.component.html

@@ -3,7 +3,7 @@
         <div *ngIf="title" class="row">
             <h2 class="title">{{title}}</h2>
             <span class="fill-space"></span>
-            <ng-content select="card-actions"></ng-content>
+            <ng-content select="[card-actions]"></ng-content>
             <button class="button" matTooltip="Expand or collapse" mat-icon-button (click)="expanded = !expanded">
                 <mat-icon *ngIf="!expanded">keyboard_arrow_down</mat-icon>
                 <mat-icon *ngIf="expanded">keyboard_arrow_up</mat-icon>

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

@@ -119,7 +119,6 @@ export class ChangesComponent implements OnInit {
                     }
                 }),
                 catchError(err => {
-                    console.error(err);
                     this._loading.next(false);
                     this.bottom = true;
                     return of([]);

console/src/app/modules/changes/changes.module.ts

@@ -4,12 +4,13 @@ import { NgModule } from '@angular/core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { TranslateModule } from '@ngx-translate/core';
 import { ScrollableModule } from 'src/app/directives/scrollable/scrollable.module';
-import { PipesModule } from 'src/app/pipes/pipes.module';
+import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
+import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe.module';
+import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe.module';
 
 import { ChangesComponent } from './changes.component';
 
 
-
 @NgModule({
     declarations: [
         ChangesComponent,
@@ -19,8 +20,10 @@ import { ChangesComponent } from './changes.component';
         ScrollableModule,
         MatProgressSpinnerModule,
         TranslateModule,
-        PipesModule,
+        HasRolePipeModule,
         ScrollingModule,
+        LocalizedDatePipeModule,
+        TimestampToDatePipeModule,
     ],
     exports: [
         ChangesComponent,

console/src/app/modules/meta-layout/meta-layout.component.html

@@ -5,6 +5,6 @@
     <div class="meta" [ngClass]="{'hidden': hidden}">
         <button (click)="hidden = !hidden" color="primary" class="hide" mat-icon-button><i
                 class="las la-arrow-right"></i></button>
-        <ng-content class="meta-content" select="metainfo"></ng-content>
+        <ng-content class="meta-content" select="[metainfo]"></ng-content>
     </div>
 </div>

console/src/app/modules/project-contributors/project-contributors.component.ts

@@ -85,7 +85,7 @@ export class ProjectContributorsComponent implements OnInit {
                             case ProjectType.PROJECTTYPE_OWNED:
                                 return this.projectService.AddProjectMember(this.project.projectId, user.id, roles)
                                     .then(() => {
-                                        this.toast.showInfo('members added');
+                                        this.toast.showInfo('PROJECT.TOAST.MEMBERADDED', true);
                                     }).catch(error => {
                                         this.toast.showError(error);
                                     });
@@ -96,7 +96,7 @@ export class ProjectContributorsComponent implements OnInit {
                                     user.id,
                                     roles,
                                 ).then(() => {
-                                    this.toast.showInfo('members added');
+                                    this.toast.showInfo('PROJECT.TOAST.MEMBERADDED', true);
                                 }).catch(error => {
                                     this.toast.showError(error);
                                 });

console/src/app/modules/project-members/project-members-datasource.ts

@@ -25,8 +25,7 @@ export class ProjectMembersDataSource extends DataSource<ProjectMember.AsObject>
         const offset = pageIndex * pageSize;
 
         this.loadingSubject.next(true);
-        console.log(grantId);
-        // TODO
+
         const promise: Promise<ProjectMemberSearchResponse> | undefined =
             projectType === ProjectType.PROJECTTYPE_OWNED ?
                 this.projectService.SearchProjectMembers(projectId, pageSize, offset) :

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

@@ -98,7 +98,7 @@
                             <mat-form-field class="form-field" appearance="outline" *ngIf="project">
                                 <mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
                                 <mat-select [(ngModel)]="member.rolesList" multiple
-                                    [disabled]="(['project.member.write:'+project.projectId] | hasRole) == false"
+                                    [disabled]="([('project.member.write:' + project.projectId)] | hasRole | async) == false"
                                     (selectionChange)="updateRoles(member, $event)">
                                     <mat-option *ngFor="let role of memberRoleOptions" [value]="role">
                                         {{ 'ROLES.'+role | translate }}
@@ -113,8 +113,9 @@
                     </tr>
                 </table>
 
-                <mat-paginator class="background-style" #paginator [pageSize]="50"
-                    [pageSizeOptions]="[25, 50, 100, 250]">
+                <mat-paginator *ngIf="dataSource" class="background-style" #paginator [pageSize]="INITIALPAGESIZE"
+                    [length]="dataSource.totalResult" [pageSizeOptions]="[25, 50, 100, 250]"
+                    (page)="changePage($event)">
                 </mat-paginator>
             </div>
         </div>

console/src/app/modules/project-members/project-members.component.ts

@@ -1,7 +1,7 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSelectChange } from '@angular/material/select';
 import { MatTable } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
@@ -13,12 +13,14 @@ import { ToastService } from 'src/app/services/toast.service';
 import { CreationType, MemberCreateDialogComponent } from '../add-member-dialog/member-create-dialog.component';
 import { ProjectMembersDataSource } from './project-members-datasource';
 
+
 @Component({
     selector: 'app-project-members',
     templateUrl: './project-members.component.html',
     styleUrls: ['./project-members.component.scss'],
 })
 export class ProjectMembersComponent {
+    public INITIALPAGESIZE: number = 25;
     public project!: ProjectView.AsObject | ProjectGrantView.AsObject;
     public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
     public disabled: boolean = false;
@@ -50,15 +52,19 @@ export class ProjectMembersComponent {
                         this.project = project.toObject();
                         this.projectName = this.project.name;
                         this.dataSource = new ProjectMembersDataSource(this.projectService);
-                        this.dataSource.loadMembers(this.project.projectId, this.projectType, 0, 25);
+                        this.dataSource.loadMembers(this.project.projectId, this.projectType, 0, this.INITIALPAGESIZE);
                     });
                 } else if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
-                    console.log(params.projectid, params.grantid);
                     this.projectService.GetGrantedProjectByID(params.projectid, params.grantid).then(project => {
                         this.project = project.toObject();
                         this.projectName = this.project.projectName;
                         this.dataSource = new ProjectMembersDataSource(this.projectService);
-                        this.dataSource.loadMembers(this.project.projectId, this.projectType, 0, 25, this.grantId);
+                        this.dataSource.loadMembers(this.project.projectId,
+                            this.projectType,
+                            0,
+                            this.INITIALPAGESIZE,
+                            this.grantId,
+                        );
                     });
                 }
             });
@@ -149,7 +155,7 @@ export class ProjectMembersComponent {
         if (this.projectType === ProjectType.PROJECTTYPE_OWNED) {
             this.projectService.ChangeProjectMember(this.project.projectId, member.userId, selectionChange.value)
                 .then((newmember: ProjectMember) => {
-                    this.toast.showInfo('Member changed');
+                    this.toast.showInfo('PROJECT.TOAST.MEMBERCHANGED', true);
                 }).catch(error => {
                     this.toast.showError(error);
                 });
@@ -157,10 +163,14 @@ export class ProjectMembersComponent {
             this.projectService.ChangeProjectGrantMember(this.project.projectId,
                 this.grantId, member.userId, selectionChange.value)
                 .then((newmember: ProjectMember) => {
-                    this.toast.showInfo('Member changed');
+                    this.toast.showInfo('PROJECT.TOAST.MEMBERCHANGED', true);
                 }).catch(error => {
                     this.toast.showError(error);
                 });
         }
     }
+
+    public changePage(event: PageEvent): void {
+        this.dataSource.loadMembers(this.project.projectId, this.projectType, event.pageIndex, event.pageSize, this.grantId);
+    }
 }

console/src/app/modules/project-members/project-members.module.ts

@@ -15,7 +15,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
-import { PipesModule } from 'src/app/pipes/pipes.module';
+import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
 
 import { ProjectMembersRoutingModule } from './project-members-routing.module';
 import { ProjectMembersComponent } from './project-members.component';
@@ -42,7 +42,7 @@ import { ProjectMembersComponent } from './project-members.component';
         MatProgressSpinnerModule,
         FormsModule,
         TranslateModule,
-        PipesModule,
+        HasRolePipeModule,
     ],
 })
 export class ProjectMembersModule { }

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

@@ -93,7 +93,7 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit {
             });
             this.selection.clear();
         }).catch(error => {
-            this.toast.showError(error?.message || 'Error');
+            this.toast.showError(error);
         });
     }
 
@@ -105,8 +105,8 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit {
                 this.dataSource.rolesSubject.value.splice(index, 1);
                 this.dataSource.rolesSubject.next(this.dataSource.rolesSubject.value);
             })
-            .catch(data => {
-                this.toast.showError(data.message);
+            .catch(error => {
+                this.toast.showError(error);
             });
     }
 

console/src/app/modules/project-roles/project-roles.module.ts

@@ -15,7 +15,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
-import { PipesModule } from 'src/app/pipes/pipes.module';
+import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
+import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe.module';
 
 import { ProjectRoleDetailComponent } from './project-role-detail/project-role-detail.component';
 import { ProjectRolesComponent } from './project-roles.component';
@@ -39,9 +40,10 @@ import { ProjectRolesComponent } from './project-roles.component';
         MatCheckboxModule,
         RouterModule,
         MatTooltipModule,
-        PipesModule,
+        HasRolePipeModule,
         TranslateModule,
         MatMenuModule,
+        TimestampToDatePipeModule,
     ],
     exports: [
         ProjectRolesComponent,

console/src/app/modules/shared/shared.module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { QuicklinkModule } from 'ngx-quicklink';
+
+@NgModule({
+    declarations: [],
+    imports: [
+        CommonModule,
+        QuicklinkModule,
+    ],
+    exports: [
+        QuicklinkModule,
+    ],
+})
+export class SharedModule { }

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

@@ -6,6 +6,7 @@ import {
     UserGrantSearchKey,
     UserGrantSearchQuery,
     UserGrantSearchResponse,
+    UserGrantView,
 } from 'src/app/proto/generated/management_pb';
 import { MgmtUserService } from 'src/app/services/mgmt-user.service';
 
@@ -18,7 +19,7 @@ export enum UserGrantContext {
 
 export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
     public totalResult: number = 0;
-    public grantsSubject: BehaviorSubject<UserGrant.AsObject[]> = new BehaviorSubject<UserGrant.AsObject[]>([]);
+    public grantsSubject: BehaviorSubject<UserGrantView.AsObject[]> = new BehaviorSubject<UserGrantView.AsObject[]>([]);
     private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
     public loading$: Observable<boolean> = this.loadingSubject.asObservable();
 
@@ -82,7 +83,6 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
             catchError(() => of([])),
             finalize(() => this.loadingSubject.next(false)),
         ).subscribe(grants => {
-            console.log(grants);
             this.grantsSubject.next(grants);
         });
     }
@@ -93,7 +93,7 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
      * the returned stream emits new items.
      * @returns A stream of the items to be rendered.
      */
-    public connect(): Observable<UserGrant.AsObject[]> {
+    public connect(): Observable<UserGrantView.AsObject[]> {
         return this.grantsSubject.asObservable();
     }
 

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

@@ -25,7 +25,6 @@
         <mat-spinner diameter="50"></mat-spinner>
     </div>
     <table mat-table multiTemplateDataRows class="full-width-table" aria-label="Elements" [dataSource]="dataSource">
-
         <ng-container matColumnDef="select">
             <th class="selection" mat-header-cell *matHeaderCellDef>
                 <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
@@ -53,7 +52,7 @@
         <ng-container matColumnDef="org">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.GRANTEDORGDOMAIN' | translate }} </th>
             <td class="pointer" mat-cell *matCellDef="let grant">
-                {{grant.orgDomain}} {{grant.orgName}} </td>
+                {{grant.orgName}} </td>
         </ng-container>
 
         <ng-container matColumnDef="projectId">
@@ -81,7 +80,8 @@
                 <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}}</span>
+                    <span
+                        *ngFor="let role of grant.roleKeysList">{{ (role.length>8)? (role | slice:0:8)+'..':(role) }}</span>
                 </ng-container>
 
                 <!-- <ng-container *ngIf="context === UserGrantContext.USER">
@@ -105,7 +105,8 @@
 
                 <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}}</span>
+                        <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>
@@ -141,6 +142,7 @@
         </tr>
     </table>
 
-    <mat-paginator #paginator [length]="dataSource.totalResult" [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
+    <mat-paginator #paginator [length]="dataSource.totalResult" [pageSize]="50" [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.ts

@@ -1,10 +1,10 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
+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 { ProjectGrant, ProjectRoleView, UserGrant } from 'src/app/proto/generated/management_pb';
+import { ProjectRoleView, UserGrant, UserGrantView } from 'src/app/proto/generated/management_pb';
 import { MgmtUserService } from 'src/app/services/mgmt-user.service';
 import { ProjectService } from 'src/app/services/project.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -17,15 +17,13 @@ import { UserGrantContext, UserGrantsDataSource } from './user-grants-datasource
     styleUrls: ['./user-grants.component.scss'],
 })
 export class UserGrantsComponent implements OnInit, AfterViewInit {
-    // @Input() filterValue: string = '';
-    // @Input() filter: UserGrantSearchKey = UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID;
     @Input() context: UserGrantContext = UserGrantContext.USER;
-    public grants: UserGrant.AsObject[] = [];
+    public grants: UserGrantView.AsObject[] = [];
 
     public dataSource!: UserGrantsDataSource;
-    public selection: SelectionModel<UserGrant.AsObject> = new SelectionModel<UserGrant.AsObject>(true, []);
+    public selection: SelectionModel<UserGrantView.AsObject> = new SelectionModel<UserGrantView.AsObject>(true, []);
     @ViewChild(MatPaginator) public paginator!: MatPaginator;
-    @ViewChild(MatTable) public table!: MatTable<ProjectGrant.AsObject>;
+    @ViewChild(MatTable) public table!: MatTable<UserGrantView.AsObject>;
 
     @Input() allowCreate: boolean = false;
     @Input() allowDelete: boolean = false;
@@ -51,19 +49,13 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
         private toast: ToastService,
     ) { }
 
-    public displayedColumns: string[] = ['select',
+    @Input() public displayedColumns: string[] = ['select',
         'user',
         'org',
         'projectId', 'creationDate', 'changeDate', 'roleNamesList'];
 
     public ngOnInit(): void {
-        console.log(this.context);
         this.dataSource = new UserGrantsDataSource(this.userService);
-        const data = {
-            projectId: this.projectId,
-            grantId: this.grantId,
-            userId: this.userId,
-        };
 
         switch (this.context) {
             case UserGrantContext.OWNED_PROJECT:
@@ -73,7 +65,7 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
                 }
                 break;
             case UserGrantContext.GRANTED_PROJECT:
-                if (data && data.grantId) {
+                if (this.grantId) {
                     this.routerLink = ['/grant-create', 'project', this.projectId, 'grant', this.grantId];
                     this.getGrantRoleOptions(this.grantId, this.projectId);
                 }
@@ -86,7 +78,11 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
             default:
                 this.routerLink = ['/grant-create'];
         }
-        this.dataSource.loadGrants(this.context, 0, 25, data);
+        this.dataSource.loadGrants(this.context, 0, 25, {
+            projectId: this.projectId,
+            grantId: this.grantId,
+            userId: this.userId,
+        });
     }
 
     public ngAfterViewInit(): void {
@@ -122,8 +118,6 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
     }
 
     public getGrantRoleOptions(grantId: string, projectId: string): void {
-        console.log(grantId, projectId);
-
         this.projectService.GetGrantedProjectByID(projectId, grantId).then(resp => {
             this.loadedGrantId = projectId;
             this.grantRoleOptions = resp.toObject().roleKeysList;
@@ -133,7 +127,6 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
     }
 
     public getProjectRoleOptions(projectId: string): void {
-        console.log(projectId);
         this.projectService.SearchProjectRoles(projectId, 100, 0).then(resp => {
             this.loadedProjectId = projectId;
             this.projectRoleOptions = resp.toObject().resultList;
@@ -182,4 +175,12 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
             this.toast.showError(error);
         });
     }
+
+    public changePage(event: PageEvent): void {
+        this.dataSource.loadGrants(this.context, event.pageIndex, event.pageSize, {
+            projectId: this.projectId,
+            grantId: this.grantId,
+            userId: this.userId,
+        });
+    }
 }

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

@@ -13,7 +13,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
-import { PipesModule } from 'src/app/pipes/pipes.module';
+import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
+import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe.module';
 
 import { AvatarModule } from '../avatar/avatar.module';
 import { UserGrantsComponent } from './user-grants.component';
@@ -38,7 +39,8 @@ import { UserGrantsComponent } from './user-grants.component';
         MatSelectModule,
         MatFormFieldModule,
         TranslateModule,
-        PipesModule,
+        HasRolePipeModule,
+        TimestampToDatePipeModule,
     ],
     exports: [
         UserGrantsComponent,