DSC-1522: implement unified text for blocked third-party metrics

Author: FrancescoMolinaro

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/thumbnail/thumbnail.component.spec.ts

@@ -152,7 +152,7 @@ describe('ThumbnailComponent', () => {
       }));
 
       it('should show default thumbnail', () => {
-        expect(component.default).toBe('assets/images/person-placeholder.svg');
+        expect(component.default).toBe('assets/images/file-placeholder.svg');
       });
 
     });
@@ -172,7 +172,7 @@ describe('ThumbnailComponent', () => {
       }));
 
       it('should show default thumbnail', () => {
-        expect(component.default).toBe('assets/images/person-placeholder.svg');
+        expect(component.default).toBe('assets/images/file-placeholder.svg');
       });
 
     });
@@ -239,7 +239,7 @@ describe('ThumbnailComponent', () => {
       });
 
       it('should show default thumbnail', () => {
-        expect(component.default).toBe('assets/images/person-placeholder.svg');
+        expect(component.default).toBe('assets/images/file-placeholder.svg');
       });
 
     });
@@ -254,7 +254,7 @@ describe('ThumbnailComponent', () => {
       });
 
       it('should not show bitstream content image src but the default image', () => {
-        expect(component.default).toBe('assets/images/person-placeholder.svg');
+        expect(component.default).toBe('assets/images/file-placeholder.svg');
       });
 
     });
@@ -269,7 +269,7 @@ describe('ThumbnailComponent', () => {
       });
 
       it('should not show thumbnail content image src but the default image', () => {
-        expect(component.default).toBe('assets/images/person-placeholder.svg');
+        expect(component.default).toBe('assets/images/file-placeholder.svg');
       });
 
     });
@@ -284,7 +284,7 @@ describe('ThumbnailComponent', () => {
       });
 
       it('should not show thumbnail content image src but the default image', () => {
-        expect(component.default).toBe('assets/images/person-placeholder.svg');
+        expect(component.default).toBe('assets/images/file-placeholder.svg');
       });
 
     });

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

