feat(console): org managers, refactor, bugfixes (#226)

* resourceowner header, i18n

* password policy validators, roles required field

* use angular pattern instead of custom validator

* user detail fixes, mfa qr code, add org

* use mgmt for mfa list

* fetch owned projects

* search project

* seperate owned from granted projects

* lint

* fix granted project grid

* refactor project detail

* disable zitadel apps

* refactor project contributors

* changed i18n

* hide meta nav

* mobile meta layout

* refactor contributor name

* refactor org contributors

* org i18n, org member detail view

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

@@ -0,0 +1,25 @@
+<div class="groups">
+    <span class="header">{{ 'PROJECT.MEMBER.TITLE' | translate }}</span>
+    <span class="sub-header">{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}</span>
+    <div class="people">
+        <div class="img-list">
+            <ng-container *ngIf="totalResult < 10; else compact">
+                <ng-container *ngFor="let member of membersSubject | async">
+                    <div (click)="showDetail()" class="avatar-circle"
+                        matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
+                        <i class="avatar las la-user-circle"></i>
+                    </div>
+                </ng-container>
+            </ng-container>
+            <ng-template #compact>
+                <div (click)="showDetail()" class="avatar-circle" matTooltip="Click to show detail">
+                    <span>{{totalResult}}</span>
+                </div>
+            </ng-template>
+            <button class="add-img" (click)="openAddMember()" [disabled]="org?.state !== OrgState.ORGSTATE_ACTIVE"
+                mat-icon-button aria-label="Edit contributors">
+                <mat-icon>add</mat-icon>
+            </button>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,72 @@
+.groups {
+    padding-top: 1rem;
+
+    .header {
+      display: block;
+      margin-bottom: 1rem;
+      font-weight: 400;
+    }
+
+    .sub-header {
+        font-size: .8rem;
+        color: #81868a;
+    }
+  
+    .people {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      margin-bottom: 1rem;
+  
+      .owner {
+        margin-right: 1rem;
+      }
+  
+      .img-list {
+        width: 100%;
+        margin-top: 0.5rem;
+        margin-left: 1rem;
+        display: flex;
+        align-items: center;
+  
+        .avatar-img, .avatar-circle {
+          float: left;
+          margin: 0 8px 0 -15px;
+          height: 32px;
+          width: 32px;
+          border-radius: 50%;
+          box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.5);
+        }
+
+        .add-img {
+            float: left;
+            margin: 0 8px 0 -15px;
+        }
+
+        .avatar-img {
+            &:before {
+                content: '';
+                display: block;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                height: 32px;
+                width: 32px;
+            }
+        }
+
+        .avatar-circle {
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: indianred;
+        }
+  
+        .margin-neg {
+          margin-left: -1rem;
+        }
+      }
+    }
+  }
+  

console/src/app/pages/orgs/org-contributors/org-contributors.component.spec.ts

