fix(console): cleanup user detail and member components, user/me redirect, permission guards, filter, org policy guard, user table, scss cleanup (#808)

* fix: remove user.write guard for filtering

* border color

* fix user routing from member tables

* idp detail layout

* generic contact component

* fix redirect to auth user, user grant disable

* disable policy action without permission, i18n

* user-create flex fix, contact ng-content

* rm unused styles

* sidenav divider

* lint

* chore(deps-dev): bump @angular/cli from 10.1.3 to 10.1.4 in /console (#806)

* fix: user session with external login (#797)

* fix: user session with external login

* fix: tests

* fix: tests

* fix: change idp config name

* fix(container): stop copying / and instead only copy zitadel (#691)

* chore: stop copying / and instead only copy zitadel

* Update Dockerfile

* Update release.yml

* enable anchors debug

* fix(container): don't copy alpine content into scratch execpt pwd

* chore: remove need step

* merge master

* chore(deps-dev): bump @angular/cli from 10.1.3 to 10.1.4 in /console

Bumps [@angular/cli](https://github.com/angular/angular-cli) from 10.1.3 to 10.1.4.
- [Release notes](https://github.com/angular/angular-cli/releases)
- [Commits](https://github.com/angular/angular-cli/compare/v10.1.3...v10.1.4)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @angular/language-service from 10.1.3 to 10.1.4 in /console (#805)

* fix: user session with external login (#797)

* fix: user session with external login

* fix: tests

* fix: tests

* fix: change idp config name

* fix(container): stop copying / and instead only copy zitadel (#691)

* chore: stop copying / and instead only copy zitadel

* Update Dockerfile

* Update release.yml

* enable anchors debug

* fix(container): don't copy alpine content into scratch execpt pwd

* chore: remove need step

* merge master

* chore(deps-dev): bump @angular/language-service in /console

Bumps [@angular/language-service](https://github.com/angular/angular/tree/HEAD/packages/language-service) from 10.1.3 to 10.1.4.
- [Release notes](https://github.com/angular/angular/releases)
- [Changelog](https://github.com/angular/angular/blob/master/CHANGELOG.md)
- [Commits](https://github.com/angular/angular/commits/10.1.4/packages/language-service)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump codelyzer from 6.0.0 to 6.0.1 in /console (#804)

* fix: user session with external login (#797)

* fix: user session with external login

* fix: tests

* fix: tests

* fix: change idp config name

* fix(container): stop copying / and instead only copy zitadel (#691)

* chore: stop copying / and instead only copy zitadel

* Update Dockerfile

* Update release.yml

* enable anchors debug

* fix(container): don't copy alpine content into scratch execpt pwd

* chore: remove need step

* merge master

* chore(deps-dev): bump codelyzer from 6.0.0 to 6.0.1 in /console

Bumps [codelyzer](https://github.com/mgechev/codelyzer) from 6.0.0 to 6.0.1.
- [Release notes](https://github.com/mgechev/codelyzer/releases)
- [Changelog](https://github.com/mgechev/codelyzer/blob/master/CHANGELOG.md)
- [Commits](https://github.com/mgechev/codelyzer/commits/6.0.1)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @angular-devkit/build-angular from 0.1000.8 to 0.1001.4 in /console (#803)

* fix: user session with external login (#797)

* fix: user session with external login

* fix: tests

* fix: tests

* fix: change idp config name

* fix(container): stop copying / and instead only copy zitadel (#691)

* chore: stop copying / and instead only copy zitadel

* Update Dockerfile

* Update release.yml

* enable anchors debug

* fix(container): don't copy alpine content into scratch execpt pwd

* chore: remove need step

* merge master

* chore(deps-dev): bump @angular-devkit/build-angular in /console

Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1000.8 to 0.1001.4.
- [Release notes](https://github.com/angular/angular-cli/releases)
- [Commits](https://github.com/angular/angular-cli/commits)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Max Peintner <max@caos.ch>

* chore(deps): bump uuid from 8.3.0 to 8.3.1 in /console (#802)

* fix: user session with external login (#797)

* fix: user session with external login

* fix: tests

* fix: tests

* fix: change idp config name

* fix(container): stop copying / and instead only copy zitadel (#691)

* chore: stop copying / and instead only copy zitadel

* Update Dockerfile

* Update release.yml

* enable anchors debug

* fix(container): don't copy alpine content into scratch execpt pwd

* chore: remove need step

* merge master

* chore(deps): bump uuid from 8.3.0 to 8.3.1 in /console

Bumps [uuid](https://github.com/uuidjs/uuid) from 8.3.0 to 8.3.1.
- [Release notes](https://github.com/uuidjs/uuid/releases)
- [Changelog](https://github.com/uuidjs/uuid/blob/master/CHANGELOG.md)
- [Commits](https://github.com/uuidjs/uuid/compare/v8.3.0...v8.3.1)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* create memberstable as common component

* iam member cleanup

* iam + org m table, user table service user avatar

* toast config

* fix selection emitter

* fix project grant table width

* project grant members refactor

* theme optimizations

* member table col delete

* lint

* fix table row color

* refactor grey color

* lint scss

* org list redirect on click, fix user table undef

* refresh table after grant add

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>

console/package.json

@@ -41,18 +41,18 @@
     "rxjs": "~6.6.3",
     "ts-protoc-gen": "^0.13.0",
     "tslib": "^2.0.1",
-    "uuid": "^8.3.0",
+    "uuid": "^8.3.1",
     "zone.js": "~0.11.1"
   },
   "devDependencies": {
-    "@angular/cli": "~10.1.3",
+    "@angular-devkit/build-angular": "~0.1001.4",
-    "@angular-devkit/build-angular": "~0.1000.8",
+    "@angular/cli": "~10.1.4",
     "@angular/compiler-cli": "~10.0.11",
     "@types/jasmine": "~3.5.13",
-    "@angular/language-service": "~10.1.3",
+    "@angular/language-service": "~10.1.4",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^14.11.2",
-    "codelyzer": "^6.0.0",
+    "codelyzer": "^6.0.1",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~6.0.0",
     "karma": "~5.2.3",

console/src/app/app.component.scss

@@ -208,16 +208,16 @@
   margin: .5rem 0;
 
   span {
-    border: 1px solid #ffffff10;
+    border: 1px solid #81868a40;
     padding: 2px 1rem;
     border-radius: 50vw;
-    color: #8795a1;
+    color: var(--grey);
     font-size: 12px;
   }
 
   .line {
     display: block;
-    background-color: #ffffff10;
+    background-color: #81868a40;
     height: 1px;
     margin: .5rem 0;
     flex: 1;
@@ -236,7 +236,7 @@
   .show-all {
     $primary: map-get($theme, primary);
     color: mat-color($primary, 300) !important;
-    border-bottom: 2px solid #8795a1;
+    border-bottom: 2px solid var(--grey);
     margin-bottom: .5rem;
   }
   /* stylelint-enable */

console/src/app/guards/user.guard.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+
+import { GrpcAuthService } from '../services/grpc-auth.service';
+
+
+@Injectable({
+    providedIn: 'root',
+})
+export class UserGuard implements CanActivate {
+    constructor(private authService: GrpcAuthService, private router: Router) { }
+
+    public canActivate(
+        route: ActivatedRouteSnapshot,
+        state: RouterStateSnapshot,
+    ): Observable<boolean> | Promise<boolean> | boolean {
+        return this.authService.user.pipe(
+            map(user => user.id !== route.params.id),
+            tap((isNotMe) => {
+                if (!isNotMe) {
+                    this.router.navigate(['/users', 'me']);
+                }
+            }),
+        );
+    }
+}

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

@@ -16,7 +16,7 @@
             </app-avatar>
 
             <div class="col">
-                <span class="title">{{user.displayName ? user.displayName : user.userName}} </span>
+                <span class="user-title">{{user.displayName ? user.displayName : user.userName}} </span>
                 <span class="loginname">{{user.loginName}}</span>
                 <span class="email">{{'USER.STATE.'+user.authState | translate}}</span>
             </div>
@@ -28,7 +28,7 @@
                 <i class="las la-user-plus"></i>
             </div>
             <span class="col">
-                <span class="title">{{'USER.ADDACCOUNT' | translate}}</span>
+                <span class="user-title">{{'USER.ADDACCOUNT' | translate}}</span>
             </span>
             <span class="fill-space"></span>
             <mat-icon>keyboard_arrow_right</mat-icon>

console/src/app/modules/accounts-card/accounts-card.component.scss

@@ -41,9 +41,9 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    border-top: 1px solid #ffffff30;
-    border-bottom: 1px solid #ffffff30;
     padding: .5rem 0;
+    border-top: 1px solid rgba(#8795a1, .3);
+    border-bottom: 1px solid rgba(#8795a1, .3);
 
     .row {
       padding: .5rem;
@@ -84,7 +84,7 @@
         display: flex;
         flex-direction: column;
 
-        .title {
+        .user-title {
           font-weight: 500;
           font-size: .9rem;
           line-height: 1rem;
@@ -92,7 +92,7 @@
 
         .email,
         .loginname {
-          color: #8795a1;
+          color: var(--grey);
           font-size: .8rem;
           line-height: 1rem;
         }

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

@@ -3,7 +3,7 @@
 }
 
 .desc {
-  color: #8795a1;
+  color: var(--grey);
   font-size: .9rem;
 }
 

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

@@ -23,7 +23,6 @@ export class MemberCreateDialogComponent {
     private grantId: string = '';
     public preselectedUsers: Array<UserView.AsObject> = [];
 
-
     public creationType!: CreationType;
     public creationTypes: CreationType[] = [
         CreationType.IAM,

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

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -25,6 +25,7 @@ import { MemberCreateDialogComponent } from './member-create-dialog.component';
         MatFormFieldModule,
         MatSelectModule,
         FormsModule,
+        ReactiveFormsModule,
         SearchUserAutocompleteModule,
         SearchRolesAutocompleteModule,
         SearchProjectAutocompleteModule,

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

@@ -34,7 +34,7 @@
 
     .desc {
       font-size: .9rem;
-      color: #8795a1;
+      color: var(--grey);
     }
   }
 

console/src/app/modules/card/card.scss

@@ -11,7 +11,7 @@
 
   .card {
     background-color: $primary-dark;
-    transition: background-color .4s ease-in-out;
+    transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
     border: 1px solid rgba($border-color, .2);
     box-sizing: border-box;
     border-radius: .5rem;

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

@@ -21,13 +21,13 @@
       flex-direction: column;
 
       .editor {
-        color: #8795a1;
+        color: var(--grey);
         font-size: 12px;
         align-self: flex-end;
       }
 
       .seq {
-        color: #8795a1;
+        color: var(--grey);
         font-size: 12px;
         align-self: flex-end;
       }
@@ -43,7 +43,7 @@
 
       &.change-item-back {
         background-color: rgba($primary-dark, .93);
-        transition: background-color .4s ease-in-out;
+        transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
       }
     }
 
@@ -55,7 +55,7 @@
 
     .end-container {
       font-size: 12px;
-      color: #8795a1;
+      color: var(--grey);
     }
   }
 }

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

@@ -8,13 +8,19 @@
             <ng-container *ngIf="totalResult < 10; else compact">
                 <ng-container *ngFor="let member of membersSubject | async; index as i">
                     <div @animate (click)="emitShowDetail()" class="avatar-circle"
-                        matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}"
+                        matTooltip="{{ member.displayName }} | {{member.rolesList?.join(' ')}}"
                         [ngStyle]="{'z-index': 100 - i}">
-                        <app-avatar *ngIf="member && (member.displayName || (member.firstName && member.lastName))"
+                        <app-avatar
+                            *ngIf="member && member.displayName && member.firstName && member.lastName; else cog"
                             class="avatar dontcloseonclick"
                             [name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)"
                             [size]="32">
                         </app-avatar>
+                        <ng-template #cog>
+                            <div class="sa-icon">
+                                <i class="las la-user-cog"></i>
+                            </div>
+                        </ng-template>
                     </div>
                 </ng-container>
             </ng-container>

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

@@ -9,7 +9,7 @@
 
   .sub-header {
     font-size: .8rem;
-    color: #8795a1;
+    color: var(--grey);
   }
 
   .people {
@@ -65,6 +65,17 @@
         .avatar {
           pointer-events: none;
         }
+
+        .sa-icon {
+          display: block;
+          width: 32px;
+          margin: 0 .5rem;
+
+          i {
+            margin: auto;
+            font-size: 1.2rem;
+          }
+        }
       }
 
       .margin-neg {

console/src/app/modules/detail-layout/detail-layout.component.scss

@@ -37,20 +37,16 @@
       }
 
       .head {
-        display: flex;
-        align-items: center;
         margin-bottom: 2rem;
-        flex-wrap: wrap;
 
         h1 {
           font-size: 1.2rem;
         }
 
         .desc {
-          width: 100%;
           display: block;
           font-size: .9rem;
-          color: #8795a1;
+          color: var(--grey);
         }
       }
     }

console/src/app/modules/idp-create/idp-create.component.scss

@@ -37,7 +37,7 @@
     flex-basis: 100%;
     margin: 0 .5rem;
     margin-bottom: 1rem;
-    color: #8795a1;
+    color: var(--grey);
   }
 
   .formfield {

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

@@ -26,7 +26,7 @@ tr {
   outline: none;
 
   &.disabled * {
-    color: #8795a1;
+    color: var(--grey);
   }
 }
 

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

@@ -19,50 +19,50 @@
                 </div>
             </ng-container>
 
-        <button color="primary" mat-raised-button class="continue-button" [disabled]="idpForm.invalid" type="submit">
+            <div class="btn-wrapper">
+                <button color="primary" mat-raised-button class="continue-button" [disabled]="idpForm.invalid"
+                    type="submit">
                     {{ 'ACTIONS.SAVE' | translate }}
                 </button>
+            </div>
         </form>
 
-    <h2 *ngIf="oidcConfigForm">{{'IDP.DETAIL.OIDC.TITLE' | translate}}</h2>
+        <ng-container *ngIf="oidcConfigForm">
+            <h2>{{'IDP.DETAIL.OIDC.TITLE' | translate}}</h2>
+            <p>{{'IDP.DETAIL.OIDC.DESCRIPTION' | translate}}</p>
 
-    <form (ngSubmit)="updateOidcConfig()" *ngIf="oidcConfigForm">
+            <form (ngSubmit)="updateOidcConfig()">
                 <ng-container [formGroup]="oidcConfigForm">
                     <div class="content">
                         <mat-form-field appearance="outline" class="formfield">
                             <mat-label>{{ 'IDP.ISSUER' | translate }}</mat-label>
                             <input matInput formControlName="issuer" />
                         </mat-form-field>
-            </div>
-            <div class="content">
                         <mat-form-field appearance="outline" class="formfield">
                             <mat-label>{{ 'IDP.CLIENTID' | translate }}</mat-label>
                             <input matInput formControlName="clientId" />
                         </mat-form-field>
-            </div>
+                        <mat-checkbox class="desc" [(ngModel)]="showIdSecretSection"
-            <div class="content">
+                            [ngModelOptions]="{standalone: true}">
-              <mat-checkbox class="desc" [(ngModel)]="showIdSecretSection" [ngModelOptions]="{standalone: true}">
                             Update Client Secret
                         </mat-checkbox>
                         <mat-form-field appearance="outline" class="formfield" *ngIf="showIdSecretSection">
                             <mat-label>{{ 'IDP.CLIENTSECRET' | translate }}</mat-label>
                             <input matInput formControlName="clientSecret" />
                         </mat-form-field>
-            </div>
+                        <mat-form-field appearance="outline" class="formfield fullwidth">
-            <div class="content">
-              <mat-form-field appearance="outline" class="formfield">
                             <mat-label>{{ 'IDP.SCOPESLIST' | translate }}</mat-label>
                             <mat-chip-list #chipScopesList aria-label="scope selection">
-                  <mat-chip class="chip" *ngFor="let scope of scopesList?.value" selectable="false" removable
+                                <mat-chip class="chip" *ngFor="let scope of scopesList?.value" selectable="false"
-                            (removed)="removeScope(scope)">
+                                    removable (removed)="removeScope(scope)">
                                     {{scope}} <mat-icon matChipRemove>cancel</mat-icon>
                                 </mat-chip>
-                  <input [matChipInputFor]="chipScopesList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                                <input [matChipInputFor]="chipScopesList"
-                         [matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addScope($event)">
+                                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
+                                    (matChipInputTokenEnd)="addScope($event)">
                             </mat-chip-list>
                         </mat-form-field>
-            </div>
+
-            <div class="content">
                         <mat-form-field class="formfield" appearance="outline">
                             <mat-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</mat-label>
                             <mat-select formControlName="idpDisplayNameMapping">
@@ -82,10 +82,14 @@
                     </div>
                 </ng-container>
 
-        <button color="primary" mat-raised-button class="continue-button" [disabled]="oidcConfigForm.invalid" type="submit">
+                <div class="btn-wrapper">
+                    <button color="primary" mat-raised-button class="continue-button"
+                        [disabled]="oidcConfigForm.invalid" type="submit">
                         {{ 'ACTIONS.SAVE' | translate }}
                     </button>
+                </div>
             </form>
+        </ng-container>
     </div>
 
 </app-detail-layout>

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

@@ -9,6 +9,7 @@
 
 .content {
   display: flex;
+  flex-direction: row;
   margin: 0 -.5rem;
   flex-wrap: wrap;
 
@@ -16,19 +17,27 @@
     flex-basis: 100%;
     margin: 0 .5rem;
     margin-bottom: 1rem;
-    color: #8795a1;
+    color: var(--grey);
   }
 
   .formfield {
-    flex: 1 0 auto;
+    flex: 1 1 auto;
     margin: 0 .5rem;
 
+    &.fullwidth {
+      flex-basis: 100%;
+    }
+
     @media only screen and (max-width: 450px) {
       flex-basis: 100%;
     }
   }
 }
 
+.btn-wrapper {
+  display: flex;
+  justify-content: flex-end;
+
   .continue-button {
     margin-bottom: 4rem;
     display: block;
@@ -39,3 +48,4 @@
       margin-bottom: 2rem;
     }
   }
+}

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

@@ -0,0 +1,98 @@
+<app-refresh-table *ngIf="dataSource" (refreshed)="changePage()" [dataSize]="dataSource.totalResult"
+    [timestamp]="dataSource.viewTimestamp" [selection]="selection" [loading]="dataSource?.loading$ | async">
+
+    <ng-container actions *ngIf="selection.hasValue()">
+        <ng-content select="[selectactions]"></ng-content>
+    </ng-container>
+
+    <div actions>
+        <ng-content select="[writeactions]"></ng-content>
+    </div>
+
+    <div class="table-wrapper">
+        <table mat-table class="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)">
+                        <app-avatar *ngIf="row?.displayName && row.firstName && row.lastName; else cog" class="avatar"
+                            [name]="row.displayName" [size]="32">
+                        </app-avatar>
+                        <ng-template #cog>
+                            <div class="sa-icon">
+                                <i class="las la-user-cog"></i>
+                            </div>
+                        </ng-template>
+                    </mat-checkbox>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="userId">
+                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERID' | translate }} </th>
+                <td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
+                    {{member.userId}} </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="actions" stickyEnd>
+                <th mat-header-cell *matHeaderCellDef></th>
+                <td mat-cell *matCellDef="let view">
+                    <button matTooltip="{{'ACTIONS.REMOVE' | translate}}" color="warn"
+                        (click)="triggerDeleteMember(view)" mat-icon-button><i class="las la-trash"></i></button>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="roles">
+                <th mat-header-cell *matHeaderCellDef> {{ 'ROLESLABEL' | translate }} </th>
+                <td 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]="disableWrite"
+                            (selectionChange)="updateRoles.emit({member: member, change: $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="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
+            </tr>
+        </table>
+    </div>
+    <mat-paginator *ngIf="dataSource" class="paginator" #paginator [pageSize]="INITIALPAGESIZE"
+        [length]="dataSource.totalResult" [pageSizeOptions]="[25, 50, 100, 250]" (page)="changePage($event)">
+    </mat-paginator>
+</app-refresh-table>

console/src/app/modules/members-table/members-table.component.scss

@@ -1,9 +1,14 @@
+.icon-button {
+  margin-right: .5rem;
+}
 
 .table-wrapper {
-  overflow: auto;
+  overflow-x: auto;
 
   .table,
   .paginator {
+    width: 100%;
+
     td,
     th {
       padding: .5rem;
@@ -26,10 +31,27 @@
       width: 50px;
       max-width: 50px;
     }
+  }
 
-    .role {
+  tr {
-      display: inline-block;
+    button {
-      margin: .25rem;
+      visibility: hidden;
+    }
+
+    &:hover {
+      button {
+        visibility: visible;
+      }
+    }
+  }
+
+  .sa-icon {
+    display: block;
+    width: 32px;
+    margin: 0 .5rem;
+
+    i {
+      margin: auto;
     }
   }
 }

console/src/app/modules/members-table/members-table.component.spec.ts

@@ -4,15 +4,15 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-import { ProjectGrantMembersComponent } from './project-grant-members.component';
+import { MembersTableComponent } from './members-table.component';
 
-describe('ProjectMembersComponent', () => {
+describe('MembersTableComponent', () => {
-    let component: ProjectGrantMembersComponent;
+    let component: MembersTableComponent;
-    let fixture: ComponentFixture<ProjectGrantMembersComponent>;
+    let fixture: ComponentFixture<MembersTableComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [ProjectGrantMembersComponent],
+            declarations: [MembersTableComponent],
             imports: [
                 NoopAnimationsModule,
                 MatPaginatorModule,
@@ -23,7 +23,7 @@ describe('ProjectMembersComponent', () => {
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(ProjectGrantMembersComponent);
+        fixture = TestBed.createComponent(MembersTableComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });

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

@@ -0,0 +1,83 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatSelectChange } from '@angular/material/select';
+import { MatTable } from '@angular/material/table';
+import { Observable, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { IamMembersDataSource } from 'src/app/pages/iam/iam-members/iam-members-datasource';
+import { OrgMembersDataSource } from 'src/app/pages/orgs/org-members/org-members-datasource';
+import { IamMemberView } from 'src/app/proto/generated/admin_pb';
+import { OrgMemberView, ProjectMemberView } from 'src/app/proto/generated/management_pb';
+
+import { ProjectMembersDataSource } from '../project-members/project-members-datasource';
+
+type View = OrgMemberView.AsObject | ProjectMemberView.AsObject | IamMemberView.AsObject;
+type MemberDatasource = OrgMembersDataSource | ProjectMembersDataSource | IamMembersDataSource;
+
+@Component({
+    selector: 'app-members-table',
+    templateUrl: './members-table.component.html',
+    styleUrls: ['./members-table.component.scss'],
+})
+export class MembersTableComponent implements OnInit, OnDestroy {
+    public INITIALPAGESIZE: number = 25;
+    @Input() public disableWrite: boolean = false;
+    @Input() public canDelete: boolean = false;
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    @ViewChild(MatTable) public table!: MatTable<View>;
+    @Input() public dataSource!: MemberDatasource;
+    public selection: SelectionModel<any> = new SelectionModel<any>(true, []);
+    @Input() public memberRoleOptions: string[] = [];
+    @Input() public factoryLoadFunc!: Function;
+    @Input() public refreshTrigger!: Observable<void>;
+    @Output() public updateRoles: EventEmitter<{ member: View, change: MatSelectChange; }> = new EventEmitter();
+    @Output() public changedSelection: EventEmitter<any[]> = new EventEmitter();
+    @Output() public deleteMember: EventEmitter<View> = new EventEmitter();
+
+    private destroyed: Subject<void> = new Subject();
+
+    /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+    public displayedColumns: string[] = ['select', 'userId', 'firstname', 'lastname', 'username', 'email', 'roles'];
+
+    constructor() {
+        this.selection.changed.pipe(takeUntil(this.destroyed)).subscribe(_ => {
+            this.changedSelection.emit(this.selection.selected);
+        });
+    }
+
+    public ngOnInit(): void {
+        this.refreshTrigger.pipe(takeUntil(this.destroyed)).subscribe(() => {
+            this.changePage(this.paginator);
+        });
+
+        if (this.canDelete) {
+            this.displayedColumns.push('actions');
+        }
+    }
+
+    public ngOnDestroy(): void {
+        this.destroyed.next();
+    }
+
+    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 changePage(event?: PageEvent | MatPaginator): any {
+        this.selection.clear();
+        return this.factoryLoadFunc(event ?? this.paginator);
+    }
+
+    public triggerDeleteMember(member: any): void {
+        this.deleteMember.emit(member);
+    }
+}

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

@@ -0,0 +1,45 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { AvatarModule } from '../avatar/avatar.module';
+import { RefreshTableModule } from '../refresh-table/refresh-table.module';
+import { MembersTableComponent } from './members-table.component';
+
+@NgModule({
+    declarations: [
+        MembersTableComponent,
+    ],
+    imports: [
+        CommonModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        MatCheckboxModule,
+        MatIconModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatTooltipModule,
+        FormsModule,
+        TranslateModule,
+        RefreshTableModule,
+        RouterModule,
+        AvatarModule,
+        MatButtonModule,
+    ],
+    exports: [
+        MembersTableComponent,
+    ],
+})
+export class MembersTableModule { }

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

@@ -2,7 +2,7 @@
   display: flex;
   height: 100%;
   overflow-x: hidden;
-  transition: all .2s ease-in-out;
+  transition: all .3s cubic-bezier(.645, .045, .355, 1);
 
   .main-content {
     display: relative;

console/src/app/modules/password-complexity-view/password-complexity-view.component.scss

@@ -1,6 +1,7 @@
 
 .validation-col {
-  display: flex wrap;
+  display: flex;
+  flex-wrap: wrap;
   padding: 1rem 0;
   width: 100%;
 
@@ -16,7 +17,7 @@
 
     span {
       font-size: 14px;
-      color: #8795a1;
+      color: var(--grey);
     }
 
     .sp-wrapper {

console/src/app/modules/policies/login-policy/add-idp-dialog/add-idp-dialog.component.scss

@@ -3,7 +3,7 @@
 }
 
 .desc {
-  color: #8795a1;
+  color: var(--grey);
   font-size: .9rem;
 }
 

console/src/app/modules/policies/login-policy/login-policy.component.scss

@@ -10,7 +10,7 @@
     padding: .5rem 0;
 
     .left-desc {
-      color: #8795a1;
+      color: var(--grey);
       font-size: .9rem;
     }
 
@@ -52,7 +52,7 @@
     justify-content: center;
     margin: .5rem;
     padding: 10px;
-    border: 1px solid #8795a1;
+    border: 1px solid var(--grey);
     border-radius: .5rem;
     cursor: pointer;
     position: relative;

console/src/app/modules/policies/password-age-policy/password-age-policy.component.scss

@@ -10,7 +10,7 @@
     padding: .5rem 0;
 
     .left-desc {
-      color: #8795a1;
+      color: var(--grey);
       font-size: .9rem;
     }
 

console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.scss

@@ -10,7 +10,7 @@
     padding: .5rem 0;
 
     .left-desc {
-      color: #8795a1;
+      color: var(--grey);
       font-size: .9rem;
     }
 

console/src/app/modules/policies/password-iam-policy/password-iam-policy.component.scss

@@ -10,7 +10,7 @@
     padding: .5rem 0;
 
     .left-desc {
-      color: #8795a1;
+      color: var(--grey);
       font-size: .9rem;
     }
 

console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.scss

@@ -11,7 +11,7 @@
     padding: .5rem 0;
 
     .left-desc {
-      color: #8795a1;
+      color: var(--grey);
       font-size: .9rem;
     }
 

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

@@ -1,95 +1,25 @@
 <app-detail-layout *ngIf="project" [backRouterLink]="[ '/projects', project?.projectId]"
     title="{{projectName}} {{ 'PROJECT.MEMBER.TITLE' | translate }}"
     description="{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}">
-    <app-refresh-table *ngIf="project" (refreshed)="changePage()" [dataSize]="dataSource.totalResult"
+    <app-members-table *ngIf="project" [dataSource]="dataSource" [memberRoleOptions]="memberRoleOptions"
-        [timestamp]="dataSource.viewTimestamp" [selection]="selection" [loading]="dataSource?.loading$ | async">
+        (updateRoles)="updateRoles($event.member, $event.change)" [factoryLoadFunc]="changePageFactory"
-        <ng-template appHasRole actions
+        (changedSelection)="selection = $event" [refreshTrigger]="changePage"
+        [canDelete]="['project.member.delete', 'project.member.delete:'+project.projectId] | hasRole | async"
+        (deleteMember)="removeProjectMember($event)">
+        <ng-template appHasRole selectactions
             [appHasRole]="['project.member.delete:' + project.projectId, 'project.member.delete']">
             <button (click)="removeProjectMemberSelection()" color="warn"
-                matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
+                matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="del-button" mat-raised-button>
-                *ngIf="selection.hasValue()">
                 <i class="las la-trash"></i>
+                {{'ACTIONS.SELECTIONDELETE' | translate}}
             </button>
         </ng-template>
-        <ng-template appHasRole actions
+        <ng-template appHasRole writeactions
             [appHasRole]="['project.member.write:'+project.projectId,'project.member.write']">
-            <a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
+            <a color="primary" (click)="openAddMember()" color="primary" mat-raised-button>
                 <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
             </a>
         </ng-template>
-
+    </app-members-table>
-        <div class="table-wrapper">
-            <table mat-table class="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="userId">
-                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERID' | translate }} </th>
-                    <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                        {{member.userId}} </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 mat-cell *matCellDef="let member">
-                        <mat-form-field class="form-field" appearance="outline" *ngIf="project">
-                            <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">
-                                    {{ role }}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                    </td>
-                </ng-container>
-
-                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
-                </tr>
-            </table>
-
-            <mat-paginator *ngIf="dataSource" class="paginator" #paginator [pageSize]="INITIALPAGESIZE"
-                [length]="dataSource.totalResult" [pageSizeOptions]="[25, 50, 100, 250]" (page)="changePage($event)">
-            </mat-paginator>
-        </div>
-    </app-refresh-table>
 </app-detail-layout>
+<!-- TODO: check for both project.member and project.grant.member permissions -->

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

@@ -1,40 +1,7 @@
-.icon-button {
+.del-button {
   margin-right: .5rem;
 }
 
-.table-wrapper {
+:root {
-  overflow-x: 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;
-    }
-
-    .selection {
-      width: 50px;
-      max-width: 50px;
-    }
-  }
-}
-
-.pointer {
-  outline: none;
-  cursor: pointer;
 }

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

@@ -1,12 +1,18 @@
-import { SelectionModel } from '@angular/cdk/collections';
+import { Component, EventEmitter } from '@angular/core';
-import { Component, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { PageEvent } from '@angular/material/paginator';
 import { MatSelectChange } from '@angular/material/select';
-import { MatTable } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 import { take } from 'rxjs/operators';
-import { ProjectGrantView, ProjectMember, ProjectType, ProjectView, UserView } from 'src/app/proto/generated/management_pb';
+import {
+    ProjectGrantMemberView,
+    ProjectGrantView,
+    ProjectMember,
+    ProjectMemberView,
+    ProjectType,
+    ProjectView,
+    UserView,
+} from 'src/app/proto/generated/management_pb';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
@@ -23,18 +29,14 @@ export class ProjectMembersComponent {
     public INITIALPAGESIZE: number = 25;
     public project!: ProjectView.AsObject | ProjectGrantView.AsObject;
     public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
-    public disabled: boolean = false;
     public grantId: string = '';
     public projectName: string = '';
-    @ViewChild(MatPaginator) public paginator!: MatPaginator;
-    @ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
     public dataSource!: ProjectMembersDataSource;
-    public selection: SelectionModel<ProjectMember.AsObject> = new SelectionModel<ProjectMember.AsObject>(true, []);
     public memberRoleOptions: string[] = [];
 
-    /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+    public changePageFactory!: Function;
-    public displayedColumns: string[] = ['select', 'userId', 'firstname', 'lastname', 'username', 'email', 'roles'];
+    public changePage: EventEmitter<void> = new EventEmitter();
-
+    public selection: Array<ProjectMemberView.AsObject | ProjectGrantMemberView.AsObject> = [];
     constructor(
         private mgmtService: ManagementService,
         private dialog: MatDialog,
@@ -53,6 +55,16 @@ export class ProjectMembersComponent {
                         this.projectName = this.project.name;
                         this.dataSource = new ProjectMembersDataSource(this.mgmtService);
                         this.dataSource.loadMembers(this.project.projectId, this.projectType, 0, this.INITIALPAGESIZE);
+
+                        this.changePageFactory = (event?: PageEvent) => {
+                            return this.dataSource.loadMembers(
+                                this.project.projectId,
+                                this.projectType,
+                                event?.pageIndex ?? 0,
+                                event?.pageSize ?? this.INITIALPAGESIZE,
+                                this.grantId,
+                            );
+                        };
                     });
                 } else if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
                     this.mgmtService.GetGrantedProjectByID(params.projectid, params.grantid).then(project => {
@@ -65,6 +77,16 @@ export class ProjectMembersComponent {
                             this.INITIALPAGESIZE,
                             this.grantId,
                         );
+
+                        this.changePageFactory = (event?: PageEvent) => {
+                            return this.dataSource.loadMembers(
+                                this.project.projectId,
+                                this.projectType,
+                                event?.pageIndex ?? 0,
+                                event?.pageSize ?? this.INITIALPAGESIZE,
+                                this.grantId,
+                            );
+                        };
                     });
                 }
             });
@@ -88,7 +110,7 @@ export class ProjectMembersComponent {
     }
 
     public removeProjectMemberSelection(): void {
-        Promise.all(this.selection.selected.map(member => {
+        Promise.all(this.selection.map(member => {
             if (this.projectType === ProjectType.PROJECTTYPE_OWNED) {
                 return this.mgmtService.RemoveProjectMember(this.project.projectId, member.userId).then(() => {
                     this.toast.showInfo('PROJECT.TOAST.MEMBERREMOVED', true);
@@ -105,21 +127,32 @@ export class ProjectMembersComponent {
             }
         })).then(() => {
             setTimeout(() => {
-                this.changePage();
+                this.changePage.emit();
             }, 1000);
         });
     }
 
-    public isAllSelected(): boolean {
+    public removeProjectMember(member: ProjectMemberView.AsObject | ProjectGrantMemberView.AsObject): void {
-        const numSelected = this.selection.selected.length;
+        if (this.projectType === ProjectType.PROJECTTYPE_OWNED) {
-        const numRows = this.dataSource.membersSubject.value.length;
+            this.mgmtService.RemoveProjectMember(this.project.projectId, member.userId).then(() => {
-        return numSelected === numRows;
+                setTimeout(() => {
+                    this.changePage.emit();
+                }, 1000);
+                this.toast.showInfo('PROJECT.TOAST.MEMBERREMOVED', true);
+            }).catch(error => {
+                this.toast.showError(error);
+            });
+        } else if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
+            this.mgmtService.RemoveProjectGrantMember(this.project.projectId, this.grantId,
+                member.userId).then(() => {
+                    setTimeout(() => {
+                        this.changePage.emit();
+                    }, 1000);
+                    this.toast.showInfo('PROJECT.TOAST.MEMBERREMOVED', true);
+                }).catch(error => {
+                    this.toast.showError(error);
+                });
         }
-
-    public masterToggle(): void {
-        this.isAllSelected() ?
-            this.selection.clear() :
-            this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
     }
 
     public openAddMember(): void {
@@ -146,7 +179,7 @@ export class ProjectMembersComponent {
                         }
                     })).then(() => {
                         setTimeout(() => {
-                            this.changePage();
+                            this.changePage.emit();
                         }, 1000);
                         this.toast.showInfo('PROJECT.TOAST.MEMBERSADDED', true);
                     }).catch(error => {
@@ -160,7 +193,7 @@ export class ProjectMembersComponent {
     updateRoles(member: ProjectMember.AsObject, selectionChange: MatSelectChange): void {
         if (this.projectType === ProjectType.PROJECTTYPE_OWNED) {
             this.mgmtService.ChangeProjectMember(this.project.projectId, member.userId, selectionChange.value)
-                .then((newmember: ProjectMember) => {
+                .then((_: ProjectMember) => {
                     this.toast.showInfo('PROJECT.TOAST.MEMBERCHANGED', true);
                 }).catch(error => {
                     this.toast.showError(error);
@@ -168,21 +201,11 @@ export class ProjectMembersComponent {
         } else if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
             this.mgmtService.ChangeProjectGrantMember(this.project.projectId,
                 this.grantId, member.userId, selectionChange.value)
-                .then((newmember: ProjectMember) => {
+                .then((_: ProjectMember) => {
                     this.toast.showInfo('PROJECT.TOAST.MEMBERCHANGED', true);
                 }).catch(error => {
                     this.toast.showError(error);
                 });
         }
     }
-
-    public changePage(event?: PageEvent): void {
-        this.dataSource.loadMembers(
-            this.project.projectId,
-            this.projectType,
-            event?.pageIndex ?? this.paginator.pageIndex,
-            event?.pageSize ?? this.paginator.pageSize,
-            this.grantId,
-        );
-    }
 }

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

@@ -1,25 +1,15 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatChipsModule } from '@angular/material/chips';
 import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
+import { MembersTableModule } from 'src/app/modules/members-table/members-table.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 
-import { RefreshTableModule } from '../refresh-table/refresh-table.module';
 import { ProjectMembersRoutingModule } from './project-members-routing.module';
 import { ProjectMembersComponent } from './project-members.component';
 
@@ -28,26 +18,15 @@ import { ProjectMembersComponent } from './project-members.component';
     imports: [
         ProjectMembersRoutingModule,
         CommonModule,
-        MatAutocompleteModule,
         HasRoleModule,
-        MatChipsModule,
         MatButtonModule,
-        MatFormFieldModule,
-        MatSelectModule,
-        MatCheckboxModule,
         MatIconModule,
-        MatTableModule,
-        MatPaginatorModule,
-        MatSortModule,
         MatTooltipModule,
-        ReactiveFormsModule,
-        MatProgressSpinnerModule,
-        FormsModule,
         TranslateModule,
-        HasRolePipeModule,
-        RefreshTableModule,
         DetailLayoutModule,
         MatDialogModule,
+        MembersTableModule,
+        HasRolePipeModule,
     ],
 })
 export class ProjectMembersModule { }

console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.scss

@@ -3,7 +3,7 @@
 }
 
 .desc {
-  color: #8795a1;
+  color: var(--grey);
   font-size: .9rem;
 }
 

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

@@ -9,7 +9,7 @@
 
     .desc {
       font-size: .8rem;
-      color: #8795a1;
+      color: var(--grey);
     }
 
     .count {
@@ -20,6 +20,7 @@
   .spinner {
     margin-top: 2px;
     margin-bottom: 1px;
+    margin-right: 1rem;
   }
 
   .fill-space {
@@ -31,7 +32,7 @@
   }
 }
 
-.table-wrapper {
+// .table-wrapper {
-  width: 100%;
+//   width: 100%;
-  overflow-x: auto;
+//   overflow-x: auto;
-}
+// }

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

@@ -1,10 +1,10 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatChipInputEvent } from '@angular/material/chips';
-import { forkJoin, from } from 'rxjs';
+import { forkJoin, from, Subject } from 'rxjs';
-import { debounceTime, switchMap, tap } from 'rxjs/operators';
+import { debounceTime, switchMap, takeUntil, tap } from 'rxjs/operators';
 import {
     ProjectGrantSearchResponse,
     ProjectGrantView,
@@ -27,7 +27,7 @@ export enum ProjectAutocompleteType {
     templateUrl: './search-project-autocomplete.component.html',
     styleUrls: ['./search-project-autocomplete.component.scss'],
 })
-export class SearchProjectAutocompleteComponent {
+export class SearchProjectAutocompleteComponent implements OnDestroy {
     public selectable: boolean = true;
     public removable: boolean = true;
     public addOnBlur: boolean = true;
@@ -47,9 +47,12 @@ export class SearchProjectAutocompleteComponent {
         | ProjectView.AsObject
         | ProjectView.AsObject[]
     > = new EventEmitter();
+
+    private unsubscribed$: Subject<void> = new Subject();
     constructor(private mgmtService: ManagementService) {
         this.myControl.valueChanges
             .pipe(
+                takeUntil(this.unsubscribed$),
                 debounceTime(200),
                 tap(() => this.isLoading = true),
                 switchMap(value => {
@@ -93,6 +96,10 @@ export class SearchProjectAutocompleteComponent {
             });
     }
 
+    public ngOnDestroy(): void {
+        this.unsubscribed$.next();
+    }
+
     public displayFn(project?: any): string | undefined {
         return (project && project.projectName) ? `${project.projectName}` :
             (project && project.name) ? `${project.name}` : undefined;

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

@@ -8,12 +8,15 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { SearchProjectAutocompleteComponent } from './search-project-autocomplete.component';
 
 @NgModule({
-    declarations: [SearchProjectAutocompleteComponent],
+    declarations: [
+        SearchProjectAutocompleteComponent,
+    ],
     imports: [
         CommonModule,
         MatAutocompleteModule,
@@ -26,6 +29,7 @@ import { SearchProjectAutocompleteComponent } from './search-project-autocomplet
         MatProgressSpinnerModule,
         FormsModule,
         TranslateModule,
+        MatSelectModule,
     ],
     exports: [
         SearchProjectAutocompleteComponent,

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

@@ -1,10 +1,10 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatChipInputEvent } from '@angular/material/chips';
-import { from } from 'rxjs';
+import { from, Subject } from 'rxjs';
-import { debounceTime, switchMap, tap } from 'rxjs/operators';
+import { debounceTime, switchMap, takeUntil, tap } from 'rxjs/operators';
 import {
     ProjectRole,
     ProjectRoleSearchKey,
@@ -12,7 +12,6 @@ import {
     SearchMethod,
 } from 'src/app/proto/generated/management_pb';
 import { ManagementService } from 'src/app/services/mgmt.service';
-import { ToastService } from 'src/app/services/toast.service';
 
 
 @Component({
@@ -20,7 +19,7 @@ import { ToastService } from 'src/app/services/toast.service';
     templateUrl: './search-roles-autocomplete.component.html',
     styleUrls: ['./search-roles-autocomplete.component.scss'],
 })
-export class SearchRolesAutocompleteComponent {
+export class SearchRolesAutocompleteComponent implements OnDestroy {
     public selectable: boolean = true;
     public removable: boolean = true;
     public addOnBlur: boolean = true;
@@ -35,9 +34,12 @@ export class SearchRolesAutocompleteComponent {
     @Input() public projectId: string = '';
     @Input() public singleOutput: boolean = false;
     @Output() public selectionChanged: EventEmitter<ProjectRole.AsObject[] | ProjectRole.AsObject> = new EventEmitter();
-    constructor(private mgmtService: ManagementService, private toast: ToastService) {
+
+    private unsubscribed$: Subject<void> = new Subject();
+    constructor(private mgmtService: ManagementService) {
         this.myControl.valueChanges
             .pipe(
+                takeUntil(this.unsubscribed$),
                 debounceTime(200),
                 tap(() => this.isLoading = true),
                 switchMap(value => {
@@ -55,6 +57,10 @@ export class SearchRolesAutocompleteComponent {
             });
     }
 
+    public ngOnDestroy(): void {
+        this.unsubscribed$.next();
+    }
+
     public displayFn(project?: ProjectRole.AsObject): string | undefined {
         return project ? `${project.displayName}` : undefined;
     }

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

@@ -3,7 +3,7 @@
 }
 
 .target-desc {
-  color: #8795a1;
+  color: var(--grey);
   font-size: .8rem;
   margin: 0;
   margin-bottom: 1rem;
@@ -44,5 +44,5 @@
 
 .found-label {
   font-size: .9rem;
-  color: #8795a1;
+  color: var(--grey);
 }

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

@@ -8,6 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { SearchUserAutocompleteComponent } from './search-user-autocomplete.component';
@@ -27,6 +28,7 @@ import { SearchUserAutocompleteComponent } from './search-user-autocomplete.comp
         MatProgressSpinnerModule,
         FormsModule,
         TranslateModule,
+        MatSelectModule,
     ],
     exports: [SearchUserAutocompleteComponent],
 })

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

@@ -5,7 +5,7 @@
         (click)="deleteGrantSelection()" *ngIf="selection.hasValue() && allowDelete">
         <i class="las la-trash"></i>
     </button>
-    <a *ngIf="allowCreate && context !== UserGrantContext.USER" matTooltip="{{'GRANTS.ADD' | translate}}" actions
+    <a *ngIf="allowWrite && context !== UserGrantContext.USER" matTooltip="{{'GRANTS.ADD' | translate}}" actions
         color="primary" color="primary" mat-raised-button [routerLink]="routerLink">
         <mat-icon class="icon">add</mat-icon>{{ 'GRANTS.ADD_BTN' | translate }}
     </a>
@@ -14,13 +14,13 @@
         <table mat-table multiTemplateDataRows class="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"
+                    <mat-checkbox [disabled]="allowWrite == false" color="primary"
-                        [checked]="selection.hasValue() && isAllSelected()"
+                        (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()"
+                    <mat-checkbox [disabled]="allowWrite == false" color="primary" (click)="$event.stopPropagation()"
                         (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                         <app-avatar *ngIf="row && row?.displayName && row.firstName && row.lastName" class="avatar"
                             [name]="row.displayName" [size]="32">
@@ -82,7 +82,7 @@
                         <mat-form-field class="form-field" appearance="outline"
                             *ngIf="loadedProjectId === grant.projectId">
                             <mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
-                            <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowCreate == false"
+                            <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowWrite == false"
                                 (selectionChange)="updateRoles(grant, $event)">
                                 <mat-option *ngFor="let role of projectRoleOptions" [value]="role.key">
                                     {{role.key}}
@@ -94,7 +94,7 @@
                     <ng-container *ngIf="context === UserGrantContext.GRANTED_PROJECT">
                         <mat-form-field class="form-field" appearance="outline">
                             <mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
-                            <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowCreate == false"
+                            <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowWrite == false"
                                 (selectionChange)="updateRoles(grant, $event)">
                                 <mat-option *ngFor="let role of grantRoleOptions" [value]="role">
                                     {{role}}

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

@@ -40,5 +40,5 @@
 
 .no-roles {
   font-size: 14px;
-  color: #8795a1;
+  color: var(--grey);
 }

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

@@ -32,7 +32,7 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
     @ViewChild(MatPaginator) public paginator!: MatPaginator;
     @ViewChild(MatTable) public table!: MatTable<UserGrantView.AsObject>;
 
-    @Input() allowCreate: boolean = false;
+    @Input() allowWrite: boolean = false;
     @Input() allowDelete: boolean = false;
 
     @Input() userId: string = '';

console/src/app/modules/warn-dialog/warn-dialog.component.scss

@@ -4,7 +4,7 @@
 }
 
 .desc {
-  color: #8795a1;
+  color: var(--grey);
   font-size: .9rem;
 }
 

console/src/app/pages/home/home.component.scss

@@ -5,7 +5,7 @@
   .header {
     display: flex;
     flex-direction: column;
-    margin: 4rem 0;
+    margin-bottom: 4rem;
     align-items: center;
 
     h3 {
@@ -15,7 +15,7 @@
     }
 
     .wlc_stnce {
-      color: #8795a1;
+      color: var(--grey);
       font-size: 16px;
     }
 
@@ -46,7 +46,7 @@
 
         p {
           display: block;
-          color: #8795a1;
+          color: var(--grey);
           font-size: .9rem;
         }
 
@@ -75,7 +75,7 @@
   }
 
   .disclaimer {
-    color: #8795a1;
+    color: var(--grey);
     font-size: 14px;
     margin-top: 3rem;
   }

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

@@ -1,86 +1,23 @@
+<div class="wrapp">
     <app-detail-layout [backRouterLink]="[ '/iam']" title="{{ 'IAM.MEMBER.TITLE' | translate }}"
         description="{{ 'IAM.MEMBER.DESCRIPTION' | translate }}">
+        <app-members-table [dataSource]="dataSource" [memberRoleOptions]="memberRoleOptions"
+            (updateRoles)="updateRoles($event.member, $event.change)" [factoryLoadFunc]="changePageFactory"
+            (changedSelection)="selection = $event" [refreshTrigger]="changePage"
+            [canDelete]="['iam.member.delete'] | hasRole | async" (deleteMember)="removeMember($event)">
 
-    <app-refresh-table (refreshed)="refreshPage()" [dataSize]="dataSource.totalResult"
+            <ng-template appHasRole selectactions [appHasRole]="['iam.member.delete']">
-        [timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource.loading$ | async">
+                <button color="warn" (click)="removeMemberSelection()"
-
+                    matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="del-button" mat-raised-button>
-        <ng-template appHasRole actions [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>
+                    {{'ACTIONS.SELECTIONDELETE' | translate}}
                 </button>
             </ng-template>
-        <ng-template appHasRole actions [appHasRole]="['iam.member.write']">
+            <ng-template appHasRole writeactions [appHasRole]="['iam.member.write']">
-            <a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
+                <a color="primary" (click)="openAddMember()" color="primary" mat-raised-button>
                     <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
                 </a>
             </ng-template>
-
+        </app-members-table>
-        <div class="table-wrapper">
-            <table mat-table class="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="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]="(['iam.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="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
-                </tr>
-            </table>
-
-            <mat-paginator class="paginator" #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
-            </mat-paginator>
-        </div>
-    </app-refresh-table>
     </app-detail-layout>
+</div>

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

@@ -1,37 +1,7 @@
-.table-wrapper {
+.wrapp {
-  overflow: auto;
+  width: 100% !important;
-  width: 100%;
-
-  .table,
-  .paginator {
-    width: 100%;
-
-    td,
-    th {
-      padding: .5rem;
-
-      &:first-child {
-        padding-left: 0;
-        padding-right: 1rem;
 }
 
-      &:last-child {
+.del-button {
-        padding-right: 0;
+  margin-right: .5rem;
-      }
-    }
-
-    .action {
-      width: 40px;
-    }
-
-    .selection {
-      width: 50px;
-      max-width: 50px;
-    }
-  }
-}
-
-.pointer {
-  outline: none;
-  cursor: pointer;
 }

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

@@ -1,10 +1,7 @@
-import { SelectionModel } from '@angular/cdk/collections';
+import { Component, EventEmitter } from '@angular/core';
-import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatPaginator } from '@angular/material/paginator';
+import { PageEvent } 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 { IamMember, IamMemberView } from 'src/app/proto/generated/admin_pb';
 import { ProjectMember, ProjectType, UserView } from 'src/app/proto/generated/management_pb';
@@ -18,17 +15,15 @@ import { IamMembersDataSource } from './iam-members-datasource';
     templateUrl: './iam-members.component.html',
     styleUrls: ['./iam-members.component.scss'],
 })
-export class IamMembersComponent implements AfterViewInit {
+export class IamMembersComponent {
+    public INITIALPAGESIZE: number = 25;
     public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
-    public disabled: boolean = false;
-    @ViewChild(MatPaginator) public paginator!: MatPaginator;
-    @ViewChild(MatTable) public table!: MatTable<IamMemberView.AsObject>;
     public dataSource!: IamMembersDataSource;
-    public selection: SelectionModel<IamMemberView.AsObject> = new SelectionModel<IamMemberView.AsObject>(true, []);
 
     public memberRoleOptions: string[] = [];
-    /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+    public changePageFactory!: Function;
-    public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
+    public changePage: EventEmitter<void> = new EventEmitter();
+    public selection: Array<IamMemberView.AsObject> = [];
 
     constructor(private adminService: AdminService,
         private dialog: MatDialog,
@@ -37,21 +32,13 @@ export class IamMembersComponent implements AfterViewInit {
         this.dataSource = new IamMembersDataSource(this.adminService);
         this.dataSource.loadMembers(0, 25);
         this.getRoleOptions();
-    }
 
-    public ngAfterViewInit(): void {
+        this.changePageFactory = (event?: PageEvent) => {
-        this.paginator.page
+            return this.dataSource.loadMembers(
-            .pipe(
+                event?.pageIndex ?? 0,
-                tap(() => this.loadMembersPage()),
+                event?.pageSize ?? this.INITIALPAGESIZE,
-            )
-            .subscribe();
-    }
-
-    private loadMembersPage(): void {
-        this.dataSource.loadMembers(
-            this.paginator.pageIndex,
-            this.paginator.pageSize,
             );
+        };
     }
 
     public getRoleOptions(): void {
@@ -71,11 +58,12 @@ export class IamMembersComponent implements AfterViewInit {
             });
     }
 
-
+    public removeMemberSelection(): void {
-    public removeProjectMemberSelection(): void {
+        console.log(this.selection);
-        Promise.all(this.selection.selected.map(member => {
+        Promise.all(this.selection.map(member => {
             return this.adminService.RemoveIamMember(member.userId).then(() => {
                 this.toast.showInfo('IAM.TOAST.MEMBERREMOVED', true);
+                this.changePage.emit();
             }).catch(error => {
                 this.toast.showError(error);
             });
@@ -86,25 +74,13 @@ export class IamMembersComponent implements AfterViewInit {
         this.adminService.RemoveIamMember(member.userId).then(() => {
             this.toast.showInfo('IAM.TOAST.MEMBERREMOVED', true);
             setTimeout(() => {
-                this.refreshPage();
+                this.changePage.emit();
             }, 1000);
         }).catch(error => {
             this.toast.showError(error);
         });
     }
 
-    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 openAddMember(): void {
         const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
             data: {
@@ -124,7 +100,7 @@ export class IamMembersComponent implements AfterViewInit {
                     })).then(() => {
                         this.toast.showInfo('IAM.TOAST.MEMBERADDED', true);
                         setTimeout(() => {
-                            this.refreshPage();
+                            this.changePage.emit();
                         }, 1000);
                     }).catch(error => {
                         this.toast.showError(error);
@@ -133,9 +109,4 @@ 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

@@ -1,22 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
-import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
+import { MembersTableModule } from 'src/app/modules/members-table/members-table.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 
 import { IamMembersRoutingModule } from './iam-members-routing.module';
@@ -29,24 +19,13 @@ import { IamMembersComponent } from './iam-members.component';
         IamMembersRoutingModule,
         DetailLayoutModule,
         CommonModule,
-        MatAutocompleteModule,
-        MatChipsModule,
         HasRoleModule,
         MatButtonModule,
-        MatCheckboxModule,
         MatIconModule,
-        MatTableModule,
-        MatPaginatorModule,
-        MatSortModule,
         MatTooltipModule,
-        ReactiveFormsModule,
-        MatProgressSpinnerModule,
-        FormsModule,
         TranslateModule,
-        MatFormFieldModule,
+        MembersTableModule,
-        MatSelectModule,
         HasRolePipeModule,
-        RefreshTableModule,
     ],
 })
 export class IamMembersModule { }

console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.scss

@@ -3,7 +3,7 @@ h1 {
 }
 
 .top-desc {
-  color: #8795a1;
+  color: var(--grey);
 }
 
 .row-lyt {
@@ -57,7 +57,7 @@ h1 {
 
     .desc {
       font-size: .9rem;
-      color: #8795a1;
+      color: var(--grey);
     }
 
     .fill-space {

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

@@ -3,7 +3,7 @@
 }
 
 .sub {
-  color: #8795a1;
+  color: var(--grey);
   margin-bottom: 2rem;
 }
 

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

@@ -39,7 +39,7 @@ h1 {
   }
 
   .desc {
-    color: #8795a1;
+    color: var(--grey);
     font-size: .9rem;
     margin: 1rem 0;
   }
@@ -70,7 +70,7 @@ h1 {
       width: 100%;
       display: block;
       font-size: .9rem;
-      color: #8795a1;
+      color: var(--grey);
     }
   }
 
@@ -97,7 +97,7 @@ h1 {
       .section {
         padding: .5rem;
         flex-basis: 100%;
-        color: #8795a1;
+        color: var(--grey);
         font-size: .9rem;
       }
 

console/src/app/pages/orgs/org-detail/add-domain-dialog/add-domain-dialog.component.scss

@@ -4,7 +4,7 @@
 }
 
 .desc {
-  color: #8795a1;
+  color: var(--grey);
   font-size: .9rem;
 }
 

console/src/app/pages/orgs/org-detail/domain-verification/domain-verification.component.scss

@@ -9,7 +9,7 @@
 }
 
 .desc {
-  color: #8795a1;
+  color: var(--grey);
   font-size: .9rem;
 
   &.warn {

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

@@ -13,12 +13,13 @@
 
                     <i matTooltip="verified" *ngIf="domain.verified" class="verified las la-check-circle"></i>
                     <i matTooltip="primary" *ngIf="domain.primary" class="primary las la-star"></i>
-                    <a *ngIf="!domain.primary" class="primaryset"
+                    <a *ngIf="!domain.primary && (canwrite$ | async)" class="primaryset"
                         (click)="setPrimary(domain)">{{'ORG.DOMAINS.SETPRIMARY' | translate}}</a>
 
                     <span class="fill-space"></span>
-                    <button [disabled]="(canwrite$ | async) == false" matTooltip="Remove domain" color="warn"
+                    <button class="rem-button" [disabled]="(canwrite$ | async) == false" matTooltip="Remove domain"
-                        mat-icon-button (click)="removeDomain(domain.domain)"><i class="las la-trash"></i></button>
+                        color="warn" mat-icon-button (click)="removeDomain(domain.domain)"><i
+                            class="las la-trash"></i></button>
                 </div>
                 <p class="new-desc">{{'ORG.PAGES.ORGDOMAIN_VERIFICATION' | translate}}</p>
                 <button [disabled]="(canwrite$ | async) == false" matTooltip="Add domain" mat-raised-button

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

@@ -3,7 +3,7 @@
 }
 
 .sub {
-  color: #8795a1;
+  color: var(--grey);
   margin-bottom: 2rem;
 }
 
@@ -47,6 +47,16 @@
   .fill-space {
     flex: 1;
   }
+
+  .rem-button {
+    visibility: hidden;
+  }
+
+  &:hover {
+    .rem-button {
+      visibility: visible;
+    }
+  }
 }
 
 .new-desc {

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

@@ -40,7 +40,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            <tr (click)="setAndNavigateToOrg(row)" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
         <mat-paginator class="paginator" [pageSize]="10" #paginator [pageSizeOptions]="[10, 20, 100, 250]">
         </mat-paginator>
@@ -48,8 +48,7 @@
 </div>
 
 <ng-template #templateRef let-key="key">
-    <button class="search-button" mat-icon-button
+    <button class="search-button" mat-icon-button (click)="setFilter(key)">
-        (click)="this.orgSearchKey != key ? this.orgSearchKey = key : this.orgSearchKey = undefined">
         <mat-icon *ngIf="this.orgSearchKey != key">search</mat-icon>
         <mat-icon *ngIf="this.orgSearchKey == key">search_off</mat-icon>
     </button>

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

@@ -3,7 +3,7 @@ h1 {
 }
 
 .top-desc {
-  color: #8795a1;
+  color: var(--grey);
 }
 
 .table,

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

@@ -1,7 +1,9 @@
 import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { MatInput } from '@angular/material/input';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { Router } from '@angular/router';
 import { BehaviorSubject, from, Observable, of } from 'rxjs';
 import { catchError, finalize, map } from 'rxjs/operators';
 import { enterAnimations } from 'src/app/animations';
@@ -21,6 +23,7 @@ export class OrgListComponent implements AfterViewInit {
 
     @ViewChild(MatPaginator) public paginator!: MatPaginator;
     @ViewChild(MatSort) sort!: MatSort;
+    @ViewChild('input') public filter!: MatInput;
 
     public dataSource!: MatTableDataSource<Org.AsObject>;
     public displayedColumns: string[] = ['select', 'id', 'name'];
@@ -31,6 +34,7 @@ export class OrgListComponent implements AfterViewInit {
 
     constructor(
         private authService: GrpcAuthService,
+        private router: Router,
     ) {
         this.loadOrgs(10, 0);
 
@@ -72,6 +76,21 @@ export class OrgListComponent implements AfterViewInit {
         this.loadOrgs(this.paginator.length, this.paginator.pageSize * this.paginator.pageIndex);
     }
 
+    public setFilter(key: MyProjectOrgSearchKey): void {
+        setTimeout(() => {
+            if (this.filter) {
+                (this.filter as any).nativeElement.focus();
+            }
+        }, 100);
+
+        if (this.orgSearchKey !== key) {
+            this.orgSearchKey = key;
+        } else {
+            this.orgSearchKey = undefined;
+            this.refresh();
+        }
+    }
+
     public applyFilter(event: Event): void {
         const filterValue = (event.target as HTMLInputElement).value;
         this.loadOrgs(
@@ -80,4 +99,9 @@ export class OrgListComponent implements AfterViewInit {
             filterValue.trim().toLowerCase(),
         );
     }
+
+    public setAndNavigateToOrg(org: Org.AsObject): void {
+        this.authService.setActiveOrg(org);
+        this.router.navigate(['/org']);
+    }
 }

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

@@ -1,83 +1,21 @@
 <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"
+    <app-members-table [dataSource]="dataSource" [memberRoleOptions]="memberRoleOptions"
-        [timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource?.loading$ | async">
+        (updateRoles)="updateRoles($event.member, $event.change)" [factoryLoadFunc]="changePageFactory"
-        <ng-template appHasRole actions [appHasRole]="['org.member.delete:'+org?.id,'org.member.delete']">
+        (changedSelection)="selection = $event" [refreshTrigger]="changePage"
+        [canDelete]="['org.member.delete:'+org?.id,'org.member.delete'] | hasRole | async"
+        (deleteMember)="removeOrgMember($event)">
+        <ng-template appHasRole selectactions [appHasRole]="['org.member.delete:'+org?.id,'org.member.delete']">
             <button (click)="removeOrgMemberSelection()" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}"
-                class="icon-button" mat-icon-button *ngIf="selection.hasValue()" color="warn">
+                class="del-button" mat-raised-button color="warn">
                 <i class="las la-trash"></i>
+                {{'ACTIONS.SELECTIONDELETE' | translate}}
             </button>
         </ng-template>
-        <ng-template appHasRole actions [appHasRole]="['org.member.write:'+org?.id,'org.member.write']">
+        <ng-template appHasRole writeactions [appHasRole]="['org.member.write:'+org?.id,'org.member.write']">
-            <a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
+            <a color="primary" (click)="openAddMember()" color="primary" mat-raised-button>
                 <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
             </a>
         </ng-template>
-
+    </app-members-table>
-        <div class="table-wrapper">
-            <table mat-table class="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="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="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
-                </tr>
-            </table>
-
-            <mat-paginator class="paginator" #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
-            </mat-paginator>
-        </div>
-    </app-refresh-table>
 </app-detail-layout>

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

@@ -1,37 +1,3 @@
-.table-wrapper {
+.del-button {
-  width: 100%;
+  margin-right: .5rem;
-  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;
-    }
-
-    .selection {
-      width: 50px;
-      max-width: 50px;
-    }
-  }
-}
-
-.pointer {
-  outline: none;
-  cursor: pointer;
 }

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

@@ -1,11 +1,9 @@
-import { SelectionModel } from '@angular/cdk/collections';
+import { Component, EventEmitter } from '@angular/core';
-import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatPaginator } from '@angular/material/paginator';
+import { PageEvent } from '@angular/material/paginator';
 import { MatSelectChange } from '@angular/material/select';
-import { tap } from 'rxjs/operators';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
-import { Org, OrgMemberView, ProjectType, UserView } from 'src/app/proto/generated/management_pb';
+import { Org, OrgMemberView, UserView } from 'src/app/proto/generated/management_pb';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
@@ -16,18 +14,16 @@ import { OrgMembersDataSource } from './org-members-datasource';
     templateUrl: './org-members.component.html',
     styleUrls: ['./org-members.component.scss'],
 })
-export class OrgMembersComponent implements AfterViewInit {
+export class OrgMembersComponent {
+    public INITIALPAGESIZE: number = 25;
     public org!: Org.AsObject;
-    public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
+    public disableWrite: boolean = false;
-    public disabled: boolean = false;
-    @ViewChild(MatPaginator) public paginator!: MatPaginator;
     public dataSource!: OrgMembersDataSource;
-    public selection: SelectionModel<OrgMemberView.AsObject> = new SelectionModel<OrgMemberView.AsObject>(true, []);
 
     public memberRoleOptions: string[] = [];
-
+    public changePageFactory!: Function;
-    /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+    public changePage: EventEmitter<void> = new EventEmitter();
-    public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
+    public selection: Array<OrgMemberView.AsObject> = [];
 
     constructor(
         private mgmtService: ManagementService,
@@ -37,18 +33,17 @@ export class OrgMembersComponent implements AfterViewInit {
         this.mgmtService.GetMyOrg().then(org => {
             this.org = org.toObject();
             this.dataSource = new OrgMembersDataSource(this.mgmtService);
-            this.dataSource.loadMembers(0, 25);
+            this.dataSource.loadMembers(0, this.INITIALPAGESIZE);
         });
 
         this.getRoleOptions();
-    }
 
-    public ngAfterViewInit(): void {
+        this.changePageFactory = (event?: PageEvent) => {
-        this.paginator.page
+            return this.dataSource.loadMembers(
-            .pipe(
+                event?.pageIndex ?? 0,
-                tap(() => this.loadMembersPage()),
+                event?.pageSize ?? this.INITIALPAGESIZE,
-            )
+            );
-            .subscribe();
+        };
     }
 
     public getRoleOptions(): void {
@@ -68,15 +63,8 @@ export class OrgMembersComponent implements AfterViewInit {
             });
     }
 
-    private loadMembersPage(): void {
-        this.dataSource.loadMembers(
-            this.paginator.pageIndex,
-            this.paginator.pageSize,
-        );
-    }
-
     public removeOrgMemberSelection(): void {
-        Promise.all(this.selection.selected.map(member => {
+        Promise.all(this.selection.map(member => {
             return this.mgmtService.RemoveMyOrgMember(member.userId).then(() => {
                 this.toast.showInfo('ORG.TOAST.MEMBERREMOVED', true);
             }).catch(error => {
@@ -84,21 +72,21 @@ export class OrgMembersComponent implements AfterViewInit {
             });
         })).then(() => {
             setTimeout(() => {
-                this.refreshPage();
+                this.changePage.emit();
             }, 1000);
         });
     }
 
-    public isAllSelected(): boolean {
+    public removeOrgMember(member: OrgMemberView.AsObject): void {
-        const numSelected = this.selection.selected.length;
+        this.mgmtService.RemoveMyOrgMember(member.userId).then(() => {
-        const numRows = this.dataSource.membersSubject.value.length;
+            this.toast.showInfo('ORG.TOAST.MEMBERREMOVED', true);
-        return numSelected === numRows;
-    }
 
-    public masterToggle(): void {
+            setTimeout(() => {
-        this.isAllSelected() ?
+                this.changePage.emit();
-            this.selection.clear() :
+            }, 1000);
-            this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
+        }).catch(error => {
+            this.toast.showError(error);
+        });
     }
 
     public openAddMember(): void {
@@ -120,7 +108,7 @@ export class OrgMembersComponent implements AfterViewInit {
                     })).then(() => {
                         this.toast.showInfo('ORG.TOAST.MEMBERADDED', true);
                         setTimeout(() => {
-                            this.refreshPage();
+                            this.changePage.emit();
                         }, 1000);
                     }).catch(error => {
                         this.toast.showError(error);
@@ -129,9 +117,4 @@ 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

@@ -1,21 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
-import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
+import { MembersTableModule } from 'src/app/modules/members-table/members-table.module';
 import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 
@@ -28,25 +20,16 @@ import { OrgMembersComponent } from './org-members.component';
     imports: [
         OrgMembersRoutingModule,
         CommonModule,
-        MatAutocompleteModule,
         MatChipsModule,
         MatButtonModule,
         HasRoleModule,
-        MatCheckboxModule,
         MatIconModule,
-        MatTableModule,
-        MatPaginatorModule,
-        MatSortModule,
         MatTooltipModule,
-        ReactiveFormsModule,
-        MatProgressSpinnerModule,
-        FormsModule,
         TranslateModule,
         DetailLayoutModule,
-        MatFormFieldModule,
-        MatSelectModule,
-        HasRolePipeModule,
         RefreshTableModule,
+        MembersTableModule,
+        HasRolePipeModule,
     ],
 })
 export class OrgMembersModule { }

console/src/app/pages/orgs/policy-grid/policy-grid.component.html

@@ -26,7 +26,8 @@
             <button [disabled]="complexityPolicy" [routerLink]="[ 'policy', PolicyComponentType.COMPLEXITY,'create' ]"
                 color="primary" mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
             <button [disabled]="!complexityPolicy" [routerLink]="[ 'policy', PolicyComponentType.COMPLEXITY ]"
-                mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
+                mat-stroked-button
+                [matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
         </div>
     </div>
 
@@ -55,7 +56,8 @@
                     <button [disabled]="iamPolicy" [routerLink]="[ 'policy', PolicyComponentType.IAM,'create' ]"
                         color="primary" mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
                     <button [disabled]="!iamPolicy" [routerLink]="[ 'policy', PolicyComponentType.IAM ]"
-                        mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
+                        mat-stroked-button
+                        [matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
                 </ng-template>
             </div>
         </div>
@@ -73,7 +75,6 @@
                 </button>
             </div>
 
-
             <ng-template #showDescIAM>
                 <p class="desc">
                     {{'ORG.POLICY.LOGIN_POLICY.DESCRIPTION' | translate}}</p>
@@ -85,7 +86,8 @@
                     <button [disabled]="loginPolicy" [routerLink]="[ 'policy', PolicyComponentType.LOGIN,'create' ]"
                         color="primary" mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
                     <button [disabled]="!loginPolicy" [routerLink]="[ 'policy', PolicyComponentType.LOGIN ]"
-                        mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
+                        mat-stroked-button
+                        [matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
                 </ng-template>
             </div>
         </div>

console/src/app/pages/orgs/policy-grid/policy-grid.component.scss

@@ -3,7 +3,7 @@ h1 {
 }
 
 .top-desc {
-  color: #8795a1;
+  color: var(--grey);
 }
 
 .row-lyt {
@@ -57,7 +57,7 @@ h1 {
 
     .desc {
       font-size: .9rem;
-      color: #8795a1;
+      color: var(--grey);
     }
 
     .fill-space {

console/src/app/pages/projects/apps/app-create/app-create.component.scss

@@ -5,7 +5,7 @@ h1 {
 
 p.desc {
   font-size: 14px;
-  color: #8795a1;
+  color: var(--grey);
 }
 
 .proswitch {
@@ -57,12 +57,12 @@ p.desc {
 
   .step-title {
     font-size: 1.2rem;
-    color: #8795a1;
+    color: var(--grey);
   }
 
   .step-description {
     font-size: .9rem;
-    color: #8795a1;
+    color: var(--grey);
   }
 
   .error {
@@ -102,7 +102,7 @@ p.desc {
   .right {
     margin-bottom: .5rem;
     font-size: 14px;
-    color: #8795a1;
+    color: var(--grey);
   }
 }
 

console/src/app/pages/projects/apps/app-detail/app-detail.component.scss

@@ -19,7 +19,7 @@
     width: 100%;
     display: block;
     font-size: .9rem;
-    color: #8795a1;
+    color: var(--grey);
   }
 
   .zitadel-warning {
@@ -67,7 +67,7 @@
 
   .step-description {
     font-size: .9rem;
-    color: #8795a1;
+    color: var(--grey);
     flex-basis: 100%;
     margin: 0 .5rem 1rem .5rem;
   }
@@ -81,7 +81,7 @@
   .docs-line {
     flex-basis: 100%;
     font-size: 14px;
-    color: #8795a1;
+    color: var(--grey);
     margin-top: 0;
   }
 

console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.scss

@@ -3,7 +3,7 @@
 }
 
 .desc {
-  color: #8795a1;
+  color: var(--grey);
   font-size: .9rem;
 }
 

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

@@ -18,7 +18,7 @@
                 <app-user-grants *ngIf="projectId && grantId" [context]="UserGrantContext.GRANTED_PROJECT"
                     [projectId]="projectId" [grantId]="grantId"
                     [displayedColumns]="['select','user', 'projectId', 'creationDate', 'changeDate', 'roleNamesList']"
-                    [allowCreate]="['user.grant.write','user.grant.write:'+grantId] | hasRole | async"
+                    [allowWrite]="['user.grant.write','user.grant.write:'+grantId] | hasRole | async"
                     [allowDelete]="['user.grant.delete','user.grant.delete:'+grantId] | hasRole | async"
                     refreshOnPreviousRoute="/grant-create/project/{{projectId}}/grant/{{grantId}}">
                 </app-user-grants>

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

@@ -23,7 +23,7 @@
 
     .desc {
       font-size: .9rem;
-      color: #8795a1;
+      color: var(--grey);
     }
 
     .zitadel-warning {
@@ -37,7 +37,7 @@
   width: 100%;
   display: block;
   font-size: .9rem;
-  color: #8795a1;
+  color: var(--grey);
 }
 
 .side {

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

@@ -48,9 +48,10 @@
     border-radius: .5rem;
     box-sizing: border-box;
     min-height: 166px;
+    transition: box-shadow .1s ease-in;
 
     &.inactive {
-      color: #8795a1;
+      color: var(--grey);
     }
 
     img {
@@ -70,7 +71,7 @@
         font-size: .8rem;
         margin-bottom: 0;
         margin-top: .5rem;
-        color: #8795a1;
+        color: var(--grey);
       }
 
       .name {
@@ -85,7 +86,7 @@
 
       .created {
         font-size: .8rem;
-        color: #8795a1;
+        color: var(--grey);
       }
 
       .organization {
@@ -119,7 +120,7 @@
       right: 0;
       margin: 0;
       margin-bottom: .25rem;
-      color: #8795a1;
+      color: var(--grey);
 
       &.selected {
         opacity: 1;
@@ -127,70 +128,17 @@
     }
 
     &:hover {
+      box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
+
       .edit-button {
         opacity: 1;
       }
-
-      .text-part {
-        .icons {
-          opacity: 1;
-        }
-      }
     }
 
     &.selected {
-      .text-part {
-        .icons {
-          opacity: 1;
-        }
-      }
-
       .edit-button {
         opacity: 1;
       }
-
-      .icon {
-        opacity: 1;
-      }
-    }
-
-    @media only screen and (max-width: 450px) {
-      flex-basis: 100%;
-    }
-  }
-
-  .add-project-button {
-    z-index: 100;
-    flex-basis: 250px;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    min-height: 166px;
-    border-radius: .5rem;
-    margin: 1rem;
-    box-sizing: border-box;
-
-    .icon {
-      display: flex;
-      justify-content: center;
-      align-self: center;
-      margin-bottom: 1rem;
-      height: 2.5rem;
-      line-height: 2.5rem;
-      font-size: 2.5rem;
-    }
-
-    &:hover {
-      background-color: #ffffff25;
-
-      .icon,
-      span {
-        &.disabled {
-          color: gray;
-        }
-      }
     }
 
     @media only screen and (max-width: 450px) {
@@ -203,5 +151,5 @@
   flex-basis: 100%;
   padding: 0 1rem;
   font-size: .8rem;
-  color: #8795a1;
+  color: var(--grey);
 }

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

@@ -3,7 +3,7 @@ h1 {
 }
 
 .sub {
-  color: #8795a1;
+  color: var(--grey);
   margin-bottom: 2rem;
 }
 

console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.scss

@@ -52,7 +52,7 @@
         border: 1px solid $accent-color;
         font-weight: 800;
         background-color: $primary-dark;
-        transition: background-color .2s ease-in-out;
+        transition: background-color box-shadow .3s ease-in;
         background-image:
           linear-gradient(transparent 11px, rgba($accent-color, .5) 12px, transparent 12px),
           linear-gradient(90deg, transparent 11px, rgba($accent-color, .5) 12px, transparent 12px);
@@ -60,6 +60,7 @@
 
         &:hover {
           background-color: rgba($accent-color, .2);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
         }
 
         &.add {

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

@@ -90,7 +90,7 @@
                         description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
                         <app-user-grants [context]="UserGrantContext.OWNED_PROJECT" [projectId]="projectId"
                             refreshOnPreviousRoute="/grant-create/project/{{projectId}}"
-                            [allowCreate]="(['user.grant.write', 'user.grant.write:'+projectId] | hasRole) | async"
+                            [allowWrite]="(['user.grant.write', 'user.grant.write:'+projectId] | hasRole) | async"
                             [allowDelete]="(['user.grant.delete','user.grant.delete:'+projectId] | hasRole) | async">
                         </app-user-grants>
                     </app-card>

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

@@ -31,7 +31,7 @@
 
     .desc {
       font-size: .9rem;
-      color: #8795a1;
+      color: var(--grey);
     }
 
     .zitadel-warning {

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

@@ -71,7 +71,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="highlight" mat-row *matRowDef="let grant; columns: displayedColumns;" class="element-row">
+            <tr class="highlight" mat-row *matRowDef="let grant; columns: displayedColumns;">
             </tr>
         </table>
 

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

@@ -48,9 +48,10 @@
     border-radius: .5rem;
     box-sizing: border-box;
     min-height: 166px;
+    transition: box-shadow .1s ease-in;
 
     &.inactive {
-      color: #8795a1;
+      color: var(--grey);
     }
 
     img {
@@ -70,7 +71,7 @@
         font-size: .8rem;
         margin-bottom: 0;
         margin-top: .5rem;
-        color: #8795a1;
+        color: var(--grey);
       }
 
       .name {
@@ -85,7 +86,7 @@
 
       .created {
         font-size: .8rem;
-        color: #8795a1;
+        color: var(--grey);
       }
 
       .organization {
@@ -119,7 +120,7 @@
       right: 0;
       margin: 0;
       margin-bottom: .25rem;
-      color: #8795a1;
+      color: var(--grey);
 
       &.selected {
         opacity: 1;
@@ -127,24 +128,14 @@
     }
 
     &:hover {
+      box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
+
       .edit-button {
         opacity: 1;
       }
-
-      .text-part {
-        .icons {
-          opacity: 1;
-        }
-      }
     }
 
     &.selected {
-      .text-part {
-        .icons {
-          opacity: 1;
-        }
-      }
-
       .edit-button {
         opacity: 1;
       }
@@ -171,6 +162,7 @@
     border-radius: .5rem;
     margin: 1rem;
     box-sizing: border-box;
+    transition: box-shadow .1s ease-in;
 
     .icon {
       display: flex;
@@ -183,7 +175,7 @@
     }
 
     &:hover {
-      background-color: #ffffff25;
+      box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
 
       .icon,
       span {
@@ -202,6 +194,6 @@
 .n-items {
   padding: 0 1rem;
   font-size: .8rem;
-  color: #8795a1;
+  color: var(--grey);
   flex-basis: 100%;
 }

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

@@ -3,7 +3,7 @@ h1 {
 }
 
 .sub {
-  color: #8795a1;
+  color: var(--grey);
   margin-bottom: 2rem;
 }
 

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

@@ -3,7 +3,7 @@ h1 {
 }
 
 .sub {
-  color: #8795a1;
+  color: var(--grey);
   margin-bottom: 2rem;
 }
 

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

@@ -1,59 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { BehaviorSubject, from, Observable, of } from 'rxjs';
-import { catchError, finalize, map } from 'rxjs/operators';
-import { ProjectMemberView } from 'src/app/proto/generated/management_pb';
-import { ManagementService } from 'src/app/services/mgmt.service';
-
-/**
- * Data source for the ProjectMembers view. This class should
- * encapsulate all logic for fetching and manipulating the displayed data
- * (including sorting, pagination, and filtering).
- */
-export class ProjectGrantDetailDataSource extends DataSource<ProjectMemberView.AsObject> {
-    public totalResult: number = 0;
-    public membersSubject: BehaviorSubject<ProjectMemberView.AsObject[]>
-        = new BehaviorSubject<ProjectMemberView.AsObject[]>([]);
-    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
-
-    constructor(private mgmtService: ManagementService) {
-        super();
-    }
-
-    public loadMembers(projectId: string, grantId: string,
-        pageIndex: number, pageSize: number, sortDirection?: string): void {
-        const offset = pageIndex * pageSize;
-
-        this.loadingSubject.next(true);
-
-        from(this.mgmtService.SearchProjectGrantMembers(projectId, grantId, pageSize, offset)).pipe(
-            map(resp => {
-                this.totalResult = resp.toObject().totalResult;
-                return resp.toObject().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<ProjectMemberView.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/projects/owned-projects/project-grant-detail/project-grant-detail.component.html

@@ -28,7 +28,7 @@
     <mat-form-field class="formfield" appearance="outline" *ngIf="grant && grant.roleKeysList">
         <mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
         <mat-select [(ngModel)]="grant.roleKeysList" multiple (selectionChange)="updateRoles($event)">
-            <mat-option *ngFor="let role of memberRoleOptions" [value]="role.key">
+            <mat-option *ngFor="let role of projectRoleOptions" [value]="role.key">
                 {{role.key}}
             </mat-option>
         </mat-select>
@@ -39,7 +39,19 @@
     <h1 class="h1">{{ 'PROJECT.GRANT.DETAIL.MEMBERTITLE' | translate }}</h1>
     <p class="desc">{{ 'PROJECT.GRANT.DETAIL.MEMBERDESC' | translate }}</p>
 
-    <app-project-grant-members *ngIf="this.projectid && this.grantid" [projectId]="projectid" [grantId]="grantid"
+    <app-members-table *ngIf="grant" style="width: 100%;" [dataSource]="dataSource"
-        [type]="projectType">
+        [memberRoleOptions]="memberRoleOptions" (updateRoles)="updateMemberRoles($event.member, $event.change)"
-    </app-project-grant-members>
+        [factoryLoadFunc]="changePageFactory" (changedSelection)="selection = $event" [refreshTrigger]="changePage">
+        <button selectactions (click)="removeProjectMemberSelection()"
+            [disabled]="(['project.grant.member.delete','project.grant.member.delete:' + grant.id] | hasRole | async) == false"
+            matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="del-button" color="warn" mat-raised-button>
+            <i class="las la-trash"></i>
+            {{'ACTIONS.SELECTIONDELETE' | translate}}
+        </button>
+        <a writeactions color="primary"
+            [disabled]="(['project.grant.member.write','project.grant.member.write:' + grant.id] | hasRole | async) == false"
+            (click)="openAddMember()" color="primary" mat-raised-button>
+            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
+        </a>
+    </app-members-table>
 </app-detail-layout>

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

@@ -1,4 +1,8 @@
 
+.del-button {
+  margin-right: .5rem;
+}
+
 .master-row {
   display: flex;
   flex-wrap: wrap;
@@ -21,7 +25,7 @@
       }
 
       .first {
-        color: #8795a1;
+        color: var(--grey);
       }
     }
   }
@@ -37,5 +41,5 @@
 
 .divider {
   height: 1px;
-  background-color: #ffffff20;
+  background-color: #8795a140;
 }

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

@@ -1,8 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { PageEvent } from '@angular/material/paginator';
 import { MatSelectChange } from '@angular/material/select';
 import { ActivatedRoute } from '@angular/router';
 import {
     ProjectGrant,
+    ProjectGrantMember,
+    ProjectGrantMemberView,
     ProjectGrantState,
     ProjectGrantView,
     ProjectRoleView,
@@ -11,12 +15,20 @@ import {
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
+import {
+    ProjectGrantMembersCreateDialogComponent,
+    ProjectGrantMembersCreateDialogExportType,
+} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
+import { ProjectGrantMembersDataSource } from './project-grant-members-datasource';
+
 @Component({
     selector: 'app-project-grant-detail',
     templateUrl: './project-grant-detail.component.html',
     styleUrls: ['./project-grant-detail.component.scss'],
 })
 export class ProjectGrantDetailComponent {
+    public INITIALPAGESIZE: number = 25;
+
     public grant!: ProjectGrantView.AsObject;
     public projectid: string = '';
     public grantid: string = '';
@@ -27,18 +39,37 @@ export class ProjectGrantDetailComponent {
     public isZitadel: boolean = false;
     ProjectGrantState: any = ProjectGrantState;
 
-    public memberRoleOptions: ProjectRoleView.AsObject[] = [];
+    public projectRoleOptions: ProjectRoleView.AsObject[] = [];
+    public memberRoleOptions: Array<string> = [];
 
+    public changePageFactory!: Function;
+    public changePage: EventEmitter<void> = new EventEmitter();
+    public selection: Array<ProjectGrantMemberView.AsObject> = [];
+    public dataSource!: ProjectGrantMembersDataSource;
     constructor(
         private mgmtService: ManagementService,
         private route: ActivatedRoute,
         private toast: ToastService,
+        private dialog: MatDialog,
     ) {
         this.route.params.subscribe(params => {
             this.projectid = params.projectid;
             this.grantid = params.grantid;
 
+            this.dataSource = new ProjectGrantMembersDataSource(this.mgmtService);
+            this.dataSource.loadGrantMembers(params.projectid, params.grantid, 0, this.INITIALPAGESIZE);
+
             this.getRoleOptions(params.projectid);
+            this.getMemberRoleOptions();
+
+            this.changePageFactory = (event?: PageEvent) => {
+                return this.dataSource.loadGrantMembers(
+                    params.projectid,
+                    params.grantid,
+                    event?.pageIndex ?? 0,
+                    event?.pageSize ?? this.INITIALPAGESIZE,
+                );
+            };
 
             this.mgmtService.ProjectGrantByID(this.grantid, this.projectid).then((grant) => {
                 this.grant = grant.toObject();
@@ -66,7 +97,15 @@ export class ProjectGrantDetailComponent {
 
     public getRoleOptions(projectId: string): void {
         this.mgmtService.SearchProjectRoles(projectId, 100, 0).then(resp => {
-            this.memberRoleOptions = resp.toObject().resultList;
+            this.projectRoleOptions = resp.toObject().resultList;
+        });
+    }
+
+    public getMemberRoleOptions(): void {
+        this.mgmtService.GetProjectGrantMemberRoles().then(resp => {
+            this.memberRoleOptions = resp.toObject().rolesList;
+        }).catch(error => {
+            this.toast.showError(error);
         });
     }
 
@@ -78,4 +117,57 @@ export class ProjectGrantDetailComponent {
                 this.toast.showError(error);
             });
     }
+
+    public removeProjectMemberSelection(): void {
+        Promise.all(this.selection.map(member => {
+            return this.mgmtService.RemoveProjectGrantMember(this.grant.projectId, this.grant.id, member.userId).then(() => {
+                this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERREMOVED', true);
+                setTimeout(() => {
+                    this.changePage.emit();
+                }, 1000);
+            }).catch(error => {
+                this.toast.showError(error);
+            });
+        }));
+    }
+
+    public async openAddMember(): Promise<any> {
+        const keysList = (await this.mgmtService.GetProjectGrantMemberRoles()).toObject();
+
+        const dialogRef = this.dialog.open(ProjectGrantMembersCreateDialogComponent, {
+            data: {
+                roleKeysList: keysList.rolesList,
+            },
+            width: '400px',
+        });
+
+        dialogRef.afterClosed().subscribe((dataToAdd: ProjectGrantMembersCreateDialogExportType) => {
+            if (dataToAdd) {
+                Promise.all(dataToAdd.userIds.map((userid: string) => {
+                    return this.mgmtService.AddProjectGrantMember(
+                        this.grant.projectId,
+                        this.grant.id,
+                        userid,
+                        dataToAdd.rolesKeyList,
+                    );
+                })).then(() => {
+                    this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERADDED', true);
+                    setTimeout(() => {
+                        this.changePage.emit();
+                    }, 3000);
+                }).catch(error => {
+                    this.toast.showError(error);
+                });
+            }
+        });
+    }
+
+    updateMemberRoles(member: ProjectGrantMember.AsObject, selectionChange: MatSelectChange): void {
+        this.mgmtService.ChangeProjectGrantMember(this.grant.projectId, this.grant.id, member.userId, selectionChange.value)
+            .then((_: ProjectGrantMember) => {
+                this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERCHANGED', true);
+            }).catch(error => {
+                this.toast.showError(error);
+            });
+    }
 }

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

@@ -5,6 +5,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatPaginatorModule } from '@angular/material/paginator';
@@ -15,19 +16,21 @@ 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 { MembersTableModule } from 'src/app/modules/members-table/members-table.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 
 import { ProjectGrantDetailRoutingModule } from './project-grant-detail-routing.module';
 import { ProjectGrantDetailComponent } from './project-grant-detail.component';
-import { ProjectGrantMembersModule } from './project-grant-members/project-grant-members.module';
+import {
-
+    ProjectGrantMembersCreateDialogModule,
+} from './project-grant-members-create-dialog/project-grant-members-create-dialog.module';
 
 @NgModule({
     declarations: [ProjectGrantDetailComponent],
     imports: [
         CommonModule,
         ProjectGrantDetailRoutingModule,
-        ProjectGrantMembersModule,
+        ProjectGrantMembersCreateDialogModule,
         MatAutocompleteModule,
         HasRoleModule,
         MatChipsModule,
@@ -45,6 +48,8 @@ import { ProjectGrantMembersModule } from './project-grant-members/project-grant
         MatSelectModule,
         DetailLayoutModule,
         HasRolePipeModule,
+        MembersTableModule,
+        MatDialogModule,
     ],
 })
 export class ProjectGrantDetailModule { }

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

@@ -32,6 +32,7 @@ export class ProjectGrantMembersDataSource extends DataSource<ProjectMember.AsOb
             grantId, pageSize, offset)).pipe(
                 map(resp => {
                     const response = resp.toObject();
+                    console.log(response.resultList);
                     this.totalResult = response.totalResult;
                     if (response.viewTimestamp) {
                         this.viewTimestamp = response.viewTimestamp;

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

@@ -1,84 +0,0 @@
-<app-refresh-table (refreshed)="refreshPage()" [dataSize]="dataSource.totalResult"
-    [timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource.loading$ | async">
-    <button (click)="removeProjectMemberSelection()"
-        [disabled]="(['project.grant.member.delete','project.grant.member.delete:' + grantId] | hasRole | async) == false"
-        matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" color="warn" mat-icon-button
-        *ngIf="selection.hasValue()">
-        <i class="las la-trash"></i>
-    </button>
-    <a color="primary"
-        [disabled]="(['project.grant.member.write','project.grant.member.write:' + grantId] | hasRole | async) == false"
-        (click)="openAddMember()" color="primary" mat-raised-button>
-        <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
-    </a>
-
-    <div class="table-wrapper">
-        <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
-            <mat-spinner diameter="50"></mat-spinner>
-        </div>
-        <table mat-table class="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="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]="(['project.grant.member.write','project.grant.member.write:' + grantId] | 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="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
-            </tr>
-        </table>
-
-        <mat-paginator class="paginator" [ngClass]="{'': type == ProjectType.PROJECTTYPE_OWNED}" #paginator
-            [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
-        </mat-paginator>
-    </div>
-</app-refresh-table>

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

@@ -1,149 +0,0 @@
-import { SelectionModel } from '@angular/cdk/collections';
-import { AfterViewInit, Component, Input, OnInit, 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 { ProjectMember, ProjectType } from 'src/app/proto/generated/management_pb';
-import { ManagementService } from 'src/app/services/mgmt.service';
-import { ToastService } from 'src/app/services/toast.service';
-
-import {
-    ProjectGrantMembersCreateDialogComponent,
-    ProjectGrantMembersCreateDialogExportType,
-} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
-import { ProjectGrantMembersDataSource } from './project-grant-members-datasource';
-
-@Component({
-    selector: 'app-project-grant-members',
-    templateUrl: './project-grant-members.component.html',
-    styleUrls: ['./project-grant-members.component.scss'],
-})
-export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
-    @Input() public projectId!: string;
-    @Input() public grantId!: string;
-
-    @Input() public type: ProjectType = ProjectType.PROJECTTYPE_GRANTED;
-
-    @ViewChild(MatPaginator) public paginator!: MatPaginator;
-    @ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
-    public dataSource!: ProjectGrantMembersDataSource;
-    public selection: SelectionModel<ProjectMember.AsObject> = new SelectionModel<ProjectMember.AsObject>(true, []);
-
-    /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-    public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
-
-    public ProjectType: any = ProjectType;
-    public memberRoleOptions: string[] = [];
-
-    constructor(
-        private mgmtService: ManagementService,
-        private dialog: MatDialog,
-        private toast: ToastService,
-    ) {
-        this.dataSource = new ProjectGrantMembersDataSource(this.mgmtService);
-        this.getRoleOptions();
-    }
-
-    public ngOnInit(): void {
-        this.dataSource.loadGrantMembers(this.projectId, this.grantId, 0, 25);
-    }
-
-    public ngAfterViewInit(): void {
-        this.paginator.page
-            .pipe(
-                tap(() => this.loadMembersPage()),
-            )
-            .subscribe();
-    }
-
-    public getRoleOptions(): void {
-        if (this.type === ProjectType.PROJECTTYPE_GRANTED) {
-            this.mgmtService.GetProjectGrantMemberRoles().then(resp => {
-                this.memberRoleOptions = resp.toObject().rolesList;
-            }).catch(error => {
-                this.toast.showError(error);
-            });
-        } else if (this.type === ProjectType.PROJECTTYPE_OWNED) {
-            this.mgmtService.GetProjectMemberRoles().then(resp => {
-                this.memberRoleOptions = resp.toObject().rolesList;
-            }).catch(error => {
-                this.toast.showError(error);
-            });
-        }
-    }
-
-    private loadMembersPage(): void {
-        this.dataSource.loadGrantMembers(
-            this.projectId,
-            this.grantId,
-            this.paginator.pageIndex,
-            this.paginator.pageSize,
-        );
-    }
-
-    public removeProjectMemberSelection(): void {
-        Promise.all(this.selection.selected.map(member => {
-            return this.mgmtService.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;
-        return numSelected === numRows;
-    }
-
-    public masterToggle(): void {
-        this.isAllSelected() ?
-            this.selection.clear() :
-            this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
-    }
-
-    public async openAddMember(): Promise<any> {
-        const keysList = (await this.mgmtService.GetProjectGrantMemberRoles()).toObject();
-
-        const dialogRef = this.dialog.open(ProjectGrantMembersCreateDialogComponent, {
-            data: {
-                roleKeysList: keysList.rolesList,
-            },
-            width: '400px',
-        });
-
-        dialogRef.afterClosed().subscribe((dataToAdd: ProjectGrantMembersCreateDialogExportType) => {
-            if (dataToAdd) {
-                Promise.all(dataToAdd.userIds.map((userid: string) => {
-                    return this.mgmtService.AddProjectGrantMember(
-                        this.projectId,
-                        this.grantId,
-                        userid,
-                        dataToAdd.rolesKeyList,
-                    );
-                })).then(() => {
-                    this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERADDED', true);
-                }).catch(error => {
-                    this.toast.showError(error);
-                });
-            }
-        });
-    }
-
-    updateRoles(member: ProjectMember.AsObject, selectionChange: MatSelectChange): void {
-        this.mgmtService.ChangeProjectGrantMember(this.projectId, this.grantId, member.userId, selectionChange.value)
-            .then((newmember: ProjectMember) => {
-                this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERCHANGED', true);
-            }).catch(error => {
-                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

@@ -1,58 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-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 { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
-
-import {
-    ProjectGrantMembersCreateDialogModule,
-} from './project-grant-members-create-dialog/project-grant-members-create-dialog.module';
-import { ProjectGrantMembersComponent } from './project-grant-members.component';
-
-@NgModule({
-    declarations: [ProjectGrantMembersComponent],
-    imports: [
-        CommonModule,
-        HasRoleModule,
-        RouterModule,
-        MatButtonModule,
-        MatCheckboxModule,
-        MatIconModule,
-        MatInputModule,
-        MatFormFieldModule,
-        MatSelectModule,
-        MatTableModule,
-        SearchUserAutocompleteModule,
-        ProjectGrantMembersCreateDialogModule,
-        MatPaginatorModule,
-        MatSortModule,
-        MatTooltipModule,
-        MatDialogModule,
-        ReactiveFormsModule,
-        MatProgressSpinnerModule,
-        FormsModule,
-        TranslateModule,
-        RefreshTableModule,
-        HasRolePipeModule,
-    ],
-    exports: [
-        ProjectGrantMembersComponent,
-    ],
-})
-export class ProjectGrantMembersModule { }

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

@@ -15,7 +15,7 @@
     }
 
     p {
-      color: #8795a1;
+      color: var(--grey);
       text-align: center;
       font-size: 1rem;
       margin: 0;

console/src/app/pages/user-grant-create/user-grant-create.component.scss

@@ -24,7 +24,7 @@
   }
 
   .desc {
-    color: #8795a1;
+    color: var(--grey);
   }
 }
 

console/src/app/pages/users/user-create-machine/user-create-machine.component.scss

@@ -15,14 +15,15 @@
 
 .content {
   width: 100%;
-  display: flex wrap;
+  display: flex;
+  flex-wrap: wrap;
   flex-direction: row;
   margin: 0 -.5rem;
 
   .section {
     padding: .5rem;
     flex-basis: 100%;
-    color: #8795a1;
+    color: var(--grey);
     font-size: .9rem;
   }
 

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

@@ -15,14 +15,15 @@
 
 .content {
   width: 100%;
-  display: flex wrap;
+  display: flex;
+  flex-wrap: wrap;
   flex-direction: row;
   margin: 0 -.5rem;
 
   .section {
     padding: .5rem;
     flex-basis: 100%;
-    color: #8795a1;
+    color: var(--grey);
     font-size: .9rem;
   }