Merge pull request #2529 from ORCID/lmendoza/jun-2025-multiple-changes

lmendoza/jun-2025-multiple-changes

Author: cryptalith

src/app/core/login-interstitials-manager/login-main-interstitials-manager.service.ts

@@ -36,6 +36,11 @@ export class LoginMainInterstitialsManagerService {
     LoginDomainInterstitialManagerService: LoginDomainInterstitialManagerService,
     LoginAffiliationInterstitialManagerService: LoginAffiliationInterstitialManagerService
   ) {
+    // Delare here all the interstitial services.
+    // This are the entry points to add new interstitials.
+    // They should be added in the order they should be checked.
+    // The first one that returns a component or a dialog subscription will be used.
+    // The rest will be ignored.
     this.interstitialServices = [
       LoginDomainInterstitialManagerService,
       LoginAffiliationInterstitialManagerService,

src/app/core/observability-events/observability-events.service.ts

@@ -1,7 +1,11 @@
 import { Inject, Injectable } from '@angular/core'
 import { WINDOW } from 'src/app/cdk/window'
 
-export type JourneyType = 'orcid_registration' | 'orcid_update_emails'
+export type JourneyType =
+  | 'orcid_registration'
+  | 'orcid_update_emails'
+  | 'orcid_with_notifications'
+  | 'orcid_without_notifications'
 @Injectable({
   providedIn: 'root',
 })
@@ -26,7 +30,7 @@ export class CustomEventService {
 
     if (runtimeEnvironment.debugger) {
       console.debug(
-        `-> Journey "${journeyType}" started at ${this.journeys[journeyType].startTime}`,
+        `[RUM][journey:${journeyType}] : start`,
         attributes
       )
     }
@@ -58,14 +62,14 @@ export class CustomEventService {
       eventName,
       elapsedTime,
     }
-    if (typeof (this.window as any)?.addPageAction === 'function') {
+    if (typeof (this.window as any).newrelic?.addPageAction === 'function') {
       ;(this.window as any).newrelic.addPageAction(journeyType, eventAttributes)
     }
     // Send the custom event to New Relic
 
     if (runtimeEnvironment.debugger) {
       console.debug(
-        `-> Event "${eventName}" recorded for journey "${journeyType}" with elapsed time ${elapsedTime}ms`,
+        `[RUM][journey:${journeyType}] : event ${eventName}`,
         eventAttributes
       )
     }
@@ -94,15 +98,18 @@ export class CustomEventService {
     }
 
     // Send the final custom event to New Relic
-    if (typeof (this.window as any)?.addPageAction === 'function') {
-      ;(this.window as any).addPageAction(journeyType, finalAttributes)
+    if (typeof (this.window as any).newrelic?.addPageAction === 'function') {
+      ;(this.window as any).newrelic?.addPageAction(
+        journeyType,
+        finalAttributes
+      )
     }
 
     // Clean up the journey data
     delete this.journeys[journeyType]
 
     console.debug(
-      `Journey "${journeyType}" finished with elapsed time ${elapsedTime}ms`,
+      `[RUM][journey:${journeyType}] : finished`,
       finalAttributes
     )
   }

src/app/layout/header/header.component.scss

@@ -195,3 +195,7 @@ nav {
 app-search {
   overflow: hidden;
 }
+
+app-user-menu {
+  display: flex;
+}

src/app/layout/layout.module.ts

@@ -21,6 +21,7 @@ import { BannerModule } from '../cdk/banner/banner.module'
 import { MaintenanceMessageComponent } from './maintenance-message/maintenance-message.component'
 import { MatDividerModule } from '@angular/material/divider'
 import { A11yLinkModule } from '../cdk/a11y-link/a11y-link.module'
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'
 
 @NgModule({
   imports: [
@@ -37,6 +38,7 @@ import { A11yLinkModule } from '../cdk/a11y-link/a11y-link.module'
     BannerModule,
     MatDividerModule,
     A11yLinkModule,
+    MatTooltipModule,
   ],
   declarations: [
     HeaderComponent,

src/app/layout/user-menu/user-menu.component.html

@@ -29,6 +29,35 @@
     <ng-container i18n="@@header.signin">Sign in</ng-container
     >&nbsp;/&nbsp;<ng-container i18n="@@header.register">Register</ng-container>
   </button>
+  <button
+    mat-stroked-button
+    class="user-menu-button"
+    (click)="goto('inbox', 'fromHeaderButton')"
+    id="cy-inbox-button"
+    *ngIf="userInfo"
+    [matTooltip]="
+      inboxUnread > 0 ? notificationTooltipActive : notificationTooltip
+    "
+    [attr.aria-label]="
+      inboxUnread > 0 ? notificationTooltipActive : notificationTooltip
+    "
+  >
+    <mat-icon
+      matBadgeSize="small"
+      matBadgeColor="warn"
+      class="material-icons-outlined"
+      ><img
+        *ngIf="inboxUnread === 0"
+        src="./assets/vectors/notification-button.svg"
+        alt=""
+      />
+      <img
+        *ngIf="inboxUnread > 0"
+        src="./assets/vectors/notification-button-active.svg"
+        alt=""
+      />
+    </mat-icon>
+  </button>
 </section>
 <mat-menu #menu="matMenu" class="user-menu" id="cy-user-menu">
   <button
@@ -47,8 +76,11 @@
       </div>
     </div>
   </button>
-  <button mat-menu-item (click)="goto('inbox')" id="cy-inbox">
-    <mat-icon>inbox</mat-icon>
+  <button mat-menu-item (click)="goto('inbox', 'fromMenuButton')" id="cy-inbox">
+    <mat-icon *ngIf="inboxUnread === 0">inbox</mat-icon>
+    <mat-icon *ngIf="inboxUnread > 0"
+      ><img src="./assets/vectors/notification-button-active.svg"
+    /></mat-icon>
     <span i18n="@@workspace.notifications">Inbox</span>
     ({{ inboxUnread }})
   </button>
@@ -133,3 +165,4 @@
     <span i18n="@@ngOrcid.logout">Logout</span>
   </button>
 </mat-menu>
+<!-- Beel for Inbox-->

src/app/layout/user-menu/user-menu.component.scss

@@ -1,3 +1,8 @@
+section {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
 .main-button {
   height: auto;
   .main-button-container {
@@ -37,7 +42,6 @@
 :host {
   .user-menu-button {
     max-width: 100%;
-    padding: 0 32px;
     .columns-4 & {
       padding: 0;
     }
@@ -69,7 +73,14 @@
 
 span.name-text-container {
   overflow: hidden;
-  width: calc(100% - 59px);
+  max-width: calc(102% - 55px);
   display: inline-block;
   text-overflow: ellipsis;
+  width: fit-content;
+}
+
+[mat-stroked-button] {
+  min-width: 40px;
+  padding: 0;
+  margin: 0 16px;
 }

src/app/layout/user-menu/user-menu.component.ts

@@ -9,6 +9,7 @@ import { ApplicationRoutes } from 'src/app/constants'
 import { TogglzService } from 'src/app/core/togglz/togglz.service'
 import { InboxService } from '../../core/inbox/inbox.service'
 import { first } from 'rxjs/operators'
+import { CustomEventService } from 'src/app/core/observability-events/observability-events.service'
 
 @Component({
   selector: 'app-user-menu',
@@ -25,16 +26,20 @@ export class UserMenuComponent implements OnInit {
   platform: PlatformInfo
   labelSigninRegister = $localize`:@@layout.ariaLabelSigninRegister:Sign in to ORCID or register for your ORCID iD`
   labelUserMenu = $localize`:@@layout.ariaLabelUserMenu:User menu`
+  notificationTooltipActive = $localize`:@@layout.notificationTooltip:You have unread notifications`
+  notificationTooltip = $localize`:@@layout.notificationTooltipInactive:Notifications inbox`
   isAccountDelegate: boolean
   inboxUnread = 0
+  userJourney!: 'orcid_with_notifications' | 'orcid_without_notifications'
 
   constructor(
     private _router: Router,
     private _userInfo: UserService,
     @Inject(WINDOW) private window: Window,
     _platform: PlatformInfoService,
     private _inboxService: InboxService,
-    private _togglz: TogglzService
+    private _togglz: TogglzService,
+    private observabilityEventService: CustomEventService
   ) {
     _userInfo.getUserSession().subscribe((data) => {
       if (data.loggedIn) {
@@ -56,15 +61,27 @@ export class UserMenuComponent implements OnInit {
     this._inboxService
       .retrieveUnreadCount()
       .pipe(first())
-      .subscribe((inboxUnread) => (this.inboxUnread = inboxUnread))
+      .subscribe((inboxUnread) => {
+        ;(this.userJourney =
+          inboxUnread > 0
+            ? 'orcid_with_notifications'
+            : 'orcid_without_notifications'),
+          this.observabilityEventService.startJourney(
+            this.userJourney,
+
+            { inboxUnread }
+          )
+        this.inboxUnread = inboxUnread
+      })
   }
 
-  goto(url) {
+  goto(url, from?: string) {
     if (url === 'my-orcid') {
       this._router.navigate([ApplicationRoutes.myOrcid])
     } else if (url === 'signin') {
       this._router.navigate([ApplicationRoutes.signin])
     } else if (url === 'inbox') {
+      this.observabilityEventService.recordEvent(this.userJourney, from)
       this._router.navigate([ApplicationRoutes.inbox])
     } else if (url === 'account') {
       this._router.navigate([ApplicationRoutes.account])

src/assets/vectors/notification-button-active.svg

@@ -7,7 +7,7 @@ export const environment: EnvironmentInterface = {
   API_NEWS: 'https://www.mocky.io/v2/5dced45b3000007300931ce8',
   API_PUB: `//<SUBDOMAIN><DOMAIN>/v3.0`,
   API_WEB: `//<SUBDOMAIN><DOMAIN>/`,
-  AUTH_SERVER: 'https://auth.<SUBDOMAIN><DOMAIN>/',
+  AUTH_SERVER: '//<SUBDOMAIN><DOMAIN>/auth/',
   BASE_URL: '//<SUBDOMAIN><DOMAIN>/',
   INFO_SITE: 'https://info.orcid.org/',
   GOOGLE_ANALYTICS_TESTING_MODE: true,