[Datahub] Make abstract links as hyperlinks

libs/ui/elements/src/lib/metadata-info/linkify.directive.ts

@@ -1,16 +1,13 @@
 /* eslint-disable @angular-eslint/directive-selector */
-import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core'
+import { Directive, ElementRef, Renderer2, AfterViewInit } from '@angular/core'
 
 @Directive({
   selector: '[gnUiLinkify]',
 })
-export class GnUiLinkifyDirective implements OnInit {
+export class GnUiLinkifyDirective implements AfterViewInit {
   constructor(private el: ElementRef, private renderer: Renderer2) {}
-
-  ngOnInit() {
-    setTimeout(() => {
-      this.processLinks()
-    }, 0)
+  ngAfterViewInit() {
+    this.processLinks()
   }
 
   private processLinks() {

libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -8,7 +8,7 @@
   <gn-ui-content-ghost ghostClass="h-32" [showContent]="fieldReady('abstract')">
     <p
       class="whitespace-pre-line break-words"
-      [innerHTML]="metadata.abstract | safe: 'html'"
+      [innerHTML]="getAbstract() | safe: 'html'"
     ></p>
   </gn-ui-content-ghost>
 </div>

libs/ui/elements/src/lib/metadata-info/metadata-info.component.spec.ts

@@ -66,7 +66,6 @@ describe('MetadataInfoComponent', () => {
       fixture.detectChanges()
     })
     it('should not display a message for no usage or constraints', () => {
-      // Use waitForAsync to handle asynchronous changes in the DOM.
       fixture.whenStable().then(() => {
         const displayedElement =
           fixture.nativeElement.getElementsByClassName('noUsage')
@@ -75,12 +74,80 @@ describe('MetadataInfoComponent', () => {
     })
 
     it('should display the keywords section', () => {
-      // Use waitForAsync to handle asynchronous changes in the DOM.
       fixture.whenStable().then(() => {
         const displayedElement =
           fixture.nativeElement.querySelector('ng-container')
         expect(displayedElement).toBeTruthy()
       })
     })
   })
+  describe('When a section is not empty', () => {
+    beforeEach(() => {
+      component.metadata = {
+        id: '',
+        uuid: '',
+        title: '',
+        metadataUrl: '',
+        keywords: ['banana', 'pear'],
+        constraints: ['no usage'],
+      }
+      fixture.detectChanges()
+    })
+    it('should not display a message for no usage or constraints', () => {
+      fixture.whenStable().then(() => {
+        const displayedElement =
+          fixture.nativeElement.getElementsByClassName('noUsage')
+        expect(displayedElement).toBeFalsy()
+      })
+    })
+
+    it('should display the keywords section', () => {
+      fixture.whenStable().then(() => {
+        const displayedElement =
+          fixture.nativeElement.querySelector('ng-container')
+        expect(displayedElement).toBeTruthy()
+      })
+    })
+  })
+  describe('#abstract', () => {
+    describe('When abstract contains a link', () => {
+      beforeEach(() => {
+        component.metadata = {
+          id: '',
+          uuid: '',
+          title: '',
+          metadataUrl: '',
+          keywords: ['banana', 'pear'],
+          constraints: ['no usage'],
+          abstract: 'This is a text with a link http://www.google.com',
+        }
+        fixture.detectChanges()
+      })
+      it('should create a link in the abstract', () => {
+        const paragraph = component.getAbstract()
+        expect(paragraph).toContain('<a href="http://www.google.com"')
+        expect(paragraph).toContain(
+          '<mat-icon class="mat-icon !w-[12px] !h-[14px] !text-[14px] opacity-75 material-icons">open_in_new</mat-icon>'
+        )
+      })
+    })
+    describe('When abstract does not contain a link', () => {
+      beforeEach(() => {
+        component.metadata = {
+          id: '',
+          uuid: '',
+          title: '',
+          metadataUrl: '',
+          keywords: ['banana', 'pear'],
+          constraints: ['no usage'],
+          abstract: 'This is a text without a link',
+        }
+        fixture.detectChanges()
+      })
+      it('should not create a hyperlink or icon', () => {
+        const paragraph = component.getAbstract()
+        expect(paragraph).toEqual('This is a text without a link')
+      })
+    })
+  })
 })

libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts

@@ -30,4 +30,11 @@ export class MetadataInfoComponent {
   onKeywordClick(keyword: string) {
     this.keyword.emit(keyword)
   }
+
+  getAbstract() {
+    return this.metadata.abstract?.replace(/(\bhttps?:\/\/\S+\b)/g, (match) => {
+      return `<a href="${match}" target="_blank"
+                  class="text-primary cursor-pointer hover:underline">${match} <mat-icon class="mat-icon !w-[12px] !h-[14px] !text-[14px] opacity-75 material-icons">open_in_new</mat-icon></a>`
+    })
+  }
 }