[DSC-2901] edit: updated orcid rendering component with badge

Author: FrancescoMauto

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/orcid/orcid.component.html

@@ -10,14 +10,11 @@
     }
 
 
-    @if (hasOrcidBadge()) {
-      <img
-        placement="top"
-        ngbTooltip="{{ 'orcid.badge.tooltip' | translate }}"
-        class="orcid-icon"
-        alt="orcid-logo"
-        src="assets/images/orcid.logo.icon.svg"/>
-    }
+    <ds-orcid-badge-and-tooltip
+      class="ms-1"
+      [orcid]="metadataValue"
+      [authenticatedTimestamp]="orcidAuthenticatedTimestamp">
+    </ds-orcid-badge-and-tooltip>
 
   </span>
 </div>

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

@@ -1,117 +1,3 @@
-/*
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { By } from '@angular/platform-browser';
-
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-
-import { OrcidComponent } from './orcid.component';
-import { Item } from '../../../../../../../core/shared/item.model';
-import { TranslateLoaderMock } from '../../../../../../../shared/mocks/translate-loader.mock';
-import { DsDatePipe } from '../../../../../../pipes/ds-date.pipe';
-import { ConfigurationDataService } from '../../../../../../../core/data/configuration-data.service';
-import { createSuccessfulRemoteDataObject$ } from '../../../../../../../shared/remote-data.utils';
-import { MetadataBoxConfiguration } from '../../../../../../../core/layout/models/box.model';
-
-export const testItem: Item = Object.assign(new Item(), {
-  id: '0ec7ff22-f211-40ab-a69e-c819b0b1f357',
-  uuid: '0ec7ff22-f211-40ab-a69e-c819b0b1f357',
-  type: 'item',
-  metadata: {
-    'person.identifier.orcid': [
-      {
-        language: 'en_US',
-        value: '0000-0001-8918-3592'
-      }
-    ],
-    'dspace.orcid.authenticated': [
-      {
-        language: null,
-        value: 'authenticated'
-      }
-    ]
-  }
-});
-
-export const medataComponent: MetadataBoxConfiguration = {
-  id: 'testTagBox',
-  type: 'boxmetadataconfiguration',
-  rows: [{
-    style: 'row-style',
-    cells: [{
-      style: 'cell-style',
-      fields: [
-        {
-          metadata: 'person.identifier.orcid',
-          label: 'ORCID',
-          rendering: 'orcid',
-          fieldType: 'metadata',
-          labelAsHeading: true,
-          valuesInline: true
-        }
-      ]
-    }]
-  }]
-};
-
-describe('OrcidComponent', () => {
-  let component: OrcidComponent;
-  let fixture: ComponentFixture<OrcidComponent>;
-  let configurationDataService;
-
-  beforeEach(fakeAsync(() => {
-
-    configurationDataService = jasmine.createSpyObj('configurationDataService', {
-      findByPropertyName: createSuccessfulRemoteDataObject$({ values: ['https://sandbox.orcid.org'] })
-    });
-
-    TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot({
-        loader: {
-          provide: TranslateLoader,
-          useClass: TranslateLoaderMock
-        }
-      }), BrowserAnimationsModule],
-      declarations: [ OrcidComponent, DsDatePipe ],
-      providers: [ { provide: ConfigurationDataService, useValue: configurationDataService}]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(OrcidComponent);
-    component = fixture.componentInstance;
-    component.item = testItem;
-    component.field = medataComponent.rows[0].fields[0];
-    component.ngOnInit();
-    fixture.detectChanges();
-  });
-
-  it('check metadata rendering',  fakeAsync(() => {
-    tick();
-    fixture.detectChanges();
-    fixture.whenStable().then(() => {
-      const spanValueFound = fixture.debugElement.queryAll(By.css('span.txt-value'));
-      expect(spanValueFound.length).toBe(1);
-      expect(spanValueFound[0].nativeElement.textContent).toContain('0000-0001-8918-3592');
-
-      const orcidLinkFound = fixture.debugElement.queryAll(By.css('a'));
-      expect(orcidLinkFound.length).toBe(1);
-      expect(orcidLinkFound[0].nativeElement.href).toBe('https://sandbox.orcid.org/0000-0001-8918-3592');
-
-      const orcidIconFound = fixture.debugElement.queryAll(By.css('.orcid-icon'));
-      expect(orcidIconFound.length).toBe(1);
-      expect(orcidIconFound[0].nativeElement.src).toContain('assets/images/orcid.logo.icon.svg');
-
-      const spanLabelFound = fixture.debugElement.query(By.css('div.' + medataComponent.rows[0].fields[0].style));
-      const label: HTMLElement = spanLabelFound.nativeElement;
-      expect(label.textContent).toContain(medataComponent.rows[0].fields[0].label);
-    });
-
-  }));
-});
-*/
-
 import {
   ComponentFixture,
   fakeAsync,
@@ -131,6 +17,7 @@ import { LayoutField } from '../../../../../../../core/layout/models/box.model';
 import { Item } from '../../../../../../../core/shared/item.model';
 import { MetadataValue } from '../../../../../../../core/shared/metadata.models';
 import { TranslateLoaderMock } from '../../../../../../../shared/mocks/translate-loader.mock';
+import { OrcidBadgeAndTooltipComponent } from '../../../../../../../shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component';
 import { createSuccessfulRemoteDataObject$ } from '../../../../../../../shared/remote-data.utils';
 import { DsDatePipe } from '../../../../../../pipes/ds-date.pipe';
 import { FieldRenderingType } from '../field-rendering-type';
@@ -152,21 +39,13 @@ describe('OrcidComponent', () => {
     'place': 0,
   });
 
-  const testItem = Object.assign(new Item(),
-    {
-      type: 'item',
-      metadata: {
-        'person.identifier.orcid': [metadataValue],
-        'dspace.orcid.authenticated': [
-          {
-            language: null,
-            value: 'authenticated',
-          },
-        ],
-      },
-      uuid: 'test-item-uuid',
-    },
-  );
+  const authenticatedTimestamp = Object.assign(new MetadataValue(), {
+    'value': '2026-01-26T15:20:27.524758999',
+    'language': null,
+    'authority': null,
+    'confidence': -1,
+    'place': 0,
+  });
 
   const mockField: LayoutField = {
     'metadata': 'person.identifier.orcid',
@@ -180,7 +59,27 @@ describe('OrcidComponent', () => {
     'valuesInline': true,
   };
 
-  beforeEach(waitForAsync(() => {
+  /**
+   * Build a Person item optionally containing the `dspace.orcid.authenticated` metadata.
+   */
+  function buildItem(authenticated: boolean): Item {
+    const metadata: { [key: string]: MetadataValue[] } = {
+      'person.identifier.orcid': [metadataValue],
+    };
+    if (authenticated) {
+      metadata['dspace.orcid.authenticated'] = [authenticatedTimestamp];
+    }
+    return Object.assign(new Item(), {
+      type: 'item',
+      metadata,
+      uuid: 'test-item-uuid',
+    });
+  }
+
+  /**
+   * Configure the TestBed and create the component with the given item.
+   */
+  function setup(item: Item): void {
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot({
         loader: {
@@ -190,49 +89,94 @@ describe('OrcidComponent', () => {
       }), BrowserAnimationsModule, OrcidComponent, DsDatePipe],
       providers: [
         { provide: 'fieldProvider', useValue: mockField },
-        { provide: 'itemProvider', useValue: testItem },
+        { provide: 'itemProvider', useValue: item },
         { provide: 'metadataValueProvider', useValue: metadataValue },
         { provide: 'renderingSubTypeProvider', useValue: '' },
         { provide: 'tabNameProvider', useValue: '' },
         { provide: ConfigurationDataService, useValue: configurationDataService },
       ],
-    })
-      .compileComponents();
-  }));
+    }).compileComponents();
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(OrcidComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-  });
+  }
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+  describe('when the ORCID is authenticated', () => {
+    beforeEach(waitForAsync(() => {
+      setup(buildItem(true));
+    }));
 
-  it('check metadata rendering',  fakeAsync(() => {
-    tick();
-    fixture.detectChanges();
-    fixture.whenStable().then(() => {
-      const spanValueFound = fixture.debugElement.queryAll(By.css('span.txt-value'));
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('check metadata rendering', fakeAsync(() => {
+      tick();
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        const spanValueFound = fixture.debugElement.queryAll(By.css('span.txt-value'));
+        expect(spanValueFound.length).toBe(1);
+        expect(spanValueFound[0].nativeElement.textContent).toContain('0000-0001-8918-3592');
+
+        const orcidLinkFound = fixture.debugElement.queryAll(By.css('a'));
+        expect(orcidLinkFound.length).toBe(1);
+        expect(orcidLinkFound[0].nativeElement.href).toBe('https://sandbox.orcid.org/0000-0001-8918-3592');
+
+        const orcidIconFound = fixture.debugElement.queryAll(By.css('.orcid-icon'));
+        expect(orcidIconFound.length).toBe(1);
+        expect(orcidIconFound[0].nativeElement.src).toContain('assets/images/orcid.logo.icon.svg');
+      });
+    }));
+
+    it('check value style', (done) => {
+      const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
       expect(spanValueFound.length).toBe(1);
-      expect(spanValueFound[0].nativeElement.textContent).toContain('0000-0001-8918-3592');
+      done();
+    });
+
+    it('should render the ds-orcid-badge-and-tooltip component with the correct inputs', () => {
+      const badge = fixture.debugElement.query(By.directive(OrcidBadgeAndTooltipComponent));
+      expect(badge).toBeTruthy();
+      const badgeInstance = badge.componentInstance as OrcidBadgeAndTooltipComponent;
+      expect(badgeInstance.orcid).toBe(metadataValue);
+      expect(badgeInstance.authenticatedTimestamp).toBe(authenticatedTimestamp);
+    });
+
+    it('should expose the authenticated timestamp through orcidAuthenticatedTimestamp', () => {
+      expect(component.orcidAuthenticatedTimestamp).toBe(authenticatedTimestamp);
+      expect(component.hasOrcidBadge()).toBeTrue();
+    });
 
-      const orcidLinkFound = fixture.debugElement.queryAll(By.css('a'));
-      expect(orcidLinkFound.length).toBe(1);
-      expect(orcidLinkFound[0].nativeElement.href).toBe('https://sandbox.orcid.org/0000-0001-8918-3592');
+    it('should render the badge icon in full color (not greyed out)', () => {
+      const orcidIcon = fixture.debugElement.query(By.css('.orcid-icon'));
+      expect(orcidIcon).toBeTruthy();
+      expect(orcidIcon.nativeElement.classList).not.toContain('not-authenticated');
+    });
+  });
 
-      const orcidIconFound = fixture.debugElement.queryAll(By.css('.orcid-icon'));
-      expect(orcidIconFound.length).toBe(1);
-      expect(orcidIconFound[0].nativeElement.src).toContain('assets/images/orcid.logo.icon.svg');
+  describe('when the ORCID is not authenticated', () => {
+    beforeEach(waitForAsync(() => {
+      setup(buildItem(false));
+    }));
+
+    it('should still render the badge, without an authenticated timestamp', () => {
+      const badge = fixture.debugElement.query(By.directive(OrcidBadgeAndTooltipComponent));
+      expect(badge).toBeTruthy();
+      const badgeInstance = badge.componentInstance as OrcidBadgeAndTooltipComponent;
+      expect(badgeInstance.orcid).toBe(metadataValue);
+      expect(badgeInstance.authenticatedTimestamp).toBeUndefined();
     });
 
-  }));
+    it('should not expose an authenticated timestamp', () => {
+      expect(component.orcidAuthenticatedTimestamp).toBeUndefined();
+      expect(component.hasOrcidBadge()).toBeFalse();
+    });
 
-  it('check value style', (done) => {
-    const spanValueFound = fixture.debugElement.queryAll(By.css('.test-style-value'));
-    expect(spanValueFound.length).toBe(1);
-    done();
+    it('should render the badge icon greyed out (not-authenticated) but still visible', () => {
+      const orcidIcon = fixture.debugElement.query(By.css('.orcid-icon'));
+      expect(orcidIcon).toBeTruthy();
+      expect(orcidIcon.nativeElement.classList).toContain('not-authenticated');
+    });
   });
 });
