Merged in task/dspace-cris-2024_02_x/DSC-2544 (pull request DSpace#4271)

Task/dspace cris 2024 02 x/DSC-2544

Approved-by: Andrea Barbasso

Author: FrancescoMolinaro

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

@@ -109,6 +109,10 @@ describe('LinkComponent', () => {
   describe('with sub-type label', () => {
     beforeEach(() => {
       component.renderingSubType = 'LABEL';
+      component.metadataValueProvider = Object.assign(new MetadataValue(), metadataValue, {
+        value: '[Default Label](http://rest.api/item/link/id)',
+      });
+      component.metadataValue = component.metadataValueProvider;
       spyOn(translateService, 'instant').and.returnValue(i18nLabel);
       fixture.detectChanges();
     });
@@ -239,4 +243,42 @@ describe('LinkComponent', () => {
       });
     });
   });
+
+  describe('parseLabelValue', () => {
+
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should correctly extract label and URL from [Label](URL) format', () => {
+      const input = '[My Label](https://example.com/path)';
+      const result = component.parseLabelValue(input);
+
+      expect(result).toEqual({
+        label: 'My Label',
+        value: 'https://example.com/path',
+      });
+    });
+
+    it('should return the same value if input does not match [Label](URL) format', () => {
+      const input = 'Just a plain URL';
+      const result = component.parseLabelValue(input);
+
+      expect(result).toEqual({
+        label: input,
+        value: input,
+      });
+    });
+
+    it('should handle empty string gracefully', () => {
+      const input = '';
+      const result = component.parseLabelValue(input);
+
+      expect(result).toEqual({
+        label: '',
+        value: '',
+      });
+    });
+
+  });
 });

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

@@ -65,7 +65,13 @@ export class LinkComponent extends RenderingTypeValueModelComponent implements O
    * Check if the metadata value is a valid URL
    */
   isValidUrl(): boolean {
-    const value = this.metadataValue.value.trim();
+    let value = this.metadataValue.value.trim();
+
+    // If the subtype is LABEL, the value is in [Label](URL) format — extract the URL part
+    if (hasValue(this.renderingSubType) && this.renderingSubType.toUpperCase() === TYPES.LABEL.toString()) {
+      const parsed = this.parseLabelValue(value);
+      value = parsed.value;
+    }
 
     // Comprehensive URL regex that matches:
     // - URLs with protocols (http, https, ftp, mailto, etc.)
@@ -89,16 +95,46 @@ export class LinkComponent extends RenderingTypeValueModelComponent implements O
       metadataValue = 'mailto:' + this.metadataValue.value;
       linkText = (hasValue(this.renderingSubType) &&
         this.renderingSubType.toUpperCase() === TYPES.EMAIL.toString()) ? this.metadataValue.value : this.translateService.instant(this.field.label);
+    } else if ((hasValue(this.renderingSubType) && this.renderingSubType.toUpperCase() === TYPES.LABEL.toString())) {
+      // Parse value in format [Label](URL)
+      const parsedValue = this.parseLabelValue(this.metadataValue.value);
+
+      metadataValue = this.getLinkWithProtocol(parsedValue.value);
+      linkText = parsedValue.label;
     } else {
-      const startsWithProtocol = [/^https?:\/\//, /^ftp:\/\//];
-      metadataValue = startsWithProtocol.some(rx => rx.test(this.metadataValue.value)) ? this.metadataValue.value : 'http://' + this.metadataValue.value;
-      linkText = (hasValue(this.renderingSubType) &&
-        this.renderingSubType.toUpperCase() === TYPES.LABEL.toString()) ? this.translateService.instant(this.field.label) : this.metadataValue.value;
+      // Use same value for link and label, correcting the protocol for link if needed
+      metadataValue = this.getLinkWithProtocol(this.metadataValue.value);
+      linkText = this.metadataValue.value;
     }
 
     return {
       href: metadataValue,
       text: linkText,
     };
   }
+
+  /**
+   * Exctract label and values for TYPES.LABEL
+   * @param value
+   */
+  parseLabelValue(input: string): { label: string; value: string } {
+    const match = input.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
+
+    if (!match) {
+      return {
+        label: input,
+        value: input,
+      };
+    }
+
+    return {
+      label: match[1],
+      value: match[2],
+    };
+  }
+
+  getLinkWithProtocol(link: string): string {
+    const startsWithProtocol = [/^https?:\/\//, /^ftp:\/\//];
+    return  startsWithProtocol.some(rx => rx.test(link)) ? link : 'http://' + link;
+  }
 }

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

@@ -1,5 +1,13 @@
 <div [class]="field.styleValue" [attr.lang]="metadataValue.language">
+  <ng-container *ngIf="isMetadataLink !== true; else linkTemplate">
     <span class="text-value">
       {{ value$ | async }}
     </span>
