feat(console): user metadata, rehaul detail pages (#2209)

* service, sidenav, i18n, dialog

* detail layout, user detail

* metadata dialog from

* dialog

* features

* formarray

* metadata component

* comp

* user metadata refresh

* use formarray, control, bulk save

* metadata revert, has feature directive

* lint

* lint

* typo

* info row user, warn color optim

* card cleanup, actions for user detail

* project, org, user, app rehaul

* lint

* scss

* digit fix

* features and project grid rehaul

* info-section layout, org domain info

* readd palette scss

* add svg email warn

* missing translation

* rm unused ts

* lockoutpolicy

* check for lockout feature

console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/auth-passwordless.component.html

@@ -1,6 +1,9 @@
 <app-card title="{{'USER.PASSWORDLESS.TITLE' | translate}}"
     description="{{'USER.PASSWORDLESS.DESCRIPTION' | translate}}">
-    <app-refresh-table [loading]="loading$ | async" (refreshed)="getPasswordless()"
+    <button card-actions mat-icon-button (click)="getPasswordless()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
+      <mat-icon class="icon">refresh</mat-icon>
+    </button>
+    <app-refresh-table [hideRefresh]="true" [loading]="loading$ | async" (refreshed)="getPasswordless()"
         [dataSize]="dataSource?.data?.length">
         <table class="table" mat-table [dataSource]="dataSource">
             <ng-container matColumnDef="name">

console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/auth-passwordless.component.scss

@@ -1,3 +1,8 @@
+.icon-button {
+  .icon {
+    font-size: 1.2rem;
+  }
+}
 
 .add-row {
   display: flex;

console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component.scss

@@ -28,7 +28,7 @@
 }
 
 .error {
-  color: #f44336;
+  color: var(--warn);
   font-size: 14px;
 }
 

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html

@@ -1,7 +1,7 @@
 <app-meta-layout>
     <div class="max-width-container">
         <div class="header-row">
-            <div>
+            <div class="text">
                 <h1 class="h1">{{ 'USER.TITLE' | translate }}</h1>
                 <p class="sub">{{'USER.DESCRIPTION' | translate}}</p>
             </div>
@@ -14,18 +14,7 @@
 
         <span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
 
-        <app-card title="{{ 'USER.PAGES.LOGINNAMES' | translate }}"
-            description="{{ 'USER.PAGES.LOGINNAMESDESC' | translate }}" *ngIf="user">
-            <div class="login-name-row" *ngFor="let login of user?.loginNamesList">
-                <span>{{login}}</span>
-                <button color="primary" [disabled]="copied == login"
-                    [matTooltip]="(copied != login ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
-                    appCopyToClipboard [valueToCopy]="login" (copiedValue)="copied = $event" mat-icon-button>
-                    <i *ngIf="copied != login" class="las la-clipboard"></i>
-                    <i *ngIf="copied == login" class="las la-clipboard-check"></i>
-                </button>
-            </div>
-        </app-card>
+        <cnsl-info-row *ngIf="user" [user]="user"></cnsl-info-row>
 
         <app-card *ngIf="user && user.human?.profile" class=" app-card" title="{{ 'USER.PROFILE.TITLE' | translate }}">
             <app-detail-form [showEditImage]="true" [preferredLoginName]="user.preferredLoginName" [genders]="genders" [languages]="languages" [username]="user.userName" [user]="user.human"
@@ -35,8 +24,8 @@
 
         <app-card *ngIf="user" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
             description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
-            <button card-actions mat-icon-button (click)="refreshUser()" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
-                <mat-icon>refresh</mat-icon>
+            <button class="icon-button" card-actions mat-icon-button (click)="refreshUser()" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
+                <mat-icon class="icon">refresh</mat-icon>
             </button>
             <app-contact *ngIf="user?.human" [human]="user.human" [state]="user.state" canWrite="true"
                 (editType)="openEditDialog($event)" (enteredPhoneCode)="enteredPhoneCode($event)"
@@ -45,10 +34,7 @@
             </app-contact>
         </app-card>
 
-        <app-card *ngIf="user && user.human && user.id" title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}"
-        description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
-          <app-external-idps [userId]="user.id" [service]="userService"></app-external-idps>
-        </app-card>
+        <app-external-idps [userId]="user?.id" [service]="userService"></app-external-idps>
 
         <app-auth-passwordless *ngIf="user" #mfaComponent></app-auth-passwordless>
 
@@ -62,24 +48,35 @@
                 [disableDelete]="((['user.grant.delete$'] | hasRole) | async) == false">
             </app-user-grants>
         </app-card>
+
+        <ng-template appHasFeature [appHasFeature]="['metadata.user']">
+          <cnsl-metadata *ngIf="user?.id" [userId]="user.id"></cnsl-metadata>
+        </ng-template>
     </div>
 
     <div *ngIf="user" class="side" metainfo>
-        <div class="meta-details">
-            <div class="meta-row">
-                <span class="first">{{'RESOURCEID' | translate}}:</span>
-                <span *ngIf="user?.id" class="second">{{ user.id }}</span>
+      <div class="meta-details">
+          <div class="meta-row">
+              <span class="first">{{'RESOURCEID' | translate}}:</span>
+              <span *ngIf="user?.id" class="second">{{ user.id }}</span>
+          </div>
+          <div class="meta-row" *ngIf="user?.preferredLoginName">
+              <span class="first">{{'USER.PREFERRED_LOGINNAME' | translate}}</span>
+              <span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
+          </div>
+      </div>
+      <mat-tab-group mat-stretch-tabs class="tab-group" disablePagination="true">
+        <mat-tab label="Details">
+          <div class="side-padding">
+            <ng-template appHasRole [appHasRole]="['user.membership.read']">
+              <app-memberships [auth]="true" [user]="user"></app-memberships>
+            </ng-template>
             </div>
