feat(console): user memberships, generic member create dialog, fix user autocomplete emitter (#606)

* load manager mgmtservice, user service

* add org memberships

* membership component, generic member creation

* refactor member create dialog

* project autocomplete context

* create batch managers in user component

* project context wrapper

* emit on user removal, preselect user on init

* membership avatar style, service

* auth user memberships, navigate to target

* cursor fix, avatar gen

* lint

* i18n fix

* remove role translations

* membership detail page, i18n

* fix role label i18n, after view init loader

* remove projectid from grant remove

* fix iam race condition

* refresh table ts, fix no permission project search

* change membership colors

* refresh table everywhere, replace assets, routing

* fix logo header size

* lint, fix project grant removal

* timestmp for p mem, user list, grants, p list (#615)

* npm audit

* update deps, resolve vulnerability

* fix tslint config

* update lock

* load 20 changes at once

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

Co-authored-by: Florian Forster <florian@caos.ch>

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

Co-authored-by: Florian Forster <florian@caos.ch>

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

Co-authored-by: Florian Forster <florian@caos.ch>

* membership i18n

Co-authored-by: Florian Forster <florian@caos.ch>

console/package.json

@@ -11,17 +11,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~10.0.2",
+    "@angular/animations": "~10.0.11",
-    "@angular/cdk": "~10.0.1",
+    "@angular/cdk": "~10.1.3",
-    "@angular/common": "~10.0.2",
+    "@angular/common": "~10.0.11",
-    "@angular/compiler": "~10.0.2",
+    "@angular/compiler": "~10.0.11",
-    "@angular/core": "~10.0.2",
+    "@angular/core": "~10.0.11",
-    "@angular/forms": "~10.0.2",
+    "@angular/forms": "~10.0.11",
-    "@angular/material": "^10.0.1",
+    "@angular/material": "^10.1.3",
-    "@angular/platform-browser": "~10.0.2",
+    "@angular/platform-browser": "~10.0.11",
-    "@angular/platform-browser-dynamic": "~10.0.2",
+    "@angular/platform-browser-dynamic": "~10.0.11",
-    "@angular/router": "~10.0.2",
+    "@angular/router": "~10.0.11",
-    "@angular/service-worker": "~10.0.2",
+    "@angular/service-worker": "~10.0.11",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@types/file-saver": "^2.0.1",
@@ -34,25 +34,24 @@
     "google-proto-files": "^2.2.0",
     "google-protobuf": "^3.13.0",
     "grpc": "^1.24.3",
-    "grpc-web": "^1.2.0",
+    "grpc-web": "^1.2.1",
     "moment": "^2.27.0",
     "ngx-moment": "^5.0.0",
-    "ngx-quicklink": "^0.2.3",
+    "ngx-quicklink": "^0.2.4",
-    "prettier-stylelint": "^0.4.2",
     "rxjs": "~6.6.2",
     "ts-protoc-gen": "^0.12.0",
     "tslib": "^2.0.1",
     "uuid": "^8.3.0",
-    "zone.js": "~0.10.3"
+    "zone.js": "~0.11.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1000.6",
     "@angular/cli": "~10.0.6",
-    "@angular/compiler-cli": "~10.0.2",
+    "@angular/compiler-cli": "~10.0.11",
     "@types/jasmine": "~3.5.12",
-    "@angular/language-service": "~10.0.9",
+    "@angular/language-service": "~10.0.11",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^14.0.27",
+    "@types/node": "^14.6.0",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",

console/src/app/app.component.html

@@ -6,9 +6,9 @@
             </button>
             <a *ngIf="(isHandset$ | async) == false" class="title" [routerLink]="['/']">
                 <img class="logo" alt="zitadel logo" *ngIf="componentCssClass == 'dark-theme'; else lighttheme"
-                    src="../assets/images/zitadel-logo-oneline-darkdesign.svg" />
+                    src="../assets/images/zitadel-logo-light.svg" />
                 <ng-template #lighttheme>
-                    <img alt="zitadel logo" class="logo" src="../assets/images/zitadel-logo-oneline-lightdesign.svg" />
+                    <img alt="zitadel logo" class="logo" src="../assets/images/zitadel-logo-dark.svg" />
                 </ng-template>
             </a>
 

console/src/app/app.component.scss

@@ -11,8 +11,8 @@
   right: 0;
 
   .logo {
-    height: 40px;
+    max-height: 50px;
-    width: auto;
+    width: 160px;
   }
 
   .title {
@@ -20,7 +20,6 @@
     color: white;
     font-size: 1.2rem;
     font-weight: 400;
-    margin-left: 1rem;
     line-height: 1.2rem;
     margin-right: 1rem;
   }

console/src/app/app.component.ts

@@ -212,13 +212,17 @@ export class AppComponent implements OnDestroy {
         this.router.navigate(['/']);
     }
 
-    private async getProjectCount(): Promise<any> {
+    private getProjectCount(): void {
-        this.ownedProjectsCount = await this.projectService.SearchProjects(0, 0).then(res => {
+        this.authService.isAllowed(['project.read']).subscribe((allowed) => {
-            return res.toObject().totalResult;
+            if (allowed) {
-        });
+                this.projectService.SearchProjects(0, 0).then(res => {
+                    this.ownedProjectsCount = res.toObject().totalResult;
+                });
 
-        this.grantedProjectsCount = await this.projectService.SearchGrantedProjects(0, 0).then(res => {
+                this.projectService.SearchGrantedProjects(0, 0).then(res => {
-            return res.toObject().totalResult;
+                    this.grantedProjectsCount = res.toObject().totalResult;
+                });
+            }
         });
     }
 }

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

@@ -2,15 +2,39 @@
     <span class="title">{{'MEMBER.ADD' | translate}}</span>
 </h1>
 <p class="desc"> {{'ORG_DETAIL.MEMBER.ADDDESCRIPTION' | translate}}</p>
+
 <div mat-dialog-content>
-    <app-search-user-autocomplete (selectionChanged)="users = $event"></app-search-user-autocomplete>
+    <!-- if no context -->
+    <ng-container *ngIf="showCreationTypeSelector">
+        <mat-form-field class="full-width" appearance="outline">
+            <mat-label>{{ 'MEMBER.CREATIONTYPE' | translate }}</mat-label>
+            <mat-select [(ngModel)]="creationType" (selectionChange)="loadRoles()">
+                <mat-option *ngFor="let type of creationTypes" [value]="type">
+                    {{ 'MEMBER.CREATIONTYPES.'+type | translate}}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+
+        <ng-container
+            *ngIf="creationType === CreationType.PROJECT_OWNED || creationType === CreationType.PROJECT_GRANTED">
+            <p>{{'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate}}</p>
+            <app-search-project-autocomplete class="block" singleOutput="true"
+                (selectionChanged)="selectProject($event)"
+                [autocompleteType]="creationType === CreationType.PROJECT_OWNED ? ProjectAutocompleteType.PROJECT_OWNED : creationType === CreationType.PROJECT_GRANTED ? ProjectAutocompleteType.PROJECT_GRANTED : undefined">
+            </app-search-project-autocomplete>
+        </ng-container>
+    </ng-container>
+    <!-- if no context end -->
+
+    <app-search-user-autocomplete [users]="preselectedUsers" (selectionChanged)="users = $event">
+    </app-search-user-autocomplete>
 
     <mat-form-field class="full-width" appearance="outline"
         *ngIf="creationType === CreationType.PROJECT_OWNED || creationType === CreationType.PROJECT_GRANTED || creationType === CreationType.IAM">
-        <mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
+        <mat-label>{{ 'ROLESLABEL' | translate }}</mat-label>
         <mat-select [(ngModel)]="roles" multiple>
             <mat-option *ngFor="let role of memberRoleOptions" [value]="role">
-                {{ 'ROLES.'+role | translate }}
+                {{ role }}
             </mat-option>
         </mat-select>
     </mat-form-field>

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

@@ -1,10 +1,12 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { ProjectRole, User } from 'src/app/proto/generated/management_pb';
+import { ProjectGrantView, ProjectRole, ProjectView, User } from 'src/app/proto/generated/management_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { ProjectService } from 'src/app/services/project.service';
 import { ToastService } from 'src/app/services/toast.service';
 
+import { ProjectAutocompleteType } from '../search-project-autocomplete/search-project-autocomplete.component';
+
 export enum CreationType {
     PROJECT_OWNED = 0,
     PROJECT_GRANTED = 1,
@@ -17,40 +19,78 @@ export enum CreationType {
     styleUrls: ['./member-create-dialog.component.scss'],
 })
 export class MemberCreateDialogComponent {
-    public projectId: string = '';
+    private projectId: string = '';
+    private grantId: string = '';
+    public preselectedUsers: Array<User.AsObject> = [];
+
+
     public creationType!: CreationType;
+    public creationTypes: CreationType[] = [
+        CreationType.IAM,
+        CreationType.ORG,
+        CreationType.PROJECT_OWNED,
+        CreationType.PROJECT_GRANTED,
+    ];
     public users: Array<User.AsObject> = [];
     public roles: Array<ProjectRole.AsObject> | string[] = [];
     public CreationType: any = CreationType;
+    public ProjectAutocompleteType: any = ProjectAutocompleteType;
     public memberRoleOptions: string[] = [];
+
+    public showCreationTypeSelector: boolean = false;
     constructor(
         private projectService: ProjectService,
         private adminService: AdminService,
         public dialogRef: MatDialogRef<MemberCreateDialogComponent>,
         @Inject(MAT_DIALOG_DATA) public data: any,
-        toastService: ToastService,
+        private toastService: ToastService,
     ) {
-        this.creationType = data.creationType;
+        if (data?.projectId) {
-        this.projectId = data.projectId;
+            this.projectId = data.projectId;
+        }
+        if (data?.user) {
+            this.preselectedUsers = [data.user];
+            this.users = [data.user];
+        }
 
-        if (this.creationType === CreationType.PROJECT_GRANTED) {
+        if (data?.creationType !== undefined) {
-            this.projectService.GetProjectGrantMemberRoles().then(resp => {
+            this.creationType = data.creationType;
-                this.memberRoleOptions = resp.toObject().rolesList;
+            this.loadRoles();
-            }).catch(error => {
+        } else {
-                toastService.showError(error);
+            this.showCreationTypeSelector = true;
-            });
+        }
-        } else if (this.creationType === CreationType.PROJECT_OWNED) {
+    }
-            this.projectService.GetProjectMemberRoles().then(resp => {
+
-                this.memberRoleOptions = resp.toObject().rolesList;
+    public loadRoles(): void {
-            }).catch(error => {
+        switch (this.creationType) {
-                toastService.showError(error);
+            case CreationType.PROJECT_GRANTED:
-            });
+                this.projectService.GetProjectGrantMemberRoles().then(resp => {
-        } else if (this.creationType === CreationType.IAM) {
+                    this.memberRoleOptions = resp.toObject().rolesList;
-            this.adminService.GetIamMemberRoles().then(resp => {
+                }).catch(error => {
-                this.memberRoleOptions = resp.toObject().rolesList;
+                    this.toastService.showError(error);
-            }).catch(error => {
+                });
-                toastService.showError(error);
+                break;
-            });
+            case CreationType.PROJECT_OWNED:
+                this.projectService.GetProjectMemberRoles().then(resp => {
+                    this.memberRoleOptions = resp.toObject().rolesList;
+                }).catch(error => {
+                    this.toastService.showError(error);
+                });
+                break;
+            case CreationType.IAM:
+                this.adminService.GetIamMemberRoles().then(resp => {
+                    this.memberRoleOptions = resp.toObject().rolesList;
+                }).catch(error => {
+                    this.toastService.showError(error);
+                });
+                break;
+        }
+    }
+
+    public selectProject(project: ProjectView.AsObject | ProjectGrantView.AsObject | any): void {
+        this.projectId = project.projectId;
+        if (project.id) {
+            this.grantId = project.id;
         }
     }
 
@@ -59,7 +99,13 @@ export class MemberCreateDialogComponent {
     }
 
     public closeDialogWithSuccess(): void {
-        this.dialogRef.close({ users: this.users, roles: this.roles });
+        this.dialogRef.close({
+            users: this.users,
+            roles: this.roles,
+            creationType: this.creationType,
+            projectId: this.projectId,
+            grantId: this.grantId,
+        });
     }
 
     public setOrgMemberRoles(roles: string[]): void {

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

@@ -11,6 +11,7 @@ import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autoco
 import {
     OrgMemberRolesAutocompleteModule,
 } from '../../pages/orgs/org-member-roles-autocomplete/org-member-roles-autocomplete.module';
+import { SearchProjectAutocompleteModule } from '../search-project-autocomplete/search-project-autocomplete.module';
 import { SearchRolesAutocompleteModule } from '../search-roles-autocomplete/search-roles-autocomplete.module';
 import { MemberCreateDialogComponent } from './member-create-dialog.component';
 
@@ -26,6 +27,7 @@ import { MemberCreateDialogComponent } from './member-create-dialog.component';
         FormsModule,
         SearchUserAutocompleteModule,
         SearchRolesAutocompleteModule,
+        SearchProjectAutocompleteModule,
         OrgMemberRolesAutocompleteModule,
     ],
 })

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

@@ -9,7 +9,7 @@
 
 @mixin changes-theme($theme) {
   .scroll-container {
-    max-height: 60vh;
+    max-height: 50vh;
     overflow-y: scroll;
 
     .item {

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

@@ -45,13 +45,13 @@ export class ChangesComponent implements OnInit {
     private init(): void {
         let first: Promise<Changes>;
         switch (this.changeType) {
-            case ChangeType.MYUSER: first = this.authUserService.GetMyUserChanges(10, 0);
+            case ChangeType.MYUSER: first = this.authUserService.GetMyUserChanges(20, 0);
                 break;
-            case ChangeType.USER: first = this.mgmtUserService.UserChanges(this.id, 10, 0);
+            case ChangeType.USER: first = this.mgmtUserService.UserChanges(this.id, 20, 0);
                 break;
             case ChangeType.PROJECT: first = this.mgmtUserService.ProjectChanges(this.id, 20, 0);
                 break;
-            case ChangeType.ORG: first = this.mgmtUserService.OrgChanges(this.id, 10, 0);
+            case ChangeType.ORG: first = this.mgmtUserService.OrgChanges(this.id, 20, 0);
                 break;
         }
 
@@ -70,13 +70,13 @@ export class ChangesComponent implements OnInit {
         let more: Promise<Changes>;
 
         switch (this.changeType) {
-            case ChangeType.MYUSER: more = this.authUserService.GetMyUserChanges(10, cursor);
+            case ChangeType.MYUSER: more = this.authUserService.GetMyUserChanges(20, cursor);
                 break;
-            case ChangeType.USER: more = this.mgmtUserService.UserChanges(this.id, 10, cursor);
+            case ChangeType.USER: more = this.mgmtUserService.UserChanges(this.id, 20, cursor);
                 break;
-            case ChangeType.PROJECT: more = this.mgmtUserService.ProjectChanges(this.id, 10, cursor);
+            case ChangeType.PROJECT: more = this.mgmtUserService.ProjectChanges(this.id, 20, cursor);
                 break;
-            case ChangeType.ORG: more = this.mgmtUserService.OrgChanges(this.id, 10, cursor);
+            case ChangeType.ORG: more = this.mgmtUserService.OrgChanges(this.id, 20, cursor);
                 break;
         }
 

console/src/app/modules/contributors/contributors.component.scss

@@ -52,6 +52,10 @@
         display: flex;
         align-items: center;
         justify-content: center;
+
+        .avatar {
+          pointer-events: none;
+        }
       }
 
       .margin-neg {

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

@@ -1,4 +1,5 @@
 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 { ProjectMember, ProjectMemberSearchResponse, ProjectType } from 'src/app/proto/generated/management_pb';
@@ -11,6 +12,8 @@ import { ProjectService } from 'src/app/services/project.service';
  */
 export class ProjectMembersDataSource extends DataSource<ProjectMember.AsObject> {
     public totalResult: number = 0;
+    public viewTimestamp!: Timestamp.AsObject;
+
     public membersSubject: BehaviorSubject<ProjectMember.AsObject[]> = new BehaviorSubject<ProjectMember.AsObject[]>([]);
     private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
     public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@@ -35,8 +38,12 @@ export class ProjectMembersDataSource extends DataSource<ProjectMember.AsObject>
         if (promise) {
             from(promise).pipe(
                 map(resp => {
-                    this.totalResult = resp.toObject().totalResult;
+                    const response = resp.toObject();
-                    return resp.toObject().resultList;
+                    this.totalResult = response.totalResult;
+                    if (response.viewTimestamp) {
+                        this.viewTimestamp = response.viewTimestamp;
+                    }
+                    return response.resultList;
                 }),
                 catchError(() => of([])),
                 finalize(() => this.loadingSubject.next(false)),

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

@@ -2,7 +2,7 @@
     title="{{projectName}} {{ 'PROJECT.MEMBER.TITLE' | translate }}"
     description="{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}">
     <app-refresh-table *ngIf="project" (refreshed)="changePage()" [dataSize]="dataSource.totalResult"
-        [selection]="selection" [loading]="dataSource?.loading$ | async">
+        [timestamp]="dataSource.viewTimestamp" [selection]="selection" [loading]="dataSource?.loading$ | async">
         <ng-template appHasRole actions
             [appHasRole]="['project.member.delete:' + project.projectId, 'project.member.delete']">
             <button (click)="removeProjectMemberSelection()" color="warn"
@@ -68,15 +68,15 @@
                 </ng-container>
 
                 <ng-container matColumnDef="roles">
-                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
+                    <th mat-header-cell *matHeaderCellDef> {{ 'ROLESLABEL' | translate }} </th>
                     <td mat-cell *matCellDef="let member">
                         <mat-form-field class="form-field" appearance="outline" *ngIf="project">
-                            <mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
+                            <mat-label>{{ 'ROLESLABEL' | translate }}</mat-label>
                             <mat-select [(ngModel)]="member.rolesList" multiple
                                 [disabled]="([('project.member.write:' + project.projectId), 'project.member.write'] | hasRole | async) == false"
                                 (selectionChange)="updateRoles(member, $event)">
                                 <mat-option *ngFor="let role of memberRoleOptions" [value]="role">
-                                    {{ 'ROLES.'+role | translate }}
+                                    {{ role }}
                                 </mat-option>
                             </mat-select>
                         </mat-form-field>

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

@@ -122,7 +122,6 @@ export class ProjectMembersComponent {
         const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
             data: {
                 creationType: CreationType.PROJECT_OWNED,
-                projectId: this.project.projectId,
             },
             width: '400px',
         });

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

@@ -1,4 +1,5 @@
 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 { ProjectRole } from 'src/app/proto/generated/management_pb';
@@ -11,6 +12,8 @@ import { ProjectService } from 'src/app/services/project.service';
  */
 export class ProjectRolesDataSource extends DataSource<ProjectRole.AsObject> {
     public totalResult: number = 0;
+    public viewTimestamp!: Timestamp.AsObject;
+
     public rolesSubject: BehaviorSubject<ProjectRole.AsObject[]> = new BehaviorSubject<ProjectRole.AsObject[]>([]);
     private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
     public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@@ -25,7 +28,11 @@ export class ProjectRolesDataSource extends DataSource<ProjectRole.AsObject> {
         this.loadingSubject.next(true);
         from(this.projectService.SearchProjectRoles(projectId, pageSize, offset)).pipe(
             map(resp => {
-                this.totalResult = resp.toObject().totalResult;
+                const response = resp.toObject();
+                this.totalResult = response.totalResult;
+                if (response.viewTimestamp) {
+                    this.viewTimestamp = response.viewTimestamp;
+                }
                 return resp.toObject().resultList;
             }),
             catchError(() => of([])),

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

@@ -1,5 +1,5 @@
-<app-refresh-table *ngIf="projectId" (refreshed)="refreshPage()" [dataSize]="dataSource.totalResult"
+<app-refresh-table *ngIf="projectId" (refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult"
-    [selection]="selection" [loading]="dataSource.loading$ | async">
+    [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.html

@@ -1,5 +1,7 @@
 <div class="table-header-row">
     <div class="col">
+        <span class="desc"
+            *ngIf="timestamp">{{timestamp | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
         <ng-container *ngIf="!selection.hasValue()">
             <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
             <span class="count">{{dataSize}}</span>

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

@@ -1,6 +1,7 @@
 import { animate, animation, keyframes, style, transition, trigger, useAnimation } from '@angular/animations';
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 
 const rotate = animation([
     animate(
@@ -27,6 +28,7 @@ const rotate = animation([
 })
 export class RefreshTableComponent implements OnInit {
     @Input() public selection: SelectionModel<any> = new SelectionModel<any>(true, []);
+    @Input() public timestamp!: Timestamp.AsObject;
     @Input() public dataSize: number = 0;
     @Input() public emitRefreshAfterTimeoutInMs: number = 0;
     @Input() public loading: boolean = false;

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

@@ -6,6 +6,8 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
+import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe.module';
+import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe.module';
 
 import { RefreshTableComponent } from './refresh-table.component';
 
@@ -21,6 +23,8 @@ import { RefreshTableComponent } from './refresh-table.component';
         FormsModule,
         MatTooltipModule,
         MatProgressSpinnerModule,
+        TimestampToDatePipeModule,
+        LocalizedDatePipeModule,
     ],
     exports: [
         RefreshTableComponent,

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

@@ -6,14 +6,22 @@ import { MatChipInputEvent } from '@angular/material/chips';
 import { forkJoin, from } from 'rxjs';
 import { debounceTime, switchMap, tap } from 'rxjs/operators';
 import {
+    ProjectGrantSearchResponse,
     ProjectGrantView,
     ProjectSearchKey,
     ProjectSearchQuery,
+    ProjectSearchResponse,
     ProjectView,
     SearchMethod,
 } from 'src/app/proto/generated/management_pb';
 import { ProjectService } from 'src/app/services/project.service';
 
+
+export enum ProjectAutocompleteType {
+    PROJECT_OWNED = 0,
+    PROJECT_GRANTED = 1,
+}
+
 @Component({
     selector: 'app-search-project-autocomplete',
     templateUrl: './search-project-autocomplete.component.html',
@@ -32,6 +40,7 @@ export class SearchProjectAutocompleteComponent {
     @ViewChild('nameInput') public nameInput!: ElementRef<HTMLInputElement>;
     @ViewChild('auto') public matAutocomplete!: MatAutocomplete;
     @Input() public singleOutput: boolean = false;
+    @Input() public autocompleteType!: ProjectAutocompleteType;
     @Output() public selectionChanged: EventEmitter<
         ProjectGrantView.AsObject[]
         | ProjectGrantView.AsObject
@@ -48,14 +57,39 @@ export class SearchProjectAutocompleteComponent {
                     query.setKey(ProjectSearchKey.PROJECTSEARCHKEY_PROJECT_NAME);
                     query.setValue(value);
                     query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
-                    return forkJoin([
+
-                        from(this.projectService.SearchGrantedProjects(10, 0, [query])),
+                    switch (this.autocompleteType) {
-                        from(this.projectService.SearchProjects(10, 0, [query])),
+                        case ProjectAutocompleteType.PROJECT_GRANTED:
-                    ]);
+                            return from(this.projectService.SearchGrantedProjects(10, 0, [query]));
+                        case ProjectAutocompleteType.PROJECT_OWNED:
+                            return from(this.projectService.SearchProjects(10, 0, [query]));
+                        default:
+                            return forkJoin([
+                                from(this.projectService.SearchGrantedProjects(10, 0, [query])),
+                                from(this.projectService.SearchProjects(10, 0, [query])),
+                            ]);
+                    }
                 }),
-            ).subscribe(([granted, owned]) => {
+            ).subscribe((returnValue) => {
-                this.isLoading = false;
+                switch (this.autocompleteType) {
-                this.filteredProjects = [...owned.toObject().resultList, ...granted.toObject().resultList];
+                    case ProjectAutocompleteType.PROJECT_GRANTED:
+                        this.isLoading = false;
+                        this.filteredProjects = [...(returnValue as ProjectGrantSearchResponse).toObject().resultList];
+                        break;
+                    case ProjectAutocompleteType.PROJECT_OWNED:
+                        this.isLoading = false;
+                        this.filteredProjects = [...(returnValue as ProjectSearchResponse).toObject().resultList];
+                        break;
+                    default:
+                        this.isLoading = false;
+                        this.filteredProjects = [
+                            ...(returnValue as (ProjectSearchResponse | ProjectGrantSearchResponse)[])[0]
+                                .toObject().resultList,
+                            ...(returnValue as (ProjectSearchResponse | ProjectGrantSearchResponse)[])[1]
+                                .toObject().resultList,
+                        ];
+                        break;
+                }
             });
     }
 

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

@@ -29,7 +29,7 @@ export class SearchUserAutocompleteComponent {
     public globalEmailControl: FormControl = new FormControl();
 
     public emails: string[] = [];
-    public users: Array<User.AsObject> = [];
+    @Input() public users: Array<User.AsObject> = [];
     public filteredUsers: Array<User.AsObject> = [];
     public isLoading: boolean = false;
     public target: UserTarget = UserTarget.SELF;
@@ -39,6 +39,7 @@ export class SearchUserAutocompleteComponent {
     @ViewChild('auto') public matAutocomplete!: MatAutocomplete;
     @Output() public selectionChanged: EventEmitter<User.AsObject | User.AsObject[]> = new EventEmitter();
     @Input() public singleOutput: boolean = false;
+
     private unsubscribed$: Subject<void> = new Subject();
     constructor(private userService: MgmtUserService, private toast: ToastService) {
         this.getFilteredResults();
@@ -102,6 +103,7 @@ export class SearchUserAutocompleteComponent {
 
         if (index >= 0) {
             this.users.splice(index, 1);
+            this.selectionChanged.emit(this.users);
         }
     }
 

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

@@ -1,4 +1,5 @@
 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 {
@@ -20,6 +21,8 @@ export enum UserGrantContext {
 
 export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
     public totalResult: number = 0;
+    public viewTimestamp!: Timestamp.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();
@@ -104,8 +107,12 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
     private loadResponse(promise: Promise<UserGrantSearchResponse>): void {
         from(promise).pipe(
             map(resp => {
-                this.totalResult = resp.toObject().totalResult;
+                const response = resp.toObject();
-                return resp.toObject().resultList;
+                this.totalResult = response.totalResult;
+                if (response.viewTimestamp) {
+                    this.viewTimestamp = response.viewTimestamp;
+                }
+                return response.resultList;
             }),
             catchError(() => of([])),
             finalize(() => this.loadingSubject.next(false)),

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

@@ -1,5 +1,5 @@
 <app-refresh-table [loading]="dataSource?.loading$ | async" (refreshed)="changePage()"
-    [dataSize]="dataSource.totalResult" [selection]="selection">
+    [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>

console/src/app/pages/iam/failed-events/failed-events.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { BehaviorSubject, from, Observable, of } from 'rxjs';
@@ -12,7 +12,9 @@ import { ToastService } from 'src/app/services/toast.service';
     templateUrl: './failed-events.component.html',
     styleUrls: ['./failed-events.component.scss'],
 })
-export class FailedEventsComponent {
+export class FailedEventsComponent implements AfterViewInit {
+    // public viewTimestamp!: Timestamp.AsObject;
+
     @ViewChild(MatPaginator) public eventPaginator!: MatPaginator;
     public eventDataSource!: MatTableDataSource<FailedEvent.AsObject>;
 
@@ -24,11 +26,19 @@ export class FailedEventsComponent {
         this.loadEvents();
     }
 
+    ngAfterViewInit(): void {
+        this.loadEvents();
+    }
+
     public loadEvents(): void {
         this.loadingSubject.next(true);
         from(this.adminService.GetFailedEvents()).pipe(
             map(resp => {
-                return resp.toObject().failedEventsList;
+                const response = resp.toObject();
+                // if (response.viewTimestamp) {
+                //     this.viewTimestamp = response.viewTimestamp;
+                // }
+                return response.failedEventsList;
             }),
             catchError(() => of([])),
             finalize(() => this.loadingSubject.next(false)),

console/src/app/pages/iam/iam-members/iam-members-datasource.ts

@@ -1,4 +1,5 @@
 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 { IamMemberView } from 'src/app/proto/generated/admin_pb';
@@ -11,6 +12,7 @@ import { AdminService } from 'src/app/services/admin.service';
  */
 export class IamMembersDataSource extends DataSource<IamMemberView.AsObject> {
     public totalResult: number = 0;
+    public viewTimestamp!: Timestamp.AsObject;
     public membersSubject: BehaviorSubject<IamMemberView.AsObject[]> = new BehaviorSubject<IamMemberView.AsObject[]>([]);
     private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
     public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@@ -27,8 +29,12 @@ export class IamMembersDataSource extends DataSource<IamMemberView.AsObject> {
 
         from(this.adminService.SearchIamMembers(pageSize, offset)).pipe(
             map(resp => {
-                this.totalResult = resp.toObject().totalResult;
+                const response = resp.toObject();
-                return resp.toObject().resultList;
+                this.totalResult = response.totalResult;
+                if (response.viewTimestamp) {
+                    this.viewTimestamp = response.viewTimestamp;
+                }
+                return response.resultList;
             }),
             catchError(() => of([])),
             finalize(() => this.loadingSubject.next(false)),

console/src/app/pages/iam/iam-members/iam-members.component.html

@@ -1,99 +1,88 @@
 <app-detail-layout [backRouterLink]="[ '/iam']" title="{{ 'IAM.MEMBER.TITLE' | translate }}"
     description="{{ 'IAM.MEMBER.DESCRIPTION' | translate }}">
-    <div class="table-header-row">
+
-        <div class="col">
+    <app-refresh-table (refreshed)="refreshPage()" [dataSize]="dataSource.totalResult"
-            <ng-container *ngIf="!selection.hasValue()">
+        [timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource.loading$ | async">
-                <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
+
-                <span class="count">{{dataSource?.membersSubject.value.length}}</span>
+        <ng-template appHasRole actions [appHasRole]="['iam.member.delete']">
-            </ng-container>
-            <ng-container *ngIf="selection.hasValue()">
-                <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
-                <span class="count">{{selection?.selected?.length}}</span>
-            </ng-container>
-        </div>
-        <span class="fill-space"></span>
-        <ng-template appHasRole [appHasRole]="['iam.member.delete']">
             <button color="warn" (click)="removeProjectMemberSelection()"
                 matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
                 *ngIf="selection.hasValue()">
                 <i class="las la-trash"></i>
             </button>
         </ng-template>
-        <ng-template appHasRole [appHasRole]="['iam.member.write']">
+        <ng-template appHasRole actions [appHasRole]="['iam.member.write']">
             <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
                 mat-raised-button>
                 <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
             </a>
         </ng-template>
-    </div>
 
-    <div class="table-wrapper">
+        <div class="table-wrapper">
-        <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
+            <table mat-table class="background-style table" aria-label="Elements" [dataSource]="dataSource">
-            <mat-spinner diameter="50"></mat-spinner>
+                <ng-container matColumnDef="select">
+                    <th class="selection" mat-header-cell *matHeaderCellDef>
+                        <mat-checkbox 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 color="primary" (click)="$event.stopPropagation()"
+                            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+                        </mat-checkbox>
+                    </td>
+                </ng-container>
+
+                <ng-container matColumnDef="firstname">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
+                    <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
+                        {{member.firstName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="lastname">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
+                    <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
+                        {{member.lastName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="username">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
+                    <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
+                        {{member.userName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="email">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
+                    <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
+                        {{member.email}}
+                    </td>
+                </ng-container>
+
+                <ng-container matColumnDef="roles">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'ROLESLABEL' | translate }} </th>
+                    <td class="pointer" mat-cell *matCellDef="let member">
+                        <mat-form-field class="form-field" appearance="outline">
+                            <mat-label>{{ 'ROLESLABEL' | translate }}</mat-label>
+                            <mat-select [(ngModel)]="member.rolesList" multiple
+                                [disabled]="(['org.member.write'] | hasRole | async) == false"
+                                (selectionChange)="updateRoles(member, $event)">
+                                <mat-option *ngFor="let role of memberRoleOptions" [value]="role">
+                                    {{ role }}
+                                </mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+                </tr>
+            </table>
+
+            <mat-paginator class="background-style paginator" #paginator [pageSize]="50"
+                [pageSizeOptions]="[25, 50, 100, 250]">
+            </mat-paginator>
         </div>
-        <table mat-table class="background-style table" aria-label="Elements" [dataSource]="dataSource">
+    </app-refresh-table>
-            <ng-container matColumnDef="select">
-                <th class="selection" mat-header-cell *matHeaderCellDef>
-                    <mat-checkbox 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 color="primary" (click)="$event.stopPropagation()"
-                        (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
-                    </mat-checkbox>
-                </td>
-            </ng-container>
-
-            <ng-container matColumnDef="firstname">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
-                <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                    {{member.firstName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="lastname">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
-                <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                    {{member.lastName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="username">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
-                <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                    {{member.userName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="email">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
-                <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                    {{member.email}}
-                </td>
-            </ng-container>
-
-            <ng-container matColumnDef="roles">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
-                <td class="pointer" mat-cell *matCellDef="let member">
-                    <mat-form-field class="form-field" appearance="outline">
-                        <mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
-                        <mat-select [(ngModel)]="member.rolesList" multiple
-                            [disabled]="(['org.member.write'] | hasRole | async) == false"
-                            (selectionChange)="updateRoles(member, $event)">
-                            <mat-option *ngFor="let role of memberRoleOptions" [value]="role">
-                                {{ 'ROLES.'+role | translate }}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                </td>
-            </ng-container>
-
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
-            </tr>
-        </table>
-
-        <mat-paginator class="background-style paginator" #paginator [pageSize]="50"
-            [pageSizeOptions]="[25, 50, 100, 250]">
-        </mat-paginator>
-    </div>
 </app-detail-layout>

console/src/app/pages/iam/iam-members/iam-members.component.scss

@@ -1,46 +1,11 @@
-
+.add-button {
-.table-header-row {
+  border-radius: .5rem;
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  .col {
-    display: flex;
-    flex-direction: column;
-
-    .desc {
-      font-size: .8rem;
-      color: #8795a1;
-    }
-
-    .count {
-      font-size: 2rem;
-    }
-  }
-
-  .fill-space {
-    flex: 1;
-  }
-
-  .icon-button {
-    margin-right: .5rem;
-  }
-
-  .add-button {
-    border-radius: .5rem;
-  }
 }
 
 .table-wrapper {
   overflow: auto;
   width: 100%;
 
-  .spinner-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   .table,
   .paginator {
     width: 100%;

console/src/app/pages/iam/iam-members/iam-members.component.ts

@@ -105,7 +105,7 @@ export class IamMembersComponent implements AfterViewInit {
     public openAddMember(): void {
         const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
             data: {
-                creationType: CreationType.ORG,
+                creationType: CreationType.IAM,
             },
             width: '400px',
         });
@@ -127,4 +127,9 @@ export class IamMembersComponent implements AfterViewInit {
             }
         });
     }
+
+    public refreshPage(): void {
+        this.selection.clear();
+        this.dataSource.loadMembers(this.paginator.pageIndex, this.paginator.pageSize);
+    }
 }

console/src/app/pages/iam/iam-members/iam-members.module.ts

@@ -16,6 +16,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
+import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
 
 import { IamMembersRoutingModule } from './iam-members-routing.module';
@@ -45,6 +46,7 @@ import { IamMembersComponent } from './iam-members.component';
         MatFormFieldModule,
         MatSelectModule,
         HasRolePipeModule,
+        RefreshTableModule,
     ],
 })
 export class IamMembersModule { }

console/src/app/pages/iam/iam-views/iam-views.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { BehaviorSubject, from, Observable, of } from 'rxjs';
@@ -11,7 +11,7 @@ import { AdminService } from 'src/app/services/admin.service';
     templateUrl: './iam-views.component.html',
     styleUrls: ['./iam-views.component.scss'],
 })
-export class IamViewsComponent {
+export class IamViewsComponent implements AfterViewInit {
     @ViewChild(MatPaginator) public paginator!: MatPaginator;
     public dataSource!: MatTableDataSource<View.AsObject>;
 
@@ -23,6 +23,10 @@ export class IamViewsComponent {
         this.loadViews();
     }
 
+    ngAfterViewInit(): void {
+        this.loadViews();
+    }
+
     public loadViews(): void {
         this.loadingSubject.next(true);
         from(this.adminService.GetViews()).pipe(

console/src/app/pages/orgs/org-member-roles-autocomplete/org-member-roles-autocomplete.component.html

@@ -7,7 +7,7 @@
                 <mat-spinner diameter="30"></mat-spinner>
             </mat-option>
             <mat-option *ngFor="let role of allRoles" [value]="role">
-                {{'ROLES.'+role | translate}}
+                {{ role }}
             </mat-option>
         </mat-select>
     </mat-form-field>

console/src/app/pages/orgs/org-members/org-members-datasource.ts

@@ -1,4 +1,5 @@
 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 { OrgMemberView } from 'src/app/proto/generated/management_pb';
@@ -6,6 +7,7 @@ import { OrgService } from 'src/app/services/org.service';
 
 export class OrgMembersDataSource extends DataSource<OrgMemberView.AsObject> {
     public totalResult: number = 0;
+    public viewTimestamp!: Timestamp.AsObject;
     public membersSubject: BehaviorSubject<OrgMemberView.AsObject[]> = new BehaviorSubject<OrgMemberView.AsObject[]>([]);
     private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
     public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@@ -20,8 +22,12 @@ export class OrgMembersDataSource extends DataSource<OrgMemberView.AsObject> {
         this.loadingSubject.next(true);
         from(this.orgService.SearchMyOrgMembers(pageSize, offset)).pipe(
             map(resp => {
-                this.totalResult = resp.toObject().totalResult;
+                const response = resp.toObject();
-                return resp.toObject().resultList;
+                this.totalResult = response.totalResult;
+                if (response.viewTimestamp) {
+                    this.viewTimestamp = response.viewTimestamp;
+                }
+                return response.resultList;
             }),
             catchError(() => of([])),
             finalize(() => this.loadingSubject.next(false)),

console/src/app/pages/orgs/org-members/org-members.component.html

@@ -1,99 +1,85 @@
 <app-detail-layout [backRouterLink]="[ '/org']" title="{{org?.name}} {{ 'ORG.MEMBER.TITLE' | translate }}"
     description="{{ 'ORG.MEMBER.DESCRIPTION' | translate }}">
-
+    <app-refresh-table (refreshed)="refreshPage()" [dataSize]="dataSource.totalResult"
-    <div class="table-header-row" *ngIf="org">
+        [timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource.loading$ | async">
-        <div class="col">
+        <ng-template appHasRole actions [appHasRole]="['org.member.delete:'+org.id,'org.member.delete']">
-            <ng-container *ngIf="!selection.hasValue()">
-                <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
-                <span class="count">{{dataSource?.membersSubject.value.length}}</span>
-            </ng-container>
-            <ng-container *ngIf="selection.hasValue()">
-                <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
-                <span class="count">{{selection?.selected?.length}}</span>
-            </ng-container>
-        </div>
-        <span class="fill-space"></span>
-        <ng-template appHasRole [appHasRole]="['org.member.delete:'+org.id,'org.member.delete']">
             <button (click)="removeProjectMemberSelection()" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}"
                 class="icon-button" mat-icon-button *ngIf="selection.hasValue()" color="warn">
                 <i class="las la-trash"></i>
             </button>
         </ng-template>
-        <ng-template appHasRole [appHasRole]="['org.member.write:'+org.id,'org.member.write']">
+        <ng-template appHasRole actions [appHasRole]="['org.member.write:'+org.id,'org.member.write']">
             <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
                 mat-raised-button>
                 <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
             </a>
         </ng-template>
-    </div>
 
-    <div class="table-wrapper">
+        <div class="table-wrapper">
-        <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
+            <table mat-table class="background-style table" aria-label="Elements" [dataSource]="dataSource">
-            <mat-spinner diameter="50"></mat-spinner>
+                <ng-container matColumnDef="select">
+                    <th class="selection" mat-header-cell *matHeaderCellDef>
+                        <mat-checkbox 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 color="primary" (click)="$event.stopPropagation()"
+                            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+                        </mat-checkbox>
+                    </td>
+                </ng-container>
+
+                <ng-container matColumnDef="firstname">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
+                    <td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
+                        {{member.firstName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="lastname">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
+                    <td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
+                        {{member.lastName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="username">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
+                    <td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
+                        {{member.userName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="email">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
+                    <td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
+                        {{member.email}}
+                    </td>
+                </ng-container>
+
+                <ng-container matColumnDef="roles">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'ROLESLABEL' | translate }} </th>
+                    <td class="pointer" mat-cell *matCellDef="let member">
+                        <mat-form-field class="form-field" appearance="outline">
+                            <mat-label>{{ 'ROLESLABEL' | translate }}</mat-label>
+                            <mat-select [(ngModel)]="member.rolesList" multiple
+                                [disabled]="(['org.member.write'] | hasRole | async) == false"
+                                (selectionChange)="updateRoles(member, $event)">
+                                <mat-option *ngFor="let role of memberRoleOptions" [value]="role">
+                                    {{ role  }}
+                                </mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+                </tr>
+            </table>
+
+            <mat-paginator class="paginator background-style" #paginator [pageSize]="50"
+                [pageSizeOptions]="[25, 50, 100, 250]">
+            </mat-paginator>
         </div>
-        <table mat-table class="background-style table" aria-label="Elements" [dataSource]="dataSource">
+    </app-refresh-table>
-            <ng-container matColumnDef="select">
-                <th class="selection" mat-header-cell *matHeaderCellDef>
-                    <mat-checkbox 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 color="primary" (click)="$event.stopPropagation()"
-                        (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
-                    </mat-checkbox>
-                </td>
-            </ng-container>
-
-            <ng-container matColumnDef="firstname">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
-                <td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
-                    {{member.firstName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="lastname">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
-                <td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
-                    {{member.lastName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="username">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
-                <td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
-                    {{member.userName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="email">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
-                <td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
-                    {{member.email}}
-                </td>
-            </ng-container>
-
-            <ng-container matColumnDef="roles">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
-                <td class="pointer" mat-cell *matCellDef="let member">
-                    <mat-form-field class="form-field" appearance="outline">
-                        <mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
-                        <mat-select [(ngModel)]="member.rolesList" multiple
-                            [disabled]="(['org.member.write'] | hasRole | async) == false"
-                            (selectionChange)="updateRoles(member, $event)">
-                            <mat-option *ngFor="let role of memberRoleOptions" [value]="role">
-                                {{ 'ROLES.'+role | translate }}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                </td>
-            </ng-container>
-
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
-            </tr>
-        </table>
-
-        <mat-paginator class="paginator background-style" #paginator [pageSize]="50"
-            [pageSizeOptions]="[25, 50, 100, 250]">
-        </mat-paginator>
-    </div>
 </app-detail-layout>

console/src/app/pages/orgs/org-members/org-members.component.scss

@@ -1,46 +1,7 @@
-
-.table-header-row {
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  .col {
-    display: flex;
-    flex-direction: column;
-
-    .desc {
-      font-size: .8rem;
-      color: #8795a1;
-    }
-
-    .count {
-      font-size: 2rem;
-    }
-  }
-
-  .fill-space {
-    flex: 1;
-  }
-
-  .icon-button {
-    margin-right: .5rem;
-  }
-
-  .add-button {
-    border-radius: .5rem;
-  }
-}
-
 .table-wrapper {
   width: 100%;
   overflow: auto;
 
-  .spinner-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   .table,
   .paginator {
     width: 100%;

console/src/app/pages/orgs/org-members/org-members.component.ts

@@ -3,10 +3,9 @@ import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSelectChange } from '@angular/material/select';
-import { MatTable } from '@angular/material/table';
 import { tap } from 'rxjs/operators';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
-import { Org, OrgMember, OrgMemberView, ProjectMember, ProjectType, User } from 'src/app/proto/generated/management_pb';
+import { Org, OrgMemberView, ProjectType, User } from 'src/app/proto/generated/management_pb';
 import { OrgService } from 'src/app/services/org.service';
 import { ToastService } from 'src/app/services/toast.service';
 
@@ -22,7 +21,6 @@ export class OrgMembersComponent implements AfterViewInit {
     public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
     public disabled: boolean = false;
     @ViewChild(MatPaginator) public paginator!: MatPaginator;
-    @ViewChild(MatTable) public table!: MatTable<OrgMemberView.AsObject>;
     public dataSource!: OrgMembersDataSource;
     public selection: SelectionModel<OrgMemberView.AsObject> = new SelectionModel<OrgMemberView.AsObject>(true, []);
 
@@ -63,7 +61,7 @@ export class OrgMembersComponent implements AfterViewInit {
 
     updateRoles(member: OrgMemberView.AsObject, selectionChange: MatSelectChange): void {
         this.orgService.ChangeMyOrgMember(member.userId, selectionChange.value)
-            .then((newmember: OrgMember) => {
+            .then(() => {
                 this.toast.showInfo('ORG.TOAST.MEMBERCHANGED', true);
             }).catch(error => {
                 this.toast.showError(error);
@@ -87,14 +85,6 @@ export class OrgMembersComponent implements AfterViewInit {
         }));
     }
 
-    public removeMember(member: ProjectMember.AsObject): void {
-        this.orgService.RemoveMyOrgMember(member.userId).then(() => {
-            this.toast.showInfo('ORG.TOAST.MEMBERREMOVED', true);
-        }).catch(error => {
-            this.toast.showError(error);
-        });
-    }
-
     public isAllSelected(): boolean {
         const numSelected = this.selection.selected.length;
         const numRows = this.dataSource.membersSubject.value.length;
@@ -132,4 +122,9 @@ export class OrgMembersComponent implements AfterViewInit {
             }
         });
     }
+
+    public refreshPage(): void {
+        this.selection.clear();
+        this.dataSource.loadMembers(this.paginator.pageIndex, this.paginator.pageSize);
+    }
 }

console/src/app/pages/orgs/org-members/org-members.module.ts

@@ -16,6 +16,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
+import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
 
 import { OrgMembersRoutingModule } from './org-members-routing.module';
@@ -45,6 +46,7 @@ import { OrgMembersComponent } from './org-members.component';
         MatFormFieldModule,
         MatSelectModule,
         HasRolePipeModule,
+        RefreshTableModule,
     ],
 })
 export class OrgMembersModule { }

console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.ts

@@ -132,7 +132,6 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
         const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
             data: {
                 creationType: CreationType.PROJECT_GRANTED,
-                projectId: this.project.projectId,
             },
             width: '400px',
         });

console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.html

@@ -9,88 +9,66 @@
 </div>
 
 <div *ngIf="!grid && grantedProjectList">
-    <div class="table-header-row">
+    <app-refresh-table (refreshed)="refreshPage()" [dataSize]="totalResult" [timestamp]="viewTimestamp"
-        <div class="col">
+        [selection]="selection" [loading]="loading$ | async">
-            <ng-container *ngIf="!selection.hasValue()">
+
-                <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
+        <div class="table-wrapper">
-                <span class="count">{{dataSource?.data?.length}}</span>
+            <table class="table background-style" mat-table [dataSource]="dataSource">
-            </ng-container>
+                <ng-container matColumnDef="select">
-            <ng-container *ngIf="selection.hasValue()">
+                    <th class="selection" mat-header-cell *matHeaderCellDef>
-                <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
+                        <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
-                <span class="count">{{selection?.selected?.length}}</span>
+                            [checked]="selection.hasValue() && isAllSelected()"
-            </ng-container>
+                            [indeterminate]="selection.hasValue() && !isAllSelected()">
+                        </mat-checkbox>
+                    </th>
+                    <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)">
+                        </mat-checkbox>
+                    </td>
+                </ng-container>
+
+                <ng-container matColumnDef="name">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
+                    <td mat-cell *matCellDef="let project"> {{project.projectName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="resourceOwnerName">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.RESOURCEOWNER' | translate }} </th>
+                    <td class="pointer" mat-cell *matCellDef="let project">
+                        {{project.resourceOwnerName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="state">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
+                    <td mat-cell *matCellDef="let project"><span
+                            *ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span></td>
+                </ng-container>
+
+                <ng-container matColumnDef="creationDate">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
+                    <td mat-cell *matCellDef="let project">
+                        <span
+                            *ngIf="project.creationDate">{{project.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
+                    </td>
+                </ng-container>
+
+
+                <ng-container matColumnDef="changeDate">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
+                    <td mat-cell *matCellDef="let project">
+                        <span
+                            *ngIf="project.changeDate">{{project.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
+                    </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
+                    [routerLink]="['/granted-projects', row.projectId, 'grant', row.id]"></tr>
+
+            </table>
+            <mat-paginator class="paginator background-style" #paginator [length]="totalResult" [pageSize]="10"
+                [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
         </div>
-        <span class="fill-space"></span>
+    </app-refresh-table>
-        <div @list class="action-btns" *ngIf="selection.hasValue()">
-            <button @animate (click)="deactivateSelectedProjects()"
-                matTooltip="{{'PROJECT.TABLE.DEACTIVATE' | translate}}" class="icon-button" mat-icon-button>
-                <mat-icon svgIcon="mdi_light_off"></mat-icon>
-            </button>
-            <button @animate (click)="reactivateSelectedProjects()"
-                matTooltip="{{'PROJECT.TABLE.ACTIVATE' | translate}}" class="icon-button" mat-icon-button>
-                <mat-icon svgIcon="mdi_light_on"></mat-icon>
-            </button>
-        </div>
-    </div>
-    <div class="table-wrapper">
-        <div class="spinner-container" *ngIf="(loading$ | async) || (loading$ | async)">
-            <mat-spinner diameter="50"></mat-spinner>
-        </div>
-        <table class="table background-style" mat-table [dataSource]="dataSource">
-            <ng-container matColumnDef="select">
-                <th class="selection" mat-header-cell *matHeaderCellDef>
-                    <mat-checkbox 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 color="primary" (click)="$event.stopPropagation()"
-                        (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
-                    </mat-checkbox>
-                </td>
-            </ng-container>
-
-            <ng-container matColumnDef="name">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
-                <td mat-cell *matCellDef="let project"> {{project.projectName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="resourceOwnerName">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.RESOURCEOWNER' | translate }} </th>
-                <td class="pointer" mat-cell *matCellDef="let project">
-                    {{project.resourceOwnerName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="state">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
-                <td mat-cell *matCellDef="let project"><span
-                        *ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span></td>
-            </ng-container>
-
-            <ng-container matColumnDef="creationDate">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
-                <td mat-cell *matCellDef="let project">
-                    <span
-                        *ngIf="project.creationDate">{{project.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
-                </td>
-            </ng-container>
-
-
-            <ng-container matColumnDef="changeDate">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
-                <td mat-cell *matCellDef="let project">
-                    <span
-                        *ngIf="project.changeDate">{{project.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
-                </td>
-            </ng-container>
-
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
-                [routerLink]="['/granted-projects', row.projectId, 'grant', row.id]"></tr>
-
-        </table>
-        <mat-paginator class="paginator background-style" [length]="totalResult" [pageSize]="10"
-            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
-    </div>
 </div>

console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.scss

@@ -10,47 +10,9 @@
   }
 }
 
-.table-header-row {
-  display: flex;
-  align-items: center;
-
-  .col {
-    display: flex;
-    flex-direction: column;
-
-    .desc {
-      font-size: .8rem;
-      color: #8795a1;
-    }
-
-    .count {
-      font-size: 2rem;
-    }
-  }
-
-  .fill-space {
-    flex: 1;
-  }
-
-  .action-btns {
-    display: flex;
-    align-items: center;
-  }
-
-  .icon-button {
-    margin-right: .5rem;
-  }
-}
-
 .table-wrapper {
   overflow: auto;
 
-  .spinner-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   .table,
   .paginator {
     width: 100%;

console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.ts

@@ -1,10 +1,11 @@
 import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
 import { SelectionModel } from '@angular/cdk/collections';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { PageEvent } from '@angular/material/paginator';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
+import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { ProjectGrantView } from 'src/app/proto/generated/management_pb';
 import { ProjectService } from 'src/app/services/project.service';
@@ -36,8 +37,11 @@ import { ToastService } from 'src/app/services/toast.service';
 })
 export class GrantedProjectListComponent implements OnInit, OnDestroy {
     public totalResult: number = 0;
+    public viewTimestamp!: Timestamp.AsObject;
+
     public dataSource: MatTableDataSource<ProjectGrantView.AsObject> =
         new MatTableDataSource<ProjectGrantView.AsObject>();
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
 
     public grantedProjectList: ProjectGrantView.AsObject[] = [];
     public displayedColumns: string[] = ['select', 'name', 'resourceOwnerName', 'state', 'creationDate', 'changeDate'];
@@ -86,8 +90,12 @@ export class GrantedProjectListComponent implements OnInit, OnDestroy {
     private async getData(limit: number, offset: number): Promise<void> {
         this.loadingSubject.next(true);
         this.projectService.SearchGrantedProjects(limit, offset).then(res => {
-            this.grantedProjectList = res.toObject().resultList;
+            const response = res.toObject();
-            this.totalResult = res.toObject().totalResult;
+            this.grantedProjectList = response.resultList;
+            this.totalResult = response.totalResult;
+            if (response.viewTimestamp) {
+                this.viewTimestamp = response.viewTimestamp;
+            }
             if (this.totalResult > 5) {
                 this.grid = false;
             }
@@ -100,28 +108,8 @@ export class GrantedProjectListComponent implements OnInit, OnDestroy {
         });
     }
 
-    public reactivateSelectedProjects(): void {
+    public refreshPage(): void {
-        const promises = this.selection.selected.map(project => {
+        this.selection.clear();
-            this.projectService.ReactivateProject(project.id);
+        this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
-        });
-
-        Promise.all(promises).then(() => {
-            this.toast.showInfo('PROJECT.TOAST.REACTIVATED', true);
-        }).catch(error => {
-            this.toast.showError(error);
-        });
-    }
-
-
-    public deactivateSelectedProjects(): void {
-        const promises = this.selection.selected.map(project => {
-            this.projectService.DeactivateProject(project.id);
-        });
-
-        Promise.all(promises).then(() => {
-            this.toast.showInfo('PROJECT.TOAST.DEACTIVATED', true);
-        }).catch(error => {
-            this.toast.showError(error);
-        });
     }
 }

console/src/app/pages/projects/granted-projects/granted-projects.module.ts

@@ -22,6 +22,7 @@ import { ChangesModule } from 'src/app/modules/changes/changes.module';
 import { ContributorsModule } from 'src/app/modules/contributors/contributors.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
 import { ProjectRolesModule } from 'src/app/modules/project-roles/project-roles.module';
+import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
 import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
@@ -73,6 +74,7 @@ import { GrantedProjectsComponent } from './granted-projects.component';
         SharedModule,
         LocalizedDatePipeModule,
         MemberCreateDialogModule,
+        RefreshTableModule,
     ],
 })
 export class GrantedProjectsModule { }

console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications-datasource.ts

@@ -1,4 +1,5 @@
 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 { Application } from 'src/app/proto/generated/management_pb';
@@ -11,6 +12,8 @@ import { ProjectService } from 'src/app/services/project.service';
  */
 export class ProjectApplicationsDataSource extends DataSource<Application.AsObject> {
     public totalResult: number = 0;
+    public viewTimestamp!: Timestamp.AsObject;
+
     public appsSubject: BehaviorSubject<Application.AsObject[]> = new BehaviorSubject<Application.AsObject[]>([]);
     private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
     public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@@ -25,8 +28,12 @@ export class ProjectApplicationsDataSource extends DataSource<Application.AsObje
         this.loadingSubject.next(true);
         from(this.projectService.SearchApplications(projectId, pageSize, offset)).pipe(
             map(resp => {
-                this.totalResult = resp.toObject().totalResult;
+                const response = resp.toObject();
-                return resp.toObject().resultList;
+                this.totalResult = response.totalResult;
+                if (response.viewTimestamp) {
+                    this.viewTimestamp = response.viewTimestamp;
+                }
+                return response.resultList;
             }),
             catchError(() => of([])),
             finalize(() => this.loadingSubject.next(false)),

console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.html

@@ -1,5 +1,5 @@
 <app-refresh-table [loading]="dataSource.loading$ | async" [selection]="selection" (refreshed)="refreshPage()"
-    [dataSize]="dataSource.totalResult">
+    [dataSize]="dataSource.totalResult" [timestamp]="dataSource?.viewTimestamp">
     <ng-template appHasRole [appHasRole]="['project.app.write']" actions>
         <a [disabled]="disabled" class="add-button" [routerLink]="[ '/projects', projectId, 'apps', 'create']"
             color="primary" mat-raised-button>

console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants-datasource.ts

@@ -1,4 +1,5 @@
 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 { ProjectGrant } from 'src/app/proto/generated/management_pb';
@@ -11,6 +12,7 @@ import { ProjectService } from 'src/app/services/project.service';
  */
 export class ProjectGrantsDataSource extends DataSource<ProjectGrant.AsObject> {
     public totalResult: number = 0;
+    public viewTimestamp!: Timestamp.AsObject;
     public grantsSubject: BehaviorSubject<ProjectGrant.AsObject[]> = new BehaviorSubject<ProjectGrant.AsObject[]>([]);
     private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
     public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@@ -25,8 +27,12 @@ export class ProjectGrantsDataSource extends DataSource<ProjectGrant.AsObject> {
         this.loadingSubject.next(true);
         from(this.projectService.SearchProjectGrants(projectId, pageSize, offset)).pipe(
             map(resp => {
-                this.totalResult = resp.toObject().totalResult;
+                const response = resp.toObject();
-                return resp.toObject().resultList;
+                this.totalResult = response.totalResult;
+                if (response.viewTimestamp) {
+                    this.viewTimestamp = response.viewTimestamp;
+                }
+                return response.resultList;
             }),
             catchError(() => of([])),
             finalize(() => this.loadingSubject.next(false)),

console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html

@@ -1,5 +1,5 @@
 <app-refresh-table [loading]="dataSource?.loading$ | async" *ngIf="projectId" (refreshed)="loadGrantsPage()"
-    [dataSize]="dataSource.totalResult" [selection]="selection">
+    [dataSize]="dataSource.totalResult" [selection]="selection" [timestamp]="dataSource?.viewTimestamp">
     <ng-template appHasRole [appHasRole]="['project.grant.member.delete:'+projectId, 'project.grant.member.delete']"
         actions>
         <button (click)="deleteSelectedGrants()" [disabled]="disabled" mat-icon-button *ngIf="selection.hasValue()"

console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.html

@@ -8,78 +8,66 @@
     </button>
 </div>
 <div *ngIf="!grid && ownedProjectList">
-    <div class="table-header-row">
+    <app-refresh-table (refreshed)="refreshPage()" [dataSize]="totalResult" [timestamp]="viewTimestamp"
-        <div class="col">
+        [selection]="selection" [loading]="loading$ | async">
-            <ng-container *ngIf="!selection.hasValue()">
+
-                <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
+        <ng-template actions appHasRole [appHasRole]="['project.write']">
-                <span class="count">{{dataSource?.data?.length}}</span>
-            </ng-container>
-            <ng-container *ngIf="selection.hasValue()">
-                <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
-                <span class="count">{{selection?.selected?.length}}</span>
-            </ng-container>
-        </div>
-        <span class="fill-space"></span>
-        <ng-template appHasRole [appHasRole]="['project.write']">
             <a class="add-button" [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
                 <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
             </a>
         </ng-template>
-    </div>
+        <div class="table-wrapper">
-    <div class="table-wrapper">
+            <table class="table background-style" mat-table [dataSource]="dataSource">
-        <div class="spinner-container" *ngIf="(loading$ | async) || (loading$ | async)">
+                <ng-container matColumnDef="select">
-            <mat-spinner diameter="50"></mat-spinner>
+                    <th class="selection" mat-header-cell *matHeaderCellDef>
+                        <mat-checkbox 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 color="primary" (click)="$event.stopPropagation()"
+                            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+                        </mat-checkbox>
+                    </td>
+                </ng-container>
+
+                <ng-container matColumnDef="name">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
+                    <td mat-cell *matCellDef="let project"> {{project.name}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="state">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
+                    <td mat-cell *matCellDef="let project"><span
+                            *ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span></td>
+                </ng-container>
+
+
+                <ng-container matColumnDef="creationDate">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
+                    <td mat-cell *matCellDef="let project">
+                        <span
+                            *ngIf="project.creationDate">{{project.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
+                    </td>
+                </ng-container>
+
+
+                <ng-container matColumnDef="changeDate">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
+                    <td mat-cell *matCellDef="let project">
+                        <span
+                            *ngIf="project.changeDate">{{project.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
+                    </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
+                    [routerLink]="['/projects', row.projectId]"></tr>
+
+            </table>
+            <mat-paginator class="paginator background-style" [length]="totalResult" [pageSize]="10"
+                [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
         </div>
-        <table class="table background-style" mat-table [dataSource]="dataSource">
+    </app-refresh-table>
-            <ng-container matColumnDef="select">
-                <th class="selection" mat-header-cell *matHeaderCellDef>
-                    <mat-checkbox 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 color="primary" (click)="$event.stopPropagation()"
-                        (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
-                    </mat-checkbox>
-                </td>
-            </ng-container>
-
-            <ng-container matColumnDef="name">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
-                <td mat-cell *matCellDef="let project"> {{project.name}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="state">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
-                <td mat-cell *matCellDef="let project"><span
-                        *ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span></td>
-            </ng-container>
-
-
-            <ng-container matColumnDef="creationDate">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
-                <td mat-cell *matCellDef="let project">
-                    <span
-                        *ngIf="project.creationDate">{{project.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
-                </td>
-            </ng-container>
-
-
-            <ng-container matColumnDef="changeDate">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
-                <td mat-cell *matCellDef="let project">
-                    <span
-                        *ngIf="project.changeDate">{{project.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
-                </td>
-            </ng-container>
-
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
-                [routerLink]="['/projects', row.projectId]"></tr>
-
-        </table>
-        <mat-paginator class="paginator background-style" [length]="totalResult" [pageSize]="10"
-            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
-    </div>
 </div>

console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.scss

@@ -18,51 +18,9 @@ h1 {
   }
 }
 
-.table-header-row {
-  display: flex;
-  align-items: center;
-
-  .col {
-    display: flex;
-    flex-direction: column;
-
-    .desc {
-      font-size: .8rem;
-      color: #8795a1;
-    }
-
-    .count {
-      font-size: 2rem;
-    }
-  }
-
-  .fill-space {
-    flex: 1;
-  }
-
-  .action-btns {
-    display: flex;
-    align-items: center;
-  }
-
-  .icon-button {
-    margin-right: .5rem;
-  }
-
-  .add-button {
-    border-radius: .5rem;
-  }
-}
-
 .table-wrapper {
   overflow: auto;
 
-  .spinner-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   .table,
   .paginator {
     width: 100%;

console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.ts

@@ -1,10 +1,11 @@
 import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
 import { SelectionModel } from '@angular/cdk/collections';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { PageEvent } from '@angular/material/paginator';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
+import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { ProjectView } from 'src/app/proto/generated/management_pb';
 import { ProjectService } from 'src/app/services/project.service';
@@ -36,9 +37,13 @@ import { ToastService } from 'src/app/services/toast.service';
 })
 export class OwnedProjectListComponent implements OnInit, OnDestroy {
     public totalResult: number = 0;
+    public viewTimestamp!: Timestamp.AsObject;
+
     public dataSource: MatTableDataSource<ProjectView.AsObject> =
         new MatTableDataSource<ProjectView.AsObject>();
 
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+
     public ownedProjectList: ProjectView.AsObject[] = [];
     public displayedColumns: string[] = ['select', 'name', 'state', 'creationDate', 'changeDate'];
     public selection: SelectionModel<ProjectView.AsObject> = new SelectionModel<ProjectView.AsObject>(true, []);
@@ -86,11 +91,15 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
     private async getData(limit: number, offset: number): Promise<void> {
         this.loadingSubject.next(true);
         this.projectService.SearchProjects(limit, offset).then(res => {
-            this.ownedProjectList = res.toObject().resultList;
+            const response = res.toObject();
-            this.totalResult = res.toObject().totalResult;
+            this.ownedProjectList = response.resultList;
+            this.totalResult = response.totalResult;
             if (this.totalResult > 10) {
                 this.grid = false;
             }
+            if (response.viewTimestamp) {
+                this.viewTimestamp = response.viewTimestamp;
+            }
             this.dataSource.data = this.ownedProjectList;
             this.loadingSubject.next(false);
         }).catch(error => {
@@ -126,4 +135,9 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
             this.toast.showError(error);
         });
     }
+
+    public refreshPage(): void {
+        this.selection.clear();
+        this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
+    }
 }

console/src/app/pages/projects/owned-projects/owned-projects.module.ts

@@ -17,6 +17,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
 import { CardModule } from 'src/app/modules/card/card.module';
+import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
 import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
@@ -61,6 +62,7 @@ import { OwnedProjectsComponent } from './owned-projects.component';
         TimestampToDatePipeModule,
         LocalizedDatePipeModule,
         SharedModule,
+        RefreshTableModule,
     ],
 })
 export class OwnedProjectsModule { }

console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-datasource.ts

@@ -1,4 +1,5 @@
 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 { ProjectMember } from 'src/app/proto/generated/management_pb';
@@ -11,6 +12,8 @@ import { ProjectService } from 'src/app/services/project.service';
  */
 export class ProjectGrantMembersDataSource extends DataSource<ProjectMember.AsObject> {
     public totalResult: number = 0;
+    public viewTimestamp!: Timestamp.AsObject;
+
     public membersSubject: BehaviorSubject<ProjectMember.AsObject[]> = new BehaviorSubject<ProjectMember.AsObject[]>([]);
     private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
     public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@@ -28,8 +31,12 @@ export class ProjectGrantMembersDataSource extends DataSource<ProjectMember.AsOb
         from(this.projectService.SearchProjectGrantMembers(projectId,
             grantId, pageSize, offset)).pipe(
                 map(resp => {
-                    this.totalResult = resp.toObject().totalResult;
+                    const response = resp.toObject();
-                    return resp.toObject().resultList;
+                    this.totalResult = response.totalResult;
+                    if (response.viewTimestamp) {
+                        this.viewTimestamp = response.viewTimestamp;
+                    }
+                    return response.resultList;
                 }),
                 catchError(() => of([])),
                 finalize(() => this.loadingSubject.next(false)),

console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.html

@@ -1,15 +1,5 @@
-<div class="table-header-row">
+<app-refresh-table (refreshed)="refreshPage()" [dataSize]="dataSource.totalResult"
-    <div class="col">
+    [timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource.loading$ | async">
-        <ng-container *ngIf="!selection.hasValue()">
-            <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
-            <span class="count">{{dataSource?.membersSubject.value.length}}</span>
-        </ng-container>
-        <ng-container *ngIf="selection.hasValue()">
-            <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
-            <span class="count">{{selection?.selected?.length}}</span>
-        </ng-container>
-    </div>
-    <span class="fill-space"></span>
     <button (click)="removeProjectMemberSelection()" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}"
         class="icon-button" color="warn" mat-icon-button *ngIf="selection.hasValue()">
         <i class="las la-trash"></i>
@@ -18,74 +8,74 @@
         mat-raised-button>
         <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
     </a>
-</div>
 
-<div class="table-wrapper">
+    <div class="table-wrapper">
-    <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
+        <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
-        <mat-spinner diameter="50"></mat-spinner>
+            <mat-spinner diameter="50"></mat-spinner>
+        </div>
+        <table mat-table class="table" aria-label="Elements"
+            [ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}" [dataSource]="dataSource">
+            <ng-container matColumnDef="select">
+                <th class="selection" mat-header-cell *matHeaderCellDef>
+                    <mat-checkbox 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 color="primary" (click)="$event.stopPropagation()"
+                        (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+                    </mat-checkbox>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="firstname">
+                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
+                <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
+                    {{member.firstName}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="lastname">
+                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
+                <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
+                    {{member.lastName}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="username">
+                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
+                <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
+                    {{member.userName}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="email">
+                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
+                <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
+                    {{member.email}}
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="roles">
+                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
+                <td class="pointer" mat-cell *matCellDef="let member">
+                    <mat-form-field class="form-field" appearance="outline" *ngIf="projectId">
+                        <mat-label>{{ 'PROJECT.MEMBER.ROLES' | translate }}</mat-label>
+                        <mat-select [(ngModel)]="member.rolesList" multiple [disabled]="disabled"
+                            (selectionChange)="updateRoles(member, $event)">
+                            <mat-option *ngFor="let role of memberRoleOptions" [value]="role">
+                                {{ role }}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+            </tr>
+        </table>
+
+        <mat-paginator class="paginator" [ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}"
+            #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
+        </mat-paginator>
     </div>
-    <table mat-table class="table" aria-label="Elements"
+</app-refresh-table>
-        [ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}" [dataSource]="dataSource">
-        <ng-container matColumnDef="select">
-            <th class="selection" mat-header-cell *matHeaderCellDef>
-                <mat-checkbox 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 color="primary" (click)="$event.stopPropagation()"
-                    (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
-                </mat-checkbox>
-            </td>
-        </ng-container>
-
-        <ng-container matColumnDef="firstname">
-            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
-            <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                {{member.firstName}} </td>
-        </ng-container>
-
-        <ng-container matColumnDef="lastname">
-            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
-            <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                {{member.lastName}} </td>
-        </ng-container>
-
-        <ng-container matColumnDef="username">
-            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
-            <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                {{member.userName}} </td>
-        </ng-container>
-
-        <ng-container matColumnDef="email">
-            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
-            <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                {{member.email}}
-            </td>
-        </ng-container>
-
-        <ng-container matColumnDef="roles">
-            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
-            <td class="pointer" mat-cell *matCellDef="let member">
-                <mat-form-field class="form-field" appearance="outline" *ngIf="projectId">
-                    <mat-label>{{ 'PROJECT.MEMBER.ROLES' | translate }}</mat-label>
-                    <mat-select [(ngModel)]="member.rolesList" multiple [disabled]="disabled"
-                        (selectionChange)="updateRoles(member, $event)">
-                        <mat-option *ngFor="let role of memberRoleOptions" [value]="role">
-                            {{ 'ROLES.'+role | translate }}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-            </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
-        </tr>
-    </table>
-
-    <mat-paginator class="paginator" [ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}" #paginator
-        [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
-    </mat-paginator>
-</div>

console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.scss

@@ -1,44 +1,7 @@
 
-.table-header-row {
-  display: flex;
-  align-items: center;
-
-  .col {
-    display: flex;
-    flex-direction: column;
-
-    .desc {
-      font-size: .8rem;
-      color: #8795a1;
-    }
-
-    .count {
-      font-size: 2rem;
-    }
-  }
-
-  .fill-space {
-    flex: 1;
-  }
-
-  .icon-button {
-    margin-right: .5rem;
-  }
-
-  .add-button {
-    border-radius: .5rem;
-  }
-}
-
 .table-wrapper {
   overflow: auto;
 
-  .spinner-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   .table,
   .paginator {
     td,

console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.ts

@@ -94,14 +94,6 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
         }));
     }
 
-    public removeMember(member: ProjectMember.AsObject): void {
-        this.projectService.RemoveProjectGrantMember(this.projectId, this.grantId, member.userId).then(() => {
-            this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERREMOVED', true);
-        }).catch(error => {
-            this.toast.showError(error);
-        });
-    }
-
     public isAllSelected(): boolean {
         const numSelected = this.selection.selected.length;
         const numRows = this.dataSource.membersSubject.value.length;
@@ -150,4 +142,9 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
                 this.toast.showError(error);
             });
     }
+
+    public refreshPage(): void {
+        this.selection.clear();
+        this.dataSource.loadGrantMembers(this.projectId, this.grantId, this.paginator.pageIndex, this.paginator.pageSize);
+    }
 }

console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.module.ts

@@ -16,6 +16,7 @@ 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 { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.module';
 
 import {
@@ -46,6 +47,7 @@ import { ProjectGrantMembersComponent } from './project-grant-members.component'
         MatProgressSpinnerModule,
         FormsModule,
         TranslateModule,
+        RefreshTableModule,
     ],
     exports: [
         ProjectGrantMembersComponent,

console/src/app/pages/signedout/signedout.component.html

@@ -1,10 +1,9 @@
 <div class="wrap">
     <div class="block">
         <div class="header">
-            <img alt="zitadel logo" *ngIf="dark; else lighttheme"
+            <img alt="zitadel logo" *ngIf="dark; else lighttheme" src="../../../assets/images/zitadel-logo-light.svg" />
-                src="../../../assets/images/zitadel-logo-oneline-darkdesign.svg" />
             <ng-template #lighttheme>
-                <img alt="zitadel logo" src="../../../assets/images/zitadel-logo-oneline-lightdesign.svg" />
+                <img alt="zitadel logo" src="../../../assets/images/zitadel-logo-dark.svg" />
             </ng-template>
             <p>{{'USER.SIGNEDOUT' | translate}}</p>
 

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html

@@ -139,6 +139,8 @@
             </div>
         </div>
 
+        <app-memberships [user]="user"></app-memberships>
+
         <app-changes class="changes" [changeType]="ChangeType.MYUSER" [id]="user.id"></app-changes>
     </div>
 </app-meta-layout>

console/src/app/pages/users/user-detail/membership-detail/membership-detail-datasource.ts

@@ -0,0 +1,58 @@
+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 { UserMembershipView } from 'src/app/proto/generated/management_pb';
+import { MgmtUserService } from 'src/app/services/mgmt-user.service';
+
+export class MembershipDetailDataSource extends DataSource<UserMembershipView.AsObject> {
+    public totalResult: number = 0;
+    public viewTimestamp!: Timestamp.AsObject;
+    public membersSubject: BehaviorSubject<UserMembershipView.AsObject[]>
+        = new BehaviorSubject<UserMembershipView.AsObject[]>([]);
+    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+
+    constructor(private mgmtUserService: MgmtUserService) {
+        super();
+    }
+
+    public loadMemberships(userId: string, pageIndex: number, pageSize: number): void {
+        const offset = pageIndex * pageSize;
+
+        this.loadingSubject.next(true);
+        from(this.mgmtUserService.SearchUserMemberships(userId, pageSize, offset)).pipe(
+            map(resp => {
+                const response = resp.toObject();
+                this.totalResult = response.totalResult;
+                if (response.viewTimestamp) {
+                    this.viewTimestamp = response.viewTimestamp;
+                }
+                return response.resultList;
+            }),
+            catchError(() => of([])),
+            finalize(() => this.loadingSubject.next(false)),
+        ).subscribe(members => {
+            this.membersSubject.next(members);
+        });
+    }
+
+
+    /**
+     * 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.
+     */
+    public connect(): Observable<UserMembershipView.AsObject[]> {
+        return this.membersSubject.asObservable();
+    }
+
+    /**
+     *  Called when the table is being destroyed. Use this function, to clean up
+     * any open connections or free any held resources that were set up during connect.
+     */
+    public disconnect(): void {
+        this.membersSubject.complete();
+        this.loadingSubject.complete();
+    }
+}

console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.html

@@ -0,0 +1,74 @@
+<app-detail-layout [backRouterLink]="[ '/users', user?.id]"
+    title="{{user?.displayName}} {{ 'USER.MEMBERSHIPS.TITLE' | translate }}"
+    description="{{ 'USER.MEMBERSHIPS.DESCRIPTION' | translate }}">
+    <app-refresh-table class="refresh-table" (refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult"
+        [timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource?.loading$ | async">
+
+        <!-- <button actions (click)="removeSelectedMemberships()" matTooltip="{{'USER.MEMBERSHIPS.REMOVE' | translate}}"
+            class="icon-button" mat-icon-button *ngIf="selection.hasValue()" color="warn">
+            <i class="las la-trash"></i>
+        </button> -->
+
+        <a actions color="primary" class="add-button" (click)="addMember()" color="primary" mat-raised-button>
+            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
+        </a>
+
+        <div class="table-wrapper">
+            <table mat-table class="background-style 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"
+                            [checked]="selection.hasValue() && isAllSelected()"
+                            [indeterminate]="selection.hasValue() && !isAllSelected()">
+                        </mat-checkbox>
+                    </th>
+                    <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)">
+                        </mat-checkbox>
+                    </td>
+                </ng-container>
+
+                <ng-container matColumnDef="memberType">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.MEMBERSHIPS.TYPE' | translate }} </th>
+                    <td class="pointer" mat-cell *matCellDef="let member">
+                        {{'USER.MEMBERSHIPS.TYPES.' + member.memberType | translate }} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="displayName">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.MEMBERSHIPS.DISPLAYNAME' | translate }} </th>
+                    <td class="pointer" mat-cell *matCellDef="let member">
+                        {{member.displayName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="creationDate">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.MEMBERSHIPS.CREATIONDATE' | translate }} </th>
+                    <td class="pointer" mat-cell *matCellDef="let member">
+                        {{member.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="changeDate">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.MEMBERSHIPS.CHANGEDATE' | translate }} </th>
+                    <td class="pointer" mat-cell *matCellDef="let member">
+                        {{member.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
+                    </td>
+                </ng-container>
+
+                <ng-container matColumnDef="roles">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
+                    <td class="pointer" mat-cell *matCellDef="let member">
+                        {{member.rolesList.join(', ')}}
+                    </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+                </tr>
+            </table>
+
+            <mat-paginator class="paginator background-style" #paginator [pageSize]="50"
+                [pageSizeOptions]="[25, 50, 100, 250]">
+            </mat-paginator>
+        </div>
+    </app-refresh-table>
+</app-detail-layout>

console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.scss

@@ -0,0 +1,51 @@
+.add-button {
+  border-radius: .5rem;
+}
+
+.refresh-table {
+  width: 100%;
+}
+
+.table-wrapper {
+  width: 100%;
+  overflow: auto;
+
+  .table,
+  .paginator {
+    width: 100%;
+
+    td,
+    th {
+      padding: .5rem;
+
+      &:first-child {
+        padding-left: 0;
+        padding-right: 1rem;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+    .action {
+      width: 40px;
+    }
+
+    .data-row {
+      &:hover {
+        background-color: #ffffff05;
+      }
+    }
+
+    .selection {
+      width: 50px;
+      max-width: 50px;
+    }
+  }
+}
+
+.pointer {
+  outline: none;
+  cursor: pointer;
+}

console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MembershipDetailComponent } from './membership-detail.component';
+
+describe('MembershipDetailComponent', () => {
+    let component: MembershipDetailComponent;
+    let fixture: ComponentFixture<MembershipDetailComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [MembershipDetailComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(MembershipDetailComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.ts

@@ -0,0 +1,213 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTable } from '@angular/material/table';
+import { ActivatedRoute } from '@angular/router';
+import { tap } from 'rxjs/operators';
+import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
+import { User, UserMembershipSearchResponse, UserMembershipView, UserView } from 'src/app/proto/generated/management_pb';
+import { AdminService } from 'src/app/services/admin.service';
+import { MgmtUserService } from 'src/app/services/mgmt-user.service';
+import { OrgService } from 'src/app/services/org.service';
+import { ProjectService } from 'src/app/services/project.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { MembershipDetailDataSource } from './membership-detail-datasource';
+
+@Component({
+    selector: 'app-membership-detail',
+    templateUrl: './membership-detail.component.html',
+    styleUrls: ['./membership-detail.component.scss'],
+})
+export class MembershipDetailComponent implements AfterViewInit {
+    public user!: UserView.AsObject;
+
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    @ViewChild(MatTable) public table!: MatTable<UserMembershipView.AsObject>;
+    public dataSource!: MembershipDetailDataSource;
+    public selection: SelectionModel<UserMembershipView.AsObject>
+        = new SelectionModel<UserMembershipView.AsObject>(true, []);
+
+    public memberRoleOptions: string[] = [];
+
+    /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+    public displayedColumns: string[] = ['select', 'memberType', 'displayName', 'creationDate', 'changeDate', 'roles'];
+
+    public loading: boolean = false;
+    public memberships!: UserMembershipSearchResponse.AsObject;
+
+    constructor(
+        private mgmtUserService: MgmtUserService,
+        activatedRoute: ActivatedRoute,
+        private dialog: MatDialog,
+        private toast: ToastService,
+        private projectService: ProjectService,
+        private orgService: OrgService,
+        private adminService: AdminService,
+    ) {
+        activatedRoute.params.subscribe(data => {
+            const { id } = data;
+            if (id) {
+                this.mgmtUserService.GetUserByID(id).then(user => {
+                    this.user = user.toObject();
+                    this.dataSource = new MembershipDetailDataSource(this.mgmtUserService);
+                    this.dataSource.loadMemberships(
+                        this.user.id,
+                        0,
+                        50,
+                    );
+                }).catch(err => {
+                    console.error(err);
+                });
+            }
+        });
+    }
+
+    public ngAfterViewInit(): void {
+        this.paginator.page
+            .pipe(
+                tap(() => this.loadMembershipsPage()),
+            )
+            .subscribe();
+    }
+
+    private loadMembershipsPage(): void {
+        this.dataSource.loadMemberships(
+            this.user.id,
+            this.paginator.pageIndex,
+            this.paginator.pageSize,
+        );
+    }
+
+    // public removeSelectedMemberships(): void {
+    //     Promise.all(this.selection.selected.map(membership => {
+    //         switch (membership.memberType) {
+    //             case MemberType.MEMBERTYPE_ORGANISATION:
+    //                 return this.orgService.RemoveMyOrgMember(membership.objectId);
+    //             case MemberType.MEMBERTYPE_PROJECT:
+    //                 return this.projectService.RemoveProjectMember(membership.objectId, this.user.id);
+    //             // case MemberType.MEMBERTYPE_PROJECT_GRANT:
+    //             //     return this.projectService.RemoveProjectGrantMember(membership.objectId, this.user.id);
+    //         }
+    //     }));
+    // }
+
+    public isAllSelected(): boolean {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.membersSubject.value.length;
+        return numSelected === numRows;
+    }
+
+    public masterToggle(): void {
+        this.isAllSelected() ?
+            this.selection.clear() :
+            this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
+    }
+
+    public addMember(): void {
+        const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
+            width: '400px',
+            data: {
+                user: this.user,
+            },
+        });
+
+        dialogRef.afterClosed().subscribe(resp => {
+            if (resp && resp.creationType !== undefined) {
+                switch (resp.creationType) {
+                    case CreationType.IAM:
+                        this.createIamMember(resp);
+                        break;
+                    case CreationType.ORG:
+                        this.createOrgMember(resp);
+                        break;
+                    case CreationType.PROJECT_OWNED:
+                        this.createOwnedProjectMember(resp);
+                        break;
+                    case CreationType.PROJECT_GRANTED:
+                        this.createGrantedProjectMember(resp);
+                        break;
+                }
+            }
+        });
+    }
+
+    public async loadManager(userId: string): Promise<void> {
+        this.mgmtUserService.SearchUserMemberships(userId, 100, 0, []).then(response => {
+            this.memberships = response.toObject();
+            this.loading = false;
+        });
+    }
+
+    public createIamMember(response: any): void {
+        const users: User.AsObject[] = response.users;
+        const roles: string[] = response.roles;
+
+        if (users && users.length && roles && roles.length) {
+            Promise.all(users.map(user => {
+                return this.adminService.AddIamMember(user.id, roles);
+            })).then(() => {
+                this.toast.showInfo('IAM.TOAST.MEMBERADDED', true);
+            }).catch(error => {
+                this.toast.showError(error);
+            });
+        }
+    }
+
+    private createOrgMember(response: any): void {
+        const users: User.AsObject[] = response.users;
+        const roles: string[] = response.roles;
+
+        if (users && users.length && roles && roles.length) {
+            Promise.all(users.map(user => {
+                return this.orgService.AddMyOrgMember(user.id, roles);
+            })).then(() => {
+                this.toast.showInfo('ORG.TOAST.MEMBERADDED', true);
+            }).catch(error => {
+                this.toast.showError(error);
+            });
+        }
+    }
+
+    private createGrantedProjectMember(response: any): void {
+        const users: User.AsObject[] = response.users;
+        const roles: string[] = response.roles;
+
+        if (users && users.length && roles && roles.length) {
+            users.forEach(user => {
+                return this.projectService.AddProjectGrantMember(
+                    response.projectId,
+                    response.grantId,
+                    user.id,
+                    roles,
+                ).then(() => {
+                    this.toast.showInfo('PROJECT.TOAST.MEMBERADDED', true);
+                }).catch(error => {
+                    this.toast.showError(error);
+                });
+            });
+        }
+    }
+
+    private createOwnedProjectMember(response: any): void {
+        const users: User.AsObject[] = response.users;
+        const roles: string[] = response.roles;
+
+        if (users && users.length && roles && roles.length) {
+            users.forEach(user => {
+                return this.projectService.AddProjectMember(response.projectId, user.id, roles)
+                    .then(() => {
+                        this.toast.showInfo('PROJECT.TOAST.MEMBERADDED', true);
+                    }).catch(error => {
+                        this.toast.showError(error);
+                    });
+            });
+        }
+    }
+
+    public refreshPage(): void {
+        this.selection.clear();
+        this.dataSource.loadMemberships(this.user.id, this.paginator.pageIndex, this.paginator.pageSize);
+    }
+}

console/src/app/pages/users/user-detail/membership-detail/membership-detail.module.ts

@@ -0,0 +1,50 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatIconModule } from '@angular/material/icon';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterModule, Routes } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
+import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
+import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe.module';
+import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe.module';
+
+import { MembershipDetailComponent } from './membership-detail.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: MembershipDetailComponent,
+        canActivate: [],
+        data: {
+            roles: ['user.write'],
+        },
+    },
+];
+@NgModule({
+    declarations: [MembershipDetailComponent],
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        TranslateModule,
+        DetailLayoutModule,
+        MatCheckboxModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatProgressSpinnerModule,
+        LocalizedDatePipeModule,
+        TimestampToDatePipeModule,
+        HasRoleModule,
+        MatIconModule,
+        MatButtonModule,
+        RefreshTableModule,
+        MatTooltipModule,
+    ],
+})
+export class MembershipDetailModule { }

console/src/app/pages/users/user-detail/memberships/memberships.component.html

@@ -0,0 +1,37 @@
+<div class="membership-groups">
+    <span class="header">{{ 'USER.MEMBERSHIPS.TITLE' | translate }}</span>
+    <!-- <span class="sub-header">{{ 'USER,' }}</span> -->
+    <div class="people" *ngIf="memberships">
+        <div class="img-list" [@cardAnimation]="memberships.totalResult">
+            <mat-spinner class="spinner" diameter="20" *ngIf="loading"></mat-spinner>
+
+            <ng-container *ngIf="memberships.totalResult < 10; else compact">
+                <ng-container *ngFor="let membership of memberships.resultList; index as i">
+                    <div @animate class="avatar-circle" (click)="navigateToObject()"
+                        matTooltip="{{ membership.displayName }} | {{membership.rolesList?.join(' ')}}"
+                        [ngStyle]="{'z-index': 100 - i}">
+                        <div class="membership-avatar"
+                            [ngStyle]="{'background-color': getColor(membership.memberType)}">
+                            <i *ngIf="membership.memberType == MemberType.MEMBERTYPE_ORGANISATION"
+                                class="las la-archway"></i>
+                            <i *ngIf="membership.memberType == MemberType.MEMBERTYPE_PROJECT"
+                                class="icon las la-layer-group"></i>
+                            <i *ngIf="membership.memberType == MemberType.MEMBERTYPE_PROJECT_GRANT"
+                                class="icon las la-layer-group"></i>
+
+                            <span>{{membership.displayName}}</span>
+                        </div>
+                    </div>
+                </ng-container>
+            </ng-container>
+            <ng-template #compact>
+                <div class="avatar-circle" matTooltip="Click to show detail">
+                    <span>{{memberships.totalResult}}</span>
+                </div>
+            </ng-template>
+            <button class="add-img" (click)="addMember()" mat-icon-button aria-label="add membership">
+                <mat-icon>add</mat-icon>
+            </button>
+        </div>
+    </div>
+</div>

console/src/app/pages/users/user-detail/memberships/memberships.component.scss

@@ -0,0 +1,109 @@
+@import '~@angular/material/theming';
+
+@mixin membership-theme($theme) {
+  /* stylelint-disable */
+  $primary: map-get($theme, primary);
+  $primary-dark: mat-color($primary, A900);
+  $accent: map-get($theme, accent);
+  $accent-color: mat-color($accent, 500);
+  /* stylelint-enable */
+
+  .membership-groups {
+    .header {
+      display: block;
+      margin-bottom: 1rem;
+      font-weight: 400;
+      margin-top: 0;
+    }
+
+    .sub-header {
+      font-size: .8rem;
+      color: #8795a1;
+    }
+
+    .people {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      margin-bottom: 1rem;
+
+      .owner {
+        margin-right: 1rem;
+      }
+
+      .img-list {
+        width: 100%;
+        margin-top: .5rem;
+        margin-left: 1rem;
+        display: flex;
+        align-items: center;
+
+        .spinner {
+          margin-left: -15px;
+          margin-right: 20px;
+        }
+
+        .add-img {
+          float: left;
+          margin: 0 8px 0 -15px;
+        }
+
+        .avatar-circle {
+          float: left;
+          margin: 0 8px 0 -12px;
+          height: 40px;
+          width: 40px;
+          border-radius: 50%;
+          -webkit-box-shadow: 2px 0 7px -1px rgba(33, 34, 36, .5);
+          -moz-box-shadow: 2px 0 7px -1px rgba(33, 34, 36, .5);
+          box-shadow: 2px 0 7px -1px rgba(33, 34, 36, .5);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .membership-avatar {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-transform: uppercase;
+            color: white;
+            outline: none;
+            padding: 3px;
+            text-align: center;
+            height: 40px;
+            width: 40px;
+            box-sizing: border-box;
+            font-size: 8px;
+            border-radius: .5rem;
+            transition: background-color .2s ease-in-out;
+            background-color: $accent-color;
+            cursor: pointer;
+            flex-direction: column;
+            overflow: hidden;
+
+            span {
+              max-width: 30px;
+              text-overflow: ellipsis;
+              font-weight: 800;
+              display: block;
+              white-space: nowrap;
+              overflow: hidden;
+            }
+
+            i {
+              font-size: 1.2rem;
+              flex-basis: 100%;
+              width: 100%;
+              height: 1.2rem;
+              max-height: 1.2rem;
+            }
+          }
+        }
+
+        .margin-neg {
+          margin-left: -1rem;
+        }
+      }
+    }
+  }
+}

console/src/app/pages/users/user-detail/memberships/memberships.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MembershipsComponent } from './memberships.component';
+
+describe('MembershipsComponent', () => {
+    let component: MembershipsComponent;
+    let fixture: ComponentFixture<MembershipsComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [MembershipsComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(MembershipsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

console/src/app/pages/users/user-detail/memberships/memberships.component.ts

@@ -0,0 +1,181 @@
+import { animate, animateChild, keyframes, query, stagger, style, transition, trigger } from '@angular/animations';
+import { Component, Input, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
+import { MemberType, User, UserMembershipSearchResponse } from 'src/app/proto/generated/management_pb';
+import { AdminService } from 'src/app/services/admin.service';
+import { MgmtUserService } from 'src/app/services/mgmt-user.service';
+import { OrgService } from 'src/app/services/org.service';
+import { ProjectService } from 'src/app/services/project.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+@Component({
+    selector: 'app-memberships',
+    templateUrl: './memberships.component.html',
+    styleUrls: ['./memberships.component.scss'],
+    animations: [
+        trigger('cardAnimation', [
+            transition('* => *', [
+                query('@animate', stagger('40ms', animateChild()), { optional: true }),
+            ]),
+        ]),
+        trigger('animate', [
+            transition(':enter', [
+                animate('.2s ease-in', keyframes([
+                    style({ opacity: 0, offset: 0 }),
+                    style({ opacity: .5, transform: 'scale(1.05)', offset: 0.3 }),
+                    style({ opacity: 1, transform: 'scale(1)', offset: 1 }),
+                ])),
+            ]),
+        ]),
+    ],
+})
+export class MembershipsComponent implements OnInit {
+    public loading: boolean = false;
+    public memberships!: UserMembershipSearchResponse.AsObject;
+
+    @Input() public user!: User.AsObject;
+    public MemberType: any = MemberType;
+
+    constructor(
+        private orgService: OrgService,
+        private projectService: ProjectService,
+        private mgmtUserService: MgmtUserService,
+        private adminService: AdminService,
+        private dialog: MatDialog,
+        private toast: ToastService,
+        private router: Router,
+    ) { }
+
+    ngOnInit(): void {
+        this.loadManager(this.user.id);
+    }
+
+    public async loadManager(userId: string): Promise<void> {
+        this.mgmtUserService.SearchUserMemberships(userId, 100, 0, []).then(response => {
+            this.memberships = response.toObject();
+            this.loading = false;
+        });
+    }
+
+    public navigateToObject(): void {
+        this.router.navigate(['/users', this.user.id, 'memberships']);
+    }
+
+    public addMember(): void {
+        const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
+            width: '400px',
+            data: {
+                user: this.user,
+            },
+        });
+
+        dialogRef.afterClosed().subscribe(resp => {
+            if (resp && resp.creationType !== undefined) {
+                switch (resp.creationType) {
+                    case CreationType.IAM:
+                        this.createIamMember(resp);
+                        break;
+                    case CreationType.ORG:
+                        this.createOrgMember(resp);
+                        break;
+                    case CreationType.PROJECT_OWNED:
+                        this.createOwnedProjectMember(resp);
+                        break;
+                    case CreationType.PROJECT_GRANTED:
+                        this.createGrantedProjectMember(resp);
+                        break;
+                }
+            }
+        });
+    }
+
+    public createIamMember(response: any): void {
+        const users: User.AsObject[] = response.users;
+        const roles: string[] = response.roles;
+
+        if (users && users.length && roles && roles.length) {
+            Promise.all(users.map(user => {
+                return this.adminService.AddIamMember(user.id, roles);
+            })).then(() => {
+                this.toast.showInfo('IAM.TOAST.MEMBERADDED', true);
+            }).catch(error => {
+                this.toast.showError(error);
+            });
+        }
+    }
+
+    private createOrgMember(response: any): void {
+        const users: User.AsObject[] = response.users;
+        const roles: string[] = response.roles;
+
+        if (users && users.length && roles && roles.length) {
+            Promise.all(users.map(user => {
+                return this.orgService.AddMyOrgMember(user.id, roles);
+            })).then(() => {
+                this.toast.showInfo('ORG.TOAST.MEMBERADDED', true);
+            }).catch(error => {
+                this.toast.showError(error);
+            });
+        }
+    }
+
+    private createGrantedProjectMember(response: any): void {
+        const users: User.AsObject[] = response.users;
+        const roles: string[] = response.roles;
+
+        if (users && users.length && roles && roles.length) {
+            users.forEach(user => {
+                return this.projectService.AddProjectGrantMember(
+                    response.projectId,
+                    response.grantId,
+                    user.id,
+                    roles,
+                ).then(() => {
+                    this.toast.showInfo('PROJECT.TOAST.MEMBERADDED', true);
+                }).catch(error => {
+                    this.toast.showError(error);
+                });
+            });
+        }
+    }
+
+    private createOwnedProjectMember(response: any): void {
+        const users: User.AsObject[] = response.users;
+        const roles: string[] = response.roles;
+
+        if (users && users.length && roles && roles.length) {
+            users.forEach(user => {
+                return this.projectService.AddProjectMember(response.projectId, user.id, roles)
+                    .then(() => {
+                        this.toast.showInfo('PROJECT.TOAST.MEMBERADDED', true);
+                    }).catch(error => {
+                        this.toast.showError(error);
+                    });
+            });
+        }
+    }
+
+    getColor(type: MemberType): string {
+        const gen = type.toString();
+        const colors = [
+            'rgb(201, 115, 88)',
+            'rgb(226, 176, 50)',
+            'rgb(112, 89, 152)',
+        ];
+
+        let hash = 0;
+        if (gen.length === 0) {
+            return colors[hash];
+        }
+        for (let i = 0; i < gen.length; i++) {
+            // tslint:disable-next-line: no-bitwise
+            hash = gen.charCodeAt(i) + ((hash << 5) - hash);
+            // tslint:disable-next-line: no-bitwise
+            hash = hash & hash;
+        }
+        hash = ((hash % colors.length) + colors.length) % colors.length;
+        return colors[hash];
+    }
+}

console/src/app/pages/users/user-detail/user-detail-routing.module.ts

@@ -48,6 +48,15 @@ const routes: Routes = [
             animation: 'AddPage',
         },
     },
+    {
+        path: ':id/memberships',
+        loadChildren: () => import('./membership-detail/membership-detail.module').then(m => m.MembershipDetailModule),
+        canActivate: [AuthGuard, RoleGuard],
+        data: {
+            roles: ['user.membership.read'],
+            animation: 'AddPage',
+        },
+    },
 ];
 
 @NgModule({

console/src/app/pages/users/user-detail/user-detail.module.ts

@@ -15,6 +15,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { QRCodeModule } from 'angularx-qrcode';
 import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { MemberCreateDialogModule } from 'src/app/modules/add-member-dialog/member-create-dialog.module';
 import { CardModule } from 'src/app/modules/card/card.module';
 import { ChangesModule } from 'src/app/modules/changes/changes.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
@@ -31,6 +32,7 @@ import { CodeDialogComponent } from './auth-user-detail/code-dialog/code-dialog.
 import { DialogOtpComponent } from './auth-user-detail/dialog-otp/dialog-otp.component';
 import { ThemeSettingComponent } from './auth-user-detail/theme-setting/theme-setting.component';
 import { DetailFormModule } from './detail-form/detail-form.module';
+import { MembershipsComponent } from './memberships/memberships.component';
 import { PasswordComponent } from './password/password.component';
 import { UserDetailRoutingModule } from './user-detail-routing.module';
 import { UserDetailComponent } from './user-detail/user-detail.component';
@@ -46,6 +48,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
         ThemeSettingComponent,
         PasswordComponent,
         CodeDialogComponent,
+        MembershipsComponent,
     ],
     imports: [
         UserDetailRoutingModule,
@@ -76,6 +79,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
         CopyToClipboardModule,
         DetailLayoutModule,
         PasswordComplexityViewModule,
+        MemberCreateDialogModule,
     ],
 })
 export class UserDetailModule { }

console/src/app/pages/users/user-detail/user-detail/user-detail.component.html

@@ -4,7 +4,7 @@
             <a (click)="navigateBack()" mat-icon-button>
                 <mat-icon class="icon">arrow_back</mat-icon>
             </a>
-            <h1>{{ 'USER.PROFILE.TITLE' | translate }} {{user?.displayName}}</h1>
+            <h1>{{user?.displayName}}</h1>
 
             <span class="fill-space"></span>
 
@@ -158,6 +158,8 @@
             </div>
         </div>
 
+        <app-memberships [user]="user"></app-memberships>
+
         <app-changes class="changes" [changeType]="ChangeType.USER" [id]="user.id"></app-changes>
     </div>
 </app-meta-layout>

console/src/app/pages/users/user-detail/user-detail/user-detail.component.scss

@@ -11,10 +11,7 @@
   }
 
   h1 {
-    font-size: 2rem;
     margin: 0;
-    font-weight: normal;
-    margin-right: 1rem;
   }
 
   .fill-space {

console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts

@@ -13,8 +13,8 @@ import {
     UserState,
     UserView,
 } from 'src/app/proto/generated/management_pb';
-import { AuthUserService } from 'src/app/services/auth-user.service';
 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';
 
 @Component({
@@ -43,7 +43,7 @@ export class UserDetailComponent implements OnInit, OnDestroy {
         private toast: ToastService,
         private mgmtUserService: MgmtUserService,
         private _location: Location,
-        public authUserService: AuthUserService,
+        public projectService: ProjectService,
     ) { }
 
     public ngOnInit(): void {

console/src/app/pages/users/user-list/user-list.component.html

@@ -2,7 +2,8 @@
     <h1>{{ 'USER.PAGES.LIST' | translate }}</h1>
     <p class="sub">{{ 'USER.PAGES.DESCRIPTION' | translate }}</p>
 
-    <app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length">
+    <app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
+        [timestamp]="userResult?.viewTimestamp">
         <ng-template appHasRole [appHasRole]="['user.write']" actions>
             <button (click)="deactivateSelectedUsers()" matTooltip="{{'ORG_DETAIL.TABLE.DEACTIVATE' | translate}}"
                 class="icon-button" mat-icon-button *ngIf="selection.hasValue()">

console/src/app/pages/users/user-list/user-list.component.ts

@@ -77,7 +77,7 @@ export class UserListComponent implements OnDestroy {
         this.loadingSubject.next(true);
         this.userService.SearchUsers(limit, offset).then(resp => {
             this.userResult = resp.toObject();
-            this.dataSource.data = resp.toObject().resultList;
+            this.dataSource.data = this.userResult.resultList;
             this.loadingSubject.next(false);
         }).catch(error => {
             this.toast.showError(error);

console/src/app/services/mgmt-user.service.ts

@@ -15,6 +15,9 @@ import {
     ProjectGrantMemberSearchQuery,
     ProjectGrantMemberSearchRequest,
     ProjectGrantMemberSearchResponse,
+    ProjectMemberSearchQuery,
+    ProjectMemberSearchRequest,
+    ProjectMemberSearchResponse,
     ProjectRoleAdd,
     SetPasswordNotificationRequest,
     UpdateUserAddressRequest,
@@ -34,6 +37,9 @@ import {
     UserGrantUpdate,
     UserGrantView,
     UserID,
+    UserMembershipSearchQuery,
+    UserMembershipSearchRequest,
+    UserMembershipSearchResponse,
     UserPhone,
     UserProfile,
     UserSearchQuery,
@@ -98,6 +104,37 @@ export class MgmtUserService {
         );
     }
 
+    public async SearchProjectMembers(
+        limit: number, offset: number, queryList?: ProjectMemberSearchQuery[]): Promise<ProjectMemberSearchResponse> {
+        const req = new ProjectMemberSearchRequest();
+        req.setLimit(limit);
+        req.setOffset(offset);
+        if (queryList) {
+            req.setQueriesList(queryList);
+        }
+        return await this.request(
+            c => c.searchProjectMembers,
+            req,
+            f => f,
+        );
+    }
+
+    public async SearchUserMemberships(userId: string,
+        limit: number, offset: number, queryList?: UserMembershipSearchQuery[]): Promise<UserMembershipSearchResponse> {
+        const req = new UserMembershipSearchRequest();
+        req.setLimit(limit);
+        req.setOffset(offset);
+        req.setUserId(userId);
+        if (queryList) {
+            req.setQueriesList(queryList);
+        }
+        return await this.request(
+            c => c.searchUserMemberships,
+            req,
+            f => f,
+        );
+    }
+
     public async GetUserProfile(id: string): Promise<UserProfile> {
         const req = new UserID();
         req.setId(id);

console/src/app/services/project.service.ts

@@ -312,9 +312,9 @@ export class ProjectService {
         userId: string,
     ): Promise<Empty> {
         const req = new ProjectGrantMemberRemove();
-        req.setProjectId(projectId);
         req.setGrantId(grantId);
         req.setUserId(userId);
+        req.setProjectId(projectId);
         return await this.request(
             c => c.removeProjectGrantMember,
             req,

console/src/assets/i18n/de.json

@@ -227,6 +227,21 @@
             "DEACTIVATED":"User deaktiviert!",
             "SELECTEDREACTIVATED":"Selektierte User reaktiviert!",
             "SELECTEDDEACTIVATED":"Selektierte User deaktiviert!"
+        },
+        "MEMBERSHIPS": {
+            "TITLE":"Zitadel Manager Rollen",
+            "DESCRIPTION":"Dies sind alle Mitgliedschaften des Benutzers. Sie können die entsprechenden Rechte auch auf der Organisations-, Projekt-, oder IAM Detailseite aufrufen und modifizieren",
+            "CREATIONDATE":"Erstelldatum",
+            "CHANGEDATE":"Letzte Änderung",
+            "DISPLAYNAME":"Anzeigename",
+            "REMOVE":"Entfernen",
+            "TYPE":"Typ",
+            "TYPES":{
+                "0":"Unbekannt",
+                "1":"Organisation",
+                "2":"Projekt",
+                "3":"Berechtigtes Projekt"
+            }
         }
     },
     "IAM": {
@@ -508,7 +523,8 @@
                 "PROJECTGRANTMEMBERADDED":"Berechtigungsmanager hinzugefügt!",
                 "PROJECTGRANTMEMBERCHANGED":"Berechtigungsmanager verändert!",
                 "PROJECTGRANTMEMBERREMOVED":"Berechtigungsmanager entfernt!"
-            }
+            },
+            "ROLES":"Projekt Rollen"
         },
         "APP": {
             "TITLE": "Applikationen",
@@ -643,50 +659,17 @@
         "en": "Englisch"
     },
     "MEMBER":{
-        "ADD":"Manager hinzufügen"
+        "ADD":"Verwalter hinzufügen",
-    },
+        "CREATIONTYPE":"Erstell Typ",
-    "ROLES": {
+        "CREATIONTYPES":{
-        "ORG_OWNER": "Org. Owner",
+            "3":"IAM",
-        "ORG_MEMBER_VIEWER": "Org. Member Viewer",
+            "2":"Organisation",
-        "ORG_PROJECT_ROLE_VIEWER": "Org. Projekt Role Viewer",
+            "0":"Eigenes Projekt",
-        "ORG_EDITOR":"Org. Editor",
+            "1":"Berechtigtes Projekt",
-        "ORG_VIEWER":"Org. Viewer",
+            "4":"Projekt"
-        "ORG_MEMBER_EDITOR":"Org.. Member Editor",
+        }
-        "ORG_PROJECT_CREATOR":"Org.. Projekt Creator",
-        "ORG_PROJECT_EDITOR":"Org.. Projekt Editor",
-        "ORG_PROJECT_VIEWER":"Org.. Projekt Viewer",
-        "ORG_PROJECT_MEMBER_EDITOR":"Org.. Projekt Member Editor",
-        "ORG_PROJECT_MEMBER_VIEWER":"Org.. Projekt Member Viewer",
-        "ORG_PROJECT_ROLE_EDITOR":"Org.. Projekt Role Editor",
-        "ORG_PROJECT_APP_EDITOR":"Org. Projekt App Editor",
-        "ORG_PROJECT_APP_VIEWER":"Org. Projekt App Viewer",
-        "ORG_PROJECT_GRANT_EDITOR":"Org. Projekt Grant Editor" ,
-        "ORG_PROJECT_GRANT_VIEWER":"Org.Projekt Grant Viewer",
-        "ORG_PROJECT_GRANT_MEMBER_EDITOR":"Org.Projekt Grant Member Editor",
-        "ORG_PROJECT_GRANT_MEMBER_VIEWER":"Org.Projekt Grant Member Viewer",
-        "ORG_USER_EDITOR":"Org.User Editor",
-        "ORG_USER_VIEWER":"Org. User Viewer",
-        "ORG_USER_GRANT_EDITOR":"Org. User Grant Editor",
-        "ORG_USER_GRANT_VIEWER":"Org. User Grant Viewer",
-        "ORG_POLICY_EDITOR":"Org. Policy Editor",
-        "ORG_POLICY_VIEWER":"Org. Policy Viewer",
-        "PROJECT_OWNER":"Projekt Besitzer",
-        "PROJECT_OWNER_VIEWER":"Projekt Besitzer Viewer",
-        "PROJECT_MEMBER_EDITOR":"Projekt Manager Editor",
-        "PROJECT_APP_EDITOR":"Projekt App Editor",
-        "PROJECT_APP_VIEWER":"Projekt App Viewer",
-        "PROJECT_USER_GRANT_EDITOR":"Projekt User Grant Editor",
-        "PROJECT_USER_GRANT_VIEWER":"Projekt User Grant Viewer",
-        "PROJECT_ROLE_EDITOR": "Projekt Role Editor",
-        "PROJECT_MEMBER_VIEWER": "Projekt Member Viewer",
-        "PROJECT_GRANT_EDITOR":"Projekt Grant Editor",
-        "PROJECT_GRANT_VIEWER":"Projekt Grant Viewer",
-        "PROJECT_GRANT_MEMBER_EDITOR":"Projekt Grant Member Editor",
-        "PROJECT_GRANT_MEMBER_VIEWER":"Projekt Grant Member Viewer",
-        "PROJECT_GRANT_OWNER":"Projekt Grant Owner",
-        "PROJECT_GRANT_USER_GRANT_EDITOR":"Projekt Grant User Editor",
-        "PROJECT_GRANT_USER_GRANT_VIEWER":"Projekt Grant User Grant Viewer"
     },
+    "ROLESLABEL":"Rollen",
     "GRANTS": {
         "DELETE":"Grant löschen",
         "ADD":"Grant erstellen",

console/src/assets/i18n/en.json

@@ -227,6 +227,21 @@
             "DEACTIVATED":"User deactivated",
             "SELECTEDREACTIVATED":"Selected Users reactivated",
             "SELECTEDDEACTIVATED":"Selected Users deactivated"
+        },
+        "MEMBERSHIPS": {
+            "TITLE":"Zitadel Manager Roles",
+            "DESCRIPTION":"These are all member grants of the user. You can modify them also on organisation-, project-, or iam detailpages.",
+            "CREATIONDATE":"Creation Date",
+            "CHANGEDATE":"Last Modified",
+            "DISPLAYNAME":"Displayname",
+            "REMOVE":"Remove",
+            "TYPE":"Type",
+            "TYPES":{
+                "0":"Unknown",
+                "1":"Organisation",
+                "2":"Project",
+                "3":"Granted Project"
+            }
         }
     },
     "IAM": {
@@ -508,7 +523,8 @@
                 "PROJECTGRANTMEMBERADDED":"Grant Manager added!",
                 "PROJECTGRANTMEMBERCHANGED":"Grant Manager changed!",
                 "PROJECTGRANTMEMBERREMOVED":"Grant Manager removed!"
-            }
+            },
+            "ROLES":"Project Roles"
         },
         "APP": {
             "TITLE": "Applications",
@@ -643,50 +659,17 @@
         "en": "English"
     },
     "MEMBER":{
-        "ADD":"Add a manager"
+        "ADD":"Add a manager",
-    },
+        "CREATIONTYPE":"Creation Type",
-    "ROLES": {
+        "CREATIONTYPES":{
-        "ORG_OWNER": "Org. Owner",
+            "3":"IAM",
-        "ORG_MEMBER_VIEWER": "Org. Member Viewer",
+            "2":"Organisation",
-        "ORG_PROJECT_ROLE_VIEWER": "Org. Project Role Viewer",
+            "0":"Owned Project",
-        "ORG_EDITOR":"Org. Editor",
+            "1":"Granted Project",
-        "ORG_VIEWER":"Org. Viewer",
+            "4":"Project"
-        "ORG_MEMBER_EDITOR":"Org. Member Editor",
+        }
-        "ORG_PROJECT_CREATOR":"Org. Project Creator",
-        "ORG_PROJECT_EDITOR":"Org. Project Editor",
-        "ORG_PROJECT_VIEWER":"Org. Project Viewer",
-        "ORG_PROJECT_MEMBER_EDITOR":"Org. Project Member Editor",
-        "ORG_PROJECT_MEMBER_VIEWER":"Org. Project Member Viewer",
-        "ORG_PROJECT_ROLE_EDITOR":"Org. Project Role Editor",
-        "ORG_PROJECT_APP_EDITOR":"Org. Project App Editor",
-        "ORG_PROJECT_APP_VIEWER":"Org. Project App Viewer",
-        "ORG_PROJECT_GRANT_EDITOR":"Org. Project Grant Editor" ,
-        "ORG_PROJECT_GRANT_VIEWER":"Org. Project Grant Viewer",
-        "ORG_PROJECT_GRANT_MEMBER_EDITOR":"Org. Project Grant Member Editor",
-        "ORG_PROJECT_GRANT_MEMBER_VIEWER":"Org. Project Grant Member Viewer",
-        "ORG_USER_EDITOR":"Org. User Editor",
-        "ORG_USER_VIEWER":"Org. User Viewer",
-        "ORG_USER_GRANT_EDITOR":"Org. User Grant Editor",
-        "ORG_USER_GRANT_VIEWER":"Org. User Grant Viewer",
-        "ORG_POLICY_EDITOR":"Org. Policy Editor",
-        "ORG_POLICY_VIEWER":"Org. Policy Viewer",
-        "PROJECT_OWNER":"Project Owner",
-        "PROJECT_OWNER_VIEWER":"Project Owner Viewer",
-        "PROJECT_MEMBER_EDITOR":"Project Member Editor",
-        "PROJECT_APP_EDITOR":"Project App Editor",
-        "PROJECT_APP_VIEWER":"Project App Viewer",
-        "PROJECT_USER_GRANT_EDITOR":"Project User Grant Editor",
-        "PROJECT_USER_GRANT_VIEWER":"Project User Grant Viewer",
-        "PROJECT_ROLE_EDITOR": "Project Role Editor",
-        "PROJECT_MEMBER_VIEWER": "Project Member Viewer",
-        "PROJECT_GRANT_EDITOR":"Project Grant Editor",
-        "PROJECT_GRANT_VIEWER":"Project Grant Viewer",
-        "PROJECT_GRANT_MEMBER_EDITOR":"Project Grant Member Editor",
-        "PROJECT_GRANT_MEMBER_VIEWER":"Project Grant Member Viewer",
-        "PROJECT_GRANT_OWNER":"Project Grant Owner",
-        "PROJECT_GRANT_USER_GRANT_EDITOR":"Project Grant User Editor",
-        "PROJECT_GRANT_USER_GRANT_VIEWER":"Project Grant User Grant Viewer"
     },
+    "ROLESLABEL":"Roles",
     "GRANTS": {
         "DELETE":"delete authorization",
         "ADD":"create authorization",

console/src/assets/images/zitadel-logo-oneline-darkdesign.svg

@@ -1,99 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 1005 241" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1,0,0,1,-483,0)">
-        <g id="zitadel-logo-oneline-darkdesign" transform="matrix(1,0,0,1,483.774,0)">
-            <rect x="0" y="0" width="1003.45" height="241" style="fill:none;"/>
-            <g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2188.01,-701.671)">
-                <path d="M1493.5,1056.38L1493.5,1037L1496.5,1037L1496.5,1061.62L1426.02,1020.38L1496.5,979.392L1496.5,1004L1493.5,1004L1493.5,984.608L1431.98,1020.39L1493.5,1056.38Z" style="fill:white;"/>
-            </g>
-            <g transform="matrix(8.28881,0,0,4.69323,-106816,-204.925)">
-                <g transform="matrix(-0.0429306,-0.282967,0.160219,-0.0758207,12884.5,137.392)">
-                    <path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear1);"/>
-                </g>
-                <g transform="matrix(0.160219,0.0758207,-0.0429306,0.282967,12878.9,10.8747)">
-                    <path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear2);"/>
-                </g>
-                <g transform="matrix(-0.117289,0.207146,-0.117289,-0.207146,12943.8,65.7)">
-                    <path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear3);"/>
-                </g>
-                <g transform="matrix(-0.160219,-0.0758207,0.0429306,-0.282967,12917.4,132.195)">
-                    <path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear4);"/>
-                </g>
-                <g transform="matrix(-0.117289,0.207146,0.117289,0.207146,12897.8,5.87512)">
-                    <path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear5);"/>
-                </g>
-                <g transform="matrix(-0.0429306,-0.282967,-0.160219,0.0758207,12936.8,97.6441)">
-                    <path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear6);"/>
-                </g>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2189.33,-701.315)">
-                <circle cx="1496" cy="1004" r="7" style="fill:white;"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2177.59,-657.491)">
-                <circle cx="1496" cy="1004" r="7" style="fill:white;"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2169.76,-628.274)">
-                <circle cx="1496" cy="1004" r="7" style="fill:white;"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2271.15,-656.072)">
-                <circle cx="1496" cy="1004" r="7" style="fill:white;"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2197.16,-730.532)">
-                <circle cx="1496" cy="1004" r="7" style="fill:white;"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2068.91,-256.376)">
-                <path d="M1499.26,757.787C1499.26,757.787 1497.37,756.489 1497,755.2C1496.71,754.182 1496.57,750.662 1496.54,750C1496.41,747.303 1499.21,745.644 1499.21,745.644L1490.01,745.835C1490.01,745.835 1493.15,745.713 1493.46,750C1493.51,750.661 1493.23,753.476 1493,755.2C1492.91,756.447 1491.2,757.668 1491.2,757.668L1499.26,757.787Z" style="fill:white;"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2049.34,-183.335)">
-                <path d="M1495,760L1495,744" style="fill:none;"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2049.34,-183.335)">
-                <path d="M1498.27,757.077C1498.27,757.077 1496.71,756.46 1496.65,754.8C1496.65,753.658 1496.64,753.281 1496.65,752.016C1496.62,751.334 1496.59,750.608 1496.65,749.949C1496.78,746.836 1498.5,746.156 1498.5,746.156L1491.46,745.931C1491.46,745.931 1493.37,746.719 1493.65,749.83C1493.71,750.489 1493.69,751.528 1493.65,752.209C1493.64,753.331 1493.64,753.413 1493.65,754.518C1493.68,756.334 1492.58,756.827 1492.58,756.827L1498.27,757.077Z" style="fill:white;"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2147.14,-208.37)">
-                <path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2147.14,-208.37)">
-                <path d="M1500.86,762.056C1500.86,762.056 1499.86,760.4 1503.09,757.456C1504.91,755.797 1507.33,754.151 1509.98,752.255C1514.82,748.79 1520.68,744.94 1526.52,741.049C1531.45,737.766 1536.38,734.479 1540.82,731.68C1544.52,729.349 1547.85,727.296 1550.54,725.8C1551.07,725.506 1551.6,725.329 1552.05,725.029C1554.73,723.257 1556.85,724.968 1556.85,724.968L1552.23,716.282C1552.23,716.282 1551.99,719.454 1550,720.997C1549.57,721.333 1549.15,721.741 1548.67,722.12C1546.2,724.053 1542.99,726.344 1539.39,728.867C1535.06,731.898 1530.13,735.166 1525.19,738.438C1519.35,742.314 1513.52,746.234 1508.49,749.329C1505.74,751.023 1503.28,752.577 1501.13,753.598C1497.99,755.086 1495.28,753.617 1495.28,753.617L1500.86,762.056Z" style="fill:white;"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,-0.311363,-1.16202,-1672.97,1561.28)">
-                <path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,-0.311363,-1.16202,-1672.97,1561.28)">
-                <path d="M1496.1,754.362C1496.1,754.362 1497.2,755.607 1501.13,753.598C1503.25,752.509 1505.74,751.023 1508.49,749.329C1513.52,746.234 1519.35,742.314 1525.19,738.438C1530.13,735.166 1534.94,731.832 1539.27,728.802C1542.87,726.279 1549.36,722.059 1549.81,721.75C1552.75,719.73 1552.18,718.196 1552.18,718.196L1555.28,724.152C1555.28,724.152 1553.77,722.905 1551.37,724.681C1550.93,725.006 1544.52,729.349 1540.82,731.68C1536.38,734.479 1531.45,737.766 1526.52,741.049C1520.68,744.94 1514.82,748.79 1509.98,752.255C1507.33,754.151 1504.89,755.771 1503.09,757.456C1499.47,760.841 1501.26,763.283 1501.26,763.283L1496.1,754.362Z" style="fill:white;"/>
-            </g>
-            <g transform="matrix(1.299,0,0,1.08306,-3394.18,-2084.88)">
-                <g transform="matrix(94.2338,0,0,94.1776,2827.58,2063)">
-                    <path d="M0.449,-0.7L0.177,-0.7C0.185,-0.682 0.197,-0.654 0.2,-0.648C0.205,-0.639 0.216,-0.628 0.239,-0.628L0.32,-0.628C0.332,-0.628 0.336,-0.62 0.334,-0.611L0.128,0L0.389,0C0.412,0 0.422,-0.01 0.427,-0.02L0.45,-0.071L0.255,-0.071C0.245,-0.071 0.239,-0.078 0.242,-0.09L0.449,-0.7Z" style="fill:white;fill-rule:nonzero;"/>
-                </g>
-                <g transform="matrix(94.2338,0,0,94.1776,2912.39,2063)">
-                    <path d="M0.214,-0.7L0.214,-0.015C0.215,-0.01 0.218,0 0.235,0L0.286,0L0.286,-0.672C0.286,-0.684 0.278,-0.7 0.257,-0.7L0.214,-0.7Z" style="fill:white;fill-rule:nonzero;"/>
-                </g>
-                <g transform="matrix(94.2338,0,0,94.1776,2987.78,2063)">
-                    <path d="M0.441,-0.7L0.155,-0.7C0.143,-0.7 0.133,-0.69 0.133,-0.678L0.133,-0.629L0.234,-0.629L0.234,-0.015C0.234,-0.01 0.237,0 0.254,0L0.305,0L0.305,-0.612C0.306,-0.621 0.313,-0.629 0.323,-0.629L0.379,-0.629C0.402,-0.629 0.413,-0.639 0.417,-0.648L0.441,-0.7Z" style="fill:white;fill-rule:nonzero;"/>
-                </g>
-                <g transform="matrix(94.2338,0,0,94.1776,3067.88,2063)">
-                    <path d="M0.422,0L0.343,0L0.28,-0.482L0.217,0L0.138,0L0.244,-0.7L0.283,-0.7C0.313,-0.7 0.318,-0.681 0.321,-0.662L0.422,0Z" style="fill:white;fill-rule:nonzero;"/>
-                </g>
-                <g transform="matrix(94.2338,0,0,94.1776,3148.92,2063)">
-                    <path d="M0.186,-0.7L0.186,0L0.325,0C0.374,0 0.413,-0.039 0.414,-0.088L0.414,-0.612C0.413,-0.661 0.374,-0.7 0.325,-0.7L0.186,-0.7ZM0.343,-0.108C0.343,-0.081 0.325,-0.071 0.305,-0.071L0.258,-0.071L0.258,-0.628L0.305,-0.628C0.325,-0.628 0.343,-0.618 0.343,-0.592L0.343,-0.108Z" style="fill:white;fill-rule:nonzero;"/>
-                </g>
-                <g transform="matrix(94.2338,0,0,94.1776,3233.73,2063)">
-                    <path d="M0.291,-0.071L0.291,-0.314C0.291,-0.323 0.299,-0.331 0.308,-0.331L0.338,-0.331C0.361,-0.331 0.371,-0.341 0.376,-0.35C0.379,-0.356 0.391,-0.385 0.399,-0.403L0.291,-0.403L0.291,-0.611C0.291,-0.621 0.298,-0.628 0.308,-0.628L0.366,-0.628C0.389,-0.628 0.4,-0.639 0.404,-0.648L0.428,-0.7L0.241,-0.7C0.229,-0.7 0.22,-0.691 0.219,-0.68L0.219,0L0.379,0C0.402,0 0.413,-0.01 0.418,-0.019C0.421,-0.025 0.433,-0.053 0.441,-0.071L0.291,-0.071Z" style="fill:white;fill-rule:nonzero;"/>
-                </g>
-                <g transform="matrix(94.2338,0,0,94.1776,3318.54,2063)">
-                    <path d="M0.283,-0.071L0.283,-0.678C0.283,-0.69 0.273,-0.699 0.261,-0.7L0.211,-0.7L0.211,0L0.383,0C0.406,0 0.417,-0.01 0.422,-0.019C0.425,-0.025 0.437,-0.053 0.445,-0.071L0.283,-0.071Z" style="fill:white;fill-rule:nonzero;"/>
-                </g>
-            </g>
-        </g>
-    </g>
-    <defs>
-        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,155.247,-155.247,-41.5984,201.516,76.8392)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
-        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(155.247,-41.5984,41.5984,155.247,110.08,195.509)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
-        <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,-113.649,113.649,-113.649,258.31,215.618)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
-        <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-155.247,41.5984,-41.5984,-155.247,220.914,144.546)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
-        <linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,113.649,113.649,113.649,206.837,124.661)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
-        <linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,-155.247,-155.247,41.5984,152.054,262.8)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
-    </defs>
-</svg>

console/src/assets/images/zitadel-logo-oneline-lightdesign.svg

@@ -1,99 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 1005 242" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1,0,0,1,-483,-265)">
-        <g id="zitadel-logo-oneline-lightdesign" transform="matrix(1,0,0,1,483.774,265.93)">
-            <rect x="0" y="0" width="1003.45" height="241" style="fill:none;"/>
-            <g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2188.01,-701.671)">
-                <path d="M1493.5,1056.38L1493.5,1037L1496.5,1037L1496.5,1061.62L1426.02,1020.38L1496.5,979.392L1496.5,1004L1493.5,1004L1493.5,984.608L1431.98,1020.39L1493.5,1056.38Z" style="fill:rgb(35,35,35);"/>
-            </g>
-            <g transform="matrix(8.28881,0,0,4.69323,-106816,-204.925)">
-                <g transform="matrix(-0.0429306,-0.282967,0.160219,-0.0758207,12884.5,137.392)">
-                    <path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear1);"/>
-                </g>
-                <g transform="matrix(0.160219,0.0758207,-0.0429306,0.282967,12878.9,10.8747)">
-                    <path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear2);"/>
-                </g>
-                <g transform="matrix(-0.117289,0.207146,-0.117289,-0.207146,12943.8,65.7)">
-                    <path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear3);"/>
-                </g>
-                <g transform="matrix(-0.160219,-0.0758207,0.0429306,-0.282967,12917.4,132.195)">
-                    <path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear4);"/>
-                </g>
-                <g transform="matrix(-0.117289,0.207146,0.117289,0.207146,12897.8,5.87512)">
-                    <path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear5);"/>
-                </g>
-                <g transform="matrix(-0.0429306,-0.282967,-0.160219,0.0758207,12936.8,97.6441)">
-                    <path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear6);"/>
-                </g>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2189.33,-701.315)">
-                <circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2177.59,-657.491)">
-                <circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2169.76,-628.274)">
-                <circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2271.15,-656.072)">
-                <circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.355844,1.32803,-2197.16,-730.532)">
-                <circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2068.91,-256.376)">
-                <path d="M1499.26,757.787C1499.26,757.787 1497.37,756.489 1497,755.2C1496.71,754.182 1496.57,750.662 1496.54,750C1496.41,747.303 1499.21,745.644 1499.21,745.644L1490.01,745.835C1490.01,745.835 1493.15,745.713 1493.46,750C1493.51,750.661 1493.23,753.476 1493,755.2C1492.91,756.447 1491.2,757.668 1491.2,757.668L1499.26,757.787Z" style="fill:rgb(35,35,35);"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2049.34,-183.335)">
-                <path d="M1495,760L1495,744" style="fill:none;"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2049.34,-183.335)">
-                <path d="M1498.27,757.077C1498.27,757.077 1496.71,756.46 1496.65,754.8C1496.65,753.658 1496.64,753.281 1496.65,752.016C1496.62,751.334 1496.59,750.608 1496.65,749.949C1496.78,746.836 1498.5,746.156 1498.5,746.156L1491.46,745.931C1491.46,745.931 1493.37,746.719 1493.65,749.83C1493.71,750.489 1493.69,751.528 1493.65,752.209C1493.64,753.331 1493.64,753.413 1493.65,754.518C1493.68,756.334 1492.58,756.827 1492.58,756.827L1498.27,757.077Z" style="fill:rgb(35,35,35);"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2147.14,-208.37)">
-                <path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,0.311363,1.16202,-2147.14,-208.37)">
-                <path d="M1500.86,762.056C1500.86,762.056 1499.86,760.4 1503.09,757.456C1504.91,755.797 1507.33,754.151 1509.98,752.255C1514.82,748.79 1520.68,744.94 1526.52,741.049C1531.45,737.766 1536.38,734.479 1540.82,731.68C1544.52,729.349 1547.85,727.296 1550.54,725.8C1551.07,725.506 1551.6,725.329 1552.05,725.029C1554.73,723.257 1556.85,724.968 1556.85,724.968L1552.23,716.282C1552.23,716.282 1551.99,719.454 1550,720.997C1549.57,721.333 1549.15,721.741 1548.67,722.12C1546.2,724.053 1542.99,726.344 1539.39,728.867C1535.06,731.898 1530.13,735.166 1525.19,738.438C1519.35,742.314 1513.52,746.234 1508.49,749.329C1505.74,751.023 1503.28,752.577 1501.13,753.598C1497.99,755.086 1495.28,753.617 1495.28,753.617L1500.86,762.056Z" style="fill:rgb(35,35,35);"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,-0.311363,-1.16202,-1672.97,1561.28)">
-                <path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
-            </g>
-            <g transform="matrix(1.32803,-0.355844,-0.311363,-1.16202,-1672.97,1561.28)">
-                <path d="M1496.1,754.362C1496.1,754.362 1497.2,755.607 1501.13,753.598C1503.25,752.509 1505.74,751.023 1508.49,749.329C1513.52,746.234 1519.35,742.314 1525.19,738.438C1530.13,735.166 1534.94,731.832 1539.27,728.802C1542.87,726.279 1549.36,722.059 1549.81,721.75C1552.75,719.73 1552.18,718.196 1552.18,718.196L1555.28,724.152C1555.28,724.152 1553.77,722.905 1551.37,724.681C1550.93,725.006 1544.52,729.349 1540.82,731.68C1536.38,734.479 1531.45,737.766 1526.52,741.049C1520.68,744.94 1514.82,748.79 1509.98,752.255C1507.33,754.151 1504.89,755.771 1503.09,757.456C1499.47,760.841 1501.26,763.283 1501.26,763.283L1496.1,754.362Z" style="fill:#8795a1;"/>
-            </g>
-            <g transform="matrix(1.299,0,0,1.08306,-3394.18,-2084.88)">
-                <g transform="matrix(94.2338,0,0,94.1776,2827.58,2063)">
-                    <path d="M0.449,-0.7L0.177,-0.7C0.185,-0.682 0.197,-0.654 0.2,-0.648C0.205,-0.639 0.216,-0.628 0.239,-0.628L0.32,-0.628C0.332,-0.628 0.336,-0.62 0.334,-0.611L0.128,0L0.389,0C0.412,0 0.422,-0.01 0.427,-0.02L0.45,-0.071L0.255,-0.071C0.245,-0.071 0.239,-0.078 0.242,-0.09L0.449,-0.7Z" style="fill:#8795a1;fill-rule:nonzero;"/>
-                </g>
-                <g transform="matrix(94.2338,0,0,94.1776,2912.39,2063)">
-                    <path d="M0.214,-0.7L0.214,-0.015C0.215,-0.01 0.218,0 0.235,0L0.286,0L0.286,-0.672C0.286,-0.684 0.278,-0.7 0.257,-0.7L0.214,-0.7Z" style="fill:#8795a1;fill-rule:nonzero;"/>
-                </g>
-                <g transform="matrix(94.2338,0,0,94.1776,2987.78,2063)">
-                    <path d="M0.441,-0.7L0.155,-0.7C0.143,-0.7 0.133,-0.69 0.133,-0.678L0.133,-0.629L0.234,-0.629L0.234,-0.015C0.234,-0.01 0.237,0 0.254,0L0.305,0L0.305,-0.612C0.306,-0.621 0.313,-0.629 0.323,-0.629L0.379,-0.629C0.402,-0.629 0.413,-0.639 0.417,-0.648L0.441,-0.7Z" style="fill:#8795a1;fill-rule:nonzero;"/>
-                </g>
-                <g transform="matrix(94.2338,0,0,94.1776,3067.88,2063)">
-                    <path d="M0.422,0L0.343,0L0.28,-0.482L0.217,0L0.138,0L0.244,-0.7L0.283,-0.7C0.313,-0.7 0.318,-0.681 0.321,-0.662L0.422,0Z" style="fill:#8795a1;fill-rule:nonzero;"/>
-                </g>
-                <g transform="matrix(94.2338,0,0,94.1776,3148.92,2063)">
-                    <path d="M0.186,-0.7L0.186,0L0.325,0C0.374,0 0.413,-0.039 0.414,-0.088L0.414,-0.612C0.413,-0.661 0.374,-0.7 0.325,-0.7L0.186,-0.7ZM0.343,-0.108C0.343,-0.081 0.325,-0.071 0.305,-0.071L0.258,-0.071L0.258,-0.628L0.305,-0.628C0.325,-0.628 0.343,-0.618 0.343,-0.592L0.343,-0.108Z" style="fill:#8795a1;fill-rule:nonzero;"/>
-                </g>
-                <g transform="matrix(94.2338,0,0,94.1776,3233.73,2063)">
-                    <path d="M0.291,-0.071L0.291,-0.314C0.291,-0.323 0.299,-0.331 0.308,-0.331L0.338,-0.331C0.361,-0.331 0.371,-0.341 0.376,-0.35C0.379,-0.356 0.391,-0.385 0.399,-0.403L0.291,-0.403L0.291,-0.611C0.291,-0.621 0.298,-0.628 0.308,-0.628L0.366,-0.628C0.389,-0.628 0.4,-0.639 0.404,-0.648L0.428,-0.7L0.241,-0.7C0.229,-0.7 0.22,-0.691 0.219,-0.68L0.219,0L0.379,0C0.402,0 0.413,-0.01 0.418,-0.019C0.421,-0.025 0.433,-0.053 0.441,-0.071L0.291,-0.071Z" style="fill:#8795a1;fill-rule:nonzero;"/>
-                </g>
-                <g transform="matrix(94.2338,0,0,94.1776,3318.54,2063)">
-                    <path d="M0.283,-0.071L0.283,-0.678C0.283,-0.69 0.273,-0.699 0.261,-0.7L0.211,-0.7L0.211,0L0.383,0C0.406,0 0.417,-0.01 0.422,-0.019C0.425,-0.025 0.437,-0.053 0.445,-0.071L0.283,-0.071Z" style="fill:#8795a1;fill-rule:nonzero;"/>
-                </g>
-            </g>
-        </g>
-    </g>
-    <defs>
-        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,155.247,-155.247,-41.5984,201.516,76.8392)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
-        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(155.247,-41.5984,41.5984,155.247,110.08,195.509)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
-        <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,-113.649,113.649,-113.649,258.31,215.618)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
-        <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-155.247,41.5984,-41.5984,-155.247,220.914,144.546)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
-        <linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,113.649,113.649,113.649,206.837,124.661)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
-        <linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,-155.247,-155.247,41.5984,152.054,262.8)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
-    </defs>
-</svg>

console/src/component-themes.scss

@@ -7,6 +7,7 @@
 @import 'src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component';
 @import 'src/app/modules/meta-layout/meta';
 @import 'src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card';
+@import 'src/app/pages/users/user-detail/memberships/memberships.component';
 
 @mixin component-themes($theme) {
   @include avatar-theme($theme);
@@ -15,6 +16,7 @@
   @include detail-layout-theme($theme);
   @include sidenav-list-theme($theme);
   @include application-grid-theme($theme);
+  @include membership-theme($theme);
   @include changes-theme($theme);
   @include meta-theme($theme);
   @include theme-card($theme);

console/src/index.html

@@ -23,8 +23,7 @@
     <meta property="og:description" content="Console Management Platform for ZITADEL IAM" />
     <meta property="description" content="Console Management Platform for ZITADEL IAM" />
 
-    <meta property="og:image"
+    <meta property="og:image" content="https://console.zitadel.dev/assets/images/zitadel-logo-dark.svg" />
-        content="https://console.zitadel.dev/assets/images/zitadel-logo-oneline-lightdesign.svg" />
 </head>
 
 <body>

console/tslint.json

@@ -65,9 +65,6 @@
     "variable-name": [true, "check-format", "ban-keywords", "allow-leading-underscore"],
     "whitespace": [true, "check-branch", "check-decl", "check-operator", "check-separator", "check-type"],
     "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
     "no-input-rename": true,
     "no-output-rename": true,
     "use-life-cycle-interface": true,