fix: TT-178 Make URI clickable when possible

Author: wobravo

src/app/modules/reports/components/time-entries-table/time-entries-table.component.html

@@ -1,5 +1,9 @@
 <div class="row scroll-table mt-5 ml-0">
-  <table class="table table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions"
+  <table
+    class="table table-striped mb-0"
+    datatable
+    [dtTrigger]="dtTrigger"
+    [dtOptions]="dtOptions"
     *ngIf="reportDataSource$ | async as dataSource">
     <thead class="thead-blue">
       <tr class="d-flex">
@@ -39,7 +43,7 @@
         <td class="col md-col">{{ entry.activity_name }}</td>
         <td class="col lg-col">
           <ng-container *ngIf="entry.uri !== null">
-            <a [class.is-url]="isValidUri(entry.uri)" (click)="isLinkExternal(entry.uri)">
+            <a [class.is-url]="isURL(entry.uri)" (click)="openURLInNewTab(entry.uri)">
               {{ entry.uri }}
             </a>
           </ng-container>

src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss

@@ -1,3 +1,4 @@
+@import '../../../../../styles/colors.scss';
 .col{
   white-space: nowrap;
   overflow: hidden;
@@ -33,24 +34,24 @@
   display: grid;
 }
 
-$base-color: #00BAEE;
-$hover-color: darken($base-color, 20);
+$url-base-color: $primary;
+$url-hover-color: darken($url-base-color, 20);
 
 .is-url {
   cursor: pointer;
-  color: $base-color;
+  color: $url-base-color;
   text-decoration: underline;
 
   &:visited {
-    color: green;
+    color: $dark;
   }
 
   &:hover {
-    color: $hover-color;
+    color: $url-hover-color;
   }
 
   &:active {
-    color: $base-color;
+    color: $url-base-color;
   }
 }
 

src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts

@@ -80,21 +80,31 @@ describe('Reports Page', () => {
     });
 
     it('when the uri starts with http or https it should return true and open the url in a new tab', () => {
-      const uriExpected = 'http://customuri.com';
-      spyOn(component, 'isValidUri').and.returnValue(true);
+      const url = 'http://customuri.com';
+      spyOn(component, 'isURL').and.returnValue(true);
       spyOn(window, 'open');
 
-      expect(component.isLinkExternal(uriExpected)).not.toEqual('');
-      expect(window.open).toHaveBeenCalledWith(uriExpected, '_blank');
-      expect(component.isValidUri).toHaveBeenCalled();
+      expect(component.openURLInNewTab(url)).not.toEqual('');
+      expect(window.open).toHaveBeenCalledWith(url, '_blank');
     });
 
     it('when the uri starts without http or https it should return false and not navigate or open a new tab', () => {
       const uriExpected = timeEntry.uri;
-      spyOn(component, 'isValidUri').and.returnValue(false);
+      spyOn(component, 'isURL').and.returnValue(false);
 
-      expect(component.isLinkExternal(uriExpected)).toEqual('');
-      expect(component.isValidUri).toHaveBeenCalled();
+      expect(component.openURLInNewTab(uriExpected)).toEqual('');
+    });
+
+    const params = [
+      {url: 'http://example.com', expected_value: true, with: 'with'},
+      {url: 'https://example.com', expected_value: true, with: 'with'},
+      {url: 'no-url-example', expected_value: false, with: 'without'}
+    ];
+    params.map((param) => {
+      it(`when the url starts ${param.with} http or https it should return ${param.expected_value}`, () => {
+
+      expect(component.isURL(param.url)).toEqual(param.expected_value);
+      });
     });
 
     afterEach(() => {

src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts

@@ -86,11 +86,12 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
     }
   }
 
-  isLinkExternal(uri: string): WindowProxy | string {
-    return this.isValidUri(uri) ? window.open(uri, '_blank') : '';
+  openURLInNewTab(uri: string): WindowProxy | string {
+    return this.isURL(uri) ? window.open(uri, '_blank') : '';
   }
 
-  isValidUri(uri: string) {
-    return uri.startsWith('http' || 'https');
+  isURL(uri: string) {
+    const regex = new RegExp('http*', 'g');
+    return regex.test(uri) ? true : false;
   }
 }