Merge branch 'main' into aromanovv/PD-4790-improve-auth-challenge

Author: amontenegro

AGENTS.md

@@ -22,3 +22,17 @@ If a library component (e.g. in orcid-registry-ui) looks correct in the docs app
 ## Dialogs and async data
 
 When a dialog or view needs data from an HTTP (or other async) call, opening the dialog only after the request completes can feel slow. Consider opening the dialog **immediately** with skeleton or static data (e.g. labels, empty lists, or a `loading: true` flag), then assigning the full payload to the dialog’s component instance when the observable emits. The dialog can show placeholders or a loading state until then.
+
+## RUM / Observability
+
+The app sends events to **New Relic** (and optionally logs them in the console) for analytics and debugging. The central service is **`RumJourneyEventService`** (`src/app/rum/service/customEvent.service.ts`).
+
+### Two ways to record events
+
+1. **`recordSimpleEvent(eventName, attrs?)`** — Standalone one-off events. No journey lifecycle. Use for: record page actions (expand featured work, summary toggle), errors (`http_error`, `client_error`), or any action that isn't part of a multi-step journey.
+2. **`recordEvent(journeyType, eventName, eventAttrs?)`** — Events inside a **journey**. Requires `startJourney(journeyType, context)` first; events are tied to that journey (elapsed time, journey id). Use for: registration flow, OAuth, notifications. If no journey is active, the event is ignored (and logged in console when debug is on).
+
+### Event names: use the enum
+
+- **All event name strings** live in **`AppEventName`** in `src/app/register/app-event-names.ts`. Do not hardcode event names elsewhere.
+- For **dynamic** names (e.g. `step-${step}-loaded`), add a small helper in the same file (e.g. `stepLoadedEvent(step)`) and use it when calling `recordEvent`.

projects/orcid-registry-ui/src/lib/components/import-works-dialog/import-works-dialog.component.html

@@ -98,7 +98,7 @@
               </ng-container>
             </div>
             <div class="import-works-dialog__card-content">
-              <p class="import-works-dialog__card-title">{{ link.name }}</p>
+              <h3 class="import-works-dialog__card-title">{{ link.name }}</h3>
               <p class="import-works-dialog__card-description">
                 {{ link.description }}
               </p>
@@ -247,7 +247,7 @@
                 >
               </div>
               <div class="import-works-dialog__card-content">
-                <p class="import-works-dialog__card-title">{{ link.name }}</p>
+                <h3 class="import-works-dialog__card-title import-works-dialog__card-title--more">{{ link.name }}</h3>
                 <p class="import-works-dialog__card-description">
                   {{ link.description }}
                 </p>

projects/orcid-registry-ui/src/lib/components/import-works-dialog/import-works-dialog.component.scss

