feat(console): org metadata, mfa i18n, defer load of actions (#4471)

* user metadata refactor

* metadata module, set remove interface

* refresh list

* mfa, passwordless i18n

* i18n, metadata table

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

console/src/app/pages/orgs/org-detail/org-detail.component.html

@@ -46,6 +46,13 @@
       <cnsl-settings-grid [type]="PolicyComponentServiceType.MGMT"></cnsl-settings-grid>
     </ng-container>
 
+    <cnsl-metadata
+      [metadata]="metadata"
+      [disabled]="(['org.write'] | hasRole | async) === false"
+      (editClicked)="editMetadata()"
+      (refresh)="loadMetadata()"
+    ></cnsl-metadata>
+
     <ng-template #nopolicyreadpermission>
       <div class="no-permission-warn-wrapper">
         <cnsl-info-section class="info-section-warn" [fitWidth]="true" [type]="InfoSectionType.ALERT">{{

console/src/app/pages/orgs/org-detail/org-detail.component.ts

@@ -1,20 +1,23 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { BehaviorSubject, from, Observable, of, Subject, takeUntil } from 'rxjs';
-import { catchError, finalize, map, take } from 'rxjs/operators';
+import { catchError, finalize, map } from 'rxjs/operators';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
 import { ChangeType } from 'src/app/modules/changes/changes.component';
 import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
+import { MetadataDialogComponent } from 'src/app/modules/metadata/metadata-dialog/metadata-dialog.component';
 import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
 import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
 import { Member } from 'src/app/proto/generated/zitadel/member_pb';
+import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';
 import { Org, OrgState } from 'src/app/proto/generated/zitadel/org_pb';
 import { User } from 'src/app/proto/generated/zitadel/user_pb';
 import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
+import { Buffer } from 'buffer';
 
 @Component({
   selector: 'cnsl-org-detail',
@@ -28,6 +31,9 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
   public OrgState: any = OrgState;
   public ChangeType: any = ChangeType;
 
+  public metadata: Metadata.AsObject[] = [];
+  public loadingMetadata: boolean = true;
+
   // members
   private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@@ -36,6 +42,7 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
   private destroy$: Subject<void> = new Subject();
 
   public InfoSectionType: any = InfoSectionType;
+
   constructor(
     auth: GrpcAuthService,
     private dialog: MatDialog,
@@ -52,11 +59,13 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
 
     auth.activeOrgChanged.pipe(takeUntil(this.destroy$)).subscribe((org) => {
       this.getData();
+      this.loadMetadata();
     });
   }
 
   public ngOnInit(): void {
     this.getData();
+    this.loadMetadata();
   }
 
   public ngOnDestroy(): void {
@@ -188,4 +197,40 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
         this.membersSubject.next(members);
       });
   }
+
+  public loadMetadata(): Promise<any> | void {
+    this.loadingMetadata = true;
+    return this.mgmtService
+      .listOrgMetadata()
+      .then((resp) => {
+        this.loadingMetadata = false;
+        this.metadata = resp.resultList.map((md) => {
+          return {
+            key: md.key,
+            value: Buffer.from(md.value as string, 'base64').toString('ascii'),
+          };
+        });
+      })
+      .catch((error) => {
+        this.loadingMetadata = false;
+        this.toast.showError(error);
+      });
+  }
+
+  public editMetadata(): void {
+    const setFcn = (key: string, value: string): Promise<any> => this.mgmtService.setOrgMetadata(key, btoa(value));
+    const removeFcn = (key: string): Promise<any> => this.mgmtService.removeOrgMetadata(key);
+
+    const dialogRef = this.dialog.open(MetadataDialogComponent, {
+      data: {
+        metadata: this.metadata,
+        setFcn: setFcn,
+        removeFcn: removeFcn,
+      },
+    });
+
+    dialogRef.afterClosed().subscribe(() => {
+      this.loadMetadata();
+    });
+  }
 }

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

@@ -18,6 +18,7 @@ import { InfoRowModule } from 'src/app/modules/info-row/info-row.module';
 import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
 import { InputModule } from 'src/app/modules/input/input.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
+import { MetadataModule } from 'src/app/modules/metadata/metadata.module';
 import { SettingsGridModule } from 'src/app/modules/settings-grid/settings-grid.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
 import { TopViewModule } from 'src/app/modules/top-view/top-view.module';
@@ -53,6 +54,7 @@ import { OrgRoutingModule } from './org-routing.module';
     MatMenuModule,
     ChangesModule,
     MatProgressSpinnerModule,
+    MetadataModule,
     TranslateModule,
     SharedModule,
     SettingsGridModule,