feat(console-v2): login policy extension, domain policy, filter and UI fixes (#3644)

* show filter count when set

* toast contrast color

* fix notification settings, password dialog

* app-create, user-create layout

* domain policy

* login-policy, project grid loader, i18n

* login policy

* login policy save lifetimes

* private labeling optim

* granted project grantId

* smtp address matching

* i18n

* i18n

* i18n

* replace url strategy

* fix privatelabeling color picker saving

* stylelint

Co-authored-by: Livio Amstutz <[email protected]>

console/src/app/modules/org-table/org-table.component.html

@@ -15,7 +15,14 @@
     </a>
   </ng-template>
 
-  <table [dataSource]="dataSource" mat-table class="table" aria-label="Elements">
+  <table
+    [dataSource]="dataSource"
+    mat-table
+    class="table"
+    aria-label="Organizations"
+    matSort
+    (matSortChange)="sortChange($event)"
+  >
     <ng-container matColumnDef="select">
       <th class="selection" mat-header-cell *matHeaderCellDef>
         {{ 'ORG.PAGES.ACTIVE' | translate }}
@@ -51,6 +58,7 @@
     </ng-container>
 
     <ng-container matColumnDef="name">
+      <!-- mat-sort-header -->
       <th mat-header-cell *matHeaderCellDef>
         {{ 'ORG.PAGES.NAME' | translate }}
       </th>

console/src/app/modules/org-table/org-table.component.ts

@@ -1,9 +1,11 @@
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { Component, Input, ViewChild } from '@angular/core';
+import { MatSort, Sort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { BehaviorSubject, catchError, finalize, from, map, Observable, of, Subject, switchMap, takeUntil } from 'rxjs';
-import { Org, OrgQuery, OrgState } from 'src/app/proto/generated/zitadel/org_pb';
+import { Org, OrgFieldName, OrgQuery, OrgState } from 'src/app/proto/generated/zitadel/org_pb';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 import { ToastService } from 'src/app/services/toast.service';
 
@@ -38,6 +40,7 @@ export class OrgTableComponent {
   public filterOpen: boolean = false;
   public OrgState: any = OrgState;
   public copied: string = '';
+  @ViewChild(MatSort) public sort!: MatSort;
 
   private searchQueries: OrgQuery[] = [];
   private destroy$: Subject<void> = new Subject();
@@ -48,7 +51,12 @@ export class OrgTableComponent {
   });
   private requestOrgsObservable$ = this.requestOrgs$.pipe(takeUntil(this.destroy$));
 
-  constructor(private authService: GrpcAuthService, private router: Router, private toast: ToastService) {
+  constructor(
+    private authService: GrpcAuthService,
+    private router: Router,
+    private toast: ToastService,
+    private _liveAnnouncer: LiveAnnouncer,
+  ) {
     this.requestOrgs$.next({ limit: this.initialLimit, offset: 0, queries: this.searchQueries });
     this.authService.getActiveOrg().then((org) => (this.activeOrg = org));
 
@@ -60,7 +68,17 @@ export class OrgTableComponent {
   public loadOrgs(request: Request): Observable<Org.AsObject[]> {
     this.loadingSubject.next(true);
 
-    return from(this.authService.listMyProjectOrgs(request.limit, request.offset, request.queries)).pipe(
+    let sortingField: OrgFieldName | undefined = undefined;
+    if (this.sort?.active && this.sort?.direction)
+      switch (this.sort.active) {
+        case 'name':
+          sortingField = OrgFieldName.ORG_FIELD_NAME_NAME;
+          break;
+      }
+
+    return from(
+      this.authService.listMyProjectOrgs(request.limit, request.offset, request.queries, sortingField, this.sort?.direction),
+    ).pipe(
       map((resp) => {
         this.timestamp = resp.details?.viewTimestamp;
         this.totalResult = resp.details?.totalResult ?? 0;
@@ -86,6 +104,15 @@ export class OrgTableComponent {
     });
   }
 
+  public sortChange(sortState: Sort) {
+    if (sortState.direction && sortState.active) {
+      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
+      this.refresh();
+    } else {
+      this._liveAnnouncer.announce('Sorting cleared');
+    }
+  }
+
   public applySearchQuery(searchQueries: OrgQuery[]): void {
     this.searchQueries = searchQueries;
     this.requestOrgs$.next({