GH-2159: Update frequency reduction, AB test opt-out, remove Cliqz AB…

… test (#608)

* Reduce scheduledTasks and autoUpdatedBugDb frequencies from once an hour to once a day

* Refactor autoUpdateBugDb so it always does the same thing when called with the same argument

* Update autoUpdateBugDB documentation and refactor a little more to make sure it always does the same thing when called with the same args

* Clean up autoUpdateBugDB a bit more: Clarify docs, flatten, and move log statement to make sure that it is triggered every time the function is called, since the message just says that the function was called

* Minor comment in autoUpdateBugDb

* Renamed autoUpdateBugDb to clarify connection to checkLibraryVersion. Tweak docs.

* Edit db update function names and docs to improve clarity

* Remove Cliqz anti-tracking A/B test config code from background. Tidy up setupAbTest

* Split up and reorganize setupABTest so outside code can only call those parts of the original it actually needs.

* Clean up OptIn a bit in preparation for adding A/B test checkbox

* Finish OptIn tidy-up

* Stub out new A/B test opt-in setting. Add draft strings for it.

* Implement the enable_abtests conf setting and plug it into the checkbox stub in OptIn

* Do not call setupABTests if enable_abtests is false

* Skip the call to the AB server altogether if ab tests are disabled

* Update AB test setting tooltip copy. remove enable_abtests from uninstall URL. Add ts metrics query string param for whether tests are enabled. Disabled sending other AB test query string params unless tests are enabled.

* Remove unused import from Metrics

* Update test snapshot

* Fix typo

* Fix comment errors

* Remove bloom filter Cliqz test

* remove comment

Co-authored-by: Christopher Tino <christopher_tino@yahoo.com>
Co-authored-by: Christopher Tino <4699516+christophertino@users.noreply.github.com>

_locales/en/messages.json

@@ -947,6 +947,9 @@
 	"settings_allow_offers": {
 		"message": "Participating in Ghostery Rewards"
 	},
+  	"settings_allow_abtests": {
+	  	"message": "Participating in A/B Tests"
+	},
 	"settings_signin_create_header": {
 		"message": "Sign In / Create Account"
 	},
@@ -1037,6 +1040,9 @@
 	"settings_offers_tooltip": {
 		"message": "Ghostery Rewards is a private-by-design feature that delivers you discounts and special offers from our partner companies as you browse."
 	},
+  	"settings_abtests_tooltip": {
+	  	"message": "Participating in randomized A/B tests helps Ghostery understand which version of a new layout or feature users like you prefer."
+	},
 	"settings_opt_in": {
 		"message": "Opt In / Out"
 	},

app/panel/components/Settings/OptIn.jsx

@@ -18,69 +18,92 @@ import globals from '../../../../src/classes/Globals';
 const { IS_CLIQZ, BROWSER_INFO } = globals;
 const IS_ANDROID = (BROWSER_INFO.os === 'android');
 
+const TOOLTIP_SVG_FILEPATH = '../../app/images/panel/icon-information-tooltip.svg';
+
 /**
  * @class Implement Opt In subview as a React component.
  * The view opens from the left-side menu of the main Settings view.
  * It invites user to opt in for telemetry options, human web and offers
  * @memberOf SettingsComponents
  */
-const OptIn = ({ settingsData, toggleCheckbox }) => (
-	<div className="s-tabs-panel">
-		<div className="row">
-			<div className="columns">
-				<h3>{ t('settings_support_ghostery') }</h3>
-				<h5>
-					{ t('settings_support_ghostery_by') }
-					:
-				</h5>
-				<div className="s-option-group">
-					<div className="s-square-checkbox">
-						<input type="checkbox" id="settings-share-usage" name="enable_metrics" defaultChecked={settingsData.enable_metrics} onClick={toggleCheckbox} />
-						<label htmlFor="settings-share-usage">
-							<span>{ t('settings_share_usage') }</span>
-						</label>
-						<div className="s-tooltip-down" data-g-tooltip={t('settings_share_usage_tooltip')}>
-							<img src="../../app/images/panel/icon-information-tooltip.svg" className="s-question" />
-						</div>
-					</div>
+const OptIn = ({ settingsData, toggleCheckbox }) => {
+	const checkbox = (opt, name) => (
+		<input
+			type="checkbox"
+			id={`settings-${opt}`}
+			name={name}
+			defaultChecked={settingsData[name]}
+			onClick={toggleCheckbox}
+		/>
+	);
+
+	const labelFor = (opt, text) => (
+		<label htmlFor={`settings-${opt}`}>
+			<span>{text}</span>
+		</label>
+	);
+
+	const tooltipSVG = (text, dir) => (
+		<div className={`s-tooltip-${dir}`} data-g-tooltip={text}>
+			<img src={TOOLTIP_SVG_FILEPATH} className="s-question" />
+		</div>
+	);
+
+	const option = (cbox, label, tooltip, id = '') => (
+		<div className="s-option-group" id={id}>
+			<div className="s-square-checkbox">
+				{cbox}
+				{label}
+				{tooltip}
+			</div>
+		</div>
+	);
+
+	return (
+		<div className="s-tabs-panel">
+			<div className="row">
+				<div className="columns">
+					<h3>{t('settings_support_ghostery')}</h3>
+					<h5>
+						{t('settings_support_ghostery_by')}
+						:
+					</h5>
+					{option(
+						checkbox('share-usage', 'enable_metrics'),
+						labelFor('share-usage', t('settings_share_usage')),
+						tooltipSVG(t('settings_share_usage_tooltip'), 'down')
+					)}
+					{!IS_CLIQZ && option(
+						checkbox('share-human-web', 'enable_human_web'),
+						labelFor('share-human-web', t('settings_share_human_web')),
+						tooltipSVG(t('settings_human_web_tooltip'), 'up'),
+						'human-web-section'
+					)}
+					{!IS_CLIQZ && !IS_ANDROID && option(
+						checkbox('allow-offers', 'enable_offers'),
+						labelFor('allow-offers', t('settings_allow_offers')),
+						tooltipSVG(t('settings_offers_tooltip'), 'up'),
+						'offers-section'
+					)}
+					{option(
+						checkbox('allow-abtests', 'enable_abtests'),
+						labelFor('allow-abtests', t('settings_allow_abtests')),
+						tooltipSVG(t('settings_abtests_tooltip'), 'up'),
+						'abtests-section'
+					)}
 				</div>
-				{!IS_CLIQZ && (
-					<div className="s-option-group" id="human-web-section">
-						<div className="s-square-checkbox">
-							<input type="checkbox" id="settings-share-human-web" name="enable_human_web" defaultChecked={settingsData.enable_human_web} onClick={toggleCheckbox} />
-							<label htmlFor="settings-share-human-web">
-								<span>{ t('settings_share_human_web') }</span>
-							</label>
-							<div className="s-tooltip-up" data-g-tooltip={t('settings_human_web_tooltip')}>
-								<img src="../../app/images/panel/icon-information-tooltip.svg" className="s-question" />
-							</div>
-						</div>
-					</div>
-				)}
-				{!IS_CLIQZ && !IS_ANDROID && (
-					<div className="s-option-group" id="offers-section">
-						<div className="s-square-checkbox">
-							<input type="checkbox" id="settings-allow-offers" name="enable_offers" defaultChecked={settingsData.enable_offers} onClick={toggleCheckbox} />
-							<label htmlFor="settings-allow-offers">
-								<span>{ t('settings_allow_offers') }</span>
-							</label>
-							<div className="s-tooltip-up" data-g-tooltip={t('settings_offers_tooltip')}>
-								<img src="../../app/images/panel/icon-information-tooltip.svg" className="s-question" />
-							</div>
-						</div>
-					</div>
-				)}
 			</div>
 		</div>
-	</div>
-);
+	);
+};
 
 OptIn.propTypes = {
 	toggleCheckbox: PropTypes.func.isRequired,
 	settingsData: PropTypes.shape({
 		enable_metrics: PropTypes.bool.isRequired,
 		enable_human_web: PropTypes.bool.isRequired,
 		enable_offers: PropTypes.bool.isRequired,
+		enable_abtests: PropTypes.bool.isRequired,
 	}).isRequired,
 };
 

app/panel/components/Settings/__tests__/__snapshots__/OptIn.jsx.snap

@@ -19,6 +19,7 @@ exports[`app/panel/Settings/OptIn.jsx Snapshot tests with react-test-renderer Op
       </h5>
       <div
         className="s-option-group"
+        id=""
       >
         <div
           className="s-square-checkbox"
@@ -112,6 +113,37 @@ exports[`app/panel/Settings/OptIn.jsx Snapshot tests with react-test-renderer Op
           </div>
         </div>
       </div>
+      <div
+        className="s-option-group"
+        id="abtests-section"
+      >
+        <div
+          className="s-square-checkbox"
+        >
+          <input
+            id="settings-allow-abtests"
+            name="enable_abtests"
+            onClick={[Function]}
+            type="checkbox"
+          />
+          <label
+            htmlFor="settings-allow-abtests"
+          >
+            <span>
+              settings_allow_abtests
+            </span>
+          </label>
+          <div
+            className="s-tooltip-up"
+            data-g-tooltip="settings_abtests_tooltip"
+          >
+            <img
+              className="s-question"
+              src="../../app/images/panel/icon-information-tooltip.svg"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -136,6 +168,7 @@ exports[`app/panel/Settings/OptIn.jsx Snapshot tests with react-test-renderer Op
       </h5>
       <div
         className="s-option-group"
+        id=""
       >
         <div
           className="s-square-checkbox"
@@ -229,6 +262,37 @@ exports[`app/panel/Settings/OptIn.jsx Snapshot tests with react-test-renderer Op
           </div>
         </div>
       </div>
+      <div
+        className="s-option-group"
+        id="abtests-section"
+      >
+        <div
+          className="s-square-checkbox"
+        >
+          <input
+            id="settings-allow-abtests"
+            name="enable_abtests"
+            onClick={[Function]}
+            type="checkbox"
+          />
+          <label
+            htmlFor="settings-allow-abtests"
+          >
+            <span>
+              settings_allow_abtests
+            </span>
+          </label>
+          <div
+            className="s-tooltip-up"
+            data-g-tooltip="settings_abtests_tooltip"
+          >
+            <img
+              className="s-question"
+              src="../../app/images/panel/icon-information-tooltip.svg"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>