feat: console flat navigation, settings (#3581)

* 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

console/src/app/pages/projects/apps/app-create/app-create.component.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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-routing.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { ProjectGrantsComponent } from './project-grants.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: ProjectGrantsComponent,
-    data: { animation: 'HomePage' },
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class ProjectGrantsRoutingModule {}

console/src/app/pages/projects/owned-projects/project-grants/project-grants.component.html

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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-routing.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { ProjectRolesComponent } from './project-roles.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: ProjectRolesComponent,
-    data: { animation: 'HomePage' },
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class ProjectRolesRoutingModule {}

console/src/app/pages/projects/owned-projects/project-roles/project-roles.component.html

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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 {