fix(console): role table pagination, selection (#4611)

* fix: console role table pagination, selection

* remove changedetector

* chore(deps-dev): bump eslint from 8.24.0 to 8.26.0 in /console (#4601)

* feat: allow disabling the mfa setup prompt (#4575)

* feat: allow disabling the mfa setup prompt

* e2e: disable mfa prompt

Co-authored-by: Max Peintner <max@caos.ch>

* fix(machine): delete domain policy dependency and restructure functions (#4605)

* fix(machine): delete domain policy dependency and restructure functions

* fix(machine): delete domain policy dependency and restructure functions

* fix(machine): move check for username and name

* fix: correct unit test for machine

Co-authored-by: Livio Spring <livio.a@gmail.com>

* docs(deploy): fix lb example (#4615)

* fix: instance remove (#4602)

* fix: join on instanceIDs in queries (#4612)

* fix(console): login text setters (#4600)

* fix: login text mapping

* fix mapping

Co-authored-by: Elio Bischof <eliobischof@gmail.com>
Co-authored-by: Livio Spring <livio.a@gmail.com>

* fix: nil pointer on jwt idps in actions (#4619)

* chore: improve wording (#4545)

* chore(deps-dev): bump eslint from 8.24.0 to 8.26.0 in /console

Bumps [eslint](https://github.com/eslint/eslint) from 8.24.0 to 8.26.0.
- [Release notes](https://github.com/eslint/eslint/releases)
- [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md)
- [Commits](https://github.com/eslint/eslint/compare/v8.24.0...v8.26.0)

---
updated-dependencies:
- dependency-name: eslint
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Livio Spring <livio.a@gmail.com>
Co-authored-by: Max Peintner <max@caos.ch>
Co-authored-by: Stefan Benz <46600784+stebenz@users.noreply.github.com>
Co-authored-by: Elio Bischof <eliobischof@gmail.com>
Co-authored-by: Florian Forster <florian@zitadel.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump google-protobuf from 3.21.0 to 3.21.2 in /console (#4538)

* feat: allow disabling the mfa setup prompt (#4575)

* feat: allow disabling the mfa setup prompt

* e2e: disable mfa prompt

Co-authored-by: Max Peintner <max@caos.ch>

* fix(machine): delete domain policy dependency and restructure functions (#4605)

* fix(machine): delete domain policy dependency and restructure functions

* fix(machine): delete domain policy dependency and restructure functions

* fix(machine): move check for username and name

* fix: correct unit test for machine

Co-authored-by: Livio Spring <livio.a@gmail.com>

* docs(deploy): fix lb example (#4615)

* fix: instance remove (#4602)

* fix: join on instanceIDs in queries (#4612)

* fix(console): login text setters (#4600)

* fix: login text mapping

* fix mapping

Co-authored-by: Elio Bischof <eliobischof@gmail.com>
Co-authored-by: Livio Spring <livio.a@gmail.com>

* fix: nil pointer on jwt idps in actions (#4619)

* chore: improve wording (#4545)

* chore(deps): bump google-protobuf from 3.21.0 to 3.21.2 in /console

Bumps [google-protobuf](https://github.com/protocolbuffers/protobuf-javascript) from 3.21.0 to 3.21.2.
- [Release notes](https://github.com/protocolbuffers/protobuf-javascript/releases)
- [Changelog](https://github.com/protocolbuffers/protobuf-javascript/blob/main/protobuf_javascript_release.bzl)
- [Commits](https://github.com/protocolbuffers/protobuf-javascript/compare/v3.21.0...v3.21.2)

---
updated-dependencies:
- dependency-name: google-protobuf
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Livio Spring <livio.a@gmail.com>
Co-authored-by: Max Peintner <max@caos.ch>
Co-authored-by: Stefan Benz <46600784+stebenz@users.noreply.github.com>
Co-authored-by: Elio Bischof <eliobischof@gmail.com>
Co-authored-by: Florian Forster <florian@zitadel.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* cli core

* material cdk

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Livio Spring <livio.a@gmail.com>
Co-authored-by: Stefan Benz <46600784+stebenz@users.noreply.github.com>
Co-authored-by: Elio Bischof <eliobischof@gmail.com>
Co-authored-by: Florian Forster <florian@zitadel.com>

console/package.json

@@ -12,18 +12,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.4",
+    "@angular/animations": "^14.2.8",
-    "@angular/cdk": "^14.2.3",
+    "@angular/cdk": "^14.2.6",
-    "@angular/common": "^14.2.4",
+    "@angular/common": "^14.2.8",
-    "@angular/compiler": "^14.2.4",
+    "@angular/compiler": "^14.2.8",
-    "@angular/core": "^14.2.4",
+    "@angular/core": "^14.2.8",
-    "@angular/forms": "^14.2.4",
+    "@angular/forms": "^14.2.8",
-    "@angular/material": "^14.2.3",
+    "@angular/material": "^14.2.6",
-    "@angular/material-moment-adapter": "^14.2.3",
+    "@angular/material-moment-adapter": "^14.2.6",
-    "@angular/platform-browser": "^14.2.4",
+    "@angular/platform-browser": "^14.2.8",
-    "@angular/platform-browser-dynamic": "^14.2.4",
+    "@angular/platform-browser-dynamic": "^14.2.8",
-    "@angular/router": "^14.2.4",
+    "@angular/router": "^14.2.8",
-    "@angular/service-worker": "^14.2.4",
+    "@angular/service-worker": "^14.2.8",
     "@ctrl/ngx-codemirror": "^5.1.1",
     "@grpc/grpc-js": "^1.7.1",
     "@ngx-translate/core": "^14.0.0",
@@ -36,7 +36,7 @@
     "cors": "^2.8.5",
     "file-saver": "^2.0.5",
     "google-proto-files": "^3.0.2",
-    "google-protobuf": "^3.19.4",
+    "google-protobuf": "^3.21.2",
     "grpc-web": "^1.4.1",
     "libphonenumber-js": "^1.10.6",
     "material-design-icons-iconfont": "^6.1.1",
@@ -51,15 +51,15 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.4",
+    "@angular-devkit/build-angular": "^14.2.7",
     "@angular-eslint/builder": "^14.1.2",
     "@angular-eslint/eslint-plugin": "^14.1.2",
     "@angular-eslint/eslint-plugin-template": "^14.1.2",
     "@angular-eslint/schematics": "^14.1.2",
     "@angular-eslint/template-parser": "^14.1.2",
-    "@angular/cli": "^14.2.4",
+    "@angular/cli": "^14.2.7",
-    "@angular/compiler-cli": "^14.2.4",
+    "@angular/compiler-cli": "^14.2.8",
-    "@angular/language-service": "^14.2.4",
+    "@angular/language-service": "^14.2.8",
     "@types/jasmine": "~4.3.0",
     "@types/jasminewd2": "~2.0.10",
     "@types/jsonwebtoken": "^8.5.5",
@@ -67,7 +67,7 @@
     "@typescript-eslint/eslint-plugin": "5.39.0",
     "@typescript-eslint/parser": "5.39.0",
     "codelyzer": "^6.0.0",
-    "eslint": "^8.24.0",
+    "eslint": "^8.26.0",
     "jasmine-core": "~4.4.0",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.4.1",

console/src/app/modules/project-roles-table/project-roles-table.component.html

@@ -41,8 +41,8 @@
             color="primary"
             [disabled]="disabled"
             (click)="$event.stopPropagation()"
-            (change)="$event ? selection.toggle(row) : null"
+            (change)="$event ? selection.toggle(row.key) : null"
-            [checked]="selection.isSelected(row)"
+            [checked]="selection.isSelected(row.key)"
           >
           </mat-checkbox>
         </td>

console/src/app/modules/project-roles-table/project-roles-table.component.ts

@@ -1,5 +1,5 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTable } from '@angular/material/table';
 import { Router } from '@angular/router';
@@ -27,8 +27,8 @@ export class ProjectRolesTableComponent implements OnInit {
   @ViewChild(PaginatorComponent) public paginator?: PaginatorComponent;
   @ViewChild(MatTable) public table?: MatTable<Role.AsObject>;
   public dataSource: ProjectRolesDataSource = new ProjectRolesDataSource(this.mgmtService);
-  public selection: SelectionModel<Role.AsObject> = new SelectionModel<Role.AsObject>(true, []);
+  public selection: SelectionModel<string> = new SelectionModel<string>(true, []);
-  @Output() public changedSelection: EventEmitter<Array<Role.AsObject>> = new EventEmitter();
+  @Output() public changedSelection: EventEmitter<Array<string>> = new EventEmitter();
   @Input() public displayedColumns: string[] = ['key', 'displayname', 'group', 'creationDate', 'changeDate', 'actions'];
 
   constructor(
@@ -47,7 +47,7 @@ export class ProjectRolesTableComponent implements OnInit {
 
     this.dataSource.rolesSubject.subscribe((roles) => {
       const selectedRoles: Role.AsObject[] = roles.filter((role) => this.selectedKeys.includes(role.key));
-      this.selection.select(...selectedRoles);
+      this.selection.select(...selectedRoles.map((r) => r.key));
     });
 
     this.selection.changed.subscribe(() => {
@@ -57,7 +57,7 @@ export class ProjectRolesTableComponent implements OnInit {
 
   public selectAllOfGroup(group: string): void {
     const groupRoles: Role.AsObject[] = this.dataSource.rolesSubject.getValue().filter((role) => role.group === group);
-    this.selection.select(...groupRoles);
+    this.selection.select(...groupRoles.map((r) => r.key));
   }
 
   private loadRolesPage(): void {
@@ -65,20 +65,19 @@ export class ProjectRolesTableComponent implements OnInit {
   }
 
   public changePage(): void {
-    this.selection.clear();
     this.loadRolesPage();
   }
 
   public isAllSelected(): boolean {
     const numSelected = this.selection.selected.length;
-    const numRows = this.dataSource.rolesSubject.value.length;
+    const numRows = this.dataSource.totalResult;
     return numSelected === numRows;
   }
 
   public masterToggle(): void {
     this.isAllSelected()
       ? this.selection.clear()
-      : this.dataSource.rolesSubject.value.forEach((row: Role.AsObject) => this.selection.select(row));
+      : this.dataSource.rolesSubject.value.forEach((row: Role.AsObject) => this.selection.select(row.key));
   }
 
   public deleteRole(role: Role.AsObject): void {

console/src/app/modules/user-grant-role-dialog/user-grant-role-dialog.component.html

@@ -1,5 +1,6 @@
 <span class="title" mat-dialog-title>{{ data.i18nTitle | translate }}</span>
 <div mat-dialog-content>
+  <div class="dialog-table-wrapper">
     <cnsl-project-roles-table
       class="role-table"
       *ngIf="projectId"
@@ -11,6 +12,7 @@
       [showSelectionActionButton]="false"
     >
     </cnsl-project-roles-table>
+  </div>
 </div>
 <div mat-dialog-actions class="action">
   <button mat-stroked-button (click)="closeDialog()">

console/src/app/modules/user-grant-role-dialog/user-grant-role-dialog.component.scss

@@ -3,10 +3,15 @@
   margin-top: 0;
 }
 
-.role-table {
+.dialog-table-wrapper {
+  max-height: 500px;
+  overflow-y: auto;
+
+  .role-table {
     display: block;
     width: 100%;
     margin-top: 1rem;
+  }
 }
 
 .action {

console/src/app/modules/user-grant-role-dialog/user-grant-role-dialog.component.ts

@@ -12,7 +12,7 @@ export class UserGrantRoleDialogComponent {
   public grantId: string = '';
   public selectedRoleKeysList: string[] = [];
 
-  public selectedRoles: Role.AsObject[] = [];
+  public selectedRoleKeys: string[] = [];
 
   constructor(public dialogRef: MatDialogRef<UserGrantRoleDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
     this.projectId = data.projectId;
@@ -20,8 +20,8 @@ export class UserGrantRoleDialogComponent {
     this.selectedRoleKeysList = data.selectedRoleKeysList;
   }
 
-  public selectRoles(selected: any): void {
+  public selectRoles(selected: string[]): void {
-    this.selectedRoles = selected;
+    this.selectedRoleKeys = selected;
   }
 
   public closeDialog(): void {
@@ -29,6 +29,6 @@ export class UserGrantRoleDialogComponent {
   }
 
   public closeDialogWithSuccess(): void {
-    this.dialogRef.close({ roles: this.selectedRoles.map((r) => r.key) });
+    this.dialogRef.close({ roles: this.selectedRoleKeys });
   }
 }

console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.ts

@@ -89,8 +89,8 @@ export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
     }
   }
 
-  public selectRoles(roles: Role.AsObject[]): void {
+  public selectRoles(roles: string[]): void {
-    this.rolesKeyList = roles.map((role) => role.key);
+    this.rolesKeyList = roles;
   }
 
   public next(): void {

console/src/app/pages/user-grant-create/user-grant-create.component.ts

@@ -208,8 +208,8 @@ export class UserGrantCreateComponent implements OnDestroy {
     }
   }
 
-  public selectRoles(roles: Role.AsObject[]): void {
+  public selectRoles(roleKeys: string[]): void {
-    this.rolesList = roles.map((role) => role.key);
+    this.rolesList = roleKeys;
   }
 
   public next(): void {