feat(console): refresh roles, user-grants and project-members based on previous navigation (#728)

* feat: refresh roles, user-grants, project-members

* refresh keys

* user grants on granted projects

* refresh on member changes

* membership refresh

* lint

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

@@ -103,7 +103,11 @@ export class ProjectMembersComponent {
                         this.toast.showError(error);
                     });
             }
-        }));
+        })).then(() => {
+            setTimeout(() => {
+                this.changePage();
+            }, 1000);
+        });
     }
 
     public isAllSelected(): boolean {
@@ -141,6 +145,9 @@ export class ProjectMembersComponent {
                                 user.id, roles);
                         }
                     })).then(() => {
+                        setTimeout(() => {
+                            this.changePage();
+                        }, 1000);
                         this.toast.showInfo('PROJECT.TOAST.MEMBERSADDED', true);
                     }).catch(error => {
                         this.toast.showError(error);

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

@@ -1,5 +1,6 @@
 <app-refresh-table *ngIf="projectId" (refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult"
-    [selection]="selection" [loading]="dataSource?.loading$ | async" [timestamp]="dataSource?.viewTimestamp">
+    emitRefreshOnPreviousRoute="/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"
             matTooltip="{{'PROJECT.ROLE.DELETE' | translate}}" (click)="deleteSelectedRoles()" mat-icon-button

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

@@ -2,6 +2,7 @@ import { animate, animation, keyframes, style, transition, trigger, useAnimation
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
+import { RefreshService } from 'src/app/services/refresh.service';
 
 const rotate = animation([
     animate(
@@ -32,14 +33,24 @@ export class RefreshTableComponent implements OnInit {
     @Input() public dataSize: number = 0;
     @Input() public emitRefreshAfterTimeoutInMs: number = 0;
     @Input() public loading: boolean = false;
+    @Input() public emitRefreshOnPreviousRoute: string = '';
     @Output() public refreshed: EventEmitter<void> = new EventEmitter();
 
+    constructor(private refreshService: RefreshService) { }
+
     ngOnInit(): void {
         if (this.emitRefreshAfterTimeoutInMs) {
             setTimeout(() => {
                 this.emitRefresh();
             }, this.emitRefreshAfterTimeoutInMs);
         }
+
+        if (this.emitRefreshOnPreviousRoute && this.refreshService.previousUrls.includes(this.emitRefreshOnPreviousRoute)) {
+            setTimeout(() => {
+                console.log('refresh now');
+                this.emitRefresh();
+            }, 1000);
+        }
     }
 
     emitRefresh(): void {

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

@@ -1,5 +1,6 @@
 <app-refresh-table [loading]="dataSource?.loading$ | async" (refreshed)="changePage()"
-    [timestamp]="dataSource?.viewTimestamp" [dataSize]="dataSource?.totalResult" [selection]="selection">
+    [emitRefreshOnPreviousRoute]="refreshOnPreviousRoute" [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">
         <i class="las la-trash"></i>
@@ -21,9 +22,8 @@
                 <td class="selection" mat-cell *matCellDef="let row">
                     <mat-checkbox 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 ? row.displayName : (row.firstName + ' '+ row.lastName)"
-                            [size]="32">
+                        <app-avatar *ngIf="row && row?.displayName && row.firstName && row.lastName" class="avatar"
+                            [name]="row.displayName" [size]="32">
                         </app-avatar>
                     </mat-checkbox>
                 </td>
@@ -33,7 +33,7 @@
             <ng-container matColumnDef="user">
                 <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.USER' | translate }} </th>
                 <td class="pointer" mat-cell *matCellDef="let grant">
-                    {{grant?.firstName}} {{grant?.lastName}}</td>
+                    {{grant?.displayName}}</td>
             </ng-container>
 
             <ng-container matColumnDef="org">

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

@@ -24,6 +24,7 @@ import { UserGrantContext, UserGrantsDataSource } from './user-grants-datasource
 })
 export class UserGrantsComponent implements OnInit, AfterViewInit {
     @Input() context: UserGrantContext = UserGrantContext.USER;
+    @Input() refreshOnPreviousRoute: string = '';
     public grants: UserGrantView.AsObject[] = [];
 
     public dataSource!: UserGrantsDataSource;