Fix whitelisting UI bug, hide block all button for Unknown category, …

…use tracker total for Donut Graph

app/panel/actions/BlockingActions.js

@@ -15,12 +15,12 @@ import {
 	UPDATE_BLOCKING_DATA,
 	UPDATE_BLOCK_ALL_TRACKERS,
 	UPDATE_CATEGORIES,
+	UPDATE_ANTI_TRACKING_HIDE,
 	UPDATE_CATEGORY_BLOCKED,
 	UPDATE_TRACKER_BLOCKED,
 	UPDATE_TRACKER_TRUST_RESTRICT,
 	UPDATE_ANTI_TRACKING_WHITELIST,
-	TOGGLE_EXPAND_ALL,
-	UPDATE_ANTI_TRACKING_NUM_SHOWN
+	TOGGLE_EXPAND_ALL
 } from '../constants/constants';
 
 /**
@@ -64,9 +64,9 @@ export function updateCategories(data) {
  * @param  {Object} data
  * @return {Object}
  */
-export function updateAntiTrackingNumShown(data) {
+export function updateAntiTrackingHide(data) {
 	return {
-		type: UPDATE_ANTI_TRACKING_NUM_SHOWN,
+		type: UPDATE_ANTI_TRACKING_HIDE,
 		data,
 	};
 }

app/panel/components/Blocking.jsx

@@ -114,7 +114,7 @@ class Blocking extends React.Component {
 
 		updatedAntiTracking.hide = !(filterName === 'all' || filterName === 'unknown');
 		this.props.actions.updateCategories(updated_categories);
-		this.props.actions.updateAntiTrackingNumShown(updatedAntiTracking);
+		this.props.actions.updateAntiTrackingHide(updatedAntiTracking);
 	}
 
 	/**

app/panel/components/Blocking/BlockingHeader.jsx

@@ -32,6 +32,7 @@ class BlockingHeader extends React.Component {
 			filtered: false,
 			searchValue: '',
 			filterMenuOpened: false,
+			blockAllDisabled: true,
 		};
 
 		// event bindings
@@ -93,7 +94,12 @@ class BlockingHeader extends React.Component {
 				});
 			});
 			if (this.state.fromHere || totalShown === totalBlocked || totalBlocked === 0) {
-				this.setState({ allBlocked: (totalShown === totalBlocked), filtered, fromHere: false });
+				this.setState({
+					allBlocked: (totalShown === totalBlocked),
+					blockAllDisabled: !totalShown,
+					fromHere: false,
+					filtered
+				});
 			}
 		}
 	}
@@ -256,9 +262,14 @@ class BlockingHeader extends React.Component {
 						</div>
 					</div>
 					<div className="shrink columns align-self-justify text-right">
-						{this.props.categories && this.props.categories.length > 0 &&
-							<div className="block-text" onClick={this.clickBlockAll}>{blockText}</div>
-						}
+						{this.props.categories && this.props.categories.length > 0 && (
+							<div
+								className={`block-text${this.state.blockAllDisabled ? ' disabled' : ''}`}
+								onClick={this.clickBlockAll}
+							>
+								{blockText}
+							</div>
+						)}
 					</div>
 				</div>
 				{

app/panel/components/Blocking/Categories.jsx

@@ -57,35 +57,36 @@ class Categories extends React.Component {
 			/>
 		));
 
+		// Change name to UnknownCategory
 		const otherDataPointsCategory = antiTracking.unknownTrackers.length ? (
 			<Category
 				expandAll={expandAll}
 				globalBlocking={globalBlocking}
 				index={categoryList.length}
 				category={(() => ({
-					id: 'unknown',
+					id: 'anti_tracking_unknown',
 					name: 'Unknown',
 					description: 'Unknown trackers scrubbed by Anti-Tracking',
-					img_name: 'unknown',
+					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((otherDataPoint, idx) => ({
-						name: otherDataPoint.name,
-						domains: otherDataPoint.domains,
-						whitelisted: otherDataPoint.whitelisted,
+					trackers: antiTracking.unknownTrackers.map((unknownTracker, idx) => ({
+						name: unknownTracker.name,
+						domains: unknownTracker.domains,
+						whitelisted: unknownTracker.whitelisted,
 						blocked: false,
-						catId: 'other_data_points',
+						catId: 'anti_tracking_unknown',
 						description: '',
 						id: 100000000 + idx,
 						shouldShow: true,
-						cliqzAdCount: otherDataPoint.ads,
-						cliqzCookieCount: otherDataPoint.cookies,
-						cliqzFingerprintCount: otherDataPoint.fingerprints,
+						cliqzAdCount: unknownTracker.ads,
+						cliqzCookieCount: unknownTracker.cookies,
+						cliqzFingerprintCount: unknownTracker.fingerprints,
 					})),
 				}))()}
 				actions={this.props.actions}
-				key="other_data_points"
+				key="anti_tracking_unknown"
 				filtered={filtered}
 				showToast={this.props.showToast}
 				show_tracker_urls={this.props.show_tracker_urls}

app/panel/components/Blocking/Category.jsx

@@ -170,7 +170,7 @@ class Category extends React.Component {
 		} = this.props;
 
 		const globalBlocking = !!this.props.globalBlocking;
-		const isUnknown = category.id === 'unknown';
+		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' : '');

app/panel/components/BuildingBlocks/DonutGraph.jsx

@@ -128,9 +128,9 @@ class DonutGraph extends React.Component {
 			return;
 		}
 
-		if (!antiTracking.totalUnknownCount && !nextProps.antiTracking.totalUnknownCount) { return; }
-		const unknownDataPoints = antiTracking.totalUnknownCount;
-		const nextUnknownDataPoints = nextProps.antiTracking.totalUnknownCount;
+		if (!antiTracking.unknownTrackerCount && !nextProps.antiTracking.unknownTrackerCount) { return; }
+		const unknownDataPoints = antiTracking.unknownTrackerCount;
+		const nextUnknownDataPoints = nextProps.antiTracking.unknownTrackerCount;
 		if (unknownDataPoints !== nextUnknownDataPoints) {
 			this.nextPropsDonut(nextProps);
 		}
@@ -221,11 +221,11 @@ class DonutGraph extends React.Component {
 			graphData.sort((a, b) => a.value < b.value);
 		}
 
-		if (antiTracking.totalUnknownCount) {
+		if (antiTracking.unknownTrackerCount) {
 			graphData.push({
 				id: 'unknown',
 				name: 'Unknown',
-				value: antiTracking.totalUnknownCount,
+				value: antiTracking.unknownTrackerCount,
 			});
 		}
 
@@ -359,7 +359,7 @@ class DonutGraph extends React.Component {
 							{cat.name}
 						</span>
 					))}
-					{!!antiTracking.totalUnknownCount && (
+					{!!antiTracking.unknownTrackerCount && (
 						<span
 							className="DonutGraph__tooltip tooltip top"
 							id="unknown_tooltip"

app/panel/constants/constants.js

@@ -39,7 +39,7 @@ export const SEND_SIGNAL = 'SEND_SIGNAL';
 // blocking
 export const UPDATE_BLOCKING_DATA = 'UPDATE_BLOCKING_DATA';
 export const UPDATE_CATEGORIES = 'UPDATE_CATEGORIES';
-export const UPDATE_ANTI_TRACKING_NUM_SHOWN = 'UPDATE_ANTI_TRACKING_NUM_SHOWN';
+export const UPDATE_ANTI_TRACKING_HIDE = 'UPDATE_ANTI_TRACKING_HIDE';
 export const UPDATE_CATEGORY_BLOCKED = 'UPDATE_CATEGORY_BLOCKED';
 export const UPDATE_TRACKER_BLOCKED = 'UPDATE_TRACKER_BLOCKED';
 export const UPDATE_TRACKER_TRUST_RESTRICT = 'UPDATE_TRACKER_TRUST_RESTRICT';