Merge pull request #8306 from abpframework/fix/8265

fix: show tenant name next to the username

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html

@@ -0,0 +1,41 @@
+<ng-template #loginBtn>
+  <a role="button" class="nav-link pointer" (click)="navigateToLogin()">{{
+    'AbpAccount::Login' | abpLocalization
+  }}</a>
+</ng-template>
+<div
+  *ngIf="(currentUser$ | async)?.isAuthenticated; else loginBtn"
+  ngbDropdown
+  class="dropdown"
+  #currentUserDropdown="ngbDropdown"
+  display="static"
+>
+  <a
+    ngbDropdownToggle
+    class="nav-link"
+    href="javascript:void(0)"
+    role="button"
+    id="dropdownMenuLink"
+    data-toggle="dropdown"
+    aria-haspopup="true"
+    aria-expanded="false"
+  >
+    <small *ngIf="(selectedTenant$ | async)?.name as tenantName"
+      ><i>{{ tenantName }}</i
+      >\</small
+    >
+    <strong>{{ (currentUser$ | async)?.userName }}</strong>
+  </a>
+  <div
+    class="dropdown-menu dropdown-menu-right border-0 shadow-sm"
+    aria-labelledby="dropdownMenuLink"
+    [class.d-block]="smallScreen && currentUserDropdown.isOpen()"
+  >
+    <a class="dropdown-item pointer" (click)="navigateToManageProfile()"
+      ><i class="fa fa-cog mr-1"></i>{{ 'AbpAccount::ManageYourProfile' | abpLocalization }}</a
+    >
+    <a class="dropdown-item" href="javascript:void(0)" (click)="logout()"
+      ><i class="fa fa-power-off mr-1"></i>{{ 'AbpUi::Logout' | abpLocalization }}</a
+    >
+  </div>
+</div>

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts

@@ -3,55 +3,18 @@ import {
   ConfigStateService,
   CurrentUserDto,
   NAVIGATE_TO_MANAGE_PROFILE,
+  SessionStateService,
 } from '@abp/ng.core';
 import { Component, Inject } from '@angular/core';
 import { Observable } from 'rxjs';
 
 @Component({
   selector: 'abp-current-user',
-  // tslint:disable-next-line: component-max-inline-declarations
-  template: `
-    <ng-template #loginBtn>
-      <a role="button" class="nav-link pointer" (click)="navigateToLogin()">{{
-        'AbpAccount::Login' | abpLocalization
-      }}</a>
-    </ng-template>
-    <div
-      *ngIf="(currentUser$ | async)?.isAuthenticated; else loginBtn"
-      ngbDropdown
-      class="dropdown"
-      #currentUserDropdown="ngbDropdown"
-      display="static"
-    >
-      <a
-        ngbDropdownToggle
-        class="nav-link"
-        href="javascript:void(0)"
-        role="button"
-        id="dropdownMenuLink"
-        data-toggle="dropdown"
-        aria-haspopup="true"
-        aria-expanded="false"
-      >
-        {{ (currentUser$ | async)?.userName }}
-      </a>
-      <div
-        class="dropdown-menu dropdown-menu-right border-0 shadow-sm"
-        aria-labelledby="dropdownMenuLink"
-        [class.d-block]="smallScreen && currentUserDropdown.isOpen()"
-      >
-        <a class="dropdown-item pointer" (click)="navigateToManageProfile()"
-          ><i class="fa fa-cog mr-1"></i>{{ 'AbpAccount::ManageYourProfile' | abpLocalization }}</a
-        >
-        <a class="dropdown-item" href="javascript:void(0)" (click)="logout()"
-          ><i class="fa fa-power-off mr-1"></i>{{ 'AbpUi::Logout' | abpLocalization }}</a
-        >
-      </div>
-    </div>
-  `,
+  templateUrl: './current-user.component.html',
 })
 export class CurrentUserComponent {
   currentUser$: Observable<CurrentUserDto> = this.configState.getOne$('currentUser');
+  selectedTenant$ = this.sessionState.getTenant$();
 
   get smallScreen(): boolean {
     return window.innerWidth < 992;
@@ -61,6 +24,7 @@ export class CurrentUserComponent {
     @Inject(NAVIGATE_TO_MANAGE_PROFILE) public navigateToManageProfile,
     private authService: AuthService,
     private configState: ConfigStateService,
+    private sessionState: SessionStateService,
   ) {}
 
   navigateToLogin() {