@@ -143,6 +143,18 @@
   font-weight: var(--orcid-font-weight-bold, 700);
   line-height: 27px;
   color: var(--orcid-color-text-dark-high, #000000);
+
+  // Certified: 4px vertical space between CSP title and description (PD-5141)
+  .import-works-dialog__card--certified & {
+    margin-bottom: 4px;
+  }
+}
+
+// More Services: item titles 16px/24px; 2px spacing maintained (PD-5141)
+.import-works-dialog__card-title--more {
+  margin: 0 0 2px;
+  font-size: 16px;
+  line-height: 24px;
 }
 
 .import-works-dialog__card-description {

src/app/cdk/panel/panel/panel.component.ts

@@ -33,6 +33,8 @@ import { WINDOW } from 'src/app/cdk/window'
 import { TogglzService } from '../../../core/togglz/togglz.service'
 import { getAriaLabel } from '../../../constants'
 import { RecordBiographyService } from 'src/app/core/record-biography/record-biography.service'
+import { RumJourneyEventService } from 'src/app/rum/service/customEvent.service'
+import { AppEventName } from 'src/app/register/app-event-names'
 import { ExpandedWorkFeaturedModalComponent } from 'src/app/record/components/work-featured/modals/expanded-work-featured-modal/expanded-work-featured-modal.component'
 
 @Component({
@@ -153,6 +155,7 @@ export class PanelComponent implements OnInit {
     private _worksService: RecordWorksService,
     private _verificationEmailModalService: VerificationEmailModalService,
     private _recordBiographyService: RecordBiographyService,
+    private _rumEvents: RumJourneyEventService,
     private _togglzService: TogglzService
   ) {}
 
@@ -264,6 +267,7 @@ export class PanelComponent implements OnInit {
   }
 
   expandItem() {
+    this._rumEvents.recordSimpleEvent(AppEventName.RecordExpandFeaturedWorkClicked)
     const modalComponent = this._dialog.open(
       ExpandedWorkFeaturedModalComponent,
       {

src/app/core/error-handler/error-handler.service.ts

@@ -8,6 +8,7 @@ import { ErrorReport } from 'src/app/types'
 import { ERROR_REPORT } from 'src/app/errors'
 import { CookieService } from 'ngx-cookie-service'
 import { RumJourneyEventService } from 'src/app/rum/service/customEvent.service'
+import { AppEventName } from 'src/app/register/app-event-names'
 
 @Injectable({
   providedIn: 'root',
@@ -52,7 +53,7 @@ export class ErrorHandlerService {
           // Server error
           if (processedError instanceof HttpErrorResponse) {
             try {
-              this._observability.recordSimpleEvent('http_error', {
+              this._observability.recordSimpleEvent(AppEventName.HttpError, {
                 status: processedError.status,
                 statusText: processedError.statusText,
                 url: processedError.url,
@@ -73,7 +74,7 @@ ok: "${processedError.ok}"
           } else {
             // Client side error
             try {
-              this._observability.recordSimpleEvent('client_error', {
+              this._observability.recordSimpleEvent(AppEventName.ClientError, {
                 name: processedError.name,
                 message: processedError.message,
                 browserSupport: this.browserSupport,

src/app/core/lang-preload/firefox-xsrf-preload.interceptor.spec.ts

@@ -7,6 +7,7 @@ import { TestBed, fakeAsync, flushMicrotasks } from '@angular/core/testing'
 import { CookieService } from 'ngx-cookie-service'
 import { FirefoxXsrfPreloadInterceptor } from './firefox-xsrf-preload.interceptor'
 import { RumJourneyEventService } from 'src/app/rum/service/customEvent.service'
+import { AppEventName } from 'src/app/register/app-event-names'
 import { WINDOW } from 'src/app/cdk/window'
 import { Platform } from '@angular/cdk/platform'
 
@@ -110,7 +111,7 @@ describe('FirefoxXsrfPreloadInterceptor', () => {
 
     expect(fetchSpy).toHaveBeenCalled()
     expect(recordSimpleEventSpy).toHaveBeenCalledWith(
-      'xsrf_missing_after_preload',
+      AppEventName.XsrfMissingAfterPreload,
       jasmine.objectContaining({
         error: 'xsrf_missing',
       })

src/app/core/lang-preload/firefox-xsrf-preload.interceptor.ts

@@ -9,6 +9,7 @@ import { Observable, Subject } from 'rxjs'
 import { switchMap, take } from 'rxjs/operators'
 import { CookieService } from 'ngx-cookie-service'
 import { RumJourneyEventService } from 'src/app/rum/service/customEvent.service'
+import { AppEventName } from 'src/app/register/app-event-names'
 import { WINDOW } from 'src/app/cdk/window'
 import { Platform } from '@angular/cdk/platform'
 
@@ -83,7 +84,7 @@ export class FirefoxXsrfPreloadInterceptor implements HttpInterceptor {
           if (!this.hasXsrfCookie()) {
             try {
               this._observability.recordSimpleEvent(
-                'xsrf_missing_after_preload',
+                AppEventName.XsrfMissingAfterPreload,
                 {
                   error: 'xsrf_missing',
                   errorDescription:

src/app/record/components/record-header/record-header.component.ts

@@ -32,6 +32,8 @@ import {
   AffiliationUIGroup,
   Affiliation,
 } from 'src/app/types/record-affiliation.endpoint'
+import { RumJourneyEventService } from 'src/app/rum/service/customEvent.service'
+import { AppEventName } from 'src/app/register/app-event-names'
 
 @Component({
   selector: 'app-record-header',
@@ -151,7 +153,8 @@ export class RecordHeaderComponent implements OnInit {
     private _compact: HeaderCompactService,
     private _togglz: TogglzService,
     private _router: Router,
-    private _affiliations: RecordAffiliationService
+    private _affiliations: RecordAffiliationService,
+    private _rumEvents: RumJourneyEventService
   ) {}
 
   ngOnInit(): void {
@@ -251,6 +254,9 @@ export class RecordHeaderComponent implements OnInit {
   }
   recordSummaryLinkClick() {
     const next = !this.recordSummaryOpen
+    this._rumEvents.recordSimpleEvent(AppEventName.RecordSummaryToggleClicked, {
+      expanded: next,
+    })
     this._state.setRecordSummaryOpen(next)
     this.recordSummaryOpenChange.emit(next)
   }

src/app/register/app-event-names.ts

@@ -0,0 +1,32 @@
+/**
+ * Central enum for all app observability event names (RUM / New Relic).
+ * Use with RumJourneyEventService.recordSimpleEvent() or .recordEvent().
+ */
+export enum AppEventName {
+  // ─── Simple events (recordSimpleEvent) ─────────────────────────────────────
+  RecordExpandFeaturedWorkClicked = 'record_expand_featured_work_clicked',
+  RecordSummaryToggleClicked = 'record_summary_toggle_clicked',
+  HttpError = 'http_error',
+  ClientError = 'client_error',
+  XsrfMissingAfterPreload = 'xsrf_missing_after_preload',
+
+  // ─── Orcid registration journey events ─────────────────────────────────────
+  StepASignInButtonClicked = 'step-a-sign-in-button-clicked',
+  StepANextButtonClicked = 'step-a-next-button-clicked',
+  StepBNextButtonClicked = 'step-b-next-button-clicked',
+  StepC2NextButtonClicked = 'step-c2-next-button-clicked',
+  StepC2SkipButtonClicked = 'step-c2-skip-button-clicked',
+  StepCNextButtonClicked = 'step-c-next-button-clicked',
+  StepDNextButtonClicked = 'step-d-next-button-clicked',
+  JourneyComplete = 'journey-complete',
+}
+
+/** Event name for step back button: `step-${step}-back-button-clicked` */
+export function stepBackButtonClickedEvent(step: string): string {
+  return `step-${step}-back-button-clicked`
+}
+
+/** Event name for step loaded: `step-${step}-loaded` */
+export function stepLoadedEvent(step: 'a' | 'b' | 'c2' | 'c' | 'd'): string {
+  return `step-${step}-loaded`
+}

src/app/register/register-observability.service.ts

@@ -7,6 +7,11 @@ import { RumJourneyEventService } from '../rum/service/customEvent.service'
 import { JourneyType } from '../rum/journeys/types'
 import { UntypedFormArray, UntypedFormGroup } from '@angular/forms'
 import { RegisterStateService } from './register-state.service'
+import {
+  AppEventName,
+  stepBackButtonClickedEvent,
+  stepLoadedEvent,
+} from './app-event-names'
 import init from 'helphero'
 @Injectable({
   providedIn: 'root',
@@ -24,22 +29,22 @@ export class RegisterObservabilityService {
     this._registrationStateService.getBackButtonClick().subscribe((step) => {
       this._observability.recordEvent(
         'orcid_registration',
-        `step-${step.step}-back-button-clicked`
+        stepBackButtonClickedEvent(step.step)
       )
     })
   }
 
   signInButtonClicked() {
     this._observability.recordEvent(
       'orcid_registration',
-      'step-a-sign-in-button-clicked'
+      AppEventName.StepASignInButtonClicked
     )
   }
 
   stepANextButtonClicked(form: UntypedFormGroup) {
     this._observability.recordEvent(
       'orcid_registration',
-      'step-a-next-button-clicked',
+      AppEventName.StepANextButtonClicked,
       {
         // List all form controls errors
         formValues: form.value,
@@ -61,7 +66,7 @@ export class RegisterObservabilityService {
   stepBNextButtonClicked(form: UntypedFormGroup) {
     this._observability.recordEvent(
       'orcid_registration',
-      'step-b-next-button-clicked',
+      AppEventName.StepBNextButtonClicked,
       {
         // List all form controls errors
         formValues: form.value,
@@ -77,7 +82,7 @@ export class RegisterObservabilityService {
   stepC2NextButtonClicked(form: UntypedFormGroup) {
     this._observability.recordEvent(
       'orcid_registration',
-      'step-c2-next-button-clicked',
+      AppEventName.StepC2NextButtonClicked,
       {
         // List all form controls errors
         formValues: form.value,
@@ -95,7 +100,7 @@ export class RegisterObservabilityService {
   stepC2SkipButtonClicked(form: UntypedFormGroup) {
     this._observability.recordEvent(
       'orcid_registration',
-      'step-c2-skip-button-clicked',
+      AppEventName.StepC2SkipButtonClicked,
       {
         // List all form controls errors
         formValues: form.value,
@@ -113,7 +118,7 @@ export class RegisterObservabilityService {
   stepCNextButtonClicked(form: UntypedFormGroup) {
     this._observability.recordEvent(
       'orcid_registration',
-      'step-c-next-button-clicked',
+      AppEventName.StepCNextButtonClicked,
       {
         // List all form controls errors
         formValues: form.value,
@@ -128,7 +133,7 @@ export class RegisterObservabilityService {
   stepDNextButtonClicked(form: UntypedFormGroup) {
     this._observability.recordEvent(
       'orcid_registration',
-      'step-d-next-button-clicked',
+      AppEventName.StepDNextButtonClicked,
       {
         // List all form controls errors
         formValues: form.value,
@@ -143,7 +148,10 @@ export class RegisterObservabilityService {
   }
 
   stepLoaded(step: 'a' | 'b' | 'c2' | 'c' | 'd') {
-    this._observability.recordEvent('orcid_registration', `step-${step}-loaded`)
+    this._observability.recordEvent(
+      'orcid_registration',
+      stepLoadedEvent(step)
+    )
   }
 
   initializeJourney(reactivation) {
@@ -158,7 +166,7 @@ export class RegisterObservabilityService {
   completeJourney(attributes: any = {}) {
     this._observability.recordEvent(
       'orcid_registration',
-      'journey-complete',
+      AppEventName.JourneyComplete,
       attributes
     )
     this._observability.finishJourney('orcid_registration')