feat(console): MDC components (#6482)

mdc components

---------

Co-authored-by: Elio Bischof <[email protected]>

console/src/app/services/exhausted.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { map, Observable, of, switchMap, tap } from 'rxjs';
 import { WarnDialogComponent } from '../modules/warn-dialog/warn-dialog.component';
 import { Environment } from './environment.service';

console/src/app/services/grpc-auth.service.ts

@@ -163,7 +163,6 @@ export class GrpcAuthService {
 
     this.labelpolicy$.subscribe({
       next: (policy) => {
-        themeService.applyLabelPolicy(policy);
         this.labelpolicy.next(policy);
         this.labelPolicyLoading$.next(false);
       },

console/src/app/services/grpc.service.ts

@@ -1,6 +1,6 @@
 import { PlatformLocation } from '@angular/common';
 import { Injectable } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { AuthConfig } from 'angular-oauth2-oidc';
 import { catchError, switchMap, tap, throwError } from 'rxjs';
@@ -17,7 +17,6 @@ import { ExhaustedGrpcInterceptor } from './interceptors/exhausted.grpc.intercep
 import { I18nInterceptor } from './interceptors/i18n.interceptor';
 import { OrgInterceptor } from './interceptors/org.interceptor';
 import { StorageService } from './storage.service';
-import { ThemeService } from './theme.service';
 
 @Injectable({
   providedIn: 'root',
@@ -35,11 +34,9 @@ export class GrpcService {
     private dialog: MatDialog,
     private translate: TranslateService,
     private exhaustedService: ExhaustedService,
-    private themeService: ThemeService,
   ) {}
 
   public loadAppEnvironment(): Promise<any> {
-    this.themeService.applyLabelPolicy();
     // We use the browser language until we can make API requests to get the users configured language.
 
     const browserLanguage = this.translate.getBrowserLang();

console/src/app/services/interceptors/auth.interceptor.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { Request, UnaryInterceptor, UnaryResponse } from 'grpc-web';
 import { Subject } from 'rxjs';
 import { debounceTime, filter, first, take } from 'rxjs/operators';

console/src/app/services/keyboard-shortcuts/keyboard-shortcuts.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, OnDestroy, Renderer2, RendererFactory2 } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { BehaviorSubject, Observable, of, pairwise, Subject, takeUntil } from 'rxjs';
 
@@ -118,15 +118,9 @@ export class KeyboardShortcutsService implements OnDestroy {
   }
 
   public openOverviewDialog(): void {
-    const dialogRef = this.dialog.open(KeyboardShortcutsComponent, {
-      data: {},
+    this.dialog.open(KeyboardShortcutsComponent, {
       width: '400px',
     });
-
-    dialogRef.afterClosed().subscribe((resp) => {
-      if (resp) {
-      }
-    });
   }
 
   private hasPermission(shortcut: KeyboardShortcut): Observable<boolean> {

console/src/app/services/theme.service.ts

@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { LabelPolicy } from '../proto/generated/zitadel/policy_pb';
 
 declare const tinycolor: any;
 
@@ -41,7 +40,6 @@ export class ThemeService {
         this.setDarkTheme(true);
       }
     }
-    this.applyLabelPolicy(); // apply default
   }
 
   setDarkTheme(isDarkTheme: boolean): void {
@@ -125,70 +123,4 @@ export class ThemeService {
       return '#ffffff';
     }
   }
-
-  public setDefaultColors = () => {
-    this.savePrimaryColor(DARK_PRIMARY, true);
-    this.savePrimaryColor(PRIMARY, false);
-
-    this.saveWarnColor(DARK_WARN, true);
-    this.saveWarnColor(WARN, false);
-
-    this.saveBackgroundColor(DARK_BACKGROUND, true);
-    this.saveBackgroundColor(BACKGROUND, false);
-
-    this.saveTextColor(DARK_TEXT, true);
-    this.saveTextColor(TEXT, false);
-  };
-
-  public applyLabelPolicy(labelpolicy?: LabelPolicy.AsObject) {
-    if (labelpolicy) {
-      const darkPrimary = labelpolicy?.primaryColorDark ?? DARK_PRIMARY;
-      const lightPrimary = labelpolicy?.primaryColor ?? PRIMARY;
-
-      const darkWarn = labelpolicy?.warnColorDark ?? DARK_WARN;
-      const lightWarn = labelpolicy?.warnColor ?? WARN;
-
-      let darkBackground = labelpolicy?.backgroundColorDark ?? DARK_BACKGROUND;
-      let lightBackground = labelpolicy?.backgroundColor ?? BACKGROUND;
-
-      let darkText = labelpolicy?.fontColorDark ?? DARK_TEXT;
-      let lightText = labelpolicy?.fontColor ?? TEXT;
-
-      this.savePrimaryColor(darkPrimary, true);
-      this.savePrimaryColor(lightPrimary, false);
-
-      this.saveWarnColor(darkWarn, true);
-      this.saveWarnColor(lightWarn, false);
-
-      if (darkBackground && !this.isDark(darkBackground)) {
-        console.info(
-          `Background (${darkBackground}) is not dark enough for a dark theme. Falling back to zitadel background`,
-        );
-        darkBackground = '#111827';
-      }
-      this.saveBackgroundColor(darkBackground || '#111827', true);
-
-      if (lightBackground && !this.isLight(lightBackground)) {
-        console.info(
-          `Background (${lightBackground}) is not light enough for a light theme. Falling back to zitadel background`,
-        );
-        lightBackground = '#fafafa';
-      }
-      this.saveBackgroundColor(lightBackground || '#fafafa', false);
-
-      if (darkText && !this.isLight(darkText)) {
-        console.info(`Text color (${darkText}) is not light enough for a dark theme. Falling back to zitadel's text color`);
-        darkText = '#ffffff';
-      }
-      this.saveTextColor(darkText || '#ffffff', true);
-
-      if (lightText && !this.isDark(lightText)) {
-        console.info(`Text color (${lightText}) is not dark enough for a light theme. Falling back to zitadel's text color`);
-        lightText = '#000000';
-      }
-      this.saveTextColor(lightText || '#000000', false);
-    } else {
-      this.setDefaultColors();
-    }
-  }
 }

console/src/app/services/toast.service.ts

@@ -1,9 +1,5 @@
 import { Injectable } from '@angular/core';
-import {
-  MatLegacySnackBar as MatSnackBar,
-  MatLegacySnackBarHorizontalPosition as MatSnackBarHorizontalPosition,
-  MatLegacySnackBarVerticalPosition as MatSnackBarVerticalPosition,
-} from '@angular/material/legacy-snack-bar';
+import { MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition } from '@angular/material/snack-bar';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
@@ -68,7 +64,7 @@ export class ToastService {
       data: {
         message,
       },
-      duration: success ? 4000 : 5000,
+      duration: success ? 4000 : 50000,
       panelClass: ['data-e2e-message', success ? 'data-e2e-success' : 'data-e2e-failure'],
       horizontalPosition: this.horizontalPosition,
       verticalPosition: this.verticalPosition,

console/src/app/services/update.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { SwUpdate } from '@angular/service-worker';
 
 @Injectable({