Add expansion functionality, refactory Categories component

app/panel/components/Blocking/Categories.jsx

@@ -38,71 +38,68 @@ class Categories extends React.Component {
 		const globalBlocking = !!this.props.globalBlocking;
 		const filtered = !!this.props.filtered;
 
-		const categoryList = categories.map((cat, index) => (
-			<Category
-				expandAll={expandAll}
-				globalBlocking={globalBlocking}
-				index={index}
-				category={cat}
-				actions={this.props.actions}
-				key={cat.id}
-				filtered={filtered}
-				showToast={this.props.showToast}
-				show_tracker_urls={this.props.show_tracker_urls}
-				sitePolicy={this.props.sitePolicy}
-				paused_blocking={this.props.paused_blocking}
-				language={this.props.language}
-				smartBlockActive={this.props.smartBlockActive}
-				smartBlock={this.props.smartBlock}
-			/>
-		));
-
-		// Change name to UnknownCategory
-		const otherDataPointsCategory = antiTracking.unknownTrackers.length ? (
-			<Category
-				expandAll={expandAll}
-				globalBlocking={globalBlocking}
-				index={categoryList.length}
-				category={(() => ({
+		const renderCategory = (category, index, isUnknown) => {
+			let whitelistedTotal = 0;
+			const unknownCategoryMapping = isUnknown ? (
+				{
 					id: 'anti_tracking_unknown',
 					name: 'Unknown',
 					description: 'Unknown trackers scrubbed by Anti-Tracking',
 					img_name: 'anti_tracking_unknown',
 					num_total: antiTracking.unknownTrackers.length,
 					num_blocked: antiTracking.unknownTrackerCount,
 					num_shown: antiTracking.hide ? 0 : antiTracking.unknownTrackers.length,
-					trackers: antiTracking.unknownTrackers.map((unknownTracker, idx) => ({
-						name: unknownTracker.name,
-						domains: unknownTracker.domains,
-						whitelisted: unknownTracker.whitelisted,
-						blocked: false,
-						catId: 'anti_tracking_unknown',
-						description: '',
-						id: 100000000 + idx,
-						shouldShow: true,
-						cliqzAdCount: unknownTracker.ads,
-						cliqzCookieCount: unknownTracker.cookies,
-						cliqzFingerprintCount: unknownTracker.fingerprints,
-					})),
-				}))()}
-				actions={this.props.actions}
-				key="anti_tracking_unknown"
-				filtered={filtered}
-				showToast={this.props.showToast}
-				show_tracker_urls={this.props.show_tracker_urls}
-				sitePolicy={this.props.sitePolicy}
-				paused_blocking={this.props.paused_blocking}
-				language={this.props.language}
-				smartBlockActive={this.props.smartBlockActive}
-				smartBlock={this.props.smartBlock}
-				enable_anti_tracking={enable_anti_tracking}
-			/>
-		) : null;
+					trackers: antiTracking.unknownTrackers.map((unknownTracker, idx) => {
+						if (unknownTracker.whitelisted) { whitelistedTotal++; }
+						return {
+							name: unknownTracker.name,
+							domains: unknownTracker.domains,
+							whitelisted: unknownTracker.whitelisted,
+							blocked: false,
+							catId: 'anti_tracking_unknown',
+							description: '',
+							id: 100000000 + idx,
+							shouldShow: true,
+							cliqzAdCount: unknownTracker.ads,
+							cliqzCookieCount: unknownTracker.cookies,
+							cliqzFingerprintCount: unknownTracker.fingerprints,
+						};
+					}),
+					whitelistedTotal,
+				}
+			) : null;
+			console.log(whitelistedTotal)
+
+			return (
+				<Category
+					expandAll={expandAll}
+					globalBlocking={globalBlocking}
+					index={index}
+					category={isUnknown ? unknownCategoryMapping : category}
+					actions={this.props.actions}
+					key={isUnknown ? unknownCategoryMapping.id : category.id}
+					filtered={filtered}
+					showToast={this.props.showToast}
+					show_tracker_urls={this.props.show_tracker_urls}
+					sitePolicy={this.props.sitePolicy}
+					paused_blocking={this.props.paused_blocking}
+					language={this.props.language}
+					smartBlockActive={this.props.smartBlockActive}
+					smartBlock={this.props.smartBlock}
+					enable_anti_tracking={enable_anti_tracking}
+					isUnknown={isUnknown}
+				/>
+			);
+		};
+
+		const categoryList = categories.map((category, index) => renderCategory(category, index));
+		const unknownCategory = antiTracking.unknownTrackers.length
+			? renderCategory(null, categoryList.length, true) : null;
 
 		return (
 			<div className="scroll-content">
 				{categoryList}
-				{otherDataPointsCategory}
+				{unknownCategory}
 			</div>
 		);
 	}

