Add informational notice about how to disable analytics collection

Change-type: minor

lib/gui/app/components/source-selector/source-selector.tsx

@@ -308,6 +308,7 @@ const FlowSelector = styled(
 
 interface SourceSelectorProps {
 	flashing: boolean;
+	hideAnalyticsAlert: () => void;
 }
 
 interface SourceSelectorState {
@@ -359,6 +360,20 @@ export class SourceSelector extends React.Component<
 		ipcRenderer.removeListener('select-image', this.onSelectImage);
 	}
 
+	public componentDidUpdate(
+		_prevProps: Readonly<SourceSelectorProps>,
+		prevState: Readonly<SourceSelectorState>,
+	) {
+		if (
+			(!prevState.showDriveSelector && this.state.showDriveSelector) ||
+			(!prevState.showURLSelector && this.state.showURLSelector) ||
+			(!prevState.showImageDetails && this.state.showImageDetails) ||
+			(!prevState.imageSelectorOpen && this.state.imageSelectorOpen)
+		) {
+			this.props.hideAnalyticsAlert();
+		}
+	}
+
 	private async onSelectImage(_event: IpcRendererEvent, imagePath: string) {
 		this.setState({ imageLoading: true });
 		await this.selectSource(
@@ -382,6 +397,7 @@ export class SourceSelector extends React.Component<
 		});
 
 		selectionState.deselectImage();
+		this.props.hideAnalyticsAlert();
 	}
 
 	private selectSource(

lib/gui/app/components/target-selector/target-selector.tsx

@@ -100,12 +100,14 @@ interface TargetSelectorProps {
 	disabled: boolean;
 	hasDrive: boolean;
 	flashing: boolean;
+	hideAnalyticsAlert: () => void;
 }
 
 export const TargetSelector = ({
 	disabled,
 	hasDrive,
 	flashing,
+	hideAnalyticsAlert,
 }: TargetSelectorProps) => {
 	// TODO: inject these from redux-connector
 	const [{ driveListLabel, targets }, setStateSlice] = React.useState(
@@ -137,6 +139,7 @@ export const TargetSelector = ({
 				tooltip={driveListLabel}
 				openDriveSelector={() => {
 					setShowTargetSelectorModal(true);
+					hideAnalyticsAlert();
 				}}
 				reselectDrive={() => {
 					analytics.logEvent('Reselect drive');

lib/gui/app/pages/main/MainPage.tsx

@@ -15,12 +15,13 @@
  */
 
 import CogSvg from '@fortawesome/fontawesome-free/svgs/solid/gear.svg';
+import CloseSvg from '@fortawesome/fontawesome-free/svgs/solid/x.svg';
 import QuestionCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle-question.svg';
 
 import * as path from 'path';
 import prettyBytes from 'pretty-bytes';
 import * as React from 'react';
-import { Flex } from 'rendition';
+import { Alert, Flex, Link } from 'rendition';
 import styled from 'styled-components';
 
 import FinishPage from '../../components/finish/finish';
@@ -35,6 +36,7 @@ import { observe } from '../../models/store';
 import { open as openExternal } from '../../os/open-external/services/open-external';
 import {
 	IconButton as BaseIcon,
+	IconButton,
 	ThemedProvider,
 } from '../../styled-components';
 
@@ -46,6 +48,7 @@ import { FlashStep } from './Flash';
 
 import EtcherSvg from '../../../assets/etcher.svg';
 import { SafeWebview } from '../../components/safe-webview/safe-webview';
+import { theme } from '../../theme';
 
 const Icon = styled(BaseIcon)`
 	margin-right: 20px;
@@ -97,6 +100,8 @@ const StepBorder = styled.div<{
 	margin-left: ${(props) => (props.right ? '-120px' : undefined)};
 `;
 
+const ANALYTICS_ALERT_VISIBILITY_KEY = 'analytics_alert_visible';
+
 interface MainPageStateFromStore {
 	isFlashing: boolean;
 	hasImage: boolean;
@@ -113,6 +118,7 @@ interface MainPageState {
 	isWebviewShowing: boolean;
 	hideSettings: boolean;
 	featuredProjectURL?: string;
+	analyticsAlertIsVisible: boolean;
 }
 
 export class MainPage extends React.Component<
@@ -125,6 +131,8 @@ export class MainPage extends React.Component<
 			current: 'main',
 			isWebviewShowing: false,
 			hideSettings: true,
+			analyticsAlertIsVisible:
+				localStorage.getItem(ANALYTICS_ALERT_VISIBILITY_KEY) !== 'false',
 			...this.stateHelper(),
 		};
 	}
@@ -153,6 +161,13 @@ export class MainPage extends React.Component<
 		return url.toString();
 	}
 
+	private hideAnalyticsAlert = () => {
+		if (this.state.analyticsAlertIsVisible) {
+			localStorage.setItem(ANALYTICS_ALERT_VISIBILITY_KEY, 'false');
+			this.setState({ analyticsAlertIsVisible: false });
+		}
+	};
+
 	public async componentDidMount() {
 		observe(() => {
 			this.setState(this.stateHelper());
@@ -160,6 +175,17 @@ export class MainPage extends React.Component<
 		this.setState({ featuredProjectURL: await this.getFeaturedProjectURL() });
 	}
 
+	public componentDidUpdate(
+		_prevProps: object,
+		prevState: Readonly<MainPageState & MainPageStateFromStore>,
+	) {
+		if (this.state.analyticsAlertIsVisible) {
+			if (prevState.hideSettings !== this.state.hideSettings) {
+				this.setState({ analyticsAlertIsVisible: false });
+			}
+		}
+	}
+
 	private renderMain() {
 		const state = flashState.getFlashState();
 		const shouldDriveStepBeDisabled = !this.state.hasImage;
@@ -169,12 +195,19 @@ export class MainPage extends React.Component<
 			!this.state.isFlashing || !this.state.isWebviewShowing;
 		return (
 			<Flex
-				m={`110px ${this.state.isWebviewShowing ? 35 : 55}px`}
+				m={`110px ${this.state.isWebviewShowing ? 35 : 55}px 18px ${this.state.isWebviewShowing ? 35 : 55}px`}
+				flexDirection="column"
+			>
+				<Flex
 					justifyContent="space-between"
+					mb={this.state.analyticsAlertIsVisible ? '0px' : '92px'}
 				>
 					{notFlashingOrSplitView && (
 						<>
-						<SourceSelector flashing={this.state.isFlashing} />
+							<SourceSelector
+								flashing={this.state.isFlashing}
+								hideAnalyticsAlert={this.hideAnalyticsAlert}
+							/>
 							<Flex>
 								<StepBorder disabled={shouldDriveStepBeDisabled} left />
 							</Flex>
@@ -182,6 +215,7 @@ export class MainPage extends React.Component<
 								disabled={shouldDriveStepBeDisabled}
 								hasDrive={this.state.hasDrive}
 								flashing={this.state.isFlashing}
+								hideAnalyticsAlert={this.hideAnalyticsAlert}
 							/>
 							<Flex>
 								<StepBorder disabled={shouldFlashStepBeDisabled} right />
@@ -250,6 +284,39 @@ export class MainPage extends React.Component<
 						style={{ zIndex: 1 }}
 					/>
 				</Flex>
+				{this.state.analyticsAlertIsVisible && (
+					<Alert mt="18px" style={{ boxShadow: 'none', fontSize: '12px' }}>
+						<Flex alignItems="center" justifyContent="space-between">
+							<Flex flexDirection="column">
+								<div>
+									Etcher collects a limited amount of anonymous data to help us
+									improve user experience. You can opt out in the{' '}
+									<Link onClick={() => this.setState({ hideSettings: false })}>
+										settings
+									</Link>
+									.
+								</div>
+								<div>
+									For more information about how we use this data, see our{' '}
+									<Link
+										onClick={(e) => {
+											e.stopPropagation();
+											openExternal('https://www.balena.io/privacy-policy');
+										}}
+									>
+										privacy policy
+									</Link>
+									.
+								</div>
+							</Flex>
+							{/* TODO: can we use onDismiss instead? */}
+							<IconButton onClick={this.hideAnalyticsAlert}>
+								<CloseSvg height="0.75rem" fill={theme.colors.text.main} />
+							</IconButton>
+						</Flex>
+					</Alert>
+				)}
+			</Flex>
 		);
 	}