feat: console feature api (#1480)

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

@@ -2,6 +2,7 @@ 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 { FeatureServiceType } from 'src/app/modules/features/features.component';
 import { PolicyComponentServiceType, PolicyComponentType } from 'src/app/modules/policies/policy-component-types.enum';
 
 import { EventstoreComponent } from './eventstore/eventstore.component';
@@ -32,6 +33,15 @@ const routes: Routes = [
             roles: ['iam.member.read'],
         },
     },
+    {
+        path: 'features',
+        loadChildren: () => import('src/app/modules/features/features.module').then(m => m.FeaturesModule),
+        // canActivate: [RoleGuard],
+        data: {
+            roles: ['iam.features.read'],
+            serviceType: FeatureServiceType.ADMIN
+        },
+    },
     {
         path: 'idp',
         children: [

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

@@ -3,6 +3,22 @@
         <h1 class="h1">{{'IAM.POLICIES.TITLE' | translate}}</h1>
         <p class="sub">{{'IAM.POLICIES.DESCRIPTION' | translate}} </p>
 
+        <h2>{{'FEATURES.TITLE' | translate}}</h2>
+        <p class="top-desc">{{'FEATURES.DESCRIPTION' | translate}}</p>
+        <div *ngIf="features" class="tier">
+            <mat-icon>stars</mat-icon>
+            <div class="text" *ngIf="features.tier">
+                <p class="title"><strong>ZITADEL {{features.tier.name}}</strong></p>
+                <p>{{features.tier?.description}}</p>
+                <p>{{'FEATURES.TIERSTATES.'+features.tier.state | translate}}</p>
+                <p>{{features.tier?.statusInfo}}</p>
+            </div>
+            <span class="fill-space"></span>
+            <a class="ext" href="https://zitadel.ch/pricing" target="_blank"><i
+                    class="las la-external-link-alt"></i></a>
+            <button mat-raised-button [routerLink]="['/iam','features']">{{'FEATURES.BTN-EDIT' | translate}}</button>
+        </div>
+
         <app-policy-grid [type]="PolicyGridType.IAM"></app-policy-grid>
     </div>
 

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

@@ -6,3 +6,48 @@
   color: var(--grey);
   margin-bottom: 2rem;
 }
+
+.top-desc {
+  color: var(--grey);
+  font-size: 14px;
+}
+  
+.tier {
+    display: flex;
+    flex-direction: row;
+    padding: 1rem;
+    border-radius: .5rem;
+    color: white;
+    background-color: rgb(245, 203, 99);
+    margin-bottom: .5rem;
+
+    .ext {
+        margin-right: .5rem;
+        align-self: center;
+        color: inherit;
+    }
+
+    mat-icon {
+        margin-right: 1rem;
+        font-size: 2rem;
+    }
+
+    .text {
+        display: flex;
+        flex-direction: column;
+        p {
+            margin: 0;
+            font-size: 14px;
+        }
+        .title {
+            font-size: 16px;
+            margin-bottom: .5rem;
+        }
+
+        
+    }
+
+    .fill-space {
+        flex: 1;
+    }
+}

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

@@ -6,6 +6,7 @@ import { catchError, finalize, map } from 'rxjs/operators';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
 import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
 import { PolicyGridType } from 'src/app/modules/policy-grid/policy-grid.component';
+import { Features } from 'src/app/proto/generated/zitadel/features_pb';
 import { Member } from 'src/app/proto/generated/zitadel/member_pb';
 import { User } from 'src/app/proto/generated/zitadel/user_pb';
 import { AdminService } from 'src/app/services/admin.service';
@@ -25,10 +26,13 @@ export class IamComponent {
         = new BehaviorSubject<Member.AsObject[]>([]);
 
     public PolicyGridType: any = PolicyGridType;
+    public features!: Features.AsObject;
 
     constructor(public adminService: AdminService, private dialog: MatDialog, private toast: ToastService,
         private router: Router) {
         this.loadMembers();
+        this.loadFeatures();
+        this.adminService.getDefaultFeatures();
     }
 
     public loadMembers(): void {
@@ -79,4 +83,13 @@ export class IamComponent {
     public showDetail(): void {
         this.router.navigate(['iam/members']);
     }
+
+    public loadFeatures(): void {
+        this.loadingSubject.next(true);
+        this.adminService.getDefaultFeatures().then(resp => {
+            if (resp.features) {
+                this.features = resp.features;
+            }
+        });
+    }
 }