-

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

@@ -4,7 +4,6 @@ import {
   Inject,
   OnInit,
 } from '@angular/core';
-import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import {
   TranslateModule,
   TranslateService,
@@ -18,6 +17,7 @@ import { ConfigurationProperty } from '../../../../../../../core/shared/configur
 import { Item } from '../../../../../../../core/shared/item.model';
 import { MetadataValue } from '../../../../../../../core/shared/metadata.models';
 import { getFirstSucceededRemoteDataPayload } from '../../../../../../../core/shared/operators';
+import { OrcidBadgeAndTooltipComponent } from '../../../../../../../shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component';
 import { RenderingTypeValueModelComponent } from '../rendering-type-value.model';
 
 /**
@@ -30,7 +30,7 @@ import { RenderingTypeValueModelComponent } from '../rendering-type-value.model'
   styleUrls: ['./orcid.component.scss'],
   imports: [
     AsyncPipe,
-    NgbTooltipModule,
+    OrcidBadgeAndTooltipComponent,
     TranslateModule,
   ],
 })
@@ -65,4 +65,11 @@ export class OrcidComponent extends RenderingTypeValueModelComponent implements
     return this.item.hasMetadata('dspace.orcid.authenticated');
   }
 
+  /**
+   * The metadata value holding the timestamp of when the ORCID was authenticated, if any.
+   */
+  public get orcidAuthenticatedTimestamp(): MetadataValue {
+    return this.item.firstMetadata('dspace.orcid.authenticated');
+  }
+
 }