Merged in task/dspace-cris-2023_02_x/DSC-1794 (pull request DSpace#1972)

[DSC-1794] fix klaro manager multiple initialization

Approved-by: Andrea Barbasso

Author: FrancescoMolinaro

src/app/shared/cookies/browser-klaro.service.ts

@@ -3,7 +3,7 @@ import { BehaviorSubject, combineLatest as observableCombineLatest, Observable,
 import { AuthService } from '../../core/auth/auth.service';
 import { TranslateService } from '@ngx-translate/core';
 import { environment } from '../../../environments/environment';
-import { map, switchMap, take } from 'rxjs/operators';
+import { filter, map, switchMap, take } from 'rxjs/operators';
 import { EPerson } from '../../core/eperson/models/eperson.model';
 import { CookieConsents, KlaroService } from './klaro.service';
 import { hasValue, isEmpty, isNotEmpty } from '../empty.util';
@@ -65,9 +65,6 @@ export class BrowserKlaroService extends KlaroService {
   private readonly REGISTRATION_VERIFICATION_ENABLED_KEY = 'registration.verification.enabled';
 
   private readonly GOOGLE_ANALYTICS_SERVICE_NAME = 'google-analytics';
-
-  private lastCookiesConsents: CookieConsents;
-
   /**
    * Initial Klaro configuration
    */
@@ -77,8 +74,21 @@ export class BrowserKlaroService extends KlaroService {
    * Subject to emit updates in the consents
    */
   consentsUpdates$:  BehaviorSubject<CookieConsents> = new BehaviorSubject<CookieConsents>(null);
+  /**
+   * Subject to emit initialization
+   */
+  initialized$:  BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
-
+  /**
+   * Boolean to check if a new watch method from the manager needs to be fired
+   * @private
+   */
+  private isKlaroManagerWatching = false;
+  /**
+   * Boolean to check if service has been initialized
+   * @private
+   */
+  private initialized = false;
   constructor(
     private translateService: TranslateService,
     private authService: AuthService,
@@ -180,8 +190,16 @@ export class BrowserKlaroService extends KlaroService {
         this.translateConfiguration();
 
         this.klaroConfig.services = this.filterConfigServices(servicesToHide);
-        this.lazyKlaro.then(({ setup }) => setup(this.klaroConfig));
+        this.lazyKlaro.then(({ setup }) => {
+          setup(this.klaroConfig);
+          this.initialized = true;
+          this.initialized$.next(this.initialized);
+        });
       });
+
+    this.consentsUpdates$.pipe(
+      filter(() => this.initialized)
+    ).subscribe((consents) => this.isKlaroManagerWatching = hasValue(consents));
   }
 
   /**
@@ -366,15 +384,18 @@ export class BrowserKlaroService extends KlaroService {
   }
 
   watchConsentUpdates(): void {
+    if (this.isKlaroManagerWatching || !this.initialized) {
+      return;
+    }
+
     this.lazyKlaro.then(({getManager}) => {
       const manager = getManager(this.klaroConfig);
       const consentsSubject$ = this.consentsUpdates$;
-      let lastCookiesConsents = this.lastCookiesConsents;
+      let lastCookiesConsents;
 
       consentsSubject$.next(manager.consents);
       manager.watch({
         update(_, eventName, consents) {
-
           if (eventName === 'consents' && !isEqual(consents, lastCookiesConsents)) {
             lastCookiesConsents = deepClone(consents);
             consentsSubject$.next(consents);

src/app/shared/cookies/klaro.service.ts

@@ -33,4 +33,8 @@ export abstract class KlaroService {
    * Subject to emit updates in the consents
    */
   abstract consentsUpdates$:  BehaviorSubject<CookieConsents>;
+  /**
+   * Subject to emit initialization
+   */
+  abstract initialized$:  BehaviorSubject<boolean>;
 }

src/app/shared/datadog-rum/browser-datadog-rum.service.ts

@@ -2,11 +2,11 @@ import { Injectable } from '@angular/core';
 import { environment } from '../../../environments/environment';
 import { datadogRum } from '@datadog/browser-rum';
 import { CookieConsents, KlaroService } from '../cookies/klaro.service';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, Observable, switchMap } from 'rxjs';
 import { createSelector, Store } from '@ngrx/store';
 import { setDatadogRumStatusAction } from './datadog-rum.actions';
 import { DatadogRumState } from './datadog-rum.reducer';
-import { distinctUntilChanged, take } from 'rxjs/operators';
+import { distinctUntilChanged, filter, take, tap } from 'rxjs/operators';
 import { coreSelector } from '../../core/core.selectors';
 import { CoreState } from '../../core/core-state.model';
 import { DatadogRumService } from './datadog-rum.service';
@@ -22,12 +22,18 @@ export class BrowserDatadogRumService extends DatadogRumService {
     private store: Store
   ) {
     super();
+    this.consentsUpdates$ = this.klaroService.consentsUpdates$;
   }
 
   initDatadogRum() {
-    this.klaroService.watchConsentUpdates();
-    this.consentsUpdates$ = this.klaroService.consentsUpdates$;
-    this.consentsUpdates$.subscribe(savedPreferences => {
+    this.klaroService.initialized$.pipe(
+      filter(initalized => initalized),
+      take(1),
+      tap(() => {
+        this.klaroService.watchConsentUpdates();
+      }),
+      switchMap(() => this.consentsUpdates$)
+    ).subscribe(savedPreferences => {
       this.getDatadogRumState().subscribe((state) => {
         if (savedPreferences?.datadog &&
           environment.datadogRum?.clientToken && environment.datadogRum?.applicationId &&

src/app/shared/datadog-rum/datadog-rum.service.spec.ts

@@ -28,7 +28,8 @@ describe('DatadogRumService', () => {
     getSavedPreferences: jasmine.createSpy('getSavedPreferences'),
     watchConsentUpdates: jasmine.createSpy('watchConsentUpdates')
   }, {
-    consentsUpdates$: of(consentsAccepted)
+    consentsUpdates$: of(consentsAccepted),
+    initialized$: of(true),
   });
 
   const datadogRumEnvironmentOptions = {

src/app/shared/metric/metric-altmetric/metric-altmetric.component.ts

@@ -40,9 +40,11 @@ export class MetricAltmetricComponent extends BaseEmbeddedMetricComponent implem
   }
 
   ngAfterViewInit(): void {
-    // Show the altmetric label only when the altmetric component is ready
-    this.renderer.listen(this.metricChild.nativeElement, 'altmetric:show', () => {
-      this.showAltmetricLabel$.next(true);
-    });
+    if (hasValue(this.metricChild?.nativeElement)) {
+      // Show the altmetric label only when the altmetric component is ready
+      this.renderer.listen(this.metricChild.nativeElement, 'altmetric:show', () => {
+        this.showAltmetricLabel$.next(true);
+      });
+    }
   }
 }