Merge branch 'master' into new-eventstore

console/src/app/app.component.html

@@ -49,6 +49,8 @@
             </mat-menu>
             <span class="fill-space"></span>
 
+            <a class="doc-link" href="https://docs.zitadel.ch" mat-stroked-button
+                target="_blank">{{'MENU.DOCUMENTATION' | translate}}</a>
             <div (clickOutside)="closeAccountCard()" class="icon-container">
                 <app-avatar *ngIf="user && (user.displayName || (user.firstName && user.lastName))"
                     class="avatar dontcloseonclick" (click)="showAccount = !showAccount" [active]="showAccount"
@@ -73,44 +75,31 @@
                             </a>
                         </ng-container>
 
-                        <ng-container *ngIf="iamuser$ | async">
-                            <div @navitem class="divider">
-                                <div class="line"></div>
-                                <span>{{'MENU.ADMINSECTION' | translate}}</span>
-                                <div class="hiddenline"></div>
-                            </div>
-                            <a @navitem matTooltip="{{'MENU.TOOLTIP.IAM' | translate}}" class="nav-item"
-                                [routerLinkActive]="['active']" [routerLink]="[ '/iam']">
-                                <i class="icon las la-gem"></i>
-                                <span class="label">{{'MENU.IAM' | translate}}</span>
-                            </a>
-                        </ng-container>
-
                         <div *ngIf="org" [@navAnimation]="org">
-                            <ng-template appHasRole [appHasRole]="['org.read']">
+                            <ng-template appHasRole
+                                [appHasRole]="['org.read', 'project.read(:[0-9]*)?', 'user.read(:[0-9]*)?', 'user.grant.read(:[0-9]*)?']">
                                 <div @navitem class="divider">
                                     <div class="line"></div>
-                                    <span>{{'MENU.ORGSECTION' | translate}}</span>
+                                    <span>{{org?.name ? org.name : ('MENU.ORGSECTION' | translate)}}</span>
                                     <div class="hiddenline"></div>
                                 </div>
+                            </ng-template>
 
+                            <ng-template appHasRole [appHasRole]="['org.read']">
                                 <a @navitem matTooltip="{{'MENU.TOOLTIP.ORG' | translate}}" class="nav-item"
                                     [routerLinkActive]="['active']" [routerLink]="[ '/org']">
                                     <i class="icon las la-archway"></i>
-                                    <span
+                                    <span class="label">{{'MENU.ORGANIZATION' | translate}}</span>
-                                        class="label">{{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}}</span>
                                 </a>
                             </ng-template>
 
                             <ng-template appHasRole [appHasRole]="['project.read(:[0-9]*)?']">
-                                <a @navitem matTooltip="{{'MENU.TOOLTIP.SELFPROJECTS' | translate}}"
+                                <a @navitem matTooltip="{{'MENU.TOOLTIP.SELFPROJECTS' | translate}}" class="nav-item"
-                                    class="nav-item indented" [routerLinkActive]="['active']"
+                                    [routerLinkActive]="['active']" [routerLink]="[ '/projects']">
-                                    [routerLink]="[ '/projects']">
                                     <i class="icon las la-layer-group"></i>
 
                                     <div class="c_label">
-                                        <span>{{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}}
+                                        <span> {{'MENU.PROJECT' | translate}} </span>
-                                            {{'MENU.PROJECT' | translate}} </span>
                                         <span *ngIf="(mgmtService?.ownedProjectsCount | async)"
                                             class="count">{{mgmtService?.ownedProjectsCount | async}}</span>
                                     </div>
@@ -118,7 +107,7 @@
 
                                 <a @navitem matTooltip="{{'MENU.TOOLTIP.GRANTEDPROJECTS' | translate}}"
                                     *ngIf="mgmtService?.grantedProjectsCount && (mgmtService?.grantedProjectsCount | async)"
-                                    class="nav-item indented" [routerLinkActive]="['active']"
+                                    class="nav-item" [routerLinkActive]="['active']"
                                     [routerLink]="[ '/granted-projects']">
                                     <i class="icon las la-layer-group"></i>
                                     <div class="c_label">
@@ -129,16 +118,15 @@
                             </ng-template>
 
                             <ng-template appHasRole [appHasRole]="['user.read(:[0-9]*)?']">