@@ -362,6 +362,8 @@ export class BrowserKlaroService extends KlaroService {
       const manager = getManager(this.klaroConfig);
       const consentsSubject$ = this.consentsUpdates$;
       let lastCookiesConsents = this.lastCookiesConsents;
+
+      consentsSubject$.next(manager.consents);
       manager.watch({
         update(_, eventName, consents) {
 

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

@@ -17,6 +17,7 @@ import { hasValue } from '../../empty.util';
 import { BrowserKlaroService, CookieConsents } from '../../cookies/browser-klaro.service';
 import { KlaroService } from '../../cookies/klaro.service';
 import {  startWith } from 'rxjs/operators';
+import { environment } from '../../../../environments/environment';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -48,7 +49,7 @@ export class MetricLoaderComponent implements OnInit, OnDestroy {
 
   settingsSubscription: Subscription;
 
-  private thirdPartyMetrics = ['plumX', 'altmetric', 'dimensions'];
+  private thirdPartyMetrics = environment.metricsConsents.map(metrics => metrics.key);
 
   private browserKlaroService: BrowserKlaroService;
 

src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html

@@ -13,6 +13,10 @@
   <div [ngClass]="showThumbnails ? 'col-9 col-xl-10' : 'col-12'">
     <div class="d-flex justify-content-between">
       <div class="flex-fill">
+        <small class="d-flex text-muted" *ngIf="!(hasLoadedThirdPartyMetrics$ | async) && showMetrics">
+          {{ "third-party-metrics-blocked" | translate }}&nbsp;
+          <div role="button" class="btn-link" (click)="showSettings()">{{ "third-party-metrics-cookies.consent-settings" | translate }}</div>
+        </small>
         <div class="d-flex">
           <ds-themed-badges *ngIf="showLabel" [object]="dso" [context]="context" [showAccessStatus]="true"></ds-themed-badges>
         </div>

src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.spec.ts

@@ -11,6 +11,7 @@ import { DSONameService } from '../../../../../../core/breadcrumbs/dso-name.serv
 import { DSONameServiceMock, UNDEFINED_NAME } from '../../../../../mocks/dso-name.service.mock';
 import { VarDirective } from '../../../../../utils/var.directive';
 import { APP_CONFIG } from '../../../../../../../config/app-config.interface';
+import { TranslateModule } from '@ngx-translate/core';
 
 let publicationListElementComponent: ItemSearchResultListElementComponent;
 let fixture: ComponentFixture<ItemSearchResultListElementComponent>;
@@ -188,13 +189,13 @@ const enviromentNoThumbs = {
 describe('ItemSearchResultListElementComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
       declarations: [ItemSearchResultListElementComponent, TruncatePipe, VarDirective],
       providers: [
         { provide: TruncatableService, useValue: {} },
         { provide: DSONameService, useClass: DSONameServiceMock },
         { provide: APP_CONFIG, useValue: environmentUseThumbs }
       ],
-
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(ItemSearchResultListElementComponent, {
       set: { changeDetection: ChangeDetectionStrategy.Default }
@@ -371,6 +372,7 @@ describe('ItemSearchResultListElementComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
       declarations: [ItemSearchResultListElementComponent, TruncatePipe],
       providers: [
         {provide: TruncatableService, useValue: {}},

src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { AfterViewInit, Component, Inject, Input, OnInit, Optional } from '@angular/core';
 import {
   listableObjectComponent
 } from '../../../../../object-collection/shared/listable-object/listable-object.decorator';
@@ -9,6 +9,14 @@ import { Item } from '../../../../../../core/shared/item.model';
 import { getItemPageRoute } from '../../../../../../item-page/item-page-routing-paths';
 import { Context } from '../../../../../../core/shared/context.model';
 import { environment } from '../../../../../../../environments/environment';
+import { BrowserKlaroService } from '../../../../../cookies/browser-klaro.service';
+import { KlaroService } from '../../../../../cookies/klaro.service';
+import { combineLatest, Observable } from 'rxjs';
+import { TruncatableService } from '../../../../../truncatable/truncatable.service';
+import { DSONameService } from '../../../../../../core/breadcrumbs/dso-name.service';
+import { APP_CONFIG, AppConfig } from '../../../../../../../config/app-config.interface';
+import { getFirstSucceededRemoteListPayload } from '../../../../../../core/shared/operators';
+import { map } from 'rxjs/operators';
 
 @listableObjectComponent('PublicationSearchResult', ViewMode.ListElement)
 @listableObjectComponent(ItemSearchResult, ViewMode.ListElement)
@@ -21,7 +29,7 @@ import { environment } from '../../../../../../../environments/environment';
 /**
  * The component for displaying a list element for an item search result of the type Publication
  */
-export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> implements OnInit {
+export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> implements OnInit, AfterViewInit {
 
   /**
    * Whether to show the metrics badges
@@ -35,10 +43,57 @@ export class ItemSearchResultListElementComponent extends SearchResultListElemen
 
   authorMetadata = environment.searchResult.authorMetadata;
 
+  hasLoadedThirdPartyMetrics$: Observable<boolean>;
+
+  private thirdPartyMetrics = environment.metricsConsents.map(metrics => metrics.key);
+
+  private browserKlaroService: BrowserKlaroService;
+
+  constructor(
+    protected truncatableService: TruncatableService,
+    public dsoNameService: DSONameService,
+    @Inject(APP_CONFIG) protected appConfig?: AppConfig,
+    @Optional() private klaroService?: KlaroService,
+  ) {
+    super(truncatableService, dsoNameService);
+    this.browserKlaroService = (this.klaroService as BrowserKlaroService);
+  }
+
   ngOnInit(): void {
     super.ngOnInit();
     this.showThumbnails = this.showThumbnails ?? this.appConfig.browseBy.showThumbnails;
     this.itemPageRoute = getItemPageRoute(this.dso);
   }
 
+  /**
+   * Check if item has Third-party metrics blocked by consents
+   */
+  ngAfterViewInit() {
+    if (this.showMetrics && this.browserKlaroService) {
+      this.browserKlaroService.watchConsentUpdates();
+
+      this.hasLoadedThirdPartyMetrics$ = combineLatest([
+        this.browserKlaroService.consentsUpdates$,
+        this.dso.metrics?.pipe(
+          getFirstSucceededRemoteListPayload(),
+          map(metrics => {
+            return metrics.filter(metric => this.thirdPartyMetrics.includes(metric.metricType));
+          })
+        )
+      ]).pipe(
+        map(([consents, metrics]) => {
+          return metrics.reduce((previous, current) => {
+            return consents[current.metricType] && previous;
+          }, true);
+        })
+      );
+    }
+  }
+
+  /**
+   * Prompt user for consents settings
+   */
+  showSettings() {
+    this.browserKlaroService.showSettings();
+  }
 }

src/assets/i18n/en.json5

@@ -7308,4 +7308,6 @@
   "third-party-metrics-cookies.message": "{{ metricType }} badge is blocked by your ",
 
   "third-party-metrics-cookies.consent-settings": "consent settings",
+
+  "third-party-metrics-blocked": "Some of the metrics are blocked by your",
 }