-            <div class="meta-row" *ngIf="user?.preferredLoginName">
-                <span class="first">{{'USER.PREFERRED_LOGINNAME' | translate}}</span>
-                <span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
-            </div>
-        </div>
-        <ng-template appHasRole [appHasRole]="['user.membership.read']">
-            <app-memberships [auth]="true" [user]="user"></app-memberships>
-        </ng-template>
-
-        <app-changes class="changes" [refresh]="refreshChanges$" [changeType]="ChangeType.MYUSER" [id]="user.id">
-        </app-changes>
+        </mat-tab>
+        <mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="meta-flex-col">
+          <app-changes class="changes" [refresh]="refreshChanges$" [changeType]="ChangeType.MYUSER" [id]="user.id">
+          </app-changes>
+        </mat-tab>
+      </mat-tab-group>
     </div>
 </app-meta-layout>

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss

@@ -5,13 +5,18 @@
   margin-bottom: 2rem;
   flex-wrap: wrap;
 
-  .h1 {
-    margin-top: 0;
-  }
+  .text {
+    flex: 1;
 
-  .sub {
-    color: var(--grey);
-    max-width: 500px;
+    .h1 {
+      margin: 0;
+    }
+
+    .sub {
+      color: var(--grey);
+      max-width: 500px;
+      font-size: 14px;
+    }
   }
 
   .theme {
@@ -19,30 +24,6 @@
   }
 }
 
-.login-name-row {
-  display: flex;
-  align-items: center;
-
-  button {
-    transition: opacity .15s ease-in-out;
-    visibility: hidden;
-    opacity: 0;
-
-    &[disabled] {
-      visibility: visible;
-      color: white;
-      opacity: 1;
-    }
-  }
-
-  &:hover {
-    button {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-}
-
 .btn-container {
   display: flex;
   justify-content: flex-end;
@@ -66,6 +47,16 @@
   }
 }
 
+.icon-button {
+  .icon {
+    font-size: 1.2rem;
+  }
+}
+
 .resendemail {
   margin-right: 1rem;
 }
+
+.side-padding {
+  padding-top: 1rem;
+}

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts

@@ -24,8 +24,6 @@ export class AuthUserDetailComponent implements OnDestroy {
 
   public loading: boolean = false;
 
-  public copied: string = '';
-
   public ChangeType: any = ChangeType;
   public userLoginMustBeDomain: boolean = false;
   public UserState: any = UserState;

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html

@@ -1,5 +1,8 @@
 <app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}">
-    <app-refresh-table [loading]="loading$ | async" (refreshed)="getMFAs()" [dataSize]="dataSource?.data?.length">
+  <button card-actions mat-icon-button (click)="getMFAs()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
+    <mat-icon class="icon">refresh</mat-icon>
+  </button>
+  <app-refresh-table [hideRefresh]="true" [loading]="loading$ | async" (refreshed)="getMFAs()" [dataSize]="dataSource?.data?.length">
         <table class="table" mat-table [dataSource]="dataSource">
             <ng-container matColumnDef="type">
                 <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLETYPE' | translate }} </th>

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.scss

@@ -1,3 +1,8 @@
+.icon-button {
+  .icon {
+    font-size: 1.2rem;
+  }
+}
 
 .add-row {
   display: flex;

console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-dialog.component.html

@@ -1,5 +1,5 @@
 <h1 mat-dialog-title>
-    <span class="title">{{'USER.CODEDIALOG.TITLE' | translate}} {{data?.number}}</span>
+    <span>{{'USER.CODEDIALOG.TITLE' | translate}} {{data?.number}}</span>
 </h1>
 <p class="desc">{{'USER.CODEDIALOG.DESCRIPTION' | translate}}</p>
 <div mat-dialog-content>
@@ -9,7 +9,7 @@
     </cnsl-form-field>
 </div>
 <div mat-dialog-actions class="action">
-    <button cdkFocusInitial color="primary" mat-button class="ok-button" (click)="closeDialog()">
+    <button color="primary" mat-stroked-button class="ok-button" (click)="closeDialog()">
         {{'ACTIONS.CLOSE' | translate}}
     </button>
 

console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-dialog.component.scss

@@ -1,3 +1,13 @@
+h1 {
+  font-size: 1.5rem;
+  margin: 0;
+}
+
+.desc {
+  font-size: 14px;
+  color: var(--grey);
+}
+
 .formfield {
   width: 100%;
 }

console/src/app/pages/users/user-detail/auth-user-detail/dialog-u2f/dialog-u2f.component.scss

@@ -12,7 +12,7 @@
 }
 
 .error {
-  color: #f44336;
+  color: var(--warn);
   font-size: 14px;
 }
 

console/src/app/pages/users/user-detail/contact/contact.component.scss

@@ -36,7 +36,7 @@
         }
 
         &.notverified {
-          color: #ff4436;
+          color: var(--warn);
           margin-right: 1rem;
         }
       }

