feat(console): angular 10, iam settings, timestamp to date pipe, org iam indicator, general gui fixes and i18n (#270)

* prettier member dialog, iam indicator

* changes i18n

* fix timestamp conversion, timestamp to date pipe

* rm create, update iam policy

* add iam policy

* add iam section, members component

* add iam contributors

* gen admin protos

* iam member search

* update angular

* update cdk material

* add module for iam members

* add iam roles to member dialog

* home shortcuts

* project view, i18n

* lint

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

@@ -6,7 +6,7 @@
     <app-search-user-autocomplete (selectionChanged)="users = $event"></app-search-user-autocomplete>
 
     <mat-form-field class="full-width" appearance="outline"
-        *ngIf="creationType === CreationType.PROJECT_OWNED || creationType === CreationType.PROJECT_GRANTED">
+        *ngIf="creationType === CreationType.PROJECT_OWNED || creationType === CreationType.PROJECT_GRANTED || creationType === CreationType.IAM">
         <mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
         <mat-select [(ngModel)]="roles" multiple>
             <mat-option *ngFor="let role of memberRoleOptions" [value]="role">

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

@@ -1,6 +1,7 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { ProjectRole, User } from 'src/app/proto/generated/management_pb';
+import { AdminService } from 'src/app/services/admin.service';
 import { ProjectService } from 'src/app/services/project.service';
 import { ToastService } from 'src/app/services/toast.service';
 
@@ -8,6 +9,7 @@ export enum CreationType {
     PROJECT_OWNED = 0,
     PROJECT_GRANTED = 1,
     ORG = 2,
+    IAM = 3,
 }
 @Component({
     selector: 'app-member-create-dialog',
@@ -23,6 +25,7 @@ export class MemberCreateDialogComponent {
     public memberRoleOptions: string[] = [];
     constructor(
         private projectService: ProjectService,
+        private adminService: AdminService,
         public dialogRef: MatDialogRef<MemberCreateDialogComponent>,
         @Inject(MAT_DIALOG_DATA) public data: any,
         toastService: ToastService,
@@ -43,6 +46,13 @@ export class MemberCreateDialogComponent {
             }).catch(error => {
                 toastService.showError(error.message);
             });
+        } else if (this.creationType === CreationType.IAM) {
+            this.adminService.GetIamMemberRoles().then(resp => {
+                this.memberRoleOptions = resp.toObject().rolesList;
+                console.log(this.memberRoleOptions);
+            }).catch(error => {
+                toastService.showError(error.message);
+            });
         }
     }
 

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

@@ -3,7 +3,7 @@
 <div class="scroll-container" appScrollable (scrollPosition)="scrollHandler($event)">
     <li class="item change-item-back" *ngFor="let event of data | async">
         <span class="seq">
-            {{dateFromTimestamp(event.changeDate) | localizedDate: 'EEE dd. MMM, HH:mm'}}
+            {{event.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
         </span>
         <span class="editor">{{event.editor}}</span>
         <span class="desc">{{'CHANGES.EVENTS.'+event.eventType | translate}}</span>

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

@@ -1,5 +1,4 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { BehaviorSubject, from, Observable, of } from 'rxjs';
 import { catchError, scan, take, tap } from 'rxjs/operators';
 import { Change, Changes } from 'src/app/proto/generated/management_pb';
@@ -19,6 +18,7 @@ export enum ChangeType {
 export class ChangesComponent implements OnInit {
     @Input() public changeType: ChangeType = ChangeType.USER;
     @Input() public id: string = '';
+    @Input() public sortDirectionAsc: boolean = true;
     public errorMessage: string = '';
 
     // Source data
@@ -74,7 +74,6 @@ export class ChangesComponent implements OnInit {
                 break;
             case ChangeType.ORG: more = this.mgmtUserService.OrgChanges(this.id, 10, cursor);
                 break;
-
         }
 
         this.mapAndUpdate(more);
@@ -84,8 +83,8 @@ export class ChangesComponent implements OnInit {
     private getCursor(): number {
         const current = this._data.value;
         if (current.length) {
-            // return true ? current[0].sequence :
-            return current[current.length - 1].sequence;
+            return !this.sortDirectionAsc ? current[0].sequence :
+                current[current.length - 1].sequence;
         }
         return 0;
     }
@@ -126,9 +125,4 @@ export class ChangesComponent implements OnInit {
             take(1),
         ).subscribe();
     }
-
-    public dateFromTimestamp(date: Timestamp.AsObject): any {
-        const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000);
-        return ts;
-    }
 }

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

@@ -11,9 +11,10 @@
     </div>
     <span class="fill-space"></span>
     <ng-template appHasRole [appHasRole]="['project.role.delete']">
-        <button [disabled]="disabled" matTooltip="{{'PROJECT.ROLE.DELETE' | translate}}" class="icon-button"
-            (click)="deleteSelectedRoles()" mat-icon-button *ngIf="selection.hasValue() && actionsVisible">
-            <mat-icon>delete_outline</mat-icon>
+        <button color="warn" [disabled]="disabled" matTooltip="{{'PROJECT.ROLE.DELETE' | translate}}"
+            class="icon-button" (click)="deleteSelectedRoles()" mat-icon-button
+            *ngIf="selection.hasValue() && actionsVisible">
+            <i class="las la-trash"></i>
         </button>
     </ng-template>
     <ng-template appHasRole [appHasRole]="['project.role.write:' + projectId, 'project.role.write']">
@@ -66,7 +67,7 @@
         <ng-container matColumnDef="creationDate">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.CREATIONDATE' | translate }} </th>
             <td mat-cell *matCellDef="let role">
-                <span>{{dateFromTimestamp(role.creationDate) | date: 'dd. MMM, HH:mm' }}</span>
+                <span>{{role.creationDate | timestampToDate | date: 'dd. MMM, HH:mm' }}</span>
             </td>
         </ng-container>
 

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

@@ -2,7 +2,6 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTable } from '@angular/material/table';
-import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { tap } from 'rxjs/operators';
 import { ProjectRole } from 'src/app/proto/generated/management_pb';
 import { ProjectService } from 'src/app/services/project.service';
@@ -108,9 +107,4 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit {
                 this.toast.showError(data.message);
             });
     }
-
-    public dateFromTimestamp(date: Timestamp.AsObject): any {
-        const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000);
-        return ts;
-    }
 }

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

