From 0200a9e65b93a26a0557e07f81fca8b34a3fb4cc Mon Sep 17 00:00:00 2001
From: Camille Moinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Wed, 23 Aug 2023 10:25:30 +0200
Subject: [PATCH] (feat): turn abstract links into hyperlinks

---
 .../lib/metadata-info/linkify.directive.ts    | 11 ++-
 .../metadata-info.component.html              |  2 +-
 .../metadata-info.component.spec.ts           | 71 ++++++++++++++++++-
 .../metadata-info/metadata-info.component.ts  |  7 ++
 4 files changed, 81 insertions(+), 10 deletions(-)

diff --git a/libs/ui/elements/src/lib/metadata-info/linkify.directive.ts b/libs/ui/elements/src/lib/metadata-info/linkify.directive.ts
index 3ef699bad1..e213400499 100644
--- a/libs/ui/elements/src/lib/metadata-info/linkify.directive.ts
+++ b/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() {
diff --git a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html
index fe1fb2cf6a..806d7e6da9 100644
--- a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html
+++ b/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>
diff --git a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.spec.ts b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.spec.ts
index fbb3957396..143d87f182 100644
--- a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.spec.ts
+++ b/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,7 +74,6 @@ 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')
@@ -83,4 +81,73 @@ describe('MetadataInfoComponent', () => {
       })
     })
   })
+  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')
+      })
+    })
+  })
 })
diff --git a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts
index 3583dd03be..86cd1a790a 100644
--- a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts
+++ b/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>`
+    })
+  }
 }