andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-07 22:55:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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] <[email protected]>

Co-authored-by: Fabi <[email protected]>
Co-authored-by: Florian Forster <[email protected]>
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] <[email protected]>

Co-authored-by: Fabi <[email protected]>
Co-authored-by: Florian Forster <[email protected]>
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] <[email protected]>

Co-authored-by: Fabi <[email protected]>
Co-authored-by: Florian Forster <[email protected]>
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] <[email protected]>

Co-authored-by: Fabi <[email protected]>
Co-authored-by: Florian Forster <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Max Peintner <[email protected]>

* 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] <[email protected]>

Co-authored-by: Fabi <[email protected]>
Co-authored-by: Florian Forster <[email protected]>
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 <[email protected]>
Co-authored-by: Florian Forster <[email protected]>
This commit is contained in:
Max Peintner
2020-10-08 10:09:10 +02:00
committed by GitHub
co-authored by Fabi Florian Forster dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
parent 5f0cddac37
commit 0bbc9c7c49
129 changed files with 2002 additions and 2208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/accounts-card/accounts-card.component.html
+2 -2
View File
@@ -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
+4 -4
View File
@@ -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
+1 -1
View File
@@ -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
-1
View File
@@ -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
+2 -1
View File
@@ -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
+1 -1
View File
@@ -34,7 +34,7 @@
.desc {
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
}
console/src/app/modules/card/card.scss
+1 -1
View File
@@ -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
+4 -4
View File
@@ -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 -2
View File
@@ -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
+12 -1
View File
@@ -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
+1 -5
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -26,7 +26,7 @@ tr {
outline: none;
&.disabled * {
color: #8795a1;
color: var(--grey);
}
}
console/src/app/modules/idp/idp.component.html
+88 -84
View File
@@ -1,91 +1,95 @@
<app-detail-layout [backRouterLink]="backroutes" [title]="'IDP.DETAIL.TITLE' | translate"
[description]="'IDP.DETAIL.DESCRIPTION' | translate">
<div class="container">
<form (ngSubmit)="updateIdp()">
<ng-container [formGroup]="idpForm">
<div class="content">
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'IDP.ID' | translate }}</mat-label>
<input matInput formControlName="id" />
</mat-form-field>
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'IDP.NAME' | translate }}</mat-label>
<input matInput formControlName="name" />
</mat-form-field>
<!--<mat-form-field appearance="outline" class="formfield">
[description]="'IDP.DETAIL.DESCRIPTION' | translate">
<div class="container">
<form (ngSubmit)="updateIdp()">
<ng-container [formGroup]="idpForm">
<div class="content">
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'IDP.ID' | translate }}</mat-label>
<input matInput formControlName="id" />
</mat-form-field>
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'IDP.NAME' | translate }}</mat-label>
<input matInput formControlName="name" />
</mat-form-field>
<!--<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'IDP.LOGOSRC' | translate }}</mat-label>
<input matInput formControlName="logoSrc" />
</mat-form-field>-->
</div>
</ng-container>
<div class="btn-wrapper">
<button color="primary" mat-raised-button class="continue-button" [disabled]="idpForm.invalid"
type="submit">
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
</form>
<ng-container *ngIf="oidcConfigForm">
<h2>{{'IDP.DETAIL.OIDC.TITLE' | translate}}</h2>
<p>{{'IDP.DETAIL.OIDC.DESCRIPTION' | translate}}</p>
<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>
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'IDP.CLIENTID' | translate }}</mat-label>
<input matInput formControlName="clientId" />
</mat-form-field>
<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>
<mat-form-field appearance="outline" class="formfield fullwidth">
<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 (removed)="removeScope(scope)">
{{scope}} <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input [matChipInputFor]="chipScopesList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addScope($event)">
</mat-chip-list>
</mat-form-field>
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</mat-label>
<mat-select formControlName="idpDisplayNameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
{{ 'IDP.MAPPINTFIELD.'+field | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</mat-label>
<mat-select formControlName="usernameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
{{ 'IDP.MAPPINTFIELD.'+field | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</ng-container>
<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>
<button color="primary" mat-raised-button class="continue-button" [disabled]="idpForm.invalid" type="submit">
{{ 'ACTIONS.SAVE' | translate }}
</button>
</form>
<h2 *ngIf="oidcConfigForm">{{'IDP.DETAIL.OIDC.TITLE' | translate}}</h2>
<form (ngSubmit)="updateOidcConfig()" *ngIf="oidcConfigForm">
<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>
<div class="content">
<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>
<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
(removed)="removeScope(scope)">
{{scope}} <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input [matChipInputFor]="chipScopesList" [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">
<mat-option *ngFor="let field of mappingFields" [value]="field">
{{ 'IDP.MAPPINTFIELD.'+field | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</mat-label>
<mat-select formControlName="usernameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
{{ 'IDP.MAPPINTFIELD.'+field | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</ng-container>
<button color="primary" mat-raised-button class="continue-button" [disabled]="oidcConfigForm.invalid" type="submit">
{{ 'ACTIONS.SAVE' | translate }}
</button>
</form>
</div>
</app-detail-layout>
</app-detail-layout>
console/src/app/modules/idp/idp.component.scss
+19 -9
View File
@@ -9,6 +9,7 @@
.content {
display: flex;
flex-direction: row;
margin: 0 -.5rem;
flex-wrap: wrap;
@@ -16,26 +17,35 @@
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%;
}
}
}
.continue-button {
margin-bottom: 4rem;
display: block;
padding: .5rem 4rem;
.btn-wrapper {
display: flex;
justify-content: flex-end;
@media only screen and (max-width: 450px) {
margin-top: 1rem;
margin-bottom: 2rem;
.continue-button {
margin-bottom: 4rem;
display: block;
padding: .5rem 4rem;
@media only screen and (max-width: 450px) {
margin-top: 1rem;
margin-bottom: 2rem;
}
}
}
console/src/app/modules/members-table/members-table.component.html
+98
View File
@@ -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
+62
View File
@@ -0,0 +1,62 @@
.icon-button {
margin-right: .5rem;
}
.table-wrapper {
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;
}
}
tr {
button {
visibility: hidden;
}
&:hover {
button {
visibility: visible;
}
}
}
.sa-icon {
display: block;
width: 32px;
margin: 0 .5rem;
i {
margin: auto;
}
}
}
.pointer {
outline: none;
cursor: pointer;
}
console/src/app/modules/members-table/members-table.component.spec.ts
+34
View File
@@ -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 { MembersTableComponent } from './members-table.component';
describe('MembersTableComponent', () => {
let component: MembersTableComponent;
let fixture: ComponentFixture<MembersTableComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MembersTableComponent],
imports: [
NoopAnimationsModule,
MatPaginatorModule,
MatSortModule,
MatTableModule,
],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MembersTableComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should compile', () => {
expect(component).toBeTruthy();
});
});
console/src/app/modules/members-table/members-table.component.ts
+83
View File
@@ -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
+45
View File
@@ -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
+1 -1
View File
@@ -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
+3 -2
View File
@@ -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
+1 -1
View File
@@ -3,7 +3,7 @@
}
.desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}
console/src/app/modules/policies/login-policy/login-policy.component.scss
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+13 -83
View File
@@ -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"
[timestamp]="dataSource.viewTimestamp" [selection]="selection" [loading]="dataSource?.loading$ | async">
<ng-template appHasRole actions
<app-members-table *ngIf="project" [dataSource]="dataSource" [memberRoleOptions]="memberRoleOptions"
(updateRoles)="updateRoles($event.member, $event.change)" [factoryLoadFunc]="changePageFactory"
(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
*ngIf="selection.hasValue()">
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="del-button" mat-raised-button>
<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>
<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>
</app-members-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
+3 -36
View File
@@ -1,40 +1,7 @@
.icon-button {
.del-button {
margin-right: .5rem;
}
.table-wrapper {
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;
:root {
width: 100%;
}
console/src/app/modules/project-members/project-members.component.ts
+60 -37
View File
@@ -1,12 +1,18 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component, ViewChild } from '@angular/core';
import { Component, EventEmitter } 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 displayedColumns: string[] = ['select', 'userId', 'firstname', 'lastname', 'username', 'email', 'roles'];
public changePageFactory!: Function;
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 {
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 removeProjectMember(member: ProjectMemberView.AsObject | ProjectGrantMemberView.AsObject): void {
if (this.projectType === ProjectType.PROJECTTYPE_OWNED) {
this.mgmtService.RemoveProjectMember(this.project.projectId, member.userId).then(() => {
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 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
+3 -24
View File
@@ -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
+1 -1
View File
@@ -3,7 +3,7 @@
}
.desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}
console/src/app/modules/refresh-table/refresh-table.component.scss
+6 -5
View File
@@ -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 {
width: 100%;
overflow-x: auto;
}
// .table-wrapper {
// width: 100%;
// overflow-x: auto;
// }
console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts
+11 -4
View File
@@ -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 { debounceTime, switchMap, tap } from 'rxjs/operators';
import { forkJoin, from, Subject } from 'rxjs';
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
+5 -1
View File
@@ -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
+12 -6
View File
@@ -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 { debounceTime, switchMap, tap } from 'rxjs/operators';
import { from, Subject } from 'rxjs';
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
+2 -2
View File
@@ -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
+2
View File
@@ -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
+6 -6
View File
@@ -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"
[checked]="selection.hasValue() && isAllSelected()"
<mat-checkbox [disabled]="allowWrite == false" 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()"
<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
+1 -1
View File
@@ -40,5 +40,5 @@
.no-roles {
font-size: 14px;
color: #8795a1;
color: var(--grey);
}
console/src/app/modules/user-grants/user-grants.component.ts
+1 -1
View File
@@ -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
+1 -1
View File
@@ -4,7 +4,7 @@
}
.desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}