Merged in gdpr-metrics_2023_02_x_DSC-1413 (pull request DSpace#1253)

Gdpr metrics 2023 02 x DSC-1413

Approved-by: Giuseppe Digilio

Author: FrancescoMolinaro

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

@@ -1,21 +1,22 @@
 import { Inject, Injectable, InjectionToken } from '@angular/core';
-import { combineLatest as observableCombineLatest, Observable, of as observableOf } from 'rxjs';
+import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, of as observableOf } from 'rxjs';
 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 { EPerson } from '../../core/eperson/models/eperson.model';
-import { KlaroService } from './klaro.service';
+import { CookieConsents, KlaroService } from './klaro.service';
 import { hasValue, isEmpty, isNotEmpty } from '../empty.util';
 import { CookieService } from '../../core/services/cookie.service';
 import { EPersonDataService } from '../../core/eperson/eperson-data.service';
 import cloneDeep from 'lodash/cloneDeep';
 import debounce from 'lodash/debounce';
 import { ANONYMOUS_STORAGE_NAME_KLARO, klaroConfiguration } from './klaro-configuration';
-import { Operation } from 'fast-json-patch';
+import { deepClone, Operation } from 'fast-json-patch';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { ConfigurationDataService } from '../../core/data/configuration-data.service';
 import { CAPTCHA_NAME } from '../../core/google-recaptcha/google-recaptcha.service';
+import isEqual from 'lodash/isEqual';
 
 /**
  * Metadata field to store a user's cookie consent preferences in
@@ -65,11 +66,19 @@ export class BrowserKlaroService extends KlaroService {
 
   private readonly GOOGLE_ANALYTICS_SERVICE_NAME = 'google-analytics';
 
+  private lastCookiesConsents: CookieConsents;
+
   /**
    * Initial Klaro configuration
    */
   klaroConfig = cloneDeep(klaroConfiguration);
 
