Merge pull request #2355 from ORCID/lmendoza/24-sep-bach-fixes

Observability
ORCID · Sep 25, 2024 · 2226d25 · 2226d25
2 parents b926894 + 9a7d9b0
commit 2226d25
Show file tree

Hide file tree

Showing 23 changed files with 509 additions and 54 deletions.
diff --git a/src/app/core/observability-events/observability-events.service.ts b/src/app/core/observability-events/observability-events.service.ts
@@ -2,7 +2,7 @@ import { Inject, Injectable } from '@angular/core'
 import { WINDOW } from 'src/app/cdk/window'
 import { environment } from 'src/environments/environment'
 
-export type journeyType = 'orcid_registration' | 'orcid_update_emails'
+export type JourneyType = 'orcid_registration' | 'orcid_update_emails'
 @Injectable({
   providedIn: 'root',
 })
@@ -18,7 +18,7 @@ export class CustomEventService {
    * @param journeyType The type of the journey (e.g., 'orcid_registration', 'orcid_update_emails').
    * @param attributes Additional attributes to store with the journey
    */
-  startJourney(journeyType: journeyType, attributes: any = {}): void {
+  startJourney(journeyType: JourneyType, attributes: any = {}): void {
     // Record the start time and initial attributes
     this.journeys[journeyType] = {
       startTime: Date.now(),
@@ -27,7 +27,7 @@ export class CustomEventService {
 
     if (environment.debugger) {
       console.debug(
-        `-> Journey "${journeyType}" started at ${this.journeys[journeyType].startTime}`
+        `-> Journey "${journeyType}" started at ${this.journeys[journeyType].startTime}`, attributes
       )
     }
   }
@@ -39,7 +39,7 @@ export class CustomEventService {
    * @param additionalAttributes Any additional attributes related to the event.
    */
   recordEvent(
-    journeyType: string,
+    journeyType: JourneyType,
     eventName: string,
     additionalAttributes: any = {}
   ): void {
@@ -64,7 +64,8 @@ export class CustomEventService {
 
     if (environment.debugger) {
       console.debug(
-        `-> Event "${eventName}" recorded for journey "${journeyType}" with elapsed time ${elapsedTime}ms`
+        `-> Event "${eventName}" recorded for journey "${journeyType}" with elapsed time ${elapsedTime}ms`,
+        eventAttributes
       )
     }
   }
@@ -97,8 +98,8 @@ export class CustomEventService {
     // Clean up the journey data
     delete this.journeys[journeyType]
 
-    console.log(
-      `Journey "${journeyType}" finished with elapsed time ${elapsedTime}ms`
+    console.debug(
+      `Journey "${journeyType}" finished with elapsed time ${elapsedTime}ms`, finalAttributes
     )
   }
 }
diff --git a/src/app/register2/components/form-current-employment/form-current-employment.component.ts b/src/app/register2/components/form-current-employment/form-current-employment.component.ts
@@ -1,4 +1,11 @@
-import { Component, forwardRef, Input, OnInit, ViewChild } from '@angular/core'
+import {
+  Component,
+  forwardRef,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core'
 import {
   FormBuilder,
   FormControl,
@@ -14,7 +21,7 @@ import {
 import { Register2Service } from 'src/app/core/register2/register2.service'
 import { OrcidValidators } from 'src/app/validators'
 
-import { first, switchMap, tap } from 'rxjs/operators'
+import { first, switchMap, takeUntil, tap } from 'rxjs/operators'
 import { ReactivationService } from '../../../core/reactivation/reactivation.service'
 import { ReactivationLocal } from '../../../types/reactivation.local'
 import { BaseForm } from '../BaseForm'
@@ -27,11 +34,12 @@ import {
   AffiliationType,
   Organization,
 } from 'src/app/types/record-affiliation.endpoint'
-import { EMPTY, Observable, of } from 'rxjs'
+import { EMPTY, Observable, of, Subject } from 'rxjs'
 import { RecordAffiliationService } from 'src/app/core/record-affiliations/record-affiliations.service'
 import { dateMonthYearValidator } from 'src/app/shared/validators/date/date.validator'
 import { RegisterStateService } from '../../register-state.service'
 import { OrgDisambiguated } from 'src/app/types'
+import { RegisterObservabilityService } from '../../register-observability.service'
 export class MyErrorStateMatcher implements ErrorStateMatcher {
   isErrorState(
     control: FormControl | null,
@@ -69,14 +77,18 @@ export class MyErrorStateMatcher implements ErrorStateMatcher {
     },
   ],
 })
-export class FormCurrentEmploymentComponent extends BaseForm implements OnInit {
+export class FormCurrentEmploymentComponent
+  extends BaseForm
+  implements OnInit, OnDestroy
+{
   // matcher = new MyErrorStateMatcher()
   selectedOrganizationFromDatabase: Organization
   displayOrganizationHint: boolean
   requireOrganizationDisambiguatedDataOnRefresh = false
   private _type: AffiliationType
   affiliationFound = false
   rorIdHasBeenMatched: boolean
+  destroy = new Subject()
 
   @Input()
   public get type(): AffiliationType {
@@ -85,7 +97,7 @@ export class FormCurrentEmploymentComponent extends BaseForm implements OnInit {
 
   filteredOptions: Observable<Organization[]>
 
-  @Input() nextButtonWasClicked: boolean
+  nextButtonWasClicked: boolean
   @Input() reactivation: ReactivationLocal
   @ViewChild(FormGroupDirective) formGroupDir: FormGroupDirective
   ariaLabelClearOrganization = $localize`:@@register.clearOrganization:Clear organization`
@@ -119,16 +131,33 @@ export class FormCurrentEmploymentComponent extends BaseForm implements OnInit {
     private _liveAnnouncer: LiveAnnouncer,
     private _recordAffiliationService: RecordAffiliationService,
     private _formBuilder: FormBuilder,
-    private registerStateService: RegisterStateService
+    private registerStateService: RegisterStateService,
+    private _registerObservabilityService: RegisterObservabilityService
   ) {
     super()
     this._platform.get().subscribe((platform) => {
       this.platform = platform
       this.isMobile = platform.columns4 || platform.columns8
     })
   }
+  ngOnDestroy(): void {
+    this.destroy.next()
+  }
 
   ngOnInit() {
+    this.registerStateService
+      .getNextButtonClickFor('c2')
+      .pipe(takeUntil(this.destroy))
+      .subscribe(() => {
+        this.nextButtonWasClicked = true
+        this._registerObservabilityService.stepC2NextButtonClicked(this.form)
+      })
+    this.registerStateService
+      .getSkipButtonClickFor('c2')
+      .pipe(takeUntil(this.destroy))
+      .subscribe(() => {
+        this._registerObservabilityService.stepC2SkipButtonClicked(this.form)
+      })
     this.registerStateService.matchOrganization$.subscribe((organization) => {
       this.organization = organization
       this.form.patchValue({

diff --git a/src/app/register2/components/form-password/form-password.component.ts b/src/app/register2/components/form-password/form-password.component.ts
@@ -3,6 +3,7 @@ import {
   Component,
   forwardRef,
   Input,
+  OnDestroy,
   OnInit,
   ViewChild,
 } from '@angular/core'
@@ -22,6 +23,10 @@ import { OrcidValidators } from 'src/app/validators'
 import { BaseForm } from '../BaseForm'
 import { LiveAnnouncer } from '@angular/cdk/a11y'
 import { environment } from 'src/environments/environment'
+import { RegisterObservabilityService } from '../../register-observability.service'
+import { RegisterStateService } from '../../register-state.service'
+import { Subject } from 'rxjs'
+import { takeUntil } from 'rxjs/operators'
 
 @Component({
   selector: 'app-form-password',
@@ -46,7 +51,7 @@ import { environment } from 'src/environments/environment'
   ],
   preserveWhitespaces: true,
 })
-export class FormPasswordComponent extends BaseForm implements OnInit {
+export class FormPasswordComponent extends BaseForm implements OnInit, OnDestroy {
   labelInfo = $localize`:@@register.ariaLabelInfoPassword:info about password`
   labelClose = $localize`:@@register.ariaLabelClose:close`
   labelConfirmPassword = $localize`:@@register.confirmYourPassword:Confirm your password`
@@ -63,20 +68,31 @@ export class FormPasswordComponent extends BaseForm implements OnInit {
   hasNumberPattern = HAS_NUMBER
   hasLetterOrSymbolPattern = HAS_LETTER_OR_SYMBOL
   @Input() personalData: RegisterForm
-  @Input() nextButtonWasClicked: boolean
+  nextButtonWasClicked: boolean
+
   currentValidate8orMoreCharactersStatus: boolean
   ccurentValidateAtLeastALetterOrSymbolStatus: boolean
   currentValidateAtLeastANumber: boolean
   passwordsValidAreValidAlreadyChecked: any
   _currentAccesibilityError: string
+  destroy = new Subject()
   constructor(
     private _register: Register2Service,
     private _liveAnnouncer: LiveAnnouncer,
-    private _changeDetectorRef: ChangeDetectorRef
+    private _changeDetectorRef: ChangeDetectorRef,
+    private _registerObservability: RegisterObservabilityService,
+    private _registerStateService: RegisterStateService
   ) {
     super()
   }
   ngOnInit() {
+    this._registerStateService
+      .getNextButtonClickFor('b')
+      .pipe(takeUntil(this.destroy))
+      .subscribe((value) => {
+        this.nextButtonWasClicked = true
+        this._registerObservability.stepBNextButtonClicked(this.form)
+      })
     this.form = new UntypedFormGroup(
       {
         password: new UntypedFormControl('', {
@@ -212,6 +228,7 @@ export class FormPasswordComponent extends BaseForm implements OnInit {
     }
     this._currentAccesibilityError = value
     if (!value) {
+      this._registerObservability.reportRegisterEvent('password_valid')
       this.announce(
         $localize`:@@register.allPasswordContrainsArMet:All password constraints are met`
       )
@@ -244,6 +261,7 @@ export class FormPasswordComponent extends BaseForm implements OnInit {
     const validStatus = this.confirmPasswordValid && this.passwordValid
 
     if (!this.passwordsValidAreValidAlreadyChecked && validStatus) {
+      this._registerObservability.reportRegisterEvent('password_match')
       this.announce(
         $localize`:@@register.passwordAreValid:Your passwords match`
       )
@@ -295,4 +313,8 @@ export class FormPasswordComponent extends BaseForm implements OnInit {
     }
     this._liveAnnouncer.announce(announcement, 'assertive')
   }
+
+  ngOnDestroy(): void {
+    this.destroy.next()
+  }
 }
diff --git a/src/app/register2/components/form-personal/form-personal.component.ts b/src/app/register2/components/form-personal/form-personal.component.ts
@@ -5,6 +5,7 @@ import {
   forwardRef,
   Inject,
   Input,
+  OnDestroy,
   OnInit,
   ViewChild,
 } from '@angular/core'
@@ -30,6 +31,7 @@ import {
   startWith,
   switchMap,
   take,
+  takeUntil,
 } from 'rxjs/operators'
 import { ReactivationService } from '../../../core/reactivation/reactivation.service'
 import { ReactivationLocal } from '../../../types/reactivation.local'
@@ -50,7 +52,9 @@ import { SignInService } from 'src/app/core/sign-in/sign-in.service'
 import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.service'
 import { ERROR_REPORT } from 'src/app/errors'
 import { RegisterStateService } from '../../register-state.service'
-export class MyErrorStateMatcher implements ErrorStateMatcher {
+import { RegisterObservabilityService } from '../../register-observability.service'
+import { Subject } from 'rxjs'
+export class MyErrorStateMatcher implements ErrorStateMatcher{
   isErrorState(
     control: FormControl | null,
     form: FormGroupDirective | NgForm | null
@@ -86,9 +90,11 @@ export class MyErrorStateMatcher implements ErrorStateMatcher {
     },
   ],
 })
-export class FormPersonalComponent extends BaseForm implements OnInit {
+export class FormPersonalComponent
+  extends BaseForm
+  implements OnInit, OnDestroy
+{
   matcher = new MyErrorStateMatcher()
-  @Input() nextButtonWasClicked: boolean
   @Input() reactivation: ReactivationLocal
   @ViewChild(FormGroupDirective) formGroupDir: FormGroupDirective
   emailPlaceholder = $localize`:@@register.emailPlaceholder:The email address you use most`
@@ -104,6 +110,8 @@ export class FormPersonalComponent extends BaseForm implements OnInit {
   undefinedEmail: boolean
   emailsAreValidAlreadyChecked: boolean
   registerBackendErrors: RegisterBackendErrors
+  nextButtonWasClicked: boolean
+  destroy = new Subject()
 
   constructor(
     private _register: Register2Service,
@@ -115,10 +123,14 @@ export class FormPersonalComponent extends BaseForm implements OnInit {
     private _signIn: SignInService,
     private _errorHandler: ErrorHandlerService,
     private _registerStateService: RegisterStateService,
-    @Inject(WINDOW) private window: Window
+    @Inject(WINDOW) private window: Window,
+    private _registerObservability: RegisterObservabilityService
   ) {
     super()
   }
+  ngOnDestroy(): void {
+    this.destroy.next()
+  }
 
   emails: UntypedFormGroup = new UntypedFormGroup({})
   additionalEmails: UntypedFormGroup = new UntypedFormGroup({
@@ -129,6 +141,13 @@ export class FormPersonalComponent extends BaseForm implements OnInit {
   })
 
   ngOnInit() {
+    this._registerStateService
+      .getNextButtonClickFor('a')
+      .pipe(takeUntil(this.destroy))
+      .subscribe((value) => {
+        this.nextButtonWasClicked = true
+        this._registerObservability.stepANextButtonClicked(this.form)
+      })
     this.emails = new UntypedFormGroup(
       {
         email: new UntypedFormControl('', {
@@ -312,7 +331,9 @@ export class FormPersonalComponent extends BaseForm implements OnInit {
     const validStatus = this.emailConfirmationValid && this.emailValid
     if (!this.emailsAreValidAlreadyChecked && validStatus) {
       this.announce($localize`:@@register.emailAreValid:Your emails match`)
+      this._registerObservability.reportRegisterEvent('emails_match')
     } else if (this.emailsAreValidAlreadyChecked && !validStatus) {
+      this._registerObservability.reportRegisterEvent('emails_do_not_match')
       this.announce(
         $localize`:@@register.emailAreNotValid:Your emails do not match`
       )

diff --git a/src/app/register2/components/form-visibility/form-visibility.component.ts b/src/app/register2/components/form-visibility/form-visibility.component.ts
@@ -1,4 +1,10 @@
-import { Component, DoCheck, forwardRef, OnInit } from '@angular/core'
+import {
+  Component,
+  DoCheck,
+  forwardRef,
+  OnDestroy,
+  OnInit,
+} from '@angular/core'
 import {
   NG_ASYNC_VALIDATORS,
   NG_VALUE_ACCESSOR,
@@ -11,6 +17,10 @@ import { VISIBILITY_OPTIONS } from 'src/app/constants'
 import { Register2Service } from 'src/app/core/register2/register2.service'
 
 import { BaseForm } from '../BaseForm'
+import { RegisterStateService } from '../../register-state.service'
+import { RegisterObservabilityService } from '../../register-observability.service'
+import { Subject } from 'rxjs'
+import { takeUntil } from 'rxjs/operators'
 
 @Component({
   selector: 'app-form-visibility',
@@ -36,19 +46,31 @@ import { BaseForm } from '../BaseForm'
 })
 export class FormVisibilityComponent
   extends BaseForm
-  implements OnInit, DoCheck
+  implements OnInit, DoCheck, OnDestroy
 {
   ariaLabelMoreInformationOnVisibility = $localize`:@@register.ariaLabelMoreInformationOnVisibility:More information on visibility settings (Opens in new tab)`
   visibilityOptions = VISIBILITY_OPTIONS
   errorState = false
   activitiesVisibilityDefault = new UntypedFormControl('', Validators.required)
+  destroy = new Subject()
   constructor(
     private _register: Register2Service,
-    private _errorStateMatcher: ErrorStateMatcher
+    private _errorStateMatcher: ErrorStateMatcher,
+    private _registerStateService: RegisterStateService,
+    private _registerObservability: RegisterObservabilityService
   ) {
     super()
   }
+  ngOnDestroy(): void {
+    this.destroy.next()
+  }
   ngOnInit() {
+    this._registerStateService
+      .getNextButtonClickFor('c')
+      .pipe(takeUntil(this.destroy))
+      .subscribe(() => {
+        this._registerObservability.stepCNextButtonClicked(this.form)
+      })
     this.form = new UntypedFormGroup({
       activitiesVisibilityDefault: this.activitiesVisibilityDefault,
     })

diff --git a/src/app/register2/components/step-a/step-a.component.html b/src/app/register2/components/step-a/step-a.component.html
@@ -50,7 +50,6 @@ <h2 class="orc-font-body-small" i18n="@@register.step1.3">
       <app-form-personal
         formControlName="personal"
         [reactivation]="reactivation"
-        [nextButtonWasClicked]="nextButtonWasClicked"
       >
       </app-form-personal>
       <div class="step-actions margin-top-12">