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-10-31 03:22:15 +00:00 · 2021-06-01 07:02:49 +02:00
parent 4fde6df477
commit 74ff154b19
51 changed files with 20195 additions and 7911 deletions
@@ -1,12 +1,12 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;

@mixin app-card-theme($theme) {
  /* stylelint-disable */
  $primary: map-get($theme, primary);
-  $primary-dark: mat-color($primary, A900);
+  $primary-dark: mat.get-color-from-palette($primary, A900);
  $accent: map-get($theme, accent);
  $is-dark-theme: map-get($theme, is-dark);
-  $accent-color: mat-color($primary, 500);
+  $accent-color: mat.get-color-from-palette($primary, 500);
  /* stylelint-enable */

  .cnsl-app-card {
@@ -1,5 +1,4 @@
-
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;

 .radio-button-wrapper {
  display: flex;
@@ -14,7 +13,7 @@

@mixin app-auth-method-radio-theme($theme) {
  $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
  $is-dark-theme: map-get($theme, is-dark);

  input[type="radio"] {
@@ -1,5 +1,4 @@
-
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;

 .radio-button-wrapper {
  display: flex;
@@ -10,7 +9,7 @@

@mixin app-type-radio-theme($theme) {
  $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
  $is-dark-theme: map-get($theme, is-dark);

  input[type="radio"] {
@@ -1,9 +1,8 @@
-
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;

@mixin avatar-theme($theme) {
  $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);

  .avatar-circle {
    border-radius: 50%;
@@ -1,12 +1,12 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;

@mixin card-theme($theme) {
 /* stylelint-disable */
  $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
-  $primary-dark: mat-color($primary, A800);
-  $border-color: mat-color($primary, A700);
-  $border-selected-color: mat-color($primary, A600);
+  $primary-color: mat.get-color-from-palette($primary, 500);
+  $primary-dark: mat.get-color-from-palette($primary, A800);
+  $border-color: mat.get-color-from-palette($primary, A700);
+  $border-selected-color: mat.get-color-from-palette($primary, A600);
 /* stylelint-enable */

  .card {
@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;

 .change-header {
  display: flex;
@@ -114,7 +114,7 @@

        /* stylelint-disable */
        $primary: map-get($theme, primary);
-        $primary-dark: mat-color($primary, A800);
+        $primary-dark: mat.get-color-from-palette($primary, A800);
        /* stylelint-enable */

        &.change-item-back {
@@ -1,13 +1,13 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;

@mixin detail-layout-theme($theme) {
  /* stylelint-disable */
  $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
-  $primary-dark: mat-color($primary, A800);
+  $primary-color: mat.get-color-from-palette($primary, 500);
+  $primary-dark: mat.get-color-from-palette($primary, A800);
  /* stylelint-enable */

-  $lighter-color: rgba(mat-color($primary, 300), .5);
+  $lighter-color: rgba(mat.get-color-from-palette($primary, 300), .5);

  .detail-container {
    width: 100%;
@@ -7,7 +7,12 @@

    <div class="detail">
        <p class="title">{{'FEATURES.TIER.NAME' | translate}}</p>
-        <p>{{features?.tier?.name}}</p>
+        <p class="center">{{features?.tier?.name}}
+          <a class="ext" href="https://zitadel.ch/pricing"
+          target="_blank">
+            <i class="las la-external-link-alt"></i>
+          </a>
+        </p>
    </div>

    <ng-container *ngIf="serviceType === FeatureServiceType.MGMT">
@@ -30,6 +30,15 @@
    }
  }

+  .center {
+    display: flex;
+    align-items: center;
+
+    a {
+      margin-left: .5rem;
+    }
+  }
+
  img {
    height: 15px;
    width: auto;
@@ -1,9 +1,8 @@
-
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;

@mixin cnsl-form-field-theme($theme) {
  $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
  $is-dark-theme: map-get($theme, is-dark);

  .ng-untouched {
@@ -1,8 +1,8 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;

@mixin info-section-theme($theme) {
  $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
  $is-dark-theme: map-get($theme, is-dark);

  .info-section-row {
@@ -25,6 +25,15 @@
    }

    &.info {
+      background-color: if($is-dark-theme, #6d6f7382, #e4e4e4);
+      color: if($is-dark-theme, #f0f0f0, #4a4a4a);
+
+      .icon {
+        color: $primary-color;
+      }
+    }
+
+    &.success {
      background-color: if($is-dark-theme, #4f566b, #cbf4c9);
      color: if($is-dark-theme, #cbf4c9, #0e6245);

@@ -1,16 +1,17 @@
 import { Component, Input } from '@angular/core';

 enum InfoSectionType {
-    INFO = 'INFO',
-    WARN = 'WARN',
+  INFO = 'INFO',
+  SUCCESS = 'SUCCESS',
+  WARN = 'WARN',
 }

@Component({
-    selector: 'cnsl-info-section',
-    templateUrl: './info-section.component.html',
-    styleUrls: ['./info-section.component.scss'],
+  selector: 'cnsl-info-section',
+  templateUrl: './info-section.component.html',
+  styleUrls: ['./info-section.component.scss'],
 })
 export class InfoSectionComponent {

-    @Input() type: InfoSectionType = InfoSectionType.INFO;
+  @Input() type: InfoSectionType = InfoSectionType.INFO;
 }
@@ -1,12 +1,11 @@
-
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;

@mixin cnsl-label-theme($theme) {
  $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
  $is-dark-theme: map-get($theme, is-dark);
  $warn: map-get($theme, warn);
-  $warn-color: mat-color($warn, 500);
+  $warn-color: mat.get-color-from-palette($warn, 500);

  .cnsl-label {
    display: block;
@@ -1,6 +1,3 @@
-
-@import '~@angular/material/theming';
-
@mixin meta-theme($theme) {
  $is-dark-theme: map-get($theme, is-dark);

@@ -1,9 +1,9 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;

@mixin onboarding-theme($theme) {
  /* stylelint-disable */
  $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
  $is-dark-theme: map-get($theme, is-dark);
  /* stylelint-enable */

@@ -1,3 +1,7 @@
 .full-width {
  width: 100%;
 }
+
+input {
+  max-width: 500px;
+}
@@ -8,6 +8,7 @@

 .target-desc {
  font-size: 14px;
+  display: block;

  a {
    color: #4072b4;
@@ -70,3 +71,8 @@
 .circle {
  margin-right: .5rem;
 }
+
+input {
+  max-width: 500px;
+  display: block;
+}
@@ -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 { }