@@ -11,6 +11,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { PipesModule } from 'src/app/pipes/pipes.module';
 
 import { ProjectRolesComponent } from './project-roles.component';
 
@@ -27,6 +28,7 @@ import { ProjectRolesComponent } from './project-roles.component';
         MatCheckboxModule,
         RouterModule,
         MatTooltipModule,
+        PipesModule,
         TranslateModule,
         MatMenuModule,
     ],

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

@@ -39,14 +39,20 @@
             <input matInput type="text" [formControl]="globalEmailControl" />
         </mat-form-field>
 
-        <button mat-icon-button (click)="getGlobalUser()">
-            <mat-icon>search</mat-icon>
+        <button color="primary" mat-icon-button (click)="getGlobalUser()">
+            <i class="las la-search"></i>
         </button>
     </div>
 
-    <p *ngIf="target == UserTarget.EXTERNAL && users.length > 0">{{'USER.SEARCH.FOUND' | translate}}: <span
-            *ngFor="let user of users; index as i">{{user.email}} <mat-icon class="sm-dlt" (click)="users.splice(i, 1)">
-                remove_circle</mat-icon></span></p>
+    <div *ngIf="target == UserTarget.EXTERNAL && users.length > 0">
+        <span class="found-label">{{'USER.SEARCH.FOUND' | translate}}:</span>
+        <div class="found-user-row" *ngFor="let user of users; index as i">
+            <span>{{user.email}}</span>
+            <button mat-icon-button>
+                <i class="las la-minus-circle" (click)="users.splice(i, 1)"></i>
+            </button>
+        </div>
+    </div>
 
     <p class="target-desc">{{(target == UserTarget.SELF ? 'USER.TARGET.SELF' : 'USER.TARGET.EXTERNAL') | translate}}
         <a (click)="changeTarget()">{{'USER.TARGET.CLICKHERE' | translate}}</a>

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

@@ -33,4 +33,14 @@
 .sm-dlt {
     cursor: pointer;
     font-size: .8rem;
+}
+
+.found-user-row {
+    display: flex;
+    align-items: center;
+}
+
+.found-label {
+    font-size: .9rem;
+    color: #81868a;
 }