[DSC-2544] fix link.label and improve valuepair

Author: FrancescoMolinaro

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

@@ -239,4 +239,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

@@ -84,21 +84,51 @@ export class LinkComponent extends RenderingTypeValueModelComponent implements O
     let linkText: string;
     let metadataValue: string;
 
-    if (hasValue(this.renderingSubType) && this.renderingSubType.toUpperCase() === TYPES.EMAIL.toString()) {
-      this.isEmail = true;
-      metadataValue = 'mailto:' + this.metadataValue.value;
-      linkText = (hasValue(this.renderingSubType) &&
-        this.renderingSubType.toUpperCase() === TYPES.EMAIL.toString()) ? this.metadataValue.value : this.translateService.instant(this.field.label);
+    if (hasValue(this.renderingSubType) && this.renderingSubType.toUpperCase() === TYPES.EMAIL) {
+        this.isEmail = true;
+        metadataValue = 'mailto:' + this.metadataValue.value;
+        linkText = (hasValue(this.renderingSubType) &&
+        this.renderingSubType.toUpperCase() === TYPES.EMAIL) ? this.metadataValue.value : this.translateService.instant(this.field.label);
+    } else if ((hasValue(this.renderingSubType) && this.renderingSubType.toUpperCase() === TYPES.LABEL)) {
+        // 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>
 </div>
+
+<ng-template #linkTemplate>
+    <a [href]="metadataValue.value" class="text-value">
+      {{ value$ | async }}
+    </a>
+</ng-template>

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

@@ -194,4 +194,69 @@ 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
+            }
+          }),
+        ],
+        declarations: [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;
+
+      // Manually emit the value since vocabulary service won't emit
+      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 + '/'); // Browser adds trailing slash
+      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

@@ -41,6 +41,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 +74,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://'));
   }
 
 }