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

feat: console flat navigation, settings (#3581)

Browse Source 
* instance routing

* instance naming

* org list

* rm isonsystem

* breadcrumb  type

* routing

* instance members

* fragment refresh org

* settings pages

* settings list, sidenav grouping, i18n

* org-settings, policy changes

* lint

* grid

* rename grid

* fallback to general

* cleanup

* general settings, remove cards

* sidenav for settings, label policy

* i18n

* header, nav backbuild

* general, project nav rehaul

* login text background adapt

* org nav anim

* org, instance settings, fix policy layout, roles

* i18n, active route for project

* lint
This commit is contained in:
Max Peintner
2022-05-09 15:01:36 +02:00
committed by GitHub
parent 94e420bb24
commit 06e3330d2e
188 changed files with 4046 additions and 3639 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/pages/actions/actions.component.ts
+1 -6
View File
@@ -39,16 +39,11 @@ export class ActionsComponent {
private dialog: MatDialog,
private toast: ToastService,
) {
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
breadcrumbService.setBreadcrumb([bread]);
this.loadFlow();
}
console/src/app/pages/domains/domains.component.ts
+1 -6
View File
@@ -26,16 +26,11 @@ export class DomainsComponent implements OnInit {
private dialog: MatDialog,
breadcrumbService: BreadcrumbService,
) {
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
breadcrumbService.setBreadcrumb([bread]);
}
ngOnInit(): void {
console/src/app/pages/failed-events/failed-events.component.ts
+3 -3
View File
@@ -37,9 +37,9 @@ export class FailedEventsComponent implements AfterViewInit {
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
type: BreadcrumbType.INSTANCE,
name: 'Instance',
routerLink: ['/instance'],
}),
];
this.breadcrumbService.setBreadcrumb(breadcrumbs);
console/src/app/pages/grants/grants.component.ts
+1 -11
View File
@@ -41,11 +41,6 @@ export class GrantsComponent implements OnDestroy {
this.isZitadel = iam.iamProjectId === this.projectId;
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
}),
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],
@@ -62,16 +57,11 @@ export class GrantsComponent implements OnDestroy {
});
}
} else if (context === UserGrantContext.NONE) {
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
breadcrumbService.setBreadcrumb([bread]);
}
});
}
console/src/app/pages/home/home.component.ts
+3 -6
View File
@@ -11,16 +11,13 @@ export class HomeComponent {
public dark: boolean = true;
constructor(public authService: GrpcAuthService, breadcrumbService: BreadcrumbService) {
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
breadcrumbService.setBreadcrumb([bread]);
const theme = localStorage.getItem('theme');
this.dark = theme === 'dark-theme' ? true : theme === 'light-theme' ? false : true;
}
console/src/app/pages/iam-views/iam-views.component.ts
+3 -3
View File
@@ -28,9 +28,9 @@ export class IamViewsComponent implements AfterViewInit {
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
type: BreadcrumbType.INSTANCE,
name: 'Instance',
routerLink: ['/instance'],
}),
];
this.breadcrumbService.setBreadcrumb(breadcrumbs);
console/src/app/pages/iam/iam-members/iam-members-routing.module.ts
-18
View File
@@ -1,18 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { IamMembersComponent } from './iam-members.component';
const routes: Routes = [
{
path: '',
component: IamMembersComponent,
data: { animation: 'AddPage' },
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class IamMembersRoutingModule { }
console/src/app/pages/iam/iam-routing.module.ts
-140
View File
@@ -1,140 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from 'src/app/guards/auth.guard';
import { RoleGuard } from 'src/app/guards/role.guard';
import { PolicyComponentServiceType, PolicyComponentType } from 'src/app/modules/policies/policy-component-types.enum';
import { IamComponent } from './iam.component';
const routes: Routes = [
{
path: '',
component: IamComponent,
canActivate: [AuthGuard, RoleGuard],
data: {
roles: ['iam.read'],
},
},
{
path: 'members',
loadChildren: () => import('./iam-members/iam-members.module').then((m) => m.IamMembersModule),
canActivate: [AuthGuard, RoleGuard],
data: {
roles: ['iam.member.read'],
},
},
{
path: 'idp',
children: [
{
path: 'create',
loadChildren: () => import('src/app/modules/idp-create/idp-create.module').then((m) => m.IdpCreateModule),
canActivate: [AuthGuard, RoleGuard],
data: {
roles: ['iam.idp.write'],
serviceType: PolicyComponentServiceType.ADMIN,
},
},
{
path: ':id',
loadChildren: () => import('src/app/modules/idp/idp.module').then((m) => m.IdpModule),
canActivate: [AuthGuard, RoleGuard],
data: {
roles: ['iam.idp.read'],
serviceType: PolicyComponentServiceType.ADMIN,
},
},
],
},
{
path: 'policy',
children: [
{
path: PolicyComponentType.AGE,
data: {
serviceType: PolicyComponentServiceType.ADMIN,
},
loadChildren: () =>
import('src/app/modules/policies/password-age-policy/password-age-policy.module').then(
(m) => m.PasswordAgePolicyModule,
),
},
{
path: PolicyComponentType.LOCKOUT,
data: {
serviceType: PolicyComponentServiceType.ADMIN,
},
loadChildren: () =>
import('src/app/modules/policies/password-lockout-policy/password-lockout-policy.module').then(
(m) => m.PasswordLockoutPolicyModule,
),
},
{
path: PolicyComponentType.PRIVATELABEL,
data: {
serviceType: PolicyComponentServiceType.ADMIN,
},
loadChildren: () =>
import('src/app/modules/policies/private-labeling-policy/private-labeling-policy.module').then(
(m) => m.PrivateLabelingPolicyModule,
),
},
{
path: PolicyComponentType.COMPLEXITY,
data: {
serviceType: PolicyComponentServiceType.ADMIN,
},
loadChildren: () =>
import('src/app/modules/policies/password-complexity-policy/password-complexity-policy.module').then(
(m) => m.PasswordComplexityPolicyModule,
),
},
{
path: PolicyComponentType.IAM,
data: {
serviceType: PolicyComponentServiceType.ADMIN,
},
loadChildren: () =>
import('src/app/modules/policies/org-iam-policy/org-iam-policy.module').then((m) => m.OrgIamPolicyModule),
},
{
path: PolicyComponentType.LOGIN,
data: {
serviceType: PolicyComponentServiceType.ADMIN,
},
loadChildren: () =>
import('src/app/modules/policies/login-policy/login-policy.module').then((m) => m.LoginPolicyModule),
},
{
path: PolicyComponentType.MESSAGETEXTS,
data: {
serviceType: PolicyComponentServiceType.ADMIN,
},
loadChildren: () =>
import('src/app/modules/policies/message-texts/message-texts.module').then((m) => m.MessageTextsPolicyModule),
},
{
path: PolicyComponentType.LOGINTEXTS,
data: {
serviceType: PolicyComponentServiceType.ADMIN,
},
loadChildren: () =>
import('src/app/modules/policies/login-texts/login-texts.module').then((m) => m.LoginTextsPolicyModule),
},
{
path: PolicyComponentType.PRIVACYPOLICY,
data: {
serviceType: PolicyComponentServiceType.ADMIN,
},
loadChildren: () =>
import('src/app/modules/policies/privacy-policy/privacy-policy.module').then((m) => m.PrivacyPolicyModule),
},
],
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class IamRoutingModule {}
console/src/app/pages/iam/iam.component.spec.ts
-25
View File
@@ -1,25 +0,0 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IamComponent } from './iam.component';
describe('IamComponent', () => {
let component: IamComponent;
let fixture: ComponentFixture<IamComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [IamComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(IamComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/pages/projects/owned-projects/project-roles/project-roles-routing.module.ts → console/src/app/pages/instance-settings/instance-settings-routing.module.ts
+3 -4
View File
@@ -1,13 +1,12 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProjectRolesComponent } from './project-roles.component';
import { InstanceSettingsComponent } from './instance-settings.component';
const routes: Routes = [
{
path: '',
component: ProjectRolesComponent,
data: { animation: 'HomePage' },
component: InstanceSettingsComponent,
},
];
@@ -15,4 +14,4 @@ const routes: Routes = [
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ProjectRolesRoutingModule {}
export class InstanceSettingsRoutingModule {}
console/src/app/pages/instance-settings/instance-settings.component.html
+16
View File
@@ -0,0 +1,16 @@
<div class="max-width-container">
<div class="settings-top-view">
<div>
<div class="settings-title-row">
<h1>{{ 'SETTINGS.INSTANCE.TITLE' | translate }}</h1>
</div>
<p class="desc cnsl-secondary-text">{{ 'SETTINGS.INSTANCE.DESCRIPTION' | translate }}</p>
</div>
<span class="fill-space"></span>
</div>
<cnsl-settings-list
[selectedId]="id"
[serviceType]="PolicyComponentServiceType.ADMIN"
[settingsList]="settingsList"
></cnsl-settings-list>
</div>
console/src/app/pages/instance-settings/instance-settings.component.scss
+34
View File
@@ -0,0 +1,34 @@
.settings-top-view {
display: flex;
align-items: center;
padding-top: 2rem;
.settings-title-row {
display: flex;
align-items: center;
h1 {
margin: 0;
}
a i {
font-size: 1.2rem;
height: 1.2rem;
line-height: 1.2rem;
}
}
.fill-space {
flex: 1;
}
.actions {
display: flex;
align-items: center;
}
}
.desc {
margin-bottom: 2rem;
font-size: 14px;
}
console/src/app/pages/instance-settings/instance-settings.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { InstanceSettingsComponent } from './instance-settings.component';
describe('InstanceSettingsComponent', () => {
let component: InstanceSettingsComponent;
let fixture: ComponentFixture<InstanceSettingsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ InstanceSettingsComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(InstanceSettingsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/pages/instance-settings/instance-settings.component.ts
+60
View File
@@ -0,0 +1,60 @@
import { Component } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { take } from 'rxjs';
import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import {
BRANDING,
COMPLEXITY,
GENERAL,
IDP,
LOCKOUT,
LOGIN,
LOGINTEXTS,
MESSAGETEXTS,
NOTIFICATIONPROVIDERS,
NOTIFICATIONS,
PRIVACYPOLICY,
} from '../../modules/settings-list/settings';
@Component({
selector: 'cnsl-instance-settings',
templateUrl: './instance-settings.component.html',
styleUrls: ['./instance-settings.component.scss'],
})
export class InstanceSettingsComponent {
public id: string = '';
public PolicyComponentServiceType: any = PolicyComponentServiceType;
public settingsList: SidenavSetting[] = [
GENERAL,
LOGIN,
COMPLEXITY,
LOCKOUT,
IDP,
NOTIFICATIONS,
NOTIFICATIONPROVIDERS,
BRANDING,
MESSAGETEXTS,
LOGINTEXTS,
PRIVACYPOLICY,
];
constructor(breadcrumbService: BreadcrumbService, activatedRoute: ActivatedRoute) {
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.INSTANCE,
name: 'Instance',
routerLink: ['/instance'],
}),
];
breadcrumbService.setBreadcrumb(breadcrumbs);
activatedRoute.queryParams.pipe(take(1)).subscribe((params: Params) => {
const { id } = params;
if (id) {
this.id = id;
}
});
}
}
console/src/app/pages/instance-settings/instance-settings.module.ts
+14
View File
@@ -0,0 +1,14 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { SettingsListModule } from 'src/app/modules/settings-list/settings-list.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { InstanceSettingsRoutingModule } from './instance-settings-routing.module';
import { InstanceSettingsComponent } from './instance-settings.component';
@NgModule({
declarations: [InstanceSettingsComponent],
imports: [CommonModule, InstanceSettingsRoutingModule, SettingsListModule, HasRolePipeModule, TranslateModule],
})
export class InstanceSettingsModule {}
console/src/app/pages/iam/iam-members/iam-members-datasource.ts → console/src/app/pages/instance/instance-members/instance-members-datasource.ts
+17 -17
View File
@@ -10,7 +10,7 @@ import { AdminService } from 'src/app/services/admin.service';
* encapsulate all logic for fetching and manipulating the displayed data
* (including sorting, pagination, and filtering).
*/
export class IamMembersDataSource extends DataSource<Member.AsObject> {
export class InstanceMembersDataSource extends DataSource<Member.AsObject> {
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public membersSubject: BehaviorSubject<Member.AsObject[]> = new BehaviorSubject<Member.AsObject[]>([]);
@@ -21,28 +21,28 @@ export class IamMembersDataSource extends DataSource<Member.AsObject> {
super();
}
public loadMembers(
pageIndex: number, pageSize: number): void {
public loadMembers(pageIndex: number, pageSize: number): void {
const offset = pageIndex * pageSize;
this.loadingSubject.next(true);
from(this.service.listIAMMembers(pageSize, offset)).pipe(
map(resp => {
this.totalResult = resp.details?.totalResult || 0;
if (resp.details?.viewTimestamp) {
this.viewTimestamp = resp.details?.viewTimestamp;
}
return resp.resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
this.membersSubject.next(members);
});
from(this.service.listIAMMembers(pageSize, offset))
.pipe(
map((resp) => {
this.totalResult = resp.details?.totalResult || 0;
if (resp.details?.viewTimestamp) {
this.viewTimestamp = resp.details?.viewTimestamp;
}
return resp.resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
)
.subscribe((members) => {
this.membersSubject.next(members);
});
}
/**
* Connect this data source to the table. The table will only update when
* the returned stream emits new items.
console/src/app/pages/instance/instance-members/instance-members-routing.module.ts
+18
View File
@@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { InstanceMembersComponent } from './instance-members.component';
const routes: Routes = [
{
path: '',
component: InstanceMembersComponent,
data: { animation: 'AddPage' },
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class IamMembersRoutingModule {}
console/src/app/pages/iam/iam-members/iam-members.component.html → console/src/app/pages/instance/instance-members/instance-members.component.html
View File
console/src/app/pages/iam/iam-members/iam-members.component.scss → console/src/app/pages/instance/instance-members/instance-members.component.scss
View File
console/src/app/pages/iam/iam-members/iam-members.component.spec.ts → console/src/app/pages/instance/instance-members/instance-members.component.spec.ts
+10 -12
View File
@@ -3,23 +3,21 @@ import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { IamMembersComponent } from './iam-members.component';
import { InstanceMembersComponent } from './instance-members.component';
describe('IamMembersComponent', () => {
let component: IamMembersComponent;
let fixture: ComponentFixture<IamMembersComponent>;
let component: InstanceMembersComponent;
let fixture: ComponentFixture<InstanceMembersComponent>;
beforeEach(
waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [IamMembersComponent],
imports: [NoopAnimationsModule, MatSortModule, MatTableModule],
}).compileComponents();
}),
);
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [InstanceMembersComponent],
imports: [NoopAnimationsModule, MatSortModule, MatTableModule],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(IamMembersComponent);
fixture = TestBed.createComponent(InstanceMembersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
console/src/app/pages/iam/iam-members/iam-members.component.ts → console/src/app/pages/instance/instance-members/instance-members.component.ts
+10 -10
View File
@@ -9,16 +9,16 @@ import { AdminService } from 'src/app/services/admin.service';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ToastService } from 'src/app/services/toast.service';
import { IamMembersDataSource } from './iam-members-datasource';
import { InstanceMembersDataSource } from './instance-members-datasource';
@Component({
selector: 'cnsl-iam-members',
templateUrl: './iam-members.component.html',
styleUrls: ['./iam-members.component.scss'],
selector: 'cnsl-instance-members',
templateUrl: './instance-members.component.html',
styleUrls: ['./instance-members.component.scss'],
})
export class IamMembersComponent {
export class InstanceMembersComponent {
public INITIALPAGESIZE: number = 25;
public dataSource!: IamMembersDataSource;
public dataSource!: InstanceMembersDataSource;
public memberRoleOptions: string[] = [];
public changePageFactory!: Function;
@@ -34,14 +34,14 @@ export class IamMembersComponent {
) {
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
type: BreadcrumbType.INSTANCE,
name: 'Instance',
routerLink: ['/instance'],
}),
];
breadcrumbService.setBreadcrumb(breadcrumbs);
this.dataSource = new IamMembersDataSource(this.adminService);
this.dataSource = new InstanceMembersDataSource(this.adminService);
this.dataSource.loadMembers(0, 25);
this.getRoleOptions();
console/src/app/pages/iam/iam-members/iam-members.module.ts → console/src/app/pages/instance/instance-members/instance-members.module.ts
+4 -4
View File
@@ -11,11 +11,11 @@ import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.
import { MembersTableModule } from 'src/app/modules/members-table/members-table.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { IamMembersRoutingModule } from './iam-members-routing.module';
import { IamMembersComponent } from './iam-members.component';
import { IamMembersRoutingModule } from './instance-members-routing.module';
import { InstanceMembersComponent } from './instance-members.component';
@NgModule({
declarations: [IamMembersComponent],
declarations: [InstanceMembersComponent],
imports: [
IamMembersRoutingModule,
DetailLayoutModule,
@@ -31,4 +31,4 @@ import { IamMembersComponent } from './iam-members.component';
MemberCreateDialogModule,
],
})
export class IamMembersModule {}
export class InstanceMembersModule {}
console/src/app/pages/instance/instance-routing.module.ts
+55
View File
@@ -0,0 +1,55 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from 'src/app/guards/auth.guard';
import { RoleGuard } from 'src/app/guards/role.guard';
import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
import { InstanceComponent } from './instance.component';
const routes: Routes = [
{
path: '',
component: InstanceComponent,
canActivate: [AuthGuard, RoleGuard],
data: {
roles: ['iam.read'],
},
},
{
path: 'members',
loadChildren: () => import('./instance-members/instance-members.module').then((m) => m.InstanceMembersModule),
canActivate: [AuthGuard, RoleGuard],
data: {
roles: ['iam.member.read'],
},
},
{
path: 'idp',
children: [
{
path: 'create',
loadChildren: () => import('src/app/modules/idp-create/idp-create.module').then((m) => m.IdpCreateModule),
canActivate: [AuthGuard, RoleGuard],
data: {
roles: ['iam.idp.write'],
serviceType: PolicyComponentServiceType.ADMIN,
},
},
{
path: ':id',
loadChildren: () => import('src/app/modules/idp/idp.module').then((m) => m.IdpModule),
canActivate: [AuthGuard, RoleGuard],
data: {
roles: ['iam.idp.read'],
serviceType: PolicyComponentServiceType.ADMIN,
},
},
],
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class IamRoutingModule {}
console/src/app/pages/iam/iam.component.html → console/src/app/pages/instance/instance.component.html
+9 -3
View File
@@ -3,9 +3,9 @@
<div class="iam-top-row">
<div>
<div class="iam-title-row">
<h1 class="iam-title">{{ 'IAM.POLICIES.TITLE' | translate }}</h1>
<h1 class="iam-title">{{ 'IAM.TITLE' | translate }}</h1>
</div>
<p class="iam-sub cnsl-secondary-text">{{ 'IAM.POLICIES.DESCRIPTION' | translate }}</p>
<p class="iam-sub cnsl-secondary-text">{{ 'IAM.DESCRIPTION' | translate }}</p>
</div>
<span class="fill-space"></span>
<cnsl-contributors
@@ -24,5 +24,11 @@
</div>
</div>
<div class="max-width-container">
<cnsl-policy-grid [type]="PolicyComponentServiceType.ADMIN"></cnsl-policy-grid>
<h2 class="org-table-title">{{ 'ORG.LIST.TITLE' | translate }}</h2>
<p class="org-table-desc cnsl-secondary-text">{{ 'ORG.LIST.DESCRIPTION' | translate }}</p>
<cnsl-org-table></cnsl-org-table>
<cnsl-settings-grid [type]="PolicyComponentServiceType.ADMIN"></cnsl-settings-grid>
</div>
console/src/app/pages/iam/iam.component.scss → console/src/app/pages/instance/instance.component.scss
+6 -2
View File
@@ -1,6 +1,6 @@
@use '@angular/material' as mat;
@mixin iam-detail-theme($theme) {
@mixin instance-detail-theme($theme) {
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
$background: map-get($theme, background);
@@ -46,9 +46,13 @@
}
}
.iam-subtitle {
.org-table-title {
font-size: 1.2rem;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-top: 2rem;
}
.org-table-desc {
font-size: 14px;
}
console/src/app/pages/instance/instance.component.spec.ts
+24
View File
@@ -0,0 +1,24 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { InstanceComponent } from './instance.component';
describe('IamComponent', () => {
let component: InstanceComponent;
let fixture: ComponentFixture<InstanceComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [InstanceComponent],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(InstanceComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/pages/iam/iam.component.ts → console/src/app/pages/instance/instance.component.ts
+13 -14
View File
@@ -12,11 +12,11 @@ import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'cnsl-iam',
templateUrl: './iam.component.html',
styleUrls: ['./iam.component.scss'],
selector: 'cnsl-instance',
templateUrl: './instance.component.html',
styleUrls: ['./instance.component.scss'],
})
export class IamComponent {
export class InstanceComponent {
public PolicyComponentServiceType: any = PolicyComponentServiceType;
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@@ -27,19 +27,18 @@ export class IamComponent {
public adminService: AdminService,
private dialog: MatDialog,
private toast: ToastService,
private breadcrumbService: BreadcrumbService,
breadcrumbService: BreadcrumbService,
private router: Router,
) {
this.loadMembers();
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
}),
];
this.breadcrumbService.setBreadcrumb(breadcrumbs);
const instanceBread = new Breadcrumb({
type: BreadcrumbType.INSTANCE,
name: 'Instance',
routerLink: ['/instance'],
});
breadcrumbService.setBreadcrumb([instanceBread]);
}
public loadMembers(): void {
@@ -99,6 +98,6 @@ export class IamComponent {
}
public showDetail(): void {
this.router.navigate(['/system', 'members']);
this.router.navigate(['/instance', 'members']);
}
}
console/src/app/pages/iam/iam.module.ts → console/src/app/pages/instance/instance.module.ts
+8 -6
View File
@@ -18,18 +18,19 @@ import { ChangesModule } from 'src/app/modules/changes/changes.module';
import { ContributorsModule } from 'src/app/modules/contributors/contributors.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
import { PolicyGridModule } from 'src/app/modules/policy-grid/policy-grid.module';
import { OrgTableModule } from 'src/app/modules/org-table/org-table.module';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { SettingsGridModule } from 'src/app/modules/settings-grid/settings-grid.module';
import { SharedModule } from 'src/app/modules/shared/shared.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
import { IamRoutingModule } from './iam-routing.module';
import { IamComponent } from './iam.component';
import { IamRoutingModule } from './instance-routing.module';
import { InstanceComponent } from './instance.component';
@NgModule({
declarations: [IamComponent],
declarations: [InstanceComponent],
imports: [
CommonModule,
IamRoutingModule,
@@ -50,6 +51,7 @@ import { IamComponent } from './iam.component';
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
OrgTableModule,
MatDialogModule,
ContributorsModule,
LocalizedDatePipeModule,
@@ -58,7 +60,7 @@ import { IamComponent } from './iam.component';
RefreshTableModule,
HasRolePipeModule,
MatSortModule,
PolicyGridModule,
SettingsGridModule,
],
})
export class IamModule {}
export class InstanceModule {}
console/src/app/pages/org-create/org-create.component.ts
+2 -2
View File
@@ -114,7 +114,7 @@ export class OrgCreateComponent {
this.adminService
.SetUpOrg(createOrgRequest, humanRequest)
.then((resp) => {
this.router.navigate(['/org/overview']);
this.router.navigate(['/orgs']);
// const orgResp = org.getOrg();
// if (orgResp) {
@@ -211,7 +211,7 @@ export class OrgCreateComponent {
this.mgmtService
.addOrg(this.name.value)
.then(() => {
this.router.navigate(['/org/overview']);
this.router.navigate(['/orgs']);
})
.catch((error) => {
this.toast.showError(error);
console/src/app/pages/orgs/org-list/org-list-routing.module.ts → console/src/app/pages/org-list/org-list-routing.module.ts
View File
console/src/app/pages/org-list/org-list.component.html
+8
View File
@@ -0,0 +1,8 @@
<div class="max-width-container">
<div class="enlarged-container">
<h1>{{ 'ORG.PAGES.LIST' | translate }}</h1>
<p class="org-desc cnsl-secondary-text">{{ 'ORG.PAGES.LISTDESCRIPTION' | translate }}</p>
<cnsl-org-table></cnsl-org-table>
</div>
</div>
console/src/app/pages/org-list/org-list.component.scss
+7
View File
@@ -0,0 +1,7 @@
h1 {
margin: 0;
}
.org-desc {
font-size: 14px;
}
console/src/app/pages/orgs/org-list/org-list.component.spec.ts → console/src/app/pages/org-list/org-list.component.spec.ts
View File
console/src/app/pages/org-list/org-list.component.ts
+21
View File
@@ -0,0 +1,21 @@
import { Component } from '@angular/core';
import { enterAnimations } from 'src/app/animations';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
@Component({
selector: 'cnsl-org-list',
templateUrl: './org-list.component.html',
styleUrls: ['./org-list.component.scss'],
animations: [enterAnimations],
})
export class OrgListComponent {
constructor(breadcrumbService: BreadcrumbService) {
const iamBread = new Breadcrumb({
type: BreadcrumbType.INSTANCE,
name: 'Instance',
routerLink: ['/instance'],
});
breadcrumbService.setBreadcrumb([iamBread]);
}
}
console/src/app/pages/org-list/org-list.module.ts
+13
View File
@@ -0,0 +1,13 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { OrgTableModule } from 'src/app/modules/org-table/org-table.module';
import { OrgListRoutingModule } from './org-list-routing.module';
import { OrgListComponent } from './org-list.component';
@NgModule({
declarations: [OrgListComponent],
imports: [CommonModule, OrgListRoutingModule, OrgTableModule, TranslateModule],
})
export class OrgListModule {}
console/src/app/pages/projects/owned-projects/project-grants/project-grants-routing.module.ts → console/src/app/pages/org-settings/org-settings-routing.module.ts
+3 -4
View File
@@ -1,13 +1,12 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProjectGrantsComponent } from './project-grants.component';
import { OrgSettingsComponent } from './org-settings.component';
const routes: Routes = [
{
path: '',
component: ProjectGrantsComponent,
data: { animation: 'HomePage' },
component: OrgSettingsComponent,
},
];
@@ -15,4 +14,4 @@ const routes: Routes = [
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ProjectGrantsRoutingModule {}
export class OrgSettingsRoutingModule {}
console/src/app/pages/org-settings/org-settings.component.html
+16
View File
@@ -0,0 +1,16 @@
<div class="max-width-container">
<div class="settings-top-view">
<div>
<div class="settings-title-row">
<h1>{{ 'SETTINGS.ORG.TITLE' | translate }}</h1>
</div>
<p class="desc cnsl-secondary-text">{{ 'SETTINGS.ORG.DESCRIPTION' | translate }}</p>
</div>
<span class="fill-space"></span>
</div>
<cnsl-settings-list
[selectedId]="id"
[serviceType]="PolicyComponentServiceType.MGMT"
[settingsList]="settingsList"
></cnsl-settings-list>
</div>
console/src/app/pages/org-settings/org-settings.component.scss
+34
View File
@@ -0,0 +1,34 @@
.settings-top-view {
display: flex;
align-items: center;
padding-top: 2rem;
.settings-title-row {
display: flex;
align-items: center;
h1 {
margin: 0;
}
a i {
font-size: 1.2rem;
height: 1.2rem;
line-height: 1.2rem;
}
}
.fill-space {
flex: 1;
}
.actions {
display: flex;
align-items: center;
}
}
.desc {
margin-bottom: 2rem;
font-size: 14px;
}
console/src/app/pages/org-settings/org-settings.component.spec.ts
+24
View File
@@ -0,0 +1,24 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { OrgSettingsComponent } from './org-settings.component';
describe('OrgSettingsComponent', () => {
let component: OrgSettingsComponent;
let fixture: ComponentFixture<OrgSettingsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [OrgSettingsComponent],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(OrgSettingsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/pages/org-settings/org-settings.component.ts
+58
View File
@@ -0,0 +1,58 @@
import { Component } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { take } from 'rxjs';
import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import {
BRANDING,
COMPLEXITY,
IDP,
LOCKOUT,
LOGIN,
LOGINTEXTS,
MESSAGETEXTS,
NOTIFICATIONPROVIDERS,
NOTIFICATIONS,
PRIVACYPOLICY,
} from '../../modules/settings-list/settings';
@Component({
selector: 'cnsl-org-settings',
templateUrl: './org-settings.component.html',
styleUrls: ['./org-settings.component.scss'],
})
export class OrgSettingsComponent {
public id: string = '';
public PolicyComponentServiceType: any = PolicyComponentServiceType;
public settingsList: SidenavSetting[] = [
LOGIN,
COMPLEXITY,
LOCKOUT,
IDP,
NOTIFICATIONS,
NOTIFICATIONPROVIDERS,
BRANDING,
MESSAGETEXTS,
LOGINTEXTS,
PRIVACYPOLICY,
];
constructor(breadcrumbService: BreadcrumbService, activatedRoute: ActivatedRoute) {
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],
}),
];
breadcrumbService.setBreadcrumb(breadcrumbs);
activatedRoute.queryParams.pipe(take(1)).subscribe((params: Params) => {
const { id } = params;
if (id) {
this.id = id;
}
});
}
}
console/src/app/pages/org-settings/org-settings.module.ts
+14
View File
@@ -0,0 +1,14 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { SettingsListModule } from 'src/app/modules/settings-list/settings-list.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { OrgSettingsRoutingModule } from './org-settings-routing.module';
import { OrgSettingsComponent } from './org-settings.component';
@NgModule({
declarations: [OrgSettingsComponent],
imports: [CommonModule, OrgSettingsRoutingModule, SettingsListModule, HasRolePipeModule, TranslateModule],
})
export class OrgSettingsModule {}
console/src/app/pages/orgs/org-detail/org-detail.component.html
+1 -1
View File
@@ -25,7 +25,7 @@
<div class="max-width-container">
<cnsl-meta-layout>
<ng-template cnslHasRole [hasRole]="['policy.read']">
<cnsl-policy-grid [type]="PolicyComponentServiceType.MGMT"></cnsl-policy-grid>
<cnsl-settings-grid [type]="PolicyComponentServiceType.MGMT"></cnsl-settings-grid>
</ng-template>
<div metainfo>
console/src/app/pages/orgs/org-detail/org-detail.component.ts
+16 -11
View File
@@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { ActivatedRoute, Router } from '@angular/router';
import { BehaviorSubject, from, Observable, of, Subject, takeUntil } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { ChangeType } from 'src/app/modules/changes/changes.component';
@@ -18,7 +18,7 @@ import { ToastService } from 'src/app/services/toast.service';
templateUrl: './org-detail.component.html',
styleUrls: ['./org-detail.component.scss'],
})
export class OrgDetailComponent implements OnInit {
export class OrgDetailComponent implements OnInit, OnDestroy {
public org!: Org.AsObject;
public PolicyComponentServiceType: any = PolicyComponentServiceType;
@@ -30,30 +30,35 @@ export class OrgDetailComponent implements OnInit {
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public totalMemberResult: number = 0;
public membersSubject: BehaviorSubject<Member.AsObject[]> = new BehaviorSubject<Member.AsObject[]>([]);
private destroy$: Subject<void> = new Subject();
constructor(
private dialog: MatDialog,
public mgmtService: ManagementService,
private toast: ToastService,
private router: Router,
breadcrumbService: BreadcrumbService,
activatedRoute: ActivatedRoute,
) {
const iamBread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iamBread, bread]);
breadcrumbService.setBreadcrumb([bread]);
activatedRoute.fragment.pipe(takeUntil(this.destroy$)).subscribe((orgId) => {
this.getData();
});
}
public ngOnInit(): void {
this.getData();
}
public ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
private async getData(): Promise<void> {
this.mgmtService
.getMyOrg()
console/src/app/pages/orgs/org-list/org-list.component.html
-90
View File
@@ -1,90 +0,0 @@
<div class="max-width-container">
<div class="enlarged-container">
<h1>{{ 'ORG.PAGES.LIST' | translate }}</h1>
<p class="org-desc cnsl-secondary-text">{{'ORG.PAGES.LISTDESCRIPTION' | translate}}</p>
<cnsl-refresh-table *ngIf="dataSource" [hideRefresh]="true" (refreshed)="refresh()"
[dataSize]="dataSource.data.length" [loading]="loading$ | async">
<cnsl-filter-org actions (filterChanged)="applySearchQuery($any($event))" (filterOpen)="filterOpen = $event">
</cnsl-filter-org>
<ng-template actions cnslHasRole [hasRole]="['org.create','iam.write']">
<a [routerLink]="[ '/org', 'create']" color="primary" mat-raised-button class="cnsl-action-button">
<mat-icon class="icon">add</mat-icon>
<span>{{ 'ACTIONS.NEW' | translate }}</span>
<cnsl-action-keys (actionTriggered)="gotoRouterLink([ '/org', 'create'])">
</cnsl-action-keys>
</a>
</ng-template>
<table [dataSource]="dataSource" mat-table class="table" aria-label="Elements">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
{{'ORG.PAGES.ACTIVE' | translate}}
</th>
<td class="selection" mat-cell *matCellDef="let org">
<mat-radio-button (change)="selectOrg(org)" color="primary" [checked]="org.id === activeOrg.id">
</mat-radio-button>
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> {{ 'ORG.PAGES.ID' | translate }} </th>
<td mat-cell *matCellDef="let org" (change)="selectOrg(org)"> {{org.id}} </td>
</ng-container>
<ng-container matColumnDef="primaryDomain">
<th mat-header-cell *matHeaderCellDef> {{ 'ORG.PAGES.PRIMARYDOMAIN' | translate }} </th>
<td mat-cell *matCellDef="let org"><span>{{org.primaryDomain}}</span>
<button color="primary" class="cpy-button" mat-icon-button [disabled]="copied === org.primaryDomain"
[matTooltip]="(copied !== org.primaryDomain ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
cnslCopyToClipboard [valueToCopy]="org.primaryDomain" (copiedValue)="copied = $event">
<i *ngIf="copied !== org.primaryDomain" class="las la-clipboard"></i>
<i *ngIf="copied === org.primaryDomain" class="las la-clipboard-check"></i>
</button>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>
{{ 'ORG.PAGES.NAME' | translate }}
</th>
<td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">{{org.name}}</td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'ORG.PAGES.STATE' | translate }} </th>
<td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">
<span class="state"
[ngClass]="{'active': org.state === OrgState.ORG_STATE_ACTIVE, 'inactive': org.state === OrgState.ORG_STATE_INACTIVE}"
*ngIf="org.state">{{'ORG.STATE.'+org.state | translate}}</span>
</td>
</ng-container>
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef>
{{ 'ORG.PAGES.CREATIONDATE' | translate }}
</th>
<td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">
{{org.details?.creationDate | timestampToDate | localizedDate: 'fromNow'}}
</td>
</ng-container>
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef>
{{ 'ORG.PAGES.DATECHANGED' | translate }}
</th>
<td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">
{{org.details?.changeDate | timestampToDate | localizedDate: 'fromNow'}}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<cnsl-paginator #paginator class="paginator" [timestamp]="timestamp" [length]="totalResult || 0"
[pageSize]="initialLimit" [pageSizeOptions]="[10, 20, 50, 100]" (page)="changePage($event)"></cnsl-paginator>
</cnsl-refresh-table>
</div>
</div>
console/src/app/pages/orgs/org-list/org-list.component.scss
-47
View File
@@ -1,47 +0,0 @@
h1 {
margin: 0;
}
.org-desc {
font-size: 14px;
}
td {
cursor: pointer;
.cpy-button {
visibility: hidden;
i {
pointer-events: none;
}
}
&:hover {
.cpy-button {
visibility: visible;
}
}
}
.pointer {
outline: none;
cursor: pointer;
}
.filter {
margin-left: 1rem;
}
th {
.search-button {
visibility: hidden;
}
&:hover,
&.search-active {
.search-button {
visibility: visible;
}
}
}
console/src/app/pages/orgs/org-list/org-list.component.ts
-115
View File
@@ -1,115 +0,0 @@
import { Component, Input, ViewChild } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { enterAnimations } from 'src/app/animations';
import { PaginatorComponent } from 'src/app/modules/paginator/paginator.component';
import { Org, OrgQuery, OrgState } from 'src/app/proto/generated/zitadel/org_pb';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
enum OrgListSearchKey {
NAME = 'NAME',
}
@Component({
selector: 'cnsl-org-list',
templateUrl: './org-list.component.html',
styleUrls: ['./org-list.component.scss'],
animations: [enterAnimations],
})
export class OrgListComponent {
public orgSearchKey: OrgListSearchKey | undefined = undefined;
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
@ViewChild('input') public filter!: Input;
public dataSource!: MatTableDataSource<Org.AsObject>;
public displayedColumns: string[] = ['select', 'name', 'state', 'primaryDomain', 'creationDate', 'changeDate'];
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public activeOrg!: Org.AsObject;
public OrgListSearchKey: any = OrgListSearchKey;
public initialLimit: number = 20;
public timestamp: Timestamp.AsObject | undefined = undefined;
public totalResult: number = 0;
public filterOpen: boolean = false;
public OrgState: any = OrgState;
public copied: string = '';
constructor(private authService: GrpcAuthService, private router: Router, breadcrumbService: BreadcrumbService) {
this.loadOrgs(this.initialLimit, 0);
this.authService.getActiveOrg().then((org) => (this.activeOrg = org));
const iamBread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iamBread, bread]);
}
public loadOrgs(limit: number, offset: number, queries?: OrgQuery[]): void {
this.loadingSubject.next(true);
from(this.authService.listMyProjectOrgs(limit, offset, queries))
.pipe(
map((resp) => {
this.timestamp = resp.details?.viewTimestamp;
this.totalResult = resp.details?.totalResult ?? 0;
return resp.resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
)
.subscribe((views) => {
this.dataSource = new MatTableDataSource(views);
});
}
public selectOrg(item: Org.AsObject, event?: any): void {
this.authService.setActiveOrg(item);
}
public refresh(): void {
this.loadOrgs(this.paginator.length, this.paginator.pageSize * this.paginator.pageIndex);
}
public applySearchQuery(searchQueries: OrgQuery[]): void {
this.loadOrgs(this.paginator.pageSize, this.paginator.pageSize * this.paginator.pageIndex, searchQueries);
}
public setFilter(key: OrgListSearchKey): void {
setTimeout(() => {
if (this.filter) {
(this.filter as any).nativeElement.focus();
}
}, 100);
if (this.orgSearchKey !== key) {
this.orgSearchKey = key;
} else {
this.orgSearchKey = undefined;
this.refresh();
}
}
public setAndNavigateToOrg(org: Org.AsObject): void {
this.authService.setActiveOrg(org);
this.router.navigate(['/org']);
}
public changePage(event: PageEvent): void {
this.loadOrgs(event.pageSize, event.pageIndex * event.pageSize);
}
public gotoRouterLink(rL: any) {
this.router.navigate(rL);
}
}
console/src/app/pages/orgs/org-list/org-list.module.ts
-48
View File
@@ -1,48 +0,0 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatRadioModule } from '@angular/material/radio';
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 { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { ActionKeysModule } from 'src/app/modules/action-keys/action-keys.module';
import { FilterOrgModule } from 'src/app/modules/filter-org/filter-org.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { PaginatorModule } from 'src/app/modules/paginator/paginator.module';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
import { OrgListRoutingModule } from './org-list-routing.module';
import { OrgListComponent } from './org-list.component';
@NgModule({
declarations: [OrgListComponent],
imports: [
CommonModule,
OrgListRoutingModule,
MatTableModule,
TranslateModule,
RefreshTableModule,
ActionKeysModule,
FilterOrgModule,
TimestampToDatePipeModule,
LocalizedDatePipeModule,
MatSortModule,
MatIconModule,
PaginatorModule,
HasRoleModule,
MatButtonModule,
MatTooltipModule,
CopyToClipboardModule,
MatRadioModule,
InputModule,
FormsModule,
],
})
export class OrgListModule {}
console/src/app/pages/orgs/org-members/org-members.component.ts
+1 -6
View File
@@ -35,16 +35,11 @@ export class OrgMembersComponent {
private toast: ToastService,
breadcrumbService: BreadcrumbService,
) {
const iamBread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iamBread, bread]);
breadcrumbService.setBreadcrumb([bread]);
this.mgmtService.getMyOrg().then((resp) => {
if (resp.org) {
console/src/app/pages/orgs/org-routing.module.ts
+46
View File
@@ -0,0 +1,46 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RoleGuard } from 'src/app/guards/role.guard';
import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
import { OrgDetailComponent } from './org-detail/org-detail.component';
const routes: Routes = [
{
path: 'idp',
children: [
{
path: 'create',
loadChildren: () => import('src/app/modules/idp-create/idp-create.module').then((m) => m.IdpCreateModule),
canActivate: [RoleGuard],
data: {
roles: ['org.idp.write'],
serviceType: PolicyComponentServiceType.MGMT,
},
},
{
path: ':id',
loadChildren: () => import('src/app/modules/idp/idp.module').then((m) => m.IdpModule),
canActivate: [RoleGuard],
data: {
roles: ['org.idp.read'],
serviceType: PolicyComponentServiceType.MGMT,
},
},
],
},
{
path: 'members',
loadChildren: () => import('./org-members/org-members.module').then((m) => m.OrgMembersModule),
},
{
path: '',
component: OrgDetailComponent,
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class OrgRoutingModule {}
console/src/app/pages/orgs/orgs.module.ts → console/src/app/pages/orgs/org.module.ts
+5 -5
View File
@@ -18,7 +18,7 @@ import { InfoRowModule } from 'src/app/modules/info-row/info-row.module';
import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
import { PolicyGridModule } from 'src/app/modules/policy-grid/policy-grid.module';
import { SettingsGridModule } from 'src/app/modules/settings-grid/settings-grid.module';
import { SharedModule } from 'src/app/modules/shared/shared.module';
import { TopViewModule } from 'src/app/modules/top-view/top-view.module';
import { WarnDialogModule } from 'src/app/modules/warn-dialog/warn-dialog.module';
@@ -26,14 +26,14 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
import { ChangesModule } from '../../modules/changes/changes.module';
import { OrgDetailComponent } from './org-detail/org-detail.component';
import { OrgsRoutingModule } from './orgs-routing.module';
import { OrgRoutingModule } from './org-routing.module';
@NgModule({
declarations: [OrgDetailComponent],
imports: [
CommonModule,
HasRolePipeModule,
OrgsRoutingModule,
OrgRoutingModule,
FormsModule,
InfoRowModule,
HasRoleModule,
@@ -55,9 +55,9 @@ import { OrgsRoutingModule } from './orgs-routing.module';
MatProgressSpinnerModule,
TranslateModule,
SharedModule,
SettingsGridModule,
ContributorsModule,
CopyToClipboardModule,
PolicyGridModule,
],
})
export class OrgsModule {}
export class OrgModule {}
console/src/app/pages/orgs/orgs-routing.module.ts
-135
View File
@@ -1,135 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RoleGuard } from 'src/app/guards/role.guard';
import { PolicyComponentServiceType, PolicyComponentType } from 'src/app/modules/policies/policy-component-types.enum';
import { OrgDetailComponent } from './org-detail/org-detail.component';
const routes: Routes = [
{
path: 'idp',
children: [
{
path: 'create',
loadChildren: () => import('src/app/modules/idp-create/idp-create.module').then((m) => m.IdpCreateModule),
canActivate: [RoleGuard],
data: {
roles: ['org.idp.write'],
serviceType: PolicyComponentServiceType.MGMT,
},
},
{
path: ':id',
loadChildren: () => import('src/app/modules/idp/idp.module').then((m) => m.IdpModule),
canActivate: [RoleGuard],
data: {
roles: ['org.idp.read'],
serviceType: PolicyComponentServiceType.MGMT,
},
},
],
},
{
path: 'policy',
children: [
{
path: PolicyComponentType.AGE,
data: {
serviceType: PolicyComponentServiceType.MGMT,
},
loadChildren: () =>
import('src/app/modules/policies/password-age-policy/password-age-policy.module').then(
(m) => m.PasswordAgePolicyModule,
),
},
{
path: PolicyComponentType.LOCKOUT,
data: {
serviceType: PolicyComponentServiceType.MGMT,
},
loadChildren: () =>
import('src/app/modules/policies/password-lockout-policy/password-lockout-policy.module').then(
(m) => m.PasswordLockoutPolicyModule,
),
},
{
path: PolicyComponentType.PRIVATELABEL,
data: {
serviceType: PolicyComponentServiceType.MGMT,
},
loadChildren: () =>
import('src/app/modules/policies/private-labeling-policy/private-labeling-policy.module').then(
(m) => m.PrivateLabelingPolicyModule,
),
},
{
path: PolicyComponentType.COMPLEXITY,
data: {
serviceType: PolicyComponentServiceType.MGMT,
},
loadChildren: () =>
import('src/app/modules/policies/password-complexity-policy/password-complexity-policy.module').then(
(m) => m.PasswordComplexityPolicyModule,
),
},
{
path: PolicyComponentType.IAM,
data: {
serviceType: PolicyComponentServiceType.MGMT,
},
loadChildren: () =>
import('src/app/modules/policies/org-iam-policy/org-iam-policy.module').then((m) => m.OrgIamPolicyModule),
},
{
path: PolicyComponentType.LOGIN,
data: {
serviceType: PolicyComponentServiceType.MGMT,
},
loadChildren: () =>
import('src/app/modules/policies/login-policy/login-policy.module').then((m) => m.LoginPolicyModule),
},
{
path: PolicyComponentType.MESSAGETEXTS,
data: {
serviceType: PolicyComponentServiceType.MGMT,
},
loadChildren: () =>
import('src/app/modules/policies/message-texts/message-texts.module').then((m) => m.MessageTextsPolicyModule),
},
{
path: PolicyComponentType.LOGINTEXTS,
data: {
serviceType: PolicyComponentServiceType.MGMT,
},
loadChildren: () =>
import('src/app/modules/policies/login-texts/login-texts.module').then((m) => m.LoginTextsPolicyModule),
},
{
path: PolicyComponentType.PRIVACYPOLICY,
data: {
serviceType: PolicyComponentServiceType.MGMT,
},
loadChildren: () =>
import('src/app/modules/policies/privacy-policy/privacy-policy.module').then((m) => m.PrivacyPolicyModule),
},
],
},
{
path: 'members',
loadChildren: () => import('./org-members/org-members.module').then((m) => m.OrgMembersModule),
},
{
path: '',
component: OrgDetailComponent,
},
{
path: 'overview',
loadChildren: () => import('./org-list/org-list.module').then((m) => m.OrgListModule),
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class OrgsRoutingModule {}
console/src/app/pages/projects/apps/app-create/app-create.component.ts
+16 -21
View File
@@ -9,17 +9,17 @@ import { Subject, Subscription } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';
import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
import {
APIAuthMethodType,
OIDCAppType,
OIDCAuthMethodType,
OIDCGrantType,
OIDCResponseType,
APIAuthMethodType,
OIDCAppType,
OIDCAuthMethodType,
OIDCGrantType,
OIDCResponseType,
} from 'src/app/proto/generated/zitadel/app_pb';
import {
AddAPIAppRequest,
AddAPIAppResponse,
AddOIDCAppRequest,
AddOIDCAppResponse,
AddAPIAppRequest,
AddAPIAppResponse,
AddOIDCAppRequest,
AddOIDCAppResponse,
} from 'src/app/proto/generated/zitadel/management_pb';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ManagementService } from 'src/app/services/mgmt.service';
@@ -27,13 +27,13 @@ import { ToastService } from 'src/app/services/toast.service';
import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
import {
BASIC_AUTH_METHOD,
CODE_METHOD,
getPartialConfigFromAuthMethod,
IMPLICIT_METHOD,
PK_JWT_METHOD,
PKCE_METHOD,
POST_METHOD,
BASIC_AUTH_METHOD,
CODE_METHOD,
getPartialConfigFromAuthMethod,
IMPLICIT_METHOD,
PK_JWT_METHOD,
PKCE_METHOD,
POST_METHOD,
} from '../authmethods';
import { API_TYPE, AppCreateType, NATIVE_TYPE, RadioItemAppType, USER_AGENT_TYPE, WEB_TYPE } from '../authtypes';
@@ -199,11 +199,6 @@ export class AppCreateComponent implements OnInit, OnDestroy {
const projectId = this.route.snapshot.paramMap.get('projectid');
if (projectId) {
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
}),
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],
console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
+22 -27
View File
@@ -19,21 +19,21 @@ import { NameDialogComponent } from 'src/app/modules/name-dialog/name-dialog.com
import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import {
APIAuthMethodType,
APIConfig,
App,
AppState,
OIDCAppType,
OIDCAuthMethodType,
OIDCConfig,
OIDCGrantType,
OIDCResponseType,
OIDCTokenType,
APIAuthMethodType,
APIConfig,
App,
AppState,
OIDCAppType,
OIDCAuthMethodType,
OIDCConfig,
OIDCGrantType,
OIDCResponseType,
OIDCTokenType,
} from 'src/app/proto/generated/zitadel/app_pb';
import {
GetOIDCInformationResponse,
UpdateAPIAppConfigRequest,
UpdateOIDCAppConfigRequest,
GetOIDCInformationResponse,
UpdateAPIAppConfigRequest,
UpdateOIDCAppConfigRequest,
} from 'src/app/proto/generated/zitadel/management_pb';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
@@ -42,15 +42,15 @@ import { ToastService } from 'src/app/services/toast.service';
import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
import {
BASIC_AUTH_METHOD,
CODE_METHOD,
CUSTOM_METHOD,
getAuthMethodFromPartialConfig,
getPartialConfigFromAuthMethod,
IMPLICIT_METHOD,
PK_JWT_METHOD,
PKCE_METHOD,
POST_METHOD,
BASIC_AUTH_METHOD,
CODE_METHOD,
CUSTOM_METHOD,
getAuthMethodFromPartialConfig,
getPartialConfigFromAuthMethod,
IMPLICIT_METHOD,
PK_JWT_METHOD,
PKCE_METHOD,
POST_METHOD,
} from '../authmethods';
@Component({
@@ -253,11 +253,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.app = app.app;
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
}),
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],
console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.ts
-5
View File
@@ -64,11 +64,6 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
this.grantId = grantId;
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
}),
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],
console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html
+21 -12
View File
@@ -1,20 +1,24 @@
<div class="app-grid-header">
<h3>{{'APP.LIST' | translate}}</h3>
<h2 class="app-grid-h2">{{ 'APP.LIST' | translate }}</h2>
<span class="fill-space"></span>
<button mat-icon-button (click)="closeView()">
<i class="show list view las la-th-list"></i>
</button>
</div>
<div class="app-container">
<div class="sp-container" *ngIf="(loading$ | async)">
<div class="sp-container" *ngIf="loading$ | async">
<mat-spinner color="primary" diameter="50"></mat-spinner>
</div>
<div [routerLink]="['/projects', projectId, 'apps', app.id ]" [attr.data-e2e]="'app-card'" class="app-wrap"
*ngFor="let app of appsSubject | async" matTooltip="{{'ACTIONS.EDIT' | translate}}">
<cnsl-app-card class="grid-card" matRipple [type]="app.oidcConfig?.appType"
[isApiApp]="app.apiConfig !== undefined">
{{ app.name.charAt(0)}}
<div
[routerLink]="['/projects', projectId, 'apps', app.id]"
[attr.data-e2e]="'app-card'"
class="app-wrap"
*ngFor="let app of appsSubject | async"
matTooltip="{{ 'ACTIONS.EDIT' | translate }}"
>
<cnsl-app-card class="grid-card" matRipple [type]="app.oidcConfig?.appType" [isApiApp]="app.apiConfig !== undefined">
{{ app.name.charAt(0) }}
<ng-container *ngIf="app.oidcConfig?.appType !== undefined">
<i *ngIf="app.oidcConfig?.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE" class="las la-mobile"></i>
<i *ngIf="app.oidcConfig?.appType === OIDCAppType.OIDC_APP_TYPE_WEB" class="las la-code"></i>
@@ -22,19 +26,24 @@
<i *ngIf="app.apiConfig" class="las la-robot"></i>
</ng-container>
</cnsl-app-card>
<span class="name">{{app.name}}</span>
<span class="name">{{ app.name }}</span>
<span *ngIf="app.oidcConfig?.appType !== undefined && app.oidcConfig?.appType !== null" class="type">
{{'APP.OIDC.APPTYPE.'+app.oidcConfig?.appType | translate}}</span>
{{ 'APP.OIDC.APPTYPE.' + app.oidcConfig?.appType | translate }}</span
>
<span *ngIf="app.apiConfig !== undefined" class="type"> API</span>
</div>
<ng-template cnslHasRole [hasRole]="['project.app.write']">
<div class="app-wrap" *ngIf="!disabled" [attr.data-e2e]="'app-card-add'"
[routerLink]="[ '/projects', projectId, 'apps', 'create']">
<div
class="app-wrap"
*ngIf="!disabled"
[attr.data-e2e]="'app-card-add'"
[routerLink]="['/projects', projectId, 'apps', 'create']"
>
<cnsl-app-card class="grid-card" matRipple [type]="OIDCAppType.ADD">
<mat-icon>add</mat-icon>
</cnsl-app-card>
<span class="name">{{ 'ACTIONS.NEW' | translate }}</span>
</div>
</ng-template>
</div>
</div>
console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.scss
+3 -3
View File
@@ -1,14 +1,14 @@
h3 {
.app-grid-h2 {
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 2rem 0 1rem 0;
}
.app-grid-header {
display: flex;
align-items: center;
padding-top: 1rem;
.fill-space {
flex: 1;
@@ -18,7 +18,7 @@ h3 {
.app-container {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
margin-left: -1rem;
padding-bottom: 2rem;
.sp-container {
console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.ts
+13 -11
View File
@@ -18,22 +18,24 @@ export class ApplicationGridComponent implements OnInit {
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public OIDCAppType: any = OIDCAppType;
constructor(private mgmtService: ManagementService) { }
constructor(private mgmtService: ManagementService) {}
public ngOnInit(): void {
ngOnInit(): void {
this.loadApps();
}
public loadApps(): void {
from(this.mgmtService.listApps(this.projectId, 100, 0)).pipe(
map(resp => {
return resp.resultList;
}),
// catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe((apps) => {
this.appsSubject.next(apps as App.AsObject[]);
});
from(this.mgmtService.listApps(this.projectId, 100, 0))
.pipe(
map((resp) => {
return resp.resultList;
}),
// catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
)
.subscribe((apps) => {
this.appsSubject.next(apps as App.AsObject[]);
});
}
public closeView(): void {
console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.ts
+1 -1
View File
@@ -26,7 +26,7 @@ export class ApplicationsComponent implements AfterViewInit, OnInit {
public AppState: any = AppState;
constructor(private mgmtService: ManagementService) {}
public ngOnInit(): void {
ngOnInit(): void {
this.dataSource = new ProjectApplicationsDataSource(this.mgmtService);
this.dataSource.loadApps(this.projectId, 0, 25);
}
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
+150 -76
View File
@@ -1,105 +1,179 @@
<cnsl-top-view title="{{project?.name}}" docLink="https://docs.zitadel.ch/docs/guides/basics/projects"
sub="{{'PROJECT.PAGES.TYPE.OWNED_SINGULAR' | translate}}"
<cnsl-top-view
title="{{ project?.name }}"
docLink="https://docs.zitadel.ch/docs/guides/basics/projects"
sub="{{ 'PROJECT.PAGES.TYPE.OWNED_SINGULAR' | translate }}"
[isActive]="project?.state === ProjectState.PROJECT_STATE_ACTIVE"
[isInactive]="project?.state === ProjectState.PROJECT_STATE_INACTIVE" [hasContributors]="true"
stateTooltip="{{'PROJECT.STATE.'+project?.state | translate}}" [hasActions]="true">
<ng-template topActions cnslHasRole [hasRole]="['project.write:'+projectId, 'project.write']">
[isInactive]="project?.state === ProjectState.PROJECT_STATE_INACTIVE"
[hasContributors]="true"
stateTooltip="{{ 'PROJECT.STATE.' + project?.state | translate }}"
[hasActions]="true"
>
<ng-template topActions cnslHasRole [hasRole]="['project.write:' + projectId, 'project.write']">
<button mat-menu-item (click)="openNameDialog()" aria-label="Edit project name" *ngIf="isZitadel === false">
{{'ACTIONS.RENAME' | translate}}
{{ 'ACTIONS.RENAME' | translate }}
</button>
<button mat-menu-item
[disabled]="isZitadel || (['project.write$', 'project.write:'+ project.id]| hasRole | async) === false"
<button
mat-menu-item
[disabled]="isZitadel || (['project.write$', 'project.write:' + project.id] | hasRole | async) === false"
*ngIf="project?.state === ProjectState.PROJECT_STATE_ACTIVE"
(click)="changeState(ProjectState.PROJECT_STATE_INACTIVE)">
{{'PROJECT.TABLE.DEACTIVATE' | translate}}
(click)="changeState(ProjectState.PROJECT_STATE_INACTIVE)"
>
{{ 'PROJECT.TABLE.DEACTIVATE' | translate }}
</button>
<button mat-menu-item
[disabled]="isZitadel || (['project.write$', 'project.write:'+ project.id]| hasRole | async) === false"
<button
mat-menu-item
[disabled]="isZitadel || (['project.write$', 'project.write:' + project.id] | hasRole | async) === false"
*ngIf="project?.state === ProjectState.PROJECT_STATE_INACTIVE"
(click)="changeState(ProjectState.PROJECT_STATE_ACTIVE)">
{{'PROJECT.TABLE.ACTIVATE' | translate}}
(click)="changeState(ProjectState.PROJECT_STATE_ACTIVE)"
>
{{ 'PROJECT.TABLE.ACTIVATE' | translate }}
</button>
<ng-template cnslHasRole [hasRole]="['project.delete$', 'project.delete:'+projectId]">
<button mat-menu-item matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteProject()"
aria-label="Edit project name" *ngIf="isZitadel === false">
<span [style.color]="'var(--warn)'">{{'PROJECT.PAGES.DELETE' | translate}}</span>
<ng-template cnslHasRole [hasRole]="['project.delete$', 'project.delete:' + projectId]">
<button
mat-menu-item
matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
(click)="deleteProject()"
aria-label="Edit project name"
*ngIf="isZitadel === false"
>
<span [style.color]="'var(--warn)'">{{ 'PROJECT.PAGES.DELETE' | translate }}</span>
</button>
</ng-template>
</ng-template>
<cnsl-contributors topContributors class="project-contributors" *ngIf="project" [loading]="loading$ | async"
[totalResult]="totalMemberResult" [membersSubject]="membersSubject" title="{{ 'PROJECT.MEMBER.TITLE' | translate }}"
description="{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}" (addClicked)="openAddMember()"
(showDetailClicked)="showDetail()" (refreshClicked)="loadMembers()"
[disabled]="(['project.member.write$', 'project.member.write:'+ project.id]| hasRole | async) === false">
<cnsl-contributors
topContributors
class="project-contributors"
*ngIf="project"
[loading]="loading$ | async"
[totalResult]="totalMemberResult"
[membersSubject]="membersSubject"
title="{{ 'PROJECT.MEMBER.TITLE' | translate }}"
description="{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}"
(addClicked)="openAddMember()"
(showDetailClicked)="showDetail()"
(refreshClicked)="loadMembers()"
[disabled]="(['project.member.write$', 'project.member.write:' + project.id] | hasRole | async) === false"
>
</cnsl-contributors>
<p topContent *ngIf="isZitadel" class="zitadel-warning">{{'PROJECT.PAGES.ZITADELPROJECT' | translate}}</p>
<p topContent *ngIf="isZitadel" class="zitadel-warning">{{ 'PROJECT.PAGES.ZITADELPROJECT' | translate }}</p>
<cnsl-info-row topContent *ngIf="project" [project]="project"></cnsl-info-row>
</cnsl-top-view>
<div class="max-width-container">
<cnsl-meta-layout>
<ng-container *ngIf="project">
<ng-template cnslHasRole [hasRole]="['project.app.read:' + project.id, 'project.app.read']">
<cnsl-application-grid *ngIf="grid" [disabled]="isZitadel" (changeView)="grid = false" [projectId]="projectId">
</cnsl-application-grid>
<cnsl-card *ngIf="!grid" title="{{ 'PROJECT.APP.TITLE' | translate }}">
<div class="card-actions" card-actions>
<button mat-icon-button (click)="grid = true">
<i matTooltip="show grid view" class="las la-th-large"></i>
</button>
</div>
<cnsl-applications [disabled]="isZitadel" [projectId]="projectId"></cnsl-applications>
</cnsl-card>
</ng-template>
<ng-container *ngIf="isZitadel === false">
<ng-template cnslHasRole [hasRole]="['project.role.read:' + project.id, 'project.role.read']">
<cnsl-card id="roles" title="{{ 'PROJECT.SETTINGS.TITLE' | translate }}"
description="{{ 'PROJECT.SETTINGS.DESCRIPTION' | translate }}">
<div class="project-detail-privatelabel-info">
<h2 class="setting-title">{{'PROJECT.PAGES.PRIVATELABEL.TITLE' | translate}}</h2>
<p class="setting-desc">
<span
class="cnsl-secondary-text">{{'PROJECT.PAGES.PRIVATELABEL.'+project.privateLabelingSetting+'.TITLE' |
translate}}</span>
<button matTooltip="{{'ACTIONS.EDIT' | translate}}" [disabled]=" ((['project.write$', 'project.write:'
+ project.id]| hasRole | async))===false" (click)="openPrivateLabelingDialog()" mat-icon-button><i
class="las la-pen"></i></button>
</p>
</div>
<mat-checkbox [(ngModel)]="project.projectRoleAssertion"
[disabled]="((['project.write$', 'project.write:'+ project.id]| hasRole | async)) === false"
color="primary">
{{'PROJECT.ROLE.ASSERTION' | translate}}</mat-checkbox>
<p class="desc cnsl-secondary-text">{{'PROJECT.ROLE.ASSERTION_DESCRIPTION' | translate}}</p>
<mat-checkbox [(ngModel)]="project.projectRoleCheck"
[disabled]="((['project.write$', 'project.write:'+ project.id]| hasRole | async)) === false"
color="primary">
{{'PROJECT.ROLE.CHECK' | translate}}</mat-checkbox>
<p class="desc cnsl-secondary-text">{{'PROJECT.ROLE.CHECK_DESCRIPTION' | translate}}</p>
<mat-checkbox [(ngModel)]="project.hasProjectCheck"
[disabled]="((['project.write$', 'project.write:'+ project.id]| hasRole | async)) === false"
color="primary">
{{'PROJECT.HAS_PROJECT' | translate}}</mat-checkbox>
<p class="desc cnsl-secondary-text">{{'PROJECT.HAS_PROJECT_DESCRIPTION' | translate}}</p>
<div class="project-detail-btn-container">
<button mat-raised-button color="primary" (click)="saveProject()">{{'ACTIONS.SAVE' | translate}}</button>
<cnsl-sidenav [(ngModel)]="currentSetting" [settingsList]="settingsList" [queryParam]="'id'">
<ng-container *ngIf="currentSetting === 'general' && project">
<ng-template cnslHasRole [hasRole]="['project.app.read:' + project.id, 'project.app.read']">
<cnsl-application-grid *ngIf="grid" [disabled]="isZitadel" (changeView)="grid = false" [projectId]="projectId">
</cnsl-application-grid>
<cnsl-card *ngIf="!grid" title="{{ 'PROJECT.APP.TITLE' | translate }}">
<div class="card-actions" card-actions>
<button mat-icon-button (click)="grid = true">
<i matTooltip="show grid view" class="las la-th-large"></i>
</button>
</div>
<cnsl-applications [disabled]="isZitadel" [projectId]="projectId"></cnsl-applications>
</cnsl-card>
</ng-template>
</ng-container>
</ng-container>
<ng-container *ngIf="isZitadel === false">
<ng-template cnslHasRole [hasRole]="['project.role.read:' + project.id, 'project.role.read']">
<cnsl-card
id="roles"
title="{{ 'PROJECT.SETTINGS.TITLE' | translate }}"
description="{{ 'PROJECT.SETTINGS.DESCRIPTION' | translate }}"
>
<div class="project-detail-privatelabel-info">
<h2 class="setting-title">{{ 'PROJECT.PAGES.PRIVATELABEL.TITLE' | translate }}</h2>
<p class="setting-desc">
<span class="cnsl-secondary-text">{{
'PROJECT.PAGES.PRIVATELABEL.' + project.privateLabelingSetting + '.TITLE' | translate
}}</span>
<button
matTooltip="{{ 'ACTIONS.EDIT' | translate }}"
[disabled]="(['project.write$', 'project.write:' + project.id] | hasRole | async) === false"
(click)="openPrivateLabelingDialog()"
mat-icon-button
>
<i class="las la-pen"></i>
</button>
</p>
</div>
<mat-checkbox
[(ngModel)]="project.projectRoleAssertion"
[disabled]="(['project.write$', 'project.write:' + project.id] | hasRole | async) === false"
color="primary"
>
{{ 'PROJECT.ROLE.ASSERTION' | translate }}</mat-checkbox
>
<p class="desc cnsl-secondary-text">{{ 'PROJECT.ROLE.ASSERTION_DESCRIPTION' | translate }}</p>
<mat-checkbox
[(ngModel)]="project.projectRoleCheck"
[disabled]="(['project.write$', 'project.write:' + project.id] | hasRole | async) === false"
color="primary"
>
{{ 'PROJECT.ROLE.CHECK' | translate }}</mat-checkbox
>
<p class="desc cnsl-secondary-text">{{ 'PROJECT.ROLE.CHECK_DESCRIPTION' | translate }}</p>
<mat-checkbox
[(ngModel)]="project.hasProjectCheck"
[disabled]="(['project.write$', 'project.write:' + project.id] | hasRole | async) === false"
color="primary"
>
{{ 'PROJECT.HAS_PROJECT' | translate }}</mat-checkbox
>
<p class="desc cnsl-secondary-text">{{ 'PROJECT.HAS_PROJECT_DESCRIPTION' | translate }}</p>
<div class="project-detail-btn-container">
<button mat-raised-button color="primary" (click)="saveProject()">{{ 'ACTIONS.SAVE' | translate }}</button>
</div>
</cnsl-card>
</ng-template>
</ng-container>
</ng-container>
<ng-container *ngIf="currentSetting === 'roles'">
<h2 class="section-h2">{{ 'PROJECT.ROLE.TITLE' | translate }}</h2>
<p class="desc cnsl-secondary-text">{{ 'PROJECT.ROLE.DESCRIPTION' | translate }}</p>
<cnsl-project-roles-table
class="project-roles"
[disabled]="(['project.role.write$', 'project.role.write:' + projectId] | hasRole | async) === false"
[actionsVisible]="true"
[projectId]="projectId"
>
</cnsl-project-roles-table>
</ng-container>
<ng-container *ngIf="currentSetting === 'projectgrants'">
<h2 class="section-h2">{{ 'PROJECT.GRANT.TITLE' | translate }}</h2>
<p class="desc cnsl-secondary-text">{{ 'PROJECT.GRANT.DESCRIPTION' | translate }}</p>
<cnsl-project-grants [projectId]="projectId"></cnsl-project-grants>
</ng-container>
<ng-container *ngIf="currentSetting === 'grants'">
<h2 class="section-h2">{{ 'GRANTS.TITLE' | translate }}</h2>
<p class="desc cnsl-secondary-text">{{ 'GRANTS.DESC' | translate }}</p>
<!-- 'org',
'projectId',
'type', are hidden -->
<cnsl-user-grants
[context]="UserGrantContext.OWNED_PROJECT"
[projectId]="projectId"
[displayedColumns]="['select', 'user', 'creationDate', 'changeDate', 'roleNamesList', 'actions']"
[refreshOnPreviousRoutes]="['/grant-create/project/' + projectId]"
[disableWrite]="(['user.grant.write$', 'user.grant.write:' + projectId] | hasRole | async) === false"
[disableDelete]="(['user.grant.delete$', 'user.grant.delete:' + projectId] | hasRole | async) === false"
>
</cnsl-user-grants>
</ng-container>
</cnsl-sidenav>
<div metainfo>
<cnsl-changes *ngIf="project" [changeType]="ChangeType.PROJECT" [id]="projectId"></cnsl-changes>
</div>
</cnsl-meta-layout>
</div>
</div>
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.scss
+8
View File
@@ -12,6 +12,14 @@
color: $warn-color;
}
.section-h2 {
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 2rem 0 1rem 0;
}
.project-detail-privatelabel-info {
display: flex;
flex-direction: column;
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.ts
+18 -8
View File
@@ -5,12 +5,13 @@ import { MatTableDataSource } from '@angular/material/table';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { catchError, finalize, map, take } from 'rxjs/operators';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { ChangeType } from 'src/app/modules/changes/changes.component';
import {
ProjectPrivateLabelingDialogComponent,
ProjectPrivateLabelingDialogComponent,
} from 'src/app/modules/project-private-labeling-dialog/project-private-labeling-dialog.component';
import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
import { UserGrantContext } from 'src/app/modules/user-grants/user-grants-datasource';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { App } from 'src/app/proto/generated/zitadel/app_pb';
@@ -26,6 +27,11 @@ import { NameDialogComponent } from '../../../../modules/name-dialog/name-dialog
const ROUTEPARAM = 'projectid';
const GENERAL: SidenavSetting = { id: 'general', i18nKey: 'USER.SETTINGS.GENERAL' };
const ROLES: SidenavSetting = { id: 'roles', i18nKey: 'MENU.ROLES' };
const PROJECTGRANTS: SidenavSetting = { id: 'projectgrants', i18nKey: 'MENU.PROJECTGRANTS' };
const GRANTS: SidenavSetting = { id: 'grants', i18nKey: 'MENU.GRANTS' };
@Component({
selector: 'cnsl-owned-project-detail',
templateUrl: './owned-project-detail.component.html',
@@ -56,6 +62,8 @@ export class OwnedProjectDetailComponent implements OnInit {
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public refreshChanges$: EventEmitter<void> = new EventEmitter();
public settingsList: SidenavSetting[] = [GENERAL, ROLES, PROJECTGRANTS, GRANTS];
public currentSetting: string | undefined = '';
constructor(
public translate: TranslateService,
private route: ActivatedRoute,
@@ -65,7 +73,14 @@ export class OwnedProjectDetailComponent implements OnInit {
private dialog: MatDialog,
private router: Router,
private breadcrumbService: BreadcrumbService,
) {}
) {
route.queryParams.pipe(take(1)).subscribe((params: Params) => {
const { id } = params;
if (id) {
this.currentSetting = id;
}
});
}
public ngOnInit(): void {
const projectId = this.route.snapshot.paramMap.get(ROUTEPARAM);
@@ -120,11 +135,6 @@ export class OwnedProjectDetailComponent implements OnInit {
this.isZitadel = iam.iamProjectId === this.projectId;
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
}),
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.module.ts
+6
View File
@@ -24,6 +24,7 @@ import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module
import { PaginatorModule } from 'src/app/modules/paginator/paginator.module';
import { ProjectRolesTableModule } from 'src/app/modules/project-roles-table/project-roles-table.module';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { SidenavModule } from 'src/app/modules/sidenav/sidenav.module';
import { TopViewModule } from 'src/app/modules/top-view/top-view.module';
import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
import { WarnDialogModule } from 'src/app/modules/warn-dialog/warn-dialog.module';
@@ -31,6 +32,8 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
import { ProjectGrantsModule } from '../project-grants/project-grants.module';
import { ProjectRolesModule } from '../project-roles/project-roles.module';
import { ApplicationGridComponent } from './application-grid/application-grid.component';
import { ApplicationsComponent } from './applications/applications.component';
import { OwnedProjectDetailRoutingModule } from './owned-project-detail-routing.module';
@@ -54,14 +57,17 @@ import { OwnedProjectDetailComponent } from './owned-project-detail.component';
WarnDialogModule,
MatTooltipModule,
ProjectRolesTableModule,
ProjectRolesModule,
HasRolePipeModule,
UserGrantsModule,
TimestampToDatePipeModule,
SidenavModule,
MatTableModule,
InputModule,
CardModule,
PaginatorModule,
MatRippleModule,
ProjectGrantsModule,
TopViewModule,
MatCheckboxModule,
MatSelectModule,
console/src/app/pages/projects/owned-projects/owned-projects-routing.module.ts
-10
View File
@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RoleGuard } from 'src/app/guards/role.guard';
import { ProjectType } from 'src/app/modules/project-members/project-members-datasource';
import { UserGrantContext } from 'src/app/modules/user-grants/user-grants-datasource';
const routes: Routes = [
{
@@ -44,15 +43,6 @@ const routes: Routes = [
(m) => m.ProjectGrantsModule,
),
},
{
path: 'grants',
loadChildren: () => import('src/app/pages/grants/grants.module').then((m) => m.GrantsModule),
canActivate: [RoleGuard],
data: {
roles: ['user.grant.read'],
context: UserGrantContext.OWNED_PROJECT,
},
},
{
path: 'roles',
loadChildren: () =>
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.ts
+2 -7
View File
@@ -11,8 +11,8 @@ import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import {
ProjectGrantMembersCreateDialogComponent,
ProjectGrantMembersCreateDialogExportType,
ProjectGrantMembersCreateDialogComponent,
ProjectGrantMembersCreateDialogExportType,
} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
import { ProjectGrantMembersDataSource } from './project-grant-members-datasource';
@@ -74,11 +74,6 @@ export class ProjectGrantDetailComponent {
this.grant = resp.projectGrant;
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
}),
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],
console/src/app/pages/projects/owned-projects/project-grants/project-grants.component.html
+90 -49
View File
@@ -1,85 +1,117 @@
<div class="max-width-container">
<div class="project-grants-wrapper">
<h1>{{'PROJECT.GRANT.TITLE' | translate}}</h1>
<p class="desc cnsl-secondary-text">{{'PROJECT.GRANT.DESCRIPTION' | translate}}</p>
<div class="project-grants">
<cnsl-refresh-table [loading]="dataSource?.loading$ | async" *ngIf="projectId" (refreshed)="loadGrantsPage()"
[dataSize]="dataSource.totalResult" [selection]="selection" [timestamp]="dataSource?.viewTimestamp"
(refreshed)="getRoleOptions(projectId)">
<cnsl-refresh-table
[loading]="dataSource?.loading$ | async"
*ngIf="projectId"
(refreshed)="loadGrantsPage()"
[dataSize]="dataSource.totalResult"
[selection]="selection"
[timestamp]="dataSource?.viewTimestamp"
(refreshed)="getRoleOptions(projectId)"
>
<div actions>
<a [disabled]="((['project.grant.write$', 'project.grant.write:'+ projectId]| hasRole | async)) === false"
color="primary" class="cnsl-action-button" mat-raised-button
[routerLink]="[ '/projects', projectId, 'projectgrants', 'create']">
<a
[disabled]="(['project.grant.write$', 'project.grant.write:' + projectId] | hasRole | async) === false"
color="primary"
class="cnsl-action-button"
mat-raised-button
[routerLink]="['/projects', projectId, 'projectgrants', 'create']"
>
<mat-icon class="icon">add</mat-icon>
<span>{{ 'ACTIONS.NEW' | translate }}</span>
<cnsl-action-keys (actionTriggered)="gotoRouterLink([ '/projects', projectId, 'projectgrants', 'create'])">
<cnsl-action-keys (actionTriggered)="gotoRouterLink(['/projects', projectId, 'projectgrants', 'create'])">
</cnsl-action-keys>
</a>
</div>
<div class="table-wrapper">
<table mat-table multiTemplateDataRows class="table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox
[disabled]="((['project.grant.write$', 'project.grant.write:'+ projectId]| hasRole | async)) === false"
color="primary" (change)="$event ? masterToggle() : null"
[disabled]="(['project.grant.write$', 'project.grant.write:' + projectId] | hasRole | async) === false"
color="primary"
(change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
[indeterminate]="selection.hasValue() && !isAllSelected()"
>
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox
[disabled]="((['project.grant.write$', 'project.grant.write:'+ projectId]| hasRole | async)) === false"
color="primary" (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
[disabled]="(['project.grant.write$', 'project.grant.write:' + projectId] | hasRole | async) === false"
color="primary"
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="grantedOrgName">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.GRANTEDORG' | translate }} </th>
<td [routerLink]="['/projects',grant.projectId,'projectgrants', grant.grantId]" class="pointer" mat-cell
*matCellDef="let grant">
{{grant.grantedOrgName}} </td>
<th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.GRANT.GRANTEDORG' | translate }}</th>
<td
[routerLink]="['/projects', grant.projectId, 'projectgrants', grant.grantId]"
class="pointer"
mat-cell
*matCellDef="let grant"
>
{{ grant.grantedOrgName }}
</td>
</ng-container>
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{'PROJECT.GRANT.CREATIONDATE' | translate}} </th>
<td class="pointer" mat-cell *matCellDef="let grant"
[routerLink]="['/projects',grant.projectId,'projectgrants', grant.grantId]">
<span>{{grant.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
<th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.GRANT.CREATIONDATE' | translate }}</th>
<td
class="pointer"
mat-cell
*matCellDef="let grant"
[routerLink]="['/projects', grant.projectId, 'projectgrants', grant.grantId]"
>
<span>{{ grant.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
</td>
</ng-container>
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CHANGEDATE' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let grant"
[routerLink]="['/projects',grant.projectId,'projectgrants', grant.grantId]">
<span>{{grant.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
<th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.GRANT.CHANGEDATE' | translate }}</th>
<td
class="pointer"
mat-cell
*matCellDef="let grant"
[routerLink]="['/projects', grant.projectId, 'projectgrants', grant.grantId]"
>
<span>{{ grant.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
</td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.STATE' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let grant"
[routerLink]="['/projects',grant.projectId,'projectgrants', grant.grantId]">
<span class="state"
[ngClass]="{'active': grant.state === ProjectGrantState.PROJECT_GRANT_STATE_ACTIVE, 'inactive': grant.state === ProjectGrantState.PROJECT_GRANT_STATE_INACTIVE}">
{{ 'PROJECT.GRANT.STATES.'+grant.state | translate }}
<th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.GRANT.STATE' | translate }}</th>
<td
class="pointer"
mat-cell
*matCellDef="let grant"
[routerLink]="['/projects', grant.projectId, 'projectgrants', grant.grantId]"
>
<span
class="state"
[ngClass]="{
active: grant.state === ProjectGrantState.PROJECT_GRANT_STATE_ACTIVE,
inactive: grant.state === ProjectGrantState.PROJECT_GRANT_STATE_INACTIVE
}"
>
{{ 'PROJECT.GRANT.STATES.' + grant.state | translate }}
</span>
</td>
</ng-container>
<ng-container matColumnDef="roleNamesList">
<th mat-header-cell *matHeaderCellDef class="role-row"> {{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}
</th>
<th mat-header-cell *matHeaderCellDef class="role-row">{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</th>
<td class="pointer role-row" mat-cell *matCellDef="let grant">
<div class="flex-row">
<cnsl-project-role-chip [roleName]="role" *ngFor="let role of grant.grantedRoleKeysList">{{ role }}
<cnsl-project-role-chip [roleName]="role" *ngFor="let role of grant.grantedRoleKeysList"
>{{ role }}
</cnsl-project-role-chip>
</div>
</td>
@@ -89,10 +121,14 @@
<th mat-header-cell *matHeaderCellDef class="role-table-actions"></th>
<td mat-cell *matCellDef="let grant" class="role-table-actions">
<cnsl-table-actions>
<button actions
<button
actions
[disabled]="(['project.role.delete', 'project.role.delete:' + projectId] | hasRole | async) === false"
mat-icon-button color="warn" matTooltip="{{'ACTIONS.DELETE' | translate}}"
(click)="deleteGrant(grant)">
mat-icon-button
color="warn"
matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
(click)="deleteGrant(grant)"
>
<i class="las la-trash"></i>
</button>
</cnsl-table-actions>
@@ -100,21 +136,26 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let grant; columns: displayedColumns;">
</tr>
<tr class="highlight" mat-row *matRowDef="let grant; columns: displayedColumns"></tr>
</table>
</div>
<div *ngIf="(dataSource.loading$ | async) === false && !dataSource?.totalResult" class="no-content-row">
<i class="las la-exclamation"></i>
<span>{{'PROJECT.GRANT.EMPTY' | translate}}</span>
<span>{{ 'PROJECT.GRANT.EMPTY' | translate }}</span>
</div>
<cnsl-paginator class="paginator" #paginator [pageSize]="50" [timestamp]="dataSource?.viewTimestamp"
[pageSizeOptions]="[25, 50, 100, 250]" [length]="dataSource.totalResult"
(page)="loadGrantsPage($event.pageIndex, $event.pageSize)">
<cnsl-paginator
class="paginator"
#paginator
[pageSize]="50"
[timestamp]="dataSource?.viewTimestamp"
[pageSizeOptions]="[25, 50, 100, 250]"
[length]="dataSource.totalResult"
(page)="loadGrantsPage($event.pageIndex, $event.pageSize)"
>
</cnsl-paginator>
</cnsl-refresh-table>
</div>
</div>
</div>
</div>
console/src/app/pages/projects/owned-projects/project-grants/project-grants.component.scss
-4
View File
@@ -1,6 +1,4 @@
.project-grants-wrapper {
padding-top: 2rem;
h1 {
margin: 0;
}
@@ -11,8 +9,6 @@
}
.project-grants {
padding-top: 2rem;
.role {
display: inline-block;
border-radius: 0.5rem;
console/src/app/pages/projects/owned-projects/project-grants/project-grants.component.ts
+4 -31
View File
@@ -1,15 +1,14 @@
import { animate, state, style, transition, trigger } from '@angular/animations';
import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatSelectChange } from '@angular/material/select';
import { MatTable } from '@angular/material/table';
import { ActivatedRoute, Router } from '@angular/router';
import { Router } from '@angular/router';
import { tap } from 'rxjs/operators';
import { PaginatorComponent } from 'src/app/modules/paginator/paginator.component';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { GrantedProject, ProjectGrantState, Role } from 'src/app/proto/generated/zitadel/project_pb';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -30,7 +29,7 @@ const ROUTEPARAM = 'projectid';
],
})
export class ProjectGrantsComponent implements OnInit, AfterViewInit {
public projectId: string = '';
@Input() public projectId: string = '';
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
@ViewChild(MatTable) public table!: MatTable<GrantedProject.AsObject>;
public dataSource!: ProjectGrantsDataSource;
@@ -43,35 +42,9 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {
constructor(
private mgmtService: ManagementService,
private toast: ToastService,
private route: ActivatedRoute,
private dialog: MatDialog,
private breadcrumbService: BreadcrumbService,
private router: Router,
) {
const projectId = this.route.snapshot.paramMap.get(ROUTEPARAM);
if (projectId) {
this.projectId = projectId;
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
}),
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],
}),
new Breadcrumb({
type: BreadcrumbType.PROJECT,
name: '',
param: { key: ROUTEPARAM, value: projectId },
routerLink: ['/projects', projectId],
}),
];
this.breadcrumbService.setBreadcrumb(breadcrumbs);
}
}
) {}
public gotoRouterLink(rL: any) {
this.router.navigate(rL);
console/src/app/pages/projects/owned-projects/project-grants/project-grants.module.ts
+3 -2
View File
@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { ActionKeysModule } from 'src/app/modules/action-keys/action-keys.module';
import { InputModule } from 'src/app/modules/input/input.module';
@@ -18,7 +19,6 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
import { ProjectGrantsRoutingModule } from './project-grants-routing.module';
import { ProjectGrantsComponent } from './project-grants.component';
@NgModule({
@@ -26,12 +26,12 @@ import { ProjectGrantsComponent } from './project-grants.component';
imports: [
CommonModule,
FormsModule,
ProjectGrantsRoutingModule,
TimestampToDatePipeModule,
TableActionsModule,
MatTooltipModule,
MatCheckboxModule,
RefreshTableModule,
RouterModule,
LocalizedDatePipeModule,
ProjectRoleChipModule,
MatButtonModule,
@@ -44,5 +44,6 @@ import { ProjectGrantsComponent } from './project-grants.component';
MatSelectModule,
PaginatorModule,
],
exports: [ProjectGrantsComponent],
})
export class ProjectGrantsModule {}
console/src/app/pages/projects/owned-projects/project-roles/project-role-detail/project-role-detail.component.html
-30
View File
@@ -1,30 +0,0 @@
<h1 mat-dialog-title class="title">
<span>{{'PROJECT.ROLE.EDITTITLE' | translate}}</span>
</h1>
<p class="desc cnsl-secondary-text"> {{'PROJECT.ROLE.EDITDESCRIPTION' | translate}}</p>
<div mat-dialog-content>
<form *ngIf="formGroup" class="role-detail-full-width" [formGroup]="formGroup" (ngSubmit)="submitForm()">
<cnsl-form-field>
<cnsl-label>{{ 'PROJECT.ROLE.KEY' | translate }}</cnsl-label>
<input cnslInput formControlName="key" />
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="displayName" />
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'PROJECT.ROLE.GROUP' | translate }}</cnsl-label>
<input cnslInput formControlName="group" />
</cnsl-form-field>
</form>
</div>
<div mat-dialog-actions class="action">
<button mat-stroked-button (click)="closeDialog()">
{{'ACTIONS.CANCEL' | translate}}
</button>
<button [disabled]="formGroup.invalid" color="primary" mat-raised-button class="ok-button" (click)="submitForm()">
{{'ACTIONS.SAVE' | translate}}
</button>
</div>
console/src/app/pages/projects/owned-projects/project-roles/project-role-detail/project-role-detail.component.scss
-16
View File
@@ -1,16 +0,0 @@
.title {
font-size: 1.2rem;
}
.desc {
font-size: 0.9rem;
}
.action {
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: 0.5rem;
}
}
console/src/app/pages/projects/owned-projects/project-roles/project-role-detail/project-role-detail.component.spec.ts
-25
View File
@@ -1,25 +0,0 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { ProjectRoleDetailComponent } from './project-role-detail.component';
describe('ProjectRoleDetailComponent', () => {
let component: ProjectRoleDetailComponent;
let fixture: ComponentFixture<ProjectRoleDetailComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ProjectRoleDetailComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectRoleDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/pages/projects/owned-projects/project-roles/project-role-detail/project-role-detail.component.ts
-55
View File
@@ -1,55 +0,0 @@
import { Component, Inject } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'cnsl-project-role-detail',
templateUrl: './project-role-detail.component.html',
styleUrls: ['./project-role-detail.component.scss'],
})
export class ProjectRoleDetailComponent {
public projectId: string = '';
public formGroup!: FormGroup;
constructor(private mgmtService: ManagementService, private toast: ToastService,
public dialogRef: MatDialogRef<ProjectRoleDetailComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
this.projectId = data.projectId;
this.formGroup = new FormGroup({
key: new FormControl({ value: '', disabled: true }, [Validators.required]),
displayName: new FormControl(''),
group: new FormControl(''),
});
this.formGroup.patchValue(data.role);
}
submitForm(): void {
if (this.formGroup.valid && this.key?.value && this.group?.value && this.displayName?.value) {
this.mgmtService.updateProjectRole(this.projectId, this.key.value, this.displayName.value, this.group.value)
.then(() => {
this.toast.showInfo('PROJECT.TOAST.ROLECHANGED', true);
this.dialogRef.close(true);
}).catch(error => {
this.toast.showError(error);
});
}
}
public closeDialog(): void {
this.dialogRef.close(false);
}
public get key(): AbstractControl | null {
return this.formGroup.get('key');
}
public get displayName(): AbstractControl | null {
return this.formGroup.get('displayName');
}
public get group(): AbstractControl | null {
return this.formGroup.get('group');
}
}
console/src/app/pages/projects/owned-projects/project-roles/project-roles.component.html
+9 -6
View File
@@ -1,11 +1,14 @@
<div class="max-width-container">
<div class="project-roles-wrapper">
<h1>{{'PROJECT.ROLE.TITLE' | translate}}</h1>
<p class="desc cnsl-secondary-text">{{'PROJECT.ROLE.DESCRIPTION' | translate}}</p>
<h1>{{ 'PROJECT.ROLE.TITLE' | translate }}</h1>
<p class="desc cnsl-secondary-text">{{ 'PROJECT.ROLE.DESCRIPTION' | translate }}</p>
<cnsl-project-roles-table class="project-roles"
[disabled]="(['project.role.write$', 'project.role.write:'+ projectId]| hasRole | async) === false"
[actionsVisible]="true" [projectId]="projectId">
<cnsl-project-roles-table
class="project-roles"
[disabled]="(['project.role.write$', 'project.role.write:' + projectId] | hasRole | async) === false"
[actionsVisible]="true"
[projectId]="projectId"
>
</cnsl-project-roles-table>
</div>
</div>
</div>
console/src/app/pages/projects/owned-projects/project-roles/project-roles.component.ts
+16 -27
View File
@@ -1,5 +1,4 @@
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Component, Input } from '@angular/core';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
const ROUTEPARAM = 'projectid';
@@ -10,31 +9,21 @@ const ROUTEPARAM = 'projectid';
styleUrls: ['./project-roles.component.scss'],
})
export class ProjectRolesComponent {
public projectId: string = '';
@Input() public projectId: string = '';
constructor(private route: ActivatedRoute, private breadcrumbService: BreadcrumbService) {
const projectId = this.route.snapshot.paramMap.get(ROUTEPARAM);
if (projectId) {
this.projectId = projectId;
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
}),
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],
}),
new Breadcrumb({
type: BreadcrumbType.PROJECT,
name: '',
param: { key: ROUTEPARAM, value: projectId },
routerLink: ['/projects', projectId],
}),
];
this.breadcrumbService.setBreadcrumb(breadcrumbs);
}
constructor(private breadcrumbService: BreadcrumbService) {
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],
}),
new Breadcrumb({
type: BreadcrumbType.PROJECT,
name: '',
param: { key: ROUTEPARAM, value: this.projectId },
routerLink: ['/projects', this.projectId],
}),
];
this.breadcrumbService.setBreadcrumb(breadcrumbs);
}
}
console/src/app/pages/projects/owned-projects/project-roles/project-roles.module.ts
+1 -4
View File
@@ -8,15 +8,12 @@ import { InputModule } from 'src/app/modules/input/input.module';
import { ProjectRolesTableModule } from 'src/app/modules/project-roles-table/project-roles-table.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { ProjectRoleDetailComponent } from './project-role-detail/project-role-detail.component';
import { ProjectRolesRoutingModule } from './project-roles-routing.module';
import { ProjectRolesComponent } from './project-roles.component';
@NgModule({
declarations: [ProjectRolesComponent, ProjectRoleDetailComponent],
declarations: [ProjectRolesComponent],
imports: [
CommonModule,
ProjectRolesRoutingModule,
HasRoleModule,
ProjectRolesTableModule,
ReactiveFormsModule,
console/src/app/pages/projects/project-create/project-create.component.ts
+2 -7
View File
@@ -21,16 +21,11 @@ export class ProjectCreateComponent {
private _location: Location,
breadcrumbService: BreadcrumbService,
) {
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
breadcrumbService.setBreadcrumb([bread]);
}
public createSteps: number = 1;
@@ -40,7 +35,7 @@ export class ProjectCreateComponent {
this.mgmtService
.addProject(this.project)
.then((resp: AddProjectResponse.AsObject) => {
this.toast.showInfo('PROJECT.TOAST.CREATED', true)
this.toast.showInfo('PROJECT.TOAST.CREATED', true);
this.router.navigate(['projects', resp.id]);
})
.catch((error) => {
console/src/app/pages/projects/projects.component.ts
+1 -6
View File
@@ -34,16 +34,11 @@ export class ProjectsComponent {
this.zitadelProjectId = iam.iamProjectId;
});
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
breadcrumbService.setBreadcrumb([bread]);
}
public addProject(): void {
console/src/app/pages/user-grant-create/user-grant-create.component.ts
+4 -9
View File
@@ -50,11 +50,6 @@ export class UserGrantCreateComponent implements OnDestroy {
breadcrumbService: BreadcrumbService,
) {
breadcrumbService.setBreadcrumb([
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
}),
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],
@@ -122,7 +117,7 @@ export class UserGrantCreateComponent implements OnDestroy {
const prom = this.userIds.map((id) => this.userService.addUserGrant(id, this.rolesList, this.project.id));
Promise.all(prom)
.then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTADDED', true);
this.toast.showInfo('GRANTS.TOAST.UPDATED', true);
this.close();
})
.catch((error: any) => {
@@ -136,7 +131,7 @@ export class UserGrantCreateComponent implements OnDestroy {
);
Promise.all(promp)
.then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTUSERGRANTADDED', true);
this.toast.showInfo('GRANTS.TOAST.UPDATED', true);
this.close();
})
.catch((error: any) => {
@@ -156,7 +151,7 @@ export class UserGrantCreateComponent implements OnDestroy {
);
Promise.all(promu)
.then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTUSERGRANTADDED', true);
this.toast.showInfo('GRANTS.TOAST.UPDATED', true);
this.close();
})
.catch((error: any) => {
@@ -181,7 +176,7 @@ export class UserGrantCreateComponent implements OnDestroy {
);
Promise.all(promn)
.then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTUSERGRANTADDED', true);
this.toast.showInfo('GRANTS.TOAST.UPDATED', true);
this.close();
})
.catch((error: any) => {
console/src/app/pages/users/user-create-machine/user-create-machine.component.ts
-5
View File
@@ -27,11 +27,6 @@ export class UserCreateMachineComponent implements OnDestroy {
breadcrumbService: BreadcrumbService,
) {
breadcrumbService.setBreadcrumb([
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
}),
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],
console/src/app/pages/users/user-create/user-create.component.ts
-5
View File
@@ -66,11 +66,6 @@ export class UserCreateComponent implements OnDestroy {
breadcrumbService: BreadcrumbService,
) {
breadcrumbService.setBreadcrumb([
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
}),
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],
console/src/app/pages/users/user-detail/password/password.component.ts
-5
View File
@@ -51,11 +51,6 @@ export class PasswordComponent implements OnDestroy {
this.userId = id;
breadcrumbService.setBreadcrumb([
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
}),
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],
console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts
+2 -7
View File
@@ -22,10 +22,10 @@ import { ResendEmailDialogComponent } from '../auth-user-detail/resend-email-dia
const GENERAL: SidenavSetting = { id: 'general', i18nKey: 'USER.SETTINGS.GENERAL' };
const GRANTS: SidenavSetting = { id: 'grants', i18nKey: 'USER.SETTINGS.USERGRANTS' };
const METADATA: SidenavSetting = { id: 'metadata', i18nKey: 'USER.SETTINGS.METADATA'};
const METADATA: SidenavSetting = { id: 'metadata', i18nKey: 'USER.SETTINGS.METADATA' };
const IDP: SidenavSetting = { id: 'idp', i18nKey: 'USER.SETTINGS.IDP' };
const PASSWORDLESS: SidenavSetting = { id: 'passwordless', i18nKey: 'USER.SETTINGS.PASSWORDLESS' };
const MFA: SidenavSetting = { id: 'mfa', i18nKey: 'USER.SETTINGS.MFA'};
const MFA: SidenavSetting = { id: 'mfa', i18nKey: 'USER.SETTINGS.MFA' };
const PERSONALACCESSTOKEN: SidenavSetting = { id: 'pat', i18nKey: 'USER.SETTINGS.PAT' };
const KEYS: SidenavSetting = { id: 'keys', i18nKey: 'USER.SETTINGS.KEYS' };
const MEMBERSHIPS: SidenavSetting = { id: 'memberships', i18nKey: 'USER.SETTINGS.MEMBERSHIPS' };
@@ -69,11 +69,6 @@ export class UserDetailComponent implements OnInit {
breadcrumbService: BreadcrumbService,
) {
breadcrumbService.setBreadcrumb([
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
}),
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],
console/src/app/pages/users/user-list/user-list.component.ts
+1 -6
View File
@@ -24,15 +24,10 @@ export class UserListComponent {
}
});
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
breadcrumbService.setBreadcrumb([bread]);
}
}