Merge pull request #3344 from 4Science/task/main/CST-15078

Add orcid icon with tooltip

src/app/entity-groups/research-entities/metadata-representations/person/person-item-metadata-list-element.component.html

@@ -12,4 +12,9 @@
   <a [routerLink]="[itemPageRoute]"
      [innerHTML]="mdRepresentation.getValue()"
      [ngbTooltip]="mdRepresentation.allMetadata(['person.jobTitle']).length > 0 ? descTemplate : null"></a>
+  <ds-orcid-badge-and-tooltip class="ml-1"
+                              *ngIf="mdRepresentation.firstMetadata('person.identifier.orcid')"
+                              [orcid]="mdRepresentation.firstMetadata('person.identifier.orcid')"
+                              [authenticatedTimestamp]="mdRepresentation.firstMetadata('dspace.orcid.authenticated')">
+  </ds-orcid-badge-and-tooltip>
 </ds-truncatable>

src/app/entity-groups/research-entities/metadata-representations/person/person-item-metadata-list-element.component.ts

@@ -7,13 +7,14 @@ import { RouterLink } from '@angular/router';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { ItemMetadataRepresentationListElementComponent } from '../../../../shared/object-list/metadata-representation-list-element/item/item-metadata-representation-list-element.component';
+import { OrcidBadgeAndTooltipComponent } from '../../../../shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component';
 import { TruncatableComponent } from '../../../../shared/truncatable/truncatable.component';
 
 @Component({
   selector: 'ds-person-item-metadata-list-element',
   templateUrl: './person-item-metadata-list-element.component.html',
   standalone: true,
-  imports: [NgIf, NgFor, TruncatableComponent, RouterLink, NgbTooltipModule],
+  imports: [NgIf, NgFor, TruncatableComponent, RouterLink, NgbTooltipModule, OrcidBadgeAndTooltipComponent],
 })
 /**
  * The component for displaying an item of the type Person as a metadata field

src/app/shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component.html

@@ -0,0 +1,11 @@
+<img placement="top"
+     [ngbTooltip]="orcidTooltipTemplate"
+     class="orcid-icon"
+     [ngClass]="{'not-authenticated': !authenticatedTimestamp}"
+     alt="ORCID {{ orcidTooltip }}"
+     src="assets/images/orcid.logo.icon.svg"
+     data-test="orcidIcon"/>
+
+<ng-template #orcidTooltipTemplate>
+    <span class="text-muted">{{ orcidTooltip }}</span>
+</ng-template>

src/app/shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component.scss

@@ -0,0 +1,11 @@
+:host {
+  display: inline-block;
+}
+
+.orcid-icon {
+  height: 1.2rem;
+
+  &.not-authenticated {
+    filter: grayscale(100%);
+  }
+}

src/app/shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component.spec.ts

@@ -0,0 +1,71 @@
+import {
+  NgClass,
+  NgIf,
+} from '@angular/common';
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+
+import { MetadataValue } from '../../core/shared/metadata.models';
+import { OrcidBadgeAndTooltipComponent } from './orcid-badge-and-tooltip.component';
+
+describe('OrcidBadgeAndTooltipComponent', () => {
+  let component: OrcidBadgeAndTooltipComponent;
+  let fixture: ComponentFixture<OrcidBadgeAndTooltipComponent>;
+  let translateService: TranslateService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        OrcidBadgeAndTooltipComponent,
+        NgbTooltipModule,
+        NgClass,
+        NgIf,
+      ],
+      providers: [
+        { provide: TranslateService, useValue: { instant: (key: string) => key } },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(OrcidBadgeAndTooltipComponent);
+    component = fixture.componentInstance;
+    translateService = TestBed.inject(TranslateService);
+
+    component.orcid = { value: '0000-0002-1825-0097' } as MetadataValue;
+    component.authenticatedTimestamp = { value: '2023-10-01' } as MetadataValue;
+
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set orcidTooltip when authenticatedTimestamp is provided', () => {
+    component.ngOnInit();
+    expect(component.orcidTooltip).toBe('person.orcid-tooltip.authenticated');
+  });
+
+  it('should set orcidTooltip when authenticatedTimestamp is not provided', () => {
+    component.authenticatedTimestamp = null;
+    component.ngOnInit();
+    expect(component.orcidTooltip).toBe('person.orcid-tooltip.not-authenticated');
+  });
+
+  it('should display the ORCID icon', () => {
+    const badgeIcon = fixture.debugElement.query(By.css('img[data-test="orcidIcon"]'));
+    expect(badgeIcon).toBeTruthy();
+  });
+
+  it('should display the ORCID icon in greyscale if there is no authenticated timestamp', () => {
+    component.authenticatedTimestamp = null;
+    fixture.detectChanges();
+    const badgeIcon = fixture.debugElement.query(By.css('img[data-test="orcidIcon"]'));
+    expect(badgeIcon.nativeElement.classList).toContain('not-authenticated');
+  });
+
+});

src/app/shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component.ts

@@ -0,0 +1,65 @@
+import {
+  NgClass,
+  NgIf,
+} from '@angular/common';
+import {
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+
+import { MetadataValue } from '../../core/shared/metadata.models';
+
+/**
+ * Component to display an ORCID badge with a tooltip.
+ * The tooltip text changes based on whether the ORCID is authenticated.
+ */
+@Component({
+  selector: 'ds-orcid-badge-and-tooltip',
+  standalone: true,
+  imports: [
+    NgIf,
+    NgbTooltipModule,
+    NgClass,
+  ],
+  templateUrl: './orcid-badge-and-tooltip.component.html',
+  styleUrl: './orcid-badge-and-tooltip.component.scss',
+})
+export class OrcidBadgeAndTooltipComponent implements OnInit {
+
+  /**
+   * The ORCID value to be displayed.
+   */
+  @Input() orcid: MetadataValue;
+
+  /**
+   * The timestamp indicating when the ORCID was authenticated.
+   */
+  @Input() authenticatedTimestamp: MetadataValue;
+
+  /**
+   * The tooltip text to be displayed.
+   */
+  orcidTooltip: string;
+
+  /**
+   * Constructor to inject the TranslateService.
+   * @param translateService - Service for translation.
+   */
+  constructor(
+    private translateService: TranslateService,
+  ) { }
+
+  /**
+   * Initializes the component.
+   * Sets the tooltip text based on the presence of the authenticated timestamp.
+   */
+  ngOnInit() {
+    this.orcidTooltip = this.authenticatedTimestamp ?
+      this.translateService.instant('person.orcid-tooltip.authenticated', { orcid: this.orcid.value }) :
+      this.translateService.instant('person.orcid-tooltip.not-authenticated', { orcid: this.orcid.value });
+  }
+
+}

src/assets/i18n/en.json5

@@ -5998,6 +5998,10 @@
 
   "person.orcid.registry.auth": "ORCID Authorizations",
 
+  "person.orcid-tooltip.authenticated": "{{orcid}}",
+
+  "person.orcid-tooltip.not-authenticated": "{{orcid}} (unconfirmed)",
+
   "home.recent-submissions.head": "Recent Submissions",
 
   "listable-notification-object.default-message": "This object couldn't be retrieved",