From 005c38578cae42e3a8a55365413d63fe70618a2d Mon Sep 17 00:00:00 2001
From: Nick Phura <Nick.Phura@quartech.com>
Date: Thu, 28 Feb 2019 16:05:59 -0800
Subject: [PATCH] PRC-294: Convert description links into anchor tags.  Add
 Linkify pipe.

---
 package.json                                  |  2 ++
 .../application-detail.component.html         |  2 +-
 src/app/pipes/linkify.pipe.spec.ts            |  8 ++++++
 src/app/pipes/linkify.pipe.ts                 | 27 +++++++++++++++++++
 src/app/shared.module.ts                      |  4 +++
 5 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/app/pipes/linkify.pipe.spec.ts
 create mode 100644 src/app/pipes/linkify.pipe.ts

diff --git a/package.json b/package.json
index f25bc6be..ffe68009 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "hammerjs": "^2.0.8",
     "keycloak-angular": "3.0.3",
     "leaflet": "^1.3.1",
+    "linkify-it": "2.1.0",
     "lodash": "4.17.5",
     "moment": "^2.21.0",
     "mygovbc-bootstrap-theme": "^0.4.1",
@@ -58,6 +59,7 @@
     "@angular/compiler-cli": "^6.1.7",
     "@types/arcgis-js-api": "4.6.0",
     "@types/jasmine": "2.8.6",
+    "@types/linkify-it": "2.0.4",
     "@types/lodash": "4.14.106",
     "@types/node": "~6.0.60",
     "jasmine-core": "~2.5.2",
diff --git a/src/app/applications/application-detail/application-detail.component.html b/src/app/applications/application-detail/application-detail.component.html
index 42c33562..7dbec1d0 100644
--- a/src/app/applications/application-detail/application-detail.component.html
+++ b/src/app/applications/application-detail/application-detail.component.html
@@ -79,7 +79,7 @@ <h1>Crown land File: {{application.clFile}}</h1>
               <ng-template ngbTabContent>
                 <section>
                   <h2>Description</h2>
-                  <p class="mb-0" [innerHTML]="(application.description | newlines) || '<em>No application description available</em>'"></p>
+                  <p class="mb-0" [innerHTML]="(application.description | newlines | linkify) || '<em>No application description available</em>'"></p>
                 </section>
                 <section>
                   <h2>Details</h2>
diff --git a/src/app/pipes/linkify.pipe.spec.ts b/src/app/pipes/linkify.pipe.spec.ts
new file mode 100644
index 00000000..dc256821
--- /dev/null
+++ b/src/app/pipes/linkify.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { LinkifyPipe } from './linkify.pipe';
+
+describe('LinkifyPipe', () => {
+  it('create an instance', () => {
+    const pipe = new LinkifyPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/pipes/linkify.pipe.ts b/src/app/pipes/linkify.pipe.ts
new file mode 100644
index 00000000..29d690aa
--- /dev/null
+++ b/src/app/pipes/linkify.pipe.ts
@@ -0,0 +1,27 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import * as LinkifyIt from 'linkify-it';
+
+/**
+ * Finds urls and replaces them with anchor tags.
+ *
+ * @export
+ * @class LinkifyPipe
+ * @implements {PipeTransform}
+ */
+@Pipe({ name: 'linkify' })
+export class LinkifyPipe implements PipeTransform {
+  transform(str: string): string {
+
+    if (!str) {
+      return '';
+    }
+
+    const linkify = new LinkifyIt();
+
+    linkify.match(str).forEach(match => {
+      str = str.replace(match.text, `<a href="${match.url}" target="_blank">${match.text}</a>`);
+    });
+
+    return str;
+  }
+}
diff --git a/src/app/shared.module.ts b/src/app/shared.module.ts
index 0a357f37..e386b79c 100644
--- a/src/app/shared.module.ts
+++ b/src/app/shared.module.ts
@@ -7,6 +7,8 @@ import { OrderByPipe } from 'app/pipes/order-by.pipe';
 import { NewlinesPipe } from 'app/pipes/newlines.pipe';
 import { PublishedPipe } from 'app/pipes/published.pipe';
 import { ObjectFilterPipe } from 'app/pipes/object-filter.pipe';
+import { LinkifyPipe } from 'app/pipes/linkify.pipe';
+
 import { VarDirective } from 'app/utils/ng-var.directive';
 import { FileUploadComponent } from 'app/file-upload/file-upload.component';
 
@@ -21,6 +23,7 @@ import { FileUploadComponent } from 'app/file-upload/file-upload.component';
     NewlinesPipe,
     PublishedPipe,
     ObjectFilterPipe,
+    LinkifyPipe,
     VarDirective,
     FileUploadComponent
   ],
@@ -30,6 +33,7 @@ import { FileUploadComponent } from 'app/file-upload/file-upload.component';
     OrderByPipe,
     NewlinesPipe,
     PublishedPipe,
+    LinkifyPipe,
     VarDirective,
     FileUploadComponent
   ]