Finalize SideNavigation, tests for HomeView

ghostery · jsignanini · Aug 31, 2018 · Aug 15, 2018 · Aug 23, 2018 · Aug 30, 2018
commit ca19d8fd12c28609069ceacb7b147e4ced9764e8
@@ -1606,9 +1606,12 @@
 		"message": "Start Browsing!"
 	},
 	"hub_home_header_checkbox_label": {
-		"message": "Share analytics and Human Web data to improve Ghostery’s performance. "
+		"message": "Share additional anonymous analytics data to improve Ghostery’s performance."
 	},
-	"hub_home_header_checkbox_link": {
+	"hub_home_header_info": {
+		"message": "New users are opted in to participating in Human Web and Ghostery Rewards. You may change these settings in custom setup or in the extension. "
+	},
+	"hub_home_header_info_link": {
 		"message": "Learn More."
 	},
 	"hub_home_subheader_optimize": {
@@ -1758,7 +1761,7 @@
 		"message": "We use anonymous Human Web data to improve Ghostery’s performance. No personal data is ever collected. $LINK_LM_START$Learn More$LINK_LM_END$",
 		"placeholders": {
 			"link_lm_start": {
-				"content": "<a href=\"https://www.ghostery.com/faqs/human-web-data-collected/\" target=\"_blank\">"
+				"content": "<a href=\"https://www.ghostery.com/faqs/human-web-data-collected/\" target=\"_blank\" rel=\"noopener noreferrer\">"
 			},
 			"link_lm_end": {
 				"content": "</a>"

@@ -13,80 +13,21 @@
  * ToDo: Update this file.
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import SideNavigation from './Views/SideNavigationView';
 
 /**
- * @class Implements the container App for the Ghostery Hub
- * @extends Component
+ * A Functional React Component for rendering the Ghostery Hub App
+ * @return {JSX} JSX for rendering the Ghostery Hub App
  * @memberof HubComponents
  */
-class App extends Component {
-	constructor(props) {
-		super(props);
-
-		this.state = {
-			menu: {
-				items: [
-					{ location: 'top', text: 'Ghostery' },
-					{
-						location: 'list', type: 'link', href: '/', icon: 'home', text: 'Home'
-					},
-					{
-						location: 'list', type: 'link', href: '/setup', icon: 'home', text: 'Customize Setup'
-					},
-					{
-						location: 'list', type: 'link', href: '/tutorial', icon: 'home', text: 'Visit Tutorial'
-					},
-					{
-						location: 'list', type: 'link', href: '/supporter', icon: 'home', text: 'Become a Ghostery Supporter'
-					},
-					{
-						location: 'list', type: 'link', href: '/rewards', icon: 'home', text: 'Check out Ghostery Rewards'
-					},
-					{
-						location: 'list', type: 'link', href: '/products', icon: 'home', text: 'Try other Ghostery Products'
-					},
-					{
-						location: 'bottom', type: 'modal', icon: 'share', text: 'Share with Friends'
-					},
-					{ location: 'bottom', type: 'separator' },
-					{
-						location: 'bottom', type: 'link', href: '/create-account', text: 'Create Account'
-					},
-					{
-						location: 'bottom', type: 'link', href: '/log-in', text: 'Log In'
-					},
-				],
-			},
-		};
-	}
-
-	/**
-	 * Lifecycle Event
-	 */
-	componentWillMount() {
-		window.document.title = '';
-	}
-
-	/**
-	 * React's required render function. Returns JSX
-	 * @return {JSX} JSX for rendering the Hub app
-	 */
-	render() {
-		const { menu } = this.state;
-
-		return (
-			<div className="App">
-				<div className="App__leftNavigation">
-					<SideNavigation items={menu.items} />
-				</div>
-				<div className="App__mainContent">
-					{this.props.children}
-				</div>
-			</div>
-		);
-	}
-}
+const App = props => (
+	<div className="App full-height full-width flex-container">
+		<SideNavigation />
+		<div className="App__mainContent full-height flex-child-grow">
+			{props.children}
+		</div>
+	</div>
+);
 
 export default App;
@@ -27,8 +27,8 @@ const HomeView = (props) => {
 		justInstalled,
 		setup_complete,
 		tutorial_complete,
-		enable_human_web,
-		changeHumanWeb,
+		enable_metrics,
+		changeMetrics,
 		account_text,
 		account_link,
 	} = props;
@@ -64,17 +64,22 @@ const HomeView = (props) => {
 						<div className="HomeView__headerTagline HomeView--bolded">
 							{t('hub_home_header_tagline_2')}
 						</div>
+						<div className="HomeView__supportContainer HomeView--pad-left">
+							<span>
+								{t('hub_home_header_info')}
+							</span>
+							<a href="https://www.ghostery.com/faqs/" alt={t('hub_home_header_info_link')} target="_blank" rel="noopener noreferrer">
+								{t('hub_home_header_info_link')}
+							</a>
+						</div>
 						<div className="HomeView__supportContainer flex-container align-middle">
 							<ToggleCheckbox
-								checked={enable_human_web}
-								onChange={changeHumanWeb}
+								checked={enable_metrics}
+								onChange={changeMetrics}
 							/>
-							<div>
-								<span>{t('hub_home_header_checkbox_label')}</span>
-								<NavLink to="/faq">
-									{t('hub_home_header_checkbox_link')}
-								</NavLink>
-							</div>
+							<span className="clickable" onClick={changeMetrics}>
+								{t('hub_home_header_checkbox_label')}
+							</span>
 						</div>
 					</div>
 				</div>
@@ -133,10 +138,11 @@ const HomeView = (props) => {
 
 // PropTypes ensure we pass required props of the correct type
 HomeView.propTypes = {
+	justInstalled: PropTypes.bool.isRequired,
 	setup_complete: PropTypes.bool.isRequired,
 	tutorial_complete: PropTypes.bool.isRequired,
-	enable_human_web: PropTypes.bool.isRequired,
-	changeHumanWeb: PropTypes.func.isRequired,
+	enable_metrics: PropTypes.bool.isRequired,
+	changeMetrics: PropTypes.func.isRequired,
 	account_text: PropTypes.string.isRequired,
 	account_link: PropTypes.string.isRequired,
 };

@@ -20,6 +20,9 @@
 .HomeView--bolded {
 	font-weight: 700;
 }
+.HomeView--pad-left {
+	padding-left: 12px;
+}
 .HomeView__header img {
 	max-width: 156px;
 	margin-right: 23px;
@@ -79,23 +82,23 @@
 	background-position: center center;
 }
 .HomeView__onboardingFeature.feature-tutorial .HomeView__featureIcon {
-	background-image: buildIconWand(#4a4a4a);
+	background-image: buildIconWand(#4a4a4a, #daf4ff);
 }
 .HomeView__onboardingFeature.feature-tutorial-complete .HomeView__featureIcon {
 	width: 100px;
 	margin: 0 0 0 50px;
-	background-image: buildIconWandCheck(#4a4a4a);
+	background-image: buildIconWandCheck(#4a4a4a, #daf4ff, #1dafed);
 }
 .HomeView__onboardingFeature.feature-setup .HomeView__featureIcon {
-	background-image: buildIconClipboard(#4a4a4a);
+	background-image: buildIconClipboard(#4a4a4a, #daf4ff);
 }
 .HomeView__onboardingFeature.feature-setup-complete .HomeView__featureIcon {
 	width: 100px;
 	margin: 0 0 0 50px;
-	background-image: buildIconClipboardCheck(#4a4a4a);
+	background-image: buildIconClipboardCheck(#4a4a4a, #daf4ff, #1dafed);
 }
 .HomeView__featureIcon.feature-supporter {
-	background-image: buildIconFlag(#4a4a4a);
+	background-image: buildIconFlag(#4a4a4a, #daf4ff);
 }
 .HomeView__featureTitle {
 	text-align: center;
@@ -109,11 +112,6 @@
 }
 .HomeView__featureButton {
 	margin: 0;
-	font-size: 14px;
-	font-weight: 700;
-	line-height: 1.3;
-	text-transform: uppercase;
-	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
 }
 .HomeView__onboarding .HomeView__featureButton {
 	margin-top: 26px;

@@ -12,7 +12,7 @@
  */
 
 import { log, sendMessageInPromise } from '../../utils';
-import { GET_HOME_PROPS, SET_HUMAN_WEB } from './HomeViewConstants';
+import { GET_HOME_PROPS, SET_METRICS } from './HomeViewConstants';
 
 export function getHomeProps() {
 	return function (dispatch) {
@@ -27,15 +27,15 @@ export function getHomeProps() {
 	};
 }
 
-export function setHumanWeb(actionData) {
+export function setMetrics(actionData) {
 	return function (dispatch) {
-		return sendMessageInPromise(SET_HUMAN_WEB, actionData).then((data) => {
+		return sendMessageInPromise(SET_METRICS, actionData).then((data) => {
 			dispatch({
-				type: SET_HUMAN_WEB,
+				type: SET_METRICS,
 				data,
 			});
 		}).catch((err) => {
-			log('homeView Action setHumanWeb Error', err);
+			log('homeView Action setMetrics Error', err);
 		});
 	};
 }
@@ -13,4 +13,4 @@
 
 // Home View
 export const GET_HOME_PROPS = 'GET_HOME_PROPS';
-export const SET_HUMAN_WEB = 'SET_HUMAN_WEB';
+export const SET_METRICS = 'SET_METRICS';
@@ -27,7 +27,7 @@ class HomeViewContainer extends React.Component {
 
 		const { justInstalled } = QueryString.parse(window.location.search);
 		this.state = {
-			justInstalled,
+			justInstalled: justInstalled === 'true',
 		};
 
 		const title = t('hub_home_page_title');
@@ -37,11 +37,11 @@ class HomeViewContainer extends React.Component {
 	}
 
 	/**
-	* Function to handle toggling Human Web Opt-In
+	* Function to handle toggling Metrics Opt-In
 	*/
-	_handleToggleHumanWeb = () => {
-		const enable_human_web = !this.props.home.enable_human_web;
-		this.props.actions.setHumanWeb({ enable_human_web });
+	_handleToggleMetrics = () => {
+		const enable_metrics = !this.props.home.enable_metrics;
+		this.props.actions.setMetrics({ enable_metrics });
 	}
 
 	/**
@@ -58,14 +58,14 @@ class HomeViewContainer extends React.Component {
 		const {
 			setup_complete,
 			tutorial_complete,
-			enable_human_web,
+			enable_metrics,
 		} = this.props.home;
 		const childProps = {
 			justInstalled,
 			setup_complete,
 			tutorial_complete,
-			enable_human_web,
-			changeHumanWeb: this._handleToggleHumanWeb,
+			enable_metrics,
+			changeMetrics: this._handleToggleMetrics,
 			account_text,
 			account_link,
 		};
@@ -80,7 +80,7 @@ HomeViewContainer.propTypes = {
 	home: PropTypes.shape({
 		setup_complete: PropTypes.bool,
 		tutorial_complete: PropTypes.bool,
-		enable_human_web: PropTypes.bool,
+		enable_metrics: PropTypes.bool,
 		account_text: PropTypes.string,
 		account_link: PropTypes.string,
 	}),
@@ -91,7 +91,7 @@ HomeViewContainer.defaultProps = {
 	home: {
 		setup_complete: false,
 		tutorial_complete: false,
-		enable_human_web: false,
+		enable_metrics: false,
 		account_text: '',
 		account_link: '',
 	},

@@ -11,7 +11,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 
-import { GET_HOME_PROPS, SET_HUMAN_WEB } from './HomeViewConstants';
+import { GET_HOME_PROPS, SET_METRICS } from './HomeViewConstants';
 
 const initialState = {};
 
@@ -21,24 +21,24 @@ function HomeViewReducer(state = initialState, action) {
 			const {
 				setup_complete,
 				tutorial_complete,
-				enable_human_web,
+				enable_metrics,
 				account_text,
 				account_link,
 			} = action.data;
 			return Object.assign({}, state, {
 				home: Object.assign({}, state.home, {
 					setup_complete,
 					tutorial_complete,
-					enable_human_web,
+					enable_metrics,
 					account_text,
 					account_link,
 				}),
 			});
 		}
-		case SET_HUMAN_WEB: {
-			const { enable_human_web } = action.data;
+		case SET_METRICS: {
+			const { enable_metrics } = action.data;
 			return Object.assign({}, state, {
-				home: Object.assign({}, state.home, { enable_human_web }),
+				home: Object.assign({}, state.home, { enable_metrics }),
 			});
 		}