Rendering is working properly for the detailed view list, holding off…

… on further commits until Design is finished reviewing the feature (a console.log has been added in each place where logic may be added to match upcoming feature implementation requirements)

app/panel/components/Blocking/Categories.jsx

@@ -69,15 +69,15 @@ class Categories extends React.Component {
 						num_blocked: 0,
 						num_shown: antiTracking.num_shown,
 						trackers: unsafeURLs.map((url, idx) => ({
-							blocked: false,
+							blocked: true,
 							catId: 'other_data_points',
 							description: '',
 							id: 100000000 + idx,
 							name: url,
 							shouldShow: true,
 							sources: false,
 							ss_allowed: false,
-							ss_blocked: true,
+							ss_blocked: false,
 							warningCompatibility: false,
 							warningInsecure: false,
 							warningSlow: false,

app/panel/components/Blocking/Category.jsx

@@ -171,6 +171,7 @@ class Category extends React.Component {
 		} else {
 			trackersBlockedCount = category.num_blocked || 0;
 		}
+		const isDataPoint = category.id === 'other_data_points';
 
 		return (
 			<div className={`${category.num_shown === 0 ? 'hide' : ''} blocking-category`}>
@@ -196,17 +197,17 @@ class Category extends React.Component {
 									}
 									<span className="count">{`${category.num_total} `}</span>
 									<span className="text">
-										{ category.id === 'other_data_points' ? ' DATA POINTS' : (category.num_total === 1) ? t('blocking_category_tracker') : t('blocking_category_trackers') }
+										{ isDataPoint ? ' DATA POINTS' : (category.num_total === 1) ? t('blocking_category_tracker') : t('blocking_category_trackers') }
 									</span>
 								</div>
 								{
-									(!!trackersBlockedCount || category.id === 'other_data_points') &&
+									(!!trackersBlockedCount || isDataPoint) &&
 									<div className="blocked-count">
 										<span className="count">
-											{category.id === 'other_data_points' ? category.num_total : `${trackersBlockedCount} `}
+											{isDataPoint ? category.num_total : `${trackersBlockedCount} `}
 										</span>
 										<span className="text">
-											{category.id === 'other_data_points' ? ' ANONYMIZED' : t('blocking_category_blocked') }
+											{isDataPoint ? ' ANONYMIZED' : t('blocking_category_blocked') }
 										</span>
 									</div>
 								}
@@ -241,7 +242,7 @@ class Category extends React.Component {
 									</span>
 								</div>
 							)}
-							{category.id === 'other_data_points' && (
+							{isDataPoint && (
 								<span className={this.props.index ? 't-tooltip-up-left' : 't-tooltip-down-left'} data-g-tooltip="Data points anonymized by Anti-Tracking" onMouseOver={this.showTooltip} onMouseOut={this.hideTooltip} >
 									<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
 										<path d="M10.190881 1.028859c-.114948-.038479-.267884-.038479-.382831 0L1.574491 3.211632C1.229895 3.2881 1 3.594463 1 3.93906c.038479 5.85937 3.178574 11.297185 8.578155 14.935303.114948.076469.268129.114948.42131.114948.153182 0 .306363-.038479.42131-.114948 5.399581-3.638118 8.539676-9.075933 8.578155-14.935303 0-.344597-.229894-.65096-.574491-.727428l-8.233558-2.182773z" stroke="#1DAFED" strokeWidth="2" fill="none" fillRule="evenodd" />
@@ -265,7 +266,7 @@ class Category extends React.Component {
 						language={this.props.language}
 						smartBlockActive={this.props.smartBlockActive}
 						smartBlock={this.props.smartBlock}
-						isDataPoint={category.id === 'other_data_points'}
+						isDataPoint={isDataPoint}
 					/>
 				}
 			</div>

app/panel/components/Blocking/OtherDataPoint.jsx

@@ -0,0 +1,220 @@
+/**
+ * Tracker Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+/* eslint react/no-array-index-key: 0 */
+
+import React from 'react';
+/**
+ * @class Implement Tracker component which represents single tracker
+ * in the Blocking view.
+ * @memberOf BlockingComponents
+ */
+class OtherDataPoint extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			trackerClasses: '',
+			warningImageTitle: '',
+		};
+
+		// click bindings
+		this.clickTrackerStatus = this.clickTrackerStatus.bind(this);
+		this.clickTrackerTrust = this.clickTrackerTrust.bind(this);
+		this.clickTrackerRestrict = this.clickTrackerRestrict.bind(this);
+	}
+	/**
+	 * Lifecycle event.
+	 */
+	componentWillMount() {
+		this.updateTrackerClasses(this.props.tracker);
+	}
+	/**
+	 * Lifecycle event.
+	 */
+	componentWillReceiveProps(nextProps) {
+		this.updateTrackerClasses(nextProps.tracker);
+	}
+	/**
+	 * React hook used to optimise re-rendering of the list of trackers.
+	 * @param  {Object} nextProps	changed props
+	 * @param  {Object} nextState   changed state
+	 * @return {boolean}            true means proceed with rendering
+	 */
+	shouldComponentUpdate(nextProps) {
+		const { tracker } = nextProps;
+		if (!tracker || Object.keys(tracker).length === 0) {
+			return false;
+		}
+		return true;
+	}
+	/**
+	 * Set dynamic classes on .blocking-trk and save it in state.
+	 * @param  {Object} tracker    tracker object
+	 */
+	updateTrackerClasses(tracker) {
+		const classes = [];
+		let updated_title = '';
+
+		classes.push((!tracker.shouldShow) ? 'hide' : '');
+		classes.push((tracker.blocked) ? 'blocked' : '');
+		classes.push((tracker.ss_allowed) ? 'individual-trust' : '');
+		classes.push((tracker.ss_blocked) ? 'individual-restrict' : '');
+		classes.push((tracker.warningCompatibility || tracker.warningInsecure || tracker.warningSlow || tracker.warningSmartBlock) ? 'warning' : '');
+		if (tracker.warningSmartBlock) {
+			classes.push(tracker.warningSmartBlock === 'blocked' ? 'smart-blocked' : 'smart-unblocked');
+		} else {
+			classes.push((tracker.warningCompatibility) ? 'compatibility' : '');
+			classes.push((tracker.warningInsecure) ? 'insecure' : '');
+			classes.push((tracker.warningSlow) ? 'slow' : '');
+		}
+
+		// Create tooltips for tracker alerts
+		if (tracker.warningSmartBlock) {
+			updated_title = tracker.warningSmartBlock === 'blocked' ? t('panel_tracker_warning_smartblock_tooltip') : t('panel_tracker_warning_smartunblock_tooltip');
+		} else if (tracker.warningCompatibility) {
+			updated_title = t('panel_tracker_warning_compatibility_tooltip');
+		} else if (tracker.warningInsecure && tracker.warningSlow) {
+			updated_title = t('panel_tracker_warning_slow_nonsecure_tooltip');
+		} else if (tracker.warningInsecure) {
+			updated_title = t('panel_tracker_warning_nonsecure_tooltip');
+		} else if (tracker.warningSlow) {
+			updated_title = t('panel_tracker_warning_slow_tooltip');
+		}
+
+		this.setState({
+			trackerClasses: classes.join(' '),
+			warningImageTitle: updated_title,
+		});
+	}
+	/**
+	 * Implement handler for clicking on the tracker global block/unblock checkbox.
+	 * Trigger action which persists new tracker blocked state and spawns
+	 * re-rendering of the checkbox. It also shows notification to inform
+	 * user that the page should be reloaded.
+	 */
+	clickTrackerStatus() {
+		const blocked = !this.props.tracker.blocked;
+
+		if (this.props.paused_blocking || this.props.sitePolicy) {
+			return;
+		}
+
+		this.props.actions.updateTrackerBlocked({
+			smartBlockActive: this.props.smartBlockActive,
+			smartBlock: this.props.smartBlock,
+			app_id: this.props.tracker.id,
+			cat_id: this.props.cat_id,
+			blocked,
+		});
+
+		this.props.actions.showNotification({
+			updated: `${this.props.tracker.id}_blocked`,
+			reload: true,
+		});
+	}
+
+	/**
+	 * Implement handler for clicking on the tracker site-specific trust icon.
+	 * Trigger actions which persist the new setting and notify user
+	 * that the page should be reloaded.
+	 */
+	clickTrackerTrust() {
+		const ss_allowed = !this.props.tracker.ss_allowed;
+		this.props.actions.updateTrackerTrustRestrict({
+			app_id: this.props.tracker.id,
+			cat_id: this.props.cat_id,
+			trust: ss_allowed,
+			restrict: false,
+		});
+
+		this.props.actions.showNotification({
+			updated: `${this.props.tracker.id}_ss_allowed`,
+			reload: true,
+		});
+	}
+
+	/**
+	 * Implement handler for clicking on the tracker site-specific block icon.
+	 * Trigger actions which persist the new setting and notify user
+	 * that the page should be reloaded.
+	 */
+	clickTrackerRestrict() {
+		const ss_blocked = !this.props.tracker.ss_blocked;
+		this.props.actions.updateTrackerTrustRestrict({
+			app_id: this.props.tracker.id,
+			cat_id: this.props.cat_id,
+			trust: false,
+			restrict: ss_blocked,
+		});
+
+		this.props.actions.showNotification({
+			updated: `${this.props.tracker.id}_ss_blocked`,
+			reload: true,
+		});
+	}
+	/**
+	* Render a tracker in Blocking view.
+	* @return {ReactComponent}   ReactComponent instance
+	*/
+	render() {
+		const { tracker } = this.props;
+
+		return (
+			<div className={`${this.state.trackerClasses} blocking-trk`}>
+				<div className="row align-middle trk-header">
+					<div className="columns shrink">
+						<div className={`warning-image right${this.state.warningImageTitle ? ' t-tooltip-up-right' : ''}`} data-g-tooltip={this.state.warningImageTitle} />
+					</div>
+					<div className="columns collapse-left">
+						<div className="data-point trk-name">{ tracker.name }</div>
+					</div>
+					<div className="columns shrink align-self-justify collapse-right">
+						<div className="svg-container">
+							<span className="t-tooltip-up-left" data-g-tooltip={this.props.tracker.ss_allowed ? t('summary_undo') : t('panel_tracker_trust_tooltip')}>
+								<svg className="blocking-icons trust" onClick={this.clickTrackerTrust} width="20px" height="20px" viewBox="0 0 20 20">
+									<g transform="translate(1 1)" fill="none" fillRule="evenodd">
+										<path className="border" d="M-.5-.5h18.3v18.217H-.5z" />
+										<path className="background" d="M.5.5h16.3v16.217H.5z" />
+										<svg width="20px" height="20px" viewBox="-2.75 -2.75 20 20">
+											<circle className="trust-circle" cx="5.875" cy="5.875" r="5.875" fillRule="evenodd" />
+										</svg>
+									</g>
+								</svg>
+							</span>
+							<span className="t-tooltip-up-left" data-g-tooltip={this.props.tracker.ss_blocked ? t('summary_undo') : t('panel_tracker_restrict_tooltip')} >
+								<svg className="blocking-icons restrict" onClick={this.clickTrackerRestrict} width="20px" height="20px" viewBox="0 0 20 20">
+									<g transform="translate(1 1)" fill="none" fillRule="evenodd">
+										<path className="border" d="M-.5-.5h18.3v18.217H-.5z" />
+										<path className="background" d="M.5.5h16.3v16.217H.5z" />
+										<svg width="20px" height="20px" viewBox="-2 -2 20 20">
+											<g className="restrict-circle" transform="translate(1 1)" fillRule="evenodd">
+												<path d="M1.958 1.958l7.834 7.834" />
+												<circle cx="5.753" cy="5.753" r="5.753" />
+											</g>
+										</svg>
+									</g>
+								</svg>
+							</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		);
+	}
+}
+
+OtherDataPoint.defaultProps = {
+	tracker: {},
+};
+
+export default OtherDataPoint;