+  /**
+   * Subject to emit updates in the consents
+   */
+  consentsUpdates$:  BehaviorSubject<CookieConsents> = new BehaviorSubject<CookieConsents>(null);
+
+
   constructor(
     private translateService: TranslateService,
     private authService: AuthService,
@@ -94,6 +103,20 @@ export class BrowserKlaroService extends KlaroService {
       this.klaroConfig.translations.zz.consentNotice.description = 'cookies.consent.content-notice.description.no-privacy';
     }
 
+    if (hasValue(environment.info.metricsConsents)) {
+      environment.info.metricsConsents.forEach((metric) => {
+        if (metric.enabled) {
+          this.klaroConfig.services.push(
+            {
+              name: metric.key,
+              purposes: ['thirdPartyJs'],
+              required: false,
+            }
+          );
+        }
+      });
+    }
+
     const hideGoogleAnalytics$ = this.configService.findByPropertyName(this.GOOGLE_ANALYTICS_KEY).pipe(
       getFirstCompletedRemoteData(),
       map(remoteData => !remoteData.hasSucceeded || !remoteData.payload || isEmpty(remoteData.payload.values)),
@@ -331,6 +354,23 @@ export class BrowserKlaroService extends KlaroService {
     return 'klaro-' + identifier;
   }
 
+  watchConsentUpdates(): void {
+    this.lazyKlaro.then(({getManager}) => {
+      const manager = getManager(this.klaroConfig);
+      const consentsSubject$ = this.consentsUpdates$;
+      let lastCookiesConsents = this.lastCookiesConsents;
+      manager.watch({
+        update(_, eventName, consents) {
+
+          if (eventName === 'consents' && !isEqual(consents, lastCookiesConsents)) {
+            lastCookiesConsents = deepClone(consents);
+            consentsSubject$.next(consents);
+          }
+        }
+      });
+    });
+  }
+
   /**
    * remove the google analytics from the services
    */

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

@@ -1,7 +1,9 @@
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs';
-
+import { BehaviorSubject, Observable } from 'rxjs';
+export interface CookieConsents {
+  [key: string]: boolean;
+}
 /**
  * Abstract class representing a service for handling Klaro consent preferences and UI
  */
@@ -10,15 +12,25 @@ export abstract class KlaroService {
   /**
    * Initializes the service
    */
-  abstract initialize();
+  abstract initialize(): void;
 
   /**
    * Shows a dialog with the current consent preferences
    */
-  abstract showSettings();
+  abstract showSettings(): void;
 
   /**
    * Return saved preferences stored in the klaro cookie
    */
   abstract getSavedPreferences(): Observable<any>;
+
+  /**
+   * Watch for changes in consents
+   */
+  abstract watchConsentUpdates(): void;
+
+  /**
+   * Subject to emit updates in the consents
+   */
+  abstract consentsUpdates$:  BehaviorSubject<CookieConsents>;
 }

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

@@ -1,10 +1,14 @@
 <div class="row d-flex align-items-center"
-     *ngIf="!failed && !(isHidden$ | async) && (remark | dsListMetricProps: 'data-badge-enabled':isListElement == true)">
+     *ngIf="(!failed &&
+      canLoadScript &&
+      !(isHidden$ | async) &&
+      (remark | dsListMetricProps: 'data-badge-enabled':isListElement == true))"
+>
   <div class="col-5 text-left">
     <div #metricChild>
       <div
         class="altmetric-embed"
-        [attr.data-hide-no-mentions]="remark | dsListMetricProps : 'data-hide-no-mentions' : isListElement"
+        [attr.data-hide-no-mentions]="visibleWithoutData ? false : (remark | dsListMetricProps : 'data-hide-no-mentions' : isListElement)"
         [attr.data-hide-less-than]="remark | dsListMetricProps : 'data-hide-less-than' : isListElement"
         [attr.data-badge-details]="remark | dsListMetricProps : 'data-badge-details' : isListElement"
         [attr.data-badge-type]="remark | dsListMetricProps : 'badgeType' : isListElement"
@@ -21,3 +25,9 @@
     </div>
   </div>
 </div>
+<div class="row d-flex align-items-center justify-content-center m-2"  *ngIf="!canLoadScript && !isListElement">
+  <div>
+    {{ "third-party-metrics-cookies.message" | translate: {metricType: metric.metricType | titlecase} }}
+    <div role="button" class="btn-link" (click)="requestSettingsConsent.emit(true)">{{"third-party-metrics-cookies.consent-settings" | translate}}</div>
+  </div>
+</div>

src/app/shared/metric/metric-dimensions/metric-dimensions.component.html

@@ -1,10 +1,14 @@
 <div class="row d-flex align-items-center"
-     *ngIf="!(isHidden$ | async) && !failed && (remark | dsListMetricProps: 'data-badge-enabled':isListElement == true)">
+     *ngIf="!(isHidden$ | async) &&
+      canLoadScript &&
+      !failed &&
+      (remark | dsListMetricProps: 'data-badge-enabled':isListElement == true)"
+>
   <div class="col-5 text-left">
     <div
       #metricChild
       class="__dimensions_badge_embed__"
-      [attr.data-hide-zero-citations]="remark | dsListMetricProps: 'data-hide-zero-citations':isListElement"
+      [attr.data-hide-zero-citations]="visibleWithoutData ? false : (remark | dsListMetricProps: 'data-hide-zero-citations':isListElement)"
       [attr.data-pmid]="
       (remark | dsListMetricProps: 'data-doi':isListElement)
           ? null
@@ -21,3 +25,9 @@
     </div>
   </div>
 </div>
+<div class="row d-flex align-items-center justify-content-center m-2"  *ngIf="!canLoadScript && !isListElement">
+  <div>
+    {{ "third-party-metrics-cookies.message" | translate: {metricType: metric.metricType | titlecase} }}
+    <div role="button" class="btn-link" (click)="requestSettingsConsent.emit(true)">{{"third-party-metrics-cookies.consent-settings" | translate}}</div>
+  </div>
+</div>

src/app/shared/metric/metric-loader/base-embedded-metric.component.ts

@@ -46,7 +46,7 @@ export abstract class BaseEmbeddedMetricComponent extends BaseMetricComponent im
    * When the html content has been initialized, initialize the script.
    */
   ngAfterViewInit() {
-    if (this.metric) {
+    if (this.metric && this.canLoadScript) {
       this.initScript();
     }
   }

src/app/shared/metric/metric-loader/base-metric.component.ts

@@ -20,11 +20,26 @@ export abstract class BaseMetricComponent {
 
   @Output() hide: EventEmitter<boolean> = new EventEmitter();
 
+  /**
+   * Emitter to trigger a new prompt of the cookies modal
+   */
+  @Output() requestSettingsConsent: EventEmitter<boolean> = new EventEmitter();
+
   /**
    * A boolean representing if the metric content is hidden or not
    */
   isHidden$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
+  /**
+   * A boolean to check if the component can load the associated script
+   */
+  canLoadScript = true;
+
+  /**
+   * A boolean to force rendering without data
+   */
+  visibleWithoutData = false;
+
   /**
    * Get the detail url form metric remark if present.
    */

src/app/shared/metric/metric-loader/metric-loader.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 
 import { of } from 'rxjs';
@@ -8,22 +8,48 @@ import { MetricLoaderService } from './metric-loader.service';
 import { metric1Mock } from '../../../cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metrics/cris-layout-metrics-box.component.spec';
 import { MetricStyleConfigPipe } from '../pipes/metric-style-config/metric-style-config.pipe';
 import SpyObj = jasmine.SpyObj;
+import { CookieConsents, KlaroService } from '../../cookies/klaro.service';
+import { BaseMetricComponent } from './base-metric.component';
+
+
 
 describe('MetricLoaderComponent', () => {
   let component: MetricLoaderComponent;
   let fixture: ComponentFixture<MetricLoaderComponent>;
   let metricLoaderService: SpyObj<MetricLoaderService>;
+  let klaroServiceSpy: jasmine.SpyObj<KlaroService>;
+
+
+  const consentsAccepted: CookieConsents = {
+    acknowledgement: true,
+    authentication: true,
+    preferences: true
+  };
+
 
   beforeEach(waitForAsync(() => {
+    (TestComponent as unknown as BaseMetricComponent).hide = new EventEmitter();
+    (TestComponent as unknown as BaseMetricComponent).requestSettingsConsent = new EventEmitter();
     metricLoaderService = jasmine.createSpyObj('MetricLoaderService', {
       loadMetricTypeComponent: jasmine.createSpy('loadMetricTypeComponent')
     });
     metricLoaderService.loadMetricTypeComponent.and.returnValue(of(TestComponent).toPromise());
 
+    klaroServiceSpy = jasmine.createSpyObj('KlaroService', {
+      getSavedPreferences: jasmine.createSpy('getSavedPreferences'),
+      watchConsentUpdates: jasmine.createSpy('watchConsentUpdates')
+    },{
+      consentsUpdates$: of(consentsAccepted)
+    });
+
+    klaroServiceSpy.getSavedPreferences.and.returnValue(of(consentsAccepted));
+
+
     TestBed.configureTestingModule({
       declarations: [ MetricLoaderComponent, MetricStyleConfigPipe ],
       providers: [
-        { provide: MetricLoaderService, useValue: metricLoaderService }
+        { provide: MetricLoaderService, useValue: metricLoaderService },
+        { provide: KlaroService, useValue: klaroServiceSpy },
       ],
     })
     .compileComponents();
@@ -32,14 +58,15 @@ describe('MetricLoaderComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(MetricLoaderComponent);
     component = fixture.componentInstance;
+    component.metric = metric1Mock;
     spyOn(component, 'loadComponent').and.callThrough();
 
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
-    expect(component.loadComponent).toHaveBeenCalledWith(component.metric);
+    expect(component.loadComponent).toHaveBeenCalledWith(component.metric, true);
   });
 
   describe('loadComponent', () => {
@@ -50,16 +77,48 @@ describe('MetricLoaderComponent', () => {
 
     it('should instantiate the component loaded from service', fakeAsync(() => {
 
-      component.loadComponent(metric1Mock);
+      component.loadComponent(metric1Mock, true);
       tick(); // wait loadMetricT
 
-      expect(metricLoaderService.loadMetricTypeComponent).toHaveBeenCalledWith(metric1Mock.metricType);
-      expect(component.instantiateComponent).toHaveBeenCalledWith(TestComponent, metric1Mock);
+      expect(metricLoaderService.loadMetricTypeComponent).toHaveBeenCalledWith(metric1Mock.metricType, true);
+      expect(component.instantiateComponent).toHaveBeenCalledWith(TestComponent, metric1Mock, true, undefined);
 
     }));
 
   });
 
+  describe('Script handling', () => {
+
+    beforeEach(() => {
+      klaroServiceSpy.getSavedPreferences.and.returnValue(of(consentsAccepted));
+    });
+
+    it('should instantiate the component without loading the script', fakeAsync(() => {
+
+      component.loadComponent(metric1Mock, false);
+      tick(); // wait loadMetricT
+
+      expect(metricLoaderService.loadMetricTypeComponent).toHaveBeenCalledWith(metric1Mock.metricType, false);
+      expect(((TestComponent as unknown as BaseMetricComponent).canLoadScript)).toBeFalsy();
+    }));
+
+  });
+
+
+  describe('getCanLoadScript', () => {
+
+    it('should return true for not restricted metrics', fakeAsync(() => {
+        expect((component as any).getCanLoadScript(consentsAccepted)).toBeTruthy();
+    }));
+
+    it('should return false for restricted metrics', fakeAsync(() => {
+      const consentRejected = {...consentsAccepted, acknowledgement: false};
+      component.metric = {...metric1Mock, metricType: 'altmetric'};
+      expect((component as any).getCanLoadScript(consentRejected)).toBeFalsy();
+    }));
+
+  });
+
 });
 
 // declare a test component
@@ -68,5 +127,6 @@ describe('MetricLoaderComponent', () => {
   template: ``
 })
 class TestComponent {
-
+  hide = new EventEmitter();
+  requestSettingsConsent = new EventEmitter();
 }