From 9df7aba9e187ff272445cfd248aa3bf70e580c63 Mon Sep 17 00:00:00 2001
From: Artem Baskal <a.baskal@adguard.com>
Date: Fri, 3 Jul 2020 12:01:03 +0300
Subject: [PATCH] - client: Fix client tracker source links Close #1813

Squashed commit of the following:

commit 7f2286cb6e36f90ca19f2830b341d34af513c9a3
Merge: e9f2e08b 9640752d
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 3 11:55:46 2020 +0300

    Merge branch 'master' into fix/1813

commit e9f2e08b608ad14e5b327ab86d8faa66784bae44
Merge: ecee0977 f5a1f311
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 3 11:49:52 2020 +0300

    Merge branch 'master' into fix/1813

commit ecee0977ab5439d3be2a99447a771871f0340a2e
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 3 11:35:10 2020 +0300

    Capitalize category names

commit b4b47ce0177369fb4da5ad2e10a78b2d96bd81c6
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 2 18:11:40 2020 +0300

    - client: Fix client tracker source links
---
 .../components/Logs/Cells/getDomainCell.js    | 16 ++++++++------
 client/src/components/Logs/Table.js           | 21 +++++++++++--------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Logs/Cells/getDomainCell.js b/client/src/components/Logs/Cells/getDomainCell.js
index d0a44cff..0d460190 100644
--- a/client/src/components/Logs/Cells/getDomainCell.js
+++ b/client/src/components/Logs/Cells/getDomainCell.js
@@ -7,7 +7,8 @@ import {
     LONG_TIME_FORMAT,
     SCHEME_TO_PROTOCOL_MAP,
 } from '../../../helpers/constants';
-import { formatDateTime, formatTime } from '../../../helpers/helpers';
+import { captitalizeWords, formatDateTime, formatTime } from '../../../helpers/helpers';
+import { getSourceData } from '../../../helpers/trackers/trackers';
 
 const getDomainCell = (props) => {
     const {
@@ -20,8 +21,6 @@ const getDomainCell = (props) => {
 
     const hasTracker = !!tracker;
 
-    const source = tracker && tracker.sourceData && tracker.sourceData.name;
-
     const lockIconClass = classNames('icons', 'icon--small', 'd-none', 'd-sm-block', 'cursor--pointer', {
         'icon--active': answer_dnssec,
         'icon--disabled': !answer_dnssec,
@@ -55,10 +54,14 @@ const getDomainCell = (props) => {
         protocol,
     };
 
+    const sourceData = getSourceData(tracker);
+
     const knownTrackerDataObj = {
         name_table_header: tracker && tracker.name,
-        category_label: tracker && tracker.category,
-        source_label: source && <a href={`//${source}`} className="link--green">{source}</a>,
+        category_label: tracker && captitalizeWords(tracker.category),
+        source_label: sourceData
+            && <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
+                  className="link--green">{sourceData.name}</a>,
     };
 
     const renderGrid = (content, idx) => {
@@ -71,7 +74,8 @@ const getDomainCell = (props) => {
 
     const getGrid = (contentObj, title, className) => [
         <div key={title} className={classNames('pb-2 grid--title', className)}>{t(title)}</div>,
-        <div key={`${title}-1`} className="grid grid--limited">{React.Children.map(Object.entries(contentObj), renderGrid)}</div>,
+        <div key={`${title}-1`}
+             className="grid grid--limited">{React.Children.map(Object.entries(contentObj), renderGrid)}</div>,
     ];
 
     const requestDetails = getGrid(requestDetailsObj, 'request_details');
diff --git a/client/src/components/Logs/Table.js b/client/src/components/Logs/Table.js
index 586fca12..ccab98bb 100644
--- a/client/src/components/Logs/Table.js
+++ b/client/src/components/Logs/Table.js
@@ -19,6 +19,7 @@ import getClientCell from './Cells/getClientCell';
 import getResponseCell from './Cells/getResponseCell';
 
 import {
+    captitalizeWords,
     checkFiltered,
     formatDateTime,
     formatElapsedMs,
@@ -26,6 +27,7 @@ import {
 
 } from '../../helpers/helpers';
 import Loading from '../ui/Loading';
+import { getSourceData } from '../../helpers/trackers/trackers';
 
 const Table = (props) => {
     const {
@@ -300,15 +302,14 @@ const Table = (props) => {
                             toggleBlocking(buttonType, domain);
                         };
 
-                        const tracker_source = tracker && tracker.sourceData
-                            && tracker.sourceData.name;
-
                         const status = t((FILTERED_STATUS_TO_META_MAP[reason]
                             && FILTERED_STATUS_TO_META_MAP[reason].label) || reason);
                         const statusBlocked = <div className="bg--danger">{status}</div>;
 
                         const protocol = t(SCHEME_TO_PROTOCOL_MAP[client_proto]) || '';
 
+                        const sourceData = getSourceData(tracker);
+
                         const detailedData = {
                             time_table_header: formatTime(time, LONG_TIME_FORMAT),
                             date: formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS),
@@ -318,9 +319,10 @@ const Table = (props) => {
                             protocol,
                             known_tracker: hasTracker && 'title',
                             table_name: hasTracker && tracker.name,
-                            category_label: hasTracker && tracker.category,
-                            tracker_source: hasTracker && tracker_source && <a href={`//${source}`}
-                                                                               className="link--green">{tracker_source}</a>,
+                            category_label: hasTracker && captitalizeWords(tracker.category),
+                            tracker_source: hasTracker && sourceData
+                                && <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
+                                   className="link--green">{sourceData.name}</a>,
                             response_details: 'title',
                             install_settings_dns: upstream,
                             elapsed: formattedElapsedMs,
@@ -346,9 +348,10 @@ const Table = (props) => {
                             protocol,
                             known_tracker: 'title',
                             table_name: hasTracker && tracker.name,
-                            category_label: hasTracker && tracker.category,
-                            source_label: hasTracker && source
-                                && <a href={`//${source}`} className="link--green">{source}</a>,
+                            category_label: hasTracker && captitalizeWords(tracker.category),
+                            source_label: hasTracker && sourceData
+                                && <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
+                                      className="link--green">{sourceData.name}</a>,
                             response_details: 'title',
                             install_settings_dns: upstream,
                             elapsed: formattedElapsedMs,