chore(console): remove first and lastName fallback from user (#5629)

* chore(console): remove first and lastName fallback from user * use display name and ensure it's set without required name fields * add user type to user grant and memberships responses * contributor, members * fix avatar display checks --------- Co-authored-by: Livio Spring <livio.a@gmail.com>
2025-08-12 01:37:31 +00:00 · 2023-04-11 17:56:51 +02:00
parent 8bf36301ed
commit 1c1d66cbe8
37 changed files with 218 additions and 114 deletions
--- a/console/src/app/modules/accounts-card/accounts-card.component.html
+++ b/console/src/app/modules/accounts-card/accounts-card.component.html
@@ -1,16 +1,12 @@
 <div class="accounts-card">
  <cnsl-avatar
    (click)="editUserProfile()"
-    *ngIf="user && user.human?.profile && user.human?.profile?.displayName"
+    *ngIf="user"
    class="avatar"
    [ngClass]="{ 'iam-user': iamuser }"
    [forColor]="user.preferredLoginName"
    [avatarUrl]="user.human?.profile?.avatarUrl || ''"
-    [name]="
-      user.human && user.human.profile && user.human.profile.displayName
-        ? user.human.profile.displayName
-        : user.human?.profile?.firstName + ' ' + user.human?.profile?.lastName
-    "
+    [name]="user.human?.profile?.displayName ?? ''"
    [size]="80"
  >
  </cnsl-avatar>
--- a/console/src/app/modules/contributors/contributors.component.html
+++ b/console/src/app/modules/contributors/contributors.component.html
@@ -13,10 +13,10 @@
            data-e2e="member-avatar"
          >
            <cnsl-avatar
-              *ngIf="member && member.displayName && member.firstName && member.lastName; else cog"
+              *ngIf="member && member.userType === UserType.TYPE_HUMAN; else cog"
              class="contributor-avatar dontcloseonclick"
              [avatarUrl]="member.avatarUrl || ''"
-              [name]="member.displayName ? member.displayName : member.firstName + ' ' + member.lastName"
+              [name]="member.displayName"
              [forColor]="member.preferredLoginName"
              [size]="32"
            >
--- a/console/src/app/modules/contributors/contributors.component.ts
+++ b/console/src/app/modules/contributors/contributors.component.ts
@@ -2,6 +2,7 @@ import { animate, animateChild, keyframes, query, stagger, style, transition, tr
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { Member } from 'src/app/proto/generated/zitadel/member_pb';
+import { Type } from 'src/app/proto/generated/zitadel/user_pb';

@Component({
  selector: 'cnsl-contributors',
@@ -36,6 +37,8 @@ export class ContributorsComponent {
  @Output() showDetailClicked: EventEmitter<void> = new EventEmitter();
  @Output() refreshClicked: EventEmitter<void> = new EventEmitter();

+  public UserType: any = Type;
+
  public emitAddMember(): void {
    this.addClicked.emit();
  }
--- a/console/src/app/modules/header/header.component.html
+++ b/console/src/app/modules/header/header.component.html
@@ -197,9 +197,7 @@
      </a>
    </div>

-    <ng-container
-      *ngIf="user && (user.human?.profile?.displayName || (user.human?.profile?.firstName && user.human?.profile?.lastName))"
-    >
+    <ng-container *ngIf="user">
      <div class="account-card-wrapper">
        <button
          cdkOverlayOrigin
@@ -214,11 +212,7 @@
            [active]="showAccount"
            [avatarUrl]="user.human?.profile?.avatarUrl || ''"
            [forColor]="user.preferredLoginName || ''"
-            [name]="
-              user.human?.profile?.displayName
-                ? user.human?.profile?.displayName ?? ''
-                : user.human?.profile?.firstName + ' ' + user.human?.profile?.lastName
-            "
+            [name]="user.human?.profile?.displayName ?? ''"
            [size]="38"
          >
          </cnsl-avatar>
--- a/console/src/app/modules/members-table/members-table.component.html
+++ b/console/src/app/modules/members-table/members-table.component.html
@@ -36,7 +36,7 @@
            [checked]="selection.isSelected(row)"
          >
            <cnsl-avatar
-              *ngIf="row?.displayName && row.firstName && row.lastName; else cog"
+              *ngIf="row?.userType === UserType.TYPE_HUMAN; else cog"
              class="avatar"
              [name]="row.displayName"
              [avatarUrl]="row.avatarUrl || ''"
--- a/console/src/app/modules/members-table/members-table.component.ts
+++ b/console/src/app/modules/members-table/members-table.component.ts
@@ -10,6 +10,7 @@ import { ProjectGrantMembersDataSource } from 'src/app/pages/projects/owned-proj
 import { Member } from 'src/app/proto/generated/zitadel/member_pb';
 import { getMembershipColor } from 'src/app/utils/color';

+import { Type } from 'src/app/proto/generated/zitadel/user_pb';
 import { AddMemberRolesDialogComponent } from '../add-member-roles-dialog/add-member-roles-dialog.component';
 import { PageEvent, PaginatorComponent } from '../paginator/paginator.component';
 import { ProjectMembersDataSource } from '../project-members/project-members-datasource';
@@ -43,6 +44,7 @@ export class MembersTableComponent implements OnInit, OnDestroy {

  private destroyed: Subject<void> = new Subject();
  public displayedColumns: string[] = ['select', 'userId', 'displayName', 'loginname', 'email', 'roles'];
+  public UserType: any = Type;

  constructor(private dialog: MatDialog) {
    this.selection.changed.pipe(takeUntil(this.destroyed)).subscribe((_) => {
--- a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html
+++ b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html
@@ -2,14 +2,7 @@
  <div class="found-user-row" *ngFor="let user of users; index as i">
    <div class="circle">
      <cnsl-avatar
-        *ngIf="
-          user.human &&
-            user.human.profile &&
-            user.human.profile.displayName &&
-            user.human.profile.firstName &&
-            user.human.profile.lastName;
-          else cog
-        "
+        *ngIf="user.human && user.human.profile; else cog"
        class="avatar"
        [name]="user.human.profile.displayName"
        [avatarUrl]="user.human.profile.avatarUrl || ''"
@@ -76,14 +69,7 @@
            <div class="user-option" data-e2e="user-option">
              <div class="circle">
                <cnsl-avatar
-                  *ngIf="
-                    user.human &&
-                      user.human.profile &&
-                      user.human.profile.displayName &&
-                      user.human.profile.firstName &&
-                      user.human.profile.lastName;
-                    else cog
-                  "
+                  *ngIf="user.human && user.human.profile; else cog"
                  class="avatar"
                  [name]="user.human.profile.displayName"
                  [avatarUrl]="user.human.profile.avatarUrl || ''"
--- a/console/src/app/modules/user-grants/user-grants.component.html
+++ b/console/src/app/modules/user-grants/user-grants.component.html
@@ -77,7 +77,7 @@
            [checked]="selection.isSelected(row)"
          >
            <cnsl-avatar
-              *ngIf="row && row?.displayName && row.firstName && row.lastName; else cog"
+              *ngIf="row && row.userType === Type.TYPE_HUMAN; else cog"
              class="avatar"
              [name]="row.displayName"
              [avatarUrl]="row.avatarUrl || ''"
--- a/console/src/app/modules/user-grants/user-grants.component.ts
+++ b/console/src/app/modules/user-grants/user-grants.component.ts
@@ -68,7 +68,6 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
  @Input() public type: Type | undefined = undefined;

  public filterOpen: boolean = false;
-
  constructor(
    private authService: GrpcAuthService,
    private userService: ManagementService,
--- a/console/src/app/pages/users/user-detail/detail-form/detail-form.component.html
+++ b/console/src/app/pages/users/user-detail/detail-form/detail-form.component.html
@@ -11,10 +11,10 @@
          <i class="las la-camera"></i>
        </div>
        <cnsl-avatar
-          *ngIf="user && user.profile?.displayName && user.profile?.firstName && user.profile?.lastName"
+          *ngIf="user && user.profile"
          class="avatar"
-          [name]="user.profile?.displayName ?? ''"
-          [avatarUrl]="user.profile?.avatarUrl || ''"
+          [name]="user.profile.displayName"
+          [avatarUrl]="user.profile.avatarUrl || ''"
          [forColor]="preferredLoginName"
          [size]="80"
        >
--- a/console/src/app/pages/users/user-list/user-table/user-table.component.html
+++ b/console/src/app/pages/users/user-list/user-table/user-table.component.html
@@ -92,17 +92,11 @@
            [checked]="selection.isSelected(user)"
          >
            <cnsl-avatar
-              *ngIf="
-                user.human &&
-                  user.human.profile.displayName &&
-                  user.human?.profile.firstName &&
-                  user.human?.profile.lastName;
-                else cog
-              "
+              *ngIf="user.human && user.human.profile; else cog"
              class="avatar"
              [name]="user.human.profile.displayName"
-              [avatarUrl]="user.human?.profile?.avatarUrl || ''"
-              [forColor]="user?.preferredLoginName"
+              [avatarUrl]="user.human.profile.avatarUrl || ''"
+              [forColor]="user.preferredLoginName"
              [size]="32"
            >
            </cnsl-avatar>