-                                <a @navitem matTooltip="{{'MENU.TOOLTIP.HUMANUSERS' | translate}}"
+                                <a @navitem matTooltip="{{'MENU.TOOLTIP.HUMANUSERS' | translate}}" class="nav-item"
-                                    class="nav-item indented" [routerLinkActive]="['active']"
+                                    [routerLinkActive]="['active']" [routerLink]="[ '/users/list/humans']"
-                                    [routerLink]="[ '/users/list/humans']" [routerLinkActiveOptions]="{ exact: true }">
+                                    [routerLinkActiveOptions]="{ exact: true }">
                                     <i class="icon las la-user-friends"></i>
                                     <span class="label">{{ 'MENU.HUMANUSERS' | translate }}</span>
                                 </a>
 
-                                <a @navitem matTooltip="{{'MENU.TOOLTIP.MACHINEUSERS' | translate}}"
+                                <a @navitem matTooltip="{{'MENU.TOOLTIP.MACHINEUSERS' | translate}}" class="nav-item"
-                                    class="nav-item indented" [routerLinkActive]="['active']"
+                                    [routerLinkActive]="['active']" [routerLink]="[ '/users/list/machines']"
-                                    [routerLink]="[ '/users/list/machines']"
                                     [routerLinkActiveOptions]="{ exact: true }">
                                     <i class="icon las la-users-cog"></i>
                                     <span class="label">{{ 'MENU.MACHINEUSERS' | translate }}</span>
@@ -146,21 +134,33 @@
                             </ng-template>
 
                             <ng-template appHasRole [appHasRole]="['user.grant.read(:[0-9]*)?']">
-                                <!-- <div @navitem class="divider">
+                                <a @navitem class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/grants']"
-                                    <div class="line"></div>
+                                    [routerLinkActiveOptions]="{ exact: true }">
-                                    <span class="label">
-                                        {{ 'MENU.GRANTSECTION' | translate }}</span>
-                                    <div class="hiddenline"></div>
-                                </div> -->
-
-                                <a @navitem class="nav-item indented" [routerLinkActive]="['active']"
-                                    [routerLink]="[ '/grants']" [routerLinkActiveOptions]="{ exact: true }">
                                     <i class="icon las la-shield-alt"></i>
                                     <span class="label">{{ 'MENU.GRANTS' | translate }}</span>
                                 </a>
                             </ng-template>
                         </div>
 
+                        <ng-container *ngIf="iamuser$ | async">
+                            <div @navitem class="divider">
+                                <div class="line"></div>
+                                <span>{{'MENU.ADMINSECTION' | translate}}</span>
+                                <div class="hiddenline"></div>
+                            </div>
+                            <a @navitem matTooltip="{{'MENU.TOOLTIP.IAMPOLICIES' | translate}}" class="nav-item"
+                                [routerLinkActive]="['active']" [routerLink]="[ '/iam','policies']">
+                                <i class="icon las la-gem"></i>
+                                <span class="label">{{'MENU.IAMPOLICIES' | translate}}</span>
+                            </a>
+
+                            <a @navitem matTooltip="{{'MENU.TOOLTIP.IAMEVENTSTORE' | translate}}" class="nav-item"
+                                [routerLinkActive]="['active']" [routerLink]="[ '/iam', 'eventstore']">
+                                <i class="icon las la-gem"></i>
+                                <span class="label">{{'MENU.IAMEVENTSTORE' | translate}}</span>
+                            </a>
+                        </ng-container>
+
                         <span class="fill-space"></span>
                     </div>
                     <span class="fill-space"></span>

console/src/app/app.component.scss

@@ -34,6 +34,10 @@
     flex: 1;
   }
 
