feat(console): angular 12, migrate grpc lib, ui element fixes (#1740)

* fix: is default * fix: feature tile in org, iam, neutral color for info boxes * lint * consolidation, ui elements * feat(console): angular 12, migrate deprecated grpc to @grpc/grpc-js (#1741) * update cli core * update material * mig * migrate grpc to grpc-js * audit * lint * node lts version, ng12 deprecation * rem comment * disable inlinestyles * fix iam feature link, binding
2026-11-14 18:05:12 +00:00 · 2021-06-01 07:02:49 +02:00
parent 4fde6df477
commit 74ff154b19
51 changed files with 20195 additions and 7911 deletions
@@ -0,0 +1,17 @@
+<div *ngIf="features" class="tier card">
+  <!-- <mat-icon class="icon">stars</mat-icon> -->
+  <img class="logo dark" alt="zitadel logo"
+                    src="../assets/images/zitadel-logo-solo-light-icon.svg" />
+  <img alt="zitadel logo" class="logo light" src="../assets/images/zitadel-logo-solo-dark-icon.svg" />
+  <div class="text" *ngIf="features.tier">
+      <p class="title"><strong>{{features.tier.name}}</strong></p>
+      <p>{{features.tier?.description}}</p>
+      <p class="state" [ngClass]="{'active': features.tier.state == FeaturesState.FEATURES_STATE_ACTIVE}">{{'FEATURES.TIERSTATES.'+features.tier.state | translate}}</p>
+      <p >{{features.tier?.statusInfo}}</p>
+  </div>
+  <span class="fill-space"></span>
+  <!-- <a *ngIf="['features.write'] | hasRole | async" class="ext" href="https://zitadel.ch/pricing"
+      target="_blank"><i class="las la-external-link-alt"></i></a> -->
+
+  <button mat-raised-button color="primary" [routerLink]="[ iam ? '/iam/features' : '/org/features']">{{'FEATURES.BTN-EDIT' | translate}}</button>
+</div>
@@ -0,0 +1,76 @@
+@mixin tier-theme($theme) {
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .tier {
+    display: flex;
+    flex-direction: row;
+    padding: 1rem;
+    border-radius: .5rem;
+    margin-bottom: .5rem;
+
+    .ext {
+      margin-right: .5rem;
+      align-self: center;
+      color: inherit;
+    }
+
+    .logo {
+      margin-right: 1rem;
+      max-height: 40px;
+      object-fit: contain;
+      filter: grayscale(1);
+      transition: filter .3s ease;
+
+      &.dark {
+        display: if($is-dark-theme, inline-block, none);
+      }
+
+      &.light {
+        display: if($is-dark-theme, none, inline-block);
+      }
+    }
+
+    .text {
+      display: flex;
+      flex-direction: column;
+
+      p:not(.state) {
+        margin: 0;
+        font-size: 14px;
+      }
+
+      .title {
+        font-size: 16px;
+        margin-bottom: .5rem;
+      }
+
+      .state {
+        align-self: flex-start;
+        border-radius: 50vw;
+        padding: 2px .5rem;
+        letter-spacing: .05em;
+        font-size: 12px;
+        background-color: if($is-dark-theme, #4f566b, #e4e7e4);
+
+        &.active {
+          background-color: if($is-dark-theme, #4f566b, #cbf4c9);
+          color: if($is-dark-theme, #cbf4c9, #0e6245);
+        }
+
+        &.inactive {
+          color: if($is-dark-theme, #ffc1c1, #620e0e);
+          background-color: if($is-dark-theme, #4f566b, #ffc1c1);
+        }
+      }
+    }
+
+    .fill-space {
+      flex: 1;
+    }
+
+    button {
+      // min-width: 200px;
+      align-self: center;
+    }
+  }
+}
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZitadelTierComponent } from './zitadel-tier.component';
+
+describe('ZitadelTierComponent', () => {
+  let component: ZitadelTierComponent;
+  let fixture: ComponentFixture<ZitadelTierComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ZitadelTierComponent],
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ZitadelTierComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Features, FeaturesState } from 'src/app/proto/generated/zitadel/features_pb';
+
+@Component({
+  selector: 'cnsl-zitadel-tier',
+  templateUrl: './zitadel-tier.component.html',
+  styleUrls: ['./zitadel-tier.component.scss'],
+})
+export class ZitadelTierComponent implements OnInit {
+  @Input() public features!: Features.AsObject;
+  @Input() public iam: boolean = false;
+
+  FeaturesState: any = FeaturesState;
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
+
+import { ZitadelTierComponent } from './zitadel-tier.component';
+
+
+
+@NgModule({
+  declarations: [
+    ZitadelTierComponent,
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    MatButtonModule,
+    MatIconModule,
+    HasRoleModule,
+    HasRolePipeModule,
+    TranslateModule,
+  ],
+  exports: [
+    ZitadelTierComponent,
+  ],
+})
+export class ZitadelTierModule { }