chore(console): angular 16 (#5870)

* ng 16

* material cdk

* module imports, rmn @accounts

* deps

* lint

* buf

---------

Co-authored-by: Elio Bischof <elio@zitadel.com>

console/angular.json

@@ -35,7 +35,8 @@
               "codemirror/mode/javascript/javascript",
               "codemirror/mode/xml/xml",
               "file-saver",
-              "qrcode"
+              "qrcode",
+              "codemirror"
             ]
           },
           "configurations": {

console/package.json

@@ -12,26 +12,23 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.2.6",
-    "@angular/cdk": "^15.2.6",
-    "@angular/common": "^15.2.6",
-    "@angular/compiler": "^15.2.6",
-    "@angular/core": "^15.2.6",
-    "@angular/forms": "^15.2.6",
-    "@angular/material": "^15.2.6",
-    "@angular/material-moment-adapter": "^15.2.6",
-    "@angular/platform-browser": "^15.2.6",
-    "@angular/platform-browser-dynamic": "^15.2.6",
-    "@angular/router": "^15.2.6",
-    "@angular/service-worker": "^15.2.6",
+    "@angular/animations": "^16.0.1",
+    "@angular/cdk": "^16.0.1",
+    "@angular/common": "^16.0.1",
+    "@angular/compiler": "^16.0.1",
+    "@angular/core": "^16.0.1",
+    "@angular/forms": "^16.0.1",
+    "@angular/material": "^16.0.1",
+    "@angular/material-moment-adapter": "^16.0.1",
+    "@angular/platform-browser": "^16.0.1",
+    "@angular/platform-browser-dynamic": "^16.0.1",
+    "@angular/router": "^16.0.1",
+    "@angular/service-worker": "^16.0.1",
     "@ctrl/ngx-codemirror": "^6.1.0",
-    "@grpc/grpc-js": "^1.8.12",
+    "@grpc/grpc-js": "^1.8.14",
     "@ngx-translate/core": "^14.0.0",
-    "@types/file-saver": "^2.0.2",
-    "@types/google-protobuf": "^3.15.3",
-    "@types/uuid": "^8.3.0",
     "angular-oauth2-oidc": "^15.0.1",
-    "angularx-qrcode": "^15.0.0",
+    "angularx-qrcode": "^16.0.0",
     "buffer": "^6.0.3",
     "codemirror": "^5.65.8",
     "cors": "^2.8.5",
@@ -40,8 +37,8 @@
     "google-proto-files": "^3.0.3",
     "google-protobuf": "^3.21.2",
     "grpc-web": "^1.4.1",
-    "i18n-iso-countries": "^7.5.0",
-    "libphonenumber-js": "^1.10.24",
+    "i18n-iso-countries": "^7.6.0",
+    "libphonenumber-js": "^1.10.30",
     "material-design-icons-iconfont": "^6.1.1",
     "moment": "^2.29.4",
     "ngx-color": "^8.0.3",
@@ -52,35 +49,38 @@
     "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.2.5",
-    "@angular-eslint/builder": "15.2.1",
-    "@angular-eslint/eslint-plugin": "15.2.1",
-    "@angular-eslint/eslint-plugin-template": "15.2.1",
-    "@angular-eslint/schematics": "15.2.1",
-    "@angular-eslint/template-parser": "15.2.1",
-    "@angular/cli": "^15.2.5",
-    "@angular/compiler-cli": "^15.2.6",
-    "@angular/language-service": "^15.2.6",
-    "@bufbuild/buf": "^1.14.0",
+    "@angular-devkit/build-angular": "^16.0.1",
+    "@angular-eslint/builder": "16.0.1",
+    "@angular-eslint/eslint-plugin": "16.0.1",
+    "@angular-eslint/eslint-plugin-template": "16.0.1",
+    "@angular-eslint/schematics": "16.0.1",
+    "@angular-eslint/template-parser": "16.0.1",
+    "@angular/cli": "^16.0.1",
+    "@angular/compiler-cli": "^16.0.1",
+    "@angular/language-service": "^16.0.1",
+    "@bufbuild/buf": "^1.18.0-1",
+    "@types/file-saver": "^2.0.2",
+    "@types/google-protobuf": "^3.15.3",
     "@types/jasmine": "~4.3.0",
     "@types/jasminewd2": "~2.0.10",
     "@types/jsonwebtoken": "^9.0.1",
     "@types/node": "^18.15.11",
     "@types/qrcode": "^1.5.0",
-    "@typescript-eslint/eslint-plugin": "5.48.2",
-    "@typescript-eslint/parser": "5.48.2",
+    "@types/uuid": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.5",
     "codelyzer": "^6.0.2",
-    "eslint": "^8.33.0",
+    "eslint": "^8.39.0",
     "jasmine-core": "~4.6.0",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.1",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~5.1.0",
+    "karma": "^6.4.2",
+    "karma-chrome-launcher": "^3.2.0",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
+    "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
     "prettier": "^2.8.7",
     "prettier-plugin-organize-imports": "^3.2.2",
     "protractor": "~7.0.0",
     "typescript": "^4.9.5"
   }