console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.scss

@@ -30,7 +30,7 @@
 }
 
 .error {
-  color: #f44336;
+  color: var(--warn);
   font-size: 14px;
 }
 

console/src/app/pages/users/user-detail/external-idps/external-idps.component.html

@@ -1,59 +1,64 @@
-<app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
-    [timestamp]="viewTimestamp" [selection]="selection">
+<app-card title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}" description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
+  <button card-actions mat-icon-button (click)="refreshPage()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
+    <mat-icon class="icon">refresh</mat-icon>
+  </button>
+  <app-refresh-table [hideRefresh]="true" [loading]="loading$ | async" [dataSize]="dataSource.data.length"
+      [timestamp]="viewTimestamp" [selection]="selection">
 
-    <div class="table-wrapper">
-        <table class="table" mat-table [dataSource]="dataSource">
-            <ng-container matColumnDef="select">
-                <th mat-header-cell *matHeaderCellDef>
-                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
-                        [checked]="selection.hasValue() && isAllSelected()"
-                        [indeterminate]="selection.hasValue() && !isAllSelected()">
-                    </mat-checkbox>
-                </th>
-                <td mat-cell *matCellDef="let idp">
-                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
-                        (change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
-                    </mat-checkbox>
-                </td>
-            </ng-container>
+      <div class="table-wrapper">
+          <table class="table" mat-table [dataSource]="dataSource">
+              <ng-container matColumnDef="select">
+                  <th mat-header-cell *matHeaderCellDef>
+                      <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+                          [checked]="selection.hasValue() && isAllSelected()"
+                          [indeterminate]="selection.hasValue() && !isAllSelected()">
+                      </mat-checkbox>
+                  </th>
+                  <td mat-cell *matCellDef="let idp">
+                      <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                          (change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
+                      </mat-checkbox>
+                  </td>
+              </ng-container>
 
-            <ng-container matColumnDef="idpConfigId">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPCONFIGID' | translate }} </th>
-                <td mat-cell *matCellDef="let idp"> {{idp?.idpId}} </td>
-            </ng-container>
+              <ng-container matColumnDef="idpConfigId">
+                  <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPCONFIGID' | translate }} </th>
+                  <td mat-cell *matCellDef="let idp"> {{idp?.idpId}} </td>
+              </ng-container>
 
-            <ng-container matColumnDef="idpName">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPNAME' | translate }} </th>
-                <td mat-cell *matCellDef="let idp"> {{idp?.idpName}} </td>
-            </ng-container>
+              <ng-container matColumnDef="idpName">
+                  <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPNAME' | translate }} </th>
+                  <td mat-cell *matCellDef="let idp"> {{idp?.idpName}} </td>
+              </ng-container>
 
-            <ng-container matColumnDef="externalUserDisplayName">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.USERDISPLAYNAME' | translate }} </th>
-                <td mat-cell *matCellDef="let idp"> {{idp?.providedUserName}} </td>
-            </ng-container>
+              <ng-container matColumnDef="externalUserDisplayName">
+                  <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.USERDISPLAYNAME' | translate }} </th>
+                  <td mat-cell *matCellDef="let idp"> {{idp?.providedUserName}} </td>
+              </ng-container>
 
-            <ng-container matColumnDef="externalUserId">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.EXTERNALUSERID' | translate }} </th>
-                <td mat-cell *matCellDef="let idp"> {{idp?.providedUserId}} </td>
-            </ng-container>
+              <ng-container matColumnDef="externalUserId">
+                  <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.EXTERNALUSERID' | translate }} </th>
+                  <td mat-cell *matCellDef="let idp"> {{idp?.providedUserId}} </td>
+              </ng-container>
 
-            <ng-container matColumnDef="actions" stickyEnd>
-                <th mat-header-cell *matHeaderCellDef></th>
-                <td mat-cell *matCellDef="let idp">
-                    <button color="warn" mat-icon-button matTooltip="{{'ACTIONS.REMOVE' | translate}}"
-                        (click)="removeExternalIdp(idp)">
-                        <i class="las la-trash"></i>
-                    </button>
-                </td>
-            </ng-container>
+              <ng-container matColumnDef="actions" stickyEnd>
+                  <th mat-header-cell *matHeaderCellDef></th>
+                  <td mat-cell *matCellDef="let idp">
+                      <button color="warn" mat-icon-button matTooltip="{{'ACTIONS.REMOVE' | translate}}"
+                          (click)="removeExternalIdp(idp)">
+                          <i class="las la-trash"></i>
+                      </button>
+                  </td>
+              </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
-            </tr>
+              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+              <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
+              </tr>
 
-        </table>
-        <cnsl-paginator #paginator class="paginator" [timestamp]="viewTimestamp" [length]="totalResult || 0" [pageSize]="10"
-            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></cnsl-paginator>
-    </div>
+          </table>
+          <cnsl-paginator #paginator class="paginator" [timestamp]="viewTimestamp" [length]="totalResult || 0" [pageSize]="10"
+              [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></cnsl-paginator>
+      </div>
 
-</app-refresh-table>
+  </app-refresh-table>
+</app-card>

console/src/app/pages/users/user-detail/external-idps/external-idps.component.scss

@@ -1,3 +1,8 @@
+.icon-button {
+  .icon {
+    font-size: 1.2rem;
+  }
+}
 
 .table-wrapper {
   overflow: auto;

console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.html

@@ -0,0 +1,40 @@
+<div mat-dialog-title class="title-row">
+  <h1 class="title">{{'USER.METADATA.TITLE' | translate}}</h1>
+  <span class="fill-space"></span>
+  <p *ngIf="ts" class="ts">{{ts | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</p>
+  <mat-spinner *ngIf="loading" diameter="20"></mat-spinner>
+  <button class="icon-button" mat-icon-button (click)="load()"><mat-icon class="icon">refresh</mat-icon></button>
+</div>
+<p class="desc">{{'USER.METADATA.DESCRIPTION' | translate}}</p>
+<div mat-dialog-content>
+<form *ngFor="let md of metadata; index as i" (ngSubmit)="saveElement(i)" >
+  <div class="content">
+    <cnsl-form-field #key id="key{{i}}" class="formfield">
+        <cnsl-label>{{ 'USER.METADATA.KEY' | translate }}</cnsl-label>
+        <input cnslInput [(ngModel)]="md.key" [ngModelOptions]="{standalone: true}"  />
+    </cnsl-form-field>
+    <cnsl-form-field #value id="value{{i}}" class="formfield">
+        <cnsl-label>{{ 'USER.METADATA.VALUE' | translate }}</cnsl-label>
+        <input cnslInput [(ngModel)]="md.value" [ngModelOptions]="{standalone: true}"  />
+    </cnsl-form-field>
+
+    <button mat-icon-button [disabled]="!(md.key && md.value)" class="set-button" type="submit" color="primary"
+        matTooltip="{{ 'ACTIONS.SAVE' | translate }}">
+        <i class="las la-save"></i>
+    </button>
+    <button mat-icon-button (click)="removeEntry(i)" [disabled]="metadata.length < 2 && i === 0 && !md.key" class="rm-button" type="button" color="warn"
+        matTooltip="{{ 'ACTIONS.REMOVE' | translate }}">
+        <i class="las la-trash"></i>
+    </button>
+  </div>
+</form>
+<button color="primary" (click)="addEntry()" mat-stroked-button color="primary" class="continue-button" type="button">
+  <mat-icon>add</mat-icon>
+  {{ 'ACTIONS.ADD' | translate }}
+</button>
+</div>
+<div mat-dialog-actions class="action">
+  <button cdkFocusInitial color="primary" mat-stroked-button class="ok-button" (click)="closeDialog()">
+      {{'ACTIONS.CLOSE' | translate}}
+  </button>
+</div>

console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.scss

@@ -0,0 +1,58 @@
+.title-row {
+  display: flex;
+  align-items: center;
+
+  .title {
+    font-size: 1.5rem;
+    margin: 0;
+  }
+
+  .fill-space {
+    flex: 1;
+  }
+
+  .ts {
+    margin: 0;
+    font-size: 14px;
+    color: var(--grey);
+  }
+
+  .icon-button {
+    .icon {
+      font-size: 1.2rem;
+    }
+  }
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  margin: 0 -.5rem;
+
+  .formfield {
+    flex: 1;
+    margin: 0 .5rem;
+
+    @media only screen and (max-width: 450px) {
+      flex-basis: 100%;
+    }
+  }
+
+  .rm-button,
+  .set-button {
+    margin-top: 14px;
+  }
+}
+
+.action {
+  display: flex;
+  justify-content: flex-end;
+
+  .ok-button {
+    margin-left: .5rem;
+  }
+
+  button {
+    border-radius: .5rem;
+  }
+}

console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { MetadataDialogComponent } from './metadata-dialog.component';
+
+describe('MetadataDialogComponent', () => {
+  let component: MetadataDialogComponent;
+  let fixture: ComponentFixture<MetadataDialogComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [MetadataDialogComponent],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MetadataDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.ts

@@ -0,0 +1,116 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
+import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+
+@Component({
+  selector: 'app-metadata-dialog',
+  templateUrl: './metadata-dialog.component.html',
+  styleUrls: ['./metadata-dialog.component.scss'],
+})
+export class MetadataDialogComponent {
+  public metadata: Partial<Metadata.AsObject>[] = [];
+  public injData: any = {};
+  public loading: boolean = true;
+  public ts!: Timestamp.AsObject | undefined;
+
+  constructor(
+    private service: ManagementService,
+    private toast: ToastService,
+    public dialogRef: MatDialogRef<MetadataDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+    this.injData = data;
+    this.load();
+  }
+
+  public load(): void {
+    this.loadMetadata().then(() => {
+      this.loading = false;
+      if (this.metadata.length === 0) {
+        this.addEntry();
+      }
+    }).catch(error => {
+      this.loading = false;
+      this.toast.showError(error);
+      if (this.metadata.length === 0) {
+        this.addEntry();
+      }
+    });
+  }
+
+  public loadMetadata(): Promise<void> {
+    this.loading = true;
+    if (this.injData.userId) {
+      return this.service.listUserMetadata(this.injData.userId).then(resp => {
+        this.metadata = resp.resultList.map(md => {
+          return {
+            key: md.key,
+            value: atob(md.value as string),
+          };
+        });
+        this.ts = resp.details?.viewTimestamp;
+      });
+    } else {
+      return Promise.reject();
+    }
+  }
+
+  public addEntry(): void {
+    const newGroup = {
+      key: '',
+      value: '',
+    };
+
+    this.metadata.push(newGroup);
+  }
+
+  public removeEntry(index: number): void {
+    const key = this.metadata[index].key;
+    if (key) {
+      this.removeMetadata(key).then(() => {
+        this.metadata.splice(index, 1);
+        if (this.metadata.length === 0) {
+          this.addEntry();
+        }
+      });
+    } else {
+      this.metadata.splice(index, 1);
+    }
+  }
+
+  public saveElement(index: number): void {
+    const metadataElement = this.metadata[index];
+
+    if (metadataElement.key && metadataElement.value) {
+      this.setMetadata(metadataElement.key, metadataElement.value as string);
+    }
+  }
+
+  public setMetadata(key: string, value: string): void {
+    console.log(key, value, this.injData.userId);
+    if (key && value) {
+      this.service.setUserMetadata(key, btoa(value), this.injData.userId)
+        .then(() => {
+          this.toast.showInfo('USER.METADATA.SETSUCCESS', true);
+        }).catch(error => {
+          this.toast.showError(error);
+        });
+    }
+  }
+
+  public removeMetadata(key: string): Promise<void> {
+    return this.service.removeUserMetadata(key, this.injData.userId)
+      .then((resp) => {
+        this.toast.showInfo('USER.METADATA.REMOVESUCCESS', true);
+      }).catch(error => {
+        this.toast.showError(error);
+      });
+  }
+
+  closeDialog(): void {
+    this.dialogRef.close();
+  }
+}

console/src/app/pages/users/user-detail/metadata/metadata.component.html

@@ -0,0 +1,21 @@
+<app-card class="metadata-details" title="{{ 'USER.METADATA.TITLE' | translate }}">
+  <div card-actions class="actions">
+    <mat-spinner class="spinner" diameter="20" *ngIf="loading"></mat-spinner>
+    <button mat-raised-button color="primary" class="edit" (click)="editMetadata()">{{'ACTIONS.EDIT' | translate}}</button>
+    <button matTooltip="{{'ACTIONS.REFRESH' | translate}}" class="refresh-btn" (click)="loadMetadata()"
+        mat-icon-button aria-label="refresh contributors">
+        <mat-icon class="icon">refresh</mat-icon>
+    </button>
+  </div>
+
+  <ng-container *ngIf="metadata?.length; else emptyList">
+    <div class="metadata-set" *ngFor="let md of metadata">
+        <span class="first">{{md.key}}</span>
+        <span class="second">{{ md.value }}</span>
+    </div>
+  </ng-container>
+
+  <ng-template #emptyList>
+    <p class="empty-desc">{{'USER.METADATA.EMPTY' | translate}}</p>
+  </ng-template>
+</app-card>

console/src/app/pages/users/user-detail/metadata/metadata.component.scss

@@ -0,0 +1,72 @@
+.metadata-details {
+  padding-bottom: 1rem;
+
+  .actions {
+    display: flex;
+    align-items: center;
+
+    .edit {
+      font-size: 14px;
+    }
+  }
+
+  .meta-row {
+    display: flex;
+    margin-bottom: .5rem;
+    align-items: center;
+
+    .first {
+      flex: 1;
+      font-size: 13px;
+      margin-right: .5rem;
+    }
+
+    .fill-space {
+      flex: 1;
+    }
+
+    .second {
+      font-size: 13px;
+    }
+  }
+
+  .metadata-set {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: .5rem;
+
+    .first {
+      font-size: 14px;
+      color: var(--grey);
+    }
+  }
+}
+
+.border-t {
+  border-top: 1px solid #81868a40;
+}
+
+.edit {
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.empty-desc {
+  margin: 0;
+  font-size: 14px;
+  color: var(--grey);
+}
+
+.ts {
+  font-size: 14px;
+  color: var(--grey);
+  margin-top: 0;
+}
+
+.refresh-btn {
+  float: left;
+
+  .icon {
+    font-size: 1.2rem;
+  }
+}

console/src/app/pages/users/user-detail/metadata/metadata.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetadataComponent } from './metadata.component';
+
+describe('MetadataComponent', () => {
+  let component: MetadataComponent;
+  let fixture: ComponentFixture<MetadataComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MetadataComponent],
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MetadataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

console/src/app/pages/users/user-detail/metadata/metadata.component.ts

@@ -0,0 +1,53 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { MetadataDialogComponent } from '../metadata-dialog/metadata-dialog.component';
+
+@Component({
+  selector: 'cnsl-metadata',
+  templateUrl: './metadata.component.html',
+  styleUrls: ['./metadata.component.scss'],
+})
+export class MetadataComponent implements OnInit {
+  @Input() userId: string = '';
+  public metadata: Metadata.AsObject[] = [];
+  public loading: boolean = false;
+
+  constructor(private dialog: MatDialog, private service: ManagementService, private toast: ToastService,
+  ) { }
+
+  ngOnInit(): void {
+    this.loadMetadata();
+  }
+
+  public editMetadata(): void {
+    const dialogRef = this.dialog.open(MetadataDialogComponent, {
+      data: {
+        userId: this.userId,
+      },
+    });
+
+    dialogRef.afterClosed().subscribe(() => {
+      this.loadMetadata();
+    });
+  }
+
+  public loadMetadata(): Promise<any> {
+    this.loading = true;
+    return (this.service as ManagementService).listUserMetadata(this.userId).then(resp => {
+      this.loading = false;
+      this.metadata = resp.resultList.map(md => {
+        return {
+          key: md.key,
+          value: atob(md.value as string),
+        };
+      });
+    }).catch((error) => {
+      this.loading = false;
+      this.toast.showError(error);
+    });
+  }
+}

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

@@ -5,9 +5,11 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { QRCodeModule } from 'angularx-qrcode';
@@ -31,6 +33,8 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
 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 { HasFeatureModule } from '../../../directives/has-feature/has-feature.module';
+import { InfoRowModule } from '../../../modules/info-row/info-row.module';
 import { AuthFactorDialogComponent } from './auth-user-detail/auth-factor-dialog/auth-factor-dialog.component';
 import { AuthPasswordlessComponent } from './auth-user-detail/auth-passwordless/auth-passwordless.component';
 import {
@@ -48,6 +52,8 @@ import { DetailFormMachineModule } from './detail-form-machine/detail-form-machi
 import { DetailFormModule } from './detail-form/detail-form.module';
 import { ExternalIdpsComponent } from './external-idps/external-idps.component';
 import { MembershipsComponent } from './memberships/memberships.component';
+import { MetadataDialogComponent } from './metadata-dialog/metadata-dialog.component';
+import { MetadataComponent } from './metadata/metadata.component';
 import { PasswordComponent } from './password/password.component';
 import { UserDetailRoutingModule } from './user-detail-routing.module';
 import { PasswordlessComponent } from './user-detail/passwordless/passwordless.component';
@@ -73,11 +79,14 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
     DialogU2FComponent,
     DialogPasswordlessComponent,
     AuthFactorDialogComponent,
+    MetadataDialogComponent,
+    MetadataComponent,
   ],
   imports: [
     UserDetailRoutingModule,
     ChangesModule,
     CommonModule,
+    MatTabsModule,
     FormsModule,
     ReactiveFormsModule,
     DetailFormModule,
@@ -94,11 +103,14 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
     CardModule,
     MatProgressSpinnerModule,
     MatProgressBarModule,
+    HasFeatureModule,
     MatTooltipModule,
     HasRoleModule,
     TranslateModule,
     MatTableModule,
+    InfoRowModule,
     PaginatorModule,
+    MatMenuModule,
     SharedModule,
     RefreshTableModule,
     CopyToClipboardModule,

console/src/app/pages/users/user-detail/user-detail/passwordless/passwordless.component.html

@@ -1,6 +1,9 @@
 <app-card title="{{'USER.PASSWORDLESS.TITLE' | translate}}"
     description="{{'USER.PASSWORDLESS.DESCRIPTION' | translate}}">
-    <app-refresh-table [loading]="loading$ | async" (refreshed)="getPasswordless()"
+    <button card-actions mat-icon-button (click)="getPasswordless()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
+      <mat-icon class="icon">refresh</mat-icon>
+    </button>
+    <app-refresh-table [hideRefresh]="true" [loading]="loading$ | async"
         [dataSize]="dataSource?.data?.length">
         <table class="table" mat-table [dataSource]="dataSource">
             <ng-container matColumnDef="name">

console/src/app/pages/users/user-detail/user-detail/passwordless/passwordless.component.scss

@@ -1,3 +1,9 @@
+.icon-button {
+  .icon {
+    font-size: 1.2rem;
+  }
+}
+
 .centered {
   display: flex;
   align-items: center;

console/src/app/pages/users/user-detail/user-detail/user-detail.component.html

@@ -4,28 +4,34 @@
             <a (click)="navigateBack()" mat-icon-button>
                 <mat-icon class="icon">arrow_back</mat-icon>
             </a>
-            <h1>{{user.human ? user.human?.profile?.displayName : user.machine?.name}}</h1>
-
-            <ng-template appHasRole [appHasRole]="['user.delete$', 'user.delete:'+user?.id]">
-                <button mat-icon-button color="warn" matTooltip="{{'USER.PAGES.DELETE' | translate}}"
-                    (click)="deleteUser()"><i class="las la-trash"></i></button>
-            </ng-template>
+            <div class="head-row">
+              <h1>{{user.human ? user.human?.profile?.displayName : user.machine?.name}}</h1>
+              <p *ngIf="user?.preferredLoginName">{{user?.preferredLoginName}}</p>
+            </div>
 
             <span class="fill-space"></span>
-
             <ng-template appHasRole [appHasRole]="['user.write$', 'user.write:'+user?.id]">
-              <button class="unlock-button" mat-stroked-button color="warn"
+              <button class="actions-trigger" mat-raised-button color="primary" [matMenuTriggerFor]="actions">
+                <span>{{'ACTIONS.ACTIONS' | translate}}</span>
+                <mat-icon class="icon">keyboard_arrow_down</mat-icon>
+              </button>
+              <mat-menu #actions="matMenu" xPosition="before">
+                <button mat-menu-item color="warn"
                   *ngIf="user?.state === UserState.USER_STATE_LOCKED"
                   (click)="unlockUser()">{{'USER.PAGES.UNLOCK' |
                   translate}}</button>
-         
-                <button class="state-button" mat-stroked-button color="warn"
-                    *ngIf="user?.state !== UserState.USER_STATE_INACTIVE"
-                    (click)="changeState(UserState.USER_STATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' |
-                    translate}}</button>
-                <button class="state-button" mat-stroked-button color="warn"
-                    *ngIf="user?.state == UserState.USER_STATE_INACTIVE"
-                    (click)="changeState(UserState.USER_STATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
+                  <button mat-menu-item
+                        *ngIf="user?.state !== UserState.USER_STATE_INACTIVE"
+                        (click)="changeState(UserState.USER_STATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' |
+                        translate}}</button>
+                  <button mat-menu-item
+                      *ngIf="user?.state == UserState.USER_STATE_INACTIVE"
+                      (click)="changeState(UserState.USER_STATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
+                <ng-template appHasRole [appHasRole]="['user.delete$', 'user.delete:'+user?.id]">
+                  <button mat-menu-item matTooltip="{{'USER.PAGES.DELETE' | translate}}"
+                      (click)="deleteUser()"><span [style.color]="'var(--warn)'">{{'USER.PAGES.DELETE' | translate}}</span></button>
+                </ng-template>
+              </mat-menu>
             </ng-template>
         </div>
 
@@ -34,19 +40,7 @@
         <cnsl-info-section class="locked" *ngIf="user?.state === UserState.USER_STATE_LOCKED" type="WARN">{{'USER.PAGES.LOCKEDDESCRIPTION' | translate}}</cnsl-info-section>
         <span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
 
-        <app-card title="{{ 'USER.PAGES.LOGINNAMES' | translate }}"
-            description="{{ 'USER.PAGES.LOGINNAMESDESC' | translate }}" *ngIf="user">
-            <div class="login-name-row" *ngFor="let login of user?.loginNamesList">
-                <span>{{login}} </span>
-                <button color="primary" [disabled]="copied == login"
-                    [matTooltip]="(copied != login ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
-                    appCopyToClipboard [valueToCopy]="login" (copiedValue)="copied = $event" mat-icon-button>
-                    <i *ngIf="copied != login" class="las la-clipboard"></i>
-                    <i *ngIf="copied == login" class="las la-clipboard-check"></i>
-
-                </button>
-            </div>
-        </app-card>
+        <cnsl-info-row *ngIf="user" [user]="user"></cnsl-info-row>
 
         <ng-template appHasRole [appHasRole]="['user.read$', 'user.read:'+user?.id]">
             <app-card *ngIf="user.human" title="{{ 'USER.PROFILE.TITLE' | translate }}">
@@ -57,8 +51,8 @@
 
             <app-card *ngIf="user.human" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
             description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
-              <button card-actions mat-icon-button (click)="refreshUser()" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
-                  <mat-icon>refresh</mat-icon>
+              <button card-actions class="icon-button" mat-icon-button (click)="refreshUser()" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
+                  <mat-icon class="icon">refresh</mat-icon>
               </button>
               <app-contact disablePhoneCode="true"
                   [canWrite]="(['user.write:' + user?.id, 'user.write$'] | hasRole | async)" *ngIf="user?.human"
@@ -73,11 +67,8 @@
                       translate}}</button>
               </app-contact>
             </app-card>
-
-            <app-card *ngIf="user && user.human && user.id" title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}"
-                description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
-                <app-external-idps [userId]="user.id" [service]="mgmtUserService"></app-external-idps>
-            </app-card>
+ 
+            <app-external-idps *ngIf="user && user.human && user.id" [userId]="user.id" [service]="mgmtUserService"></app-external-idps>
 
             <app-card *ngIf="user.machine" title="{{ 'USER.MACHINE.TITLE' | translate }}">
                 <app-detail-form-machine [disabled]="(canWrite$ | async) == false" [username]="user.userName"
@@ -103,31 +94,42 @@
                 [disableDelete]="((['user.grant.delete$'] | hasRole) | async) == false">
             </app-user-grants>
         </app-card>
+
+        <ng-template appHasFeature [appHasFeature]="['metadata.user']">
+          <cnsl-metadata *ngIf="user" [userId]="user.id"></cnsl-metadata>
+        </ng-template>
     </div>
 
     <div *ngIf="user" class="side" metainfo>
-        <div class="meta-details">
-            <div class="meta-row">
-                <span class="first">{{'RESOURCEID' | translate}}:</span>
-                <span *ngIf="user?.id" class="second">{{ user.id }}</span>
-            </div>
-            <div class="meta-row" *ngIf="user?.preferredLoginName">
-                <span class="first">{{'USER.PREFERRED_LOGINNAME' | translate}}</span>
-                <span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
-            </div>
-            <div class="meta-row">
-                <span class="first">{{'ORG.PAGES.STATE' | translate}}</span>
-                <span *ngIf="user && user.state !== undefined" class="state"
-                    [ngClass]="{'active': user.state === UserState.USER_STATE_ACTIVE, 'inactive': user.state === UserState.USER_STATE_INACTIVE}">{{'USER.DATA.STATE'+user.state
-                    | translate}}</span>
-            </div>
+      <div class="meta-details">
+        <div class="meta-row">
+            <span class="first">{{'RESOURCEID' | translate}}:</span>
+            <span *ngIf="user?.id" class="second">{{ user.id }}</span>
         </div>
+        <div class="meta-row" *ngIf="user?.preferredLoginName">
+            <span class="first">{{'USER.PREFERRED_LOGINNAME' | translate}}</span>
+            <span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
+        </div>
+        <div class="meta-row">
+            <span class="first">{{'USER.PAGES.STATE' | translate}}</span>
+            <span *ngIf="user && user.state !== undefined" class="state"
+                [ngClass]="{'active': user.state === UserState.USER_STATE_ACTIVE, 'inactive': user.state === UserState.USER_STATE_INACTIVE}">{{'USER.DATA.STATE'+user.state
+                | translate}}</span>
+        </div>
+      </div>
 
-        <ng-template appHasRole [appHasRole]="['user.membership.read']">
-            <app-memberships [user]="user" [disabled]="(canWrite$ | async) == false"></app-memberships>
-        </ng-template>
-
-        <app-changes class="changes" [refresh]="refreshChanges$" [changeType]="ChangeType.USER" [id]="user.id">
-        </app-changes>
+      <mat-tab-group mat-stretch-tabs class="tab-group" disablePagination="true">
+        <mat-tab label="Details">
+          <div class="side-padding">
+            <ng-template appHasRole [appHasRole]="['user.membership.read']">
+              <app-memberships [user]="user" [disabled]="(canWrite$ | async) == false"></app-memberships>
+            </ng-template>
+          </div>
+        </mat-tab>
+        <mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="meta-flex-col">
+          <app-changes class="changes" [refresh]="refreshChanges$" [changeType]="ChangeType.USER" [id]="user.id">
+          </app-changes>
+        </mat-tab>
+      </mat-tab-group>
     </div>
 </app-meta-layout>

console/src/app/pages/users/user-detail/user-detail/user-detail.component.scss

@@ -1,29 +1,43 @@
 .head {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   flex-wrap: wrap;
-  padding-bottom: .5rem;
+  padding-bottom: 2rem;
 
   a {
     display: block;
     margin-right: 2rem;
   }
 
-  h1 {
-    margin: 0;
-    margin-right: 1rem;
+  .head-row {
+    display: flex;
+    flex-direction: column;
+
+    h1 {
+      margin: 0;
+      margin-right: 1rem;
+    }
+
+    p {
+      margin: .5rem 0;
+      font-size: 14px;
+      color: var(--grey);
+    }
   }
 
   .fill-space {
     flex: 1;
   }
 
-  .unlock-button {
-    margin-left: .5rem;
-  }
+  .actions-trigger {
+    margin-top: .25rem;
+    display: flex;
+    align-items: center;
 
-  .state-button {
-    margin-left: .5rem;
+    .icon {
+      margin-left: .5rem;
+      margin-right: -.5rem;
+    }
   }
 }
 
@@ -32,6 +46,12 @@
   margin: 1rem 0;
 }
 
+.icon-button {
+  .icon {
+    font-size: 1.2rem;
+  }
+}
+
 .img-phone-email {
   width: 300px;
 }
@@ -42,3 +62,7 @@
     min-height: 0;
   }
 }
+
+.side-padding {
+  padding-top: 1rem;
+}

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

@@ -8,6 +8,7 @@ import { ChangeType } from 'src/app/modules/changes/changes.component';
 import { UserGrantContext } from 'src/app/modules/user-grants/user-grants-datasource';
 import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
 import { SendHumanResetPasswordNotificationRequest, UnlockUserRequest } from 'src/app/proto/generated/zitadel/management_pb';
+import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';
 import { Email, Gender, Machine, Phone, Profile, User, UserState } from 'src/app/proto/generated/zitadel/user_pb';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -22,6 +23,7 @@ import { ResendEmailDialogComponent } from '../auth-user-detail/resend-email-dia
 })
 export class UserDetailComponent implements OnInit {
   public user!: User.AsObject;
+  public metadata: Metadata.AsObject[] = [];
   public genders: Gender[] = [Gender.GENDER_MALE, Gender.GENDER_FEMALE, Gender.GENDER_DIVERSE];
   public languages: string[] = ['de', 'en'];
 
@@ -56,6 +58,14 @@ export class UserDetailComponent implements OnInit {
       }).catch(err => {
         console.error(err);
       });
+
+      this.mgmtUserService.listUserMetadata(id, 0, 100, []).then(resp => {
+        if (resp.resultList) {
+          this.metadata = resp.resultList;
+        }
+      }).catch(err => {
+        console.error(err);
+      });
     });
   }
 

console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.html

@@ -1,5 +1,8 @@
 <app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}">
-    <app-refresh-table [loading]="loading$ | async" (refreshed)="getMFAs()" [dataSize]="dataSource?.data?.length">
+  <button card-actions mat-icon-button (click)="getMFAs()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
+    <mat-icon class="icon">refresh</mat-icon>
+  </button>
+  <app-refresh-table [hideRefresh]="true" [loading]="loading$ | async" (refreshed)="getMFAs()" [dataSize]="dataSource?.data?.length">
         <table class="table" mat-table [dataSource]="dataSource">
             <ng-container matColumnDef="type">
                 <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLETYPE' | translate }} </th>

console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.scss

@@ -1,3 +1,8 @@
+.icon-button {
+  .icon {
+    font-size: 1.2rem;
+  }
+}
 
 .col {
   display: flex;

console/src/app/pages/users/user-list/user-list.component.scss

@@ -1,8 +1,9 @@
 h1 {
-  margin-top: 0;
+  margin: 0;
 }
 
 .sub {
   color: var(--grey);
   margin-bottom: 2rem;
+  font-size: 14px;
 }