+  .doc-link {
+    margin-right: 1rem;
+  }
+
   .icon-container {
     display: flex;
     justify-content: space-between;
@@ -105,10 +109,8 @@
           cursor: pointer;
           padding: 0 1rem;
           margin-right: .5rem;
-
+          border-top-right-radius: 1.5rem;
-          &.indented {
+          border-bottom-right-radius: 1.5rem;
-            padding-left: 2rem;
-          }
 
           .icon {
             margin: .5rem 1rem;
@@ -219,6 +221,7 @@
     height: 1px;
     margin: .5rem 0;
     flex: 1;
+    min-width: 10px;
   }
 
   .hiddenline {

console/src/app/pages/iam/eventstore/eventstore.component.html

@@ -0,0 +1,12 @@
+<div class="max-width-container">
+    <h1>{{ 'IAM.EVENTSTORE.TITLE' | translate }}</h1>
+    <p class="desc">{{'IAM.EVENTSTORE.DESCRIPTION' | translate }}</p>
+    <app-card title="{{ 'IAM.VIEWS.TITLE' | translate }}" description="{{ 'IAM.VIEWS.DESCRIPTION' | translate }}">
+        <app-iam-views></app-iam-views>
+    </app-card>
+
+    <app-card title="{{ 'IAM.FAILEDEVENTS.TITLE' | translate }}"
+        description="{{ 'IAM.FAILEDEVENTS.DESCRIPTION' | translate }}">
+        <app-iam-failed-events></app-iam-failed-events>
+    </app-card>
+</div>

console/src/app/pages/iam/eventstore/eventstore.component.scss

@@ -0,0 +1,8 @@
+h1 {
+  margin-top: 0;
+}
+
+.desc {
+  color: var(--grey);
+  margin-bottom: 2rem;
+}

console/src/app/pages/iam/eventstore/eventstore.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventstoreComponent } from './eventstore.component';
+
+describe('EventstoreComponent', () => {
+    let component: EventstoreComponent;
+    let fixture: ComponentFixture<EventstoreComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [EventstoreComponent],
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(EventstoreComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

console/src/app/pages/iam/eventstore/eventstore.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-eventstore',
+    templateUrl: './eventstore.component.html',
+    styleUrls: ['./eventstore.component.scss'],
+})
+export class EventstoreComponent { }

console/src/app/pages/iam/iam-routing.module.ts

@@ -4,17 +4,26 @@ 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 { EventstoreComponent } from './eventstore/eventstore.component';
 import { IamComponent } from './iam.component';
 
 const routes: Routes = [
     {
-        path: '',
+        path: 'policies',
         component: IamComponent,
         canActivate: [AuthGuard, RoleGuard],
         data: {
             roles: ['iam.read'],
         },
     },
+    {
+        path: 'eventstore',
+        component: EventstoreComponent,
+        canActivate: [AuthGuard, RoleGuard],
+        data: {
+            roles: ['iam.read'],
+        },
+    },
     {
         path: 'members',
         loadChildren: () => import('./iam-members/iam-members.module').then(m => m.IamMembersModule),

console/src/app/pages/iam/iam.component.html

@@ -1,18 +1,9 @@
 <app-meta-layout>
     <div class="enlarged-container">
-        <h1 class="h1">{{'IAM.DETAIL.TITLE' | translate}}</h1>
+        <h1 class="h1">{{'IAM.POLICIES.TITLE' | translate}}</h1>
-        <p class="sub">{{'IAM.DETAIL.DESCRIPTION' | translate}} </p>
+        <p class="sub">{{'IAM.POLICIES.DESCRIPTION' | translate}} </p>
 
         <app-policy-grid [type]="PolicyGridType.IAM"></app-policy-grid>
-
-        <app-card title="{{ 'IAM.VIEWS.TITLE' | translate }}" description="{{ 'IAM.VIEWS.DESCRIPTION' | translate }}">
-            <app-iam-views></app-iam-views>
-        </app-card>
-
-        <app-card title="{{ 'IAM.FAILEDEVENTS.TITLE' | translate }}"
-            description="{{ 'IAM.FAILEDEVENTS.DESCRIPTION' | translate }}">
-            <app-iam-failed-events></app-iam-failed-events>
-        </app-card>
     </div>
 
     <div class="side" metainfo>

console/src/app/pages/iam/iam.module.ts

@@ -26,13 +26,14 @@ 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 { EventstoreComponent } from './eventstore/eventstore.component';
 import { FailedEventsComponent } from './failed-events/failed-events.component';
 import { IamRoutingModule } from './iam-routing.module';
 import { IamViewsComponent } from './iam-views/iam-views.component';
 import { IamComponent } from './iam.component';
 
 @NgModule({
-    declarations: [IamComponent, IamViewsComponent, FailedEventsComponent],
+    declarations: [IamComponent, EventstoreComponent, IamViewsComponent, FailedEventsComponent],
     imports: [
         CommonModule,
         IamRoutingModule,

console/src/assets/i18n/de.json

@@ -36,7 +36,9 @@
     },
     "MENU": {
         "PERSONAL_INFO": "Persönliche Informationen",
-        "IAM":"Administration",
+        "DOCUMENTATION":"Dokumentation",
+        "IAMPOLICIES":"IAM",
+        "IAMEVENTSTORE":"Speicher",
         "ORGANIZATION": "Organisation",
         "ADMINSECTION":"ZITADEL Administration",
         "ORGSECTION":"Organisation",
@@ -54,7 +56,8 @@
         "GRANTS":"Berechtigungen",
         "TOOLTIP": {
             "PERSONAL":"Verwalte deinen persönlichen Account, deine IDPs, Login Methoden, Faktoren und Berechtigungen",
-            "IAM":"Verwalte ZITADELs globale Zugangsrichtlinien, bereinige views und fehlerhafte events",
+            "IAMPOLICIES":"Verwalte ZITADELs globale Zugangsrichtlinien und verwalte ZITADEL Manager",
+            "IAMEVENTSTORE":"Bereinige views und fehlerhafte Events",
             "ORG":"Verwalte die Zugangsrichtlinien und Domains deiner Organisation ",
             "SELFPROJECTS":"Verwalte die Projekte deiner Organisation",
             "GRANTEDPROJECTS":"Verwalte die berechtigten Projekte von anderen Organisationen",
@@ -370,9 +373,13 @@
         }
     },
     "IAM": {
-        "DETAIL": {
+        "POLICIES": {
-            "TITLE":"Administration Identity- und Access-Management Administration",
+            "TITLE":"IAM Administration",
-            "DESCRIPTION":"Verwalte die Einstellungen von ZITADEL."
+            "DESCRIPTION":"Verwalte Richtlinen und Zugangseinstellungen von ZITADEL."
+        },
+        "EVENTSTORE": {
+            "TITLE":"IAM Speicher Administration",
+            "DESCRIPTION":"Verwalte Speicher Einstellungen von ZITADEL."
         },
         "MEMBER": {
             "TITLE":"Manager",

console/src/assets/i18n/en.json

@@ -36,7 +36,9 @@
     },
     "MENU": {
         "PERSONAL_INFO": "Personal Information",
-        "IAM":"Administration",
+        "DOCUMENTATION":"Documentation",
+        "IAMPOLICIES":"IAM",
+        "IAMEVENTSTORE":"Storage",
         "ORGANIZATION": "Organisation",
         "ADMINSECTION":"ZITADEL Administration",
         "ORGSECTION":"Organisation",
@@ -54,7 +56,8 @@
         "GRANTS":"Authorizations",
         "TOOLTIP": {
             "PERSONAL":"Show your Personal Account, your IDPs, Login methods, Factors and Authorisations",
-            "IAM":"Show ZITADELs global access policies, clear views and failed events",
+            "IAMPOLICIES":"Manage ZITADELs global Access policies und elect ZITADEL Managers",
+            "IAMEVENTSTORE":"Clear views and failed events",
             "ORG":"Show your organisations access policies, and manage your domain names",
             "SELFPROJECTS":"Show your organisations own projects",
             "GRANTEDPROJECTS":"Show projects your organisation was granted access",
@@ -370,9 +373,13 @@
         }
     },
     "IAM": {
-        "DETAIL": {
+        "POLICIES": {
-            "TITLE":"Identity and Access Management Administration",
+            "TITLE":"IAM Policies and Access Settings",
-            "DESCRIPTION":"Manage the ZITADEL settings."
+            "DESCRIPTION":"Manage your ZITADEL Policies and Management Access Settings."
+        },
+        "EVENTSTORE": {
+            "TITLE":"IAM Storage Administration",
+            "DESCRIPTION":"Manage your ZITADEL views and failed events."
         },
         "MEMBER": {
             "TITLE":"Managers",

console/src/styles.scss

@@ -274,7 +274,7 @@ h2 {
 .max-width-container {
   max-width: 1350px;
   padding: 0 1.5rem;
-  padding-top: 4rem;
+  padding-top: 2rem;
   padding-left: 4rem;
 
   @media only screen and (min-width: 1024px) {
@@ -293,7 +293,7 @@ h2 {
 
 .enlarged-container {
   padding: 0 1.5rem;
-  padding-top: 4rem;
+  padding-top: 2rem;
   padding-left: 4rem;
 
   @media only screen and (max-width: 500px) {

console/src/styles/sidenav-list.scss

@@ -32,10 +32,8 @@
 
     .c_label {
       .count {
-        background-color: $primary-color;
         padding: 3px 6px;
         border-radius: 50vw;
-        color: white;
       }
     }
   }