@@ -0,0 +1,34 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { OrgContributorsComponent } from './org-contributors.component';
+
+describe('OrgContributorsComponent', () => {
+    let component: OrgContributorsComponent;
+    let fixture: ComponentFixture<OrgContributorsComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [OrgContributorsComponent],
+            imports: [
+                NoopAnimationsModule,
+                MatPaginatorModule,
+                MatSortModule,
+                MatTableModule,
+            ],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(OrgContributorsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should compile', () => {
+        expect(component).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,93 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTable } from '@angular/material/table';
+import { Router } from '@angular/router';
+import { BehaviorSubject, from, Observable, of } from 'rxjs';
+import { catchError, finalize, map } from 'rxjs/operators';
+import { Org, OrgMember, OrgMemberView, OrgState, User } from 'src/app/proto/generated/management_pb';
+import { OrgService } from 'src/app/services/org.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import {
+    CreationType,
+    MemberCreateDialogComponent,
+} from '../../../modules/add-member-dialog/member-create-dialog.component';
+
+@Component({
+    selector: 'app-org-contributors',
+    templateUrl: './org-contributors.component.html',
+    styleUrls: ['./org-contributors.component.scss'],
+})
+export class OrgContributorsComponent implements OnInit {
+    @Input() public org!: Org.AsObject;
+    @Input() public disabled: boolean = false;
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    @ViewChild(MatTable) public table!: MatTable<OrgMember.AsObject>;
+    /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+    public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
+
+    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+    public totalResult: number = 0;
+    public membersSubject: BehaviorSubject<OrgMemberView.AsObject[]>
+        = new BehaviorSubject<OrgMemberView.AsObject[]>([]);
+
+    public OrgState: any = OrgState;
+    constructor(private orgService: OrgService, private dialog: MatDialog,
+        private toast: ToastService,
+        private router: Router) { }
+
+    public ngOnInit(): void {
+        this.loadMembers(0, 25, 'asc');
+    }
+
+    public loadMembers(pageIndex: number, pageSize: number, sortDirection?: string): void {
+        const offset = pageIndex * pageSize;
+
+        this.loadingSubject.next(true);
+        from(this.orgService.SearchMyOrgMembers(pageSize, offset)).pipe(
+            map(resp => {
+                this.totalResult = resp.toObject().totalResult;
+                return resp.toObject().resultList;
+            }),
+            catchError(() => of([])),
+            finalize(() => this.loadingSubject.next(false)),
+        ).subscribe(members => {
+            console.log(members);
+            this.membersSubject.next(members);
+        });
+    }
+
+    public openAddMember(): void {
+        const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
+            data: {
+                creationType: CreationType.ORG,
+            },
+            width: '400px',
+        });
+
+        dialogRef.afterClosed().subscribe(resp => {
+            if (resp) {
+                const users: User.AsObject[] = resp.users;
+                const roles: string[] = resp.roles;
+
+                if (users && users.length && roles && roles.length) {
+                    Promise.all(users.map(user => {
+                        return this.orgService.AddMyOrgMember(user.id, roles);
+                    })).then(() => {
+                        this.toast.showError('members added');
+                    }).catch(error => {
+                        this.toast.showError(error.message);
+                    });
+                }
+            }
+        });
+    }
+
+    public showDetail(): void {
+        if (this.org?.state === OrgState.ORGSTATE_ACTIVE) {
+            this.router.navigate(['orgs', this.org.id, 'members']);
+        }
+    }
+}

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

@@ -0,0 +1,42 @@
+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 { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+
+import { MemberCreateDialogModule } from '../../../modules/add-member-dialog/member-create-dialog.module';
+import { OrgContributorsComponent } from './org-contributors.component';
+
+
+@NgModule({
+    declarations: [OrgContributorsComponent],
+    imports: [
+        CommonModule,
+        FormsModule,
+        MemberCreateDialogModule,
+        HasRoleModule,
+        MatButtonModule,
+        MatDialogModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatIconModule,
+        RouterModule,
+        MatProgressSpinnerModule,
+        MatCheckboxModule,
+        MatTooltipModule,
+        TranslateModule,
+    ],
+    exports: [
+        OrgContributorsComponent,
+    ],
+})
+export class OrgContributorsModule { }

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

@@ -1,23 +1,13 @@
 <app-meta-layout>
-    <div class="max-width-container">
-        <!-- {{ 'ORG_DETAIL.TITLE' | translate }}  -->
+    <div class="enlarged-container">
         <h1>{{org?.name}}</h1>
         <p class="sub">{{'ORG_DETAIL.DESCRIPTION' | translate}}
         </p>
-
-        <ng-template appHasRole [appHasRole]="['org.member.read']">
-            <h3>{{ 'ORG_DETAIL.MEMBER.TITLE' | translate }}</h3>
-
-            <app-org-members [orgId]="orgId"></app-org-members>
+        <ng-template appHasRole [appHasRole]="['policy.read']">
+            <app-policy-grid></app-policy-grid>
         </ng-template>
     </div>
 
-    <ng-template appHasRole [appHasRole]="['policy.read']">
-        <div class="enlarged-container">
-            <app-policy-grid></app-policy-grid>
-        </div>
-    </ng-template>
-
     <metainfo class="side">
         <div class="details">
             <div class="row">
@@ -31,7 +21,14 @@
             </div>
         </div>
 
-        <p class="side-section">{{ 'CHANGES.ORG.TITLE' | translate }}</p>
-        <app-changes *ngIf="org" [changeType]="ChangeType.ORG" [id]="org.id"></app-changes>
+        <mat-tab-group mat-stretch-tabs class="tab-group" disablePagination="true">
+            <mat-tab label="Details">
+                <app-org-contributors *ngIf="org" [org]="org">
+                </app-org-contributors>
+            </mat-tab>
+            <mat-tab label="{{ 'CHANGES.ORG.TITLE' | translate }}" class="flex-col">
+                <app-changes *ngIf="org" [changeType]="ChangeType.ORG" [id]="org.id"></app-changes>
+            </mat-tab>
+        </mat-tab-group>
     </metainfo>
 </app-meta-layout>

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

@@ -44,5 +44,12 @@
                 </ng-template>
             </mat-menu>
         </div>
+
+        <ng-template appHasRole [appHasRole]="['iam.write']">
+            <div class="card add-org-button" [routerLink]="[ '/orgs/create' ]">
+                <mat-icon class="icon">add</mat-icon>
+                <span>Add new organization</span>
+            </div>
+        </ng-template>
     </div>
 </div>

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

@@ -53,7 +53,7 @@ h1 {
         }
 
         &.active {
-            border-color: #db4c69;
+            border: 2px solid #db4c69;
         }
 
         .selection-icon {
@@ -186,4 +186,40 @@ h1 {
             }
         }
     }