+  </ng-container>
+
+  <ng-template #linkTemplate>
+    <a [href]="metadataValue.value" class="text-value">
+      {{ value$ | async }}
+    </a>
+  </ng-template>
 </div>

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

@@ -15,6 +15,7 @@ import {
 import { AuthService } from '../../../../../../../core/auth/auth.service';
 import { LayoutField } from '../../../../../../../core/layout/models/box.model';
 import { Item } from '../../../../../../../core/shared/item.model';
+import { MetadataValue } from '../../../../../../../core/shared/metadata.models';
 import { VocabularyService } from '../../../../../../../core/submission/vocabularies/vocabulary.service';
 import { TranslateLoaderMock } from '../../../../../../../shared/mocks/translate-loader.mock';
 import { AuthServiceStub } from '../../../../../../../shared/testing/auth-service.stub';
@@ -194,4 +195,70 @@ describe('ValuepairComponent', () => {
 
   });
 
+  describe('when the metadata value is a link', () => {
+    const linkValue = 'https://example.com';
+    const testFieldLink: LayoutField = {
+      metadata: 'dc.identifier',
+      label: 'Identifier',
+      rendering: 'valuepair.' + VOCABULARY_NAME_2,
+      fieldType: 'METADATA',
+      metadataGroup: null,
+      labelAsHeading: false,
+      valuesInline: false,
+    };
+
+    const testItemLink = Object.assign(new Item(), {
+      allMetadata: () => [{ value: linkValue, authority: null }],
+    });
+
+    beforeEach(waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [
+          TranslateModule.forRoot({
+            loader: {
+              provide: TranslateLoader,
+              useClass: TranslateLoaderMock,
+            },
+          }),
+          ValuepairComponent,
+          DsDatePipe,
+        ],
+        providers: [
+          { provide: VocabularyService, useValue: vocabularyServiceSpy },
+          { provide: AuthService, useValue: authService },
+          { provide: 'fieldProvider', useValue: testFieldLink },
+          { provide: 'itemProvider', useValue: testItemLink },
+          { provide: 'metadataValueProvider', useValue: { value: linkValue, authority: null } },
+          { provide: 'renderingSubTypeProvider', useValue: '' }, // leave empty
+          { provide: 'tabNameProvider', useValue: '' },
+        ],
+      }).compileComponents();
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(ValuepairComponent);
+      component = fixture.componentInstance;
+      component.metadataValue = Object.assign(new MetadataValue(), {
+        value: linkValue,
+      });
+      component.value$.next(linkValue);
+
+      fixture.detectChanges();
+    });
+
+    it('should detect that the value is a link', () => {
+      expect(component.isMetadataLink).toBeTrue();
+    });
+
+    it('should render the value as an <a> tag', () => {
+      const compiled = fixture.nativeElement as HTMLElement;
+      const linkEl = compiled.querySelector('a.text-value') as HTMLAnchorElement;
+
+      expect(linkEl).toBeTruthy();
+      expect(linkEl.href).toBe(linkValue + '/');
+      expect(linkEl.textContent.trim()).toBe(linkValue);
+    });
+  });
+
+
 });

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

@@ -1,4 +1,7 @@
-import { AsyncPipe } from '@angular/common';
+import {
+  AsyncPipe,
+  NgIf,
+} from '@angular/common';
 import {
   Component,
   Inject,
@@ -32,7 +35,7 @@ import { RenderingTypeValueModelComponent } from '../rendering-type-value.model'
   templateUrl: './valuepair.component.html',
   styleUrls: ['./valuepair.component.scss'],
   standalone: true,
-  imports: [AsyncPipe],
+  imports: [AsyncPipe, NgIf],
 })
 export class ValuepairComponent extends RenderingTypeValueModelComponent implements OnInit {
 
@@ -41,6 +44,12 @@ export class ValuepairComponent extends RenderingTypeValueModelComponent impleme
    */
   value$: BehaviorSubject<string> = new BehaviorSubject<string>(null);
 
+  /**
+   * Whether the value is a link
+   */
+
+  isMetadataLink: boolean;
+
   constructor(
     @Inject('fieldProvider') public fieldProvider: LayoutField,
     @Inject('itemProvider') public itemProvider: Item,
@@ -68,11 +77,19 @@ export class ValuepairComponent extends RenderingTypeValueModelComponent impleme
       getFirstCompletedRemoteData(),
       getRemoteDataPayload(),
       getPaginatedListPayload(),
-      map((res) => res?.length > 0 ? res[0] : null),
+      map((res) => {
+        return res?.length > 0 ? res[0] : null;
+      }),
       map((res) => res?.display ?? this.metadataValue.value),
       take(1),
     ).subscribe(value => this.value$.next(value));
 
+    this.isMetadataLink = this.isLink(this.metadataValue.value);
+  }
+
+  isLink(input: string): boolean {
+    // check only values with protocol, if missing fix value in value-pair list
+    return input && (input.startsWith('http://') || input.startsWith('https://'));
   }
 
 }