mirror of
https://github.com/andwati/zitadel.git
synced 2026-11-13 17:35:12 +00:00
fix(console): cleanup user detail and member components, user/me redirect, permission guards, filter, org policy guard, user table, scss cleanup (#808)
* fix: remove user.write guard for filtering * border color * fix user routing from member tables * idp detail layout * generic contact component * fix redirect to auth user, user grant disable * disable policy action without permission, i18n * user-create flex fix, contact ng-content * rm unused styles * sidenav divider * lint * chore(deps-dev): bump @angular/cli from 10.1.3 to 10.1.4 in /console (#806) * fix: user session with external login (#797) * fix: user session with external login * fix: tests * fix: tests * fix: change idp config name * fix(container): stop copying / and instead only copy zitadel (#691) * chore: stop copying / and instead only copy zitadel * Update Dockerfile * Update release.yml * enable anchors debug * fix(container): don't copy alpine content into scratch execpt pwd * chore: remove need step * merge master * chore(deps-dev): bump @angular/cli from 10.1.3 to 10.1.4 in /console Bumps [@angular/cli](https://github.com/angular/angular-cli) from 10.1.3 to 10.1.4. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/compare/v10.1.3...v10.1.4) Signed-off-by: dependabot[bot] <[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
co-authored by
Fabi
Florian Forster
dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
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
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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 { }
|
||||
Reference in New Issue
Block a user