+
+    .add-org-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: 0.5rem;
+        margin: 1rem;
+        box-sizing: border-box;
+        font-family: 'Rubik', sans-serif;
+
+        .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;
+                }
+            }
+        }
+    }
 }

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

@@ -1,17 +1,17 @@
 import { DataSource } from '@angular/cdk/collections';
 import { BehaviorSubject, from, Observable, of } from 'rxjs';
 import { catchError, finalize, map } from 'rxjs/operators';
-import { OrgMember } from 'src/app/proto/generated/management_pb';
+import { ProjectMember, ProjectMemberSearchResponse } from 'src/app/proto/generated/management_pb';
 import { OrgService } from 'src/app/services/org.service';
 
 /**
- * Data source for the OrgMembers view. This class should
+ * 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 OrgMembersDataSource extends DataSource<OrgMember.AsObject> {
+export class ProjectMembersDataSource extends DataSource<ProjectMember.AsObject> {
     public totalResult: number = 0;
-    public membersSubject: BehaviorSubject<OrgMember.AsObject[]> = new BehaviorSubject<OrgMember.AsObject[]>([]);
+    public membersSubject: BehaviorSubject<ProjectMember.AsObject[]> = new BehaviorSubject<ProjectMember.AsObject[]>([]);
     private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
     public loading$: Observable<boolean> = this.loadingSubject.asObservable();
 
@@ -19,21 +19,27 @@ export class OrgMembersDataSource extends DataSource<OrgMember.AsObject> {
         super();
     }
 
-    public loadMembers(pageIndex: number, pageSize: number, sortDirection?: string): void {
+    public loadMembers(
+        pageIndex: number, pageSize: number, grantId?: string, sortDirection?: string): void {
         const offset = pageIndex * pageSize;
 
         this.loadingSubject.next(true);
-        from(this.orgService.SearchMyOrgMembers(pageSize, offset)).pipe(
-            map(resp => {
-                this.totalResult = resp.toObject().totalResult;
-                return resp.toObject().resultList;
-            }),
-            catchError(() => of([])),
-            finalize(() => this.loadingSubject.next(false)),
-        ).subscribe(members => {
-            console.log(members);
-            this.membersSubject.next(members);
-        });
+        // TODO
+        const promise: Promise<ProjectMemberSearchResponse> =
+            this.orgService.SearchMyOrgMembers(pageSize, offset);
+        if (promise) {
+            from(promise).pipe(
+                map(resp => {
+                    this.totalResult = resp.toObject().totalResult;
+                    console.log(this.totalResult);
+                    return resp.toObject().resultList;
+                }),
+                catchError(() => of([])),
+                finalize(() => this.loadingSubject.next(false)),
+            ).subscribe(members => {
+                this.membersSubject.next(members);
+            });
+        }
     }
 
 
@@ -42,7 +48,7 @@ export class OrgMembersDataSource extends DataSource<OrgMember.AsObject> {
      * the returned stream emits new items.
      * @returns A stream of the items to be rendered.
      */
