[ACS-4708] Implemented user initials (#3184)

* added user initials

* modified spec file

* changes for config files

* class name renamed

* implemented the review comments

projects/aca-content/src/lib/aca-content.module.ts

@@ -118,6 +118,7 @@ import { UserInfoComponent } from './components/common/user-info/user-info.compo
 import { SidenavComponent } from './components/sidenav/sidenav.component';
 import { ContentManagementService } from './services/content-management.service';
 import { ShellLayoutComponent, SHELL_NAVBAR_MIN_WIDTH } from '@alfresco/adf-core/shell';
+import { UserMenuComponent } from './components/sidenav/user-menu/user-menu.component';
 
 registerLocaleData(localeFr);
 registerLocaleData(localeDe);
@@ -229,7 +230,8 @@ export class ContentServiceExtensionModule {
       'app.languagePicker': LanguagePickerComponent,
       'app.logout': LogoutComponent,
       'app.user': UserInfoComponent,
-      'app.notification-center': NotificationHistoryComponent
+      'app.notification-center': NotificationHistoryComponent,
+      'app.user.menu': UserMenuComponent
     });
 
     extensions.setEvaluators({

projects/aca-content/src/lib/components/common/user-info/user-info.component.html

@@ -1,4 +1,9 @@
-<button mat-menu-item [routerLink]="['/profile']" title="{{'APP.TOOLTIPS.MY_PROFILE' | translate}}">
-  <mat-icon>account_circle</mat-icon>
-  <span>{{ (displayName$ | async) }}</span>
-</button>
+<div mat-menu-item class="aca-user-info" [routerLink]="['/profile']" title="{{'APP.TOOLTIPS.MY_PROFILE' | translate}}">
+  <button class="aca-user-info-button">
+    <div>{{ (displayName$ | async)?.initials }}</div>
+  </button>
+  <div class="aca-user-info-name-email">
+    <div>{{ (displayName$ | async)?.firstName }}</div>
+    <div>{{ (displayName$ | async)?.email }}</div>
+  </div>
+</div>

projects/aca-content/src/lib/components/common/user-info/user-info.component.scss

@@ -0,0 +1,25 @@
+.aca-user-info {
+  display: flex;
+  height: 66px;
+  align-items: center;
+
+  &-button {
+    border-radius: 90%;
+    height: 32px;
+    margin-right: 0;
+    min-width: 32px;
+    padding: 0;
+    font-weight: 700;
+    line-height: 32px;
+    text-align: center;
+    vertical-align: middle;
+    background: var(--theme-user-initials-background-color);
+    color: var(--theme-user-intials-text-color);
+    border: none;
+  }
+
+  &-name-email {
+    line-height: 24px;
+    margin-left: 10px;
+  }
+}

projects/aca-content/src/lib/components/common/user-info/user-info.component.spec.ts

@@ -23,7 +23,7 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AuthenticationService } from '@alfresco/adf-core';
+import { AuthenticationService, IdentityUserService } from '@alfresco/adf-core';
 import { PeopleContentService } from '@alfresco/adf-content-services';
 import { UserInfoComponent } from './user-info.component';
 import { AppTestingModule } from '../../../testing/app-testing.module';
@@ -34,7 +34,7 @@ describe('UserInfoComponent', () => {
   let fixture: ComponentFixture<UserInfoComponent>;
   let authServiceStub: Partial<AuthenticationService>;
   let peopleContentServiceStub: Partial<PeopleContentService>;
-  let identityUserServiceStub: Partial<PeopleContentService>;
+  let identityUserServiceStub: Partial<IdentityUserService>;
 
   beforeEach(() => {
     authServiceStub = {
@@ -67,24 +67,23 @@ describe('UserInfoComponent', () => {
     };
 
     identityUserServiceStub = {
-      getCurrentUserInfo: () =>
-        of({
-          firstName: 'John',
-          email: 'john@example.com',
-          id: 'johnDoe1',
-          enabled: true,
-          company: {
-            organization: 'ABC Organization',
-            address1: 'XYZ Road',
-            address2: 'Ohio',
-            address3: 'Westlake',
-            postcode: '44145',
-            telephone: '456876',
-            fax: '323984',
-            email: 'contact.us@abc.com'
-          },
-          isAdmin: () => true
-        })
+      getCurrentUserInfo: () => ({
+        firstName: 'John',
+        email: 'john@example.com',
+        id: 'johnDoe1',
+        enabled: true,
+        company: {
+          organization: 'ABC Organization',
+          address1: 'XYZ Road',
+          address2: 'Ohio',
+          address3: 'Westlake',
+          postcode: '44145',
+          telephone: '456876',
+          fax: '323984',
+          email: 'contact.us@abc.com'
+        },
+        isAdmin: () => true
+      })
     };
 
     TestBed.configureTestingModule({
@@ -93,7 +92,7 @@ describe('UserInfoComponent', () => {
       providers: [
         { provide: AuthenticationService, useValue: authServiceStub },
         { provide: PeopleContentService, useValue: peopleContentServiceStub },
-        { provide: identityUserServiceStub, useValue: identityUserServiceStub }
+        { provide: IdentityUserService, useValue: identityUserServiceStub }
       ]
     }).compileComponents();
 
@@ -107,15 +106,45 @@ describe('UserInfoComponent', () => {
     expect(loggedIn).toBeTrue();
   });
 
-  it('should parse display name without email', async () => {
-    const model = { firstName: 'John' };
-    const displayName = component['parseDisplayName'](model);
-    expect(displayName).toBe('John');
+  it('should return an object with empty strings for all properties when the input model is empty', () => {
+    const result = component.parseDisplayName({});
+    expect(result.firstName).toEqual('');
+    expect(result.initials).toEqual('');
+    expect(result.email).toEqual('');
   });
 
-  it('should parse display name with email', async () => {
-    const model = { firstName: 'John', email: 'john@example.com' };
-    const displayName = component['parseDisplayName'](model);
-    expect(displayName).toBe('John (john@example.com)');
+  it('should return an object with the correct firstName and initials when the input model has only the firstName property', () => {
+    const result = component.parseDisplayName({ firstName: 'John' });
+    expect(result.firstName).toEqual('John');
+    expect(result.initials).toEqual('J');
+    expect(result.email).toEqual('');
+  });
+
+  it('should return an object with the correct firstName and initials when the input model has only the lastName property', () => {
+    const result = component.parseDisplayName({ lastName: 'Doe' });
+    expect(result.firstName).toEqual(' Doe');
+    expect(result.initials).toEqual('D');
+    expect(result.email).toEqual('');
+  });
+
+  it('should return an object with the correct email property when the input model has only the email property', () => {
+    const result = component.parseDisplayName({ email: 'john.doe@example.com' });
+    expect(result.firstName).toEqual('');
+    expect(result.initials).toEqual('');
+    expect(result.email).toEqual('john.doe@example.com');
+  });
+
+  it('should return an object with the correct firstName, initials, and lastName concatenated when the input model has both firstName and lastName properties', () => {
+    const result = component.parseDisplayName({ firstName: 'John', lastName: 'Doe' });
+    expect(result.firstName).toEqual('John Doe');
+    expect(result.initials).toEqual('JD');
+    expect(result.email).toEqual('');
+  });
+
+  it('should return an object with all properties correctly parsed when the input model has all three properties', () => {
+    const result = component.parseDisplayName({ firstName: 'John', lastName: 'Doe', email: 'john.doe@example.com' });
+    expect(result.firstName).toEqual('John Doe');
+    expect(result.initials).toEqual('JD');
+    expect(result.email).toEqual('john.doe@example.com');
   });
 });

projects/aca-content/src/lib/components/common/user-info/user-info.component.ts

@@ -23,17 +23,19 @@
  */
 
 import { IdentityUserService, AuthenticationService } from '@alfresco/adf-core';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { PeopleContentService } from '@alfresco/adf-content-services';
 import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-user-info',
-  templateUrl: './user-info.component.html'
+  templateUrl: './user-info.component.html',
+  styleUrls: ['./user-info.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class UserInfoComponent implements OnInit {
-  displayName$: Observable<string>;
+  displayName$: Observable<{ firstName: string; initials: string; email: string }>;
 
   constructor(
     private peopleContentService: PeopleContentService,
@@ -72,13 +74,19 @@ export class UserInfoComponent implements OnInit {
     this.displayName$ = of(this.identityUserService.getCurrentUserInfo()).pipe(map((model) => this.parseDisplayName(model)));
   }
 
-  private parseDisplayName(model: { firstName?: string; email?: string }): string {
-    let result = model.firstName;
-
-    if (model.email) {
-      result = `${model.firstName} (${model.email})`;
+  parseDisplayName(model: { firstName?: string; lastName?: string; email?: string }): { firstName: string; initials: string; email: string } {
+    const result = { firstName: '', initials: '', email: '' };
+    if (model.firstName) {
+      result.firstName = model.firstName;
+      result.initials = model.firstName.charAt(0).toUpperCase();
+    }
+    if (model.lastName) {
+      result.firstName += ' ' + model.lastName;
+      result.initials += model.lastName.charAt(0).toUpperCase();
+    }
+    if (model.email) {
+      result.email = `${model.email}`;
     }
-
     return result;
   }
 

projects/aca-content/src/lib/components/sidenav/sidenav.module.ts

@@ -36,6 +36,7 @@ import { ButtonMenuComponent } from './components/button-menu.component';
 import { ActionDirective } from './directives/action.directive';
 import { SidenavHeaderComponent } from './components/sidenav-header.component';
 import { SharedToolbarModule } from '@alfresco/aca-shared';
+import { UserMenuComponent } from './user-menu/user-menu.component';
 
 @NgModule({
   imports: [CoreModule.forChild(), ExtensionsModule.forChild(), RouterModule, AppCreateMenuModule, SharedToolbarModule],
@@ -47,7 +48,8 @@ import { SharedToolbarModule } from '@alfresco/aca-shared';
     ExpandMenuComponent,
     ButtonMenuComponent,
     SidenavComponent,
-    SidenavHeaderComponent
+    SidenavHeaderComponent,
+    UserMenuComponent
   ],
   exports: [
     MenuPanelDirective,

projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.html

@@ -0,0 +1,9 @@
+<button mat-button class="aca-user-menu-button" [matMenuTriggerFor]="menu">
+  <div>{{ (displayName$ | async)?.initials }}</div>
+</button>
+
+<mat-menu #menu="matMenu" xPosition="before">
+  <ng-container *ngFor="let item of data.items">
+    <app-toolbar-menu-item [actionRef]="item"></app-toolbar-menu-item>
+  </ng-container>
+</mat-menu>

projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.scss

@@ -0,0 +1,14 @@
+.aca-user-menu-button {
+  border-radius: 90%;
+  height: 32px;
+  margin-right: 0;
+  min-width: 32px;
+  padding: 0;
+  font-weight: 700;
+  line-height: 32px;
+  text-align: center;
+  vertical-align: middle;
+  background: var(--theme-user-initials-background-color);
+  color: var(--theme-user-intials-text-color);
+  border: none;
+}

projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.spec.ts

@@ -0,0 +1,143 @@
+/*!
+ * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Alfresco Example Content Application
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail. Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AuthenticationService, IdentityUserService } from '@alfresco/adf-core';
+import { PeopleContentService } from '@alfresco/adf-content-services';
+import { AppTestingModule } from '../../../testing/app-testing.module';
+import { UserMenuComponent } from './user-menu.component';
+import { of } from 'rxjs';
+
+describe('UserMenuComponent', () => {
+  let component: UserMenuComponent;
+  let fixture: ComponentFixture<UserMenuComponent>;
+  let authServiceStub: Partial<AuthenticationService>;
+  let peopleContentServiceStub: Partial<PeopleContentService>;
+  let identityUserServiceStub: Partial<IdentityUserService>;
+
+  const menuItems = [
+    {
+      id: 'menu1',
+      title: 'Menu Item 1',
+      icon: 'icon1',
+      actions: {
+        click: 'action1'
+      }
+    },
+    {
+      id: 'menu2',
+      title: 'Menu Item 2',
+      icon: 'icon2',
+      actions: {
+        click: 'action2'
+      }
+    }
+  ];
+
+  beforeEach(() => {
+    authServiceStub = {
+      isOauth: () => true,
+      isECMProvider: () => true,
+      isEcmLoggedIn: () => true,
+      isKerberosEnabled: () => false,
+      isLoggedIn: () => true
+    };
+
+    peopleContentServiceStub = {
+      getCurrentUserInfo: () =>
+        of({
+          firstName: 'John',
+          email: 'john@example.com',
+          id: 'johnDoe1',
+          enabled: true,
+          company: {
+            organization: 'ABC Organization',
+            address1: 'XYZ Road',
+            address2: 'Ohio',
+            address3: 'Westlake',
+            postcode: '44145',
+            telephone: '456876',
+            fax: '323984',
+            email: 'contact.us@abc.com'
+          },
+          isAdmin: () => true
+        })
+    };
+
+    identityUserServiceStub = {
+      getCurrentUserInfo: () => ({
+        firstName: 'John',
+        email: 'john@example.com',
+        id: 'johnDoe1',
+        enabled: true,
+        company: {
+          organization: 'ABC Organization',
+          address1: 'XYZ Road',
+          address2: 'Ohio',
+          address3: 'Westlake',
+          postcode: '44145',
+          telephone: '456876',
+          fax: '323984',
+          email: 'contact.us@abc.com'
+        },
+        isAdmin: () => true
+      })
+    };
+
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule],
+      declarations: [UserMenuComponent],
+      providers: [
+        { provide: AuthenticationService, useValue: authServiceStub },
+        { provide: PeopleContentService, useValue: peopleContentServiceStub },
+        { provide: identityUserServiceStub, useValue: identityUserServiceStub }
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UserMenuComponent);
+    component = fixture.componentInstance;
+    component.data = { items: menuItems };
+    fixture.detectChanges();
+  });
+
+  it('should return an object with empty strings for all properties when the input model is empty', () => {
+    const result = component.parseDisplayName({});
+    expect(result.initials).toEqual('');
+  });
+
+  it('should return an object with the correct initials when the input model has only the firstName property', () => {
+    const result = component.parseDisplayName({ firstName: 'John' });
+    expect(result.initials).toEqual('J');
+  });
+
+  it('should return an object with the correct initials when the input model has only the lastName property', () => {
+    const result = component.parseDisplayName({ lastName: 'Doe' });
+    expect(result.initials).toEqual('D');
+  });
+
+  it('should return an object with the correct initials concatenated when the input model has both firstName and lastName properties', () => {
+    const result = component.parseDisplayName({ firstName: 'John', lastName: 'Doe' });
+    expect(result.initials).toEqual('JD');
+  });
+});

projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.ts

@@ -0,0 +1,99 @@
+/*!
+ * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Alfresco Example Content Application
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail. Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { PeopleContentService } from '@alfresco/adf-content-services';
+import { AuthenticationService, IdentityUserService } from '@alfresco/adf-core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { ContentActionRef } from '@alfresco/adf-extensions';
+
+@Component({
+  selector: 'aca-user-menu',
+  templateUrl: './user-menu.component.html',
+  styleUrls: ['./user-menu.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class UserMenuComponent implements OnInit {
+  displayName$: Observable<{ firstName: string; initials: string }>;
+  @Input()
+  actionRef: ContentActionRef;
+  @Input()
+  data: { items: any[] };
+
+  constructor(
+    private peopleContentService: PeopleContentService,
+    private identityUserService: IdentityUserService,
+    private authService: AuthenticationService
+  ) {}
+
+  ngOnInit() {
+    this.getUserInfo();
+    if (this.data && this.data.items) {
+      this.data.items.sort((a, b) => a.order - b.order);
+    }
+  }
+
+  getUserInfo() {
+    if (this.authService.isOauth()) {
+      this.loadIdentityUserInfo();
+
+      if (this.authService.isECMProvider() && this.authService.isEcmLoggedIn()) {
+        this.loadEcmUserInfo();
+      }
+    } else if (this.isEcmLoggedIn()) {
+      this.loadEcmUserInfo();
+    }
+  }
+
+  get isLoggedIn(): boolean {
+    if (this.authService.isKerberosEnabled()) {
+      return true;
+    }
+    return this.authService.isLoggedIn();
+  }
+
+  private loadEcmUserInfo(): void {
+    this.displayName$ = this.peopleContentService.getCurrentUserInfo().pipe(map((model) => this.parseDisplayName(model)));
+  }
+
+  private loadIdentityUserInfo() {
+    this.displayName$ = of(this.identityUserService.getCurrentUserInfo()).pipe(map((model) => this.parseDisplayName(model)));
+  }
+
+  parseDisplayName(model: { firstName?: string; lastName?: string }): { firstName: string; initials: string } {
+    const result = { firstName: '', initials: '' };
+    if (model.firstName) {
+      result.initials = model.firstName.charAt(0).toUpperCase();
+    }
+    if (model.lastName) {
+      result.initials += model.lastName.charAt(0).toUpperCase();
+    }
+    return result;
+  }
+
+  private isEcmLoggedIn() {
+    return this.authService.isEcmLoggedIn() || (this.authService.isECMProvider() && this.authService.isKerberosEnabled());
+  }
+}

projects/aca-content/src/lib/ui/variables/variables.scss

@@ -37,6 +37,8 @@ $selected-background-color: rgba(31, 116, 219, 0.24);
 $action-button-text-color: rgba(33, 35, 40, 0.7);
 $page-layout-header-background-color: #fff;
 $aca-toolbar-button-background-color: rgba(33, 33, 33, 0.05);
+$aca-user-initials-background: rgba(33, 33, 33, 0.12);
+$aca-user-initials-text-color: #212121;
 
 // CSS Variables
 $defaults: (
@@ -81,7 +83,9 @@ $defaults: (
   --theme-action-button-text-color: $action-button-text-color,
   --theme-header-border-color: $grey-background,
   --theme-page-layout-header-background-color: $page-layout-header-background-color,
-  --theme-app-toolbar-button-background-color: $aca-toolbar-button-background-color
+  --theme-app-toolbar-button-background-color: $aca-toolbar-button-background-color,
+  --theme-user-initials-background-color: $aca-user-initials-background,
+  --theme-user-intials-text-color: $aca-user-initials-text-color
 );
 
 // propagates SCSS variables into the CSS variables scope