app/panel/components/Blocking/Category.jsx

@@ -167,10 +167,10 @@ class Category extends React.Component {
 			sitePolicy,
 			enable_anti_tracking,
 			actions,
+			isUnknown,
 		} = this.props;
 
 		const globalBlocking = !!this.props.globalBlocking;
-		const isUnknown = category.id === 'anti_tracking_unknown';
 
 		const checkBoxStyle = `${(this.state.totalShownBlocked && this.state.allShownBlocked) ? 'all-blocked ' : (this.state.totalShownBlocked ? 'some-blocked ' : '')} checkbox-container`;
 		const caretClasses = (this.state.isExpanded ? 'caret-up' : 'caret-down') + (isUnknown ? ' Category__antiTrackingCaret' : '');
@@ -231,10 +231,10 @@ class Category extends React.Component {
 									</span>
 								</div>
 								{((!isUnknown && !!trackersBlockedCount)
-								|| (isUnknown && category.num_blocked !== category.num_total)) && (
+								|| (isUnknown && !!category.whitelistedTotal)) && (
 									<div className={`blocked-count${isUnknown ? ' ghosty-blue' : ''}`}>
 										<span className="count">
-											{isUnknown ? category.num_total - category.num_blocked : `${trackersBlockedCount} `}
+											{isUnknown ? category.whitelistedTotal : `${trackersBlockedCount} `}
 										</span>
 										<span className="text">
 											{isUnknown ? ' WHITELISTED' : t('blocking_category_blocked') }

app/panel/components/Blocking/Tracker.jsx

@@ -309,10 +309,13 @@ class Tracker extends React.Component {
 					{ source.src }
 				</a>
 			));
+		} else if (tracker.domains) {
+			sources = tracker.domains.map((domain, index) => (
+				<p className="trk-src-link unknown" key={index}>{domain}</p>
+			));
 		}
 
 		const trackerNameClasses = ClassNames('trk-name', {
-			unknown: isUnknown,
 			'is-whitelisted': tracker.whitelisted,
 		});
 
@@ -347,16 +350,18 @@ class Tracker extends React.Component {
 				{this.state.showMoreInfo && (
 					<div className={`${!this.state.showMoreInfo ? 'hide' : ''} row trk-moreinfo`}>
 						<div className="columns">
-							<div className="trk-description">
-								{ this.state.description }
-								<div className={(!this.state.showTrackerLearnMore ? 'hide' : '')}>
-									<a target="_blank" rel="noopener noreferrer" title={tracker.name} href={`https://${globals.APPS_SUB_DOMAIN}.ghostery.com/${this.props.language}/apps/${encodeURIComponent(tracker.name.replace(/\s+/g, '_').toLowerCase())}`}>
-										{ t('tracker_description_learn_more') }
-									</a>
+							{!isUnknown && (
+								<div className="trk-description">
+									{ this.state.description }
+									<div className={(!this.state.showTrackerLearnMore ? 'hide' : '')}>
+										<a target="_blank" rel="noopener noreferrer" title={tracker.name} href={`https://${globals.APPS_SUB_DOMAIN}.ghostery.com/${this.props.language}/apps/${encodeURIComponent(tracker.name.replace(/\s+/g, '_').toLowerCase())}`}>
+											{ t('tracker_description_learn_more') }
+										</a>
+									</div>
 								</div>
-							</div>
+							)}
 							<div className={`${!this.props.show_tracker_urls ? 'hide' : ''}`}>
-								<div className="trk-srcs-title">{ t('panel_tracker_found_sources_title') }</div>
+								<div className="trk-srcs-title">{isUnknown ? 'Dectected unknown tracker URLs' : t('panel_tracker_found_sources_title') }</div>
 								<div className="trk-srcs">{ sources }</div>
 							</div>
 						</div>

app/scss/partials/_blocking_tracker.scss

@@ -27,10 +27,6 @@
 			font-weight: 400;
 			color: #4a4a4a;
 			@extend %nowrap;
-			&.unknown {
-				pointer-events: none;
-				cursor: default;
-			}
 			&.is-whitelisted {
 				color: #00AEF0;
 			}
@@ -115,6 +111,10 @@
 			margin-right: 10px;
 			overflow-y: hidden;
 			@extend %nowrap;
+			&.unknown {
+				margin: 0 10px 0 0;
+				color: #4a4a4a;
+			}
 		}
 	}
 	svg.blocking-icons {