-    public connect(): Observable<OrgMember.AsObject[]> {
+    public connect(): Observable<ProjectMember.AsObject[]> {
         return this.membersSubject.asObservable();
     }
 

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { OrgMembersComponent } from './org-members.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: OrgMembersComponent,
+        data: { animation: 'AddPage' },
+    },
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule],
+})
+export class OrgMembersRoutingModule { }

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

@@ -1,87 +1,105 @@
-<div class="table-header-row">
-    <div class="col">
-        <ng-container *ngIf="!selection.hasValue()">
-            <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
-            <span class="count">{{dataSource.membersSubject.value.length}}</span>
-        </ng-container>
-        <ng-container *ngIf="selection.hasValue()">
-            <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
-            <span class="count">{{selection?.selected?.length}}</span>
-        </ng-container>
+<div class="max-width-container">
+    <div class="container">
+        <div class="left">
+            <a *ngIf="org" [routerLink]="[ '/orgs', org.id]" mat-icon-button>
+                <mat-icon class="icon">arrow_back</mat-icon>
+            </a>
+        </div>
+        <div class="right">
+            <div class="head">
+                <h1>{{org?.name}} {{ 'ORG.MEMBER.TITLE' | translate }}</h1>
+                <p class="desc">{{ 'ORG.MEMBER.DESCRIPTION' | translate }}</p>
+            </div>
+
+            <div class="table-header-row" *ngIf="org">
+                <div class="col">
+                    <ng-container *ngIf="!selection.hasValue()">
+                        <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
+                        <span class="count">{{dataSource?.membersSubject.value.length}}</span>
+                    </ng-container>
+                    <ng-container *ngIf="selection.hasValue()">
+                        <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
+                        <span class="count">{{selection?.selected?.length}}</span>
+                    </ng-container>
+                </div>
+                <span class="fill-space"></span>
+                <ng-template appHasRole [appHasRole]="['org.member.delete:'+org.id,'org.member.delete']">
+                    <button (click)="removeProjectMemberSelection()"
+                        matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
+                        *ngIf="selection.hasValue()">
+                        <mat-icon>remove_circle</mat-icon>
+                    </button>
+                </ng-template>
+                <ng-template appHasRole [appHasRole]="['org.member.write:'+org.id,'org.member.write']">
+                    <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()"
+                        color="primary" mat-raised-button>
+                        <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
+                    </a>
+                </ng-template>
+            </div>
+
+            <div class="table-wrapper">
+                <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
+                    <mat-spinner diameter="50"></mat-spinner>
+                </div>
+                <table mat-table class="background-style full-width-table" aria-label="Elements"
+                    [dataSource]="dataSource">
+                    <ng-container matColumnDef="select">
+                        <th class="selection" mat-header-cell *matHeaderCellDef>
+                            <mat-checkbox (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 (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" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
+                            <span class="role app-label" *ngFor="let role of member.rolesList; index as i">
+                                {{ 'ROLES.'+role | translate }}</span>
+                        </td>
+                    </ng-container>
+
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+                    </tr>
+                </table>
+
+                <mat-paginator class="background-style" #paginator [pageSize]="50"
+                    [pageSizeOptions]="[25, 50, 100, 250]">
+                </mat-paginator>
+            </div>
+        </div>
     </div>
-    <span class="fill-space"></span>
-    <ng-template appHasRole [appHasRole]="['org.member.delete']">
-        <button [disabled]="disabled" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button"
-            (click)="removeSelectedOrgMembers()" mat-icon-button *ngIf="selection.hasValue()">
-            <mat-icon>delete_outline</mat-icon>
-        </button>
-    </ng-template>
-    <ng-template appHasRole [appHasRole]="['org.member.write']">
-        <button [disabled]="disabled" color="primary" class="add-button" mat-raised-button (click)="openAddMember()">
-            <mat-icon>add</mat-icon>{{ 'ORG_DETAIL.MEMBER.ADD' | translate }}
-        </button>
-    </ng-template>
-</div>
-
-<div class="table-wrapper">
-    <div class="spinner-container" *ngIf="dataSource.loading$ | async">
-        <mat-spinner diameter="50"></mat-spinner>
-    </div>
-    <table mat-table class="background-style full-width-table" aria-label="Elements" [dataSource]="dataSource">
-
-        <ng-container matColumnDef="select">
-            <th class="selection" mat-header-cell *matHeaderCellDef>
-                <mat-checkbox (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 (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> {{ 'ORG_DETAIL.MEMBER.FIRSTNAME' | translate }} </th>
-            <td [routerLink]="['/user', member.userId]" class="pointer" mat-cell *matCellDef="let member">
-                {{member.firstName}} </td>
-        </ng-container>
-
-        <ng-container matColumnDef="lastname">
-            <th mat-header-cell *matHeaderCellDef> {{ 'ORG_DETAIL.MEMBER.LASTNAME' | translate }} </th>
-            <td [routerLink]="['/user', member.userId]" class="pointer" mat-cell *matCellDef="let member">
-                {{member.lastName}} </td>
-        </ng-container>
-
-        <ng-container matColumnDef="username">
-            <th mat-header-cell *matHeaderCellDef> {{ 'ORG_DETAIL.MEMBER.USERNAME' | translate }} </th>
-            <td [routerLink]="['/user', member.userId]" class="pointer" mat-cell *matCellDef="let member">
-                {{member.userName}} </td>
-        </ng-container>
-
-        <ng-container matColumnDef="email">
-            <th mat-header-cell *matHeaderCellDef> {{ 'ORG_DETAIL.MEMBER.EMAIL' | translate }} </th>
-            <td [routerLink]="['/user', member.userId]" class="pointer" mat-cell *matCellDef="let member">
-                {{member.email}}
-            </td>
-        </ng-container>
-
-        <ng-container matColumnDef="roles">
-            <th mat-header-cell *matHeaderCellDef> {{ 'ORG_DETAIL.MEMBER.ROLES' | translate }} </th>
-            <td [routerLink]="['/user', member.userId]" class="pointer" mat-cell *matCellDef="let member">
-                <span class="role app-label"
-                    *ngFor="let role of member.rolesList; index as i">{{'ROLES.'+role | translate }}</span>
-
-            </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-    </table>
-
-    <mat-paginator class="background-style" #paginator [length]="dataSource.totalResult" [pageSize]="50"
-        [pageSizeOptions]="[25, 50, 100, 250]">
-    </mat-paginator>
 </div>

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

@@ -1,36 +1,74 @@
+.container {
+    display: flex;
+    padding-bottom: 3rem;
 
-    
-h1 {
-    font-family: ailerons;
+    .left {
+        width: 100px;
+        display: flex;
+        padding: 1rem;
+        justify-content: center;
+
+        a {
+            margin-top: .2rem;
+        }
+    }
+
+    .right {
+        flex: 1;
+        padding-top: 1rem;
+
+        .head {
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid #ffffff20;
+            margin-bottom: 2rem;
+            flex-wrap: wrap;
+          
+            a {
+                display: block;
+            }
+          
+            h1 {
+                font-size: 1.2rem;
+            }
+          
+            .desc {
+                width: 100%;
+                display: block;
+                font-size: .9rem;
+                color: #81868a;
+            }
+        }
+    }
 }
 
 .table-header-row {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 
-    .col {
-        display: flex;
-        flex-direction: column;
-        .desc {
-            font-size: .8rem;
-            color: #81868a;
-        }
-        .count {
-            font-size: 2rem;
-        }
-    }
+  .col {
+      display: flex;
+      flex-direction: column;
+      .desc {
+          font-size: .8rem;
+          color: #81868a;
+      }
+      .count {
+          font-size: 2rem;
+      }
+  }
 
-    .fill-space {
-        flex: 1;
-    }
+  .fill-space {
+      flex: 1;
+  }
 
-    .icon-button {
-        margin-right: .5rem;
-    }
+  .icon-button {
+      margin-right: .5rem;
+  }
 
-    .add-button {
-        border-radius: .5rem;
-    }
+  .add-button {
+      border-radius: .5rem;
+  }
 }
 
 .table-wrapper {
@@ -41,12 +79,12 @@ h1 {
         align-items: center;
         justify-content: center;
     }
+
     table, mat-paginator {
         width: 100%;
 
         td, th {
-            padding: 0 1rem;
-
+            padding: .5rem;
             &:first-child {
                 padding-left: 0;
                 padding-right: 1rem;
@@ -57,8 +95,11 @@ h1 {
             }
         }
 
+        .action {
+            width: 40px;
+        }
+
         .data-row {
-            cursor: pointer;
             &:hover {
                 background-color: #ffffff05;
             }
@@ -79,4 +120,4 @@ h1 {
 .pointer {
     outline: none;
     cursor: pointer;
-}
+}

console/src/app/pages/orgs/org-members/org-members.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 { OrgMembersComponent } from './org-members.component';
+import { ProjectMembersComponent } from './project-members.component';
 
-describe('OrgMembersComponent', () => {
-  let component: OrgMembersComponent;
-  let fixture: ComponentFixture<OrgMembersComponent>;
+describe('ProjectMembersComponent', () => {
+  let component: ProjectMembersComponent;
+  let fixture: ComponentFixture<ProjectMembersComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [OrgMembersComponent],
+      declarations: [ProjectMembersComponent],
       imports: [
         NoopAnimationsModule,
         MatPaginatorModule,
@@ -23,7 +23,7 @@ describe('OrgMembersComponent', () => {
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(OrgMembersComponent);
+    fixture = TestBed.createComponent(ProjectMembersComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -1,44 +1,46 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTable } from '@angular/material/table';
+import { ActivatedRoute } from '@angular/router';
 import { tap } from 'rxjs/operators';
-import { OrgMember, User } from 'src/app/proto/generated/management_pb';
+import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
+import { User } from 'src/app/proto/generated/auth_pb';
+import { Org, ProjectMember, ProjectType } from 'src/app/proto/generated/management_pb';
 import { OrgService } from 'src/app/services/org.service';
 import { ToastService } from 'src/app/services/toast.service';
 
-import {
-    CreationType,
-    ProjectMemberCreateDialogComponent,
-} from '../../../modules/add-member-dialog/project-member-create-dialog.component';
-import { OrgMembersDataSource } from './org-members-datasource';
+import { ProjectMembersDataSource } from './org-members-datasource';
 
 @Component({
     selector: 'app-org-members',
     templateUrl: './org-members.component.html',
     styleUrls: ['./org-members.component.scss'],
 })
-export class OrgMembersComponent implements AfterViewInit, OnInit {
-    @Input() public orgId: string = '';
-    @Input() public disabled: boolean = false;
+export class OrgMembersComponent implements AfterViewInit {
+    public org!: Org.AsObject;
+    public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
+    public disabled: boolean = false;
     @ViewChild(MatPaginator) public paginator!: MatPaginator;
-    @ViewChild(MatTable) public table!: MatTable<OrgMember.AsObject>;
-    @Output() public changedSelection: EventEmitter<Array<OrgMember.AsObject>> = new EventEmitter();
-    public dataSource!: OrgMembersDataSource;
-    public selection: SelectionModel<OrgMember.AsObject> = new SelectionModel<OrgMember.AsObject>(true, []);
+    @ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
+    public dataSource!: ProjectMembersDataSource;
+    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'];
 
-    constructor(private orgService: OrgService, private dialog: MatDialog, private toast: ToastService) { }
-
-    public ngOnInit(): void {
-        this.dataSource = new OrgMembersDataSource(this.orgService);
-        this.dataSource.loadMembers(0, 25, 'asc');
-
-        this.selection.changed.subscribe(change => {
-            console.log(change);
-            // this.changedSelection.emit(change)
+    constructor(private orgService: OrgService,
+        private dialog: MatDialog,
+        private toast: ToastService,
+        private route: ActivatedRoute) {
+        this.route.params.subscribe(params => {
+            this.orgService.GetOrgById(params.orgid).then(org => {
+                this.org = org.toObject();
+                console.log(this.org);
+                this.dataSource = new ProjectMembersDataSource(this.orgService);
+                this.dataSource.loadMembers(0, 25, 'asc');
+            });
         });
     }
 
@@ -48,6 +50,7 @@ export class OrgMembersComponent implements AfterViewInit, OnInit {
                 tap(() => this.loadMembersPage()),
             )
             .subscribe();
+
     }
 
     private loadMembersPage(): void {
@@ -57,6 +60,24 @@ export class OrgMembersComponent implements AfterViewInit, OnInit {
         );
     }
 
+    public removeProjectMemberSelection(): void {
+        Promise.all(this.selection.selected.map(member => {
+            return this.orgService.RemoveMyOrgMember(member.userId).then(() => {
+                this.toast.showInfo('Removed successfully');
+            }).catch(error => {
+                this.toast.showError(error.message);
+            });
+        }));
+    }
+
+    public removeMember(member: ProjectMember.AsObject): void {
+        this.orgService.RemoveMyOrgMember(member.userId).then(() => {
+            this.toast.showInfo('Member removed successfully');
+        }).catch(error => {
+            this.toast.showError(error.message);
+        });
+    }
+
     public isAllSelected(): boolean {
         const numSelected = this.selection.selected.length;
         const numRows = this.dataSource.membersSubject.value.length;
@@ -66,11 +87,11 @@ export class OrgMembersComponent implements AfterViewInit, OnInit {
     public masterToggle(): void {
         this.isAllSelected() ?
             this.selection.clear() :
-            this.dataSource.membersSubject.value.forEach((row: OrgMember.AsObject) => this.selection.select(row));
+            this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
     }
 
     public openAddMember(): void {
-        const dialogRef = this.dialog.open(ProjectMemberCreateDialogComponent, {
+        const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
             data: {
                 creationType: CreationType.ORG,
             },
@@ -94,14 +115,4 @@ export class OrgMembersComponent implements AfterViewInit, OnInit {
             }
         });
     }
-
-    public removeSelectedOrgMembers(): void {
-        Promise.all(this.selection.selected.map(member => {
-            return this.orgService.RemoveMyOrgMember(member.userId).then(() => {
-                this.toast.showInfo('Removed successfully');
-            }).catch(error => {
-                this.toast.showError(error.message);
-            });
-        }));
-    }
 }

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

@@ -1,42 +1,42 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+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 { MatDialogModule } from '@angular/material/dialog';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatIconModule } from '@angular/material/icon';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+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 { ProjectMemberCreateDialogModule } from '../../../modules/add-member-dialog/project-member-create-dialog.module';
+import { OrgMembersRoutingModule } from './org-members-routing.module';
 import { OrgMembersComponent } from './org-members.component';
 
 
 @NgModule({
     declarations: [OrgMembersComponent],
     imports: [
+        OrgMembersRoutingModule,
         CommonModule,
-        FormsModule,
-        ProjectMemberCreateDialogModule,
-        HasRoleModule,
+        MatAutocompleteModule,
+        MatChipsModule,
         MatButtonModule,
-        MatDialogModule,
+        HasRoleModule,
+        MatCheckboxModule,
+        MatIconModule,
         MatTableModule,
         MatPaginatorModule,
-        MatIconModule,
-        RouterModule,
-        MatProgressSpinnerModule,
-        MatCheckboxModule,
+        MatSortModule,
         MatTooltipModule,
+        ReactiveFormsModule,
+        MatProgressSpinnerModule,
+        FormsModule,
         TranslateModule,
     ],
-    exports: [
-        OrgMembersComponent,
-    ],
 })
 export class OrgMembersModule { }

console/src/app/pages/orgs/orgs-routing.module.ts

@@ -32,6 +32,10 @@ const routes: Routes = [
         },
         loadChildren: () => import('./password-policy/password-policy.module').then(m => m.PasswordPolicyModule),
     },
+    {
+        path: ':orgid/members',
+        loadChildren: () => import('./org-members/org-members.module').then(m => m.OrgMembersModule),
+    },
     {
         path: ':id',
         component: OrgDetailComponent,

console/src/app/pages/orgs/orgs.module.ts

@@ -17,9 +17,9 @@ import { CardModule } from 'src/app/modules/card/card.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
 
 import { ChangesModule } from '../../modules/changes/changes.module';
+import { OrgContributorsModule } from './org-contributors/org-contributors.module';
 import { OrgDetailComponent } from './org-detail/org-detail.component';
 import { OrgGridComponent } from './org-grid/org-grid.component';
-import { OrgMembersModule } from './org-members/org-members.module';
 import { OrgsRoutingModule } from './orgs-routing.module';
 import { PolicyGridComponent } from './policy-grid/policy-grid.component';
 
@@ -28,7 +28,7 @@ import { PolicyGridComponent } from './policy-grid/policy-grid.component';
     imports: [
         CommonModule,
         OrgsRoutingModule,
-        OrgMembersModule,
+        OrgContributorsModule,
         FormsModule,
         HasRoleModule,
         MatFormFieldModule,