-}
+}

console/src/app/guards/auth.guard.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { AuthConfig } from 'angular-oauth2-oidc';
 import { Observable } from 'rxjs';
 
@@ -8,7 +8,7 @@ import { AuthenticationService } from '../services/authentication.service';
 @Injectable({
   providedIn: 'root',
 })
-export class AuthGuard implements CanActivate {
+export class AuthGuard {
   constructor(private auth: AuthenticationService) {}
 
   public canActivate(

console/src/app/guards/role.guard.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 
 import { GrpcAuthService } from '../services/grpc-auth.service';
@@ -7,7 +7,7 @@ import { GrpcAuthService } from '../services/grpc-auth.service';
 @Injectable({
   providedIn: 'root',
 })
-export class RoleGuard implements CanActivate {
+export class RoleGuard {
   constructor(private authService: GrpcAuthService) {}
 
   public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {

console/src/app/guards/user.guard.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
@@ -8,7 +8,7 @@ import { GrpcAuthService } from '../services/grpc-auth.service';
 @Injectable({
   providedIn: 'root',
 })
-export class UserGuard implements CanActivate {
+export class UserGuard {
   constructor(private authService: GrpcAuthService, private router: Router) {}
 
   public canActivate(

console/src/app/modules/header/header.component.html

@@ -228,7 +228,6 @@
         (detach)="showAccount = false"
       >
         <cnsl-accounts-card
-          @accounts
           class="a_card"
           *ngIf="showAccount"
           (closedCard)="showAccount = false"

console/src/app/modules/metadata/metadata.module.ts

@@ -5,13 +5,13 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 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 { CardModule } from '../card/card.module';
 
+import { MatLegacyTableModule } from '@angular/material/legacy-table';
 import { InputModule } from '../input/input.module';
 import { RefreshTableModule } from '../refresh-table/refresh-table.module';
 import { MetadataDialogComponent } from './metadata-dialog/metadata-dialog.component';
@@ -33,7 +33,7 @@ import { MetadataComponent } from './metadata/metadata.component';
     LocalizedDatePipeModule,
     TimestampToDatePipeModule,
     RefreshTableModule,
-    MatTableModule,
+    MatLegacyTableModule,
   ],
   exports: [MetadataComponent, MetadataDialogComponent],
 })

console/src/app/pages/orgs/org.module.ts

@@ -6,7 +6,6 @@ import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/lega
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
@@ -47,7 +46,6 @@ import { OrgRoutingModule } from './org-routing.module';
     MatIconModule,
     ReactiveFormsModule,
     MetaLayoutModule,
-    MatTabsModule,
     MatTooltipModule,
     WarnDialogModule,
     MemberCreateDialogModule,

console/src/app/pages/projects/granted-projects/granted-projects.module.ts

@@ -9,7 +9,6 @@ import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/mat
 import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { MatSortModule } from '@angular/material/sort';
 import { TranslateModule } from '@ngx-translate/core';
@@ -51,7 +50,6 @@ import { GrantedProjectsRoutingModule } from './granted-projects-routing.module'
     MatIconModule,
     MatSelectModule,
     MatButtonModule,
-    MatTabsModule,
     MatProgressSpinnerModule,
     MetaLayoutModule,
     MatProgressBarModule,

console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.module.ts

@@ -9,7 +9,6 @@ import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-m
 import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
@@ -53,7 +52,6 @@ import { OwnedProjectDetailComponent } from './owned-project-detail.component';
     MatIconModule,
     InfoRowModule,
     ContributorsModule,
-    MatTabsModule,
     WarnDialogModule,
     MatTooltipModule,
     ProjectRolesTableModule,

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

@@ -6,7 +6,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatLegacyTableModule } from '@angular/material/legacy-table';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { MatSortModule } from '@angular/material/sort';
 import { TranslateModule } from '@ngx-translate/core';
@@ -36,7 +36,7 @@ import { ProjectsComponent } from './projects.component';
     TranslateModule,
     FormsModule,
     HasRoleModule,
-    MatTableModule,
+    MatLegacyTableModule,
     PaginatorModule,
     InputModule,
     MatIconModule,

console/src/app/pages/users/user-detail/user-detail.module.ts

@@ -8,7 +8,6 @@ import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/lega
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
 import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
@@ -87,7 +86,6 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
     ChangesModule,
     CommonModule,
     SidenavModule,
-    MatTabsModule,
     FormsModule,
     ReactiveFormsModule,
     MembershipsTableModule,