From 7a1d31952f733644c82570e20c8aef11f3aeed8d Mon Sep 17 00:00:00 2001
From: Camille Moinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Wed, 23 Aug 2023 10:15:00 +0200
Subject: [PATCH] (feat): make abstract links as hyperlinks

---
 .../lib/metadata-info/linkify.directive.ts    | 11 ++-
 .../metadata-info.component.html              | 44 +++---------
 .../metadata-info.component.spec.ts           | 71 ++++++++++++++++++-
 .../metadata-info/metadata-info.component.ts  |  7 ++
 4 files changed, 90 insertions(+), 43 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..49ee82ace6 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
@@ -1,15 +1,9 @@
-<p
-  class="text-[28px] text-title text-center mb-6 font-title sm:text-left"
-  translate
->
+<p class="text-[28px] text-title text-center mb-6 font-title sm:text-left" translate>
   record.metadata.about
 </p>
 <div class="mb-6 md-description sm:mb-4 sm:pr-16">
   <gn-ui-content-ghost ghostClass="h-32" [showContent]="fieldReady('abstract')">
-    <p
-      class="whitespace-pre-line break-words"
-      [innerHTML]="metadata.abstract | safe: 'html'"
-    ></p>
+    <p class="whitespace-pre-line break-words" [innerHTML]="getAbstract() | safe: 'html'"></p>
   </gn-ui-content-ghost>
 </div>
 
@@ -18,26 +12,16 @@
     record.metadata.keywords
   </p>
   <div class="mb-9 sm:mb-16">
-    <gn-ui-badge
-      class="inline-block mr-2 mb-2 lowercase"
-      (click)="onKeywordClick(keyword)"
-      [clickable]="true"
-      *ngFor="let keyword of metadata.keywords"
-      >{{ keyword }}</gn-ui-badge
-    >
+    <gn-ui-badge class="inline-block mr-2 mb-2 lowercase" (click)="onKeywordClick(keyword)" [clickable]="true"
+      *ngFor="let keyword of metadata.keywords">{{ keyword }}</gn-ui-badge>
   </div>
 </ng-container>
 
-<gn-ui-expandable-panel
-  *ngIf="metadata.lineage"
-  [title]="'record.metadata.origin' | translate"
->
+<gn-ui-expandable-panel *ngIf="metadata.lineage" [title]="'record.metadata.origin' | translate">
   <p class="mb-5 pt-4 whitespace-pre-line break-words" gnUiLinkify>
     {{ metadata.lineage }}
   </p>
-  <div
-    class="py-4 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-[10px] gap-x-[20px] text-gray-700 info-grid"
-  >
+  <div class="py-4 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-[10px] gap-x-[20px] text-gray-700 info-grid">
     <div *ngIf="metadata.updatedOn">
       <p class="text-sm" translate>record.metadata.updatedOn</p>
       <p class="text-primary font-medium mt-2">
@@ -58,10 +42,7 @@
     </div>
   </div>
 </gn-ui-expandable-panel>
-<gn-ui-expandable-panel
-  *ngIf="hasUsage"
-  [title]="'record.metadata.usage' | translate"
->
+<gn-ui-expandable-panel *ngIf="hasUsage" [title]="'record.metadata.usage' | translate">
   <div class="py-4 px-6 rounded bg-gray-100 text-gray-700 flex flex-wrap gap-2">
     <gn-ui-badge *ngIf="metadata.isOpenData">
       <span translate>record.metadata.isOpenData</span>
@@ -74,17 +55,12 @@
     </span>
   </div>
 </gn-ui-expandable-panel>
-<gn-ui-expandable-panel
-  *ngIf="landingPages && landingPages.length > 0"
-  [title]="'record.metadata.details' | translate"
->
+<gn-ui-expandable-panel *ngIf="landingPages && landingPages.length > 0" [title]="'record.metadata.details' | translate">
   <div class="py-5 px-5 rounded bg-gray-100 text-gray-700">
     <p class="text-sm" translate>record.metadata.sheet</p>
     <a [href]="landingPages[0].url" target="_blank">
-      <mat-icon class="inline-block align-bottom pt-1.5 text-xs text-black"
-        >open_in_new</mat-icon
-      >
+      <mat-icon class="inline-block align-bottom pt-1.5 text-xs text-black">open_in_new</mat-icon>
       <span class="text-primary">{{ landingPages[0].url }}</span>
     </a>
   </div>
-</gn-ui-expandable-panel>
+</gn-ui-expandable-panel>
\ No newline at end of file
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>`
+    })
+  }
 }